From 37f9204c92a0d4bd5f8704d57e5d6c51f30adf44 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Wed, 25 Feb 2026 18:05:00 -0300
Subject: [PATCH 01/15] feat: swap review screen WIP

---
 examples/next/src/app/page.tsx                |   2 +
 examples/next/src/components/Swap.tsx         | 282 ++++++++++
 .../src/components/ExecutionContainer.tsx     |   2 +-
 .../src/components/swap/ConfirmSwap.tsx       | 105 ++++
 .../src/components/swap/ekuboRouterAbi.json   | 482 ++++++++++++++++++
 packages/keychain/src/components/swap/swap.ts | 157 ++++++
 .../transaction/ConfirmTransaction.tsx        |  22 +-
 7 files changed, 1048 insertions(+), 4 deletions(-)
 create mode 100644 examples/next/src/components/Swap.tsx
 create mode 100644 packages/keychain/src/components/swap/ConfirmSwap.tsx
 create mode 100644 packages/keychain/src/components/swap/ekuboRouterAbi.json
 create mode 100644 packages/keychain/src/components/swap/swap.ts

diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
index 7efd511f81..f047d8f196 100644
--- a/examples/next/src/app/page.tsx
+++ b/examples/next/src/app/page.tsx
@@ -12,6 +12,7 @@ import { PlayButton } from "components/PlayButton";
 import { Profile } from "components/Profile";
 import { SignMessage } from "components/SignMessage";
 import { Transfer } from "components/Transfer";
+import { Swap } from "components/Swap";
 import { Starterpack } from "components/Starterpack";
 import { UpdateSession } from "components/UpdateSession";
 import { ControllerToaster } from "@cartridge/ui";
