fix: go back ledger navigation

leather-io · Jan 20, 2025 · 277bad1 · 277bad1
1 parent 6f054bb
commit 277bad1
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 12 deletions.
diff --git a/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx b/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { HStack, styled } from 'leather-styles/jsx';
 
@@ -15,13 +15,15 @@ interface ConnectLedgerButtonProps {
 }
 export function ConnectLedgerButton({ chain }: ConnectLedgerButtonProps) {
   const navigate = useNavigate();
+  const location = useLocation();
 
   const onClick = () => {
     navigate(`${chain}/connect-your-ledger`, {
       replace: true,
       state: {
         [immediatelyAttemptLedgerConnection]: true,
         backgroundLocation: { pathname: RouteUrls.Home },
+        fromLocation: location,
       },
     });
   };

diff --git a/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx b/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Route, useLocation } from 'react-router-dom';
 
+import { bytesToHex } from '@noble/hashes/utils';
 import * as btc from '@scure/btc-signer';
 import { hexToBytes } from '@stacks/common';
 import BitcoinApp from 'ledger-bitcoin';
@@ -106,6 +107,13 @@ function LedgerSignBitcoinTxContainer() {
       },
     });
 
+  function closeAction() {
+    appEvents.publish('ledgerBitcoinTxSigningCancelled', {
+      unsignedPsbt: unsignedTransaction ? bytesToHex(unsignedTransaction.toPSBT()) : '',
+    });
+    ledgerNavigate.cancelLedgerAction();
+  }
+
   const ledgerContextValue: LedgerTxSigningContext = {
     chain,
     transaction: unsignedTransaction,
@@ -118,7 +126,7 @@ function LedgerSignBitcoinTxContainer() {
   return (
     <TxSigningFlow
       context={ledgerContextValue}
-      closeAction={canCancelLedgerAction ? ledgerNavigate.cancelLedgerAction : undefined}
+      closeAction={canCancelLedgerAction ? closeAction : undefined}
     />
   );
 }
diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Sheet, SheetHeader } from '@leather.io/ui';
 
@@ -13,10 +13,15 @@ import { ConnectLedger } from './connect-ledger';
 
 export function ConnectLedgerStart() {
   const navigate = useNavigate();
+  const location = useLocation();
+
   const pageModeRoutingAction = (url: string) =>
     whenPageMode({
       full() {
-        navigate(url, { replace: true, state: { [immediatelyAttemptLedgerConnection]: true } });
+        navigate(url, {
+          replace: true,
+          state: { [immediatelyAttemptLedgerConnection]: true, fromLocation: location },
+        });
       },
       popup() {
         void openIndexPageInNewTab(url);

diff --git a/src/app/features/ledger/hooks/use-ledger-navigate.ts b/src/app/features/ledger/hooks/use-ledger-navigate.ts
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { resolvePath, useLocation, useNavigate } from 'react-router-dom';
 
 import { bytesToHex } from '@stacks/common';
 import { StacksTransaction } from '@stacks/transactions';
@@ -38,7 +38,8 @@ export function useLedgerNavigate() {
 
       toConnectAndSignBitcoinTransactionStep(
         psbt: Uint8Array,
-        inputsToSign?: BitcoinInputSigningConfig[]
+        inputsToSign?: BitcoinInputSigningConfig[],
+        fromLocation?: typeof location
       ) {
         return navigate(RouteUrls.ConnectLedger, {
           replace: true,
@@ -47,6 +48,7 @@ export function useLedgerNavigate() {
             tx: bytesToHex(psbt),
             inputsToSign,
             backgroundLocation: { pathname: RouteUrls.Home },
+            fromLocation,
           },
         });
       },
@@ -83,6 +85,7 @@ export function useLedgerNavigate() {
             latestLedgerError: errorMessage,
             chain,
             backgroundLocation: { pathname: RouteUrls.Home },
+            fromLocation: location.state.fromLocation,
           },
         });
       },
@@ -145,10 +148,15 @@ export function useLedgerNavigate() {
       },
 
       cancelLedgerAction() {
-        // Use baseUrl to determine where to go on close
-        const baseUrl = `/${location.pathname.split('/')[1]}`;
+        const fromLocation = location.state.fromLocation ?? undefined;
 
-        return navigate(baseUrl, {
+        if (fromLocation) {
+          return navigate(fromLocation, { state: { ...fromLocation.state, wentBack: true } });
+        }
+
+        const resolvedPath = resolvePath('..', location.pathname);
+
+        return navigate(resolvedPath, {
           relative: 'path',
           replace: true,
           state: { ...location.state, wentBack: true },

diff --git a/src/app/pages/legacy-account-auth/legacy-account-auth.tsx b/src/app/pages/legacy-account-auth/legacy-account-auth.tsx
@@ -1,4 +1,4 @@
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
 import { closeWindow } from '@shared/utils';
@@ -30,6 +30,7 @@ export function LegacyAccountAuth() {
   const { toggleSwitchAccount } = useSwitchAccountSheet();
   const { whenWallet } = useWalletType();
   const navigate = useNavigate();
+  const location = useLocation();
 
   useOnOriginTabClose(() => closeWindow());
 
@@ -44,7 +45,7 @@ export function LegacyAccountAuth() {
         await finishSignIn(index);
       },
       async ledger() {
-        navigate(RouteUrls.ConnectLedger, { state: { index } });
+        navigate(RouteUrls.ConnectLedger, { state: { index, fromLocation: location } });
         await listenForJwtSigningComplete();
       },
     })();

diff --git a/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts b/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts
@@ -1,3 +1,5 @@
+import { useLocation } from 'react-router-dom';
+
 import { bytesToHex } from '@noble/hashes/utils';
 import * as btc from '@scure/btc-signer';
 import { Psbt } from 'bitcoinjs-lib';
@@ -257,6 +259,7 @@ export function useGetAssumedZeroIndexSigningConfig() {
 export function useSignBitcoinTx() {
   const { whenWallet } = useWalletType();
   const ledgerNavigate = useLedgerNavigate();
+  const location = useLocation();
   const signSoftwareTx = useSignBitcoinSoftwareTx();
   const getDefaultSigningConfig = useGetAssumedZeroIndexSigningConfig();
 
@@ -277,7 +280,11 @@ export function useSignBitcoinTx() {
         // many routes, in order to achieve a consistent API between
         // Ledger/software, we subscribe to the event that occurs when the
         // unsigned tx is signed
-        ledgerNavigate.toConnectAndSignBitcoinTransactionStep(psbt, getSigningConfig(inputsToSign));
+        ledgerNavigate.toConnectAndSignBitcoinTransactionStep(
+          psbt,
+          getSigningConfig(inputsToSign),
+          location
+        );
         return listenForBitcoinTxLedgerSigning(bytesToHex(psbt));
       },
       async software() {