Fix stack size exceeded error and add missing dep (for yarn install) (#…

…394)
skip-mev · Oct 30, 2024 · e97a635 · e97a635
1 parent 05f4b19
commit e97a635
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 63 deletions.
diff --git a/packages/widget-v2/package.json b/packages/widget-v2/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@skip-go/widget",
   "description": "Swap widget",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0-alpha.22",
   "repository": "https://github.com/skip-mev/widget",
   "type": "module",
   "scripts": {
@@ -23,8 +23,8 @@
     "README.md"
   ],
   "peerDependencies": {
-    "react": "17.x || 18.x",
-    "react-dom": "17.x || 18.x"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -60,6 +60,7 @@
     "@ebay/nice-modal-react": "^1.2.13",
     "@eslint/compat": "^1.1.1",
     "@initia/initia-registry": "^0.1.16",
+    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.44",
     "@penumbra-zone/bech32m": "^7.0.0",
     "@penumbra-zone/client": "^18.1.0",
     "@penumbra-zone/protobuf": "^6.0.0",
@@ -79,7 +80,7 @@
     "@tanstack/react-query": "^5.51.21",
     "chain-registry": "^1.63.43",
     "graz": "^0.1.25",
-    "jotai": "^2.9.1",
+    "jotai": "^2.10.1",
     "jotai-effect": "^1.0.2",
     "jotai-tanstack-query": "^0.8.6",
     "lodash.debounce": "^4.0.8",

diff --git a/packages/widget-v2/src/modals/AssetAndChainSelectorModal/useFilteredChains.ts b/packages/widget-v2/src/modals/AssetAndChainSelectorModal/useFilteredChains.ts
@@ -8,7 +8,7 @@ import { chainFilterAtom } from "@/state/swapPage";
 
 export type useFilteredChainsProps = {
   selectedGroup: GroupedAsset | undefined;
-  searchQuery: string;
+  searchQuery?: string;
   context: "source" | "destination";
 };
 

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapDetailModal.tsx b/packages/widget-v2/src/pages/SwapPage/SwapDetailModal.tsx
@@ -4,11 +4,11 @@ import { Column, Row, Spacer } from "@/components/Layout";
 import { SmallText } from "@/components/Typography";
 import { RouteArrow } from "@/icons/RouteArrow";
 import { SwapPageFooterItems } from "./SwapPageFooter";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { skipChainsAtom } from "@/state/skipClient";
 import { skipRouteAtom } from "@/state/route";
 import { useMemo, useState } from "react";
-import { swapSettingsAtom } from "@/state/swapPage";
+import { setSlippageAtom, swapSettingsAtom } from "@/state/swapPage";
 import { formatUSD } from "@/utils/intl";
 import { SLIPPAGE_OPTIONS } from "@/constants/widget";
 import { getClientOperations, OperationType } from "@/utils/clientType";
@@ -20,7 +20,8 @@ import { EvmDisclaimer } from "@/components/EvmDisclaimer";
 export const SwapDetailModal = createModal((modalProps: ModalProps) => {
   const { data: route } = useAtomValue(skipRouteAtom);
   const { data: chains } = useAtomValue(skipChainsAtom);
-  const [swapSettings, setSwapSettings] = useAtom(swapSettingsAtom);
+  const swapSettings = useAtomValue(swapSettingsAtom);
+  const setSlippage = useSetAtom(setSlippageAtom);
   const [showMaxSlippageTooltip, setShowMaxSlippageTooltip] = useState(false);
   const chainsRoute = useMemo(() => {
     return route?.chainIDs.map((chainID) =>
@@ -163,13 +164,13 @@ export const SwapDetailModal = createModal((modalProps: ModalProps) => {
             )}
           </SwapDetailText>
           <Row gap={4}>
-            {SLIPPAGE_OPTIONS.map((val) => (
+            {SLIPPAGE_OPTIONS.map((slippage) => (
               <StyledSlippageOptionLabel
                 monospace
-                selected={val === swapSettings.slippage}
-                onClick={() => setSwapSettings({ slippage: val })}
+                selected={slippage === swapSettings.slippage}
+                onClick={() => setSlippage(slippage)}
               >
-                {val}%
+                {slippage}%
               </StyledSlippageOptionLabel>
             ))}
             <div style={{ position: "relative" }}>
@@ -178,7 +179,7 @@ export const SwapDetailModal = createModal((modalProps: ModalProps) => {
                 value={swapSettings.slippage}
                 selected={!SLIPPAGE_OPTIONS.includes(swapSettings.slippage)}
                 onChange={(e) =>
-                  setSwapSettings({ slippage: parseFloat(e.target.value) })
+                  setSlippage(parseFloat(e.target.value))
                 }
               />
               <CustomSlippageInputRightIcon

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx
@@ -36,6 +36,7 @@ import { ConnectedWalletModal } from "@/modals/ConnectedWalletModal/ConnectedWal
 import { useAccount } from "wagmi";
 import { calculatePercentageChange } from "@/utils/number";
 import { transactionHistoryAtom } from "@/state/history";
+import { useUpdateAmountWhenRouteChanges } from "./useUpdateAmountWhenRouteChanges";
 
 export const SwapPage = () => {
   const [container, setContainer] = useState<HTMLDivElement>();
@@ -67,6 +68,7 @@ export const SwapPage = () => {
 
   const setChainAddresses = useSetAtom(chainAddressesAtom);
   useFetchAllBalances();
+  useUpdateAmountWhenRouteChanges();
   const getAccount = useGetAccount();
   const sourceAccount = getAccount(sourceAsset?.chainID);
   const txHistory = useAtomValue(transactionHistoryAtom);
@@ -296,11 +298,11 @@ export const SwapPage = () => {
       >
         <SwapPageHeader
           leftButton={txHistory.length === 0 ? undefined :
-          {
-            label: "History",
-            icon: ICONS.history,
-            onClick: () => setCurrentPage(Routes.TransactionHistoryPage),
-          }}
+            {
+              label: "History",
+              icon: ICONS.history,
+              onClick: () => setCurrentPage(Routes.TransactionHistoryPage),
+            }}
           rightContent={<ConnectedWalletContent />}
         />
         <Column align="center">

diff --git a/packages/widget-v2/src/pages/SwapPage/useUpdateAmountWhenRouteChanges.ts b/packages/widget-v2/src/pages/SwapPage/useUpdateAmountWhenRouteChanges.ts
@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { useAtom } from "jotai";
+import {
+  swapDirectionAtom,
+  sourceAssetAtom,
+  destinationAssetAtom,
+} from "@/state/swapPage";
+import { convertTokenAmountToHumanReadableAmount } from "@/utils/crypto";
+import { limitDecimalsDisplayed } from "@/utils/number";
+import { skipRouteAtom } from "@/state/route";
+
+export const useUpdateAmountWhenRouteChanges = () => {
+  const [route] = useAtom(skipRouteAtom);
+  const [direction] = useAtom(swapDirectionAtom);
+  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
+
+  useEffect(() => {
+    if (!route.data || !sourceAsset || !destinationAsset) return;
+
+    const swapInAmount = convertTokenAmountToHumanReadableAmount(
+      route.data.amountOut,
+      destinationAsset.decimals
+    );
+    const swapOutAmount = convertTokenAmountToHumanReadableAmount(
+      route.data.amountIn,
+      sourceAsset.decimals
+    );
+
+    const swapInAmountChanged = swapInAmount !== destinationAsset.amount;
+    const swapOutAmountChanged = swapOutAmount !== sourceAsset.amount;
+
+    if (direction === "swap-in" && swapInAmountChanged) {
+      setDestinationAsset((old) => ({
+        ...old,
+        amount: limitDecimalsDisplayed(swapInAmount),
+      }));
+    } else if (direction === "swap-out" && swapOutAmountChanged) {
+      setSourceAsset((old) => ({
+        ...old,
+        amount: limitDecimalsDisplayed(swapOutAmount),
+      }));
+    }
+  }, [route.data, sourceAsset, destinationAsset, direction, setSourceAsset, setDestinationAsset]);
+
+};
diff --git a/packages/widget-v2/src/state/route.ts b/packages/widget-v2/src/state/route.ts
@@ -12,7 +12,6 @@ import {
   debouncedSourceAssetAmountAtom,
   debouncedDestinationAssetAmountAtom,
   isInvertingSwapAtom,
-  routeAmountEffect,
 } from "./swapPage";
 
 const skipRouteRequestAtom = atom<RouteRequest | undefined>((get) => {
@@ -86,8 +85,6 @@ export const _skipRouteAtom = atomWithQuery((get) => {
   const error = get(errorAtom);
   const skipRouteConfig = get(routeConfigAtom);
 
-  get(routeAmountEffect);
-
   const queryEnabled =
     params !== undefined &&
     (Number(params.amountIn) > 0 || Number(params.amountOut) > 0) &&

diff --git a/packages/widget-v2/src/state/swapPage.ts b/packages/widget-v2/src/state/swapPage.ts
@@ -1,10 +1,7 @@
 import { atom } from "jotai";
 import { ClientAsset } from "@/state/skipClient";
 import { skipRouteAtom } from "@/state/route";
-import { atomEffect } from "jotai-effect";
 import { atomWithDebounce } from "@/utils/atomWithDebounce";
-import { convertTokenAmountToHumanReadableAmount } from "@/utils/crypto";
-import { limitDecimalsDisplayed } from "@/utils/number";
 import { atomWithStorageNoCrossTabSync } from "@/utils/misc";
 
 export type AssetAtom = Partial<ClientAsset> & {
@@ -128,38 +125,6 @@ export const invertSwapAtom = atom(null, (get, set) => {
   }
 });
 
-export const routeAmountEffect = atomEffect((get, set) => {
-  const route = get(skipRouteAtom);
-  const direction = get(swapDirectionAtom);
-  const sourceAsset = get(sourceAssetAtom);
-  const destinationAsset = get(destinationAssetAtom);
-
-  if (!route.data || !sourceAsset || !destinationAsset) return;
-
-  const swapInAmount = convertTokenAmountToHumanReadableAmount(
-    route.data.amountOut,
-    destinationAsset.decimals
-  );
-  const swapOutAmount = convertTokenAmountToHumanReadableAmount(
-    route.data.amountIn,
-    sourceAsset.decimals
-  );
-  const swapInAmountChanged = swapInAmount !== destinationAsset.amount;
-  const swapOutAmountChanged = swapOutAmount !== sourceAsset.amount;
-
-  if (direction === "swap-in" && swapInAmountChanged) {
-    set(destinationAssetAtom, (old) => ({
-      ...old,
-      amount: limitDecimalsDisplayed(swapInAmount),
-    }));
-  } else if (direction === "swap-out" && swapOutAmountChanged) {
-    set(sourceAssetAtom, (old) => ({
-      ...old,
-      amount: limitDecimalsDisplayed(swapOutAmount),
-    }));
-  }
-});
-
 export type ChainFilter = {
   source?: Record<string, string[] | undefined>;
   destination?: Record<string, string[] | undefined>;
@@ -173,3 +138,7 @@ export const defaultSwapSettings = {
 };
 
 export const swapSettingsAtom = atomWithStorageNoCrossTabSync("swapSettingsAtom", defaultSwapSettings);
+
+export const setSlippageAtom = atom(null, (_get, set, slippage: number) => {
+  set(swapSettingsAtom, (state) => ({ ...state, slippage }));
+});
diff --git a/yarn.lock b/yarn.lock
@@ -5434,6 +5434,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@leapwallet/cosmos-social-login-capsule-provider@npm:^0.0.44":
+  version: 0.0.44
+  resolution: "@leapwallet/cosmos-social-login-capsule-provider@npm:0.0.44"
+  dependencies:
+    "@cosmjs/amino": 0.31.3
+    "@leapwallet/cosmos-social-login-core": 0.0.1
+    "@usecapsule/cosmjs-v0-integration": 1.21.0
+    "@usecapsule/web-sdk": 1.23.0
+    long: 5.2.3
+  checksum: 771ecb7371528f9e8782b7b92711bb848acbb5a063681e6c07d1e541cd423f18fc1c15c714e64664f3fba6821dec598fea92aff2c8ec2baf0ddce5dad13ea2e9
+  languageName: node
+  linkType: hard
+
 "@leapwallet/cosmos-social-login-core@npm:0.0.1":
   version: 0.0.1
   resolution: "@leapwallet/cosmos-social-login-core@npm:0.0.1"
@@ -7915,6 +7928,7 @@ __metadata:
     "@eslint/js": ^9.9.0
     "@initia/initia-registry": ^0.1.16
     "@keplr-wallet/types": ^0.12.125
+    "@leapwallet/cosmos-social-login-capsule-provider": ^0.0.44
     "@penumbra-zone/bech32m": ^7.0.0
     "@penumbra-zone/client": ^18.1.0
     "@penumbra-zone/protobuf": ^6.0.0
@@ -7952,7 +7966,7 @@ __metadata:
     eslint: ^9.9.0
     eslint-plugin-react-hooks: ^4.6.2
     graz: ^0.1.25
-    jotai: ^2.9.1
+    jotai: ^2.10.1
     jotai-effect: ^1.0.2
     jotai-tanstack-query: ^0.8.6
     lodash.debounce: ^4.0.8
@@ -7972,8 +7986,8 @@ __metadata:
     wagmi: ^2.12.8
     zod: ^3.23.8
   peerDependencies:
-    react: 17.x || 18.x
-    react-dom: 17.x || 18.x
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
   languageName: unknown
   linkType: soft
 
@@ -10637,6 +10651,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@usecapsule/cosmjs-v0-integration@npm:1.21.0":
+  version: 1.21.0
+  resolution: "@usecapsule/cosmjs-v0-integration@npm:1.21.0"
+  dependencies:
+    "@usecapsule/core-sdk": 1.21.0
+  peerDependencies:
+    "@cosmjs/amino": ">= 0.31.3 < 1"
+    "@cosmjs/encoding": ">= 0.31.3 < 1"
+    "@cosmjs/proto-signing": ">= 0.31.3 < 1"
+  checksum: 46c24f5c2106ad9cc6f7a4e77657aad02bdd0935abfd06d9b56089ff25cc4c3bca226805145a746826b4bf16a67d825185e759f08bb6a9ffb7d679fda09272e6
+  languageName: node
+  linkType: hard
+
 "@usecapsule/cosmjs-v0-integration@npm:^1.21.0":
   version: 1.22.0
   resolution: "@usecapsule/cosmjs-v0-integration@npm:1.22.0"
@@ -20410,9 +20437,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jotai@npm:^2.9.1":
-  version: 2.10.0
-  resolution: "jotai@npm:2.10.0"
+"jotai@npm:^2.10.1":
+  version: 2.10.1
+  resolution: "jotai@npm:2.10.1"
   peerDependencies:
     "@types/react": ">=17.0.0"
     react: ">=17.0.0"
@@ -20421,7 +20448,7 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 79bcecf57156f1820cf2aa8cfa6a843678dcf86c3f3a2153acf2dab8f839933a3f764f9b967cc75d0f7c767a366f6d9693210ddf783900a2b9bddd20a02285ae
+  checksum: c9580f29fbbfce3e18f044e2bb80bb563a6d15952451a0430f28c4bd6340498bbec0537e8cf38722de117d4ec5846aa2d81489cd55e41b28d018776d2ae533e4
   languageName: node
   linkType: hard