* Type TokenSelectField * Type collectibleSelectField Remove anys in SendCollectibleTxInfo Fix cast in SendModal * Replace cast to toString Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
parent
f69bffd089
commit
c9fb7fcc10
|
@ -161,7 +161,7 @@ const SendModal = ({
|
|||
onClose={onClose}
|
||||
onNext={handleSendCollectible}
|
||||
recipientAddress={recipientAddress}
|
||||
selectedToken={selectedToken as NFTToken}
|
||||
selectedToken={selectedToken as NFTToken | undefined}
|
||||
/>
|
||||
)}
|
||||
{activeScreen === 'reviewCollectible' && (
|
||||
|
|
|
@ -13,10 +13,16 @@ import Img from 'src/components/layout/Img'
|
|||
import Paragraph from 'src/components/layout/Paragraph'
|
||||
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
|
||||
import { textShortener } from 'src/utils/strings'
|
||||
import { NFTToken } from 'src/logic/collectibles/sources/collectibles'
|
||||
|
||||
const useSelectedCollectibleStyles = makeStyles(selectedTokenStyles)
|
||||
|
||||
const SelectedCollectible = ({ tokenId, tokens }) => {
|
||||
type SelectedCollectibleProps = {
|
||||
tokenId?: number | string
|
||||
tokens: NFTToken[]
|
||||
}
|
||||
|
||||
const SelectedCollectible = ({ tokenId, tokens }: SelectedCollectibleProps): React.ReactElement => {
|
||||
const classes = useSelectedCollectibleStyles()
|
||||
const token = tokenId && tokens ? tokens.find(({ tokenId: id }) => tokenId === id) : null
|
||||
const shortener = textShortener({ charsStart: 40, charsEnd: 0 })
|
||||
|
@ -31,7 +37,7 @@ const SelectedCollectible = ({ tokenId, tokens }) => {
|
|||
<ListItemText
|
||||
className={classes.tokenData}
|
||||
primary={shortener(token.name)}
|
||||
secondary={`token ID: ${shortener(token.tokenId)}`}
|
||||
secondary={`token ID: ${shortener(token.tokenId.toString())}`}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
@ -45,7 +51,12 @@ const SelectedCollectible = ({ tokenId, tokens }) => {
|
|||
|
||||
const useCollectibleSelectFieldStyles = makeStyles(selectStyles)
|
||||
|
||||
const CollectibleSelectField = ({ initialValue, tokens }) => {
|
||||
type CollectibleSelectFieldProps = {
|
||||
initialValue?: number | string
|
||||
tokens: NFTToken[]
|
||||
}
|
||||
|
||||
export const CollectibleSelectField = ({ initialValue, tokens }: CollectibleSelectFieldProps): React.ReactElement => {
|
||||
const classes = useCollectibleSelectFieldStyles()
|
||||
|
||||
return (
|
||||
|
@ -69,5 +80,3 @@ const CollectibleSelectField = ({ initialValue, tokens }) => {
|
|||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
export default CollectibleSelectField
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { sm } from 'src/theme/variables'
|
||||
import { createStyles } from '@material-ui/core'
|
||||
|
||||
export const selectedTokenStyles = () => ({
|
||||
export const selectedTokenStyles = createStyles({
|
||||
container: {
|
||||
minHeight: '55px',
|
||||
padding: 0,
|
||||
|
@ -16,7 +17,7 @@ export const selectedTokenStyles = () => ({
|
|||
},
|
||||
})
|
||||
|
||||
export const selectStyles = () => ({
|
||||
export const selectStyles = createStyles({
|
||||
selectMenu: {
|
||||
paddingRight: 0,
|
||||
},
|
||||
|
|
|
@ -14,10 +14,16 @@ import Paragraph from 'src/components/layout/Paragraph'
|
|||
import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
|
||||
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
|
||||
import { textShortener } from 'src/utils/strings'
|
||||
import { NFTAssets } from 'src/logic/collectibles/sources/collectibles'
|
||||
|
||||
const useSelectedTokenStyles = makeStyles(selectedTokenStyles)
|
||||
|
||||
const SelectedToken = ({ assetAddress, assets }) => {
|
||||
type SelectedTokenProps = {
|
||||
assetAddress?: string
|
||||
assets: NFTAssets
|
||||
}
|
||||
|
||||
const SelectedToken = ({ assetAddress, assets }: SelectedTokenProps): React.ReactElement => {
|
||||
const classes = useSelectedTokenStyles()
|
||||
const asset = assetAddress ? assets[assetAddress] : null
|
||||
const shortener = textShortener({ charsStart: 40, charsEnd: 0 })
|
||||
|
@ -32,7 +38,7 @@ const SelectedToken = ({ assetAddress, assets }) => {
|
|||
<ListItemText
|
||||
className={classes.tokenData}
|
||||
primary={shortener(asset.name)}
|
||||
secondary={`${formatAmount(asset.numberOfTokens)} ${asset.symbol}`}
|
||||
secondary={`${formatAmount(asset.numberOfTokens.toString())} ${asset.symbol}`}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
@ -46,7 +52,12 @@ const SelectedToken = ({ assetAddress, assets }) => {
|
|||
|
||||
const useTokenSelectFieldStyles = makeStyles(selectStyles)
|
||||
|
||||
const TokenSelectField = ({ assets, initialValue }) => {
|
||||
type TokenSelectFieldProps = {
|
||||
assets: NFTAssets
|
||||
initialValue?: string
|
||||
}
|
||||
|
||||
const TokenSelectField = ({ assets, initialValue }: TokenSelectFieldProps): React.ReactElement => {
|
||||
const classes = useTokenSelectFieldStyles()
|
||||
const assetsAddresses = Object.keys(assets)
|
||||
|
||||
|
@ -70,7 +81,7 @@ const TokenSelectField = ({ assets, initialValue }) => {
|
|||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={asset.name}
|
||||
secondary={`Count: ${formatAmount(asset.numberOfTokens)} ${asset.symbol}`}
|
||||
secondary={`Count: ${formatAmount(asset.numberOfTokens.toString())} ${asset.symbol}`}
|
||||
/>
|
||||
</MenuItem>
|
||||
)
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { sm } from 'src/theme/variables'
|
||||
import { createStyles } from '@material-ui/core'
|
||||
|
||||
export const selectedTokenStyles = () => ({
|
||||
export const selectedTokenStyles = createStyles({
|
||||
container: {
|
||||
minHeight: '55px',
|
||||
padding: 0,
|
||||
|
@ -16,7 +17,7 @@ export const selectedTokenStyles = () => ({
|
|||
},
|
||||
})
|
||||
|
||||
export const selectStyles = () => ({
|
||||
export const selectStyles = createStyles({
|
||||
selectMenu: {
|
||||
paddingRight: 0,
|
||||
},
|
||||
|
|
|
@ -20,7 +20,7 @@ import { getNameFromAddressBook } from 'src/logic/addressBook/utils'
|
|||
import { nftTokensSelector, safeActiveSelectorMap } from 'src/logic/collectibles/store/selectors'
|
||||
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
|
||||
import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
|
||||
import CollectibleSelectField from 'src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField'
|
||||
import { CollectibleSelectField } from 'src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField'
|
||||
import TokenSelectField from 'src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField'
|
||||
import { sm } from 'src/theme/variables'
|
||||
|
||||
|
@ -50,7 +50,7 @@ type SendCollectibleProps = {
|
|||
onClose: () => void
|
||||
onNext: (txInfo: SendCollectibleTxInfo) => void
|
||||
recipientAddress?: string
|
||||
selectedToken: NFTToken
|
||||
selectedToken?: NFTToken
|
||||
}
|
||||
|
||||
export type SendCollectibleTxInfo = {
|
||||
|
@ -220,7 +220,7 @@ const SendCollectible = ({
|
|||
</Row>
|
||||
<Row margin="sm">
|
||||
<Col>
|
||||
<TokenSelectField assets={nftAssets} initialValue={(selectedToken as any).assetAddress} />
|
||||
<TokenSelectField assets={nftAssets} initialValue={selectedToken?.assetAddress} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row margin="xs">
|
||||
|
@ -232,7 +232,7 @@ const SendCollectible = ({
|
|||
</Row>
|
||||
<Row margin="md">
|
||||
<Col>
|
||||
<CollectibleSelectField initialValue={(selectedToken as any).tokenId} tokens={selectedNFTTokens} />
|
||||
<CollectibleSelectField initialValue={selectedToken?.tokenId} tokens={selectedNFTTokens} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Block>
|
||||
|
|
Loading…
Reference in New Issue