fix: migrate to TransactionTokenType type (#3640)

package.json

@@ -89,7 +89,7 @@
     "@gnosis.pm/safe-core-sdk": "^2.0.0",
     "@gnosis.pm/safe-deployments": "^1.8.0",
     "@gnosis.pm/safe-react-components": "^0.9.8",
-    "@gnosis.pm/safe-react-gateway-sdk": "^2.8.6",
+    "@gnosis.pm/safe-react-gateway-sdk": "^2.10.0",
     "@gnosis.pm/safe-web3-lib": "^1.0.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.0",

src/logic/collectibles/sources/Gnosis.ts

@@ -1,4 +1,4 @@
-import { SafeCollectibleResponse, TokenType } from '@gnosis.pm/safe-react-gateway-sdk'
+import { SafeCollectibleResponse, TransactionTokenType } from '@gnosis.pm/safe-react-gateway-sdk'
 
 import { Collectibles, NFTAsset, NFTAssets, NFTTokens } from 'src/logic/collectibles/sources/collectibles.d'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
@@ -12,7 +12,7 @@ type TokenResult = {
   logoUri: string
   name: string
   symbol: string
-  type: TokenType
+  type: TransactionTokenType
 }
 
 type FetchResult = {
@@ -27,7 +27,7 @@ class Gnosis {
       logoUri,
       name: tokenName,
       symbol: tokenSymbol,
-      type: TokenType.ERC721,
+      type: TransactionTokenType.ERC721,
     }))
 
     return assets

src/routes/safe/components/Transactions/TxList/TokenTransferAmount.tsx

@@ -1,5 +1,5 @@
 import { Text } from '@gnosis.pm/safe-react-components'
-import { TokenType } from '@gnosis.pm/safe-react-gateway-sdk'
+import { TransactionTokenType } from '@gnosis.pm/safe-react-gateway-sdk'
 import { ReactElement } from 'react'
 import styled from 'styled-components'
 
@@ -34,7 +34,7 @@ export const TokenTransferAmount = ({ assetInfo }: TokenTransferAmountProps): Re
         height={26}
         onError={(error) => {
           error.currentTarget.onerror = null
-          error.currentTarget.src = assetInfo.tokenType === TokenType.ERC721 ? NFTIcon : TokenPlaceholder
+          error.currentTarget.src = assetInfo.tokenType === TransactionTokenType.ERC721 ? NFTIcon : TokenPlaceholder
         }}
         src={assetInfo.logoUri}
       />

src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx

@@ -1,4 +1,4 @@
-import { Erc721Transfer, Transfer, TokenType } from '@gnosis.pm/safe-react-gateway-sdk'
+import { Erc721Transfer, Transfer, TransactionTokenType } from '@gnosis.pm/safe-react-gateway-sdk'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
 
