feat: sync staging → main

Signed-off-by: Griko Nibras <[email protected]>

package.json

@@ -55,7 +55,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/nextjs": "^7.98.0",
-    "@skip-router/core": "1.2.8",
+    "@skip-router/core": "1.2.9",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/query-sync-storage-persister": "^5.17.19",
     "@tanstack/react-query": "^5.17.19",

src/components/AssetInput.tsx

@@ -1,9 +1,10 @@
 import { BackspaceIcon } from "@heroicons/react/20/solid";
+import { Asset } from "@skip-router/core";
 import { BigNumber } from "bignumber.js";
 import { formatUnits } from "ethers";
 import { MouseEventHandler, useMemo } from "react";
 
-import { AssetWithMetadata, useAssets } from "@/context/assets";
+import { useAssets } from "@/context/assets";
 import { useAnyDisclosureOpen } from "@/context/disclosures";
 import { useAccount } from "@/hooks/useAccount";
 import { useBalancesByChain } from "@/hooks/useBalancesByChain";
@@ -23,8 +24,8 @@ interface Props {
   diffPercentage?: number;
   onAmountChange?: (amount: string) => void;
   onAmountMax?: MouseEventHandler<HTMLButtonElement>;
-  asset?: AssetWithMetadata;
-  onAssetChange?: (asset: AssetWithMetadata) => void;
+  asset?: Asset;
+  onAssetChange?: (asset: Asset) => void;
   chain?: Chain;
   onChainChange?: (chain: Chain) => void;
   chains: Chain[];

src/components/AssetSelect/AssetSelectContent.tsx

@@ -1,17 +1,17 @@
 import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { Asset } from "@skip-router/core";
 import { formatUnits, toBigInt } from "ethers";
 import { matchSorter } from "match-sorter";
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import { AssetWithMetadata } from "@/context/assets";
 import { formatMaxFraction } from "@/utils/intl";
 import { cn } from "@/utils/ui";
 
 interface Props {
-  assets?: AssetWithMetadata[];
+  assets?: Asset[];
   balances: Record<string, string>;
-  onChange?: (asset: AssetWithMetadata) => void;
+  onChange?: (asset: Asset) => void;
   onClose: () => void;
   showChainInfo?: boolean;
 }
@@ -110,7 +110,7 @@ function AssetSelectContent({ assets = [], balances, onChange, onClose, showChai
           ))}
         </ScrollArea.Viewport>
         <ScrollArea.Scrollbar
-          className="duration-[160ms] z-20 flex touch-none select-none py-4 transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
+          className="z-20 flex touch-none select-none py-4 transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
           orientation="vertical"
         >
           <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />

src/components/AssetSelect/index.tsx

@@ -1,17 +1,17 @@
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { Asset } from "@skip-router/core";
 import { useState } from "react";
 
 import { Dialog, DialogContent, DialogTrigger } from "@/components/Dialog";
-import { AssetWithMetadata } from "@/context/assets";
 import { cn } from "@/utils/ui";
 
 import AssetSelectContent from "./AssetSelectContent";
 
 interface Props {
-  asset?: AssetWithMetadata;
-  assets?: AssetWithMetadata[];
+  asset?: Asset;
+  assets?: Asset[];
   balances?: Record<string, string>;
-  onChange?: (asset: AssetWithMetadata) => void;
+  onChange?: (asset: Asset) => void;
   showChainInfo?: boolean;
 }
 

src/components/ChainSelect/ChainSelectContent.tsx

@@ -99,7 +99,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
             ))}
           </ScrollArea.Viewport>
           <ScrollArea.Scrollbar
-            className="duration-[160ms] z-20 flex touch-none select-none py-4 transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
+            className="z-20 flex touch-none select-none py-4 transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
             orientation="vertical"
           >
             <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />

src/components/ConversionRate.tsx

@@ -1,10 +1,9 @@
+import { Asset } from "@skip-router/core";
 import { ReactNode, useCallback, useMemo, useState } from "react";
 
-import { AssetWithMetadata } from "@/context/assets";
-
 export interface Props {
-  srcAsset: AssetWithMetadata;
-  destAsset: AssetWithMetadata;
+  srcAsset: Asset;
+  destAsset: Asset;
   amountIn: string;
   amountOut: string;
   defaultDirection?: ConvDirection;
@@ -13,8 +12,8 @@ export interface Props {
 }
 
 interface RenderArgs {
-  left: AssetWithMetadata;
-  right: AssetWithMetadata;
+  left: Asset;
+  right: Asset;
   conversion: number;
   toggle: () => void;
 }

src/components/Footer.tsx

@@ -24,7 +24,7 @@ export function Footer() {
           "bottom-0 right-4 sm:fixed",
           "group items-center gap-2 px-4 py-2 max-sm:w-full max-sm:justify-center sm:rounded-t-lg sm:shadow-xl",
           "bg-white text-[#FF486E] hover:bg-red-50 sm:hover:pb-3 sm:active:pb-2.5",
-          "ease-[cubic-bezier(0.08,0.82,0.17,1)] transition-[background,padding,transform] duration-500",
+          "transition-[background,padding,transform] duration-500",
           "sm:data-[open=false]:translate-y-0 sm:data-[open=true]:translate-y-full",
         )}
         onClick={() => open({ closeAll: true })}
