add component for block explorer links

DXgovernance · Nov 7, 2022 · cd59390 · cd59390
1 parent 70fdea9
commit cd59390
Show file tree

Hide file tree

Showing 13 changed files with 225 additions and 191 deletions.
diff --git a/src/components/ActionsBuilder/CallDetails/__snapshots__/CallDetails.test.tsx.snap b/src/components/ActionsBuilder/CallDetails/__snapshots__/CallDetails.test.tsx.snap
@@ -63,12 +63,6 @@ exports[`CallDetails Should match 1`] = `
   padding: 0;
 }
 
-.c7 {
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-}
-
 .c5 {
   margin-right: 0.5rem;
   display: -webkit-inline-box;
@@ -91,28 +85,10 @@ exports[`CallDetails Should match 1`] = `
   border-radius: 10px;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c3 {
-  color: #fff;
-  margin-top: 0;
-  white-space: pre-wrap;
-}
-
-.c4 {
-  color: #A1A6B0;
-  margin: 0;
+.c7 {
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
 }
 
 .c8 {
@@ -139,6 +115,30 @@ exports[`CallDetails Should match 1`] = `
   color: #fff;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c3 {
+  color: #fff;
+  margin-top: 0;
+  white-space: pre-wrap;
+}
+
+.c4 {
+  color: #A1A6B0;
+  margin: 0;
+}
+
 .c13 {
   margin: 0;
   padding: 0;
@@ -320,19 +320,6 @@ exports[`CallDetails Should match with empty data 1`] = `
   padding: 0;
 }
 
-.c14 {
-  width: 100%;
-  min-width: 200px;
-  height: 1px;
-  background-color: #303338;
-}
-
-.c7 {
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-}
-
 .c5 {
   margin-right: 0.5rem;
   display: -webkit-inline-box;
@@ -355,52 +342,65 @@ exports[`CallDetails Should match with empty data 1`] = `
   border-radius: 10px;
 }
 
-.c2 {
+.c7 {
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+}
+
+.c8 {
+  color: #A1A6B0;
+  margin-right: 0.5rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.c3 {
+.c8:hover {
+  cursor: pointer;
   color: #fff;
-  margin-top: 0;
-  white-space: pre-wrap;
 }
 
-.c4 {
-  color: #A1A6B0;
-  margin: 0;
+.c14 {
+  width: 100%;
+  min-width: 200px;
+  height: 1px;
+  background-color: #303338;
 }
 
-.c8 {
-  color: #A1A6B0;
-  margin-right: 0.5rem;
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
 }
 
-.c8:hover {
-  cursor: pointer;
+.c3 {
   color: #fff;
+  margin-top: 0;
+  white-space: pre-wrap;
+}
+
+.c4 {
+  color: #A1A6B0;
+  margin: 0;
 }
 
 .c13 {

diff --git a/src/components/ActionsBuilder/SupportedActions/UpdateENSContent/UpdateENSContentSummary.tsx b/src/components/ActionsBuilder/SupportedActions/UpdateENSContent/UpdateENSContentSummary.tsx
@@ -1,24 +1,19 @@
 import { diffLines } from 'diff';
-import {
-  DetailBody,
-  DetailHeader,
-  DetailRow,
-  StyledSegmentLink,
-} from '../common/Summary.styled';
+import { DetailBody, DetailHeader, DetailRow } from '../common/Summary.styled';
 import Summary from '../common/Summary';
 import { useUpdateEnsContent } from 'hooks/Guilds/useUpdateEnsContent';
 import { useEnsName, useNetwork } from 'wagmi';
 import { convertToIpfsHash, getIpfsUrl, isSupportedChainId } from 'utils/ipfs';
 import { useTranslation } from 'react-i18next';
 import { ActionViewProps } from '..';
 import { useENSContentHash } from 'hooks/Guilds/ens/useENSPublicResolverContract';
-import { BiLinkExternal } from 'react-icons/bi';
 import { getBlockExplorerUrl } from 'provider/chains';
 import useIPFSFileMetadata from 'hooks/Guilds/ipfs/useIPFSFileMetadata';
 import { useMemo } from 'react';
 import { DiffView } from 'components/ActionsBuilder/DiffView';
 import useIPFSFile from 'hooks/Guilds/ipfs/useIPFSFile';
 import { DiffContainer, DiffDetail, DiffStat } from './styles';
+import { ExternalLink } from 'components/primitives/Links/ExternalLink';
 
 const MAX_FILE_DIFF_BYTES = 64000; // 64kb
 
@@ -89,28 +84,18 @@ const UpdateENSContentSummary: React.FC<ActionViewProps> = ({
       <DetailHeader>{t('ens.domain')}</DetailHeader>
       <DetailRow>
         <DetailBody>
-          <StyledSegmentLink
-            href={blockExplorerUrl}
-            target="_blank"
-            rel="noopener"
-          >
+          <ExternalLink href={blockExplorerUrl}>
             {ensName || parsedData?.from}
-            <BiLinkExternal />
-          </StyledSegmentLink>
+          </ExternalLink>
         </DetailBody>
       </DetailRow>
       <DetailHeader>{t('ens.currentContent')}</DetailHeader>
       <DetailRow>
         <DetailBody>
           {currentIpfsUrl ? (
-            <StyledSegmentLink
-              href={currentIpfsUrl || ''}
-              target="_blank"
-              rel="noopener"
-            >
+            <ExternalLink href={currentIpfsUrl || ''}>
               {currentIpfsUrl || ''}
-              <BiLinkExternal />
-            </StyledSegmentLink>
+            </ExternalLink>
           ) : (
             t('none')
           )}
@@ -122,15 +107,9 @@ const UpdateENSContentSummary: React.FC<ActionViewProps> = ({
           {newFile ? (
             <DiffContainer>
               <DiffDetail>
-                <StyledSegmentLink
-                  href={newIpfsUrl || ''}
-                  target="_blank"
-                  rel="noopener"
-                >
+                <ExternalLink href={newIpfsUrl || ''}>
                   {newIpfsUrl || ''}
-                  <BiLinkExternal />
-                </StyledSegmentLink>
-
+                </ExternalLink>
                 <DiffStat removed>---{numChanges?.removed}</DiffStat>
                 <DiffStat>+++{numChanges?.added}</DiffStat>
               </DiffDetail>
@@ -142,18 +121,13 @@ const UpdateENSContentSummary: React.FC<ActionViewProps> = ({
               />
             </DiffContainer>
           ) : (
-            <StyledSegmentLink
-              href={newIpfsUrl || ''}
-              target="_blank"
-              rel="noopener"
-            >
+            <ExternalLink href={newIpfsUrl || ''}>
               {newIpfsUrl || ''}
-              <BiLinkExternal />
-            </StyledSegmentLink>
+            </ExternalLink>
           )}
         </DetailBody>
       </DetailRow>
-      <Summary decodedCall={decodedCall} blockExplorerUrl={blockExplorerUrl} />
+      <Summary decodedCall={decodedCall} />
     </>
   );
 };

diff --git a/...der/SupportedActions/UpdateENSContent/__snapshots__/UpdateENSContentSummary.test.tsx.snap b/...der/SupportedActions/UpdateENSContent/__snapshots__/UpdateENSContentSummary.test.tsx.snap
@@ -32,28 +32,20 @@ exports[`UpdateENSNameSummary Should match snapshot 1`] = `
   margin: 0;
 }
 
-.c4 {
-  color: #A1A6B0;
+.c5 {
   margin-right: 0.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c4:hover {
-  cursor: pointer;
-  color: #fff;
 }
 
 .c6 {
@@ -67,20 +59,28 @@ exports[`UpdateENSNameSummary Should match snapshot 1`] = `
   width: 24px;
 }
 
-.c5 {
+.c4 {
+  color: #A1A6B0;
   margin-right: 0.5rem;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:hover {
+  cursor: pointer;
+  color: #fff;
 }
 
 <div>

diff --git a/src/components/ActionsBuilder/SupportedActions/common/Summary.styled.tsx b/src/components/ActionsBuilder/SupportedActions/common/Summary.styled.tsx
@@ -22,16 +22,3 @@ export const DetailBody = styled(DetailRow)`
 export const RedHighlight = styled.span`
   color: ${({ theme }) => theme.colors.red};
 `;
-
-export const StyledSegmentLink = styled.a`
-  color: ${({ theme }) => theme.colors.grey};
-  margin-right: 0.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-decoration: none;
-  &:hover {
-    cursor: pointer;
-    color: ${({ theme }) => theme.colors.text};
-  }
-`;