feat: fetch contract info for contract interactions

package.json

@@ -63,7 +63,7 @@
     "@safe-global/safe-core-sdk": "^3.3.5",
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
     "@safe-global/safe-ethers-lib": "^1.9.4",
-    "@safe-global/safe-gateway-typescript-sdk": "3.21.0-alpha.3",
+    "@safe-global/safe-gateway-typescript-sdk": "3.21.1",
     "@safe-global/safe-modules-deployments": "^1.2.0",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",

src/components/common/NamedAddress/index.tsx

@@ -0,0 +1,21 @@
+import useAsync from '@/hooks/useAsync'
+import useChainId from '@/hooks/useChainId'
+import { getContract } from '@safe-global/safe-gateway-typescript-sdk'
+import EthHashInfo from '../EthHashInfo'
+import type { EthHashInfoProps } from '../EthHashInfo/SrcEthHashInfo'
+
+const NamedAddressInfo = ({ address, name, customAvatar, ...props }: EthHashInfoProps) => {
+  const chainId = useChainId()
+  const [contract] = useAsync(() => getContract(chainId, address), [address, chainId])
+
+  return (
+    <EthHashInfo
+      address={address}
+      name={name || contract?.displayName || contract?.name}
+      customAvatar={customAvatar || contract?.logoUri}
+      {...props}
+    />
+  )
+}
+
+export default NamedAddressInfo

src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx

@@ -13,7 +13,7 @@ import accordionCss from '@/styles/accordion.module.css'
 import CodeIcon from '@mui/icons-material/Code'
 import { DelegateCallWarning } from '@/components/transactions/Warning'
 import { InfoDetails } from '@/components/transactions/InfoDetails'
-import EthHashInfo from '@/components/common/EthHashInfo'
+import NamedAddressInfo from '@/components/common/NamedAddress'
 
 type SingleTxDecodedProps = {
   tx: InternalTransaction
@@ -74,7 +74,7 @@ export const SingleTxDecoded = ({
         {isDelegateCall && <DelegateCallWarning showWarning={!txData.trustedDelegateCallTarget} />}
         {!isSpendingLimitMethod && (
           <InfoDetails title={title}>
-            <EthHashInfo
+            <NamedAddressInfo
               address={tx.to}
               name={name}
               customAvatar={avatarUrl}

src/components/transactions/TxDetails/TxData/DecodedData/index.tsx

@@ -2,9 +2,9 @@ import type { ReactElement } from 'react'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import { isCustomTxInfo } from '@/utils/transaction-guards'
 import { InfoDetails } from '@/components/transactions/InfoDetails'
-import EthHashInfo from '@/components/common/EthHashInfo'
 import { HexEncodedData } from '@/components/transactions/HexEncodedData'
 import { MethodDetails } from '@/components/transactions/TxDetails/TxData/DecodedData/MethodDetails'
+import NamedAddressInfo from '@/components/common/NamedAddress'
 
 interface Props {
   txData: TransactionDetails['txData']
@@ -29,7 +29,7 @@ export const DecodedData = ({ txData, txInfo }: Props): ReactElement | null => {
   return (
     <>
       <InfoDetails title="Interact with:">
-        <EthHashInfo
+        <NamedAddressInfo
           address={txData.to.value}
           name={isCustomTxInfo(txInfo) ? txInfo.to.name : undefined}
           customAvatar={isCustomTxInfo(txInfo) ? txInfo.to.logoUri : undefined}

src/features/swap/components/SwapOrderConfirmationView/index.tsx

@@ -8,12 +8,12 @@ import { Alert, Typography } from '@mui/material'
 import { formatAmount } from '@/utils/formatNumber'
 import { formatVisualAmount } from '@/utils/formatters'
 import { getExecutionPrice, getLimitPrice, getSlippageInPercent, getSurplusPrice } from '@/features/swap/helpers/utils'
-import type { CowSwapConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
+import { type CowSwapConfirmationView } from '@safe-global/safe-gateway-typescript-sdk'
 import SwapTokens from '@/features/swap/components/SwapTokens'
 import AlertIcon from '@/public/images/common/alert.svg'
 import EthHashInfo from '@/components/common/EthHashInfo'
-import CowLogo from '@/public/images/swaps/cow-logo.png'
 import css from './styles.module.css'
+import NamedAddress from '@/components/common/NamedAddress'
 
 type SwapOrderProps = {
   order: CowSwapConfirmationView
@@ -97,15 +97,7 @@ export const SwapOrderConfirmationView = ({ order, settlementContract }: SwapOrd
             <OrderId orderId={uid} href={explorerUrl} />
           </DataRow>,
           <DataRow key="Interact with" title="Interact with">
-            <EthHashInfo
-              address={settlementContract}
-              name="Cow Protocol"
-              customAvatar={CowLogo.src}
-              avatarSize={24}
-              shortAddress={false}
-              hasExplorer
-              onlyName
-            />
+            <NamedAddress address={settlementContract} onlyName hasExplorer shortAddress={false} avatarSize={24} />
           </DataRow>,
           receiver && owner !== receiver ? (
             <>

yarn.lock

@@ -4336,10 +4336,10 @@
     "@safe-global/safe-core-sdk-utils" "^1.7.4"
     ethers "5.7.2"
 
-"@safe-global/[email protected].0-alpha.3":
-  version "3.21.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.21.0-alpha.3.tgz#21e0f01e9fbc6cff504fa9c7f957c27877b3f982"
-  integrity sha512-31xjB8VYUMsJ9akBd30YqHt4mreAwF5Kwbfa0LO0lE5L/DvfIwYiK/VB9uMse3LF/gVKKVOu9TIxKkaTsh9Y5w==
+"@safe-global/[email protected].1":
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.21.1.tgz#984ec2d3d4211caf6a96786ab922b39909093538"
+  integrity sha512-7nakIjcRSs6781LkizYpIfXh1DYlkUDqyALciqz/BjFU/S97sVjZdL4cuKsG9NEarytE+f6p0Qbq2Bo1aocVUA==
 
 "@safe-global/safe-gateway-typescript-sdk@^3.5.3":
   version "3.19.0"