Extract AbiPlaygroundLink into a component

oasisprotocol · Sep 12, 2024 · 7707460 · 7707460
1 parent 3a9b147
commit 7707460
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 31 deletions.
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 }}>