feat: sync staging → main

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

.github/workflows/deploy-dev.yml

@@ -1,5 +1,8 @@
 name: Deploy (dev.ibc.fun)
 on:
+  pull_request:
+    branches: [main]
+    types: [closed]
   push:
     branches: [main]
   repository_dispatch:
@@ -25,11 +28,9 @@ jobs:
         run: git diff --exit-code origin/main
 
       - id: fast-forward
-        if: steps.diff-check.outcome == 'failure'
         name: Fast forward 'main' → 'dev'
         run: git merge --ff-only origin/main
 
       - id: push-dev
-        if: steps.diff-check.outcome == 'failure'
         name: Push latest 'dev'
         run: git push --set-upstream origin dev

package.json

@@ -13,15 +13,25 @@
     "test": "jest",
     "test:e2e": "playwright test --project=chromium"
   },
+  "overrides": {
+    "@cosmjs/amino": "^0.32.1",
+    "@cosmjs/cosmwasm-stargate": "^0.32.1",
+    "@cosmjs/encoding": "^0.32.1",
+    "@cosmjs/ledger-amino": "^0.32.1",
+    "@cosmjs/math": "^0.32.1",
+    "@cosmjs/proto-signing": "^0.32.1",
+    "@cosmjs/stargate": "^0.32.1",
+    "@cosmjs/tendermint-rpc": "^0.32.1"
+  },
   "dependencies": {
-    "@cosmjs/amino": "^0.31.3",
-    "@cosmjs/cosmwasm-stargate": "^0.31.3",
-    "@cosmjs/encoding": "^0.31.3",
-    "@cosmjs/ledger-amino": "^0.31.3",
-    "@cosmjs/math": "^0.31.3",
-    "@cosmjs/proto-signing": "^0.31.3",
-    "@cosmjs/stargate": "^0.31.3",
-    "@cosmjs/tendermint-rpc": "^0.31.3",
+    "@cosmjs/amino": "^0.32.1",
+    "@cosmjs/cosmwasm-stargate": "^0.32.1",
+    "@cosmjs/encoding": "^0.32.1",
+    "@cosmjs/ledger-amino": "^0.32.1",
+    "@cosmjs/math": "^0.32.1",
+    "@cosmjs/proto-signing": "^0.32.1",
+    "@cosmjs/stargate": "^0.32.1",
+    "@cosmjs/tendermint-rpc": "^0.32.1",
     "@cosmos-kit/core": "^2.0.3",
     "@cosmos-kit/cosmostation-extension": "^2.0.3",
     "@cosmos-kit/keplr-extension": "^2.0.3",
@@ -39,18 +49,19 @@
     "@heroicons/react": "^2.0.18",
     "@injectivelabs/sdk-ts": "^1.14.4",
     "@injectivelabs/utils": "^1.14.4",
-    "@keplr-wallet/types": "^0.12.44",
+    "@keplr-wallet/types": "^0.12.46",
     "@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-toast": "^1.1.5",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@sentry/nextjs": "^7.81.1",
-    "@skip-router/core": "^0.1.0-rc22",
-    "@tanstack/react-query": "^5.8.4",
-    "@types/node": "20.9.4",
-    "@types/react": "18.2.38",
+    "@sentry/nextjs": "^7.85.0",
+    "@skip-router/core": "^1.0.5",
+    "@tanstack/react-query": "^5.12.2",
+    "@types/node": "20.10.3",
+    "@types/react": "18.2.42",
     "@types/react-dom": "18.2.17",
     "@vercel/analytics": "^1.1.1",
     "@web3modal/core": "^2.7.0",
@@ -64,22 +75,23 @@
     "download": "^8.0.0",
     "eslint-config-next": "14.0.3",
     "ethers": "^6.3.0",
-    "framer-motion": "^10.16.5",
+    "framer-motion": "^10.16.14",
     "next": "14.0.3",
     "pino-pretty": "^10.2.3",
-    "postcss": "8.4.31",
+    "postcss": "8.4.32",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.3.5",
+    "tailwindcss": "3.3.6",
+    "tinykeys": "^2.1.0",
     "usehooks-ts": "^2.9.1",
     "viem": "^1.14.0",
     "wagmi": "^1.4.3",
     "zod": "^3.22.4",
-    "zustand": "^4.4.6"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.0",
-    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@playwright/test": "^1.40.1",
+    "@tanstack/eslint-plugin-query": "^5.12.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -88,24 +100,24 @@
     "@types/http-proxy": "^1.17.14",
     "@types/jest": "^29.5.3",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "degit": "npm:tiged@^2.12.5",
-    "eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "globby": "^14.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "msw": "^1.2.3",
     "npm-run-all2": "^6.1.1",
-    "p-map": "^6.0.0",
+    "p-map": "^7.0.0",
     "patch-package": "^8.0.0",
     "prettier": "^3.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "ts-jest": "^29.1.1",
-    "tsx": "^4.2.1",
+    "tsx": "^4.6.2",
     "typescript": "5.1.x"
   }
 }

src/components/AssetInput.tsx

