+ {isLoading || !token ? (
+ <>
+
{label}
+
+
+
+ ) : (
+ <>
+
{label}
+ {tooltipContents && (
+
+ )}
+
+ {!!usdValue && (
+
+ {typeof usdValue === "string"
+ ? usdValue
+ : `$${usdValue.toFixed(2)}`}
+
+ )}
+
+ {!!amount && (
+
+ {`${amount.toLocaleString(undefined, {
+ maximumFractionDigits: decimals ?? 2,
+ })}`}
+
+ )}
+
+ {token.metadata.symbol}
+
+
+ )}
+
- {isLoading || !token ? (
-
- ) : (
- <>
-
-
{label}
- {tooltipContents &&
}
-
- {!!usdValue && (
-
- {typeof usdValue === "string"
- ? usdValue
- : `$${usdValue.toFixed(2)}`}
-
- )}
- {!!totalValue && (
-
- {`${totalValue.toLocaleString(undefined, {
- maximumFractionDigits: decimals ?? 2,
- })}`}
-
- )}
-
-
-
- )}
-
-
-
({
- name: args.name,
- amount: args.finalPrice.toFixed(fixedValue),
- }))}
- />
) : 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..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,
@@ -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 ? (
@@ -333,17 +344,12 @@ export function CollectionPurchase() {
{buildTransactions ? (
- }
+ icon={
}
transactions={buildTransactions}
onSubmit={onSubmitPurchase}
onCancel={canGoBack ? goBack : closeModal}
buttonText="Confirm"
+ additionalFees={[feesData]}
>
-
-
({
- name: args.name,
- amount: args.finalPrice.toFixed(fixedValue),
- }))}
- />
) : 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 (
-
-
- {orders.map((order, i) => (
+ const tooltipContents = useMemo(
+ () => (
+
+
+ {orders.map((order, i) => (
+
+ {order.name}
+
+ {order.amount} {token?.metadata.symbol}
+
+
+ ))}
+
+
+
+ {fees
+ .filter((fee) => fee.amount > 0)
+ .map((fee) => (
-
{order.name}
-
- {order.amount} {token.metadata.symbol}
-
+ {fee.label}
+
+
+ {fee.amount.toLocaleString(undefined, {
+ maximumFractionDigits: feeDecimals,
+ })}
+
+ {token?.metadata.symbol}
+ ({fee.percentage.toFixed(2)}%)
+
))}
-
-
-
- {fees
- .filter((fee) => fee.amount > 0)
- .map((fee) => (
-
- {fee.label}
-
-
- {fee.amount.toLocaleString(undefined, {
- maximumFractionDigits: feeDecimals,
- })}
-
- {token.metadata.symbol}
- ({fee.percentage.toFixed(2)}%)
-
-
- ))}
-
- }
- />
+
-
+
{humanizeString(call.entrypoint)}
-
-
- Contract
-
- {explorerLink}
-
-
-
-
- Entrypoint
-
-
-
- {call.entrypoint}
-
-
-
-
- {call.calldata && (
-
-
- Calldata
-
-
- {Array.isArray(call.calldata)
- ? call.calldata.map((data, i) => (
-
- ))
- : Object.entries(call.calldata).map(
- ([key, value], i) => (
-
- ),
- )}
-
-
- )}
-
+
+
+
+
Entrypoint
+
+
+ {call.entrypoint}
+
+
+
+
+ {call.calldata && (
+ <>
+
Calldata
+
+ {Array.isArray(call.calldata)
+ ? call.calldata.map((data, i) => (
+
+ ))
+ : Object.entries(call.calldata).map(([key, value], i) => (
+
+ ))}
+
+
+ )}
+
- {calls.map((c, i) => {
- return (
-
setisOpened(value === "item")}
+ >
+
+
+ }
+ centered={true}
+ className={cn(
+ isOpened
+ ? "text-foreground-100"
+ : "text-foreground-300 bg-background-200",
+ )}
/>
- );
- })}
- Advanced
+
+
+
+ {calls.map((call) => (
+
+
+ {/*
+
+
+
+
+ {humanizeString(call.entrypoint)}
+
+
+
+
+
+
+
+ {humanizeString(transaction.entrypoint)}
+
+
+
+
+
+
+ {children}
+
+
+
);
}
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(
+ (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(erc20Abi, "ERC20", "transfer", args);
+ },
+ [decodeInputs],
+ );
+
+ const decodeMultihopSwapInputs = useCallback(
+ (args: string[]) => {
+ return decodeInputs(
+ ekuboRouterAbi,
+ "ekubo::router::IRouter",
+ "multihop_swap",
+ args,
+ );
+ },
+ [decodeInputs],
+ );
+
+ const decodeClearMinimumInputs = useCallback(
+ (args: string[]) => {
+ return decodeInputs(
+ ekuboRouterAbi,
+ "ekubo::components::clear::IClear",
+ "clear_minimum",
+ args,
+ );
+ },
+ [decodeInputs],
+ );
+
+ const decodeClearInputs = useCallback(
+ (args: string[]) => {
+ return decodeInputs(
+ 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 33e9b80041..076ac45624 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,60 @@ export function useToken({
status,
};
}
+
+export type TokenSwap = {
+ address: string;
+ amount: bigint;
+};
+
+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) => BigInt(m.l2_token_address) === BigInt(token.address),
+ );
+ const price = priceData?.priceByAddresses.find(
+ (p) => BigInt(p.base) === BigInt(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 };
+}
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 = {
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