Merge branch 'frontend-use-navigate'

Author: thisconnect

frontends/web/src/app.tsx

@@ -16,8 +16,8 @@
  */
 
 import { useCallback, useEffect, Fragment } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router';
 import { useSync } from './hooks/api';
 import { useDefault } from './hooks/default';
 import { usePrevious } from './hooks/previous';

frontends/web/src/components/sidebar/sidebar.tsx

@@ -16,8 +16,7 @@
  */
 
 import React, { useContext, useEffect, useState } from 'react';
-import { useLocation } from 'react-router';
-import { Link, NavLink } from 'react-router-dom';
+import { Link, NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useKeystores } from '@/hooks/backend';
 import type { TDevices } from '@/api/devices';

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

@@ -15,9 +15,8 @@
  */
 
 import { MouseEvent } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { useNavigate } from 'react-router';
 import { WalletConnectLight } from '@/components/icon';
 import { useMediaQuery } from '@/hooks/mediaquery';
 import { connectKeystore, AccountCode, IAccount, CoinCode } from '@/api/account';

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