frontend: use navigate instead of route

The route component was added so that class based components can
keep using route function.

Once all components are functional components route utils function
can be removed.

Author: thisconnect

frontends/web/src/routes/account/add/add.tsx

@@ -15,6 +15,7 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import * as backendAPI from '@/api/backend';
 import * as keystoresAPI from '@/api/keystores';
@@ -26,7 +27,6 @@ import { Step, Steps } from './components/steps';
 import { CoinDropDown } from './components/coin-dropdown';
 import { Check } from '@/components/icon/icon';
 import { AddAccountGuide } from './add-account-guide';
-import { route } from '@/utils/route';
 import { addAccount, CoinCode, TAddAccount, IAccount } from '@/api/account';
 import styles from './add.module.css';
 
@@ -37,6 +37,7 @@ type TAddAccountGuide = {
 type TStep = 'select-coin' | 'choose-name' | 'success';
 
 export const AddAccount = ({ accounts }: TAddAccountGuide) => {
+  const navigate = useNavigate();
   const [accountCode, setAccountCode] = useState<string>();
   const [accountName, setAccountName] = useState('');
   const [coinCode, setCoinCode] = useState<'choose' | CoinCode>('choose');
@@ -87,7 +88,7 @@ export const AddAccount = ({ accounts }: TAddAccountGuide) => {
   const back = () => {
     switch (step) {
     case 'select-coin':
-      route('/settings/manage-accounts');
+      navigate('/settings/manage-accounts');
       break;
     case 'choose-name':
       setStep('select-coin');
@@ -122,7 +123,7 @@ export const AddAccount = ({ accounts }: TAddAccountGuide) => {
       break;
     case 'success':
       if (accountCode) {
-        route(`/account/${accountCode}`);
+        navigate(`/account/${accountCode}`);
       }
       break;
     }

frontends/web/src/routes/account/info/info.tsx

@@ -16,11 +16,11 @@
  */
 
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useLoad } from '@/hooks/api';
 import { useEsc } from '@/hooks/keyboard';
 import { getInfo, IAccount, AccountCode } from '@/api/account';
-import { route } from '@/utils/route';
 import { isBitcoinBased } from '@/routes/account/utils';
 import { ButtonLink } from '@/components/forms';
 import { Header } from '@/components/layout';
@@ -37,12 +37,13 @@ export const Info = ({
   accounts,
   code,
 }: TProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const info = useLoad(getInfo(code));
   const [viewXPub, setViewXPub] = useState<number>(0);
   const account = accounts.find(({ code: accountCode }) => accountCode === code);
 
-  useEsc(() => route(`/account/${code}`));
+  useEsc(() => navigate(`/account/${code}`));
 
   if (!account || !info) {
     return null;

frontends/web/src/routes/account/info/signingconfiguration.tsx

@@ -16,8 +16,8 @@
  */
 
 import { useState, ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { route } from '@/utils/route';
 import { AccountCode, IAccount, TBitcoinSimple, TEthereumSimple, TSigningConfiguration, verifyXPub } from '@/api/account';
 import { getScriptName, isBitcoinBased } from '@/routes/account/utils';
 import { alertUser } from '@/components/alert/Alert';
@@ -35,6 +35,7 @@ type TProps = {
 }
 
 export const SigningConfiguration = ({ account, info, code, signingConfigIndex, children }: TProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [verifying, setVerifying] = useState(false);
 
@@ -111,7 +112,7 @@ export const SigningConfiguration = ({ account, info, code, signingConfigIndex,
             {t('accountInfo.verify')}
           </Button>
         ) : (
-          <Button className={style.verifyButton} primary onClick={() => route(`/account/${code}/receive`)}>
+          <Button className={style.verifyButton} primary onClick={() => navigate(`/account/${code}/receive`)}>
             {t('receive.verify')}
           </Button>
         ) }

frontends/web/src/routes/account/receive/receive-bb01.tsx

@@ -16,11 +16,11 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useLoad } from '@/hooks/api';
 import { useEsc } from '@/hooks/keyboard';
 import * as accountApi from '@/api/account';
-import { route } from '@/utils/route';
 import { getScriptName, isEthereumBased } from '@/routes/account/utils';
 import { alertUser } from '@/components/alert/Alert';
 import { CopyableInput } from '@/components/copy/Copy';
@@ -63,6 +63,7 @@ export const Receive = ({
   code,
   deviceID,
 }: TProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [verifying, setVerifying] = useState<boolean>(false);
   const [activeIndex, setActiveIndex] = useState<number>(0);
@@ -79,7 +80,7 @@ export const Receive = ({
   const receiveAddresses = useLoad(accountApi.getReceiveAddressList(code));
   const secureOutput = useLoad(accountApi.hasSecureOutput(code));
 
-  useEsc(() => !verifying && route(`/account/${code}`));
+  useEsc(() => !verifying && navigate(`/account/${code}`));
 
   const availableScriptTypes = useRef<accountApi.ScriptType[]>();
 

frontends/web/src/routes/account/receive/receive.tsx

@@ -16,11 +16,11 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useLoad } from '@/hooks/api';
 import { useEsc } from '@/hooks/keyboard';
 import * as accountApi from '@/api/account';
-import { route } from '@/utils/route';
 import { getScriptName, isEthereumBased } from '@/routes/account/utils';
 import { CopyableInput } from '@/components/copy/Copy';
 import { Dialog, DialogButtons } from '@/components/dialog/dialog';
@@ -114,6 +114,7 @@ export const Receive = ({
   accounts,
   code,
 }: TProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [verifying, setVerifying] = useState<false | 'secure' | 'insecure'>(false);
   const [activeIndex, setActiveIndex] = useState<number>(0);
@@ -133,7 +134,7 @@ export const Receive = ({
 
   const hasManyScriptTypes = availableScriptTypes.current && availableScriptTypes.current.length > 1;
 
-  useEsc(() => !addressTypeDialog && !verifying && route(`/account/${code}`));
+  useEsc(() => !addressTypeDialog && !verifying && navigate(`/account/${code}`));
 
   useEffect(() => {
     if (receiveAddresses) {

frontends/web/src/routes/account/summary/balancerow.tsx

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { AccountCode, CoinCode, IBalance } from '@/api/account';
 import { syncAddressesCount } from '@/api/accountsync';
 import { useSubscribe } from '@/hooks/api';
-import { route } from '@/utils/route';
 import { Logo } from '@/components/icon/logo';
 import { Amount } from '@/components/amount/amount';
 import { AsciiSpinner } from '@/components/spinner/ascii';
@@ -35,14 +35,15 @@ type TProps = {
 export const BalanceRow = (
   { code, name, coinCode, balance }: TProps
 ) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const syncStatus = useSubscribe(syncAddressesCount(code));
 
   const nameCol = (
     <td
       className={style.clickable}
       data-label={t('accountSummary.name')}
-      onClick={() => route(`/account/${code}`)}>
+      onClick={() => navigate(`/account/${code}`)}>
       <div className={style.coinName}>
         <Logo className={style.coincode} coinCode={coinCode} active={true} alt={coinCode} />
         {name}

frontends/web/src/routes/account/walletconnect/components/connect-form/connect-form.tsx

@@ -15,10 +15,10 @@
  */
 
 import { SetStateAction, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import * as accountAPI from '@/api/account';
 import { Button, Input } from '@/components/forms';
-import { route } from '@/utils/route';
 import { useMediaQuery } from '@/hooks/mediaquery';
 import { ScanQRButton } from '@/routes/account/send/components/inputs/receiver-address-input';
 import { ScanQRDialog } from '@/routes/account/send/components/dialogs/scan-qr-dialog';
@@ -52,6 +52,7 @@ export const WCConnectForm = ({
   onSubmit,
   connectLoading
 }: TWCConnectFormProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const isMobile = useMediaQuery('(max-width: 768px)');
   const [activeScanQR, setActiveScanQR] = useState(isMobile); // default to true on mobile
@@ -95,7 +96,7 @@ export const WCConnectForm = ({
           <Button
             disabled={connectLoading}
             secondary
-            onClick={() => route(`/account/${code}/wallet-connect/dashboard`)}>
+            onClick={() => navigate(`/account/${code}/wallet-connect/dashboard`)}>
             {t('dialog.cancel')}
           </Button>
           <Button

frontends/web/src/routes/account/walletconnect/components/success-pairing/success-pairing.tsx

@@ -16,23 +16,26 @@
  */
 
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import * as accountAPI from '@/api/account';
 import { Button } from '@/components/forms';
 import { AnimatedChecked } from '@/components/icon';
-import { route } from '@/utils/route';
 import styles from './success-pairing.module.css';
 
 type TProps = {
     accountCode: accountAPI.AccountCode;
 }
 
 export const WCSuccessPairing = ({ accountCode }: TProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   return (
     <div className={styles.container}>
       <AnimatedChecked className={styles.successIcon} />
       <p className={styles.successText}>{t('walletConnect.pairingSuccess')}</p>
-      <Button primary onClick={() => route(`/account/${accountCode}/wallet-connect/dashboard`)}>{t('button.done')}</Button>
+      <Button primary onClick={() => navigate(`/account/${accountCode}/wallet-connect/dashboard`)}>
+        {t('button.done')}
+      </Button>
     </div>
   );
 };

frontends/web/src/routes/account/walletconnect/dashboard.tsx

@@ -15,12 +15,12 @@
  */
 
 import { useCallback, useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useLoad } from '@/hooks/api';
 import { SessionTypes } from '@walletconnect/types';
 import { getSdkError } from '@walletconnect/utils';
 import { WCWeb3WalletContext } from '@/contexts/WCWeb3WalletContext';
-import { route } from '@/utils/route';
 import { getAddressFromEIPString, truncateAddress } from '@/utils/walletconnect';
 import { AccountCode, IAccount, getReceiveAddressList } from '@/api/account';
 import { GuideWrapper, GuidedContent, Header, Main } from '@/components/layout';
@@ -37,6 +37,7 @@ type TProps = {
 }
 
 export const DashboardWalletConnect = ({ code, accounts }: TProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { web3wallet, isWalletInitialized, initializeWeb3Wallet } = useContext(WCWeb3WalletContext);
   const [sessions, setSessions] = useState<SessionTypes.Struct[]>();
@@ -100,7 +101,9 @@ export const DashboardWalletConnect = ({ code, accounts }: TProps) => {
                   <p>{accountName}</p>
                   <p className={styles.receiveAddress}>{receiveAddress}</p>
                 </div>
-                <Button className={styles.buttonNewConnection} onClick={() => route(`/account/${code}/wallet-connect/connect`)} primary>{t('walletConnect.dashboard.newConnection')}</Button>
+                <Button className={styles.buttonNewConnection} onClick={() => navigate(`/account/${code}/wallet-connect/connect`)} primary>
+                  {t('walletConnect.dashboard.newConnection')}
+                </Button>
               </div>
               <hr className={styles.separator} />
               {hasSession &&

frontends/web/src/routes/accounts/select-receive.tsx

@@ -15,10 +15,10 @@
  */
 
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { IAccount } from '@/api/account';
 import { Header } from '@/components/layout';
-import { route } from '@/utils/route';
 import { isBitcoinOnly } from '@/routes/account/utils';
 import { View, ViewContent } from '@/components/view/view';
 import { GroupedAccountSelector } from '@/components/groupedaccountselector/groupedaccountselector';
@@ -27,11 +27,12 @@ type TReceiveAccountsSelector = {
     activeAccounts: IAccount[]
 }
 export const ReceiveAccountsSelector = ({ activeAccounts }: TReceiveAccountsSelector) => {
-  const [code, setCode] = useState('');
+  const navigate = useNavigate();
   const { t } = useTranslation();
+  const [code, setCode] = useState('');
 
   const handleProceed = () => {
-    route(`/account/${code}/receive`);
+    navigate(`/account/${code}/receive`);
   };
 
   const hasOnlyBTCAccounts = activeAccounts.every(({ coinCode }) => isBitcoinOnly(coinCode));