Merge pull request #1540 from oasisprotocol/lw/erc1167-playground

Link to abi-playground from ERC-1167 Minimal Proxy contracts
oasisprotocol · Sep 12, 2024 · 4bb69ac · 4bb69ac
2 parents 3a9b147 + 07c18a6
commit 4bb69ac
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 33 deletions.
diff --git a/.changelog/1540.feature.md b/.changelog/1540.feature.md
@@ -0,0 +1 @@
+Detect ERC-1167 Minimal Proxy contracts
diff --git a/src/app/components/Account/RuntimeAccountDetailsView.tsx b/src/app/components/Account/RuntimeAccountDetailsView.tsx
@@ -23,6 +23,8 @@ import { FiatMoneyAmount } from '../Balance/FiatMoneyAmount'
 import { getFiatCurrencyForScope, showFiatValues } from '../../../config'
 import { CardEmptyState } from '../CardEmptyState'
 import { extractMinimalProxyERC1167 } from '../ContractVerificationIcon/extractMinimalProxyERC1167'
+import { AbiPlaygroundLink } from '../ContractVerificationIcon/AbiPlaygroundLink'
+import Box from '@mui/material/Box'
 
 type RuntimeAccountDetailsViewProps = {
   isLoading?: boolean
@@ -108,7 +110,10 @@ export const RuntimeAccountDetailsView: FC<RuntimeAccountDetailsViewProps> = ({
         <>
           <dt>{t('contract.verification.proxyERC1167')}</dt>
           <dd>
-            <AccountLink scope={account} address={extractMinimalProxyERC1167(account)!} />
+            <Box>
+              <AccountLink scope={account} address={extractMinimalProxyERC1167(account)!} />
+              <AbiPlaygroundLink scope={account} address_eth={account.address_eth!} />
+            </Box>
           </dd>
         </>
       )}

diff --git a/src/app/components/ContractVerificationIcon/AbiPlaygroundLink.tsx b/src/app/components/ContractVerificationIcon/AbiPlaygroundLink.tsx
@@ -0,0 +1,45 @@
+import { FC } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import Link from '@mui/material/Link'
+import { Layer } from '../../../oasis-nexus/api'
+import { SearchScope } from '../../../types/searchScope'
+import { Network } from '../../../types/network'
+import * as externalLinks from '../../utils/externalLinks'
+
+export const AbiPlaygroundLink: FC<{
+  address_eth: string
+  scope: SearchScope
+}> = ({ address_eth, scope }) => {
+  const { t } = useTranslation()
+
+  const scopeToPlaygroundURL: Record<Network, Partial<Record<Layer, string>>> = {
+    [Network.mainnet]: {
+      [Layer.emerald]: `${externalLinks.dapps.abiPlayground}?network=42262&contractAddress=${address_eth}`,
+      [Layer.sapphire]: `${externalLinks.dapps.abiPlayground}?network=23294&contractAddress=${address_eth}`,
+    },
+    [Network.testnet]: {
+      [Layer.emerald]: `${externalLinks.dapps.abiPlayground}?network=42261&contractAddress=${address_eth}`,
+      [Layer.sapphire]: `${externalLinks.dapps.abiPlayground}?network=23295&contractAddress=${address_eth}`,
+    },
+  }
+  const abiPlaygroundLinkProps = {
+    href: scopeToPlaygroundURL[scope.network]?.[scope.layer],
+    rel: 'noopener noreferrer',
+    target: '_blank',
+    sx: { fontWeight: 400, color: 'inherit', textDecoration: 'underline' },
+  }
+
+  if (!abiPlaygroundLinkProps.href) return null
+  return (
+    <span>
+      {' | '}
+      <Trans
+        t={t}
+        i18nKey={'contract.verification.openInAbiPlayground'}
+        components={{
+          AbiPlaygroundLink: <Link {...abiPlaygroundLinkProps} />,
+        }}
+      />
+    </span>
+  )
+}
diff --git a/src/app/components/ContractVerificationIcon/index.tsx b/src/app/components/ContractVerificationIcon/index.tsx
@@ -7,10 +7,9 @@ import { styled } from '@mui/material/styles'
 import { COLORS } from '../../../styles/theme/colors'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
-import { Layer } from '../../../oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
-import { Network } from '../../../types/network'
 import * as externalLinks from '../../utils/externalLinks'
+import { AbiPlaygroundLink } from './AbiPlaygroundLink'
 
 type VerificationStatus = 'verified' | 'unverified'
 
@@ -77,23 +76,6 @@ export const VerificationIcon: FC<{
   const Component = noLink ? Box : Link
   const componentProps = noLink ? {} : sourcifyLinkProps
 
-  const scopeToPlaygroundURL: Record<Network, Partial<Record<Layer, string>>> = {
-    [Network.mainnet]: {
-      [Layer.emerald]: `${externalLinks.dapps.abiPlayground}?network=42262&contractAddress=${address_eth}`,
-      [Layer.sapphire]: `${externalLinks.dapps.abiPlayground}?network=23294&contractAddress=${address_eth}`,
-    },
-    [Network.testnet]: {
-      [Layer.emerald]: `${externalLinks.dapps.abiPlayground}?network=42261&contractAddress=${address_eth}`,
-      [Layer.sapphire]: `${externalLinks.dapps.abiPlayground}?network=23295&contractAddress=${address_eth}`,
-    },
-  }
-  const abiPlaygroundLinkProps = {
-    href: scopeToPlaygroundURL[scope.network]?.[scope.layer],
-    rel: 'noopener noreferrer',
-    target: '_blank',
-    sx: { fontWeight: 400, color: 'inherit', textDecoration: 'underline' },
-  }
-
   return (
     <>
       <StyledPill component={Component} verified={verified} address_eth={address_eth} {...componentProps}>
@@ -112,18 +94,7 @@ export const VerificationIcon: FC<{
                 SourcifyLink: <Link {...sourcifyLinkProps} />,
               }}
             />
-            {abiPlaygroundLinkProps.href && (
-              <span>
-                {' | '}
-                <Trans
-                  t={t}
-                  i18nKey={'contract.verification.openInAbiPlayground'}
-                  components={{
-                    AbiPlaygroundLink: <Link {...abiPlaygroundLinkProps} />,
-                  }}
-                />
-              </span>
-            )}
+            <AbiPlaygroundLink address_eth={address_eth} scope={scope} />
           </Typography>
         ) : (
           <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>

diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
@@ -22,6 +22,8 @@ import { RoundedBalance } from 'app/components/RoundedBalance'
 import { HighlightedText } from '../../components/HighlightedText'
 import { RuntimeBalanceDisplay } from '../../components/Balance/RuntimeBalanceDisplay'
 import { extractMinimalProxyERC1167 } from '../../components/ContractVerificationIcon/extractMinimalProxyERC1167'
+import { AbiPlaygroundLink } from '../../components/ContractVerificationIcon/AbiPlaygroundLink'
+import Box from '@mui/material/Box'
 
 export const TokenDetailsCard: FC<{ scope: SearchScope; address: string; searchTerm: string }> = ({
   scope,
@@ -71,7 +73,10 @@ export const TokenDetailsCard: FC<{ scope: SearchScope; address: string; searchT
               <>
                 <dt>{t('contract.verification.proxyERC1167')}</dt>
                 <dd>
-                  <AccountLink scope={account} address={extractMinimalProxyERC1167(account)!} />
+                  <Box>
+                    <AccountLink scope={account} address={extractMinimalProxyERC1167(account)!} />
+                    <AbiPlaygroundLink scope={account} address_eth={account.address_eth!} />
+                  </Box>
                 </dd>
               </>
             )}