@@ -33,6 +33,11 @@ export function Footer() {
         <ContactIcon className="h-4 w-4" />
         <span>Contact Us</span>
       </button>
+      <style jsx>{`
+        button {
+          transition-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+        }
+      `}</style>
     </footer>
   );
 }

src/components/HistoryDialog/index.tsx

@@ -65,7 +65,7 @@ export const HistoryDialog = () => {
               </HistoryList.Root>
             </ScrollArea.Viewport>
             <ScrollArea.Scrollbar
-              className="duration-[160ms] z-20 flex touch-none select-none transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
+              className="z-20 flex touch-none select-none transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
               orientation="vertical"
             >
               <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />

src/components/RouteDisplay.tsx

@@ -100,9 +100,10 @@ function TransferStep({ action, actions, id, statusData }: TransferStepProps) {
   const { data: destinationChain } = useChainByID(action.destinationChain);
 
   // format: operationType-<operationTypeCount>-<operationIndex>
-  const operationCount = Number(id.split("-")[1]);
+  const operationTypeCount = Number(id.split("-")[1]);
   const operationIndex = Number(id.split("-")[2]);
-  const transfer = statusData?.transferSequence[operationCount];
+  const isFirstOpSwap = actions[0]?.type === "SWAP";
+  const transferStatus = statusData?.transferSequence[operationTypeCount];
   const isNextOpSwap =
     actions
       // We can assume that the swap operation by the previous transfer
@@ -111,7 +112,25 @@ function TransferStep({ action, actions, id, statusData }: TransferStepProps) {
 
   // We can assume that the transfer is successful when the state is TRANSFER_SUCCESS or TRANSFER_RECEIVED
   const renderTransferState = useMemo(() => {
-    switch (transfer?.state) {
+    if (isFirstOpSwap) {
+      if (transferStatus?.state === "TRANSFER_FAILURE") {
+        return (
+          <div className="rounded bg-white">
+            <XCircleIcon className="h-6 w-6 text-red-400" />
+          </div>
+        );
+      }
+      if (transferStatus?.state === "TRANSFER_SUCCESS") {
+        return (
+          <div className="rounded bg-white">
+            <CheckCircleIcon className="h-6 w-6 text-green-400" />
+          </div>
+        );
+      }
+
+      return <div className="h-2 w-2 rounded-full bg-neutral-200" />;
+    }
+    switch (transferStatus?.state) {
       case "TRANSFER_SUCCESS":
         return (
           <div className="rounded bg-white">
@@ -140,19 +159,19 @@ function TransferStep({ action, actions, id, statusData }: TransferStepProps) {
       default:
         return <div className="h-2 w-2 rounded-full bg-neutral-200" />;
     }
-  }, [transfer?.state]);
+  }, [isFirstOpSwap, transferStatus?.state]);
 
   const explorerLink = useMemo(() => {
     const packetTx = (() => {
-      if (operationIndex === 0) return transfer?.txs.sendTx;
-      if (isNextOpSwap) return transfer?.txs.sendTx;
-      return transfer?.txs.receiveTx;
+      if (operationIndex === 0) return transferStatus?.txs.sendTx;
+      if (isNextOpSwap) return transferStatus?.txs.sendTx;
+      return transferStatus?.txs.receiveTx;
     })();
     if (!packetTx?.explorerLink) {
       return null;
     }
     return makeExplorerLink(packetTx.explorerLink);
-  }, [isNextOpSwap, operationIndex, transfer?.txs.receiveTx, transfer?.txs.sendTx]);
+  }, [isNextOpSwap, operationIndex, transferStatus?.txs.receiveTx, transferStatus?.txs.sendTx]);
 
   const { getAsset } = useAssets();
 
@@ -279,17 +298,45 @@ function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
 
   // format: operationType-<operationTypeCount>-<operationIndex>
   const operationIndex = Number(id.split("-")[2]);
-  const operationCount = Number(
+  const operationTypeCount = Number(id.split("-")[1]);
+  const isSwapFirstStep = operationIndex === 0 && operationTypeCount === 0;
+
+  const sequenceIndex = Number(
     actions
       // We can assume that the swap operation by the previous transfer
       .find((x) => Number(x.id.split("-")[2]) === operationIndex - 1)
       ?.id.split("-")[1],
   );
-  const swap = statusData?.transferSequence[operationCount];
+  const swapStatus = statusData?.transferSequence[isSwapFirstStep ? 0 : sequenceIndex];
 
   // as for swap operations, we can assume that the swap is successful if the previous transfer state is TRANSFER_SUCCESS
   const renderSwapState = useMemo(() => {
-    switch (swap?.state) {
+    if (isSwapFirstStep) {
+      if (swapStatus?.state === "TRANSFER_PENDING") {
+        return (
+          <div className="rounded-full border-2 bg-white p-1">
+            <Spinner />
+          </div>
+        );
+      }
+      if (swapStatus?.state === "TRANSFER_SUCCESS") {
+        return (
+          <div className="rounded bg-white">
+            <CheckCircleIcon className="h-6 w-6 text-green-400" />
+          </div>
+        );
+      }
+      if (swapStatus?.state === "TRANSFER_FAILURE") {
+        return (
+          <div className="rounded bg-white">
+            <XCircleIcon className="h-6 w-6 text-red-400" />
+          </div>
+        );
+      }
+
+      return <div className="h-2 w-2 rounded-full bg-neutral-200" />;
+    }
+    switch (swapStatus?.state) {
       case "TRANSFER_RECEIVED":
         return (
           <div className="rounded-full border-2 bg-white p-1">
@@ -312,14 +359,14 @@ function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
       default:
         return <div className="h-2 w-2 rounded-full bg-neutral-200" />;
     }
-  }, [swap?.state]);
+  }, [isSwapFirstStep, swapStatus?.state]);
 
   const explorerLink = useMemo(() => {
-    const receiveTx = swap?.txs.receiveTx;
-    if (!receiveTx) return;
-    if (swap?.state !== "TRANSFER_SUCCESS") return;
-    return makeExplorerLink(receiveTx.explorerLink);
-  }, [swap?.state, swap?.txs.receiveTx]);
+    const tx = isSwapFirstStep ? swapStatus?.txs.sendTx : swapStatus?.txs.receiveTx;
+    if (!tx) return;
+    if (swapStatus?.state !== "TRANSFER_SUCCESS") return;
+    return makeExplorerLink(tx.explorerLink);
+  }, [isSwapFirstStep, swapStatus?.state, swapStatus?.txs.receiveTx, swapStatus?.txs.sendTx]);
 
   if (!assetIn && assetOut) {
     return (

src/components/SettingsDialog/GasSetting.tsx

@@ -4,7 +4,7 @@ import { useSettingsStore } from "@/context/settings";
 import { formatNumberWithCommas, formatNumberWithoutCommas } from "@/utils/number";
 
 export const GasSetting = () => {
-  const currentValue = useSettingsStore((state) => state.gasAmount);
+  const currentValue = useSettingsStore((state) => state.customGasAmount);
 
   return (
     <div className="flex items-center space-x-2 p-2">
@@ -25,7 +25,7 @@ export const GasSetting = () => {
               latest = latest.replace(/[,]{2,}/g, ","); // Remove multiple commas
 
               const value = Math.max(0, +latest);
-              useSettingsStore.setState({ gasAmount: value.toString() });
+              useSettingsStore.setState({ customGasAmount: value.toString() });
             }}
             onKeyDown={(event) => {
               if (event.key === "Escape") {
@@ -54,7 +54,7 @@ export const GasSetting = () => {
                 if (value.isNegative()) {
                   value = BigNumber(0);
                 }
-                useSettingsStore.setState({ gasAmount: value.toString() });
+                useSettingsStore.setState({ customGasAmount: value.toString() });
               }
             }}
           />

src/components/SwapWidget/SwapDetails.tsx

@@ -34,10 +34,11 @@ export const SwapDetails = ({
   route,
   sourceAsset,
   sourceChain,
+  sourceFeeAsset,
 }: Props) => {
   const [open, control] = useDisclosureKey("swapDetailsCollapsible");
 
-  const { gasAmount, slippage } = useSettingsStore();
+  const { slippage } = useSettingsStore();
 
   const axelarTransferOperation = useMemo(() => {
     for (const op of route.operations) {
@@ -156,9 +157,15 @@ export const SwapDetails = ({
             </SimpleTooltip>
             {slippage}%
           </dd>
-          <dt>Estimated Fee</dt>
-          <dd>{gasRequired ?? "-"}</dd>
-          <dt>Gas Amount</dt>
+          {sourceFeeAsset && (
+            <>
+              <dt>Estimated Fee</dt>
+              <dd>
+                {gasRequired ?? "-"} {sourceFeeAsset.recommendedSymbol}
+              </dd>
+            </>
+          )}
+          {/* <dt>Gas Amount</dt>
           <dd>
             <SimpleTooltip label="Click to change gas multiplier">
               <button
@@ -173,7 +180,7 @@ export const SwapDetails = ({
               </button>
             </SimpleTooltip>
             {parseFloat(gasAmount).toLocaleString()}
-          </dd>
+          </dd> */}
           <dt>Bridging Fee</dt>
           <dd>{bridgingFee ?? "-"}</dd>
         </dl>