✨Update CopyTxHash component to include links to view transaction on …

…Stellar.Expert and StellarChain.io
soroswap · Aug 26, 2024 · 9865843 · 9865843
1 parent 26c3a6e
commit 9865843
Showing 1 changed file with 43 additions and 18 deletions.
diff --git a/src/components/CopyTxHash/CopyTxHash.tsx b/src/components/CopyTxHash/CopyTxHash.tsx
@@ -20,32 +20,62 @@ const getExplorerUrl = ({ chain, txHash }: { chain: WalletChain; txHash: string
   }
 };
 
+enum ExplorerType {
+  STELLAR_EXPERT = 'STELLAR_EXPERT',
+  STELLAR_CHAIN = 'STELLAR_CHAIN',
+}
+
+interface ExplorerLinks {
+  stellarExpert: string;
+  stellarChain: string;
+}
+
 const CopyTxHash = ({ txHash }: { txHash: string }) => {
   const { notify } = useNotification();
 
   const sorobanContext = useSorobanReact();
 
-  const [explorerLink, setExplorerLink] = useState<string | undefined>(undefined);
+  const activeChain = sorobanContext?.activeChain;
 
-  useEffect(() => {
-    if (!sorobanContext) return;
+  const [explorersLinks, setExplorersLinks] = useState<ExplorerLinks | undefined>(undefined);
 
-    const activeChain = sorobanContext.activeChain;
 
-    if (!activeChain) return;
+  useEffect(() => {
+    if (!sorobanContext || !activeChain) return;
 
-    if (activeChain.name === testnet.name || activeChain.name === mainnet.name) {
-      setExplorerLink(getExplorerUrl({ chain: activeChain, txHash }));
+    if (activeChain.name === testnet.name) {
+      setExplorersLinks({
+        stellarExpert: `https://stellar.expert/explorer/testnet/tx/${txHash}`,
+        stellarChain: `https://testnet.stellarchain.io/transactions/${txHash}`,
+      });
     }
-  }, [sorobanContext, txHash]);
 
-  const handleClickViewOnExplorer = () => {
-    if (!explorerLink) return;
+    if (activeChain.name === mainnet.name) {
+      setExplorersLinks({
+        stellarExpert: `https://stellar.expert/explorer/public/tx/${txHash}`,
+        stellarChain: `https://stellarchain.io/transactions/${txHash}`,
+      });
+    }
+  }, [sorobanContext, txHash]);
 
-    window.open(explorerLink, '_blank');
-  };
   return (
-    <Box display="flex" alignItems="center" flexDirection="column">
+    <Box display="flex" alignItems="center" flexDirection="column" sx={{ mt: 1 }}>
+      {(explorersLinks?.stellarChain && explorersLinks.stellarExpert) && (
+        <>
+          <LabelSmall style={{ cursor: 'pointer' }}>
+            <a href={explorersLinks?.stellarExpert}
+              target='_blank'>
+              View on Stellar.Expert
+            </a>
+          </LabelSmall>
+          <LabelSmall style={{ cursor: 'pointer' }}>
+            <a href={explorersLinks?.stellarChain}
+              target='_blank'>
+              View on StellarChain.io
+            </a>
+          </LabelSmall>
+        </>
+      )}
       <CopyToClipboard
         text={txHash}
         onCopy={() =>
@@ -61,11 +91,6 @@ const CopyTxHash = ({ txHash }: { txHash: string }) => {
           <Clipboard color="white" size="16px" />
         </Row>
       </CopyToClipboard>
-      {explorerLink && (
-        <LabelSmall style={{ cursor: 'pointer' }} onClick={handleClickViewOnExplorer}>
-          View on explorer
-        </LabelSmall>
-      )}
     </Box>
   );
 };