@@ -1,4 +1,5 @@
 import { PencilSquareIcon } from "@heroicons/react/20/solid";
+import { BigNumber } from "bignumber.js";
 import { clsx } from "clsx";
 import { ethers } from "ethers";
 import { FC, Fragment, useEffect, useMemo, useRef, useState } from "react";
@@ -153,9 +154,40 @@ const AssetInput: FC<Props> = ({
 
                 onAmountChange?.(latest);
               }}
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
+              onKeyDown={(event) => {
+                if (!onAmountChange) return;
+
+                if (event.key === "Escape") {
                   onAmountChange?.("");
+                  return;
+                }
+
+                if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                  let value = new BigNumber(event.currentTarget.value || "0");
+                  if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                      value = value.plus(10);
+                    } else if (event.altKey || event.ctrlKey || event.metaKey) {
+                      value = value.plus(0.1);
+                    } else {
+                      value = value.plus(1);
+                    }
+                  }
+                  if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                      value = value.minus(10);
+                    } else if (event.altKey || event.ctrlKey || event.metaKey) {
+                      value = value.minus(0.1);
+                    } else {
+                      value = value.minus(1);
+                    }
+                  }
+                  if (value.isNegative()) {
+                    value = new BigNumber(0);
+                  }
+                  onAmountChange(value.toString());
                 }
               }}
               ref={inputRef}
@@ -168,7 +200,7 @@ const AssetInput: FC<Props> = ({
                   error={null}
                   chainId={asset.originChainID}
                   denom={asset.originDenom}
-                  coingeckoId={asset.coingeckoId}
+                  coingeckoID={asset.coingeckoID}
                   value={amount}
                   context={onAmountChange ? "src" : "dest"}
                 />

src/components/BuildInfo.tsx

@@ -1,13 +1,13 @@
 import { clsx } from "clsx";
 import { ReactNode, useEffect, useState } from "react";
+import { tinykeys } from "tinykeys";
 
 import { API_URL } from "@/constants/api";
 
 const githubUrl = "https://github.com/skip-mev/ibc-dot-fun";
 
 const buildInfo: [string, ReactNode][] = [
   ["node env", process.env.NODE_ENV],
-  ["vercel env", process.env.NEXT_PUBLIC_VERCEL_ENV ? "true" : "false"],
   ["api url", API_URL],
   [
     "commit",
@@ -29,13 +29,9 @@ export const BuildInfo = () => {
   );
 
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && e.shiftKey) {
-        setShow((prev) => !prev);
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    return tinykeys(window, {
+      "Shift+Escape": () => setShow((prev) => !prev),
+    });
   }, []);
 
   if (!show) return null;
@@ -71,9 +67,13 @@ export const BuildInfo = () => {
             ),
         )}
       </dl>
-      <div className="text-end text-xs text-neutral-500">
-        shift+esc to toggle
-      </div>
+      <hr />
+      <button
+        className="text-center text-xs text-neutral-500 w-full relative before:absolute before:-inset-1 before:content-['']"
+        onClick={() => setShow((prev) => !prev)}
+      >
+        shift+esc to toggle, click here to close
+      </button>
     </div>
   );
 };

src/components/ConversionRate.tsx

@@ -0,0 +1,62 @@
+import { ReactNode, useCallback, useMemo, useState } from "react";
+
+import { AssetWithMetadata } from "@/context/assets";
+
+export interface Props {
+  srcAsset: AssetWithMetadata;
+  destAsset: AssetWithMetadata;
+  amountIn: string;
+  amountOut: string;
+  defaultDirection?: ConvDirection;
+
+  children: (args: RenderArgs) => ReactNode;
+}
+
+interface RenderArgs {
+  left: AssetWithMetadata;
+  right: AssetWithMetadata;
+  conversion: number;
+  toggle: () => void;
+}
+
+export const ConversionRate = ({
+  srcAsset: src,
+  destAsset: dest,
+  amountIn,
+  amountOut,
+  defaultDirection = ConvDirection.DEST_SRC,
+  children,
+}: Props) => {
+  const [direction, setState] = useState<ConvDirection>(() => defaultDirection);
+
+  const toggle = useCallback(() => {
+    setState((prev) => {
+      return prev === ConvDirection.DEST_SRC
+        ? ConvDirection.SRC_DEST
+        : ConvDirection.DEST_SRC;
+    });
+  }, []);
+
+  const left = direction === ConvDirection.DEST_SRC ? dest : src;
+  const right = direction === ConvDirection.DEST_SRC ? src : dest;
+
+  const conversion = useMemo(() => {
+    if (direction === ConvDirection.DEST_SRC) {
+      return +amountIn / +amountOut;
+    } else {
+      return +amountOut / +amountIn;
+    }
+  }, [amountIn, amountOut, direction]);
+
+  const renderArgs: RenderArgs = useMemo(
+    () => ({ left, right, conversion, toggle }),
+    [conversion, left, right, toggle],
+  );
+
+  return children(renderArgs);
+};
+
+export enum ConvDirection {
+  DEST_SRC = "dest-src",
+  SRC_DEST = "src-dest",
+}