From a59bcfd33ff434c52f009183d6935b8c111d95b0 Mon Sep 17 00:00:00 2001
From: Rye Nguyen <ryenguyen7411@users.noreply.github.com>
Date: Sat, 22 Jul 2023 00:16:22 +0700
Subject: [PATCH] feat: adjust View on explorer url (#141)

---
 src/modules/env/index.tsx                     |  2 ++
 src/scenes/SwapDetails/Vertical/Top/index.tsx |  2 +-
 src/scenes/SwapDetails/Vertical/index.tsx     | 31 +++----------------
 3 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/src/modules/env/index.tsx b/src/modules/env/index.tsx
index b942ab3..029b8cd 100644
--- a/src/modules/env/index.tsx
+++ b/src/modules/env/index.tsx
@@ -19,3 +19,5 @@ export const walletConnectBridge = process.env.NEXT_PUBLIC_WALLET_CONNECT_BRIDGE
 export const isServer = typeof window === 'undefined';
 
 export const rebalanceRewardsUrl = 'https://swingby.substack.com/p/bridge-rebalancing-guide';
+
+export const explorerSwapDetailUrl = 'https://app.swingby.network/explorer/{swapId}';
diff --git a/src/scenes/SwapDetails/Vertical/Top/index.tsx b/src/scenes/SwapDetails/Vertical/Top/index.tsx
index 4df65e1..a12eb5f 100644
--- a/src/scenes/SwapDetails/Vertical/Top/index.tsx
+++ b/src/scenes/SwapDetails/Vertical/Top/index.tsx
@@ -193,7 +193,7 @@ export const Top = ({
               id="widget.swap-network-fees"
               values={{
                 value: <FormattedNumber value={Number(swap.feeTotal)} maximumFractionDigits={4} />,
-                symbol: swap.feeCurrency,
+                symbol: swingbyTextDisplay(swap.feeCurrency!),
               }}
             />
           </FeeText>
diff --git a/src/scenes/SwapDetails/Vertical/index.tsx b/src/scenes/SwapDetails/Vertical/index.tsx
index 5998db4..87e2370 100644
--- a/src/scenes/SwapDetails/Vertical/index.tsx
+++ b/src/scenes/SwapDetails/Vertical/index.tsx
@@ -12,6 +12,7 @@ import { useSdkContext } from '../../../modules/store/sdkContext';
 import { useAssertTermsSignature } from '../../../modules/terms';
 import { isWeb3ableCurrency, useOnboard, useTransferToken } from '../../../modules/web3';
 import { SwapData } from '../../../modules/store/swaps';
+import { explorerSwapDetailUrl } from '../../../modules/env';
 
 import {
   ExplorerContainer,
@@ -39,23 +40,7 @@ export const Vertical = ({ resource, swap }: VerticalProps) => {
   const [hasTransactionSucceeded, setTransactionSucceeded] = useState(false);
   const { assertTermsSignature } = useAssertTermsSignature();
 
-  const outboundLink = useMemo(() => {
-    if (!swap || !swap.txReceivingId) return undefined;
-    return buildExplorerLink({
-      context,
-      coin: swap.currencyReceiving,
-      transactionId: swap.txReceivingId,
-    });
-  }, [context, swap]);
-
-  const inboundLink = useMemo(() => {
-    if (!swap || !swap.txDepositId) return undefined;
-    return buildExplorerLink({
-      context,
-      coin: swap.currencyDeposit,
-      transactionId: swap.txDepositId,
-    });
-  }, [context, swap]);
+  const goToExplorerUrl = explorerSwapDetailUrl.replace('{swapId}', swap?.hash || '');
 
   const doTransfer = useCallback(async () => {
     try {
@@ -73,13 +58,10 @@ export const Vertical = ({ resource, swap }: VerticalProps) => {
 
   const supportsWeb3 = isWeb3ableCurrency(swap.currencyDeposit);
 
-  const explorerLink = ({ url, txType }: { url: string; txType: 'inbound' | 'outbound' }) => (
+  const explorerLink = ({ url }: { url: string }) => (
     <div>
       <ExplorerLink href={url} target="_blank" data-testid={buildTestId('explorer-link')}>
         <RowLink>
-          <FormattedMessage
-            id={txType === 'inbound' ? 'widget.explorer-deposit' : 'widget.explorer-swap'}
-          />
           <div>
             <FormattedMessage id="widget.explorer-link-long" />
             <ExplorerLinkCaret />
@@ -133,13 +115,10 @@ export const Vertical = ({ resource, swap }: VerticalProps) => {
           />
         </ProgressContainer>
       )}
-      {(inboundLink || outboundLink) && (
+      {(swap.txDepositId || swap.txReceivingId) && (
         <>
           <Space size="town" shape="fill" />
-          <ExplorerContainer>
-            {inboundLink && explorerLink({ url: inboundLink, txType: 'inbound' })}
-            {outboundLink && explorerLink({ url: outboundLink, txType: 'outbound' })}
-          </ExplorerContainer>
+          <ExplorerContainer>{explorerLink({ url: goToExplorerUrl })}</ExplorerContainer>
         </>
       )}
     </VerticalWidgetView>