Add support for collectibles

src/logic/tokens/utils/tokenHelpers.ts

@@ -1,6 +1,11 @@
+import memoize from 'lodash.memoize'
 import logo from 'src/assets/icons/icon_etherTokens.svg'
 import generateBatchRequests from 'src/logic/contracts/generateBatchRequests'
-import { getStandardTokenContract, getTokenInfos } from 'src/logic/tokens/store/actions/fetchTokens'
+import {
+  getStandardTokenContract,
+  getTokenInfos,
+  getERC721TokenContract,
+} from 'src/logic/tokens/store/actions/fetchTokens'
 import { makeToken, Token } from 'src/logic/tokens/store/model/token'
 import { ALTERNATIVE_TOKEN_ABI } from 'src/logic/tokens/utils/alternativeAbi'
 import { web3ReadOnly as web3 } from 'src/logic/wallets/getWeb3'
@@ -46,6 +51,12 @@ export const isSendERC721Transaction = (tx: any, txCode: string, knownTokens: an
   )
 }
 
+export const getERC21Symbol = memoize(async (contractAddress) => {
+  const ERC21token = await getERC721TokenContract()
+  const tokenInstance = await ERC21token.at(contractAddress)
+  return tokenInstance.symbol()
+})
+
 export const getERC20DecimalsAndSymbol = async (
   tokenAddress: string,
 ): Promise<{ decimals: number; symbol: string }> => {

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

@@ -64,7 +64,7 @@ const ReviewCollectible = ({ closeSnackbar, enqueueSnackbar, onClose, onPrev, tx
 
       const ERC721Token = methodToCall === 'transfer' ? await getHumanFriendlyToken() : await getERC721TokenContract()
       const tokenInstance = await ERC721Token.at(tx.assetAddress)
-      const txData = tokenInstance.contract.methods[methodToCall](...params).encodeABI()
+      const txData = tokenInstance.contract.methods[`0x${methodToCall}`](...params).encodeABI()
 
       const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.recipientAddress, txData)
       const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')

src/routes/safe/components/Transactions/TxsTable/columns.tsx

@@ -45,6 +45,10 @@ export const getTxAmount = (tx, formatted = true) => {
   const { decimals = 18, decodedParams, isTokenTransfer, symbol } = tx
   const { value } = isTokenTransfer && !!decodedParams && !!decodedParams.transfer ? decodedParams.transfer : tx
 
+  if (tx.isCollectibleTransfer) {
+    return `1 ${tx.symbol}`
+  }
+
   if (!isTokenTransfer && !(Number(value) > 0)) {
     return NOT_AVAILABLE
   }

src/routes/safe/store/actions/transactions/utils/transactionHelpers.ts

@@ -4,6 +4,7 @@ import { DecodedMethods, decodeMethods } from 'src/logic/contracts/methodIds'
 import { TOKEN_REDUCER_ID } from 'src/logic/tokens/store/reducer/tokens'
 import {
   getERC20DecimalsAndSymbol,
+  getERC21Symbol,
   isSendERC20Transaction,
   isSendERC721Transaction,
 } from 'src/logic/tokens/utils/tokenHelpers'
@@ -266,7 +267,7 @@ export const buildTx = async ({
     safeTxGas: tx.safeTxGas,
     safeTxHash: tx.safeTxHash,
     submissionDate: tx.submissionDate,
-    symbol,
+    symbol: isSendERC721Tx ? await getERC21Symbol(tx.to) : symbol,
     upgradeTx: isUpgradeTx,
     value: tx.value.toString(),
   })