chore: add Recoil

FuelLabs · May 3, 2022 · ef15e64 · ef15e64
1 parent 66b44d5
commit ef15e64
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 27 deletions.
diff --git a/client/package.json b/client/package.json
@@ -21,6 +21,8 @@
     "react-number-format": "^4.9.1",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.2",
+    "recoil-persist": "^4.1.0",
     "typescript": "^4.5.5",
     "url-join": "^4.0.1",
     "web-vitals": "^2.1.4"

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter } from "react-router-dom";
+import { RecoilRoot } from "recoil";
 import { WalletProvider } from "src/context/WalletContext";
 
 import AppRoutes from "./AppRoutes";
@@ -7,10 +8,12 @@ const { PUBLIC_URL } = process.env;
 
 export default function App() {
   return (
-    <BrowserRouter basename={PUBLIC_URL}>
-      <WalletProvider>
-        <AppRoutes />
-      </WalletProvider>
-    </BrowserRouter>
+    <RecoilRoot>
+      <BrowserRouter basename={PUBLIC_URL}>
+        <WalletProvider>
+          <AppRoutes />
+        </WalletProvider>
+      </BrowserRouter>
+    </RecoilRoot>
   );
 }
diff --git a/client/src/context/WalletContext.tsx b/client/src/context/WalletContext.tsx
@@ -5,10 +5,11 @@ import {
   TransactionResult,
   CoinQuantity,
 } from "fuels";
-import { saveWallet, loadWallet } from "src/lib/walletStorage";
 import { CoinETH } from "src/lib/constants";
 import { randomBytes } from "ethers/lib/utils";
 import { FAUCET_AMOUNT, FUEL_PROVIDER_URL } from "src/config";
+import { atom, useRecoilState } from "recoil";
+import { persistEffect } from "src/lib/recoilEffects";
 
 interface WalletProviderContext {
   sendTransaction: (data: any) => void;
@@ -18,15 +19,21 @@ interface WalletProviderContext {
   faucet: () => Promise<TransactionResult>;
 }
 
+const walletPrivateKeyState = atom<string | null>({
+  key: "privateKey",
+  default: null,
+  effects_UNSTABLE: [persistEffect],
+});
+
 // @ts-ignore
 export const WalletContext = React.createContext<WalletProviderContext>();
 
 export const useWallet = () => useContext(WalletContext);
 
 export const WalletProvider = ({ children }: PropsWithChildren<{}>) => {
-  const getWallet = () => {
-    const privateKey = loadWallet<string>();
+  const [privateKey, setPrivateKey] = useRecoilState(walletPrivateKeyState);
 
+  const getWallet = () => {
     if (!privateKey) return null;
 
     return new Wallet(privateKey, FUEL_PROVIDER_URL);
@@ -39,7 +46,7 @@ export const WalletProvider = ({ children }: PropsWithChildren<{}>) => {
           const wallet = Wallet.generate({
             provider: FUEL_PROVIDER_URL,
           });
-          saveWallet(wallet.privateKey);
+          setPrivateKey(wallet.privateKey);
           return wallet;
         },
         getWallet,

diff --git a/client/src/lib/recoilEffects.ts b/client/src/lib/recoilEffects.ts
@@ -0,0 +1,7 @@
+import { recoilPersist } from 'recoil-persist';
+import { LocalStorageKey } from './constants';
+
+export const persistEffect = recoilPersist({
+  key: `${LocalStorageKey}-state`,
+  storage: localStorage,
+}).persistAtom;
diff --git a/client/src/lib/walletStorage.tsx b/client/src/lib/walletStorage.tsx
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -5115,6 +5115,11 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+hamt_plus@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE=
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz"
@@ -7856,6 +7861,18 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil-persist@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/recoil-persist/-/recoil-persist-4.1.0.tgz#7406ce14f448783fbff9f9011da8235c84838249"
+  integrity sha512-7ruOsLhrEqBpl8EM6j5OITSKJXvH7BfSDxO5m1Heb3dJo6mnCJ3t4ln1KDJhZrvFOkqyO37Ufv3VB1wU06tfCA==
+
+recoil@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.2.tgz#37aafc9e0674abae639263354a11c910e71bf78a"
+  integrity sha512-OT4pI7FOUHcIoRtjsL5Lqq+lFFzQfir4MIbUkqyJ3nqv3WfBP1pHepyurqTsK5gw+T+I2R8+uOD28yH+Lg5o4g==
+  dependencies:
+    hamt_plus "1.0.2"
+
 recursive-readdir@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz"