Save Swap Page global state and load page data (#117)

client/package.json

@@ -36,6 +36,7 @@
     "ethers": "^5.5.4",
     "fuels": "^0.0.0-master-d5e02003",
     "graphql-request": "^4.2.0",
+    "jotai": "^1.6.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-error-boundary": "^3.1.4",

client/src/pages/SwapPage/SwapComponent.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef, useState } from "react";
-import assets from "src/lib/CoinsMetadata";
+import { useAtom } from 'jotai';
+import { useEffect, useRef } from "react";
 import { CoinInput, useCoinInput } from "src/components/CoinInput";
 import { InvertButton } from "src/components/InvertButton";
-import { ActiveInput, SwapState } from "./types";
 import { Coin } from "src/types";
+import { swapActiveInputAtom, swapAmountAtom, swapCoinsAtom } from './jotai';
+import { ActiveInput, SwapState } from './types';
 
 const style = {
   switchDirection: `flex items-center justify-center -my-5`,
@@ -18,12 +19,10 @@ export function SwapComponent({
   previewAmount: previewValue,
   onChange,
 }: SwapComponentProps) {
-  const activeInput = useRef<ActiveInput>(ActiveInput.from);
-
-  const [[coinFrom, coinTo], setCoins] = useState<[Coin, Coin]>([
-    assets[0],
-    assets[1],
-  ]);
+  const [initialAmount, setInitialAmount] = useAtom(swapAmountAtom);
+  const [initialActiveInput, setInitialActiveInput] = useAtom(swapActiveInputAtom);
+  const [[coinFrom, coinTo], setCoins] = useAtom(swapCoinsAtom);
+  const activeInput = useRef<ActiveInput>(initialActiveInput);
 
   const handleInvertCoins = () => {
     if (activeInput.current === ActiveInput.to) {
@@ -51,13 +50,29 @@ export function SwapComponent({
   });
 
   useEffect(() => {
+    if (activeInput.current === ActiveInput.to) {
+      toInput.setAmount(initialAmount);
+    } else {
+      fromInput.setAmount(initialAmount);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const amount = activeInput.current === ActiveInput.from
+      ? fromInput.amount
+      : toInput.amount;
+
+    // Set value to hydrate
+    setInitialAmount(amount);
+    // Set current input
+    setInitialActiveInput(activeInput?.current);
+
+    // Call on onChange
     onChange?.({
       from: coinFrom.assetId,
       to: coinTo.assetId,
-      amount:
-        activeInput.current === ActiveInput.from
-          ? fromInput.amount
-          : toInput.amount,
+      amount,
       direction: activeInput.current,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

client/src/pages/SwapPage/jotai.ts

@@ -0,0 +1,11 @@
+import { atom } from 'jotai';
+import assets from "src/lib/CoinsMetadata";
+import { Coin } from 'src/types';
+import { ActiveInput } from './types';
+
+export const swapActiveInputAtom = atom<ActiveInput>(ActiveInput.from);
+export const swapCoinsAtom = atom<[Coin, Coin]>([
+  assets[0],
+  assets[1],
+])
+export const swapAmountAtom = atom<bigint | null>(null);

client/yarn.lock

@@ -6917,6 +6917,11 @@ jest@^27.4.3:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+jotai@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.6.6.tgz#ec3a8b4e5a323b00c2f9ca0d05825d0aeaeebe75"
+  integrity sha512-rzUyxHFImnDDjUmC0i0BXyppq1M6ZxrHjhp0SK3VQXvXYAu5Hz9wPJ6w207s2Mlv7jpfiIf26w9m82FLCP3eqw==
+
 [email protected], js-sha3@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"