feat: detect swap for LS2, avnu

examples/next/src/components/Swap.tsx

@@ -22,12 +22,19 @@ export function Swap() {
     [account, ctrlConnector],
   );
 
+  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={() => execute(SWAP_SINGLE)}>Swap Single</Button>
-        <Button onClick={() => execute(SWAP_MULTIPLE)}>Swap Multiple</Button>
+        <Button onClick={() => execute(AVNU_SWAP_SINGLE)}>Avnu</Button>
+        <Button onClick={() => execute(EKUBO_SWAP_SINGLE)}>Ekubo</Button>
+        <Button onClick={() => execute(EKUBO_SWAP_MULTIPLE)}>
+          Ekubo Multi
+        </Button>
         <Button onClick={() => execute(LS2_PURCHASE_GAME)}>
           LS2 Purchase Game
         </Button>
@@ -39,7 +46,50 @@ export function Swap() {
   );
 }
 
-const SWAP_SINGLE = [
+const AVNU_SWAP_SINGLE = [
+  {
+    contractAddress:
+      "0x124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+    entrypoint: "approve",
+    calldata: [
+      "0x4270219d365d6b017231b52e92b3fb5d7c8378b05e9abc97724537a80e93b0f",
+      "0x8ac7230489e80000",
+      "0x0",
+    ],
+  },
+  {
+    contractAddress:
+      "0x4270219d365d6b017231b52e92b3fb5d7c8378b05e9abc97724537a80e93b0f",
+    entrypoint: "multi_route_swap",
+    calldata: [
+      "0x124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x8ac7230489e80000",
+      "0x0",
+      "0x4718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+      "0x1c7af15aad8a1b00",
+      "0x0",
+      "0x1c73a6df73828b19",
+      "0x0",
+      "0x76a3565794db7894484718be7f51ad5b2e76605e22722887c1260e2451ad945",
+      "0x0",
+      "0x0",
+      "0x1",
+      "0x124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x4718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+      "0x5dd3d2f4429af886cd1a3b08289dbcea99a294197e9eb43b0e0325b4b",
+      "0xe8d4a51000",
+      "0x6",
+      "0x124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
+      "0x4718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+      "0x28f5c28f5c28f5c28f5c28f5c28f5c2",
+      "0x4d5a",
+      "0x0",
+      "0xa26ea81948000000000000000000",
+    ],
+  },
+];
+
+const EKUBO_SWAP_SINGLE = [
   {
     contractAddress:
       "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
@@ -97,7 +147,7 @@ const SWAP_SINGLE = [
   },
 ];
 
-const SWAP_MULTIPLE = [
+const EKUBO_SWAP_MULTIPLE = [
   {
     contractAddress:
       "0x0124aeb495b947201f5faC96fD1138E326AD86195B98df6DEc9009158A533B49",
@@ -217,7 +267,7 @@ const LS2_PURCHASE_GAME = [
     entrypoint: "transfer",
     calldata: [
       "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
-      "0x5bbb37da193af4ba9",
+      "0x155ee7c39a3d69a76",
       "0x0",
     ],
   },
@@ -289,7 +339,7 @@ const LS2_PURCHASE_GAME_ERROR = [
     entrypoint: "transfer",
     calldata: [
       "0x0199741822c2dc722f6f605204f35e56dbc23bceed54818168c4c49e4fb8737e",
-      "0x5bbb37da193af4ba90000000",
+      "0x5bbb37d193af4ba",
       "0x0",
     ],
   },

packages/keychain/src/components/ExecutionContainer.tsx

@@ -10,9 +10,10 @@ import {
   HeaderInner,
   type HeaderProps,
   LayoutFooter,
+  VerifiedIcon,
 } from "@cartridge/ui";
 import { isEqual } from "@/utils";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createDeployUrl } from "@/utils/connection/deploy";
 import { Fees, FeesData } from "@/components/Fees";
 
@@ -45,7 +46,7 @@ export function ExecutionContainer({
   children,
 }: ExecutionContainerProps &
   Pick<HeaderProps, "title" | "description" | "icon">) {
-  const { controller } = useConnection();
+  const { controller, policies } = useConnection();
   const { navigate } = useNavigation();
   const [maxFee, setMaxFee] = useState<FeeEstimate | undefined>();
   const [ctrlError, setCtrlError] = useState<ControllerError | undefined>(
@@ -151,11 +152,28 @@ export function ExecutionContainer({
     }
   }, [ctaState, ctrlError, controller, navigate, onDeploy, resetState]);
 
+  const isVerified = useMemo(
+    () =>
+      typeof description === "string" && description.startsWith("http")
+        ? policies?.verified === true
+        : undefined,
+    [policies, description],
+  );
+
   return (
     <>
       <HeaderInner
         title={title}
-        description={description}
+        description={
+          isVerified === true ? (
+            <div className="flex items-center gap-1">
+              <VerifiedIcon size="xs" />
+              {description}
+            </div>
+          ) : (
+            description
+          )
+        }
         icon={icon}
         right={right}
         hideIcon={!icon}

packages/keychain/src/components/Fees.tsx

@@ -76,7 +76,7 @@ export function Fees({
         />
       )}
       {ctrlError}
-      {(displayFees || additionalFees?.length !== 0) && (
+      {(displayFees || (additionalFees && additionalFees.length > 0)) && (
         <div
           className={cn(
             "w-full rounded pt-2",

packages/keychain/src/components/inventory/collection/footer.tsx

@@ -79,7 +79,7 @@ export function usePurchaseFeesData({
   );
 
   return {
-    label: "Total",
+    label: "Cost",
     contractAddress: token?.metadata.address ?? "0x0",
     amount: totalPrice,
     decimals: feeDecimals,

packages/keychain/src/components/purchasenew/checkout/onchain/selector.tsx

@@ -15,11 +15,12 @@ export function WalletSelector({
 }: WalletSelectorProps) {
   return (
     <div
-      className="flex justify-between border border-background-200 bg-[#181C19] rounded-[4px] text-xs text-foreground-300 p-2 transition-colors cursor-pointer hover:bg-background-200"
+      className="flex h-[40px] justify-between border border-background-200 bg-[#181C19] rounded-[4px] text-xs text-foreground-300 p-2 transition-colors cursor-pointer hover:bg-background-200"
       onClick={onClick}
     >
       <div className="flex gap-2">
-        {walletIcon} Purchase with {walletName}{" "}
+        <span className="m-auto">{walletIcon}</span>
+        <span className="m-auto text-sm">Purchase with {walletName}</span>
         {bridgeFrom ? `(${bridgeFrom})` : ""}
       </div>
       <ListIcon size="xs" variant="solid" />

packages/keychain/src/components/purchasenew/starterpack/starterpack.tsx

@@ -293,13 +293,14 @@ export function OnchainStarterPackInner({
         )}
 
         <div
-          className={`flex justify-between border border-background-200 bg-[#181C19] rounded-[4px] text-xs text-foreground-300 p-2 transition-colors ${
+          className={`flex h-[40px] justify-between border border-background-200 bg-[#181C19] rounded-[4px] text-xs text-foreground-300 p-2 transition-colors ${
             !disableActions ? "cursor-pointer hover:bg-background-200" : ""
           }`}
           onClick={onWalletSelect}
         >
           <div className="flex gap-2">
-            {wallet.subIcon} Purchase with {wallet.name}
+            <span className="m-auto">{wallet.subIcon}</span>
+            <span className="m-auto text-sm">Purchase with {wallet.name}</span>
           </div>
           <ListIcon size="xs" variant="solid" />
         </div>

packages/keychain/src/components/swap/ConfirmSwap.tsx

@@ -1,7 +1,4 @@
-import { useState } from "react";
 import {
-  Button,
-  GearIcon,
   LayoutContent,
   TokenCard,
   TokenSummary,
@@ -30,15 +27,12 @@ export function ConfirmSwap({
   executionError,
   origin,
 }: ConfirmSwapProps) {
-  const [advancedVisible, setAdvancedVisible] = useState(false);
-
-  const { isSwap, swapTransactions, additionalMethodCount } =
-    useSwapTransactions(transactions);
+  const { isSwap, swapTransfers } = useSwapTransactions(transactions);
   const { tokenSwapData: sellingSwapData } = useTokenSwapData(
-    swapTransactions.selling,
+    swapTransfers.selling,
   );
   const { tokenSwapData: buyingSwapData } = useTokenSwapData(
-    swapTransactions.buying,
+    swapTransfers.buying,
   );
 
   const formatAmount = (token: TokenSwapData) => {
@@ -62,21 +56,9 @@ export function ConfirmSwap({
       executionError={executionError}
       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
-      }
+      buttonText="Swap"
       additionalFees={sellingSwapData.map((token) => ({
-        label: "Total",
+        label: "Cost",
         contractAddress: token.address,
         amount: token?.amount ?? 0,
         usdValue: formatValue(token),
@@ -88,31 +70,41 @@ export function ConfirmSwap({
           <TransactionSummary calls={transactions} isExpanded />
         ) : (
           <>
-            <TokenSummary title="Actual values may vary" className="flex-none">
+            <TokenSummary title="Simulation Results" className="flex-none">
               {sellingSwapData.map((token) => (
                 <TokenCard
                   key={token.address}
-                  image={token.image || placeholder}
                   title={token.name}
+                  image={token.image || placeholder}
+                  squaredImage={!token.rounded}
                   amount={formatAmount(token)}
-                  value={formatValue(token)}
+                  value={
+                    typeof token.value === "number"
+                      ? formatValue(token)
+                      : undefined
+                  }
                   clickable={false}
                   decreasing
                 />
               ))}
               {buyingSwapData.map((token) => (
                 <TokenCard
                   key={token.address}
-                  image={token.image || placeholder}
                   title={token.name}
+                  image={token.image || placeholder}
+                  squaredImage={!token.rounded}
                   amount={formatAmount(token)}
-                  value={formatValue(token)}
+                  value={
+                    typeof token.value === "number"
+                      ? formatValue(token)
+                      : undefined
+                  }
                   clickable={false}
                   increasing
                 />
               ))}
             </TokenSummary>
-            {advancedVisible && <TransactionSummary calls={transactions} />}
+            <TransactionSummary calls={transactions} />
           </>
         )}
       </LayoutContent>