add toast hook + error handling progress

Signed-off-by: Ruben <rubdeivis@gmail.com>
kumawallet · Feb 2, 2023 · 877409d · 877409d
1 parent 1742807
commit 877409d
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 276 deletions.
diff --git a/.gitignore b/.gitignore
@@ -390,4 +390,6 @@ $RECYCLE.BIN/
 public/manifest.json
 
 #copied contentStyle
-public/contentStyle.css
+public/contentStyle.css
+
+*.timestamp-*.mjs
diff --git a/src/hooks/useToast.tsx b/src/hooks/useToast.tsx
@@ -1,8 +1,8 @@
 import { toast } from "react-toastify";
 
 export const useToast = () => {
-  const showErrorToast = (message: string) => {
-    toast.error(message, {
+  const showErrorToast = (message: string | any) => {
+    toast.error(String(message), {
       position: toast.POSITION.TOP_CENTER,
       autoClose: false,
       className: "toast",

diff --git a/src/providers/AccountProvider.tsx b/src/providers/AccountProvider.tsx
@@ -9,6 +9,7 @@ import {
   useReducer,
 } from "react";
 import { Account } from "@src/utils/storage/entities/Accounts";
+import { useToast } from "@src/hooks";
 
 interface InitialState {
   accounts: Account[];
@@ -56,6 +57,8 @@ const reducer = (state: InitialState, action: any): InitialState => {
 };
 
 export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { showErrorToast } = useToast();
+
   const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
@@ -73,7 +76,8 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
       });
       return accounts;
     } catch (error) {
-      console.log(error);
+      showErrorToast(error);
+      return [];
     }
   };
 
@@ -88,16 +92,19 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
       });
       return selectedAccount;
     } catch (error) {
-      console.log(error);
+      showErrorToast(error);
     }
   };
 
   const setSelectedAccount = async (account: Account) => {
-    await Storage.getInstance().setSelectedAccount(account);
-    getSelectedAccount();
+    try {
+      await Storage.getInstance().setSelectedAccount(account);
+      getSelectedAccount();
+    } catch (error) {
+      showErrorToast(error);
+    }
   };
 
-
   return (
     <AccountContext.Provider
       value={{

diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
@@ -1,13 +1,13 @@
-import { useEffect } from "react";
-import Extension from "../utils/Extension";
 import {
   createContext,
   FC,
   PropsWithChildren,
   useContext,
   useReducer,
 } from "react";
+import Extension from "../utils/Extension";
 import { mnemonicGenerate } from "@polkadot/util-crypto";
+import { useToast } from "@hooks/index";
 
 interface InitialState {
   isInit: boolean;
@@ -17,14 +17,14 @@ const initialState: InitialState = {
   isInit: true,
 };
 
-const AuthContext = createContext(
-  {} as {
-    state: InitialState;
-    createAccount: (newAccount: any) => Promise<boolean>;
-    importAccount: (newAccount: any) => Promise<boolean>;
-    deriveAccount: (newAccount: any) => Promise<boolean>;
-  }
-);
+interface AuthContext {
+  state: InitialState;
+  createAccount: (newAccount: any) => Promise<boolean>;
+  importAccount: (newAccount: any) => Promise<boolean>;
+  deriveAccount: (newAccount: any) => Promise<boolean>;
+}
+
+const AuthContext = createContext({} as AuthContext);
 
 const reducer = (state: InitialState, action: any): InitialState => {
   switch (action.type) {
@@ -40,16 +40,18 @@ const reducer = (state: InitialState, action: any): InitialState => {
 };
 
 export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { showErrorToast } = useToast();
+
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  useEffect(() => {
-    (async () => {
-      dispatch({
-        type: "init",
-        payload: {},
-      });
-    })();
-  }, []);
+  // useEffect(() => {
+  //   (async () => {
+  //     dispatch({
+  //       type: "init",
+  //       payload: {},
+  //     });
+  //   })();
+  // }, []);
 
   const createAccount = async ({ name, password, confirmPassword }: any) => {
     try {
@@ -59,7 +61,7 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
       const seed = mnemonicGenerate(24);
       return Extension.signUp({ password, name, seed });
     } catch (error) {
-      console.log(error as string);
+      showErrorToast(error);
       return false;
     }
   };
@@ -78,7 +80,7 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
         accountType,
       });
     } catch (error) {
-      console.log(error as string);
+      showErrorToast(error);
       return false;
     }
   };
@@ -89,7 +91,7 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
       await Extension.setSelectedAccount(account);
       return true;
     } catch (error) {
-      console.log(error as string);
+      showErrorToast(error);
       return false;
     }
   };