@@ -38,7 +38,7 @@ export const TxInfoDetails = ({
     // is transfer type by context
     isTransferType &&
     // not a Collectible
-    txInfo?.transferInfo.type !== TokenType.ERC721 &&
+    txInfo?.transferInfo.type !== TransactionTokenType.ERC721 &&
     // in history list
     txLocation === 'history' &&
     // it's outgoing
@@ -66,7 +66,7 @@ export const TxInfoDetails = ({
 
   useEffect(() => {
     if (txInfo) {
-      const isCollectible = txInfo.transferInfo.type === TokenType.ERC721
+      const isCollectible = txInfo.transferInfo.type === TransactionTokenType.ERC721
       const { address, value, decimals } = getTxTokenData(txInfo)
 
       setSendModalParams((prev) => ({

src/routes/safe/components/Transactions/TxList/hooks/useAssetInfo.ts

@@ -1,4 +1,10 @@
-import { Custom, SettingsChange, TransactionInfo, Transfer, TokenType } from '@gnosis.pm/safe-react-gateway-sdk'
+import {
+  Custom,
+  SettingsChange,
+  TransactionInfo,
+  Transfer,
+  TransactionTokenType,
+} from '@gnosis.pm/safe-react-gateway-sdk'
 import { useEffect, useState } from 'react'
 
 import { getNativeCurrency } from 'src/config'
@@ -39,7 +45,7 @@ export const useAssetInfo = (txInfo: TransactionInfo): AssetInfo | undefined =>
       const directionSign = direction === 'INCOMING' ? '+' : '-'
 
       switch (transferInfo.type) {
-        case TokenType.ERC20: {
+        case TransactionTokenType.ERC20: {
           setAsset({
             type: 'Transfer',
             name: transferInfo.tokenName ?? defaultTokenTransferAsset.name,
@@ -50,7 +56,7 @@ export const useAssetInfo = (txInfo: TransactionInfo): AssetInfo | undefined =>
           })
           break
         }
-        case TokenType.ERC721: {
+        case TransactionTokenType.ERC721: {
           setAsset({
             type: 'Transfer',
             name: `${transferInfo.tokenName ?? defaultTokenTransferAsset.name} ${getTokenIdLabel(transferInfo)}`,
@@ -61,7 +67,7 @@ export const useAssetInfo = (txInfo: TransactionInfo): AssetInfo | undefined =>
           })
           break
         }
-        case TokenType.NATIVE_COIN: {
+        case TransactionTokenType.NATIVE_COIN: {
           const nativeCurrency = getNativeCurrency()
 
           setAsset({

src/routes/safe/components/Transactions/TxList/modals/ApproveTxModal.tsx

@@ -4,7 +4,7 @@ import {
   Erc721Transfer,
   MultisigExecutionInfo,
   Operation,
-  TokenType,
+  TransactionTokenType,
 } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useMemo, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -127,7 +127,7 @@ const useTxInfo = (transaction: Props['transaction']) => {
   const value = useMemo(() => {
     switch (t.current.txInfo.type) {
       case 'Transfer':
-        if (t.current.txInfo.transferInfo.type === TokenType.NATIVE_COIN) {
+        if (t.current.txInfo.transferInfo.type === TransactionTokenType.NATIVE_COIN) {
           return t.current.txInfo.transferInfo.value
         } else {
           return t.current.txDetails.txData?.value ?? '0'
@@ -144,7 +144,7 @@ const useTxInfo = (transaction: Props['transaction']) => {
   const to = useMemo(() => {
     switch (t.current.txInfo.type) {
       case 'Transfer':
-        if (t.current.txInfo.transferInfo.type === TokenType.NATIVE_COIN) {
+        if (t.current.txInfo.transferInfo.type === TransactionTokenType.NATIVE_COIN) {
           return t.current.txInfo.recipient.value
         } else {
           return (t.current.txInfo.transferInfo as Erc20Transfer | Erc721Transfer).tokenAddress

src/routes/safe/components/Transactions/TxList/utils.ts

@@ -2,7 +2,7 @@ import {
   AddressEx,
   TransactionInfo,
   Transfer,
-  TokenType,
+  TransactionTokenType,
   TransactionDetails,
   MultisigExecutionDetails,
   MultisigExecutionInfo,
@@ -54,7 +54,7 @@ export const getTxAmount = (txInfo?: TransactionInfo, formatted = true): string
   }
 
   switch (txInfo.transferInfo.type) {
-    case TokenType.ERC20:
+    case TransactionTokenType.ERC20:
       return getAmountWithSymbol(
         {
           decimals: `${txInfo.transferInfo.decimals ?? 0}`,
@@ -63,10 +63,10 @@ export const getTxAmount = (txInfo?: TransactionInfo, formatted = true): string
         },
         formatted,
       )
-    case TokenType.ERC721:
+    case TransactionTokenType.ERC721:
       // simple workaround to avoid displaying unexpected values for incoming NFT transfer
       return `1 ${txInfo.transferInfo.tokenSymbol} ${getTokenIdLabel(txInfo.transferInfo)}`
-    case TokenType.NATIVE_COIN: {
+    case TransactionTokenType.NATIVE_COIN: {
       const nativeCurrency = getNativeCurrency()
       return getAmountWithSymbol(
         {
@@ -91,13 +91,13 @@ type txTokenData = {
 export const getTxTokenData = (txInfo: Transfer): txTokenData => {
   const nativeCurrency = getNativeCurrency()
   switch (txInfo.transferInfo.type) {
-    case TokenType.ERC20:
+    case TransactionTokenType.ERC20:
       return {
         address: txInfo.transferInfo.tokenAddress,
         value: txInfo.transferInfo.value,
         decimals: txInfo.transferInfo.decimals,
       }
-    case TokenType.ERC721:
+    case TransactionTokenType.ERC721:
       return { address: txInfo.transferInfo.tokenAddress, value: '1', decimals: 0 }
     default:
       return {

src/setupTests.js

@@ -42,7 +42,7 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => {
     // We require some of the enums/types from the original module
     ...originalModule,
     Operation: jest.fn(),
-    TokenType: jest.fn(),
+    TransactionTokenType: jest.fn(),
     TransactionStatus: jest.fn(),
     TransferDirection: jest.fn(),
     getBalances: jest.fn(),

src/test/utils/safeHelper.ts

@@ -4,7 +4,7 @@ import { PromiEvent } from 'web3-core'
 import { GnosisSafe } from 'src/types/contracts/gnosis_safe.d'
 import { ContractOptions, ContractSendMethod, DeployOptions, EventData, PastEventOptions } from 'web3-eth-contract'
 import { LocalTransactionStatus, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
-import { TransferDirection, TokenType } from '@gnosis.pm/safe-react-gateway-sdk'
+import { TransferDirection, TransactionTokenType } from '@gnosis.pm/safe-react-gateway-sdk'
 
 const mockNonPayableTransactionObject = (callResult?: string): NonPayableTransactionObject<string | void | boolean | string[]> => {
   return {
@@ -95,7 +95,7 @@ export const getMockedStoredTServiceModel = (txProps?: Transaction): Transaction
       recipient: { value: "0x456", name: null, logoUri: null },
       direction: TransferDirection.OUTGOING,
       transferInfo: {
-        type: TokenType.ERC20,
+        type: TransactionTokenType.ERC20,
         tokenAddress: "0xabc",
         tokenName: null,
         tokenSymbol: null,

yarn.lock

@@ -1965,6 +1965,13 @@
     react-media "^1.10.0"
     web3-utils "^1.6.0"
 
+"@gnosis.pm/safe-react-gateway-sdk@^2.10.0":
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-2.10.0.tgz#88e2307d21d548ea43dde8fa33630d3539e39741"
+  integrity sha512-P0A6XgjpEwCzZpk0vjLOYuaOmXL020khJF9FQRwCYPrllPUzrGjpm5gdqExNdnefrrDUKeWUumkucoXqBaMblA==
+  dependencies:
+    cross-fetch "^3.1.5"
+
 "@gnosis.pm/safe-react-gateway-sdk@^2.5.6":
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-2.7.4.tgz#3a1d96e30d10e4859579b558586fd25cd4ae3480"
@@ -1979,13 +1986,6 @@
   dependencies:
     isomorphic-unfetch "^3.1.0"
 
-"@gnosis.pm/safe-react-gateway-sdk@^2.8.6":
-  version "2.8.6"
-  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-2.8.6.tgz#842c1f40ed6bd9164965836d7c4abcfe0a009af2"
-  integrity sha512-XPDOGQtUc1AON/xM4y5mGWMQ/VVaajRXVEdVmKCWOboK0bk1spkuD5oyo9hF0SB3f+lClIagb9PojOurjjWogw==
-  dependencies:
-    isomorphic-unfetch "^3.1.0"
-
 "@gnosis.pm/safe-web3-lib@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-web3-lib/-/safe-web3-lib-1.0.0.tgz#4189276d8f953768723b4fb2b653a17696a33530"
@@ -7398,6 +7398,13 @@ cross-fetch@^2.1.0:
     node-fetch "2.6.1"
     whatwg-fetch "2.0.4"
 
+cross-fetch@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
+  dependencies:
+    node-fetch "2.6.7"
+
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -14084,6 +14091,13 @@ node-fetch@2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
+node-fetch@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-fetch@^2.6.0, node-fetch@^2.6.1:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd"