From abff3ef84c593c4daa651c34df74a8a4264291bb Mon Sep 17 00:00:00 2001
From: Terence Ng <ngtere@live.com.sg>
Date: Thu, 20 Jun 2024 17:03:06 +0800
Subject: [PATCH] infer protocol from list instead of ft.principle (#348)

---
 src/app/components/tokenTile/index.tsx  |  4 +--
 src/app/screens/coinDashboard/index.tsx | 40 ++++++++++++++-----------
 src/app/screens/home/index.tsx          |  8 +++--
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/app/components/tokenTile/index.tsx b/src/app/components/tokenTile/index.tsx
index 0c954b2b5..2f3b7337c 100644
--- a/src/app/components/tokenTile/index.tsx
+++ b/src/app/components/tokenTile/index.tsx
@@ -105,7 +105,7 @@ interface Props {
   title: string;
   loading: boolean;
   currency: CurrencyTypes;
-  onPress: (coin: CurrencyTypes, ftKey: string | undefined) => void;
+  onPress: (coin: CurrencyTypes, fungibleToken: FungibleToken | undefined) => void;
   fungibleToken?: FungibleToken;
   enlargeTicker?: boolean;
   className?: string;
@@ -162,7 +162,7 @@ function TokenTile({
     }
   };
 
-  const handleTokenPressed = () => onPress(currency, fungibleToken?.principal);
+  const handleTokenPressed = () => onPress(currency, fungibleToken);
 
   return (
     <TileContainer onClick={handleTokenPressed} className={className}>
diff --git a/src/app/screens/coinDashboard/index.tsx b/src/app/screens/coinDashboard/index.tsx
index da8d3ec25..2d1868970 100644
--- a/src/app/screens/coinDashboard/index.tsx
+++ b/src/app/screens/coinDashboard/index.tsx
@@ -10,6 +10,7 @@ import useBtcWalletData from '@hooks/queries/useBtcWalletData';
 import useSpamTokens from '@hooks/queries/useSpamTokens';
 import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
 import { Flag } from '@phosphor-icons/react';
+import { FungibleToken } from '@secretkeylabs/xverse-core';
 import {
   setBrc20ManageTokensAction,
   setRunesManageTokensAction,
@@ -155,7 +156,26 @@ export default function CoinDashboard() {
   const { visible: runesCoinsList } = useVisibleRuneFungibleTokens();
   const { visible: sip10CoinsList } = useVisibleSip10FungibleTokens();
   const { visible: brc20CoinsList } = useVisibleBrc20FungibleTokens();
+
   const ftKey = searchParams.get('ftKey');
+  const protocol = searchParams.get('protocol');
+  let selectedFt: FungibleToken | undefined;
+
+  if (ftKey && protocol) {
+    switch (protocol) {
+      case 'stacks':
+        selectedFt = sip10CoinsList.find((ft) => ft.principal === ftKey);
+        break;
+      case 'brc-20':
+        selectedFt = brc20CoinsList.find((ft) => ft.principal === ftKey);
+        break;
+      case 'runes':
+        selectedFt = runesCoinsList.find((ft) => ft.principal === ftKey);
+        break;
+      default:
+        selectedFt = undefined;
+    }
+  }
 
   useBtcWalletData();
 
@@ -163,20 +183,6 @@ export default function CoinDashboard() {
     navigate(-1);
   };
 
-  let selectedFt = sip10CoinsList.find((ft) => ft.principal === ftKey);
-  let selectedProtocol = 'stacks';
-
-  if (!selectedFt) {
-    selectedFt = brc20CoinsList.find((ft) => ft.principal === ftKey);
-    selectedProtocol = 'brc-20';
-  }
-
-  if (!selectedFt) {
-    selectedFt = runesCoinsList.find((ft) => ft.principal === ftKey);
-    selectedProtocol = 'runes';
-  }
-
-  const protocol = selectedProtocol || selectedFt?.protocol;
   useTrackMixPanelPageViewed(
     protocol
       ? {
@@ -229,13 +235,11 @@ export default function CoinDashboard() {
                 handleGoBack();
                 return;
               }
-
               // set the visibility to false
               const payload = {
                 principal: selectedFt.principal,
                 isEnabled: false,
               };
-
               if (protocol === 'runes') {
                 dispatch(setRunesManageTokensAction(payload));
               } else if (protocol === 'stacks') {
@@ -278,7 +282,7 @@ export default function CoinDashboard() {
             </Button>
           </FtInfoContainer>
         )}
-        {protocol === 'stacks' && showFtContractDetails && (
+        {selectedFt && protocol === 'stacks' && showFtContractDetails && (
           <TokenContractContainer data-testid="coin-contract-container">
             <h1>{t('FT_CONTRACT_PREFIX')}</h1>
             <ContractAddressCopyButton onClick={handleCopyContractAddress}>
@@ -300,7 +304,7 @@ export default function CoinDashboard() {
           coin={currency as CurrencyTypes}
           stxTxFilter={
             selectedFt?.protocol === 'runes'
-              ? selectedFt.name
+              ? selectedFt?.name
               : `${selectedFt?.principal}::${selectedFt?.assetName}`
           }
           brc20Token={protocol === 'brc-20' ? selectedFt?.principal || null : null}
diff --git a/src/app/screens/home/index.tsx b/src/app/screens/home/index.tsx
index 24e377b74..d49ca7d91 100644
--- a/src/app/screens/home/index.tsx
+++ b/src/app/screens/home/index.tsx
@@ -312,9 +312,11 @@ function Home() {
     if (showBtcReceiveAlert) setIsBtcReceiveAlertVisible(true);
   };
 
-  const handleTokenPressed = (currency: CurrencyTypes, ftKey?: string) => {
-    if (ftKey) {
-      navigate(`/coinDashboard/${currency}?ftKey=${ftKey}`);
+  const handleTokenPressed = (currency: CurrencyTypes, fungibleToken?: FungibleToken) => {
+    if (fungibleToken) {
+      navigate(
+        `/coinDashboard/${currency}?ftKey=${fungibleToken.principal}&protocol=${fungibleToken.protocol}`,
+      );
     } else {
       navigate(`/coinDashboard/${currency}`);
     }