feat: sync staging → main

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

.env.example

@@ -1,9 +1,16 @@
 # production api
 NEXT_PUBLIC_API_URL=https://api.skip.money
+NEXT_PUBLIC_CLIENT_ID=
 
 # development API
-# NEXT_PUBLIC_API_URL=https://solve-dev.skip.money
+# NEXT_PUBLIC_API_URL="https://solve-dev.skip.money"
+# NEXT_PUBLIC_CLIENT_ID=
 
-CORS_EDGE_CONFIG=
-POLKACHU_USER=
-POLKACHU_PASSWORD=
+POLKACHU_USER
+POLKACHU_PASSWORD
+
+NEXT_PUBLIC_EDGE_CONFIG=
+NEXT_PUBLIC_FLAGS_OVERRIDE=
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=
+RESEND_API_KEY=
+WALLETCONNECT_VERIFY_KEY=

env.d.ts

@@ -7,9 +7,10 @@ declare namespace NodeJS {
     readonly POLKACHU_USER?: string;
     readonly POLKACHU_PASSWORD?: string;
 
-    readonly CORS_EDGE_CONFIG?: string;
-    readonly RESEND_API_KEY?: string;
+    readonly NEXT_PUBLIC_EDGE_CONFIG?: string;
+    readonly NEXT_PUBLIC_FLAGS_OVERRIDE?: string;
     readonly NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID?: string;
+    readonly RESEND_API_KEY?: string;
     readonly WALLETCONNECT_VERIFY_KEY?: string;
   }
 }

package.json

@@ -36,47 +36,42 @@
     "@cosmjs/tendermint-rpc": "0.31.x",
     "@cosmos-kit/core": "2.8.x",
     "@cosmos-kit/cosmostation": "2.6.x",
-    "@cosmos-kit/initia": "^0.2.2",
     "@cosmos-kit/keplr": "2.6.x",
     "@cosmos-kit/leap": "2.6.x",
     "@cosmos-kit/okxwallet": "2.4.x",
     "@cosmos-kit/react": "2.10.x",
-    "@cosmos-kit/react-lite": "2.6.x",
     "@cosmos-kit/station": "2.5.x",
     "@cosmos-kit/vectis": "2.6.x",
     "@cosmos-kit/xdefi": "2.5.x",
     "@fontsource/jost": "^5.0.16",
     "@graz-sh/types": "^0.0.14",
-    "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@injectivelabs/sdk-ts": "^1.14.5",
     "@injectivelabs/utils": "^1.14.5",
-    "@keplr-wallet/types": "^0.12.62",
+    "@keplr-wallet/types": "^0.12.63",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-stately/table": "^3.11.4",
-    "@sentry/nextjs": "^7.93.0",
-    "@skip-router/core": "^1.2.3",
+    "@skip-router/core": "^1.2.7",
+    "@sentry/nextjs": "^7.94.1",
     "@tailwindcss/forms": "^0.5.7",
-    "@tanstack/query-sync-storage-persister": "^5.17.15",
-    "@tanstack/react-query": "^5.17.15",
-    "@tanstack/react-query-persist-client": "^5.17.15",
+    "@tanstack/query-sync-storage-persister": "^5.17.19",
+    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query-persist-client": "^5.17.19",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@vercel/analytics": "^1.1.2",
     "@vercel/edge-config": "^0.4.1",
-    "@web3modal/core": "^3.5.6",
-    "@web3modal/ui": "^3.5.6",
     "autoprefixer": "^10.4.17",
     "axios": "^1.6.5",
     "clsx": "^2.1.0",
     "cosmjs-types": "0.8.x",
-    "date-fns": "^3.2.0",
+    "date-fns": "^3.3.1",
     "download": "^8.0.0",
     "ethers": "^6.10.0",
     "match-sorter": "^6.3.3",
@@ -87,26 +82,26 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
-    "resend": "^3.0.0",
+    "resend": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "tinykeys": "^2.1.0",
-    "undici": "^6.3.0",
+    "undici": "^6.4.0",
     "viem": "1.x",
     "wagmi": "1.x",
     "zod": "^3.22.4",
-    "zustand": "^4.4.7"
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.0",
-    "@tanstack/eslint-plugin-query": "^5.17.7",
-    "@testing-library/jest-dom": "^6.2.0",
+    "@playwright/test": "^1.41.1",
+    "@tanstack/eslint-plugin-query": "^5.17.20",
+    "@testing-library/jest-dom": "^6.2.1",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/download": "^8.0.5",
     "@types/jest": "^29.5.11",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",