@@ -29,6 +30,7 @@ const Home: FC = () => {
       <PlayButton />
       <Profile />
       <Transfer />
+      <Swap />
       <ManualTransferEth />
       <Starterpack />
       <UpdateSession />
diff --git a/examples/next/src/components/Swap.tsx b/examples/next/src/components/Swap.tsx
new file mode 100644
index 0000000000..c9c80c9514
--- /dev/null
+++ b/examples/next/src/components/Swap.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import { useAccount } from "@starknet-react/core";
+import ControllerConnector from "@cartridge/connector/controller";
+import { Button } from "@cartridge/ui";
+
+export function Swap() {
+  const { account, connector } = useAccount();
+  const ctrlConnector = connector as unknown as ControllerConnector;
+
+  if (!account) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h2>Token Swaps</h2>
+      <div className="flex flex-wrap gap-1">
+        <Button
+          onClick={() => ctrlConnector.controller.openExecute(SWAP_SINGLE)}
+        >
+          Swap Single
+        </Button>
+        <Button
+          onClick={() => ctrlConnector.controller.openExecute(SWAP_MULTIPLE)}
+        >
+          Swap Multiple
+        </Button>
+        <Button
+          onClick={() =>
+            ctrlConnector.controller.openExecute(LS2_PURCHASE_GAME)
+          }
+        >
+          LS2 Purchase Game
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+const SWAP_SINGLE = [
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+      "0x32a03ab37fef8ba51",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x2",
+      "0x016dea82a6588ca9fb7200125fa05631b1c1735a313e24afe9c90301e441a796",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "17014118346046924117642026945517453312",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x6f3528fe26840249f4b191ef6dff7928",
+      "0xfffffc080ed7b455",
+      0,
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "3402823669209384634633746074317682114",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x1000003f7f1380b75",
+      "0x0",
+      0,
+      "0x016dea82a6588ca9fb7200125fa05631b1c1735a313e24afe9c90301e441a796",
+      "0xa688906bd8b00000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "0x016dea82a6588ca9fb7200125fa05631b1c1735a313e24afe9c90301e441a796",
+      "0xa4de3d0e9ba40000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    ],
+  },
+];
+
+const SWAP_MULTIPLE = [
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+      "0x176e9649d99dd740a",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x2",
+      "0x01c3c8284d7eed443b42f47e764032a56eaf50a9079d67993b633930e3689814",
+      "0x075afe6402ad5a5c20dd25e10ec3b3986acaa647b77e4ae24b0cbc9a54a27a87",
+      "0",
+      "0x56a4c",
+      "0x005e470ff654d834983a46b8f29dfa99963d5044b993cb7b9c92243a69dab38f",
+      "0x6f3528fe26840249f4b191ef6dff7928",
+      "0xfffffc080ed7b455",
+      0,
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x075afe6402ad5a5c20dd25e10ec3b3986acaa647b77e4ae24b0cbc9a54a27a87",
+      "1020847100762815411640772995208708096",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x1000003f7f1380b75",
+      "0x0",
+      0,
+      "0x01c3c8284d7eed443b42f47e764032a56eaf50a9079d67993b633930e3689814",
+      "0xde0b6b3a7640000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "0x01c3c8284d7eed443b42f47e764032a56eaf50a9079d67993b633930e3689814",
+      "0xdbd2fc137a30000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+      "0x4f1eba34861ddd0",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x2",
+      "0x0103eafe79f8631932530cc687dfcdeb013c883a82619ebf81be393e2953a87a",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "17014118346046923173168730371588410572",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x6f3528fe26840249f4b191ef6dff7928",
+      "0xfffffc080ed7b455",
+      0,
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "17014118346046923173168730371588410572",
+      "0x1744e",
+      "0x0000000000000000000000000000000000000000000000000000000000000000",
+      "0xf7c31547edfb13af0071dfd6ffe",
+      "0x0",
+      0,
+      "0x0103eafe79f8631932530cc687dfcdeb013c883a82619ebf81be393e2953a87a",
+      "0xde0b6b3a7640000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "0x0103eafe79f8631932530cc687dfcdeb013c883a82619ebf81be393e2953a87a",
+      "0xdbd2fc137a30000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    ],
+  },
+];
+
+const LS2_PURCHASE_GAME = [
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+      "0x5bbb37da193af4ba9",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x1",
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x0452810188c4cb3aebd63711a3b445755bc0d6c4f27b923fdd99b1a118858136",
+      "0",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x1000003f7f1380b75",
+      "0x0",
+      0,
+      "0x0452810188C4Cb3AEbD63711a3b445755BC0D6C4f27B923fDd99B1A118858136",
+      "0xde0b6b3a7640000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "1955023220287003686908448593668771782622329060199208410425295899940041883958",
+      "1000000000000000000",
+      "0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0452810188C4Cb3AEbD63711a3b445755BC0D6C4f27B923fDd99B1A118858136",
+    entrypoint: "approve",
+    calldata: [
+      "294172758298611957878874535440244936028848058202724233951972339591192112194",
+      "1000000000000000000",
+      "0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x00a67ef20b61a9846e1c82b411175e6ab167ea9f8632bd6c2091823c3629ec42",
+    entrypoint: "buy_game",
+    calldata: [
+      "0",
+      "0",
+      "2017717448871504735845",
+      "2403140985568399978641699320335980224292375691718886561247325844102368719999",
+      "0",
+    ],
+  },
+];
diff --git a/packages/keychain/src/components/ExecutionContainer.tsx b/packages/keychain/src/components/ExecutionContainer.tsx
index 2428d03f48..b47a398204 100644
--- a/packages/keychain/src/components/ExecutionContainer.tsx
+++ b/packages/keychain/src/components/ExecutionContainer.tsx
@@ -157,7 +157,7 @@ export function ExecutionContainer({
         description={description}
         icon={icon}
         right={right}
-        hideIcon
+        hideIcon={!icon}
       />
       {children}
       <LayoutFooter>
diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
new file mode 100644
index 0000000000..daf099711c
--- /dev/null
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -0,0 +1,105 @@
+import { useMemo } from "react";
+import {
+  LayoutContent,
+  TokenCard,
+  TokenSummary,
+  TransferIcon,
+} from "@cartridge/ui";
+import { TransactionSummary } from "@/components/transaction/TransactionSummary";
+import { ControllerError } from "@/utils/connection";
+import { Call, FeeEstimate, getChecksumAddress } from "starknet";
+import { ExecutionContainer } from "@/components/ExecutionContainer";
+import { useSwapTransaction } from "@/components/swap/swap";
+import { useTokens } from "@/hooks/token";
+import placeholder from "/placeholder.svg?url";
+
+interface ConfirmSwapProps {
+  onSubmit: (maxFee?: FeeEstimate) => Promise<void>;
+  onError?: (error: ControllerError) => void;
+  transactions: Call[];
+  error?: ControllerError;
+  origin: string;
+}
+
+export function ConfirmSwap({
+  onSubmit,
+  onError,
+  transactions,
+  error,
+  origin,
+}: ConfirmSwapProps) {
+  const { tokens } = useTokens();
+  const { isSwap, swapTransaction } = useSwapTransaction(transactions);
+  // console.log("swapTransaction:", swapTransaction);
+
+  const sellTokens = useMemo(
+    () =>
+      tokens
+        .filter(
+          (token) =>
+            swapTransaction.sellAddress ==
+            getChecksumAddress(token.metadata.address),
+        )
+        .map((token) => ({ ...token, decreasing: true, increasing: false })),
+    [tokens, swapTransaction],
+  );
+
+  const buyTokens = useMemo(
+    () =>
+      tokens
+        .filter(
+          (token) =>
+            swapTransaction.buyAddress ==
+            getChecksumAddress(token.metadata.address),
+        )
+        .map((token) => ({ ...token, increasing: true, decreasing: false })),
+    [tokens, swapTransaction],
+  );
+
+  console.log(
+    swapTransaction.sellAddress,
+    swapTransaction.buyAddress,
+    tokens,
+    sellTokens,
+    buyTokens,
+  );
+
+  return (
+    <ExecutionContainer
+      icon={<TransferIcon />}
+      title={"Review Swap"}
+      description={origin}
+      executionError={error}
+      transactions={transactions}
+      onSubmit={onSubmit}
+      onError={onError}
+    >
+      <LayoutContent>
+        {!isSwap ? (
+          <TransactionSummary calls={transactions} />
+        ) : (
+          <>
+            <TokenSummary title="Simulation Results">
+              {[...sellTokens, ...buyTokens].map((token) => (
+                <TokenCard
+                  image={token.metadata.image || placeholder}
+                  title={token.metadata.name}
+                  amount={`${token.balance.amount.toLocaleString(undefined, { maximumFractionDigits: 5 })} ${token.metadata.symbol}`}
+                  value={
+                    token.balance.value
+                      ? `$${token.balance.value.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
+                      : ""
+                  }
+                  increasing={token.increasing}
+                  decreasing={token.decreasing}
+                  approximately
+                  clickable={false}
+                />
+              ))}
+            </TokenSummary>
+          </>
+        )}
+      </LayoutContent>
+    </ExecutionContainer>
+  );
+}
diff --git a/packages/keychain/src/components/swap/ekuboRouterAbi.json b/packages/keychain/src/components/swap/ekuboRouterAbi.json
new file mode 100644
index 0000000000..ac84ff3f06
--- /dev/null
+++ b/packages/keychain/src/components/swap/ekuboRouterAbi.json
@@ -0,0 +1,482 @@
+[
+  {
+    "type": "impl",
+    "name": "LockerImpl",
+    "interface_name": "ekubo::interfaces::core::ILocker"
+  },
+  {
+    "type": "struct",
+    "name": "core::array::Span::<core::felt252>",
+    "members": [
+      {
+        "name": "snapshot",
+        "type": "@core::array::Array::<core::felt252>"
+      }
+    ]
+  },
+  {
+    "type": "interface",
+    "name": "ekubo::interfaces::core::ILocker",
+    "items": [
+      {
+        "type": "function",
+        "name": "locked",
+        "inputs": [
+          {
+            "name": "id",
+            "type": "core::integer::u32"
+          },
+          {
+            "name": "data",
+            "type": "core::array::Span::<core::felt252>"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "core::array::Span::<core::felt252>"
+          }
+        ],
+        "state_mutability": "external"
+      }
+    ]
+  },
+  {
+    "type": "impl",
+    "name": "RouterImpl",
+    "interface_name": "ekubo::router::IRouter"
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::types::keys::PoolKey",
+    "members": [
+      {
+        "name": "token0",
+        "type": "core::starknet::contract_address::ContractAddress"
+      },
+      {
+        "name": "token1",
+        "type": "core::starknet::contract_address::ContractAddress"
+      },
+      {
+        "name": "fee",
+        "type": "core::integer::u128"
+      },
+      {
+        "name": "tick_spacing",
+        "type": "core::integer::u128"
+      },
+      {
+        "name": "extension",
+        "type": "core::starknet::contract_address::ContractAddress"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "core::integer::u256",
+    "members": [
+      {
+        "name": "low",
+        "type": "core::integer::u128"
+      },
+      {
+        "name": "high",
+        "type": "core::integer::u128"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::router::RouteNode",
+    "members": [
+      {
+        "name": "pool_key",
+        "type": "ekubo::types::keys::PoolKey"
+      },
+      {
+        "name": "sqrt_ratio_limit",
+        "type": "core::integer::u256"
+      },
+      {
+        "name": "skip_ahead",
+        "type": "core::integer::u128"
+      }
+    ]
+  },
+  {
+    "type": "enum",
+    "name": "core::bool",
+    "variants": [
+      {
+        "name": "False",
+        "type": "()"
+      },
+      {
+        "name": "True",
+        "type": "()"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::types::i129::i129",
+    "members": [
+      {
+        "name": "mag",
+        "type": "core::integer::u128"
+      },
+      {
+        "name": "sign",
+        "type": "core::bool"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::router::TokenAmount",
+    "members": [
+      {
+        "name": "token",
+        "type": "core::starknet::contract_address::ContractAddress"
+      },
+      {
+        "name": "amount",
+        "type": "ekubo::types::i129::i129"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::types::delta::Delta",
+    "members": [
+      {
+        "name": "amount0",
+        "type": "ekubo::types::i129::i129"
+      },
+      {
+        "name": "amount1",
+        "type": "ekubo::types::i129::i129"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::router::Swap",
+    "members": [
+      {
+        "name": "route",
+        "type": "core::array::Array::<ekubo::router::RouteNode>"
+      },
+      {
+        "name": "token_amount",
+        "type": "ekubo::router::TokenAmount"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::router::Depth",
+    "members": [
+      {
+        "name": "token0",
+        "type": "core::integer::u128"
+      },
+      {
+        "name": "token1",
+        "type": "core::integer::u128"
+      }
+    ]
+  },
+  {
+    "type": "interface",
+    "name": "ekubo::router::IRouter",
+    "items": [
+      {
+        "type": "function",
+        "name": "swap",
+        "inputs": [
+          {
+            "name": "node",
+            "type": "ekubo::router::RouteNode"
+          },
+          {
+            "name": "token_amount",
+            "type": "ekubo::router::TokenAmount"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "ekubo::types::delta::Delta"
+          }
+        ],
+        "state_mutability": "external"
+      },
+      {
+        "type": "function",
+        "name": "multihop_swap",
+        "inputs": [
+          {
+            "name": "route",
+            "type": "core::array::Array::<ekubo::router::RouteNode>"
+          },
+          {
+            "name": "token_amount",
+            "type": "ekubo::router::TokenAmount"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "core::array::Array::<ekubo::types::delta::Delta>"
+          }
+        ],
+        "state_mutability": "external"
+      },
+      {
+        "type": "function",
+        "name": "multi_multihop_swap",
+        "inputs": [
+          {
+            "name": "swaps",
+            "type": "core::array::Array::<ekubo::router::Swap>"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "core::array::Array::<core::array::Array::<ekubo::types::delta::Delta>>"
+          }
+        ],
+        "state_mutability": "external"
+      },
+      {
+        "type": "function",
+        "name": "quote",
+        "inputs": [
+          {
+            "name": "swaps",
+            "type": "core::array::Array::<ekubo::router::Swap>"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "core::array::Array::<core::array::Array::<ekubo::types::delta::Delta>>"
+          }
+        ],
+        "state_mutability": "external"
+      },
+      {
+        "type": "function",
+        "name": "get_delta_to_sqrt_ratio",
+        "inputs": [
+          {
+            "name": "pool_key",
+            "type": "ekubo::types::keys::PoolKey"
+          },
+          {
+            "name": "sqrt_ratio",
+            "type": "core::integer::u256"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "ekubo::types::delta::Delta"
+          }
+        ],
+        "state_mutability": "view"
+      },
+      {
+        "type": "function",
+        "name": "get_market_depth",
+        "inputs": [
+          {
+            "name": "pool_key",
+            "type": "ekubo::types::keys::PoolKey"
+          },
+          {
+            "name": "sqrt_percent",
+            "type": "core::integer::u128"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "ekubo::router::Depth"
+          }
+        ],
+        "state_mutability": "view"
+      },
+      {
+        "type": "function",
+        "name": "get_market_depth_v2",
+        "inputs": [
+          {
+            "name": "pool_key",
+            "type": "ekubo::types::keys::PoolKey"
+          },
+          {
+            "name": "percent_64x64",
+            "type": "core::integer::u128"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "ekubo::router::Depth"
+          }
+        ],
+        "state_mutability": "view"
+      },
+      {
+        "type": "function",
+        "name": "get_market_depth_at_sqrt_ratio",
+        "inputs": [
+          {
+            "name": "pool_key",
+            "type": "ekubo::types::keys::PoolKey"
+          },
+          {
+            "name": "sqrt_ratio",
+            "type": "core::integer::u256"
+          },
+          {
+            "name": "percent_64x64",
+            "type": "core::integer::u128"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "ekubo::router::Depth"
+          }
+        ],
+        "state_mutability": "view"
+      }
+    ]
+  },
+  {
+    "type": "impl",
+    "name": "Clear",
+    "interface_name": "ekubo::components::clear::IClear"
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::interfaces::erc20::IERC20Dispatcher",
+    "members": [
+      {
+        "name": "contract_address",
+        "type": "core::starknet::contract_address::ContractAddress"
+      }
+    ]
+  },
+  {
+    "type": "interface",
+    "name": "ekubo::components::clear::IClear",
+    "items": [
+      {
+        "type": "function",
+        "name": "clear",
+        "inputs": [
+          {
+            "name": "token",
+            "type": "ekubo::interfaces::erc20::IERC20Dispatcher"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "core::integer::u256"
+          }
+        ],
+        "state_mutability": "view"
+      },
+      {
+        "type": "function",
+        "name": "clear_minimum",
+        "inputs": [
+          {
+            "name": "token",
+            "type": "ekubo::interfaces::erc20::IERC20Dispatcher"
+          },
+          {
+            "name": "minimum",
+            "type": "core::integer::u256"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "core::integer::u256"
+          }
+        ],
+        "state_mutability": "view"
+      },
+      {
+        "type": "function",
+        "name": "clear_minimum_to_recipient",
+        "inputs": [
+          {
+            "name": "token",
+            "type": "ekubo::interfaces::erc20::IERC20Dispatcher"
+          },
+          {
+            "name": "minimum",
+            "type": "core::integer::u256"
+          },
+          {
+            "name": "recipient",
+            "type": "core::starknet::contract_address::ContractAddress"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "core::integer::u256"
+          }
+        ],
+        "state_mutability": "view"
+      }
+    ]
+  },
+  {
+    "type": "impl",
+    "name": "Expires",
+    "interface_name": "ekubo::components::expires::IExpires"
+  },
+  {
+    "type": "interface",
+    "name": "ekubo::components::expires::IExpires",
+    "items": [
+      {
+        "type": "function",
+        "name": "expires",
+        "inputs": [
+          {
+            "name": "at",
+            "type": "core::integer::u64"
+          }
+        ],
+        "outputs": [],
+        "state_mutability": "view"
+      }
+    ]
+  },
+  {
+    "type": "struct",
+    "name": "ekubo::interfaces::core::ICoreDispatcher",
+    "members": [
+      {
+        "name": "contract_address",
+        "type": "core::starknet::contract_address::ContractAddress"
+      }
+    ]
+  },
+  {
+    "type": "constructor",
+    "name": "constructor",
+    "inputs": [
+      {
+        "name": "core",
+        "type": "ekubo::interfaces::core::ICoreDispatcher"
+      }
+    ]
+  },
+  {
+    "type": "event",
+    "name": "ekubo::router::Router::Event",
+    "kind": "enum",
+    "variants": []
+  }
+]
diff --git a/packages/keychain/src/components/swap/swap.ts b/packages/keychain/src/components/swap/swap.ts
new file mode 100644
index 0000000000..dcb03286b3
--- /dev/null
+++ b/packages/keychain/src/components/swap/swap.ts
@@ -0,0 +1,157 @@
+import { useMemo } from "react";
+import {
+  Abi,
+  CallData,
+  CallResult,
+  FunctionAbi,
+  getChecksumAddress,
+  InterfaceAbi,
+  type Call,
+} from "starknet";
+
+// abi from: https://voyager.online/contract/0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066#code
+import ekuboRouterAbi from "./ekuboRouterAbi.json" assert { type: "json" };
+import { erc20Abi } from "viem";
+
+// detect swap transaction
+// swap example in /examples/next/src/components/Profile.tsx
+export const useIsSwapTransaction = (
+  transactions: Call[],
+): {
+  isSwap: boolean;
+} => {
+  const isSwap = useMemo(
+    () =>
+      transactions.length === 4 &&
+      transactions[0].entrypoint === "transfer" &&
+      transactions[1].entrypoint === "multihop_swap" &&
+      transactions[2].entrypoint === "clear_minimum" &&
+      transactions[3].entrypoint === "clear",
+    [transactions],
+  );
+
+  return { isSwap };
+};
+
+type TransferInputs = {
+  amount: bigint;
+  recipient: string;
+};
+
+// type SwapInputs = {
+//   route: [
+//     {
+//       pool_key: {
+//         token0: bigint;
+//         token1: bigint;
+//         fee: bigint;
+//         tick_spacing: bigint;
+//         extension: bigint;
+//       };
+//       sqrt_ratio_limit: bigint;
+//       skip_ahead: bigint;
+//     },
+//   ];
+//   token_amount: {
+//     token: bigint;
+//     amount: {
+//       mag: bigint;
+//       sign: boolean;
+//     };
+//   };
+// };
+
+type ClearMinimumInputs = {
+  minimum: bigint;
+  token: {
+    contract_address: bigint;
+  };
+};
+
+export type SwapTransaction = {
+  sellAddress: string;
+  sellAmount: string;
+  buyAddress: string;
+  buyAmount: string;
+};
+
+export const useSwapTransaction = (
+  transactions: Call[],
+): {
+  isSwap: boolean;
+  swapTransaction: SwapTransaction;
+} => {
+  const { isSwap } = useIsSwapTransaction(transactions);
+  const swapTransaction = useMemo(() => {
+    if (!isSwap) return {} as SwapTransaction;
+
+    const transfer = transactions.find((t) => t.entrypoint === "transfer");
+    const multihop_swap = transactions.find(
+      (t) => t.entrypoint === "multihop_swap",
+    );
+    const clear_minimum = transactions.find(
+      (t) => t.entrypoint === "clear_minimum",
+    );
+    const clear = transactions.find((t) => t.entrypoint === "clear");
+    if (!transfer || !multihop_swap || !clear_minimum || !clear) {
+      return {} as SwapTransaction;
+    }
+
+    const parseInputs = (
+      abi: Abi,
+      interfaceName: string,
+      method: string,
+      args: string[],
+    ) => {
+      const interfaceAbi = abi.find(
+        (a) => a.name === interfaceName,
+      ) as InterfaceAbi;
+      const { inputs } = (interfaceAbi?.items ?? abi).find(
+        (a) => a.name === method,
+      ) as FunctionAbi;
+      const callData = new CallData(abi);
+      const decoded = callData.decodeParameters(
+        inputs.map((i) => i.type),
+        args,
+      );
+      const result = inputs.reduce(
+        (acc, input, index) => {
+          acc[input.name] = Array.isArray(decoded) ? decoded[index] : decoded;
+          return acc;
+        },
+        {} as { [key: string]: CallResult },
+      );
+      return result;
+    };
+
+    // CallResult is typed, but we can't get the typescript types from them...
+    const transferInputs = parseInputs(
+      erc20Abi,
+      "IERC20",
+      "transfer",
+      transfer.calldata as string[],
+    ) as TransferInputs;
+    // const swapInputs = parseInputs(
+    //   ekuboRouterAbi,
+    //   "ekubo::router::IRouter",
+    //   "multihop_swap",
+    //   multihop_swap.calldata as string[],
+    // ) as SwapInputs;
+    const clearMinimumInputs = parseInputs(
+      ekuboRouterAbi,
+      "ekubo::components::clear::IClear",
+      "clear_minimum",
+      clear_minimum.calldata as string[],
+    ) as ClearMinimumInputs;
+
+    const swapTransaction: SwapTransaction = {
+      sellAddress: getChecksumAddress(transfer.contractAddress),
+      sellAmount: `0x${BigInt(transferInputs.amount).toString(16)}`,
+      buyAddress: getChecksumAddress(clearMinimumInputs.token.contract_address),
+      buyAmount: `0x${BigInt(clearMinimumInputs.minimum).toString(16)}`,
+    };
+    return swapTransaction;
+  }, [isSwap, transactions]);
+
+  return { isSwap, swapTransaction };
+};
diff --git a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
index 7d31c1bb70..bd135cefa3 100644
--- a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
+++ b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
@@ -1,16 +1,18 @@
+import { useEffect, useState } from "react";
 import { LayoutContent } from "@cartridge/ui";
 import { useConnection } from "@/hooks/connection";
 import { TransactionSummary } from "@/components/transaction/TransactionSummary";
 import { ControllerError } from "@/utils/connection";
 import { Call, FeeEstimate } from "starknet";
 import { ExecutionContainer } from "@/components/ExecutionContainer";
-import { CreateSession } from "../connect";
 import { executeCore } from "@/utils/connection/execute";
-import { useEffect, useState } from "react";
-import { PageLoading } from "../Loading";
+import { CreateSession } from "@/components/connect";
+import { PageLoading } from "@/components/Loading";
 import { ErrorCode } from "@cartridge/controller-wasm";
 import { useToast } from "@/context/toast";
 import { humanizeString } from "@cartridge/controller";
+import { useIsSwapTransaction } from "@/components/swap/swap";
+import { ConfirmSwap } from "@/components/swap/ConfirmSwap";
 
 interface ConfirmTransactionProps {
   onComplete: (transaction_hash: string) => void;
@@ -89,10 +91,24 @@ export function ConfirmTransaction({
     }
   };
 
+  const { isSwap } = useIsSwapTransaction(transactions);
+
   if (loading) {
     return <PageLoading />;
   }
 
+  if (isSwap) {
+    return (
+      <ConfirmSwap
+        onSubmit={onSubmit}
+        onError={onError}
+        transactions={transactions}
+        error={error || executionError}
+        origin={origin}
+      />
+    );
+  }
+
   // Show session refresh UI if SessionRefreshRequired error occurred
   if (needsSessionRefresh && policies && !skipSession) {
     return (

From 2fd2acbed9eb9101d5a859b8b7b3d05d7fcb9a46 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Thu, 26 Feb 2026 18:40:35 -0300
Subject: [PATCH 02/15] feat: fetch token value with useTokenSwapData()

---
 .../src/components/swap/ConfirmSwap.tsx       | 63 +++++++------------
 packages/keychain/src/hooks/token.ts          | 60 ++++++++++++++++++
 2 files changed, 81 insertions(+), 42 deletions(-)

diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index daf099711c..a910d5e4a9 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import {
   LayoutContent,
   TokenCard,
@@ -7,10 +6,10 @@ import {
 } from "@cartridge/ui";
 import { TransactionSummary } from "@/components/transaction/TransactionSummary";
 import { ControllerError } from "@/utils/connection";
-import { Call, FeeEstimate, getChecksumAddress } from "starknet";
+import { Call, FeeEstimate } from "starknet";
 import { ExecutionContainer } from "@/components/ExecutionContainer";
 import { useSwapTransaction } from "@/components/swap/swap";
-import { useTokens } from "@/hooks/token";
+import { useTokenSwapData } from "@/hooks/token";
 import placeholder from "/placeholder.svg?url";
 
 interface ConfirmSwapProps {
@@ -28,40 +27,23 @@ export function ConfirmSwap({
   error,
   origin,
 }: ConfirmSwapProps) {
-  const { tokens } = useTokens();
   const { isSwap, swapTransaction } = useSwapTransaction(transactions);
+  const { tokenSwapData } = useTokenSwapData([
+    {
+      address: swapTransaction.sellAddress,
+      amount: swapTransaction.sellAmount,
+    },
+    {
+      address: swapTransaction.buyAddress,
+      amount: swapTransaction.buyAmount,
+    },
+  ]);
   // console.log("swapTransaction:", swapTransaction);
 
-  const sellTokens = useMemo(
-    () =>
-      tokens
-        .filter(
-          (token) =>
-            swapTransaction.sellAddress ==
-            getChecksumAddress(token.metadata.address),
-        )
-        .map((token) => ({ ...token, decreasing: true, increasing: false })),
-    [tokens, swapTransaction],
-  );
-
-  const buyTokens = useMemo(
-    () =>
-      tokens
-        .filter(
-          (token) =>
-            swapTransaction.buyAddress ==
-            getChecksumAddress(token.metadata.address),
-        )
-        .map((token) => ({ ...token, increasing: true, decreasing: false })),
-    [tokens, swapTransaction],
-  );
-
   console.log(
     swapTransaction.sellAddress,
     swapTransaction.buyAddress,
-    tokens,
-    sellTokens,
-    buyTokens,
+    tokenSwapData,
   );
 
   return (
@@ -80,18 +62,15 @@ export function ConfirmSwap({
         ) : (
           <>
             <TokenSummary title="Simulation Results">
-              {[...sellTokens, ...buyTokens].map((token) => (
+              {tokenSwapData.map((token) => (
                 <TokenCard
-                  image={token.metadata.image || placeholder}
-                  title={token.metadata.name}
-                  amount={`${token.balance.amount.toLocaleString(undefined, { maximumFractionDigits: 5 })} ${token.metadata.symbol}`}
-                  value={
-                    token.balance.value
-                      ? `$${token.balance.value.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
-                      : ""
-                  }
-                  increasing={token.increasing}
-                  decreasing={token.decreasing}
+                  key={token.address}
+                  image={token.image || placeholder}
+                  title={token.name}
+                  amount={`${token.amount.toLocaleString(undefined, { maximumFractionDigits: 5 })} ${token.symbol}`}
+                  value={token.value ? `$${token.value.toFixed(2)}` : ""}
+                  increasing={token.address === swapTransaction.buyAddress}
+                  decreasing={token.address === swapTransaction.sellAddress}
                   approximately
                   clickable={false}
                 />
diff --git a/packages/keychain/src/hooks/token.ts b/packages/keychain/src/hooks/token.ts
index 33e9b80041..6debc3b6b3 100644
--- a/packages/keychain/src/hooks/token.ts
+++ b/packages/keychain/src/hooks/token.ts
@@ -8,6 +8,7 @@ import {
 import {
   useBalanceQuery,
   useBalancesQuery,
+  usePriceByAddressesQuery,
 } from "@cartridge/ui/utils/api/cartridge";
 import makeBlockie from "ethereum-blockies-base64";
 import { useAccount } from "./account";
@@ -390,3 +391,62 @@ export function useToken({
     status,
   };
 }
+
+export type TokenSwap = {
+  address: string;
+  amount: string;
+};
+
+export type TokenSwapData = Metadata & {
+  amount: number;
+  value: number | null | undefined;
+};
+
+export type UseTokenSwapDataResponse = {
+  tokenSwapData: TokenSwapData[];
+  status: "success" | "error" | "idle" | "loading";
+};
+
+export function useTokenSwapData(
+  tokens: TokenSwap[],
+): UseTokenSwapDataResponse {
+  const { data: priceData, ...restPriceData } = usePriceByAddressesQuery({
+    addresses: tokens.map((token) => token.address),
+  });
+
+  const tokenSwapData = useMemo(() => {
+    return tokens.map((token) => {
+      const metadata = erc20Metadata.find(
+        (m) =>
+          getChecksumAddress(m.l2_token_address) ===
+          getChecksumAddress(token.address),
+      );
+      const price = priceData?.priceByAddresses.find(
+        (p) => getChecksumAddress(p.base) === getChecksumAddress(token.address),
+      );
+      const amount = Number(token.amount) / 10 ** (metadata?.decimals || 18);
+      const tokenData: TokenSwapData = {
+        amount,
+        name: metadata?.name || "Unknown",
+        symbol: metadata?.symbol || "UNKNOWN",
+        decimals: metadata?.decimals || 18,
+        address: getChecksumAddress(token.address),
+        image:
+          metadata?.logo_url || makeBlockie(getChecksumAddress(token.address)),
+        value: price
+          ? (Number(price.amount) / 10 ** (price.decimals || 18)) * amount
+          : undefined,
+      };
+      return tokenData;
+    });
+  }, [tokens, priceData]);
+
+  const status = useMemo(() => {
+    if (restPriceData.isLoading) return "loading";
+    if (restPriceData.isError) return "error";
+    if (restPriceData.isSuccess) return "success";
+    return "idle";
+  }, [restPriceData]);
+
+  return { tokenSwapData, status };
+}

From fdd37d503941d8a7a1780beaca1a40baf1e4724b Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Fri, 27 Feb 2026 16:01:31 -0300
Subject: [PATCH 03/15] chore: detect multi swaps

---
 .../src/components/swap/ConfirmSwap.tsx       |  39 ++--
 packages/keychain/src/components/swap/swap.ts | 196 +++++++-----------
 .../keychain/src/hooks/calldata-decode.ts     | 131 ++++++++++++
 packages/keychain/src/hooks/token.ts          |   8 +-
 4 files changed, 227 insertions(+), 147 deletions(-)
 create mode 100644 packages/keychain/src/hooks/calldata-decode.ts

diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index a910d5e4a9..b50f031337 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -8,7 +8,7 @@ import { TransactionSummary } from "@/components/transaction/TransactionSummary"
 import { ControllerError } from "@/utils/connection";
 import { Call, FeeEstimate } from "starknet";
 import { ExecutionContainer } from "@/components/ExecutionContainer";
-import { useSwapTransaction } from "@/components/swap/swap";
+import { useSwapTransactions } from "@/components/swap/swap";
 import { useTokenSwapData } from "@/hooks/token";
 import placeholder from "/placeholder.svg?url";
 
@@ -27,24 +27,15 @@ export function ConfirmSwap({
   error,
   origin,
 }: ConfirmSwapProps) {
-  const { isSwap, swapTransaction } = useSwapTransaction(transactions);
+  const { isSwap, swapTransactions, additionalMethodCount } =
+    useSwapTransactions(transactions);
   const { tokenSwapData } = useTokenSwapData([
-    {
-      address: swapTransaction.sellAddress,
-      amount: swapTransaction.sellAmount,
-    },
-    {
-      address: swapTransaction.buyAddress,
-      amount: swapTransaction.buyAmount,
-    },
+    ...swapTransactions.selling,
+    ...swapTransactions.buying,
   ]);
   // console.log("swapTransaction:", swapTransaction);
 
-  console.log(
-    swapTransaction.sellAddress,
-    swapTransaction.buyAddress,
-    tokenSwapData,
-  );
+  console.log(`SWAPS:`, swapTransactions, tokenSwapData);
 
   return (
     <ExecutionContainer
@@ -55,6 +46,7 @@ export function ConfirmSwap({
       transactions={transactions}
       onSubmit={onSubmit}
       onError={onError}
+      buttonText={`Swap ${additionalMethodCount > 0 ? `+ ${additionalMethodCount}` : ""}`}
     >
       <LayoutContent>
         {!isSwap ? (
@@ -68,10 +60,19 @@ export function ConfirmSwap({
                   image={token.image || placeholder}
                   title={token.name}
                   amount={`${token.amount.toLocaleString(undefined, { maximumFractionDigits: 5 })} ${token.symbol}`}
-                  value={token.value ? `$${token.value.toFixed(2)}` : ""}
-                  increasing={token.address === swapTransaction.buyAddress}
-                  decreasing={token.address === swapTransaction.sellAddress}
-                  approximately
+                  value={
+                    !token.value
+                      ? "$0.00"
+                      : token.value < 0.01
+                        ? "<$0.01"
+                        : `~$${token.value.toFixed(2)}`
+                  }
+                  increasing={swapTransactions.buying.some(
+                    (t) => t.address === token.address,
+                  )}
+                  decreasing={swapTransactions.selling.some(
+                    (t) => t.address === token.address,
+                  )}
                   clickable={false}
                 />
               ))}
diff --git a/packages/keychain/src/components/swap/swap.ts b/packages/keychain/src/components/swap/swap.ts
index dcb03286b3..1d9fe958be 100644
--- a/packages/keychain/src/components/swap/swap.ts
+++ b/packages/keychain/src/components/swap/swap.ts
@@ -1,17 +1,11 @@
 import { useMemo } from "react";
-import {
-  Abi,
-  CallData,
-  CallResult,
-  FunctionAbi,
-  getChecksumAddress,
-  InterfaceAbi,
-  type Call,
-} from "starknet";
+import { getChecksumAddress, type Call } from "starknet";
+import { useDecodeTransactionInputs } from "@/hooks/calldata-decode";
+import { TokenSwap } from "@/hooks/token";
 
-// abi from: https://voyager.online/contract/0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066#code
-import ekuboRouterAbi from "./ekuboRouterAbi.json" assert { type: "json" };
-import { erc20Abi } from "viem";
+const findTransactions = (transactions: Call[], entrypoint: string) => {
+  return transactions.filter((t) => t.entrypoint === entrypoint);
+};
 
 // detect swap transaction
 // swap example in /examples/next/src/components/Profile.tsx
@@ -22,136 +16,92 @@ export const useIsSwapTransaction = (
 } => {
   const isSwap = useMemo(
     () =>
-      transactions.length === 4 &&
-      transactions[0].entrypoint === "transfer" &&
-      transactions[1].entrypoint === "multihop_swap" &&
-      transactions[2].entrypoint === "clear_minimum" &&
-      transactions[3].entrypoint === "clear",
+      transactions.length >= 4 &&
+      findTransactions(transactions, "transfer").length > 0 &&
+      findTransactions(transactions, "multihop_swap").length > 0 &&
+      findTransactions(transactions, "clear_minimum").length > 0 &&
+      findTransactions(transactions, "clear").length > 0,
     [transactions],
   );
-
   return { isSwap };
 };
 
-type TransferInputs = {
-  amount: bigint;
-  recipient: string;
+export type SwapTransactions = {
+  selling: TokenSwap[];
+  buying: TokenSwap[];
 };
 
-// type SwapInputs = {
-//   route: [
-//     {
-//       pool_key: {
-//         token0: bigint;
-//         token1: bigint;
-//         fee: bigint;
-//         tick_spacing: bigint;
-//         extension: bigint;
-//       };
-//       sqrt_ratio_limit: bigint;
-//       skip_ahead: bigint;
-//     },
-//   ];
-//   token_amount: {
-//     token: bigint;
-//     amount: {
-//       mag: bigint;
-//       sign: boolean;
-//     };
-//   };
-// };
-
-type ClearMinimumInputs = {
-  minimum: bigint;
-  token: {
-    contract_address: bigint;
-  };
-};
-
-export type SwapTransaction = {
-  sellAddress: string;
-  sellAmount: string;
-  buyAddress: string;
-  buyAmount: string;
-};
-
-export const useSwapTransaction = (
+export const useSwapTransactions = (
   transactions: Call[],
 ): {
   isSwap: boolean;
-  swapTransaction: SwapTransaction;
+  swapTransactions: SwapTransactions;
+  swapMethodCount: number;
+  additionalMethodCount: number;
 } => {
   const { isSwap } = useIsSwapTransaction(transactions);
-  const swapTransaction = useMemo(() => {
-    if (!isSwap) return {} as SwapTransaction;
 
-    const transfer = transactions.find((t) => t.entrypoint === "transfer");
-    const multihop_swap = transactions.find(
-      (t) => t.entrypoint === "multihop_swap",
+  const { decodeTransferInputs, decodeClearMinimumInputs } =
+    useDecodeTransactionInputs();
+
+  const [swapTransactions, swapMethodCount] = useMemo(() => {
+    const swapTransactions: SwapTransactions = {
+      selling: [],
+      buying: [],
+    };
+    if (!isSwap) return [swapTransactions, 0];
+
+    const transfers = findTransactions(transactions, "transfer");
+    const multihop_swaps = findTransactions(transactions, "multihop_swap");
+    const clear_minimuns = findTransactions(transactions, "clear_minimum");
+    const clears = findTransactions(transactions, "clear");
+
+    const transferInputs = transfers.map((transfer) =>
+      decodeTransferInputs(transfer.calldata as string[]),
     );
-    const clear_minimum = transactions.find(
-      (t) => t.entrypoint === "clear_minimum",
+    const clearInputs = clear_minimuns.map((clear_minimum) =>
+      decodeClearMinimumInputs(clear_minimum.calldata as string[]),
     );
-    const clear = transactions.find((t) => t.entrypoint === "clear");
-    if (!transfer || !multihop_swap || !clear_minimum || !clear) {
-      return {} as SwapTransaction;
-    }
 
-    const parseInputs = (
-      abi: Abi,
-      interfaceName: string,
-      method: string,
-      args: string[],
-    ) => {
-      const interfaceAbi = abi.find(
-        (a) => a.name === interfaceName,
-      ) as InterfaceAbi;
-      const { inputs } = (interfaceAbi?.items ?? abi).find(
-        (a) => a.name === method,
-      ) as FunctionAbi;
-      const callData = new CallData(abi);
-      const decoded = callData.decodeParameters(
-        inputs.map((i) => i.type),
-        args,
+    const addToken = (acc: TokenSwap[], address: string, amount: bigint) => {
+      const token = acc.find((t) => t.address === address);
+      if (token) {
+        token.amount += amount;
+      } else {
+        acc.push({ address, amount });
+      }
+      return acc;
+    };
+
+    swapTransactions.selling = transferInputs.reduce((acc, input, index) => {
+      return addToken(
+        acc,
+        getChecksumAddress(transfers[index].contractAddress),
+        input.amount,
       );
-      const result = inputs.reduce(
-        (acc, input, index) => {
-          acc[input.name] = Array.isArray(decoded) ? decoded[index] : decoded;
-          return acc;
-        },
-        {} as { [key: string]: CallResult },
+    }, [] as TokenSwap[]);
+
+    swapTransactions.buying = clearInputs.reduce((acc, input) => {
+      return addToken(
+        acc,
+        getChecksumAddress(input.token.contract_address),
+        input.minimum,
       );
-      return result;
-    };
+    }, [] as TokenSwap[]);
 
-    // CallResult is typed, but we can't get the typescript types from them...
-    const transferInputs = parseInputs(
-      erc20Abi,
-      "IERC20",
-      "transfer",
-      transfer.calldata as string[],
-    ) as TransferInputs;
-    // const swapInputs = parseInputs(
-    //   ekuboRouterAbi,
-    //   "ekubo::router::IRouter",
-    //   "multihop_swap",
-    //   multihop_swap.calldata as string[],
-    // ) as SwapInputs;
-    const clearMinimumInputs = parseInputs(
-      ekuboRouterAbi,
-      "ekubo::components::clear::IClear",
-      "clear_minimum",
-      clear_minimum.calldata as string[],
-    ) as ClearMinimumInputs;
+    const count =
+      transfers.length +
+      multihop_swaps.length +
+      clear_minimuns.length +
+      clears.length;
 
-    const swapTransaction: SwapTransaction = {
-      sellAddress: getChecksumAddress(transfer.contractAddress),
-      sellAmount: `0x${BigInt(transferInputs.amount).toString(16)}`,
-      buyAddress: getChecksumAddress(clearMinimumInputs.token.contract_address),
-      buyAmount: `0x${BigInt(clearMinimumInputs.minimum).toString(16)}`,
-    };
-    return swapTransaction;
-  }, [isSwap, transactions]);
+    return [swapTransactions, count];
+  }, [isSwap, transactions, decodeClearMinimumInputs, decodeTransferInputs]);
 
-  return { isSwap, swapTransaction };
+  return {
+    isSwap,
+    swapTransactions,
+    swapMethodCount,
+    additionalMethodCount: transactions.length - swapMethodCount,
+  };
 };
diff --git a/packages/keychain/src/hooks/calldata-decode.ts b/packages/keychain/src/hooks/calldata-decode.ts
new file mode 100644
index 0000000000..63352bd2ee
--- /dev/null
+++ b/packages/keychain/src/hooks/calldata-decode.ts
@@ -0,0 +1,131 @@
+import { useCallback } from "react";
+import { Abi, CallData, CallResult, FunctionAbi, InterfaceAbi } from "starknet";
+import { erc20Abi } from "viem";
+
+// ekubo abi from:
+// https://voyager.online/contract/0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066#code
+import ekuboRouterAbi from "@/components/swap/ekuboRouterAbi.json" assert { type: "json" };
+
+const useDecodeCallbackInputs = () => {
+  const decodeInputs = useCallback(
+    <T>(abi: Abi, interfaceName: string, method: string, args: string[]) => {
+      const interfaceAbi = abi.find(
+        (a) => a.name === interfaceName,
+      ) as InterfaceAbi;
+      const { inputs } = (interfaceAbi?.items ?? abi).find(
+        (a) => a.name === method,
+      ) as FunctionAbi;
+      const callData = new CallData(abi);
+      const decoded = callData.decodeParameters(
+        inputs.map((i) => i.type),
+        args,
+      );
+      const result = inputs.reduce(
+        (acc, input, index) => {
+          acc[input.name] = Array.isArray(decoded) ? decoded[index] : decoded;
+          return acc;
+        },
+        {} as { [key: string]: CallResult },
+      );
+      return result as T;
+    },
+    [],
+  );
+  return { decodeInputs };
+};
+
+export type TransferInputs = {
+  amount: bigint;
+  recipient: string;
+};
+
+export type MultihopSwapInputs = {
+  route: [
+    {
+      pool_key: {
+        token0: bigint;
+        token1: bigint;
+        fee: bigint;
+        tick_spacing: bigint;
+        extension: bigint;
+      };
+      sqrt_ratio_limit: bigint;
+      skip_ahead: bigint;
+    },
+  ];
+  token_amount: {
+    token: bigint;
+    amount: {
+      mag: bigint;
+      sign: boolean;
+    };
+  };
+};
+
+export interface ClearMinimumInputs {
+  minimum: bigint;
+  token: {
+    contract_address: bigint;
+  };
+}
+
+export interface ClearInputs {
+  minimum: bigint;
+  token: {
+    contract_address: bigint;
+  };
+}
+
+export const useDecodeTransactionInputs = () => {
+  const { decodeInputs } = useDecodeCallbackInputs();
+
+  const decodeTransferInputs = useCallback(
+    (args: string[]) => {
+      return decodeInputs<TransferInputs>(erc20Abi, "ERC20", "transfer", args);
+    },
+    [decodeInputs],
+  );
+
+  const decodeMultihopSwapInputs = useCallback(
+    (args: string[]) => {
+      return decodeInputs<MultihopSwapInputs>(
+        ekuboRouterAbi,
+        "ekubo::router::IRouter",
+        "multihop_swap",
+        args,
+      );
+    },
+    [decodeInputs],
+  );
+
+  const decodeClearMinimumInputs = useCallback(
+    (args: string[]) => {
+      return decodeInputs<ClearMinimumInputs>(
+        ekuboRouterAbi,
+        "ekubo::components::clear::IClear",
+        "clear_minimum",
+        args,
+      );
+    },
+    [decodeInputs],
+  );
+
+  const decodeClearInputs = useCallback(
+    (args: string[]) => {
+      return decodeInputs<ClearInputs>(
+        ekuboRouterAbi,
+        "ekubo::components::clear::IClear",
+        "clear",
+        args,
+      );
+    },
+    [decodeInputs],
+  );
+
+  return {
+    decodeTransferInputs,
+    decodeMultihopSwapInputs,
+    decodeClearMinimumInputs,
+    decodeClearInputs,
+  };
+};
diff --git a/packages/keychain/src/hooks/token.ts b/packages/keychain/src/hooks/token.ts
index 6debc3b6b3..076ac45624 100644
--- a/packages/keychain/src/hooks/token.ts
+++ b/packages/keychain/src/hooks/token.ts
@@ -394,7 +394,7 @@ export function useToken({
 
 export type TokenSwap = {
   address: string;
-  amount: string;
+  amount: bigint;
 };
 
 export type TokenSwapData = Metadata & {
@@ -417,12 +417,10 @@ export function useTokenSwapData(
   const tokenSwapData = useMemo(() => {
     return tokens.map((token) => {
       const metadata = erc20Metadata.find(
-        (m) =>
-          getChecksumAddress(m.l2_token_address) ===
-          getChecksumAddress(token.address),
+        (m) => BigInt(m.l2_token_address) === BigInt(token.address),
       );
       const price = priceData?.priceByAddresses.find(
-        (p) => getChecksumAddress(p.base) === getChecksumAddress(token.address),
+        (p) => BigInt(p.base) === BigInt(token.address),
       );
       const amount = Number(token.amount) / 10 ** (metadata?.decimals || 18);
       const tokenData: TokenSwapData = {

From 068196f5d6bd997fc357ce59b87c91f62cdb77b7 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Fri, 27 Feb 2026 16:59:38 -0300
Subject: [PATCH 04/15] chore: updated presets dependency

---
 package.json   |  2 +-
 pnpm-lock.yaml | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 7defb07110..08f4e21fd5 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@cartridge/presets": "github:cartridge-gg/presets#c064e82",
+    "@cartridge/presets": "github:cartridge-gg/presets#476cc4f",
     "@cartridge/ui": "catalog:",
     "tailwindcss": "catalog:",
     "@graphql-codegen/cli": "^2.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cab1b5034e..5229010135 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,8 +162,8 @@ importers:
   .:
     dependencies:
       '@cartridge/presets':
-        specifier: github:cartridge-gg/presets#c064e82
-        version: https://codeload.github.com/cartridge-gg/presets/tar.gz/c064e82
+        specifier: github:cartridge-gg/presets#476cc4f
+        version: https://codeload.github.com/cartridge-gg/presets/tar.gz/476cc4f
       '@cartridge/ui':
         specifier: 'catalog:'
         version: https://codeload.github.com/cartridge-gg/ui/tar.gz/b4646934(@types/react-dom@18.3.7(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(starknet@8.5.4)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@16.18.11)(typescript@5.8.3)))(viem@2.28.1(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.24.4))
@@ -1261,12 +1261,12 @@ packages:
   '@cartridge/penpal@6.2.4':
     resolution: {integrity: sha512-tdpOnSJJBFMlgLZ1+z9Ho5e6cG5EgMAb1Cmmh1lGT2tmplogU/XPMjLE6CwvKAPDoe6a38iMnbH+ySTAWWIOKA==}
 
-  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0':
-    resolution: {tarball: https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0}
+  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/476cc4f':
+    resolution: {tarball: https://codeload.github.com/cartridge-gg/presets/tar.gz/476cc4f}
     version: 0.0.1
 
-  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/c064e82':
-    resolution: {tarball: https://codeload.github.com/cartridge-gg/presets/tar.gz/c064e82}
+  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0':
+    resolution: {tarball: https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0}
     version: 0.0.1
 
   '@cartridge/ui@https://codeload.github.com/cartridge-gg/ui/tar.gz/b4646934':
@@ -11208,11 +11208,11 @@ snapshots:
 
   '@cartridge/penpal@6.2.4': {}
 
-  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0':
+  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/476cc4f':
     dependencies:
       '@starknet-io/types-js': 0.8.4
 
-  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/c064e82':
+  '@cartridge/presets@https://codeload.github.com/cartridge-gg/presets/tar.gz/90a5fe0':
     dependencies:
       '@starknet-io/types-js': 0.8.4
 

From a9bc76372ef231d8fa5860207a79821028a2b2f5 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Fri, 27 Feb 2026 17:59:21 -0300
Subject: [PATCH 05/15] feat: swap advanced view

---
 .../keychain/src/components/ContractLink.tsx  |  38 ++++++
 .../keychain/src/components/ErrorAlert.tsx    |  13 +-
 .../src/components/session/MessageCard.tsx    |   6 +-
 .../components/swap/AdvancedTransactions.tsx  | 119 ++++++++++++++++++
 .../src/components/swap/ConfirmSwap.tsx       |  26 +++-
 .../transaction/CallCard.stories.tsx          |  15 ---
 .../src/components/transaction/CallCard.tsx   | 115 ++++++-----------
 .../transaction/TransactionSummary.tsx        |   1 -
 8 files changed, 222 insertions(+), 111 deletions(-)
 create mode 100644 packages/keychain/src/components/ContractLink.tsx
 create mode 100644 packages/keychain/src/components/swap/AdvancedTransactions.tsx

diff --git a/packages/keychain/src/components/ContractLink.tsx b/packages/keychain/src/components/ContractLink.tsx
new file mode 100644
index 0000000000..1532c7eae1
--- /dev/null
+++ b/packages/keychain/src/components/ContractLink.tsx
@@ -0,0 +1,38 @@
+import { useConnection } from "@/hooks/connection";
+import { Address, cn } from "@cartridge/ui";
+import { useExplorer } from "@starknet-react/core";
+import { constants } from "starknet";
+
+export function ContractLink({
+  contractAddress,
+  className,
+}: {
+  contractAddress: string;
+  className?: string;
+}) {
+  const { controller } = useConnection();
+  const explorer = useExplorer();
+  return (
+    <a
+      className={cn(
+        "text-foreground-100 cursor-pointer hover:underline",
+        className,
+      )}
+      href={
+        controller?.chainId() === constants.StarknetChainId.SN_MAIN ||
+        controller?.chainId() === constants.StarknetChainId.SN_SEPOLIA
+          ? explorer.contract(contractAddress)
+          : `#`
+      }
+      target="_blank"
+      rel="noreferrer"
+    >
+      <Address
+        address={contractAddress}
+        first={5}
+        last={5}
+        className="text-inherit"
+      />
+    </a>
+  );
+}
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
index a199c6ee03..6b7c3034cb 100644
--- a/packages/keychain/src/components/ErrorAlert.tsx
+++ b/packages/keychain/src/components/ErrorAlert.tsx
@@ -7,6 +7,7 @@ import {
   type GraphQLErrorDetails,
   type ErrorWithGraphQL,
 } from "@/utils/errors";
+import { humanizeString } from "@cartridge/controller";
 import { ErrorCode } from "@cartridge/controller-wasm/controller";
 import {
   Accordion,
@@ -486,15 +487,3 @@ export function isControllerError(
 ): error is ControllerError {
   return !!(error as ControllerError).code;
 }
-
-export function humanizeString(str: string): string {
-  return (
-    str
-      // Convert from camelCase or snake_case
-      .replace(/([a-z])([A-Z])/g, "$1 $2") // camelCase to spaces
-      .replace(/_/g, " ") // snake_case to spaces
-      .toLowerCase()
-      // Capitalize first letter
-      .replace(/^\w/, (c) => c.toUpperCase())
-  );
-}
diff --git a/packages/keychain/src/components/session/MessageCard.tsx b/packages/keychain/src/components/session/MessageCard.tsx
index 12c904e25f..e0f64f2b0f 100644
--- a/packages/keychain/src/components/session/MessageCard.tsx
+++ b/packages/keychain/src/components/session/MessageCard.tsx
@@ -1,5 +1,4 @@
-import { useCreateSession } from "@/hooks/session";
-import type { SignMessagePolicy } from "@cartridge/presets";
+import { type PropsWithChildren, useState, useEffect } from "react";
 import {
   Accordion,
   AccordionContent,
@@ -11,12 +10,13 @@ import {
   Thumbnail,
 } from "@cartridge/ui";
 import { cn } from "@cartridge/ui/utils";
+import { useCreateSession } from "@/hooks/session";
 import { ArrowTurnDownIcon, Badge } from "@cartridge/ui";
+import type { SignMessagePolicy } from "@cartridge/presets";
 import type {
   StarknetEnumType,
   StarknetMerkleType,
 } from "@starknet-io/types-js";
-import { type PropsWithChildren, useState, useEffect } from "react";
 
 interface MessageCardProps {
   messages: SignMessagePolicyWithEnabled[];
diff --git a/packages/keychain/src/components/swap/AdvancedTransactions.tsx b/packages/keychain/src/components/swap/AdvancedTransactions.tsx
new file mode 100644
index 0000000000..a2c7b8a188
--- /dev/null
+++ b/packages/keychain/src/components/swap/AdvancedTransactions.tsx
@@ -0,0 +1,119 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  CheckboxIcon,
+  GearIcon,
+  Thumbnail,
+} from "@cartridge/ui";
+import { cn } from "@cartridge/ui/utils";
+import { Call } from "starknet";
+import { humanizeString } from "@cartridge/controller";
+import { useState, PropsWithChildren } from "react";
+import { ContractLink } from "@/components/ContractLink";
+import { CallCardContents } from "../transaction/CallCard";
+
+interface AdvancedTransactionsProps {
+  transactions: Call[];
+  isExpanded?: boolean;
+  className?: string;
+}
+
+export function AdvancedTransactions({
+  transactions,
+  isExpanded = false,
+  className,
+}: AdvancedTransactionsProps) {
+  const [isOpened, setisOpened] = useState(isExpanded);
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className={cn("bg-background-200 rounded", className)}
+      value={isOpened ? "item" : ""}
+      onValueChange={(value) => setisOpened(value === "item")}
+    >
+      <AccordionItem value="item">
+        <AccordionTrigger
+          parentClassName="h-11 p-3"
+          className="flex items-center text-sm font-medium text-foreground-100 gap-1.5"
+          color={cn(isOpened ? "text-foreground-100" : "text-foreground-400")}
+        >
+          <Thumbnail
+            variant={isOpened ? "light" : "ghost"}
+            size="sm"
+            icon={<GearIcon />}
+            centered={true}
+          />
+          <p>Advanced</p>
+        </AccordionTrigger>
+
+        <AccordionContent className="flex flex-col gap-3 px-3 pb-3">
+          {transactions.map((call) => (
+            <CollapsibleTransactionRow
+              key={`${call.contractAddress}-${call.entrypoint}`}
+              transaction={call}
+              enabled={true}
+            >
+              <CallCardContents call={call} />
+              {/* <div className="flex flex-col gap-px rounded overflow-auto border border-background divide-y divide-solid divide-background">
+                <div className="flex flex-col p-3 gap-3 text-xs">
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-row items-center gap-2 text-foreground-300">
+                      <p className="font-medium text-xs">
+                        {humanizeString(call.entrypoint)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div> */}
+            </CollapsibleTransactionRow>
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+interface CollapsibleTransactionProps extends PropsWithChildren {
+  transaction: Call;
+  enabled: boolean;
+}
+
+export function CollapsibleTransactionRow({
+  transaction,
+  children,
+}: CollapsibleTransactionProps) {
+  const [value, setValue] = useState("");
+
+  return (
+    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
+      <AccordionItem value={transaction.entrypoint} className="flex flex-col">
+        <AccordionTrigger
+          hideIcon
+          className="hover:bg-background-300 rounded-md text-foreground-100 w-full"
+        >
+          <div className="flex gap-1 py-1 w-full">
+            <CheckboxIcon
+              variant={value ? "minus-line" : "plus-line"}
+              size="sm"
+            />
+            <h1 className="flex-grow text-foregroung-100">
+              {humanizeString(transaction.entrypoint)}
+            </h1>
+            <ContractLink
+              contractAddress={transaction.contractAddress}
+              className="text-foreground-400"
+            />
+          </div>
+        </AccordionTrigger>
+
+        <AccordionContent className="flex flex-col">
+          {children}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index b50f031337..513dade4f7 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -1,4 +1,7 @@
+import { useState } from "react";
 import {
+  Button,
+  GearIcon,
   LayoutContent,
   TokenCard,
   TokenSummary,
@@ -10,6 +13,7 @@ import { Call, FeeEstimate } from "starknet";
 import { ExecutionContainer } from "@/components/ExecutionContainer";
 import { useSwapTransactions } from "@/components/swap/swap";
 import { useTokenSwapData } from "@/hooks/token";
+import { AdvancedTransactions } from "./AdvancedTransactions";
 import placeholder from "/placeholder.svg?url";
 
 interface ConfirmSwapProps {
@@ -27,15 +31,14 @@ export function ConfirmSwap({
   error,
   origin,
 }: ConfirmSwapProps) {
+  const [advancedVisible, setAdvancedVisible] = useState(false);
+
   const { isSwap, swapTransactions, additionalMethodCount } =
     useSwapTransactions(transactions);
   const { tokenSwapData } = useTokenSwapData([
     ...swapTransactions.selling,
     ...swapTransactions.buying,
   ]);
-  // console.log("swapTransaction:", swapTransaction);
-
-  console.log(`SWAPS:`, swapTransactions, tokenSwapData);
 
   return (
     <ExecutionContainer
@@ -47,13 +50,25 @@ export function ConfirmSwap({
       onSubmit={onSubmit}
       onError={onError}
       buttonText={`Swap ${additionalMethodCount > 0 ? `+ ${additionalMethodCount}` : ""}`}
+      right={
+        !advancedVisible ? (
+          <Button
+            onClick={() => setAdvancedVisible(true)}
+            size="thumbnail"
+            variant="icon"
+            className="rounded-full text-foreground-300"
+          >
+            <GearIcon />
+          </Button>
+        ) : undefined
+      }
     >
       <LayoutContent>
         {!isSwap ? (
           <TransactionSummary calls={transactions} />
         ) : (
           <>
-            <TokenSummary title="Simulation Results">
+            <TokenSummary title="Simulation Results" className="flex-none">
               {tokenSwapData.map((token) => (
                 <TokenCard
                   key={token.address}
@@ -77,6 +92,9 @@ export function ConfirmSwap({
                 />
               ))}
             </TokenSummary>
+            {advancedVisible && (
+              <AdvancedTransactions transactions={transactions} />
+            )}
           </>
         )}
       </LayoutContent>
diff --git a/packages/keychain/src/components/transaction/CallCard.stories.tsx b/packages/keychain/src/components/transaction/CallCard.stories.tsx
index 9fd90592b6..69437a59c3 100644
--- a/packages/keychain/src/components/transaction/CallCard.stories.tsx
+++ b/packages/keychain/src/components/transaction/CallCard.stories.tsx
@@ -15,7 +15,6 @@ const meta: Meta<typeof CallCard> = {
     },
   },
   argTypes: {
-    address: { control: "text" },
     title: { control: "text" },
     call: { control: "object" },
   },
@@ -34,8 +33,6 @@ type Story = StoryObj<typeof meta>;
 
 export const SimpleCalldata: Story = {
   args: {
-    address:
-      "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     title: "Transfer",
     call: {
       contractAddress:
@@ -53,8 +50,6 @@ export const SimpleCalldata: Story = {
 
 export const ObjectCalldata: Story = {
   args: {
-    address:
-      "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     title: "Swap",
     call: {
       contractAddress:
@@ -77,8 +72,6 @@ export const ObjectCalldata: Story = {
 
 export const ComplexTypes: Story = {
   args: {
-    address:
-      "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     title: "Complex Transaction",
     call: {
       contractAddress:
@@ -113,8 +106,6 @@ export const ComplexTypes: Story = {
 
 export const WithUint256: Story = {
   args: {
-    address:
-      "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     title: "With Uint256",
     call: {
       contractAddress:
@@ -132,8 +123,6 @@ export const WithUint256: Story = {
 
 export const WithEnum: Story = {
   args: {
-    address:
-      "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     title: "With Enum",
     call: {
       contractAddress:
@@ -150,8 +139,6 @@ export const WithEnum: Story = {
 
 export const NestedObjects: Story = {
   args: {
-    address:
-      "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     title: "Nested Objects",
     call: {
       contractAddress:
@@ -184,8 +171,6 @@ export const NestedObjects: Story = {
 
 export const LongArrays: Story = {
   args: {
-    address:
-      "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     title: "Long Arrays",
     call: {
       contractAddress:
diff --git a/packages/keychain/src/components/transaction/CallCard.tsx b/packages/keychain/src/components/transaction/CallCard.tsx
index 217ed22930..c31969c4c6 100644
--- a/packages/keychain/src/components/transaction/CallCard.tsx
+++ b/packages/keychain/src/components/transaction/CallCard.tsx
@@ -1,4 +1,5 @@
-import { useConnection } from "@/hooks/connection";
+import { useState, useEffect } from "react";
+import { Call } from "starknet";
 import {
   Card,
   CardContent,
@@ -9,12 +10,10 @@ import {
   Badge,
   Address,
 } from "@cartridge/ui";
-import { useExplorer } from "@starknet-react/core";
-import { constants, Call } from "starknet";
-import { useState, useEffect } from "react";
+import { humanizeString } from "@cartridge/controller";
+import { ContractLink } from "@/components/ContractLink";
 
 interface CallCardProps {
-  address: string;
   title: string;
   call: Call;
   icon?: React.ReactNode;
@@ -223,13 +222,7 @@ function CalldataKeyValue({ keyName, value }: { keyName: string; value: any }) {
   );
 }
 
-export function CallCard({
-  address,
-  call,
-  defaultExpanded = false,
-}: CallCardProps) {
-  const { controller } = useConnection();
-  const explorer = useExplorer();
+export function CallCard({ call, defaultExpanded = false }: CallCardProps) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   // Update expansion state when defaultExpanded prop changes
@@ -237,22 +230,6 @@ export function CallCard({
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
 
-  const explorerLink = (
-    <a
-      className="text-xs text-foreground cursor-pointer hover:underline"
-      href={
-        controller?.chainId() === constants.StarknetChainId.SN_MAIN ||
-        controller?.chainId() === constants.StarknetChainId.SN_SEPOLIA
-          ? explorer.contract(address)
-          : `#`
-      }
-      target="_blank"
-      rel="noreferrer"
-    >
-      <Address address={address} first={5} last={5} />
-    </a>
-  );
-
   return (
     <Card>
       <CardContent className="py-2">
@@ -272,48 +249,7 @@ export function CallCard({
               </div>
             </AccordionTrigger>
             <AccordionContent>
-              <div className="flex flex-col gap-2 p-1">
-                <div className="flex items-center justify-between">
-                  <div className="text-xs text-foreground-200 font-bold">
-                    Contract
-                  </div>
-                  {explorerLink}
-                </div>
-
-                <div className="flex items-center justify-between">
-                  <div className="text-xs text-foreground-200 font-bold">
-                    Entrypoint
-                  </div>
-                  <div className="text-xs text-foreground">
-                    <CopyableValue value={call.entrypoint}>
-                      {call.entrypoint}
-                    </CopyableValue>
-                  </div>
-                </div>
-
-                {call.calldata && (
-                  <div className="flex flex-col gap-1">
-                    <div className="text-xs text-foreground-200 font-bold pb-1">
-                      Calldata
-                    </div>
-                    <div className="flex flex-col gap-1">
-                      {Array.isArray(call.calldata)
-                        ? call.calldata.map((data, i) => (
-                            <CalldataItem key={i} data={data} index={i} />
-                          ))
-                        : Object.entries(call.calldata).map(
-                            ([key, value], i) => (
-                              <CalldataKeyValue
-                                key={i}
-                                keyName={key}
-                                value={value}
-                              />
-                            ),
-                          )}
-                    </div>
-                  </div>
-                )}
-              </div>
+              <CallCardContents call={call} />
             </AccordionContent>
           </AccordionItem>
         </Accordion>
@@ -322,10 +258,37 @@ export function CallCard({
   );
 }
 
-function humanizeString(str: string): string {
-  return str
-    .replace(/([a-z])([A-Z])/g, "$1 $2")
-    .replace(/_/g, " ")
-    .toLowerCase()
-    .replace(/^\w/, (c) => c.toUpperCase());
+export function CallCardContents({ call }: { call: Call }) {
+  return (
+    <div className="flex flex-col gap-3 p-3 border border-background-100 rounded-md">
+      <div className="flex items-center justify-between">
+        <div className="text-foreground-300">Contract</div>
+        <ContractLink contractAddress={call.contractAddress} />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="text-foreground-300">Entrypoint</div>
+        <div className="text-foreground-100">
+          <CopyableValue value={call.entrypoint}>
+            {call.entrypoint}
+          </CopyableValue>
+        </div>
+      </div>
+
+      {call.calldata && (
+        <>
+          <div className="text-foreground-300 pb-1">Calldata</div>
+          <div className="flex flex-col gap-1">
+            {Array.isArray(call.calldata)
+              ? call.calldata.map((data, i) => (
+                  <CalldataItem key={i} data={data} index={i} />
+                ))
+              : Object.entries(call.calldata).map(([key, value], i) => (
+                  <CalldataKeyValue key={i} keyName={key} value={value} />
+                ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
 }
diff --git a/packages/keychain/src/components/transaction/TransactionSummary.tsx b/packages/keychain/src/components/transaction/TransactionSummary.tsx
index fdb01d8134..6fb5e5c97f 100644
--- a/packages/keychain/src/components/transaction/TransactionSummary.tsx
+++ b/packages/keychain/src/components/transaction/TransactionSummary.tsx
@@ -8,7 +8,6 @@ export function TransactionSummary({ calls }: { calls: Call[] }) {
         return (
           <CallCard
             key={i}
-            address={c.contractAddress}
             title="Contract"
             // title={c?.meta?.name || "Contract"}
             // icon={c?.meta?.icon}

From df371d36b9b7e3b4764dfa2f6cbf298e41fb23f1 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Mon, 2 Mar 2026 17:07:02 -0300
Subject: [PATCH 06/15] feat: consolidated fees footer

---
 examples/next/src/components/Profile.tsx      |  23 +++-
 examples/next/src/components/Swap.tsx         |  79 ++++++++++++
 .../components/ExecutionContainer.test.tsx    |  27 ++--
 .../src/components/ExecutionContainer.tsx     |  40 ++++--
 packages/keychain/src/components/Fees.tsx     | 122 +++++++++++++-----
 packages/keychain/src/components/FeesRow.tsx  | 108 ++++++++++++++++
 packages/keychain/src/components/Total.tsx    |  89 -------------
 .../collection/collectible-purchase.tsx       |  25 ++--
 .../collection/collection-purchase.tsx        |  25 ++--
 .../inventory/collection/footer.tsx           | 114 ++++++++--------
 .../src/components/swap/ConfirmSwap.tsx       |  61 ++++++---
 .../transaction/ConfirmTransaction.test.tsx   |   4 +
 .../keychain/src/test/mocks/connection.tsx    |   2 +
 13 files changed, 467 insertions(+), 252 deletions(-)
 create mode 100644 packages/keychain/src/components/FeesRow.tsx
 delete mode 100644 packages/keychain/src/components/Total.tsx

diff --git a/examples/next/src/components/Profile.tsx b/examples/next/src/components/Profile.tsx
index bd47fbc4eb..5167484473 100644
--- a/examples/next/src/components/Profile.tsx
+++ b/examples/next/src/components/Profile.tsx
@@ -171,12 +171,29 @@ export function Profile() {
               ctrlConnector.controller.openProfileAt(
                 // "account/bal7hazar/inventory/collection/0x046dA8955829ADF2bDa310099A0063451923f02E648cF25A1203aac6335CF0e4/token/0x000000000000000000000000000000000000000000000000000000000000c527?ps=arcade-main&preset=loot-survivor&address=0x027917d3084dC0dcd3C4ED5189733d14b0c4C13E762829BD3D1D761aa36201AB&purchaseView=true&tokenIds=0x000000000000000000000000000000000000000000000000000000000000c527",
                 // "account/mataleone/inventory/collection/0x046dA8955829ADF2bDa310099A0063451923f02E648cF25A1203aac6335CF0e4/purchase?ps=arcade-main&preset=loot-survivor&orders=2674",
-                // "account/mataleone/inventory/collection/0x046dA8955829ADF2bDa310099A0063451923f02E648cF25A1203aac6335CF0e4/purchase?ps=arcade-main&preset=loot-survivor&orders=520",
-                "account/mataleone/inventory/collection/0x07aAa9866750A0db82a54bA8674c38620Fa2F967D2FBb31133DEF48E0527c87f/purchase?ps=arcade-main&preset=pistols&orders=2867",
+                "account/mataleone/inventory/collection/0x046dA8955829ADF2bDa310099A0063451923f02E648cF25A1203aac6335CF0e4/purchase?ps=arcade-main&preset=loot-survivor&orders=8772",
               )
             }
           >
-            Open at Purchase
+            Purchase 1
+          </Button>
+          <Button
+            onClick={() =>
+              ctrlConnector.controller.openProfileAt(
+                "account/mataleone/inventory/collection/0x07aAa9866750A0db82a54bA8674c38620Fa2F967D2FBb31133DEF48E0527c87f/purchase?ps=arcade-main&preset=pistols&orders=2474",
+              )
+            }
+          >
+            Purchase 2
+          </Button>
+          <Button
+            onClick={() =>
+              ctrlConnector.controller.openProfileAt(
+                "account/mataleone/inventory/collection/0x0107AEfe535adaD25D91F77744BB37eca24D997e8216517736f06BBaEA22d214/purchase?ps=arcade-main&preset=arcade&orders=8832",
+              )
+            }
+          >
+            Purchase erc1155
           </Button>
           <Button
             onClick={() => {
diff --git a/examples/next/src/components/Swap.tsx b/examples/next/src/components/Swap.tsx
index c9c80c9514..51afcd11f7 100644
--- a/examples/next/src/components/Swap.tsx
+++ b/examples/next/src/components/Swap.tsx
@@ -33,6 +33,13 @@ export function Swap() {
         >
           LS2 Purchase Game
         </Button>
+        <Button
+          onClick={() =>
+            ctrlConnector.controller.openExecute(LS2_PURCHASE_GAME_ERROR)
+          }
+        >
+          LS2 Error
+        </Button>
       </div>
     </div>
   );
@@ -280,3 +287,75 @@ const LS2_PURCHASE_GAME = [
     ],
   },
 ];
+
+const LS2_PURCHASE_GAME_ERROR = [
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+      "0x5bbb37da193af4ba90000000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x1",
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x0452810188c4cb3aebd63711a3b445755bc0d6c4f27b923fdd99b1a118858136",
+      "0",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x1000003f7f1380b75",
+      "0x0",
+      0,
+      "0x0452810188C4Cb3AEbD63711a3b445755BC0D6C4f27B923fDd99B1A118858136",
+      "0xde0b6b3a7640000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "1955023220287003686908448593668771782622329060199208410425295899940041883958",
+      "1000000000000000000",
+      "0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0452810188C4Cb3AEbD63711a3b445755BC0D6C4f27B923fDd99B1A118858136",
+    entrypoint: "approve",
+    calldata: [
+      "294172758298611957878874535440244936028848058202724233951972339591192112194",
+      "1000000000000000000",
+      "0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x00a67ef20b61a9846e1c82b411175e6ab167ea9f8632bd6c2091823c3629ec42",
+    entrypoint: "buy_game",
+    calldata: [
+      "0",
+      "0",
+      "2017717448871504735845",
+      "2403140985568399978641699320335980224292375691718886561247325844102368719999",
+      "0",
+    ],
+  },
+];
diff --git a/packages/keychain/src/components/ExecutionContainer.test.tsx b/packages/keychain/src/components/ExecutionContainer.test.tsx
index 9d1674cd0d..1b3b0fecaa 100644
--- a/packages/keychain/src/components/ExecutionContainer.test.tsx
+++ b/packages/keychain/src/components/ExecutionContainer.test.tsx
@@ -22,6 +22,12 @@ vi.mock("@/hooks/tokens", () => ({
   convertTokenAmountToUSD: vi.fn(() => "$0.01"),
 }));
 
+const estimateInvokeFee = vi.fn().mockImplementation(async () => ({
+  suggestedMaxFee: BigInt(1000),
+}));
+const address = vi.fn().mockImplementation(async () => "0x123456789abcdef");
+const username = vi.fn().mockImplementation(async () => "testuser");
+
 describe("ExecutionContainer", () => {
   const defaultProps = {
     transactions: [],
@@ -45,10 +51,6 @@ describe("ExecutionContainer", () => {
   });
 
   it("estimates fees when transactions are provided", async () => {
-    const estimateInvokeFee = vi.fn().mockImplementation(async () => ({
-      suggestedMaxFee: BigInt(1000),
-    }));
-
     await act(async () => {
       renderWithProviders(
         <ExecutionContainer
@@ -65,6 +67,8 @@ describe("ExecutionContainer", () => {
           connection: {
             controller: {
               estimateInvokeFee,
+              address,
+              username,
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
           },
@@ -80,10 +84,6 @@ describe("ExecutionContainer", () => {
   it("handles submit action correctly", async () => {
     const onSubmit = vi.fn().mockResolvedValue(undefined);
 
-    const estimateInvokeFee = vi.fn().mockImplementation(async () => ({
-      suggestedMaxFee: BigInt(1000),
-    }));
-
     await act(async () => {
       renderWithProviders(
         <ExecutionContainer
@@ -101,6 +101,8 @@ describe("ExecutionContainer", () => {
           connection: {
             controller: {
               estimateInvokeFee,
+              address,
+              username,
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
           },
@@ -138,9 +140,6 @@ describe("ExecutionContainer", () => {
       code: 113, // ErrorCode.InsufficientBalance,
       message: "Insufficient balance",
     });
-    const estimateInvokeFee = vi.fn().mockResolvedValue({
-      suggestedMaxFee: BigInt(1000),
-    });
 
     await act(async () => {
       renderWithProviders(
@@ -160,6 +159,8 @@ describe("ExecutionContainer", () => {
           connection: {
             controller: {
               estimateInvokeFee,
+              address,
+              username,
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
           },
@@ -197,7 +198,7 @@ describe("ExecutionContainer", () => {
 
   it("shows deploy view when controller is not deployed", async () => {
     await act(async () => {
-      renderWithProviders(
+      renderWithConnection(
         <ExecutionContainer
           {...defaultProps}
           executionError={{
@@ -213,7 +214,7 @@ describe("ExecutionContainer", () => {
 
   it("shows funding view when balance is insufficient", async () => {
     await act(async () => {
-      renderWithConnection(
+      renderWithProviders(
         <ExecutionContainer
           {...defaultProps}
           executionError={{
diff --git a/packages/keychain/src/components/ExecutionContainer.tsx b/packages/keychain/src/components/ExecutionContainer.tsx
index b47a398204..6404d9f1fb 100644
--- a/packages/keychain/src/components/ExecutionContainer.tsx
+++ b/packages/keychain/src/components/ExecutionContainer.tsx
@@ -1,3 +1,5 @@
+import type { Call, FeeEstimate } from "starknet";
+import { useNavigation } from "@/context/navigation";
 import { ControllerErrorAlert, ErrorAlert } from "@/components/ErrorAlert";
 import { useConnection } from "@/hooks/connection";
 import type { ControllerError } from "@/utils/connection";
@@ -11,11 +13,8 @@ import {
 } from "@cartridge/ui";
 import { isEqual } from "@/utils";
 import { useCallback, useEffect, useRef, useState } from "react";
-
-import type { Call, FeeEstimate } from "starknet";
-import { Fees } from "./Fees";
-import { useNavigation } from "@/context/navigation";
 import { createDeployUrl } from "@/utils/connection/deploy";
+import { Fees, FeesData } from "@/components/Fees";
 
 interface ExecutionContainerProps {
   transactions: Call[];
@@ -27,6 +26,7 @@ interface ExecutionContainerProps {
   buttonText?: string;
   children: React.ReactNode;
   right?: React.ReactElement;
+  additionalFees?: FeesData[];
 }
 
 export function ExecutionContainer({
@@ -41,6 +41,7 @@ export function ExecutionContainer({
   onCancel,
   buttonText = "SUBMIT",
   right,
+  additionalFees,
   children,
 }: ExecutionContainerProps &
   Pick<HeaderProps, "title" | "description" | "icon">) {
@@ -175,11 +176,14 @@ export function ExecutionContainer({
             case ErrorCode.InsufficientBalance:
               return (
                 <>
-                  {ctrlError ? (
-                    <ControllerErrorAlert error={ctrlError} />
-                  ) : (
-                    <Fees isLoading={isEstimating} maxFee={maxFee} />
-                  )}
+                  <Fees
+                    isLoading={isEstimating}
+                    maxFee={maxFee}
+                    ctrlError={
+                      ctrlError && <ControllerErrorAlert error={ctrlError} />
+                    }
+                    additionalFees={additionalFees}
+                  />
                   <FundingButton />
                 </>
               );
@@ -232,7 +236,11 @@ export function ExecutionContainer({
               // Paymaster not available, fallback to user pays flow
               return (
                 <>
-                  <Fees isLoading={isEstimating} maxFee={maxFee} />
+                  <Fees
+                    isLoading={isEstimating}
+                    maxFee={maxFee}
+                    additionalFees={additionalFees}
+                  />
                   <Button
                     onClick={handleSubmit}
                     isLoading={isLoading}
@@ -265,10 +273,14 @@ export function ExecutionContainer({
 
               return (
                 <>
-                  {ctrlError && <ControllerErrorAlert error={ctrlError} />}
-                  {!ctrlError && (
-                    <Fees isLoading={isEstimating} maxFee={maxFee} />
-                  )}
+                  <Fees
+                    isLoading={isEstimating}
+                    maxFee={maxFee}
+                    ctrlError={
+                      ctrlError && <ControllerErrorAlert error={ctrlError} />
+                    }
+                    additionalFees={additionalFees}
+                  />
                   <LayoutButtons onCancel={onCancel}>
                     <Button
                       onClick={handleSubmit}
diff --git a/packages/keychain/src/components/Fees.tsx b/packages/keychain/src/components/Fees.tsx
index a4f6a2ea01..ad55cc813a 100644
--- a/packages/keychain/src/components/Fees.tsx
+++ b/packages/keychain/src/components/Fees.tsx
@@ -1,27 +1,44 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { FeeEstimate } from "starknet";
 import {
   convertTokenAmountToUSD,
   formatBalance,
   useFeeToken,
 } from "@/hooks/tokens";
+import { useTokens } from "@/hooks/token";
 import { ErrorAlert } from "./ErrorAlert";
-import { Total } from "./Total";
+import { FeesRow } from "./FeesRow";
+import { cn } from "@cartridge/ui/utils";
+
+export type FeesData = {
+  label: string;
+  contractAddress: string;
+  amount: number;
+  decimals?: number;
+  usdValue?: number | string;
+  tooltipContents?: React.ReactNode;
+};
 
 export function Fees({
   isLoading: isEstimating,
   maxFee,
+  ctrlError,
+  additionalFees,
 }: {
   isLoading: boolean;
   maxFee?: FeeEstimate;
+  ctrlError?: React.ReactElement;
+  additionalFees?: FeesData[];
 }) {
-  const { isLoading: isPriceLoading, token, error } = useFeeToken();
+  const { isLoading: isPriceLoading, token: feeToken, error } = useFeeToken();
   const [feeValue, setFeeValue] = useState<number>();
   const [usdFee, setUsdFee] = useState<string>();
   const isLoading = isEstimating || isPriceLoading;
 
+  const { tokens, status: tokensStatus } = useTokens();
+
   useEffect(() => {
-    if (isLoading || error || !token) {
+    if (isLoading || error || !feeToken) {
       return;
     }
 
@@ -30,44 +47,87 @@ export function Fees({
       return;
     }
 
-    if (maxFee && maxFee.overall_fee && token.price) {
+    if (maxFee && maxFee.overall_fee && feeToken.price) {
       const fee = Number(
-        formatBalance(BigInt(maxFee.overall_fee), token.decimals),
+        formatBalance(BigInt(maxFee.overall_fee), feeToken.decimals),
       );
       const usd = convertTokenAmountToUSD(
         BigInt(maxFee.overall_fee),
         18,
-        token.price,
+        feeToken.price,
       );
       setFeeValue(fee);
       setUsdFee(usd);
     }
-  }, [maxFee, token, error, isLoading]);
+  }, [maxFee, feeToken, error, isLoading]);
 
-  if (error) {
-    return (
-      <ErrorAlert
-        title="Fee estimation error"
-        description="Unable to retrieve fee token price"
-        variant="error"
-      />
-    );
-  }
-
-  if (usdFee === "FREE") {
-    return null;
-  }
+  const displayFees = useMemo(
+    () => isLoading || Boolean(!error && usdFee && usdFee !== "FREE"),
+    [error, usdFee, isLoading],
+  );
 
   return (
-    <div className="w-full overflow-hidden rounded pt-2">
-      <Total
-        label={isLoading ? "Calculating Fees" : "Network Fee"}
-        token={token}
-        totalValue={feeValue ?? 0}
-        decimals={2}
-        usdValue={usdFee}
-        isLoading={isLoading}
-      />
-    </div>
+    <>
+      {error && (
+        <ErrorAlert
+          title="Fee estimation error"
+          description="Unable to retrieve fee token price"
+          variant="error"
+        />
+      )}
+      {ctrlError}
+      {(displayFees || additionalFees?.length !== 0) && (
+        <div
+          className={cn(
+            "w-full rounded pt-2",
+            "flex flex-col gap-2 p-2.5 items-center justify-between bg-background-125 border border-background-200 rounded",
+          )}
+        >
+          {additionalFees?.map((feesData, index) => (
+            <FeesRow
+              key={index}
+              label={feesData.label}
+              amount={feesData.amount}
+              decimals={feesData.decimals}
+              usdValue={feesData.usdValue}
+              tooltipContents={feesData.tooltipContents}
+              token={tokens.find(
+                (token) =>
+                  BigInt(token.metadata.address) ===
+                  BigInt(feesData.contractAddress),
+              )}
+              isLoading={tokensStatus == "loading"}
+            />
+          ))}
+          {displayFees && (
+            <FeesRow
+              label={isLoading ? "Calculating Fees" : "Network Fee"}
+              amount={feeValue ?? 0}
+              decimals={2}
+              usdValue={usdFee}
+              token={
+                feeToken
+                  ? {
+                      balance: {
+                        amount: Number(feeToken?.balance ?? 0),
+                        value: 0,
+                        change: 0,
+                      },
+                      metadata: {
+                        name: feeToken.name,
+                        address: feeToken.address,
+                        decimals: feeToken.decimals,
+                        symbol: feeToken.symbol,
+                        image: feeToken.icon,
+                      },
+                    }
+                  : undefined
+              }
+              isLoading={isLoading}
+            />
+          )}
+        </div>
+      )}
+    </>
   );
 }
diff --git a/packages/keychain/src/components/FeesRow.tsx b/packages/keychain/src/components/FeesRow.tsx
new file mode 100644
index 0000000000..c2b5200b71
--- /dev/null
+++ b/packages/keychain/src/components/FeesRow.tsx
@@ -0,0 +1,108 @@
+import {
+  Thumbnail,
+  InfoIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Spinner,
+} from "@cartridge/ui";
+import { cn } from "@cartridge/ui/utils";
+import { type Token } from "@/hooks/token";
+
+export type FeesRowProps = {
+  label: string;
+  amount: number;
+  decimals?: number;
+  usdValue?: number | string;
+  tooltipContents?: React.ReactNode;
+  token: Token | undefined;
+  isLoading?: boolean;
+  className?: string;
+};
+
+export function FeesRow({
+  label,
+  amount,
+  decimals,
+  usdValue,
+  tooltipContents,
+  token,
+  isLoading,
+  className,
+}: FeesRowProps) {
+  const amountColor =
+    token && token.balance.amount < amount ? "text-destructive" : "";
+  return (
+    <div
+      className={cn(
+        "flex gap-1 w-full items-center justify-between",
+        className,
+      )}
+    >
+      {isLoading || !token ? (
+        <>
+          <p className="text-sm font-medium text-foreground-400">{label}</p>
+          <div className="flex-1" />
+          <Spinner />
+        </>
+      ) : (
+        <>
+          <p className="text-sm font-medium text-foreground-400">{label}</p>
+          {tooltipContents && <FeesTooltip contents={tooltipContents} />}
+          <div className="flex-1" />
+          {!!usdValue && (
+            <p className="text-sm font-medium text-foreground-300">
+              {typeof usdValue === "string"
+                ? usdValue
+                : `$${usdValue.toFixed(2)}`}
+            </p>
+          )}
+          <Thumbnail
+            icon={token.metadata.image || ""}
+            size="sm"
+            className="ml-1"
+          />
+          {!!amount && (
+            <p
+              className={cn(
+                "text-sm font-medium text-foreground-100",
+                amountColor,
+              )}
+            >
+              {`${amount.toLocaleString(undefined, {
+                maximumFractionDigits: decimals ?? 2,
+              })}`}
+            </p>
+          )}
+          <p
+            className={cn(
+              "text-sm font-medium text-foreground-100",
+              amountColor,
+            )}
+          >
+            {token.metadata.symbol}
+          </p>
+        </>
+      )}
+    </div>
+  );
+}
+
+const FeesTooltip = ({ contents }: { contents: React.ReactNode }) => {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <InfoIcon size="xs" className="text-foreground-400" />
+        </TooltipTrigger>
+        <TooltipContent
+          className="px-3 py-2 bg-spacer-100 border border-background-150 rounded select-none"
+          side="top"
+        >
+          {contents}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
diff --git a/packages/keychain/src/components/Total.tsx b/packages/keychain/src/components/Total.tsx
deleted file mode 100644
index 867906bf25..0000000000
--- a/packages/keychain/src/components/Total.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import {
-  Thumbnail,
-  InfoIcon,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-  Spinner,
-} from "@cartridge/ui";
-import { cn } from "@cartridge/ui/utils";
-import { ERC20 } from "./provider/tokens";
-
-export function Total({
-  label,
-  token,
-  totalValue,
-  decimals,
-  usdValue,
-  tooltipContents,
-  isLoading,
-  className,
-}: {
-  label: string;
-  token: ERC20 | undefined;
-  totalValue: number;
-  decimals?: number;
-  usdValue?: number | string;
-  tooltipContents?: React.ReactNode;
-  isLoading?: boolean;
-  className?: string;
-}) {
-  return (
-    <div className={cn("flex gap-3 w-full", className)}>
-      {isLoading || !token ? (
-        <div className="flex flex-1 gap-1 p-3 h-10 items-center justify-between bg-background-125 border border-background-200 rounded">
-          <p className="text-sm font-medium text-foreground-400">{label}</p>
-          <div className="flex-1" />
-          <Spinner />
-        </div>
-      ) : (
-        <>
-          <div className="flex flex-1 gap-1 p-3 h-10 items-center justify-between bg-background-125 border border-background-200 rounded">
-            <p className="text-sm font-medium text-foreground-400">{label}</p>
-            {tooltipContents && <TotalTooltip contents={tooltipContents} />}
-            <div className="flex-1" />
-            {!!usdValue && (
-              <p className="text-sm font-medium text-foreground-300 mr-1">
-                {typeof usdValue === "string"
-                  ? usdValue
-                  : `$${usdValue.toFixed(2)}`}
-              </p>
-            )}
-            {!!totalValue && (
-              <p className="text-sm font-medium text-foreground-100">
-                {`${totalValue.toLocaleString(undefined, {
-                  maximumFractionDigits: decimals ?? 2,
-                })}`}
-              </p>
-            )}
-          </div>
-          <div className="flex gap-1 p-2.5 h-10 items-center justify-between bg-background-125 border border-background-200 rounded">
-            <Thumbnail icon={token.icon || ""} size="sm" />
-            <p className="text-sm font-medium text-foreground-100">
-              {token.symbol}
-            </p>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-const TotalTooltip = ({ contents }: { contents: React.ReactNode }) => {
-  return (
-    <TooltipProvider>
-      <Tooltip delayDuration={0}>
-        <TooltipTrigger asChild>
-          <InfoIcon size="xs" className="text-foreground-400" />
-        </TooltipTrigger>
-        <TooltipContent
-          className="px-3 py-2 bg-spacer-100 border border-background-150 rounded select-none"
-          side="top"
-        >
-          {contents}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-};
diff --git a/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx b/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx
index be08f7a383..f7ba3e07e1 100644
--- a/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx
+++ b/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx
@@ -38,7 +38,7 @@ import {
 } from "@cartridge/arcade/marketplace/react";
 import { StatusType } from "@cartridge/arcade";
 import { ArcadeContext } from "@/context/arcade";
-import { CollectionFooter } from "./footer";
+import { usePurchaseFeesData } from "./footer";
 
 export function CollectiblePurchase() {
   const { address: contractAddress, tokenId } = useParams();
@@ -335,6 +335,17 @@ export function CollectiblePurchase() {
     setAmount(amount);
   }, [tokenOrders, setAmount]);
 
+  const feesData = usePurchaseFeesData({
+    token,
+    fees,
+    totalPrice: floatPrice,
+    feeDecimals: 3,
+    orders: props.map((args) => ({
+      name: args.name,
+      amount: args.finalPrice.toFixed(fixedValue),
+    })),
+  });
+
   return (
     <>
       {status === "loading" || !collection ? (
@@ -357,6 +368,7 @@ export function CollectiblePurchase() {
               onSubmit={onSubmitPurchase}
               onCancel={canGoBack ? goBack : closeModal}
               buttonText="Confirm"
+              additionalFees={[feesData]}
             >
               <div className="p-4 pb-0 flex flex-col gap-4 overflow-hidden h-full">
                 <div
@@ -393,17 +405,6 @@ export function CollectiblePurchase() {
                 </div>
 
                 <div className="flex-1" />
-
-                <CollectionFooter
-                  token={token}
-                  fees={fees}
-                  totalPrice={floatPrice}
-                  feeDecimals={3}
-                  orders={props.map((args) => ({
-                    name: args.name,
-                    amount: args.finalPrice.toFixed(fixedValue),
-                  }))}
-                />
               </div>
             </ExecutionContainer>
           ) : null}
diff --git a/packages/keychain/src/components/inventory/collection/collection-purchase.tsx b/packages/keychain/src/components/inventory/collection/collection-purchase.tsx
index 6e24407213..92a38e6a9a 100644
--- a/packages/keychain/src/components/inventory/collection/collection-purchase.tsx
+++ b/packages/keychain/src/components/inventory/collection/collection-purchase.tsx
@@ -38,7 +38,7 @@ import {
 } from "@cartridge/arcade/marketplace/react";
 import { StatusType } from "@cartridge/arcade";
 import { ArcadeContext } from "@/context/arcade";
-import { CollectionFooter } from "./footer";
+import { usePurchaseFeesData } from "./footer";
 
 export function CollectionPurchase() {
   const { address: contractAddress, tokenId } = useParams();
@@ -322,6 +322,17 @@ export function CollectionPurchase() {
     setAmount(newAmount);
   }, [tokenOrders]);
 
+  const feesData = usePurchaseFeesData({
+    token,
+    fees,
+    totalPrice: floatPrice,
+    feeDecimals: fixedFeeValue,
+    orders: props.map((args) => ({
+      name: args.name,
+      amount: args.finalPrice.toFixed(fixedValue),
+    })),
+  });
+
   return (
     <>
       {status === "loading" || !tokenContract ? (
@@ -344,6 +355,7 @@ export function CollectionPurchase() {
               onSubmit={onSubmitPurchase}
               onCancel={canGoBack ? goBack : closeModal}
               buttonText="Confirm"
+              additionalFees={[feesData]}
             >
               <div className="p-4 pb-0 flex flex-col gap-4 overflow-hidden h-full select-none">
                 <div
@@ -380,17 +392,6 @@ export function CollectionPurchase() {
                 </div>
 
                 <div className="flex-1" />
-
-                <CollectionFooter
-                  token={token}
-                  fees={fees}
-                  totalPrice={floatPrice}
-                  feeDecimals={fixedFeeValue}
-                  orders={props.map((args) => ({
-                    name: args.name,
-                    amount: args.finalPrice.toFixed(fixedValue),
-                  }))}
-                />
               </div>
             </ExecutionContainer>
           ) : null}
diff --git a/packages/keychain/src/components/inventory/collection/footer.tsx b/packages/keychain/src/components/inventory/collection/footer.tsx
index 0d090f15ec..b7818b9660 100644
--- a/packages/keychain/src/components/inventory/collection/footer.tsx
+++ b/packages/keychain/src/components/inventory/collection/footer.tsx
@@ -1,36 +1,31 @@
 import { Token, Separator } from "@cartridge/ui";
-import { Total } from "@/components/Total";
-import { ERC20 } from "@/components/provider/tokens";
 import { useMemo } from "react";
 import { useCountervalue } from "@cartridge/ui/utils";
+import { FeesData } from "@/components/Fees";
 
-export function CollectionFooter({
+export function usePurchaseFeesData({
   token,
   orders,
   fees,
   totalPrice,
   feeDecimals,
 }: {
-  token: Token;
+  token: Token | undefined;
   orders: { name: string; amount: string }[];
   fees: { label: string; amount: number; percentage: number }[];
   totalPrice: number;
   feeDecimals?: number;
-}) {
-  const erc20 = {
-    address: token.metadata.address,
-    symbol: token.metadata.symbol,
-    icon: token.metadata.image,
-  } as ERC20;
-
+}): FeesData {
   const tokenData = useMemo(
     () => ({
-      tokens: [
-        {
-          balance: totalPrice.toString(),
-          address: token.metadata.address,
-        },
-      ],
+      tokens: token
+        ? [
+            {
+              balance: totalPrice.toString(),
+              address: token.metadata.address,
+            },
+          ]
+        : [],
     }),
     [totalPrice, token],
   );
@@ -40,52 +35,55 @@ export function CollectionFooter({
     [countervalues],
   );
 
-  return (
-    <Total
-      label="Total"
-      token={erc20}
-      totalValue={totalPrice}
-      decimals={feeDecimals}
-      usdValue={usdValue}
-      tooltipContents={
-        <div className="flex flex-col gap-2">
-          <div className="flex flex-col gap-1 text-foreground-300">
-            {orders.map((order, i) => (
+  const tooltipContents = useMemo(
+    () => (
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1 text-foreground-300">
+          {orders.map((order, i) => (
+            <div
+              key={i}
+              className="flex items-center justify-between gap-4 text-xs"
+            >
+              <span>{order.name}</span>
+              <span>
+                {order.amount} {token?.metadata.symbol}
+              </span>
+            </div>
+          ))}
+        </div>
+        <Separator className="bg-background-100" />
+        <div className="flex flex-col gap-1 text-foreground-300">
+          {fees
+            .filter((fee) => fee.amount > 0)
+            .map((fee) => (
               <div
-                key={i}
+                key={fee.label}
                 className="flex items-center justify-between gap-4 text-xs"
               >
-                <span>{order.name}</span>
-                <span>
-                  {order.amount} {token.metadata.symbol}
-                </span>
+                {fee.label}
+                <div className="flex items-center gap-1">
+                  <span>
+                    {fee.amount.toLocaleString(undefined, {
+                      maximumFractionDigits: feeDecimals,
+                    })}
+                  </span>
+                  <span>{token?.metadata.symbol}</span>
+                  <span>({fee.percentage.toFixed(2)}%)</span>
+                </div>
               </div>
             ))}
-          </div>
-          <Separator className="bg-background-100" />
-          <div className="flex flex-col gap-1 text-foreground-300">
-            {fees
-              .filter((fee) => fee.amount > 0)
-              .map((fee) => (
-                <div
-                  key={fee.label}
-                  className="flex items-center justify-between gap-4 text-xs"
-                >
-                  {fee.label}
-                  <div className="flex items-center gap-1">
-                    <span>
-                      {fee.amount.toLocaleString(undefined, {
-                        maximumFractionDigits: feeDecimals,
-                      })}
-                    </span>
-                    <span>{token.metadata.symbol}</span>
-                    <span>({fee.percentage.toFixed(2)}%)</span>
-                  </div>
-                </div>
-              ))}
-          </div>
         </div>
-      }
-    />
+      </div>
+    ),
+    [orders, fees, token, feeDecimals],
   );
+
+  return {
+    label: "Total",
+    contractAddress: token?.metadata.address ?? "0x0",
+    amount: totalPrice,
+    decimals: feeDecimals,
+    usdValue,
+    tooltipContents,
+  };
 }
diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index 513dade4f7..c420892a6a 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -12,7 +12,7 @@ import { ControllerError } from "@/utils/connection";
 import { Call, FeeEstimate } from "starknet";
 import { ExecutionContainer } from "@/components/ExecutionContainer";
 import { useSwapTransactions } from "@/components/swap/swap";
-import { useTokenSwapData } from "@/hooks/token";
+import { TokenSwapData, useTokenSwapData } from "@/hooks/token";
 import { AdvancedTransactions } from "./AdvancedTransactions";
 import placeholder from "/placeholder.svg?url";
 
@@ -35,10 +35,24 @@ export function ConfirmSwap({
 
   const { isSwap, swapTransactions, additionalMethodCount } =
     useSwapTransactions(transactions);
-  const { tokenSwapData } = useTokenSwapData([
-    ...swapTransactions.selling,
-    ...swapTransactions.buying,
-  ]);
+  const { tokenSwapData: sellingSwapData } = useTokenSwapData(
+    swapTransactions.selling,
+  );
+  const { tokenSwapData: buyingSwapData } = useTokenSwapData(
+    swapTransactions.buying,
+  );
+
+  const formatAmount = (token: TokenSwapData) => {
+    return `${token.amount.toLocaleString(undefined, { maximumFractionDigits: 5 })} ${token.symbol}`;
+  };
+
+  const formatValue = (token: TokenSwapData) => {
+    return !token.value
+      ? "$0.00"
+      : token.value < 0.01
+        ? "<$0.01"
+        : `~$${token.value.toFixed(2)}`;
+  };
 
   return (
     <ExecutionContainer
@@ -62,6 +76,13 @@ export function ConfirmSwap({
           </Button>
         ) : undefined
       }
+      additionalFees={sellingSwapData.map((token) => ({
+        label: "Cost",
+        contractAddress: token.address,
+        amount: token?.amount ?? 0,
+        usdValue: formatValue(token),
+        decimals: 2,
+      }))}
     >
       <LayoutContent>
         {!isSwap ? (
@@ -69,26 +90,26 @@ export function ConfirmSwap({
         ) : (
           <>
             <TokenSummary title="Simulation Results" className="flex-none">
-              {tokenSwapData.map((token) => (
+              {sellingSwapData.map((token) => (
+                <TokenCard
+                  key={token.address}
+                  image={token.image || placeholder}
+                  title={token.name}
+                  amount={formatAmount(token)}
+                  value={formatValue(token)}
+                  clickable={false}
+                  decreasing
+                />
+              ))}
+              {buyingSwapData.map((token) => (
                 <TokenCard
                   key={token.address}
                   image={token.image || placeholder}
                   title={token.name}
-                  amount={`${token.amount.toLocaleString(undefined, { maximumFractionDigits: 5 })} ${token.symbol}`}
-                  value={
-                    !token.value
-                      ? "$0.00"
-                      : token.value < 0.01
-                        ? "<$0.01"
-                        : `~$${token.value.toFixed(2)}`
-                  }
-                  increasing={swapTransactions.buying.some(
-                    (t) => t.address === token.address,
-                  )}
-                  decreasing={swapTransactions.selling.some(
-                    (t) => t.address === token.address,
-                  )}
+                  amount={formatAmount(token)}
+                  value={formatValue(token)}
                   clickable={false}
+                  increasing
                 />
               ))}
             </TokenSummary>
diff --git a/packages/keychain/src/components/transaction/ConfirmTransaction.test.tsx b/packages/keychain/src/components/transaction/ConfirmTransaction.test.tsx
index ca9a50870c..65d55370c1 100644
--- a/packages/keychain/src/components/transaction/ConfirmTransaction.test.tsx
+++ b/packages/keychain/src/components/transaction/ConfirmTransaction.test.tsx
@@ -80,6 +80,8 @@ describe("ConfirmTransaction", () => {
     const estimateInvokeFee = vi.fn().mockResolvedValue({
       suggestedMaxFee: BigInt(1000),
     });
+    const address = vi.fn().mockResolvedValue("0x123456789abcdef");
+    const username = vi.fn().mockResolvedValue("testuser");
 
     await act(async () => {
       renderWithProviders(
@@ -93,6 +95,8 @@ describe("ConfirmTransaction", () => {
               execute: mockExecute,
               estimateInvokeFee,
               isRequestedSession: vi.fn().mockResolvedValue(true),
+              address,
+              username,
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
           },
diff --git a/packages/keychain/src/test/mocks/connection.tsx b/packages/keychain/src/test/mocks/connection.tsx
index cb847e5a36..4ea3c57b91 100644
--- a/packages/keychain/src/test/mocks/connection.tsx
+++ b/packages/keychain/src/test/mocks/connection.tsx
@@ -16,6 +16,8 @@ const defaultMockController: any = {
     suggestedMaxFee: BigInt(1000),
   })),
   chainId: vi.fn().mockImplementation(() => constants.StarknetChainId.SN_MAIN),
+  address: vi.fn().mockImplementation(async () => "0x123456789abcdef"),
+  username: vi.fn().mockImplementation(async () => "testuser"),
 } as const;
 
 export const defaultMockConnection: ConnectionContextValue = {

From cc503454f8ee8dd8b249e2c5042b049443c5cc96 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Tue, 3 Mar 2026 16:03:02 -0300
Subject: [PATCH 07/15] chore: layout updates

---
 .../keychain/src/components/ContractLink.tsx  |  2 +-
 packages/keychain/src/components/FeesRow.tsx  |  2 +-
 .../components/swap/AdvancedTransactions.tsx  | 27 +++++++++-----
 .../src/components/transaction/CallCard.tsx   | 36 ++++++++++++++-----
 4 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/packages/keychain/src/components/ContractLink.tsx b/packages/keychain/src/components/ContractLink.tsx
index 1532c7eae1..bf3004ff07 100644
--- a/packages/keychain/src/components/ContractLink.tsx
+++ b/packages/keychain/src/components/ContractLink.tsx
@@ -31,7 +31,7 @@ export function ContractLink({
         address={contractAddress}
         first={5}
         last={5}
-        className="text-inherit"
+        className="text-inherit font-sans"
       />
     </a>
   );
diff --git a/packages/keychain/src/components/FeesRow.tsx b/packages/keychain/src/components/FeesRow.tsx
index c2b5200b71..9dc6474e4c 100644
--- a/packages/keychain/src/components/FeesRow.tsx
+++ b/packages/keychain/src/components/FeesRow.tsx
@@ -61,7 +61,7 @@ export function FeesRow({
           <Thumbnail
             icon={token.metadata.image || ""}
             size="sm"
-            className="ml-1"
+            className="ml-1 bg-transparent"
           />
           {!!amount && (
             <p
diff --git a/packages/keychain/src/components/swap/AdvancedTransactions.tsx b/packages/keychain/src/components/swap/AdvancedTransactions.tsx
index a2c7b8a188..6abc73c1df 100644
--- a/packages/keychain/src/components/swap/AdvancedTransactions.tsx
+++ b/packages/keychain/src/components/swap/AdvancedTransactions.tsx
@@ -31,33 +31,44 @@ export function AdvancedTransactions({
     <Accordion
       type="single"
       collapsible
-      className={cn("bg-background-200 rounded", className)}
+      className={cn(
+        "rounded border",
+        isOpened
+          ? "text-foreground-100 bg-background-200 border-transparent"
+          : "text-foreground-300 bg-transparent border-background-200",
+        className,
+      )}
       value={isOpened ? "item" : ""}
       onValueChange={(value) => setisOpened(value === "item")}
     >
       <AccordionItem value="item">
         <AccordionTrigger
           parentClassName="h-11 p-3"
-          className="flex items-center text-sm font-medium text-foreground-100 gap-1.5"
-          color={cn(isOpened ? "text-foreground-100" : "text-foreground-400")}
+          className="flex items-center text-sm font-medium gap-1.5"
+          // color={cn(isOpened ? "text-foreground-100" : "text-foreground-300")}
         >
           <Thumbnail
-            variant={isOpened ? "light" : "ghost"}
+            variant="light"
             size="sm"
             icon={<GearIcon />}
             centered={true}
+            className={cn(
+              isOpened
+                ? "text-foreground-100"
+                : "text-foreground-300 bg-background-200",
+            )}
           />
           <p>Advanced</p>
         </AccordionTrigger>
 
-        <AccordionContent className="flex flex-col gap-3 px-3 pb-3">
+        <AccordionContent className="flex flex-col gap-3 px-3 pb-3 border-t border-background-100 pt-2">
           {transactions.map((call) => (
             <CollapsibleTransactionRow
               key={`${call.contractAddress}-${call.entrypoint}`}
               transaction={call}
               enabled={true}
             >
-              <CallCardContents call={call} />
+              <CallCardContents call={call} className="mt-2" />
               {/* <div className="flex flex-col gap-px rounded overflow-auto border border-background divide-y divide-solid divide-background">
                 <div className="flex flex-col p-3 gap-3 text-xs">
                   <div className="flex items-center justify-between">
@@ -93,9 +104,9 @@ export function CollapsibleTransactionRow({
       <AccordionItem value={transaction.entrypoint} className="flex flex-col">
         <AccordionTrigger
           hideIcon
-          className="hover:bg-background-300 rounded-md text-foreground-100 w-full"
+          className="rounded-md text-foreground-100 w-full"
         >
-          <div className="flex gap-1 py-1 w-full">
+          <div className="flex gap-1 py-1 w-full text-xs items-center">
             <CheckboxIcon
               variant={value ? "minus-line" : "plus-line"}
               size="sm"
diff --git a/packages/keychain/src/components/transaction/CallCard.tsx b/packages/keychain/src/components/transaction/CallCard.tsx
index c31969c4c6..f141734ff9 100644
--- a/packages/keychain/src/components/transaction/CallCard.tsx
+++ b/packages/keychain/src/components/transaction/CallCard.tsx
@@ -9,6 +9,7 @@ import {
   AccordionTrigger,
   Badge,
   Address,
+  cn,
 } from "@cartridge/ui";
 import { humanizeString } from "@cartridge/controller";
 import { ContractLink } from "@/components/ContractLink";
@@ -44,15 +45,20 @@ function copyToClipboard(text: string) {
 // Component for clickable value that can be copied
 function CopyableValue({
   value,
+  className,
   children,
 }: {
   value: string;
+  className?: string;
   children: React.ReactNode;
 }) {
   return (
     <span
       onClick={() => copyToClipboard(value)}
-      className="cursor-pointer hover:opacity-80 relative group"
+      className={cn(
+        "cursor-pointer hover:opacity-80 relative group",
+        className,
+      )}
       title="Click to copy"
     >
       {children}
@@ -243,7 +249,7 @@ export function CallCard({ call, defaultExpanded = false }: CallCardProps) {
           <AccordionItem value="item" className="bg-background-200 rounded-md">
             <AccordionTrigger className="px-1 py-2">
               <div className="flex items-center gap-2">
-                <p className="text-foreground font-bold text-s">
+                <p className="text-foreground font-bold">
                   {humanizeString(call.entrypoint)}
                 </p>
               </div>
@@ -258,18 +264,32 @@ export function CallCard({ call, defaultExpanded = false }: CallCardProps) {
   );
 }
 
-export function CallCardContents({ call }: { call: Call }) {
+export function CallCardContents({
+  call,
+  className,
+}: {
+  call: Call;
+  className?: string;
+}) {
   return (
-    <div className="flex flex-col gap-3 p-3 border border-background-100 rounded-md">
+    <div
+      className={cn(
+        "flex flex-col gap-3 p-3 border border-background-100 rounded-md text-xs",
+        className,
+      )}
+    >
       <div className="flex items-center justify-between">
-        <div className="text-foreground-300">Contract</div>
+        <div className="text-foreground-400">Contract</div>
         <ContractLink contractAddress={call.contractAddress} />
       </div>
 
       <div className="flex items-center justify-between">
-        <div className="text-foreground-300">Entrypoint</div>
+        <div className="text-foreground-400">Entrypoint</div>
         <div className="text-foreground-100">
-          <CopyableValue value={call.entrypoint}>
+          <CopyableValue
+            value={call.entrypoint}
+            className="text-foreground-100"
+          >
             {call.entrypoint}
           </CopyableValue>
         </div>
@@ -277,7 +297,7 @@ export function CallCardContents({ call }: { call: Call }) {
 
       {call.calldata && (
         <>
-          <div className="text-foreground-300 pb-1">Calldata</div>
+          <div className="text-foreground-400 pb-1">Calldata</div>
           <div className="flex flex-col gap-1">
             {Array.isArray(call.calldata)
               ? call.calldata.map((data, i) => (

From 0aad29d2f03e98f99fabc575092ebf2433fb9bbf Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Tue, 3 Mar 2026 17:04:39 -0300
Subject: [PATCH 08/15] chore: created swap hooks tests

---
 .../keychain/src/components/swap/swap.test.ts | 470 ++++++++++++++++++
 1 file changed, 470 insertions(+)
 create mode 100644 packages/keychain/src/components/swap/swap.test.ts

diff --git a/packages/keychain/src/components/swap/swap.test.ts b/packages/keychain/src/components/swap/swap.test.ts
new file mode 100644
index 0000000000..4cf92df8f7
--- /dev/null
+++ b/packages/keychain/src/components/swap/swap.test.ts
@@ -0,0 +1,470 @@
+import { describe, it, expect } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { getChecksumAddress, type Call } from "starknet";
+import { useIsSwapTransaction, useSwapTransactions } from "./swap";
+
+// Transactions mirrored from examples/next/src/components/Swap.tsx
+const SWAP_SINGLE: Call[] = [
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+      "0x32a03ab37fef8ba51",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x2",
+      "0x016dea82a6588ca9fb7200125fa05631b1c1735a313e24afe9c90301e441a796",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "17014118346046924117642026945517453312",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x6f3528fe26840249f4b191ef6dff7928",
+      "0xfffffc080ed7b455",
+      0,
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "3402823669209384634633746074317682114",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x1000003f7f1380b75",
+      "0x0",
+      0,
+      "0x016dea82a6588ca9fb7200125fa05631b1c1735a313e24afe9c90301e441a796",
+      "0xa688906bd8b00000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "0x016dea82a6588ca9fb7200125fa05631b1c1735a313e24afe9c90301e441a796",
+      "0xa4de3d0e9ba40000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    ],
+  },
+];
+
+const SWAP_MULTIPLE: Call[] = [
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+      "0x176e9649d99dd740a",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x2",
+      "0x01c3c8284d7eed443b42f47e764032a56eaf50a9079d67993b633930e3689814",
+      "0x075afe6402ad5a5c20dd25e10ec3b3986acaa647b77e4ae24b0cbc9a54a27a87",
+      "0",
+      "0x56a4c",
+      "0x005e470ff654d834983a46b8f29dfa99963d5044b993cb7b9c92243a69dab38f",
+      "0x6f3528fe26840249f4b191ef6dff7928",
+      "0xfffffc080ed7b455",
+      0,
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x075afe6402ad5a5c20dd25e10ec3b3986acaa647b77e4ae24b0cbc9a54a27a87",
+      "1020847100762815411640772995208708096",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x1000003f7f1380b75",
+      "0x0",
+      0,
+      "0x01c3c8284d7eed443b42f47e764032a56eaf50a9079d67993b633930e3689814",
+      "0xde0b6b3a7640000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "0x01c3c8284d7eed443b42f47e764032a56eaf50a9079d67993b633930e3689814",
+      "0xdbd2fc137a30000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+      "0x4f1eba34861ddd0",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x2",
+      "0x0103eafe79f8631932530cc687dfcdeb013c883a82619ebf81be393e2953a87a",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "17014118346046923173168730371588410572",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x6f3528fe26840249f4b191ef6dff7928",
+      "0xfffffc080ed7b455",
+      0,
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x042dd777885ad2c116be96d4d634abc90a26a790ffb5871e037dd5ae7d2ec86b",
+      "17014118346046923173168730371588410572",
+      "0x1744e",
+      "0x0000000000000000000000000000000000000000000000000000000000000000",
+      "0xf7c31547edfb13af0071dfd6ffe",
+      "0x0",
+      0,
+      "0x0103eafe79f8631932530cc687dfcdeb013c883a82619ebf81be393e2953a87a",
+      "0xde0b6b3a7640000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "0x0103eafe79f8631932530cc687dfcdeb013c883a82619ebf81be393e2953a87a",
+      "0xdbd2fc137a30000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x04505a9f06f2bd639b6601f37a4dc0908bb70e8e0e0c34b1220827d64f4fc066",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+    ],
+  },
+];
+
+const LS2_PURCHASE_GAME: Call[] = [
+  {
+    contractAddress:
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+    entrypoint: "transfer",
+    calldata: [
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+      "0x5bbb37da193af4ba9",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "multihop_swap",
+    calldata: [
+      "0x1",
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x0452810188c4cb3aebd63711a3b445755bc0d6c4f27b923fdd99b1a118858136",
+      "0",
+      "0x56a4c",
+      "0x043e4f09c32d13d43a880e85f69f7de93ceda62d6cf2581a582c6db635548fdc",
+      "0x1000003f7f1380b75",
+      "0x0",
+      0,
+      "0x0452810188C4Cb3AEbD63711a3b445755BC0D6C4f27B923fDd99B1A118858136",
+      "0xde0b6b3a7640000",
+      "0x1",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "clear_minimum",
+    calldata: [
+      "1955023220287003686908448593668771782622329060199208410425295899940041883958",
+      "1000000000000000000",
+      "0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
+    entrypoint: "clear",
+    calldata: [
+      "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+    ],
+  },
+  {
+    contractAddress:
+      "0x0452810188C4Cb3AEbD63711a3b445755BC0D6C4f27B923fDd99B1A118858136",
+    entrypoint: "approve",
+    calldata: [
+      "294172758298611957878874535440244936028848058202724233951972339591192112194",
+      "1000000000000000000",
+      "0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x00a67ef20b61a9846e1c82b411175e6ab167ea9f8632bd6c2091823c3629ec42",
+    entrypoint: "buy_game",
+    calldata: [
+      "0",
+      "0",
+      "2017717448871504735845",
+      "2403140985568399978641699320335980224292375691718886561247325844102368719999",
+      "0",
+    ],
+  },
+];
+
+describe("useIsSwapTransaction", () => {
+  it("returns false for empty transactions", () => {
+    const { result } = renderHook(() => useIsSwapTransaction([]));
+    expect(result.current.isSwap).toBe(false);
+  });
+
+  it("returns false for fewer than 4 transactions", () => {
+    const { result } = renderHook(() =>
+      useIsSwapTransaction([
+        { contractAddress: "0x1", entrypoint: "transfer", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "multihop_swap", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "clear_minimum", calldata: [] },
+      ]),
+    );
+    expect(result.current.isSwap).toBe(false);
+  });
+
+  it("returns false when transfer entrypoint is missing", () => {
+    const { result } = renderHook(() =>
+      useIsSwapTransaction([
+        { contractAddress: "0x1", entrypoint: "approve", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "multihop_swap", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "clear_minimum", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "clear", calldata: [] },
+      ]),
+    );
+    expect(result.current.isSwap).toBe(false);
+  });
+
+  it("returns false when multihop_swap entrypoint is missing", () => {
+    const { result } = renderHook(() =>
+      useIsSwapTransaction([
+        { contractAddress: "0x1", entrypoint: "transfer", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "other", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "clear_minimum", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "clear", calldata: [] },
+      ]),
+    );
+    expect(result.current.isSwap).toBe(false);
+  });
+
+  it("returns false when clear_minimum entrypoint is missing", () => {
+    const { result } = renderHook(() =>
+      useIsSwapTransaction([
+        { contractAddress: "0x1", entrypoint: "transfer", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "multihop_swap", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "other", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "clear", calldata: [] },
+      ]),
+    );
+    expect(result.current.isSwap).toBe(false);
+  });
+
+  it("returns false when clear entrypoint is missing", () => {
+    const { result } = renderHook(() =>
+      useIsSwapTransaction([
+        { contractAddress: "0x1", entrypoint: "transfer", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "multihop_swap", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "clear_minimum", calldata: [] },
+        { contractAddress: "0x1", entrypoint: "other", calldata: [] },
+      ]),
+    );
+    expect(result.current.isSwap).toBe(false);
+  });
+
+  it("returns true for SWAP_SINGLE", () => {
+    const { result } = renderHook(() => useIsSwapTransaction(SWAP_SINGLE));
+    expect(result.current.isSwap).toBe(true);
+  });
+
+  it("returns true for SWAP_MULTIPLE", () => {
+    const { result } = renderHook(() => useIsSwapTransaction(SWAP_MULTIPLE));
+    expect(result.current.isSwap).toBe(true);
+  });
+
+  it("returns true for LS2_PURCHASE_GAME (swap + additional calls)", () => {
+    const { result } = renderHook(() =>
+      useIsSwapTransaction(LS2_PURCHASE_GAME),
+    );
+    expect(result.current.isSwap).toBe(true);
+  });
+});
+
+describe("useSwapTransactions", () => {
+  it("returns correct defaults for empty transactions", () => {
+    const { result } = renderHook(() => useSwapTransactions([]));
+    expect(result.current.isSwap).toBe(false);
+    expect(result.current.swapMethodCount).toBe(0);
+    expect(result.current.additionalMethodCount).toBe(0);
+    expect(result.current.swapTransactions.selling).toHaveLength(0);
+    expect(result.current.swapTransactions.buying).toHaveLength(0);
+  });
+
+  describe("SWAP_SINGLE", () => {
+    it("is detected as a swap", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_SINGLE));
+      expect(result.current.isSwap).toBe(true);
+    });
+
+    it("counts 4 swap methods and 0 additional calls", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_SINGLE));
+      expect(result.current.swapMethodCount).toBe(4);
+      expect(result.current.additionalMethodCount).toBe(0);
+    });
+
+    it("has one selling token (the transferred token)", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_SINGLE));
+      expect(result.current.swapTransactions.selling).toHaveLength(1);
+      expect(result.current.swapTransactions.selling[0].address).toBe(
+        getChecksumAddress(
+          "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+        ),
+      );
+    });
+
+    it("has one buying token (from clear_minimum)", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_SINGLE));
+      expect(result.current.swapTransactions.buying).toHaveLength(1);
+      expect(result.current.swapTransactions.buying[0].address).toBe(
+        getChecksumAddress(
+          "0x016dea82a6588ca9fb7200125fa05631b1c1735a313e24afe9c90301e441a796",
+        ),
+      );
+    });
+
+    it("decodes selling amount from transfer calldata", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_SINGLE));
+      // transfer calldata: [recipient, amount_low="0x32a03ab37fef8ba51", amount_high="0x0"]
+      expect(result.current.swapTransactions.selling[0].amount).toBe(
+        BigInt("0x32a03ab37fef8ba51"),
+      );
+    });
+
+    it("decodes buying minimum from clear_minimum calldata", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_SINGLE));
+      // clear_minimum calldata: [token, minimum_low="0xa4de3d0e9ba40000", minimum_high="0x0"]
+      expect(result.current.swapTransactions.buying[0].amount).toBe(
+        BigInt("0xa4de3d0e9ba40000"),
+      );
+    });
+  });
+
+  describe("SWAP_MULTIPLE", () => {
+    it("is detected as a swap", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_MULTIPLE));
+      expect(result.current.isSwap).toBe(true);
+    });
+
+    it("counts 8 swap methods and 0 additional calls", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_MULTIPLE));
+      // 2 transfers + 2 multihop_swaps + 2 clear_minimums + 2 clears = 8
+      expect(result.current.swapMethodCount).toBe(8);
+      expect(result.current.additionalMethodCount).toBe(0);
+    });
+
+    it("aggregates selling amounts for the same token across both swaps", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_MULTIPLE));
+      // Both transfers use the same contractAddress, so they're merged into one entry
+      expect(result.current.swapTransactions.selling).toHaveLength(1);
+      expect(result.current.swapTransactions.selling[0].address).toBe(
+        getChecksumAddress(
+          "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
+        ),
+      );
+      expect(result.current.swapTransactions.selling[0].amount).toBe(
+        BigInt("0x176e9649d99dd740a") + BigInt("0x4f1eba34861ddd0"),
+      );
+    });
+
+    it("has two distinct buying tokens from the two clear_minimums", () => {
+      const { result } = renderHook(() => useSwapTransactions(SWAP_MULTIPLE));
+      expect(result.current.swapTransactions.buying).toHaveLength(2);
+      expect(result.current.swapTransactions.buying[0].address).toBe(
+        getChecksumAddress(
+          "0x01c3c8284d7eed443b42f47e764032a56eaf50a9079d67993b633930e3689814",
+        ),
+      );
+      expect(result.current.swapTransactions.buying[1].address).toBe(
+        getChecksumAddress(
+          "0x0103eafe79f8631932530cc687dfcdeb013c883a82619ebf81be393e2953a87a",
+        ),
+      );
+    });
+  });
+
+  describe("LS2_PURCHASE_GAME", () => {
+    it("is detected as a swap", () => {
+      const { result } = renderHook(() =>
+        useSwapTransactions(LS2_PURCHASE_GAME),
+      );
+      expect(result.current.isSwap).toBe(true);
+    });
+
+    it("counts 4 swap methods and 2 additional calls (approve + buy_game)", () => {
+      const { result } = renderHook(() =>
+        useSwapTransactions(LS2_PURCHASE_GAME),
+      );
+      expect(result.current.swapMethodCount).toBe(4);
+      expect(result.current.additionalMethodCount).toBe(2);
+    });
+
+    it("has one selling token", () => {
+      const { result } = renderHook(() =>
+        useSwapTransactions(LS2_PURCHASE_GAME),
+      );
+      expect(result.current.swapTransactions.selling).toHaveLength(1);
+      expect(result.current.swapTransactions.selling[0].address).toBe(
+        getChecksumAddress(
+          "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+        ),
+      );
+    });
+
+    it("has one buying token", () => {
+      const { result } = renderHook(() =>
+        useSwapTransactions(LS2_PURCHASE_GAME),
+      );
+      expect(result.current.swapTransactions.buying).toHaveLength(1);
+    });
+  });
+});

From 8daf5b0590a8b2611fe4baae3107d680dd2d96ed Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Tue, 3 Mar 2026 16:45:45 -0300
Subject: [PATCH 09/15] chore: unified confirm transaction layouts

---
 .../components/swap/AdvancedTransactions.tsx  | 130 -----------------
 .../src/components/swap/ConfirmSwap.tsx       |   7 +-
 .../transaction/ConfirmTransaction.tsx        |   2 +-
 .../transaction/TransactionSummary.tsx        | 138 ++++++++++++++++--
 4 files changed, 127 insertions(+), 150 deletions(-)
 delete mode 100644 packages/keychain/src/components/swap/AdvancedTransactions.tsx

diff --git a/packages/keychain/src/components/swap/AdvancedTransactions.tsx b/packages/keychain/src/components/swap/AdvancedTransactions.tsx
deleted file mode 100644
index 6abc73c1df..0000000000
--- a/packages/keychain/src/components/swap/AdvancedTransactions.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  CheckboxIcon,
-  GearIcon,
-  Thumbnail,
-} from "@cartridge/ui";
-import { cn } from "@cartridge/ui/utils";
-import { Call } from "starknet";
-import { humanizeString } from "@cartridge/controller";
-import { useState, PropsWithChildren } from "react";
-import { ContractLink } from "@/components/ContractLink";
-import { CallCardContents } from "../transaction/CallCard";
-
-interface AdvancedTransactionsProps {
-  transactions: Call[];
-  isExpanded?: boolean;
-  className?: string;
-}
-
-export function AdvancedTransactions({
-  transactions,
-  isExpanded = false,
-  className,
-}: AdvancedTransactionsProps) {
-  const [isOpened, setisOpened] = useState(isExpanded);
-
-  return (
-    <Accordion
-      type="single"
-      collapsible
-      className={cn(
-        "rounded border",
-        isOpened
-          ? "text-foreground-100 bg-background-200 border-transparent"
-          : "text-foreground-300 bg-transparent border-background-200",
-        className,
-      )}
-      value={isOpened ? "item" : ""}
-      onValueChange={(value) => setisOpened(value === "item")}
-    >
-      <AccordionItem value="item">
-        <AccordionTrigger
-          parentClassName="h-11 p-3"
-          className="flex items-center text-sm font-medium gap-1.5"
-          // color={cn(isOpened ? "text-foreground-100" : "text-foreground-300")}
-        >
-          <Thumbnail
-            variant="light"
-            size="sm"
-            icon={<GearIcon />}
-            centered={true}
-            className={cn(
-              isOpened
-                ? "text-foreground-100"
-                : "text-foreground-300 bg-background-200",
-            )}
-          />
-          <p>Advanced</p>
-        </AccordionTrigger>
-
-        <AccordionContent className="flex flex-col gap-3 px-3 pb-3 border-t border-background-100 pt-2">
-          {transactions.map((call) => (
-            <CollapsibleTransactionRow
-              key={`${call.contractAddress}-${call.entrypoint}`}
-              transaction={call}
-              enabled={true}
-            >
-              <CallCardContents call={call} className="mt-2" />
-              {/* <div className="flex flex-col gap-px rounded overflow-auto border border-background divide-y divide-solid divide-background">
-                <div className="flex flex-col p-3 gap-3 text-xs">
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-row items-center gap-2 text-foreground-300">
-                      <p className="font-medium text-xs">
-                        {humanizeString(call.entrypoint)}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div> */}
-            </CollapsibleTransactionRow>
-          ))}
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-
-interface CollapsibleTransactionProps extends PropsWithChildren {
-  transaction: Call;
-  enabled: boolean;
-}
-
-export function CollapsibleTransactionRow({
-  transaction,
-  children,
-}: CollapsibleTransactionProps) {
-  const [value, setValue] = useState("");
-
-  return (
-    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
-      <AccordionItem value={transaction.entrypoint} className="flex flex-col">
-        <AccordionTrigger
-          hideIcon
-          className="rounded-md text-foreground-100 w-full"
-        >
-          <div className="flex gap-1 py-1 w-full text-xs items-center">
-            <CheckboxIcon
-              variant={value ? "minus-line" : "plus-line"}
-              size="sm"
-            />
-            <h1 className="flex-grow text-foregroung-100">
-              {humanizeString(transaction.entrypoint)}
-            </h1>
-            <ContractLink
-              contractAddress={transaction.contractAddress}
-              className="text-foreground-400"
-            />
-          </div>
-        </AccordionTrigger>
-
-        <AccordionContent className="flex flex-col">
-          {children}
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index c420892a6a..ed4a0a3744 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -13,7 +13,6 @@ import { Call, FeeEstimate } from "starknet";
 import { ExecutionContainer } from "@/components/ExecutionContainer";
 import { useSwapTransactions } from "@/components/swap/swap";
 import { TokenSwapData, useTokenSwapData } from "@/hooks/token";
-import { AdvancedTransactions } from "./AdvancedTransactions";
 import placeholder from "/placeholder.svg?url";
 
 interface ConfirmSwapProps {
@@ -86,7 +85,7 @@ export function ConfirmSwap({
     >
       <LayoutContent>
         {!isSwap ? (
-          <TransactionSummary calls={transactions} />
+          <TransactionSummary calls={transactions} isExpanded />
         ) : (
           <>
             <TokenSummary title="Simulation Results" className="flex-none">
@@ -113,9 +112,7 @@ export function ConfirmSwap({
                 />
               ))}
             </TokenSummary>
-            {advancedVisible && (
-              <AdvancedTransactions transactions={transactions} />
-            )}
+            {advancedVisible && <TransactionSummary calls={transactions} />}
           </>
         )}
       </LayoutContent>
diff --git a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
index bd135cefa3..0e141ee580 100644
--- a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
+++ b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
@@ -169,7 +169,7 @@ export function ConfirmTransaction({
       onError={onError}
     >
       <LayoutContent>
-        <TransactionSummary calls={transactions} />
+        <TransactionSummary calls={transactions} isExpanded />
       </LayoutContent>
     </ExecutionContainer>
   );
diff --git a/packages/keychain/src/components/transaction/TransactionSummary.tsx b/packages/keychain/src/components/transaction/TransactionSummary.tsx
index 6fb5e5c97f..4421ad4c07 100644
--- a/packages/keychain/src/components/transaction/TransactionSummary.tsx
+++ b/packages/keychain/src/components/transaction/TransactionSummary.tsx
@@ -1,20 +1,130 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  CheckboxIcon,
+  GearIcon,
+  Thumbnail,
+} from "@cartridge/ui";
+import { cn } from "@cartridge/ui/utils";
 import { Call } from "starknet";
-import { CallCard } from "./CallCard";
+import { humanizeString } from "@cartridge/controller";
+import { useState, PropsWithChildren } from "react";
+import { ContractLink } from "@/components/ContractLink";
+import { CallCardContents } from "../transaction/CallCard";
+
+interface TransactionSummaryProps {
+  calls: Call[];
+  isExpanded?: boolean;
+  className?: string;
+}
+
+export function TransactionSummary({
+  calls,
+  isExpanded = false,
+  className,
+}: TransactionSummaryProps) {
+  const [isOpened, setisOpened] = useState(isExpanded);
 
-export function TransactionSummary({ calls }: { calls: Call[] }) {
   return (
-    <div className="flex flex-col gap-4">
-      {calls.map((c, i) => {
-        return (
-          <CallCard
-            key={i}
-            title="Contract"
-            // title={c?.meta?.name || "Contract"}
-            // icon={c?.meta?.icon}
-            call={c}
+    <Accordion
+      type="single"
+      collapsible
+      className={cn(
+        "rounded border",
+        isOpened
+          ? "text-foreground-100 bg-background-200 border-transparent"
+          : "text-foreground-300 bg-transparent border-background-200",
+        className,
+      )}
+      value={isOpened ? "item" : ""}
+      onValueChange={(value) => setisOpened(value === "item")}
+    >
+      <AccordionItem value="item">
+        <AccordionTrigger
+          parentClassName="h-11 p-3"
+          className="flex items-center text-sm font-medium gap-1.5"
+          // color={cn(isOpened ? "text-foreground-100" : "text-foreground-300")}
+        >
+          <Thumbnail
+            variant="light"
+            size="sm"
+            icon={<GearIcon />}
+            centered={true}
+            className={cn(
+              isOpened
+                ? "text-foreground-100"
+                : "text-foreground-300 bg-background-200",
+            )}
           />
-        );
-      })}
-    </div>
+          <p>Advanced</p>
+        </AccordionTrigger>
+
+        <AccordionContent className="flex flex-col gap-3 px-3 pb-3 border-t border-background-100 pt-2">
+          {calls.map((call) => (
+            <CollapsibleTransactionRow
+              key={`${call.contractAddress}-${call.entrypoint}`}
+              transaction={call}
+              enabled={true}
+            >
+              <CallCardContents call={call} className="mt-2" />
+              {/* <div className="flex flex-col gap-px rounded overflow-auto border border-background divide-y divide-solid divide-background">
+                <div className="flex flex-col p-3 gap-3 text-xs">
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-row items-center gap-2 text-foreground-300">
+                      <p className="font-medium text-xs">
+                        {humanizeString(call.entrypoint)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div> */}
+            </CollapsibleTransactionRow>
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+interface CollapsibleTransactionProps extends PropsWithChildren {
+  transaction: Call;
+  enabled: boolean;
+}
+
+export function CollapsibleTransactionRow({
+  transaction,
+  children,
+}: CollapsibleTransactionProps) {
+  const [value, setValue] = useState("");
+
+  return (
+    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
+      <AccordionItem value={transaction.entrypoint} className="flex flex-col">
+        <AccordionTrigger
+          hideIcon
+          className="rounded-md text-foreground-100 w-full"
+        >
+          <div className="flex gap-1 py-1 w-full text-xs items-center">
+            <CheckboxIcon
+              variant={value ? "minus-line" : "plus-line"}
+              size="sm"
+            />
+            <h1 className="flex-grow text-foregroung-100">
+              {humanizeString(transaction.entrypoint)}
+            </h1>
+            <ContractLink
+              contractAddress={transaction.contractAddress}
+              className="text-foreground-400"
+            />
+          </div>
+        </AccordionTrigger>
+
+        <AccordionContent className="flex flex-col">
+          {children}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   );
 }

From 8fe4fc160e24fac3542cab43f89485401cbcebb8 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Tue, 3 Mar 2026 17:09:19 -0300
Subject: [PATCH 10/15] chore: updated review purchase icon

---
 .../inventory/collection/collectible-purchase.tsx      | 10 ++--------
 .../inventory/collection/collection-purchase.tsx       | 10 ++--------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx b/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx
index f7ba3e07e1..86e94c6904 100644
--- a/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx
+++ b/packages/keychain/src/components/inventory/collection/collectible-purchase.tsx
@@ -3,7 +3,7 @@ import {
   LayoutContent,
   Skeleton,
   Empty,
-  TagIcon,
+  ShopIcon,
   Token,
   Thumbnail,
   ThumbnailCollectible,
@@ -357,13 +357,7 @@ export function CollectiblePurchase() {
           {buildTransactions ? (
             <ExecutionContainer
               title="Review Purchase"
-              icon={
-                <TagIcon
-                  variant="solid"
-                  size="lg"
-                  className="h-[30px] w-[30px]"
-                />
-              }
+              icon={<ShopIcon size="lg" className="h-[30px] w-[30px]" />}
               transactions={buildTransactions}
               onSubmit={onSubmitPurchase}
               onCancel={canGoBack ? goBack : closeModal}
diff --git a/packages/keychain/src/components/inventory/collection/collection-purchase.tsx b/packages/keychain/src/components/inventory/collection/collection-purchase.tsx
index 92a38e6a9a..8872fde3a3 100644
--- a/packages/keychain/src/components/inventory/collection/collection-purchase.tsx
+++ b/packages/keychain/src/components/inventory/collection/collection-purchase.tsx
@@ -3,7 +3,7 @@ import {
   LayoutContent,
   Skeleton,
   Empty,
-  TagIcon,
+  ShopIcon,
   Token,
   Thumbnail,
   ThumbnailCollectible,
@@ -344,13 +344,7 @@ export function CollectionPurchase() {
           {buildTransactions ? (
             <ExecutionContainer
               title="Review Purchase"
-              icon={
-                <TagIcon
-                  variant="solid"
-                  size="lg"
-                  className="h-[30px] w-[30px]"
-                />
-              }
+              icon={<ShopIcon size="lg" className="h-[30px] w-[30px]" />}
               transactions={buildTransactions}
               onSubmit={onSubmitPurchase}
               onCancel={canGoBack ? goBack : closeModal}

From e45434eb2f2da8d927b2a68a03ff9a0ce117d827 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Tue, 3 Mar 2026 18:50:17 -0300
Subject: [PATCH 11/15] fix: fixed accordion click border flash

---
 .../src/components/transaction/TransactionSummary.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/keychain/src/components/transaction/TransactionSummary.tsx b/packages/keychain/src/components/transaction/TransactionSummary.tsx
index 4421ad4c07..95dc1122cb 100644
--- a/packages/keychain/src/components/transaction/TransactionSummary.tsx
+++ b/packages/keychain/src/components/transaction/TransactionSummary.tsx
@@ -43,9 +43,12 @@ export function TransactionSummary({
     >
       <AccordionItem value="item">
         <AccordionTrigger
-          parentClassName="h-11 p-3"
-          className="flex items-center text-sm font-medium gap-1.5"
-          // color={cn(isOpened ? "text-foreground-100" : "text-foreground-300")}
+          parentClassName="h-11 p-3 transition-none"
+          className={cn(
+            "flex items-center text-sm font-medium gap-1.5",
+            isOpened ? "text-foreground-100" : "text-foreground-300",
+          )}
+          color={cn(isOpened ? "text-foreground-100" : "text-foreground-300")}
         >
           <Thumbnail
             variant="light"
@@ -104,6 +107,7 @@ export function CollapsibleTransactionRow({
       <AccordionItem value={transaction.entrypoint} className="flex flex-col">
         <AccordionTrigger
           hideIcon
+          parentClassName="transition-none"
           className="rounded-md text-foreground-100 w-full"
         >
           <div className="flex gap-1 py-1 w-full text-xs items-center">

From 7e633090ad866186d1ecbc5bee7b1f4ba9c30a94 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Wed, 4 Mar 2026 16:15:53 -0300
Subject: [PATCH 12/15] chore: scroll pane padding in confirmation screens

---
 packages/keychain/src/components/ExecutionContainer.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/keychain/src/components/ExecutionContainer.tsx b/packages/keychain/src/components/ExecutionContainer.tsx
index 6404d9f1fb..b9805e3fb2 100644
--- a/packages/keychain/src/components/ExecutionContainer.tsx
+++ b/packages/keychain/src/components/ExecutionContainer.tsx
@@ -159,9 +159,10 @@ export function ExecutionContainer({
         icon={icon}
         right={right}
         hideIcon={!icon}
+        className="pb-2"
       />
       {children}
-      <LayoutFooter>
+      <LayoutFooter className="pt-2">
         {(() => {
           switch (ctrlError?.code) {
             case ErrorCode.CartridgeControllerNotDeployed:

From 44e78186aab3951993a9866e86a69b95257bbf0d Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Wed, 4 Mar 2026 17:31:35 -0300
Subject: [PATCH 13/15] chore: fees tooltip refactor

---
 packages/keychain/src/components/FeesRow.tsx  | 175 ++++++++++--------
 .../src/components/swap/ConfirmSwap.tsx       |   2 +-
 2 files changed, 97 insertions(+), 80 deletions(-)

diff --git a/packages/keychain/src/components/FeesRow.tsx b/packages/keychain/src/components/FeesRow.tsx
index 9dc6474e4c..6721854762 100644
--- a/packages/keychain/src/components/FeesRow.tsx
+++ b/packages/keychain/src/components/FeesRow.tsx
@@ -9,100 +9,117 @@ import {
 } from "@cartridge/ui";
 import { cn } from "@cartridge/ui/utils";
 import { type Token } from "@/hooks/token";
+import React from "react";
 
 export type FeesRowProps = {
   label: string;
   amount: number;
   decimals?: number;
   usdValue?: number | string;
-  tooltipContents?: React.ReactNode;
   token: Token | undefined;
   isLoading?: boolean;
+  tooltipContents?: React.ReactNode;
   className?: string;
 };
 
-export function FeesRow({
-  label,
-  amount,
-  decimals,
-  usdValue,
-  tooltipContents,
-  token,
-  isLoading,
-  className,
-}: FeesRowProps) {
-  const amountColor =
-    token && token.balance.amount < amount ? "text-destructive" : "";
-  return (
-    <div
-      className={cn(
-        "flex gap-1 w-full items-center justify-between",
-        className,
-      )}
-    >
-      {isLoading || !token ? (
-        <>
-          <p className="text-sm font-medium text-foreground-400">{label}</p>
-          <div className="flex-1" />
-          <Spinner />
-        </>
-      ) : (
-        <>
-          <p className="text-sm font-medium text-foreground-400">{label}</p>
-          {tooltipContents && <FeesTooltip contents={tooltipContents} />}
-          <div className="flex-1" />
-          {!!usdValue && (
-            <p className="text-sm font-medium text-foreground-300">
-              {typeof usdValue === "string"
-                ? usdValue
-                : `$${usdValue.toFixed(2)}`}
-            </p>
-          )}
-          <Thumbnail
-            icon={token.metadata.image || ""}
-            size="sm"
-            className="ml-1 bg-transparent"
-          />
-          {!!amount && (
+export function FeesRow(props: FeesRowProps) {
+  const { isLoading, tooltipContents } = props;
+  if (tooltipContents && !isLoading) {
+    return (
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <FeesRowContents {...props} />
+          </TooltipTrigger>
+          <TooltipContent
+            className="px-3 py-2 bg-spacer-100 border border-background-150 rounded select-none"
+            style={{ boxShadow: "0 4px 4px 0 rgba(0, 0, 0, 0.25)" }}
+            side="top"
+            sideOffset={20}
+            align="start"
+            alignOffset={-11}
+          >
+            {tooltipContents}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+  return <FeesRowContents {...props} />;
+}
+
+const FeesRowContents = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & FeesRowProps
+>(
+  (
+    {
+      label,
+      amount,
+      decimals,
+      usdValue,
+      token,
+      isLoading,
+      tooltipContents,
+      className,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const amountColor =
+      token && token.balance.amount < amount ? "text-destructive" : "";
+    return (
+      <div
+        {...props} // required by TooltipTrigger
+        ref={forwardedRef} // required by TooltipTrigger
+        className={cn(
+          "flex gap-1 w-full items-center justify-between cursor-default",
+          className,
+        )}
+      >
+        {isLoading || !token ? (
+          <>
+            <p className="text-sm text-foreground-300">{label}</p>
+            <div className="flex-1" />
+            <Spinner />
+          </>
+        ) : (
+          <>
+            <p className="text-sm text-foreground-300">{label}</p>
+            {tooltipContents && (
+              <InfoIcon size="sm" className="text-foreground-300" />
+            )}
+            <div className="flex-1" />
+            {!!usdValue && (
+              <p className="text-sm text-foreground-300">
+                {typeof usdValue === "string"
+                  ? usdValue
+                  : `$${usdValue.toFixed(2)}`}
+              </p>
+            )}
+            <Thumbnail
+              icon={token.metadata.image || ""}
+              size="sm"
+              className="ml-1 bg-transparent"
+            />
+            {!!amount && (
+              <p className={cn("text-sm text-foreground-100", amountColor)}>
+                {`${amount.toLocaleString(undefined, {
+                  maximumFractionDigits: decimals ?? 2,
+                })}`}
+              </p>
+            )}
             <p
               className={cn(
                 "text-sm font-medium text-foreground-100",
                 amountColor,
               )}
             >
-              {`${amount.toLocaleString(undefined, {
-                maximumFractionDigits: decimals ?? 2,
-              })}`}
+              {token.metadata.symbol}
             </p>
-          )}
-          <p
-            className={cn(
-              "text-sm font-medium text-foreground-100",
-              amountColor,
-            )}
-          >
-            {token.metadata.symbol}
-          </p>
-        </>
-      )}
-    </div>
-  );
-}
-
-const FeesTooltip = ({ contents }: { contents: React.ReactNode }) => {
-  return (
-    <TooltipProvider>
-      <Tooltip delayDuration={0}>
-        <TooltipTrigger asChild>
-          <InfoIcon size="xs" className="text-foreground-400" />
-        </TooltipTrigger>
-        <TooltipContent
-          className="px-3 py-2 bg-spacer-100 border border-background-150 rounded select-none"
-          side="top"
-        >
-          {contents}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-};
+          </>
+        )}
+      </div>
+    );
+  },
+);
diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index ed4a0a3744..83546acdda 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -76,7 +76,7 @@ export function ConfirmSwap({
         ) : undefined
       }
       additionalFees={sellingSwapData.map((token) => ({
-        label: "Cost",
+        label: "Total",
         contractAddress: token.address,
         amount: token?.amount ?? 0,
         usdValue: formatValue(token),

From d8cb65f7fe70490c030cb4f53ef6cae5c4836955 Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Mon, 9 Mar 2026 17:33:32 -0300
Subject: [PATCH 14/15] chore: updated swap header message

---
 packages/keychain/src/components/swap/ConfirmSwap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index 83546acdda..a23eed2e0c 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -88,7 +88,7 @@ export function ConfirmSwap({
           <TransactionSummary calls={transactions} isExpanded />
         ) : (
           <>
-            <TokenSummary title="Simulation Results" className="flex-none">
+            <TokenSummary title="Actual values may vary" className="flex-none">
               {sellingSwapData.map((token) => (
                 <TokenCard
                   key={token.address}

From 2fea93bb14cc9d0c77580e2be97e078ce7fc94ce Mon Sep 17 00:00:00 2001
From: RM3 <roger@studioavante.com>
Date: Tue, 17 Mar 2026 11:42:40 -0300
Subject: [PATCH 15/15] fix: fixed controller closing in nextjs example

---
 examples/next/src/components/Swap.tsx         | 40 ++++++++-----------
 .../src/components/swap/ConfirmSwap.tsx       |  6 +--
 .../transaction/ConfirmTransaction.tsx        |  2 +-
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/examples/next/src/components/Swap.tsx b/examples/next/src/components/Swap.tsx
index 51afcd11f7..eea723be41 100644
--- a/examples/next/src/components/Swap.tsx
+++ b/examples/next/src/components/Swap.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useCallback } from "react";
+import { Call } from "starknet";
 import { useAccount } from "@starknet-react/core";
 import ControllerConnector from "@cartridge/connector/controller";
 import { Button } from "@cartridge/ui";
@@ -8,36 +10,28 @@ export function Swap() {
   const { account, connector } = useAccount();
   const ctrlConnector = connector as unknown as ControllerConnector;
 
-  if (!account) {
-    return null;
-  }
+  const execute = useCallback(
+    (transactions: Call[]) => {
+      if (account) {
+        account.execute(transactions);
+      } else {
+        // this is causing the controller to close on validation error
+        ctrlConnector.controller.openExecute(transactions);
+      }
+    },
+    [account, ctrlConnector],
+  );
 
   return (
     <div className="flex flex-col gap-4">
       <h2>Token Swaps</h2>
       <div className="flex flex-wrap gap-1">
-        <Button
-          onClick={() => ctrlConnector.controller.openExecute(SWAP_SINGLE)}
-        >
-          Swap Single
-        </Button>
-        <Button
-          onClick={() => ctrlConnector.controller.openExecute(SWAP_MULTIPLE)}
-        >
-          Swap Multiple
-        </Button>
-        <Button
-          onClick={() =>
-            ctrlConnector.controller.openExecute(LS2_PURCHASE_GAME)
-          }
-        >
+        <Button onClick={() => execute(SWAP_SINGLE)}>Swap Single</Button>
+        <Button onClick={() => execute(SWAP_MULTIPLE)}>Swap Multiple</Button>
+        <Button onClick={() => execute(LS2_PURCHASE_GAME)}>
           LS2 Purchase Game
         </Button>
-        <Button
-          onClick={() =>
-            ctrlConnector.controller.openExecute(LS2_PURCHASE_GAME_ERROR)
-          }
-        >
+        <Button onClick={() => execute(LS2_PURCHASE_GAME_ERROR)}>
           LS2 Error
         </Button>
       </div>
diff --git a/packages/keychain/src/components/swap/ConfirmSwap.tsx b/packages/keychain/src/components/swap/ConfirmSwap.tsx
index a23eed2e0c..296f0ae8af 100644
--- a/packages/keychain/src/components/swap/ConfirmSwap.tsx
+++ b/packages/keychain/src/components/swap/ConfirmSwap.tsx
@@ -19,7 +19,7 @@ interface ConfirmSwapProps {
   onSubmit: (maxFee?: FeeEstimate) => Promise<void>;
   onError?: (error: ControllerError) => void;
   transactions: Call[];
-  error?: ControllerError;
+  executionError?: ControllerError;
   origin: string;
 }
 
@@ -27,7 +27,7 @@ export function ConfirmSwap({
   onSubmit,
   onError,
   transactions,
-  error,
+  executionError,
   origin,
 }: ConfirmSwapProps) {
   const [advancedVisible, setAdvancedVisible] = useState(false);
@@ -58,8 +58,8 @@ export function ConfirmSwap({
       icon={<TransferIcon />}
       title={"Review Swap"}
       description={origin}
-      executionError={error}
       transactions={transactions}
+      executionError={executionError}
       onSubmit={onSubmit}
       onError={onError}
       buttonText={`Swap ${additionalMethodCount > 0 ? `+ ${additionalMethodCount}` : ""}`}
diff --git a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
index 0e141ee580..6dcd5b62e6 100644
--- a/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
+++ b/packages/keychain/src/components/transaction/ConfirmTransaction.tsx
@@ -103,7 +103,7 @@ export function ConfirmTransaction({
         onSubmit={onSubmit}
         onError={onError}
         transactions={transactions}
-        error={error || executionError}
+        executionError={error || executionError}
         origin={origin}
       />
     );