fix: sip10 tokens ledger send form, closes leather-io#4491

Nithishvb · Nov 8, 2023 · 1bd7837 · 1bd7837
1 parent 642e08a
commit 1bd7837
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 36 deletions.
diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx
@@ -6,35 +6,29 @@ import { Stack } from 'leather-styles/jsx';
 import { LEDGER_BITCOIN_ENABLED } from '@shared/environment';
 
 import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
-import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { BitcoinContractEntryPoint } from '@app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point';
 import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
-import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { BtcIcon } from '@app/components/icons/btc-icon';
 import { CurrentStacksAccountLoader } from '@app/components/stacks-account-loader';
 import { useHasBitcoinLedgerKeychain } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
 import { Collectibles } from '../collectibles/collectibles';
 import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers';
 import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list';
 import { ConnectLedgerAssetBtn } from './components/connect-ledger-asset-button';
 import { StacksBalanceItem } from './components/stacks-balance-item';
+import { StacksLedgerAssetsList } from './components/stacks-ledger-assets';
 
 export function AssetsList() {
-  const hasStacksKeys = useHasStacksLedgerKeychain();
   const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain();
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const network = useCurrentNetwork();
-  const currentAccount = useCurrentStacksAccount();
 
   const { btcAvailableAssetBalance, btcAvailableUsdBalance } = useBtcAssetBalance(btcAddress);
-  const { stxEffectiveBalance, stxEffectiveUsdBalance } = useStxBalance();
 
   const { whenWallet } = useWalletType();
 
@@ -74,15 +68,7 @@ export function AssetsList() {
             {account => <StacksBalanceItem account={account} />}
           </CurrentStacksAccountLoader>
         ),
-        ledger: (
-          <CryptoCurrencyAssetItem
-            assetBalance={stxEffectiveBalance}
-            usdBalance={stxEffectiveUsdBalance}
-            icon={<StxAvatar />}
-            address={currentAccount?.address || ''}
-            rightElement={hasStacksKeys ? undefined : <ConnectLedgerAssetBtn chain="stacks" />}
-          />
-        ),
+        ledger: <StacksLedgerAssetsList />,
       })}
 
       {whenWallet({

diff --git a/src/app/features/asset-list/components/stacks-ledger-assets.tsx b/src/app/features/asset-list/components/stacks-ledger-assets.tsx
@@ -0,0 +1,30 @@
+import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
+import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
+import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
+import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
+import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks';
+
+import { ConnectLedgerAssetBtn } from './connect-ledger-asset-button';
+import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list';
+
+export function StacksLedgerAssetsList() {
+  const hasStacksKeys = useHasStacksLedgerKeychain();
+  const currentAccount = useCurrentStacksAccount();
+  const { stxEffectiveBalance, stxEffectiveUsdBalance } = useStxBalance();
+  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(
+    currentAccount?.address || ''
+  );
+  return (
+    <>
+      <CryptoCurrencyAssetItem
+        assetBalance={stxEffectiveBalance}
+        usdBalance={stxEffectiveUsdBalance}
+        icon={<StxAvatar />}
+        address={currentAccount?.address || ''}
+        rightElement={hasStacksKeys ? undefined : <ConnectLedgerAssetBtn chain="stacks" />}
+      />
+      <StacksFungibleTokenAssetList assetBalances={stacksFtAssetBalances} />
+    </>
+  );
+}
diff --git a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
@@ -19,12 +19,12 @@ export function ChooseCryptoAsset() {
   const hasBitcoinLedgerKeys = useHasCurrentBitcoinAccount();
   const hasStacksLedgerKeys = useHasStacksLedgerKeychain();
 
-  const chechKeychainAvailable = useCallback(
+  const checkBlockchainAvailable = useCallback(
     (symbol: string) => {
-      if (symbol === 'BTC') {
+      if (symbol === 'bitcoin') {
         return hasBitcoinLedgerKeys;
       }
-      if (symbol === 'STX') {
+      if (symbol === 'stacks') {
         return hasStacksLedgerKeys;
       }
       return false;
@@ -37,9 +37,9 @@ export function ChooseCryptoAsset() {
   return (
     <ChooseCryptoAssetLayout>
       <CryptoAssetList
-        cryptoAssetBalances={allTransferableCryptoAssetBalances.filter(balance =>
+        cryptoAssetBalances={allTransferableCryptoAssetBalances.filter(asset =>
           whenWallet({
-            ledger: chechKeychainAvailable(balance.asset.symbol),
+            ledger: checkBlockchainAvailable(asset.blockchain),
             software: true,
           })
         )}

diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-sip10-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-sip10-send-form.tsx
@@ -8,10 +8,8 @@ import { StacksSendFormValues } from '@shared/models/form.model';
 
 import { getImageCanonicalUri } from '@app/common/crypto-assets/stacks-crypto-asset.utils';
 import { convertAmountToBaseUnit } from '@app/common/money/calculate-money';
-import { useWalletType } from '@app/common/use-wallet-type';
 import { formatContractId } from '@app/common/utils';
 import { stacksFungibleTokenAmountValidator } from '@app/common/validation/forms/amount-validators';
-import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigate';
 import { useStacksFungibleTokenAssetBalance } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { useCalculateStacksTxFees } from '@app/query/stacks/fees/fees.hooks';
 import {
@@ -31,8 +29,6 @@ export function useSip10SendForm({ symbol, contractId }: UseSip10SendFormArgs) {
   const assetBalance = useStacksFungibleTokenAssetBalance(contractId);
   const generateTx = useGenerateFtTokenTransferUnsignedTx(assetBalance);
 
-  const { whenWallet } = useWalletType();
-  const ledgerNavigate = useLedgerNavigate();
   const sendFormNavigate = useSendFormNavigate();
 
   const unsignedTx = useFtTokenTransferUnsignedTx(assetBalance);
@@ -83,15 +79,11 @@ export function useSip10SendForm({ symbol, contractId }: UseSip10SendFormArgs) {
       const tx = await generateTx(values);
       if (!tx) return logger.error('Attempted to generate unsigned tx, but tx is undefined');
 
-      whenWallet({
-        software: () =>
-          sendFormNavigate.toConfirmAndSignStacksSip10Transaction({
-            decimals: assetBalance.balance.decimals,
-            name: assetBalance.asset.name,
-            tx,
-          }),
-        ledger: () => ledgerNavigate.toConnectAndSignTransactionStep(tx),
-      })();
+      sendFormNavigate.toConfirmAndSignStacksSip10Transaction({
+        decimals: assetBalance.balance.decimals,
+        name: assetBalance.asset.name,
+        tx,
+      });
     },
   };
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx b/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx
@@ -87,10 +87,11 @@ export const sendCryptoAssetFormRoutes = (
     <Route path={RouteUrls.SendSip10Form} element={<Sip10TokenSendForm />}>
       {broadcastErrorDrawerRoute}
       {editNonceDrawerRoute}
-      {ledgerStacksTxSigningRoutes}
       {recipientAccountsDrawerRoute}
     </Route>
-    <Route path="/send/:symbol/:contractId/confirm" element={<StacksSendFormConfirmation />} />
+    <Route path="/send/:symbol/:contractId/confirm" element={<StacksSendFormConfirmation />}>
+      {ledgerStacksTxSigningRoutes}
+    </Route>
 
     <Route path={RouteUrls.SentStxTxSummary} element={<StxSentSummary />} />
   </Route>