feat(frontend): add simultaneous connect of Vara and Ethereum wallets (#754)

Author: nikitayutanov

js/frontend/src/app.tsx

@@ -1,12 +1,9 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 
 import { ErrorBoundary, Header } from './components';
-import { useAccountSync } from './features/wallet';
 import { WithProviders } from './providers';
 
 function Component() {
-  useAccountSync();
-
   return (
     <>
       <Header />

js/frontend/src/components/index.ts

@@ -3,15 +3,14 @@ import { Card } from './card';
 import { CopyButton } from './copy-button';
 import { Input, Checkbox, Radio, Select, Textarea } from './form';
 import { FormattedBalance } from './formatted-balance';
-import { Container, Header, ErrorBoundary, PrivateRoute, Skeleton, TruncatedText } from './layout';
+import { Container, Header, ErrorBoundary, Skeleton, TruncatedText } from './layout';
 import { LinkButton } from './link-button';
 import { TokenSVG } from './token-svg';
 import { Tooltip } from './tooltip';
 
 export {
   Header,
   Container,
-  PrivateRoute,
   Input,
   Checkbox,
   Radio,

js/frontend/src/components/layout/header/header.module.scss

@@ -2,14 +2,12 @@
   padding-top: 20px;
   padding-bottom: 20px;
 
-  display: grid;
-  grid-template-columns: minmax(0, max-content) max-content 1fr;
+  display: flex;
   align-items: center;
   gap: 32px;
 
-  @include breakpoint(555px) {
-    grid-template-columns: minmax(0, max-content) 1fr;
-    gap: 16px;
+  @include sm {
+    flex-direction: column;
   }
 }
 
@@ -26,10 +24,20 @@
       fill: #00ffc4;
     }
   }
+
+  &Container {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+  }
 }
 
 .wallet {
   margin-left: auto;
+
+  @include sm {
+    margin-left: 0;
+  }
 }
 
 .nav {

js/frontend/src/components/layout/header/header.tsx

@@ -1,4 +1,3 @@
-import { useAccount } from '@gear-js/react-hooks';
 import { CSSProperties, useRef, useState, useEffect } from 'react';
 import { Link, NavLink, useLocation } from 'react-router-dom';
 
@@ -8,17 +7,15 @@ import { TransactionsCounter } from '@/features/history';
 import { NetworkSwitch } from '@/features/network-switch';
 import { LockedBalanceTooltip } from '@/features/token-tracker';
 import { Wallet } from '@/features/wallet';
-import { useEthAccount } from '@/hooks';
+import { useAccountsConnection } from '@/hooks';
 
 import { Container } from '../container';
 
 import { LINKS } from './consts';
 import styles from './header.module.scss';
 
 function Header() {
-  const { account } = useAccount();
-  const ethAccount = useEthAccount();
-  const isAnyAccount = account || ethAccount.isConnected;
+  const { isAnyAccount } = useAccountsConnection();
 
   const { pathname } = useLocation();
   const [linksStyle, setLinksStyle] = useState<CSSProperties>();
@@ -69,11 +66,13 @@ function Header() {
   return (
     <header className={styles.header}>
       <Container className={styles.mainContainer}>
-        <Link to={ROUTE.HOME} className={styles.logo}>
-          <LogoSVG />
-        </Link>
+        <div className={styles.logoContainer}>
+          <Link to={ROUTE.HOME} className={styles.logo}>
+            <LogoSVG />
+          </Link>
 
-        <NetworkSwitch />
+          <NetworkSwitch />
+        </div>
 
         <Wallet className={styles.wallet} />
       </Container>

js/frontend/src/components/layout/index.ts

@@ -1,8 +1,7 @@
 import { Container } from './container';
 import { ErrorBoundary } from './error-boundary';
 import { Header } from './header';
-import { PrivateRoute } from './private-route';
 import { Skeleton } from './skeleton';
 import { TruncatedText } from './truncated-text';
 
-export { Container, Header, PrivateRoute, ErrorBoundary, Skeleton, TruncatedText };
+export { Container, Header, ErrorBoundary, Skeleton, TruncatedText };

js/frontend/src/components/layout/private-route/index.ts

@@ -0,0 +1,15 @@
+import { useAccount } from '@gear-js/react-hooks';
+
+import { useEthAccount } from '@/hooks';
+
+function useAccountsFilter() {
+  const { account } = useAccount();
+  const ethAccount = useEthAccount();
+
+  const addresses = [account?.decodedAddress, ethAccount.address?.toLowerCase()].filter((value) => Boolean(value));
+  const isAvailable = addresses.length > 0;
+
+  return { addresses, isAvailable };
+}
+
+export { useAccountsFilter };

js/frontend/src/components/layout/private-route/private-route.tsx

@@ -1,23 +1,18 @@
-import { useAccount } from '@gear-js/react-hooks';
 import { useQueryClient } from '@tanstack/react-query';
 
-import { useEthAccount } from '@/hooks';
-
 import { TransfersCountQueryQuery } from '../graphql/graphql';
 import { Status, TransferFilter } from '../types';
 
+import { useAccountsFilter } from './use-accounts-filter';
 import { useTransactionsCountQueryKey, useTransactionsCount } from './use-transactions-count';
 
 function usePendingTxsCountFilter() {
-  const { account } = useAccount();
-  const ethAccount = useEthAccount();
-
-  const accountAddress = account?.decodedAddress || ethAccount.address?.toLowerCase();
-
-  const filter = { sender: { equalTo: accountAddress }, status: { equalTo: Status.AwaitingPayment } } as TransferFilter;
-  const enabled = Boolean(accountAddress);
+  const { addresses, isAvailable } = useAccountsFilter();
 
-  return { filter, enabled };
+  return {
+    filter: { sender: { in: addresses }, status: { equalTo: Status.AwaitingPayment } } as TransferFilter,
+    enabled: isAvailable,
+  };
 }
 
 function useOptimisticPendingTxsCountUpdate() {

js/frontend/src/features/history/hooks/use-accounts-filter.ts

@@ -1,17 +1,18 @@
 import { HexString } from '@gear-js/api';
-import { useAccount } from '@gear-js/react-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 import { z } from 'zod';
 
-import { useDebounce, useEthAccount } from '@/hooks';
+import { useDebounce } from '@/hooks';
 import { asOptionalField, isNumeric } from '@/utils';
 
 import { DEFAULT_VALUES, FIELD_NAME } from '../consts';
 import { Status, TransferFilter } from '../types';
 
+import { useAccountsFilter } from './use-accounts-filter';
+
 const SCHEMA = z.object({
   [FIELD_NAME.TIMESTAMP]: z.string(),
   [FIELD_NAME.STATUS]: asOptionalField(
@@ -30,14 +31,11 @@ const SCHEMA = z.object({
 });
 
 function useTransactionFilters() {
-  const { account } = useAccount();
-  const ethAccount = useEthAccount();
-  const accountAddress = account?.decodedAddress || ethAccount.address;
-
+  const accountsFilter = useAccountsFilter();
   const [searchParams] = useSearchParams();
 
   const getOwnerDefaultValue = () => {
-    if (!accountAddress) return DEFAULT_VALUES[FIELD_NAME.OWNER];
+    if (!accountsFilter.isAvailable) return DEFAULT_VALUES[FIELD_NAME.OWNER];
 
     const owner = searchParams.get('owner');
 
@@ -101,14 +99,14 @@ function useTransactionFilters() {
       filter.blockNumber = { equalTo: debouncedSearch } as TransferFilter['blockNumber'];
     }
 
-    if (owner && accountAddress) {
-      filter.sender = { includesInsensitive: accountAddress } as TransferFilter['sender'];
+    if (owner && accountsFilter.isAvailable) {
+      filter.sender = { in: accountsFilter.addresses } as TransferFilter['sender'];
     }
 
     if (Object.keys(filter).length === 0) return;
 
     return filter;
-  }, [timestamp, status, asset, searchError, debouncedSearch, owner, accountAddress]);
+  }, [timestamp, status, asset, searchError, debouncedSearch, owner, accountsFilter]);
 
   return { form, filters };
 }