chore: sync staging → main (#126)

skip-mev · Dec 21, 2023 · de9d252 · de9d252 · vercel · Dec 21, 2023
2 parents 1c286d4 + dfd1e94
commit de9d252
Show file tree

Hide file tree

Showing 20 changed files with 717 additions and 941 deletions.
diff --git a/.env.example b/.env.example
@@ -4,5 +4,6 @@ NEXT_PUBLIC_API_URL=https://api.skip.money
 # development API
 # NEXT_PUBLIC_API_URL=https://solve-dev.skip.money
 
+CORS_EDGE_CONFIG=
 POLKACHU_USER=
 POLKACHU_PASSWORD=
diff --git a/env.d.ts b/env.d.ts
@@ -2,6 +2,7 @@ declare namespace NodeJS {
   interface ProcessEnv {
     readonly APP_URL?: string;
     readonly NEXT_PUBLIC_API_URL?: string;
+    readonly CORS_EDGE_CONFIG?: string;
     readonly POLKACHU_USER?: string;
     readonly POLKACHU_PASSWORD?: string;
   }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,17 @@
     "test": "node --experimental-vm-modules --no-warnings ./node_modules/.bin/jest",
     "test:e2e": "playwright test --project=chromium"
   },
+  "overrides": {
+    "@cosmjs/amino": "0.31.x",
+    "@cosmjs/cosmwasm-stargate": "0.31.x",
+    "@cosmjs/encoding": "0.31.x",
+    "@cosmjs/ledger-amino": "0.31.x",
+    "@cosmjs/math": "0.31.x",
+    "@cosmjs/proto-signing": "0.31.x",
+    "@cosmjs/stargate": "0.31.x",
+    "@cosmjs/tendermint-rpc": "0.31.x",
+    "cosmjs-types": "0.8.x"
+  },
   "dependencies": {
     "@cosmjs/amino": "0.31.x",
     "@cosmjs/cosmwasm-stargate": "0.31.x",
@@ -22,57 +33,57 @@
     "@cosmjs/proto-signing": "0.31.x",
     "@cosmjs/stargate": "0.31.x",
     "@cosmjs/tendermint-rpc": "0.31.x",
-    "@cosmos-kit/core": "^2.7.10",
-    "@cosmos-kit/cosmostation": "^2.4.14",
-    "@cosmos-kit/keplr": "^2.4.15",
-    "@cosmos-kit/leap": "^2.4.16",
-    "@cosmos-kit/okxwallet": "^2.3.11",
-    "@cosmos-kit/react": "^2.9.14",
-    "@cosmos-kit/react-lite": "^2.5.12",
-    "@cosmos-kit/station": "^2.4.10",
-    "@cosmos-kit/vectis": "^2.4.10",
-    "@cosmos-kit/xdefi": "^2.4.12",
+    "@cosmos-kit/core": "^2.7.11",
+    "@cosmos-kit/cosmostation": "^2.5.1",
+    "@cosmos-kit/keplr": "^2.5.1",
+    "@cosmos-kit/leap": "^2.5.1",
+    "@cosmos-kit/okxwallet": "^2.3.12",
+    "@cosmos-kit/react": "^2.9.16",
+    "@cosmos-kit/react-lite": "^2.5.13",
+    "@cosmos-kit/station": "^2.4.11",
+    "@cosmos-kit/vectis": "^2.5.1",
+    "@cosmos-kit/xdefi": "^2.4.13",
     "@evmos/proto": "^0.2.1",
     "@evmos/provider": "^0.3.1",
     "@evmos/transactions": "^0.3.2",
     "@graz-sh/types": "^0.0.14",
     "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.0.18",
+    "@heroicons/react": "^2.1.1",
     "@injectivelabs/sdk-ts": "^1.14.4",
     "@injectivelabs/utils": "^1.14.4",
-    "@keplr-wallet/types": "^0.12.52",
+    "@keplr-wallet/types": "^0.12.54",
     "@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.87.0",
-    "@skip-router/core": "^1.1.1",
-    "@tanstack/react-query": "^5.13.4",
-    "@types/node": "^20.10.4",
+    "@sentry/nextjs": "^7.90.0",
+    "@skip-router/core": "^1.1.2",
+    "@tanstack/react-query": "^5.14.2",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "@vercel/analytics": "^1.1.1",
-    "@web3modal/core": "^3.5.0",
-    "@web3modal/ui": "^3.5.0",
+    "@vercel/edge-config": "^0.4.1",
+    "@web3modal/core": "^3.5.1",
+    "@web3modal/ui": "^3.5.1",
     "autoprefixer": "^10.4.16",
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
-    "cosmjs-types": "^0.9.0",
-    "date-fns": "^2.30.0",
+    "cosmjs-types": "0.8.x",
+    "date-fns": "^3.0.1",
     "download": "^8.0.0",
-    "ethers": "^6.9.0",
-    "framer-motion": "^10.16.16",
+    "ethers": "^6.9.1",
     "next": "^14.0.4",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.4.0",
     "tinykeys": "^2.1.0",
-    "undici": "^6.0.1",
-    "viem": "^1.19.15",
+    "undici": "^6.2.0",
+    "viem": "^1.20.3",
     "wagmi": "^1.4.12",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"
@@ -86,12 +97,12 @@
     "@types/download": "^8.0.5",
     "@types/jest": "^29.5.11",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "eslint": "^8.55.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "globby": "^14.0.0",
     "jest": "^29.7.0",
@@ -103,7 +114,7 @@
     "prettier": "^3.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "ts-jest": "^29.1.1",
-    "tsx": "^4.6.2",
+    "tsx": "^4.7.0",
     "typed-query-selector": "^2.11.0",
     "typescript": "5.2.x"
   }

diff --git a/sentry.client.config.ts b/sentry.client.config.ts
@@ -4,12 +4,8 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-
 Sentry.init({
-  dsn:
-    SENTRY_DSN ||
-    "https://93370ce893e0f946e344a7cc2a74a1d6@o4504768725909504.ingest.sentry.io/4506180860968960",
+  dsn: process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,
@@ -27,8 +23,8 @@ Sentry.init({
   integrations: [
     new Sentry.Replay({
       // Additional Replay configuration goes in here, for example:
-      maskAllText: true,
-      blockAllMedia: true,
+      maskAllText: false,
+      blockAllMedia: false,
     }),
   ],
 });
diff --git a/sentry.edge.config.ts b/sentry.edge.config.ts
@@ -5,12 +5,8 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-
 Sentry.init({
-  dsn:
-    SENTRY_DSN ||
-    "https://93370ce893e0f946e344a7cc2a74a1d6@o4504768725909504.ingest.sentry.io/4506180860968960",
+  dsn: process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,

diff --git a/sentry.server.config.ts b/sentry.server.config.ts
@@ -4,12 +4,8 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-
 Sentry.init({
-  dsn:
-    SENTRY_DSN ||
-    "https://93370ce893e0f946e344a7cc2a74a1d6@o4504768725909504.ingest.sentry.io/4506180860968960",
+  dsn: process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,

diff --git a/src/components/AssetInput.tsx b/src/components/AssetInput.tsx
@@ -14,6 +14,7 @@ import { getFee, useBalancesByChain } from "@/utils/utils";
 
 import AssetSelect from "./AssetSelect";
 import ChainSelect from "./ChainSelect";
+import { ClientOnly } from "./ClientOnly";
 import { SimpleTooltip } from "./SimpleTooltip";
 import { UsdDiff, UsdValue, useUsdDiffReset } from "./UsdValue";
 
@@ -27,6 +28,7 @@ interface Props {
   chains: Chain[];
   showBalance?: boolean;
   showSlippage?: boolean;
+  context?: "src" | "dest";
 }
 
 const AssetInput: FC<Props> = ({
@@ -39,6 +41,7 @@ const AssetInput: FC<Props> = ({
   onChainChange,
   showBalance,
   showSlippage,
+  context,
 }) => {
   const [isError, setIsError] = useState(false);
 
@@ -56,7 +59,12 @@ const AssetInput: FC<Props> = ({
 
   const { address } = useAccount(chain?.chainID ?? "cosmoshub-4");
 
-  const { data: balances } = useBalancesByChain(address, chain, showBalance);
+  const { data: balances } = useBalancesByChain(
+    address,
+    chain,
+    assets,
+    showBalance,
+  );
 
   const selectedAssetBalance = useMemo(() => {
     if (!asset || !balances) return undefined;
@@ -188,11 +196,11 @@ const AssetInput: FC<Props> = ({
                   denom={asset.originDenom}
                   coingeckoID={asset.coingeckoID}
                   value={amount}
-                  context={onAmountChange ? "src" : "dest"}
+                  context={context}
                 />
               </div>
             )}
-            {!onAmountChange && (
+            {context === "dest" && (
               <UsdDiff.Value>
                 {({ isLoading, percentage }) => (
                   <div
@@ -256,17 +264,19 @@ const AssetInput: FC<Props> = ({
                 </button>
               </div>
             )}
-            {showSlippage && (
-              <SimpleTooltip label="Click to change max slippage">
-                <button
-                  className="text-neutral-400 text-sm hover:underline"
-                  onClick={() => disclosure.open("settingsDialog")}
-                >
-                  Max Slippage: {slippage}%{" "}
-                  <PencilSquareIcon className="w-3 h-3 inline mb-1" />
-                </button>
-              </SimpleTooltip>
-            )}
+            <ClientOnly>
+              {showSlippage && (
+                <SimpleTooltip label="Click to change max slippage">
+                  <button
+                    className="text-neutral-400 text-sm hover:underline"
+                    onClick={() => disclosure.open("settingsDialog")}
+                  >
+                    Max Slippage: {slippage}%{" "}
+                    <PencilSquareIcon className="w-3 h-3 inline mb-1" />
+                  </button>
+                </SimpleTooltip>
+              )}
+            </ClientOnly>
           </div>
         </div>
       </div>

diff --git a/src/components/AssetValue.tsx b/src/components/AssetValue.tsx
@@ -19,9 +19,8 @@ export const AssetValue = ({ chainId, denom, value }: Props) => {
   }, [chainId, denom, getAsset]);
 
   const formattedValue = useMemo(() => {
-    const v = formatUnits(value, decimals);
-    const w = 9;
-    if (v.length > w) return v.slice(0, w) + "…";
+    let v = formatUnits(value, decimals);
+    v = format(parseFloat(v));
     return v;
   }, [decimals, value]);
 
@@ -31,3 +30,5 @@ export const AssetValue = ({ chainId, denom, value }: Props) => {
     </span>
   );
 };
+
+const { format } = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
diff --git a/src/components/ClientOnly.tsx b/src/components/ClientOnly.tsx
@@ -0,0 +1,7 @@
+import { ReactNode, useEffect, useState } from "react";
+
+export function ClientOnly({ children }: { children: ReactNode }) {
+  const [state, setState] = useState(false);
+  useEffect(() => setState(true), []);
+  return state ? <>{children}</> : null;
+}
diff --git a/src/components/HistoryDialog/HistoryList.tsx b/src/components/HistoryDialog/HistoryList.tsx
@@ -91,22 +91,22 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
           ref={headingRef}
         >
           <div className="flex items-center space-x-4 text-start">
-            <time className="uppercase text-center text-sm opacity-60 tabular-nums">
+            <time className="uppercase text-center text-sm opacity-60 tabular-nums whitespace-nowrap">
               <RenderDate date={data.timestamp} />
             </time>
             <div className="flex-grow">
-              <div className="font-medium text-sm flex items-center space-x-1">
+              <div className="font-medium text-sm flex items-center">
                 <ChainSymbol chainId={data.route.sourceAssetChainID} />
-                <ArrowRightIcon className="w-4 h-4" />
+                <ArrowRightIcon className="w-4 h-4 mx-1" />
                 <ChainSymbol chainId={data.route.destAssetChainID} />
               </div>
-              <div className="opacity-60 text-sm flex items-center space-x-1">
+              <div className="opacity-60 text-sm flex items-center">
                 <AssetValue
                   chainId={data.route.sourceAssetChainID}
                   denom={data.route.sourceAssetDenom}
                   value={data.route.amountIn}
                 />
-                <ArrowRightIcon className="w-3 h-3" />
+                <ArrowRightIcon className="w-3 h-3 mx-1" />
                 <AssetValue
                   chainId={data.route.destAssetChainID}
                   denom={data.route.destAssetDenom}
@@ -168,10 +168,10 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
           <DescriptionList.Root className="pt-2">
             <DescriptionList.Row>
               <DescriptionList.Dt>Chain Route</DescriptionList.Dt>
-              <DescriptionList.Dd className="flex flex-wrap items-center space-x-1">
+              <DescriptionList.Dd className="flex flex-wrap items-center">
                 {data.route.chainIDs.map((chainId, i) => (
                   <Fragment key={i}>
-                    {i > 0 && <ArrowRightIcon className="w-4 h-4" />}
+                    {i > 0 && <ArrowRightIcon className="w-4 h-4 mx-1" />}
                     <ChainSymbol chainId={chainId} />
                   </Fragment>
                 ))}

diff --git a/src/components/SwapWidget/SwapWidget.tsx b/src/components/SwapWidget/SwapWidget.tsx
@@ -123,6 +123,7 @@ export const SwapWidget: FC = () => {
               onAssetChange={onSourceAssetChange}
               onChainChange={onSourceChainChange}
               showBalance
+              context="src"
             />
           </div>
           <div className="relative">
@@ -182,6 +183,7 @@ export const SwapWidget: FC = () => {
               onAssetChange={onDestinationAssetChange}
               onChainChange={onDestinationChainChange}
               showSlippage={!isSwapDetailsOpen}
+              context="dest"
             />
           </div>
           {route && (

diff --git a/src/components/SwapWidget/useSwapWidget.ts b/src/components/SwapWidget/useSwapWidget.ts
@@ -122,7 +122,17 @@ export function useSwapWidget() {
 
   const { address } = useAccount(sourceChain?.chainID ?? "cosmoshub-4");
 
-  const { data: balances } = useBalancesByChain(address, sourceChain);
+  const { assetsByChainID } = useAssets();
+
+  const sourceChainAssets = assetsByChainID(
+    sourceChain?.chainID ?? "cosmoshub-4",
+  );
+
+  const { data: balances } = useBalancesByChain(
+    address,
+    sourceChain,
+    sourceChainAssets,
+  );
 
   const insufficientBalance = useMemo(() => {
     if (!sourceAsset || !balances) {

diff --git a/src/components/TransactionDialog/TransactionDialogContent.tsx b/src/components/TransactionDialog/TransactionDialogContent.tsx
@@ -11,7 +11,7 @@ import { useToast } from "@/context/toast";
 import {
   addTxHistory,
   addTxStatus,
-  removeTxHistory,
+  failTxHistory,
   successTxHistory,
 } from "@/context/tx-history";
 import Toast from "@/elements/Toast";
@@ -219,7 +219,7 @@ const TransactionDialogContent: FC<Props> = ({
         setTxError(err.message);
         setIsError(true);
       }
-      removeTxHistory(historyId);
+      failTxHistory(historyId);
       setTxStatuses((statuses) => {
         const newStatuses = [...statuses];
         return newStatuses.map((status) => {