From c68c6a2be165b157239e33f3a1553f29db799649 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 13 Mar 2024 18:49:07 +0100
Subject: [PATCH 1/2] Make verification icon clickable when rendering a link to
 Sourcify

---
 .changelog/1326.trivial.md                    |  1 +
 .../ContractVerificationIcon/index.tsx        | 28 +++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 .changelog/1326.trivial.md

diff --git a/.changelog/1326.trivial.md b/.changelog/1326.trivial.md
new file mode 100644
index 000000000..42d92a2f9
--- /dev/null
+++ 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
index bfc7b08ae..3d7034e58 100644
--- a/src/app/components/ContractVerificationIcon/index.tsx
+++ b/src/app/components/ContractVerificationIcon/index.tsx
@@ -29,7 +29,7 @@ const statusIcon: Record<VerificationStatus, ReactNode> = {
 
 export const verificationIconBoxHeight = 28
 
-const StyledBox = styled(Box, {
+const StyledPill = styled(Box, {
   shouldForwardProp: prop => prop !== 'verified',
 })(({ verified }: { verified: boolean; address_eth: string }) => {
   const status: VerificationStatus = verified ? 'verified' : 'unverified'
@@ -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')}

From 2a7f2cf4991479e339c442f26c26b14a65320383 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 13 Mar 2024 18:37:51 +0100
Subject: [PATCH 2/2] Prevent adding custom props to HTML attrs

---
 src/app/components/ContractVerificationIcon/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/ContractVerificationIcon/index.tsx b/src/app/components/ContractVerificationIcon/index.tsx
index 3d7034e58..e21962864 100644
--- a/src/app/components/ContractVerificationIcon/index.tsx
+++ b/src/app/components/ContractVerificationIcon/index.tsx
@@ -30,7 +30,7 @@ const statusIcon: Record<VerificationStatus, ReactNode> = {
 export const verificationIconBoxHeight = 28
 
 const StyledPill = styled(Box, {
-  shouldForwardProp: prop => prop !== 'verified',
+  shouldForwardProp: prop => prop !== 'verified' && prop !== 'address_eth',
 })(({ verified }: { verified: boolean; address_eth: string }) => {
   const status: VerificationStatus = verified ? 'verified' : 'unverified'
   return {