Refactor. update navigator (#323)

packages/adena-extension/src/app.tsx → packages/adena-extension/src/App/app-provider.tsx

@@ -1,15 +1,16 @@
-import React, { ReactElement, Suspense } from 'react';
+import React, { ReactElement, ReactNode, Suspense } from 'react';
+import { HashRouter } from 'react-router-dom';
+
 import { ThemeProvider } from 'styled-components';
 import theme from '@styles/theme';
-import { CustomRouter } from '@router/custom-router';
 import { GlobalStyle } from '@styles/global-style';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AdenaProvider, WalletProvider } from '@common/provider';
 
 const queryClient = new QueryClient();
 
-const App = (): ReactElement => {
+const AppProvider = ({ children }: { children: ReactNode }): ReactElement => {
   return (
     <>
       <GlobalStyle />
@@ -19,7 +20,7 @@ const App = (): ReactElement => {
             <WalletProvider>
               <ThemeProvider theme={theme}>
                 <Suspense fallback={<div>Loading...</div>}>
-                  <CustomRouter />
+                  <HashRouter>{children}</HashRouter>
                 </Suspense>
               </ThemeProvider>
             </WalletProvider>
@@ -30,4 +31,4 @@ const App = (): ReactElement => {
   );
 };
 
-export default App;
+export default AppProvider;

packages/adena-extension/src/App/index.tsx

@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react';
+import { CustomRouter } from '@router/custom-router';
+
+import AppProvider from './app-provider';
+import useApp from './use-app';
+
+const RunApp = (): ReactElement => {
+  useApp();
+  return <CustomRouter />;
+};
+
+const App = (): ReactElement => {
+  return (
+    <AppProvider>
+      <RunApp />
+    </AppProvider>
+  );
+};
+
+export default App;

packages/adena-extension/src/router/background/index.tsx → packages/adena-extension/src/App/use-app.ts

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
@@ -14,9 +14,7 @@ import { fetchHealth } from '@common/utils/client-utils';
 import { CommonState } from '@states';
 import { NetworkMetainfo } from '@types';
 
-type BackgroundProps = React.PropsWithChildren<unknown>;
-
-export const Background: React.FC<BackgroundProps> = ({ children }) => {
+const useApp = (): void => {
   const { wallet, walletStatus } = useWalletContext();
   const { initAccountNames } = useAccountName();
   const { currentAccount } = useCurrentAccount();
@@ -73,6 +71,6 @@ export const Background: React.FC<BackgroundProps> = ({ children }) => {
       [currentNetwork.id]: !healthy,
     });
   }
-
-  return <div>{children}</div>;
 };
+
+export default useApp;

packages/adena-extension/src/common/validation/validation-address-book.ts

@@ -1,6 +1,6 @@
 import { AddressBookValidationError } from '@common/errors/validation/address-book-validation-error';
 import { addressValidationCheck } from '@common/utils/client-utils';
-import { BookListProps } from '@pages/certify/address-book';
+import { AddressBookItem } from '@repositories/wallet';
 import { Account } from 'adena-module';
 
 export const validateInvalidAddress = (address: string): boolean => {
@@ -12,16 +12,16 @@ export const validateInvalidAddress = (address: string): boolean => {
 };
 
 export const validateAlreadyAddress = (
-  currData: BookListProps,
-  allData: BookListProps[],
+  currData: AddressBookItem,
+  allData: AddressBookItem[],
   isAdd: boolean,
 ): boolean => {
   let check: boolean;
   if (isAdd) {
-    check = allData.some((v: BookListProps) => v.address === currData.address);
+    check = allData.some((v: AddressBookItem) => v.address === currData.address);
   } else {
     const filterData = allData.filter(
-      (v: BookListProps) => v.id !== currData.id && v.address === currData.address,
+      (v: AddressBookItem) => v.id !== currData.id && v.address === currData.address,
     );
     check = Boolean(filterData.length);
   }
@@ -32,7 +32,7 @@ export const validateAlreadyAddress = (
 };
 
 export const validateAlreadyAddressByAccounts = (
-  currData: BookListProps,
+  currData: AddressBookItem,
   accounts: Account[],
   isAdd: boolean,
 ): boolean => {
@@ -50,16 +50,16 @@ export const validateAlreadyAddressByAccounts = (
 };
 
 export const validateAlreadyName = (
-  currData: BookListProps,
-  allData: BookListProps[],
+  currData: AddressBookItem,
+  allData: AddressBookItem[],
   isAdd: boolean,
 ): boolean => {
   let check: boolean;
   if (isAdd) {
-    check = allData.some((v: BookListProps) => v.name === currData.name);
+    check = allData.some((v: AddressBookItem) => v.name === currData.name);
   } else {
     const filterData = allData.filter(
-      (v: BookListProps) => v.id !== currData.id && v.name === currData.name,
+      (v: AddressBookItem) => v.id !== currData.id && v.name === currData.name,
     );
     check = Boolean(filterData.length);
   }

packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-container.tsx

@@ -13,13 +13,15 @@ import { useTokenBalance } from '@hooks/use-token-balance';
 import { RoutePath } from '@router/path';
 
 import { SideMenuAccountInfo, TokenBalanceType } from '@types';
+import useLink from '@hooks/use-link';
 
 interface SideMenuContainerProps {
   open: boolean;
   setOpen: (opened: boolean) => void;
 }
 
 const SideMenuContainer: React.FC<SideMenuContainerProps> = ({ open, setOpen }) => {
+  const { openLink } = useLink();
   const { walletService } = useAdenaContext();
   const navigate = useNavigate();
   const { changeCurrentAccount } = useCurrentAccount();
@@ -77,10 +79,10 @@ const SideMenuContainer: React.FC<SideMenuContainerProps> = ({ open, setOpen })
     [navigate, setOpen],
   );
 
-  const openLink = useCallback(
+  const onOpenLink = useCallback(
     async (link: string) => {
       setOpen(false);
-      window.open(link, '_blank');
+      openLink(link);
     },
     [setOpen],
   );
@@ -115,7 +117,7 @@ const SideMenuContainer: React.FC<SideMenuContainerProps> = ({ open, setOpen })
       accounts={sideMenuAccounts}
       changeAccount={changeAccount}
       movePage={movePage}
-      openLink={openLink}
+      openLink={onOpenLink}
       lock={lock}
       close={close}
     />

packages/adena-extension/src/hooks/certify/use-change-password.ts

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { PasswordValidationError } from '@common/errors';
 import { useAdenaContext } from '@hooks/use-context';
 import {
@@ -8,6 +7,7 @@ import {
   validateNotMatchConfirmPassword,
   validateWrongPasswordLength,
 } from '@common/validation';
+import useAppNavigate from '@hooks/use-app-navigate';
 
 export type UseChangePasswordReturn = {
   currPwdState: {
@@ -39,7 +39,7 @@ export type UseChangePasswordReturn = {
 
 export const useChangePassword = (): UseChangePasswordReturn => {
   const { walletService } = useAdenaContext();
-  const navigate = useNavigate();
+  const { goBack } = useAppNavigate();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [inputs, setInputs] = useState({
     currPwd: '',
@@ -144,12 +144,11 @@ export const useChangePassword = (): UseChangePasswordReturn => {
     }
     return 'FAIL';
   };
-  const cancelButtonClick = (): void => navigate(-1);
 
   const saveButtonClick = async (): Promise<void> => {
     const state = await validationCheck();
     if (state === 'FINISH') {
-      return navigate(-1);
+      return goBack();
     }
   };
 
@@ -173,7 +172,7 @@ export const useChangePassword = (): UseChangePasswordReturn => {
     errorMessage: errorMessage,
     buttonState: {
       onClick: {
-        cancel: cancelButtonClick,
+        cancel: goBack,
         save: saveButtonClick,
       },
       disabled: Object.values(inputs).some((el) => el === ''),

packages/adena-extension/src/hooks/certify/use-create-password.ts

@@ -1,6 +1,5 @@
 import { RoutePath } from '@router/path';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
 import { PasswordValidationError } from '@common/errors';
 import { useAdenaContext } from '@hooks/use-context';
 import {
@@ -9,23 +8,8 @@ import {
   validateWrongPasswordLength,
 } from '@common/validation';
 import { AdenaWallet } from 'adena-module';
-
-interface CreatePasswordState {
-  type: 'SEED' | 'LEDGER' | 'GOOGLE' | 'NONE';
-}
-
-interface SeedState extends CreatePasswordState {
-  seeds: string;
-}
-
-interface LedgerState extends CreatePasswordState {
-  accounts: Array<string>;
-  currentAccount: string | null;
-}
-
-interface GoogleState extends CreatePasswordState {
-  privateKey: string;
-}
+import useAppNavigate from '@hooks/use-app-navigate';
+import { CreateAccountState, GoogleState, LedgerState, SeedState } from '@types';
 
 export type UseCreatePasswordReturn = {
   pwdState: {
@@ -52,9 +36,8 @@ export type UseCreatePasswordReturn = {
 };
 
 export const useCreatePassword = (): UseCreatePasswordReturn => {
-  const location = useLocation();
+  const { navigate, params } = useAppNavigate<RoutePath.CreatePassword>();
   const { walletService, accountService } = useAdenaContext();
-  const navigate = useNavigate();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [inputs, setInputs] = useState({
     pwd: '',
@@ -64,17 +47,9 @@ export const useCreatePassword = (): UseCreatePasswordReturn => {
   const [isPwdError, setIsPwdError] = useState(false);
   const [isConfirmPwdError, setIsConfirmPwdError] = useState(false);
   const { pwd, confirmPwd } = inputs;
-  const [locationState, setLocationState] = useState<SeedState | LedgerState | GoogleState>(
-    location.state,
-  );
   const [errorMessage, setErrorMessage] = useState('');
   const [activated, setActivated] = useState(false);
 
-  useEffect(() => {
-    const locationState = location.state;
-    setLocationState(locationState);
-  }, [location]);
-
   useEffect(() => {
     setIsPwdError(false);
     setIsConfirmPwdError(false);
@@ -93,15 +68,15 @@ export const useCreatePassword = (): UseCreatePasswordReturn => {
     }
   }, [activated]);
 
-  const isSeedPhrase = (state: CreatePasswordState): state is SeedState => {
+  const isSeedPhrase = (state: CreateAccountState): state is SeedState => {
     return state.type === 'SEED';
   };
 
-  const isLedgerState = (state: CreatePasswordState): state is LedgerState => {
+  const isLedgerState = (state: CreateAccountState): state is LedgerState => {
     return state.type === 'LEDGER';
   };
 
-  const isGoogleState = (state: CreatePasswordState): state is GoogleState => {
+  const isGoogleState = (state: CreateAccountState): state is GoogleState => {
     return state.type === 'GOOGLE';
   };
 
@@ -166,13 +141,13 @@ export const useCreatePassword = (): UseCreatePasswordReturn => {
   };
 
   const createAccounts = (): 'FAIL' | Promise<'FAIL' | 'FINISH'> => {
-    if (isSeedPhrase(locationState)) {
-      return createWalletAccountsBySeed(locationState);
+    if (isSeedPhrase(params)) {
+      return createWalletAccountsBySeed(params);
     }
-    if (isGoogleState(locationState)) {
-      return createWalletAccountsByGoogle(locationState);
+    if (isGoogleState(params)) {
+      return createWalletAccountsByGoogle(params);
     }
-    if (isLedgerState(locationState)) {
+    if (isLedgerState(params)) {
       return 'FAIL';
     }
     return 'FAIL';
@@ -216,7 +191,7 @@ export const useCreatePassword = (): UseCreatePasswordReturn => {
     await accountService.clear();
     const result = await createAccounts();
     if (result === 'FINISH') {
-      navigate(RoutePath.LaunchAdena, { state: locationState });
+      navigate(RoutePath.LaunchAdena, { state: params });
       setActivated(false);
       return;
     }