From efce52dc49aa6a3bd01fc170778c0f8f4135510d Mon Sep 17 00:00:00 2001 From: Anastasios Date: Wed, 22 Jan 2025 15:22:11 +0400 Subject: [PATCH] fix: go close ledger action navigation, LEA-2078 --- .../connect-ledger-asset-button.tsx | 4 +++- .../ledger-bitcoin-sign-tx-container.tsx | 10 +++++++++- .../connect-device/connect-ledger-start.tsx | 9 +++++++-- .../ledger/hooks/use-ledger-navigate.ts | 18 +++++++++++++----- .../ledger/utils/generic-ledger-utils.ts | 1 - .../legacy-account-auth.tsx | 5 +++-- .../blockchain/bitcoin/bitcoin.hooks.ts | 9 ++++++++- 7 files changed, 43 insertions(+), 13 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 index 81a49bc5420..4aa42869df9 100644 --- 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,6 +15,7 @@ interface ConnectLedgerButtonProps { } export function ConnectLedgerButton({ chain }: ConnectLedgerButtonProps) { const navigate = useNavigate(); + const location = useLocation(); const onClick = () => { navigate(`${chain}/connect-your-ledger`, { @@ -22,6 +23,7 @@ export function ConnectLedgerButton({ chain }: ConnectLedgerButtonProps) { 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 index 6c9b5dd412a..42fb65f1791 100644 --- 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 ( ); } 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 index a55f62aaa1f..71c9e4031dc 100644 --- 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 index 792884491df..2b38ade33a8 100644 --- 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/features/ledger/utils/generic-ledger-utils.ts b/src/app/features/ledger/utils/generic-ledger-utils.ts index f753c35be91..242a9986f86 100644 --- a/src/app/features/ledger/utils/generic-ledger-utils.ts +++ b/src/app/features/ledger/utils/generic-ledger-utils.ts @@ -128,7 +128,6 @@ function useIsLedgerActionCancellable(): boolean { const { pathname } = useLocation(); return ( pathname.includes(RouteUrls.ConnectLedger) || - pathname.includes(RouteUrls.ConnectLedgerSuccess) || pathname.includes(RouteUrls.ConnectLedgerError) || pathname.includes(RouteUrls.AwaitingDeviceUserAction) ); diff --git a/src/app/pages/legacy-account-auth/legacy-account-auth.tsx b/src/app/pages/legacy-account-auth/legacy-account-auth.tsx index 6108cad18a2..fa936989cf5 100644 --- 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 index 52c57c87411..ddb918d9612 100644 --- 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() {