Merge pull request #1326 from oasisprotocol/mz/contractIcon

Make contract verification icon a link to Sourcify
oasisprotocol · Mar 14, 2024 · 3710ea1 · 3710ea1
2 parents d82e471 + 2a7f2cf
commit 3710ea1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/.changelog/1326.trivial.md b/.changelog/1326.trivial.md
@@ -0,0 +1 @@
+Make verification icon clickable when rendering a link to Sourcify
diff --git a/src/app/components/ContractVerificationIcon/index.tsx b/src/app/components/ContractVerificationIcon/index.tsx
@@ -29,8 +29,8 @@ const statusIcon: Record<VerificationStatus, ReactNode> = {
 
 export const verificationIconBoxHeight = 28
 
-const StyledBox = styled(Box, {
-  shouldForwardProp: prop => prop !== 'verified',
+const StyledPill = styled(Box, {
+  shouldForwardProp: prop => prop !== 'verified' && prop !== 'address_eth',
 })(({ verified }: { verified: boolean; address_eth: string }) => {
   const status: VerificationStatus = verified ? 'verified' : 'unverified'
   return {
@@ -45,6 +45,9 @@ const StyledBox = styled(Box, {
     padding: 4,
     paddingLeft: 10,
     paddingRight: 5,
+    '&&': {
+      textDecoration: 'none',
+    },
   }
 })
 
@@ -84,14 +87,23 @@ export const VerificationIcon: FC<{ address_eth: string; verified: boolean; noLi
     verified: t('contract.verification.isVerified'),
     unverified: t('contract.verification.isNotVerified'),
   }
+  const linkProps = {
+    href: `https://sourcify.dev/#/lookup/${address_eth}`,
+    rel: 'noopener noreferrer',
+    target: '_blank',
+    sx: { fontWeight: 400, color: 'inherit', textDecoration: 'underline' },
+    onClick: verified ? undefined : () => setExplainDelay(true),
+  }
+  const Component = noLink ? Box : Link
+  const componentProps = noLink ? {} : linkProps
 
   return (
     <>
-      <StyledBox verified={verified} address_eth={address_eth}>
+      <StyledPill component={Component} verified={verified} address_eth={address_eth} {...componentProps}>
         {statusLabel[status]}
         &nbsp; &nbsp;
         {statusIcon[status]}
-      </StyledBox>
+      </StyledPill>
       &nbsp; &nbsp;
       {!noLink && (
         <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
@@ -101,15 +113,7 @@ export const VerificationIcon: FC<{ address_eth: string; verified: boolean; noLi
               verified ? 'contract.verification.openInSourcify' : 'contract.verification.verifyInSourcify'
             }
             components={{
-              SourcifyLink: (
-                <Link
-                  href={`https://sourcify.dev/#/lookup/${address_eth}`}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  sx={{ fontWeight: 400, color: 'inherit', textDecoration: 'underline' }}
-                  onClick={verified ? undefined : () => setExplainDelay(true)}
-                />
-              ),
+              SourcifyLink: <Link {...linkProps} />,
             }}
           />{' '}
           {explainDelay && t('contract.verification.explainVerificationDelay')}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Make verification icon clickable when rendering a link to Sourcify