From a3541d8a33dd9a480c27dc2073426d2bdd6426ce Mon Sep 17 00:00:00 2001
From: Mati Dastugue <mdastugu@amazon.com>
Date: Wed, 10 Jun 2020 11:32:30 -0300
Subject: [PATCH] Add support for collectibles

---
 src/logic/tokens/utils/tokenHelpers.ts              | 13 ++++++++++++-
 .../SendModal/screens/ReviewCollectible/index.tsx   |  2 +-
 .../components/Transactions/TxsTable/columns.tsx    |  4 ++++
 .../transactions/utils/transactionHelpers.ts        |  3 ++-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/logic/tokens/utils/tokenHelpers.ts b/src/logic/tokens/utils/tokenHelpers.ts
index 3e94fb19..35f5d2ab 100644
--- a/src/logic/tokens/utils/tokenHelpers.ts
+++ b/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 }> => {
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 90484507..c7f8e136 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/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')
diff --git a/src/routes/safe/components/Transactions/TxsTable/columns.tsx b/src/routes/safe/components/Transactions/TxsTable/columns.tsx
index b5cda0cb..93e09c32 100644
--- a/src/routes/safe/components/Transactions/TxsTable/columns.tsx
+++ b/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
   }
diff --git a/src/routes/safe/store/actions/transactions/utils/transactionHelpers.ts b/src/routes/safe/store/actions/transactions/utils/transactionHelpers.ts
index dae640a1..7c7187d3 100644
--- a/src/routes/safe/store/actions/transactions/utils/transactionHelpers.ts
+++ b/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(),
   })