(Fix) - #1554 Send collectible crash on addressBook (#1559)

* 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>

src/routes/safe/components/Balances/SendModal/index.tsx

@@ -161,7 +161,7 @@ const SendModal = ({
             onClose={onClose}
             onNext={handleSendCollectible}
             recipientAddress={recipientAddress}
-            selectedToken={selectedToken as NFTToken}
+            selectedToken={selectedToken as NFTToken | undefined}
           />
         )}
         {activeScreen === 'reviewCollectible' && (

src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx

@@ -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

src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts

@@ -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,
   },

src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx

@@ -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>
         )

src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts

@@ -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,
   },

src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx

@@ -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>