@@ -122,7 +117,7 @@
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "resize-observer-polyfill": "^1.5.1",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "tsx": "^4.7.0",
     "typed-query-selector": "^2.11.0",
     "typescript": "5.2.x"

src/components/AssetInput.tsx

@@ -4,7 +4,7 @@ import { formatUnits } from "ethers";
 import { MouseEventHandler, useMemo } from "react";
 
 import { AssetWithMetadata, useAssets } from "@/context/assets";
-import { useSettingsStore } from "@/context/settings";
+import { useAnyDisclosureOpen } from "@/context/disclosures";
 import { useAccount } from "@/hooks/useAccount";
 import { useBalancesByChain } from "@/hooks/useBalancesByChain";
 import { Chain } from "@/hooks/useChains";
@@ -21,13 +21,15 @@ interface Props {
   amountUSD?: string;
   diffPercentage?: number;
   onAmountChange?: (amount: string) => void;
+  onAmountMax?: MouseEventHandler<HTMLButtonElement>;
   asset?: AssetWithMetadata;
   onAssetChange?: (asset: AssetWithMetadata) => void;
   chain?: Chain;
   onChainChange?: (chain: Chain) => void;
   chains: Chain[];
   showBalance?: boolean;
-  context?: "src" | "dest";
+  context: "source" | "destination";
+  isError?: string | boolean;
   isLoading?: boolean;
 }
 
