Link to ABI playground from verified contracts

oasisprotocol · Aug 16, 2024 · 629ca6a · 629ca6a
1 parent 1517da6
commit 629ca6a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git a/.changelog/1492.feature.md b/.changelog/1492.feature.md
@@ -0,0 +1 @@
+Link to ABI playground from verified contracts
diff --git a/src/app/components/ContractVerificationIcon/index.tsx b/src/app/components/ContractVerificationIcon/index.tsx
@@ -8,8 +8,9 @@ import { COLORS } from '../../../styles/theme/colors'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import Skeleton from '@mui/material/Skeleton'
-import { RuntimeAccount } from '../../../oasis-nexus/api'
+import { Layer, RuntimeAccount } from '../../../oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
+import { Network } from '../../../types/network'
 import * as externalLinks from '../../utils/externalLinks'
 
 type VerificationStatus = 'verified' | 'unverified'
@@ -81,7 +82,7 @@ export const VerificationIcon: FC<{
   scope: SearchScope
   verified: boolean
   noLink?: boolean
-}> = ({ address_eth, verified, noLink = false }) => {
+}> = ({ address_eth, scope, verified, noLink = false }) => {
   const { t } = useTranslation()
   const [explainDelay, setExplainDelay] = useState(false)
 
@@ -100,6 +101,23 @@ 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}>
@@ -118,6 +136,18 @@ export const VerificationIcon: FC<{
                 SourcifyLink: <Link {...sourcifyLinkProps} />,
               }}
             />
+            {abiPlaygroundLinkProps.href && (
+              <span>
+                {' | '}
+                <Trans
+                  t={t}
+                  i18nKey={'contract.verification.openInAbiPlayground'}
+                  components={{
+                    AbiPlaygroundLink: <Link {...abiPlaygroundLinkProps} />,
+                  }}
+                />
+              </span>
+            )}
           </Typography>
         ) : (
           <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>

diff --git a/src/app/utils/externalLinks.ts b/src/app/utils/externalLinks.ts
@@ -52,6 +52,7 @@ export const faucets = {
 export const dapps = {
   wRose: 'https://wrose.oasis.io/',
   sourcifyRoot: 'https://sourcify.dev/',
+  abiPlayground: 'https://abi-playground.oasis.io/',
 }
 
 export const api = {

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -173,6 +173,7 @@
       "title": "Verification",
       "isVerified": "Verified",
       "isNotVerified": "Unverified",
+      "openInAbiPlayground": "Interact in <AbiPlaygroundLink>ABI Playground</AbiPlaygroundLink>",
       "openInSourcify": "Open in <SourcifyLink>Sourcify</SourcifyLink>",
       "verifyInSourcify": "Verify through <SourcifyLink>Sourcify</SourcifyLink>",
       "explainVerificationDelay": "If you have just verified a contract, it should take a few minutes to update here."