diff --git a/src/providers/NetworkProvider.tsx b/src/providers/NetworkProvider.tsx
@@ -10,6 +10,7 @@ import Extension from "../utils/Extension";
 import Storage from "@src/utils/storage/Storage";
 import { ApiPromise, WsProvider } from "@polkadot/api";
 import { useEffect } from "react";
+import { useToast } from "../hooks/useToast";
 
 interface InitialState {
   chains: typeof CHAINS;
@@ -23,25 +24,20 @@ const initialState: InitialState = {
   api: null,
 };
 
-const NetworkContext = createContext(
-  {} as {
-    state: InitialState;
-    setSelectNetwork: (network: any) => void;
-    getSelectedNetwork: () => Promise<string | undefined>;
-  }
-);
+interface NetworkContext {
+  state: InitialState;
+  setSelectNetwork: (network: Chain) => void;
+  getSelectedNetwork: () => Promise<Chain | undefined>;
+}
+
+const NetworkContext = createContext({} as NetworkContext);
 
 const getApi = (rpc: string) => {
   return ApiPromise.create({ provider: new WsProvider(rpc) });
 };
 
 const reducer = (state: InitialState, action: any): InitialState => {
   switch (action.type) {
-    case "init": {
-      return {
-        ...state,
-      };
-    }
     case "select-network": {
       return {
         ...state,
@@ -60,34 +56,48 @@ const reducer = (state: InitialState, action: any): InitialState => {
 };
 
 export const NetworkProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { showErrorToast } = useToast();
+
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const setSelectNetwork = async (network: Chain) => {
-    await Extension.setNetwork(network);
+    try {
+      await Extension.setNetwork(network);
 
-    dispatch({
-      type: "select-network",
-      payload: network,
-    });
+      dispatch({
+        type: "select-network",
+        payload: network,
+      });
+    } catch (error) {
+      showErrorToast(error);
+    }
   };
 
   const getSelectedNetwork = async () => {
+    try {
+      const { chain: selectedNetwork } =
+        await Storage.getInstance().getNetwork();
+      dispatch({
+        type: "select-network",
+        payload: selectedNetwork,
+      });
 
-    const { chain: selectedNetwork } = await Storage.getInstance().getNetwork();
-    dispatch({
-      type: "select-network",
-      payload: selectedNetwork,
-    });
-
-    return selectedNetwork;
+      return selectedNetwork;
+    } catch (error) {
+      showErrorToast(error);
+    }
   };
 
   const setNewApi = async (chain: Chain) => {
-    const api = await getApi(chain.rpc[0]);
-    dispatch({
-      type: "set-api",
-      payload: api,
-    });
+    try {
+      const api = await getApi(chain.rpc[0]);
+      dispatch({
+        type: "set-api",
+        payload: api,
+      });
+    } catch (error) {
+      showErrorToast(error);
+    }
   };
 
   useEffect(() => {

diff --git a/tsconfig.json b/tsconfig.json
@@ -20,7 +20,8 @@
       "@src/*": ["src/*"],
       "@assets/*": ["src/assets/*"],
       "@pages/*": ["src/pages/*"],
-      "@styles/*": ["src/styles/*"]
+      "@styles/*": ["src/styles/*"],
+      "@hooks/*": ["src/hooks/*"]
     }
   },
   "include": ["src",