@@ -36,76 +38,54 @@ function AssetInput({
   amountUSD,
   diffPercentage = 0,
   onAmountChange,
+  onAmountMax,
   asset,
   onAssetChange,
   chain,
   chains,
   onChainChange,
   showBalance,
   context,
+  isError,
   isLoading,
 }: Props) {
   const { assetsByChainID, getNativeAssets } = useAssets();
 
   const assets = useMemo(() => {
-    if (!chain) {
-      return getNativeAssets();
-    }
-
+    if (!chain) return getNativeAssets();
     return assetsByChainID(chain.chainID);
   }, [assetsByChainID, chain, getNativeAssets]);
 
-  const showChainInfo = chain ? false : true;
+  const account = useAccount(context);
 
-  const account = useAccount(context === "src" ? "source" : "destination");
+  const isAnyDisclosureOpen = useAnyDisclosureOpen();
 
-  const { data: balances } = useBalancesByChain(account?.address, chain, assets);
+  const { data: balances } = useBalancesByChain({
+    address: account?.address,
+    chain,
+    assets,
+    enabled: !isAnyDisclosureOpen,
+  });
 
   const selectedAssetBalance = useMemo(() => {
-    if (!asset || !balances) return 0;
-
-    const balanceWei = balances[asset.denom];
-    if (!balanceWei) return 0;
-
-    return parseFloat(formatUnits(balanceWei, asset.decimals));
+    if (!asset || !balances) return "0";
+    return formatUnits(balances[asset.denom] ?? "0", asset.decimals ?? 6);
   }, [asset, balances]);
 
-  const formattedSelectedAssetBalance = useMemo(() => {
-    return selectedAssetBalance.toLocaleString("en-US", {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 4,
-    });
-  }, [selectedAssetBalance]);
-
   const maxButtonDisabled = useMemo(() => {
-    return selectedAssetBalance <= 0;
+    return parseFloat(selectedAssetBalance) <= 0;
   }, [selectedAssetBalance]);
 
-  const handleMax: MouseEventHandler<HTMLButtonElement> = (event) => {
-    if (!selectedAssetBalance || !chain || !asset) return;
-
-    let balance = new BigNumber(selectedAssetBalance);
-
-    if (event.shiftKey) {
-      onAmountChange?.(balance.toString());
-      return;
-    }
-
-    const { gasComputed } = useSettingsStore.getState();
-    gasComputed && (balance = balance.minus(gasComputed));
-
-    onAmountChange?.(balance.toString());
-  };
-
   return (
     <div
       className={clsx(
-        "space-y-4 rounded-lg border border-neutral-200 p-4 transition-[border,shadow]",
+        "rounded-lg border border-neutral-200 p-4 transition-[border,shadow]",
         "focus-within:border-neutral-300 focus-within:shadow-sm",
         "hover:border-neutral-300 hover:shadow-sm",
+        !!isError && "border-red-400 focus-within:border-red-500 hover:border-red-500",
       )}
     >
-      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4">
+      <div className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4">
         <div>
           <ChainSelect
             chain={chain}
@@ -119,11 +99,11 @@ function AssetInput({
             assets={assets}
             balances={balances}
             onChange={onAssetChange}
-            showChainInfo={showChainInfo}
+            showChainInfo={!!chain}
           />
         </div>
       </div>
-      <div className="relative isolate">
+      <div className="relative isolate mb-2">
         {isLoading && <SpinnerIcon className="absolute right-3 top-3 z-10 h-4 w-4 animate-spin text-neutral-300" />}
         <input
           data-testid="amount"
@@ -188,7 +168,7 @@ function AssetInput({
         />
         <div className="flex h-8 items-center space-x-2 tabular-nums">
           <p className="text-sm tabular-nums text-neutral-400">{amountUSD ? formatUSD(amountUSD) : null}</p>
-          {amountUSD !== undefined && diffPercentage !== 0 && context === "dest" ? (
+          {amountUSD !== undefined && diffPercentage !== 0 && context === "destination" ? (
             <p className={clsx("text-sm tabular-nums", diffPercentage >= 0 ? "text-green-500" : "text-red-500")}>
               ({formatPercent(diffPercentage)})
             </p>
@@ -197,14 +177,16 @@ function AssetInput({
           {showBalance && account?.address && asset && (
             <div className="flex animate-slide-left-and-fade items-center text-sm text-neutral-400">
               <span className="mr-1">Balance:</span>
-              <SimpleTooltip label={`${selectedAssetBalance} ${asset.recommendedSymbol}`}>
+              <SimpleTooltip label={`${parseFloat(selectedAssetBalance).toString()} ${asset.recommendedSymbol}`}>
                 <div
                   className={clsx(
                     "mr-2 max-w-[16ch] truncate tabular-nums",
                     "cursor-help underline decoration-dotted underline-offset-4",
                   )}
                 >
-                  {formattedSelectedAssetBalance}
+                  {parseFloat(selectedAssetBalance).toLocaleString("en-US", {
+                    maximumFractionDigits: 4,
+                  })}
                 </div>
               </SimpleTooltip>
               <button
@@ -213,14 +195,19 @@ function AssetInput({
                   "transition-[transform,background] enabled:hover:rotate-2 enabled:hover:scale-110 disabled:cursor-not-allowed",
                 )}
                 disabled={maxButtonDisabled}
-                onClick={handleMax}
+                onClick={onAmountMax}
               >
                 Max
               </button>
             </div>
           )}
         </div>
       </div>
+      {typeof isError === "string" && (
+        <div className="animate-slide-up-and-fade text-balance text-center text-xs font-medium text-red-500">
+          {isError}
+        </div>
+      )}
     </div>
   );
 }

src/components/Footer.tsx

@@ -6,15 +6,10 @@ import { useDisclosureKey } from "@/context/disclosures";
 export function Footer() {
   const [isOpen, { open }] = useDisclosureKey("contactDialog");
   return (
-    <footer
-      className={clsx(
-        "z-10 pt-8",
-        "sm:fixed sm:bottom-0 sm:right-4",
-        //
-      )}
-    >
+    <footer className="w-full self-stretch pt-16">
       <button
         className={clsx(
+          "bottom-0 right-4 sm:fixed",
           "group flex items-center gap-2 rounded-t-lg px-4 py-2 sm:shadow-xl",
           "bg-white text-[#FF486E] hover:bg-red-50 sm:hover:pb-3 sm:active:pb-2.5",
           "transition-[background,padding,transform] duration-500 ease-[cubic-bezier(0.08,0.82,0.17,1)]",

src/components/HistoryDialog/HistoryClearButton.tsx

@@ -2,7 +2,7 @@ import { TrashIcon } from "@heroicons/react/20/solid";
 import { clsx } from "clsx";
 import { ComponentProps } from "react";
 
-import { clearTxHistory, useTxHistory } from "@/context/tx-history";
+import { txHistory, useTxHistory } from "@/context/tx-history";
 
 import { SimpleTooltip } from "../SimpleTooltip";
 
@@ -27,7 +27,7 @@ export const HistoryClearButton = ({ className, ...props }: Props) => {
           "transition-colors focus:outline-none",
           className,
         )}
-        onClick={() => clearTxHistory()}
+        onClick={() => txHistory.clear()}
         {...props}
       >
         <TrashIcon className="h-4 w-4" />