fix: send sip10 screen to use principal as identifier (#374)

secretkeylabs · Jul 2, 2024 · bbc041b · bbc041b
1 parent 93be9cc
commit bbc041b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/app/screens/coinDashboard/coinHeader.tsx b/src/app/screens/coinDashboard/coinHeader.tsx
@@ -128,8 +128,7 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
     } else {
       switch (fungibleToken?.protocol) {
         case 'stacks':
-          // TODO refactor to use principal
-          route = `/send-sip10?ticker=${fungibleToken?.ticker}`;
+          route = `/send-sip10?principal=${fungibleToken?.principal}`;
           break;
         case 'brc-20':
           route = `/send-brc20-one-step?principal=${fungibleToken?.principal}`;

diff --git a/src/app/screens/home/index.tsx b/src/app/screens/home/index.tsx
@@ -272,8 +272,7 @@ function Home() {
     let route = '';
     switch (fungibleToken?.protocol) {
       case 'stacks':
-        // TODO refactor to use principal
-        route = `/send-sip10?ticker=${fungibleToken?.ticker}`;
+        route = `/send-sip10?principal=${fungibleToken?.principal}`;
         break;
       case 'brc-20':
         route = `/send-brc20-one-step?principal=${fungibleToken?.principal}`;

diff --git a/src/app/screens/sendFt/index.tsx b/src/app/screens/sendFt/index.tsx
@@ -18,7 +18,7 @@ import { useMutation } from '@tanstack/react-query';
 import { convertAmountToFtDecimalPlaces, ftDecimals, replaceCommaByDot } from '@utils/helper';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 function SendFtScreen() {
   const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
@@ -35,10 +35,10 @@ function SendFtScreen() {
   const { data: stxPendingTxData } = useStxPendingTxData();
   const location = useLocation();
   const selectedNetwork = useNetworkSelector();
+  const [searchParams] = useSearchParams();
 
-  const coinTicker = location.search ? location.search.split('coinTicker=')[1] : undefined;
-  const fungibleToken =
-    location.state?.fungibleToken || sip10CoinsList.find((coin) => coin.ticker === coinTicker);
+  const principal = searchParams.get('principal');
+  const fungibleToken = sip10CoinsList?.find((coin) => coin.principal === principal);
 
   let recipient: string | undefined;
   let ftAmountToSend: string | undefined;
@@ -50,19 +50,20 @@ function SendFtScreen() {
     stxMemo = location.state.stxMemo;
   }
   const { isLoading, data, mutate } = useMutation<
-    StacksTransaction,
+    StacksTransaction | undefined,
     Error,
     { associatedAddress: string; amount: string; memo?: string }
   >({
     mutationFn: async ({ associatedAddress, amount, memo }) => {
+      if (!principal || !fungibleToken) return;
+
       let convertedAmount = amount;
       if (fungibleToken?.decimals) {
         convertedAmount = convertAmountToFtDecimalPlaces(amount, fungibleToken.decimals).toString();
       }
       setAmountToSend(amount);
       setTxMemo(memo);
       setRecipientAddress(associatedAddress);
-      const { principal } = fungibleToken;
       const contractInfo: string[] = principal.split('.');
       const unsginedTx: UnsignedStacksTransation = {
         amount: convertedAmount,
@@ -181,6 +182,11 @@ function SendFtScreen() {
     }
   };
 
+  if (!fungibleToken) {
+    navigate('/');
+    return null;
+  }
+
   return (
     <>
       <TopRow title={t('SEND')} onClick={handleBackButtonClick} />
@@ -191,7 +197,7 @@ function SendFtScreen() {
         recipientError={addressError}
         memoError={memoError}
         fungibleToken={fungibleToken}
-        balance={getBalance()}
+        balance={Number(getBalance())}
         onPressSend={onPressSendSTX}
         recipient={recipient}
         amountToSend={ftAmountToSend}