chore: add ledger to swaps, disabled, ref #4367

package.json

@@ -241,7 +241,7 @@
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
     "@ls-lint/ls-lint": "2.1.0",
-    "@pandacss/dev": "0.16.0",
+    "@pandacss/dev": "0.17.0",
     "@playwright/test": "1.38.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@redux-devtools/cli": "3.0.2",

src/app/common/transactions/stacks/broadcast-transaction.ts

@@ -40,8 +40,6 @@ export async function broadcastStacksTransaction(options: BroadcastTransactionOp
     throw new Error('Invalid txid for transaction');
   }
 
-  logger.info('Transaction broadcast', response);
-
   return {
     txId: response.txid,
     txRaw,

src/app/components/nonce-setter.tsx

@@ -13,8 +13,9 @@ export function NonceSetter() {
   const { data: nextNonce } = useNextNonce();
 
   useAsync(async () => {
-    if (nextNonce?.nonce && !touched.nonce && values.nonce !== nextNonce.nonce)
+    if (nextNonce?.nonce && !touched.nonce && values.nonce !== nextNonce.nonce) {
       return await setFieldValue('nonce', nextNonce?.nonce);
+    }
     return;
   }, [nextNonce?.nonce]);
 

src/app/features/ledger/hooks/use-ledger-navigate.ts

@@ -25,6 +25,7 @@ export function useLedgerNavigate() {
       toConnectAndSignTransactionStep(transaction: StacksTransaction) {
         return navigate(RouteUrls.ConnectLedger, {
           replace: true,
+          relative: 'path',
           state: { tx: bytesToHex(transaction.serialize()) },
         });
       },

src/app/pages/home/components/account-actions.tsx

@@ -27,18 +27,11 @@ export function AccountActions(props: FlexProps) {
   return (
     <Flex justify="space-between" {...props}>
       <SendButton />
-
       <ActionButton
         data-testid={HomePageSelectors.ReceiveCryptoAssetBtn}
         icon={<ArrowDown />}
         label="Receive"
-        onClick={() =>
-          navigate(receivePath, {
-            state: {
-              backgroundLocation: location,
-            },
-          })
-        }
+        onClick={() => navigate(receivePath, { state: { backgroundLocation: location } })}
       />
       <ActionButton
         data-testid={HomePageSelectors.FundAccountBtn}

src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx

@@ -77,7 +77,10 @@ export const sendCryptoAssetFormRoutes = (
       {editNonceDrawerRoute}
       {recipientAccountsDrawerRoute}
     </Route>
-    <Route path="/send/stx/confirm" element={<StacksSendFormConfirmation />}>
+    <Route
+      path={`${RouteUrls.SendCryptoAssetForm.replace(':symbol', 'stx')}/confirm`}
+      element={<StacksSendFormConfirmation />}
+    >
       {ledgerStacksTxSigningRoutes}
     </Route>
 

src/app/pages/swap/swap-container.tsx → src/app/pages/swap/alex-swap-container.tsx

@@ -21,24 +21,27 @@ import { defaultFeesMinValues } from '@app/query/stacks/fees/fees.hooks';
 import { useStacksPendingTransactions } from '@app/query/stacks/mempool/mempool.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useGenerateStacksContractCallUnsignedTx } from '@app/store/transactions/contract-call.hooks';
-import { useSignTransactionSoftwareWallet } from '@app/store/transactions/transaction.hooks';
+import { useSignStacksTransaction } from '@app/store/transactions/transaction.hooks';
 
 import { SwapContainerLayout } from './components/swap-container.layout';
 import { SwapForm } from './components/swap-form';
+import { generateSwapRoutes } from './generate-swap-routes';
 import { useAlexBroadcastSwap } from './hooks/use-alex-broadcast-swap';
 import { oneHundredMillion, useAlexSwap } from './hooks/use-alex-swap';
 import { useStacksBroadcastSwap } from './hooks/use-stacks-broadcast-swap';
 import { SwapAsset, SwapFormValues } from './hooks/use-swap-form';
 import { SwapContext, SwapProvider } from './swap.context';
 import { migratePositiveBalancesToTop, sortSwappableAssetsBySymbol } from './swap.utils';
 
-export function SwapContainer() {
+export const alexSwapRoutes = generateSwapRoutes(<AlexSwapContainer />);
+
+function AlexSwapContainer() {
   const [isSendingMax, setIsSendingMax] = useState(false);
   const navigate = useNavigate();
   const { setIsLoading } = useLoading(LoadingKeys.SUBMIT_SWAP_TRANSACTION);
   const currentAccount = useCurrentStacksAccount();
   const generateUnsignedTx = useGenerateStacksContractCallUnsignedTx();
-  const signSoftwareWalletTx = useSignTransactionSoftwareWallet();
+  const signTx = useSignStacksTransaction();
   const { transactions: pendingTransactions } = useStacksPendingTransactions();
 
   const isSponsoredByAlex = !pendingTransactions.length;
@@ -125,7 +128,7 @@ export function SwapContainer() {
     const minToAmount = BigInt(
       new BigNumber(swapSubmissionData.swapAmountTo)
         .multipliedBy(oneHundredMillion)
-        .multipliedBy(1 - slippage)
+        .multipliedBy(new BigNumber(1).minus(slippage))
         .dp(0)
         .toString()
     );
@@ -163,14 +166,17 @@ export function SwapContainer() {
     const unsignedTx = await generateUnsignedTx(payload, tempFormValues);
     if (!unsignedTx) return logger.error('Attempted to generate unsigned tx, but tx is undefined');
 
-    const signedTx = signSoftwareWalletTx(unsignedTx);
-    if (!signedTx) return logger.error('Attempted to generate raw tx, but signed tx is undefined');
-    const txRaw = bytesToHex(signedTx.serialize());
-
-    if (isSponsoredByAlex) {
-      return await broadcastAlexSwap(txRaw);
-    }
-    return await broadcastStacksSwap(unsignedTx);
+    try {
+      const signedTx = await signTx(unsignedTx);
+      if (!signedTx)
+        return logger.error('Attempted to generate raw tx, but signed tx is undefined');
+      const txRaw = bytesToHex(signedTx.serialize());
+
+      if (isSponsoredByAlex) {
+        return await broadcastAlexSwap(txRaw);
+      }
+      return await broadcastStacksSwap(unsignedTx);
+    } catch (error) {}
   }
 
   const swapContextValue: SwapContext = {

src/app/pages/swap/generate-swap-routes.tsx

@@ -0,0 +1,25 @@
+import { Route } from 'react-router-dom';
+
+import { RouteUrls } from '@shared/route-urls';
+
+import { ledgerStacksTxSigningRoutes } from '@app/features/ledger/flows/stacks-tx-signing/ledger-sign-tx.routes';
+import { AccountGate } from '@app/routes/account-gate';
+
+import { Swap } from './swap';
+import { SwapChooseAsset } from './swap-choose-asset/swap-choose-asset';
+import { SwapError } from './swap-error/swap-error';
+import { SwapReview } from './swap-review/swap-review';
+
+export function generateSwapRoutes(container: React.ReactNode) {
+  return (
+    <Route element={<AccountGate>{container}</AccountGate>}>
+      <Route path={RouteUrls.Swap} element={<Swap />}>
+        <Route path={RouteUrls.SwapChooseAsset} element={<SwapChooseAsset />} />
+      </Route>
+      <Route path={RouteUrls.SwapError} element={<SwapError />} />
+      <Route path={RouteUrls.SwapReview} element={<SwapReview />}>
+        {ledgerStacksTxSigningRoutes}
+      </Route>
+    </Route>
+  );
+}

src/app/pages/swap/swap-review/swap-review.tsx

@@ -1,3 +1,5 @@
+import { Outlet } from 'react-router-dom';
+
 import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { LeatherButton } from '@app/components/button/button';
@@ -17,16 +19,19 @@ export function SwapReview() {
   useRouteHeader(<ModalHeader defaultGoBack hideActions title="Review" />, true);
 
   return (
-    <SwapReviewLayout>
-      <SwapContentLayout>
-        <SwapAssetsPair />
-        <SwapDetails />
-      </SwapContentLayout>
-      <SwapFooterLayout>
-        <LeatherButton aria-busy={isLoading} onClick={onSubmitSwap} width="100%">
-          Swap
-        </LeatherButton>
-      </SwapFooterLayout>
-    </SwapReviewLayout>
+    <>
+      <SwapReviewLayout>
+        <SwapContentLayout>
+          <SwapAssetsPair />
+          <SwapDetails />
+        </SwapContentLayout>
+        <SwapFooterLayout>
+          <LeatherButton aria-busy={isLoading} type="button" onClick={onSubmitSwap} fullWidth>
+            Swap
+          </LeatherButton>
+        </SwapFooterLayout>
+      </SwapReviewLayout>
+      <Outlet />
+    </>
   );
 }

src/app/routes/app-routes.tsx

@@ -39,7 +39,7 @@ import { RpcSignStacksTransaction } from '@app/pages/rpc-sign-stacks-transaction
 import { BroadcastError } from '@app/pages/send/broadcast-error/broadcast-error';
 import { LockBitcoinSummary } from '@app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary';
 import { sendCryptoAssetFormRoutes } from '@app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes';
-import { swapRoutes } from '@app/pages/swap/swap.routes';
+import { alexSwapRoutes } from '@app/pages/swap/alex-swap-container';
 import { UnauthorizedRequest } from '@app/pages/unauthorized-request/unauthorized-request';
 import { Unlock } from '@app/pages/unlock';
 import { ViewSecretKey } from '@app/pages/view-secret-key/view-secret-key';
@@ -235,7 +235,7 @@ function useAppRoutes() {
           }}
         />
 
-        {swapRoutes}
+        {alexSwapRoutes}
 
         {/* Catch-all route redirects to onboarding */}