refactor(frontend/ui): migrate to @gear-js/wallet-connect (#465)

gear-foundation · Oct 4, 2024 · 81e27b0 · 81e27b0
1 parent e5b38f0
commit 81e27b0
Show file tree

Hide file tree

Showing 153 changed files with 427 additions and 2,205 deletions.
diff --git a/frontend/apps/battleship-zk/package.json b/frontend/apps/battleship-zk/package.json
@@ -14,7 +14,7 @@
     "@dapps-frontend/hooks": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@gear-js/ui": "0.5.21",
     "@gear-js/vara-ui": "0.0.11",
     "@mantine/form": "6.0.15",

diff --git a/frontend/apps/battleship-zk/src/app/hocs/index.tsx b/frontend/apps/battleship-zk/src/app/hocs/index.tsx
@@ -13,10 +13,10 @@ import {
   EzTransactionsProvider,
 } from '@dapps-frontend/ez-transactions';
 import { DnsProvider as SharedDnsProvider, useDnsProgramIds } from '@dapps-frontend/hooks';
+import { QueryProvider } from '@dapps-frontend/ui';
 
 import { ADDRESS } from '@/app/consts';
 import { Alert, alertStyles } from '@/components/ui/alert';
-import { QueryProvider } from './query-provider';
 import { useProgram } from '../utils/sails';
 
 function ApiProvider({ children }: ProviderProps) {

diff --git a/frontend/apps/battleship-zk/src/components/layout/vara-svg/VaraIcon.tsx b/frontend/apps/battleship-zk/src/components/layout/vara-svg/VaraIcon.tsx
@@ -1,16 +1,11 @@
 import { ReactComponent as VaraSVG } from '@/assets/images/icons/vara-coin.svg';
 import { ReactComponent as TVaraSVG } from '@/assets/images/icons/tvara-coin.svg';
-import { useAccountDeriveBalancesAll, useApi, useBalanceFormat } from '@gear-js/react-hooks';
+import { useApi } from '@gear-js/react-hooks';
 
 function VaraIcon() {
-  const { getFormattedBalance } = useBalanceFormat();
-  const balances = useAccountDeriveBalancesAll();
-  const { isApiReady } = useApi();
+  const { api } = useApi();
 
-  const balance =
-    isApiReady && balances?.freeBalance ? getFormattedBalance(balances.freeBalance.toString()) : undefined;
-
-  return balance?.unit?.toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
+  return api?.registry.chainTokens[0].toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
 }
 
 export { VaraIcon };
diff --git a/...s/battleship-zk/src/features/multiplayer/components/game-found-modal/game-found-modal.tsx b/...s/battleship-zk/src/features/multiplayer/components/game-found-modal/game-found-modal.tsx
@@ -1,7 +1,7 @@
 import { Modal } from '@/components/ui/modal';
 import { ReactComponent as VaraSVG } from '@/assets/images/icons/vara-coin.svg';
 import { ReactComponent as TVaraSVG } from '@/assets/images/icons/tvara-coin.svg';
-import { useAccountDeriveBalancesAll, useApi, useBalanceFormat } from '@gear-js/react-hooks';
+import { useApi } from '@gear-js/react-hooks';
 import { TextField } from '@/components/layout/text-field';
 import { Button } from '@gear-js/vara-ui';
 import { isNotEmpty, useForm } from '@mantine/form';
@@ -22,14 +22,10 @@ export type JoinModalFormValues = {
 };
 
 function GameFoundModal({ entryFee, onSubmit, onClose }: Props) {
-  const { isApiReady } = useApi();
+  const { api } = useApi();
   const { pending } = usePending();
-  const { getFormattedBalance } = useBalanceFormat();
-  const balances = useAccountDeriveBalancesAll();
-  const balance =
-    isApiReady && balances?.freeBalance ? getFormattedBalance(balances.freeBalance.toString()) : undefined;
 
-  const VaraSvg = balance?.unit?.toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
+  const VaraSvg = api?.registry.chainTokens[0].toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
   const items = [
     {
       name: 'Entry fee',

diff --git a/frontend/apps/battleship/package.json b/frontend/apps/battleship/package.json
@@ -14,7 +14,7 @@
     "@dapps-frontend/hooks": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@gear-js/ui": "0.5.21",
     "@gear-js/vara-ui": "0.0.11",
     "@mantine/form": "6.0.15",

diff --git a/frontend/apps/battleship/src/app/hocs/index.tsx b/frontend/apps/battleship/src/app/hocs/index.tsx
@@ -8,6 +8,8 @@ import { ComponentType } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import { DnsProvider as SharedDnsProvider, useDnsProgramIds } from '@dapps-frontend/hooks';
+import { QueryProvider } from '@dapps-frontend/ui';
+
 import {
   SignlessTransactionsProvider as SharedSignlessTransactionsProvider,
   GaslessTransactionsProvider as SharedGaslessTransactionsProvider,
@@ -65,6 +67,7 @@ const providers = [
   ApiProvider,
   AccountProvider,
   AlertProvider,
+  QueryProvider,
   DnsProvider,
   GaslessTransactionsProvider,
   SignlessTransactionsProvider,

diff --git a/frontend/apps/galactic-express/package.json b/frontend/apps/galactic-express/package.json
@@ -6,7 +6,7 @@
     "@dapps-frontend/error-tracking": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@gear-js/ui": "0.5.21",
     "@headlessui/react": "^1.7.17",
     "@mantine/form": "6.0.8",

diff --git a/...apps/galactic-express/src/features/session/components/game-found-modal/GameFoundModal.tsx b/...apps/galactic-express/src/features/session/components/game-found-modal/GameFoundModal.tsx
@@ -1,9 +1,8 @@
-import { useState } from 'react';
 import { cx } from 'utils';
 import { Modal } from 'components/layout/modal';
 import { ReactComponent as VaraSVG } from 'assets/images/icons/vara-coin.svg';
 import { ReactComponent as TVaraSVG } from 'assets/images/icons/tvara-coin.svg';
-import { useAccountDeriveBalancesAll, useApi, useBalanceFormat } from '@gear-js/react-hooks';
+import { useApi } from '@gear-js/react-hooks';
 import { TextField } from 'components/layout/TextField';
 import { Button } from '@gear-js/vara-ui';
 import { isNotEmpty, useForm } from '@mantine/form';
@@ -23,14 +22,9 @@ export type JoinModalFormValues = {
 };
 
 function GameFoundModal({ entryFee, players, gasAmount, onSubmit, onClose }: Props) {
-  const { isApiReady } = useApi();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const { getFormattedBalance } = useBalanceFormat();
-  const balances = useAccountDeriveBalancesAll();
-  const balance =
-    isApiReady && balances?.freeBalance ? getFormattedBalance(balances.freeBalance.toString()) : undefined;
+  const { api } = useApi();
+  const VaraSvg = api?.registry.chainTokens[0].toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
 
-  const VaraSvg = balance?.unit?.toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
   const items = [
     {
       name: 'Entry fee',
@@ -101,8 +95,8 @@ function GameFoundModal({ entryFee, players, gasAmount, onSubmit, onClose }: Pro
             <span className={cx(styles['field-error'])}>{joinErrors.name}</span>
           </div>
           <div className={styles.inputs}>
-            <Button text="Cancel" color="dark" disabled={isLoading} className={styles.button} onClick={onClose} />
-            <Button type="submit" text="Join" disabled={isLoading} className={styles.button} />
+            <Button text="Cancel" color="dark" className={styles.button} onClick={onClose} />
+            <Button type="submit" text="Join" className={styles.button} />
           </div>
         </form>
       </div>

diff --git a/...s/galactic-express/src/features/welcome/components/enter-contract-address/RequestGame.tsx b/...s/galactic-express/src/features/welcome/components/enter-contract-address/RequestGame.tsx
@@ -9,12 +9,11 @@ import { useSetAtom, useAtom } from 'jotai';
 import { CURRENT_GAME_ATOM, IS_LOADING, PLAYER_NAME_ATOM, REGISTRATION_STATUS } from 'atoms';
 import { useLaunchMessage } from 'features/session/hooks';
 import metaTxt from 'assets/meta/galactic_express_meta.txt';
-import { useAccount, useAccountDeriveBalancesAll, useApi, useBalanceFormat, withoutCommas } from '@gear-js/react-hooks';
+import { useAccount, useApi, useBalanceFormat, withoutCommas } from '@gear-js/react-hooks';
 import { TextField } from 'components/layout/TextField';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { HexString, decodeAddress } from '@gear-js/api';
 import { GameFoundModal } from 'features/session/components/game-found-modal';
-import { ADDRESS } from 'consts';
 import { useProgramMetadata } from 'hooks';
 import { LaunchState } from 'features/session/types';
 import { JoinModalFormValues } from 'features/session/components/game-found-modal/GameFoundModal';
@@ -39,15 +38,12 @@ type JoinFormValues = {
 
 function RequestGame() {
   const { account } = useAccount();
-  const balances = useAccountDeriveBalancesAll();
-  const { isApiReady } = useApi();
   const { api } = useApi();
   const { programId } = useDnsProgramIds();
-  const { getFormattedBalance, getFormattedBalanceValue, getChainBalanceValue } = useBalanceFormat();
-  const balance =
-    isApiReady && balances?.freeBalance ? getFormattedBalance(balances.freeBalance.toString()) : undefined;
+  const { getFormattedBalanceValue, getChainBalanceValue } = useBalanceFormat();
+
   const [foundState, setFoundState] = useState<LaunchState | null>(null);
-  const { meta: isMeta, message: sendNewSessionMessage } = useLaunchMessage();
+  const { message: sendNewSessionMessage } = useLaunchMessage();
   const meta = useProgramMetadata(metaTxt);
   const setCurrentGame = useSetAtom(CURRENT_GAME_ATOM);
   const setPlayerName = useSetAtom(PLAYER_NAME_ATOM);
@@ -196,7 +192,7 @@ function RequestGame() {
                   label="Entry fee"
                   variant="active"
                   type="number"
-                  icon={balance?.unit?.toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />}
+                  icon={api?.registry.chainTokens[0].toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />}
                   disabled={isLoading}
                   {...getCreateInputProps('fee')}
                 />

diff --git a/frontend/apps/galactic-express/src/hocs/index.tsx b/frontend/apps/galactic-express/src/hocs/index.tsx
@@ -6,6 +6,7 @@ import {
 } from '@gear-js/react-hooks';
 import { DnsProvider as SharedDnsProvider } from '@dapps-frontend/hooks';
 import { Alert, alertStyles } from '@gear-js/ui';
+import { QueryProvider } from '@dapps-frontend/ui';
 import { ComponentType } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ADDRESS } from 'consts';
@@ -34,7 +35,7 @@ function AlertProvider({ children }: ProviderProps) {
   );
 }
 
-const providers = [BrowserRouter, AlertProvider, DnsProvider, ApiProvider, AccountProvider];
+const providers = [BrowserRouter, AlertProvider, DnsProvider, ApiProvider, AccountProvider, QueryProvider];
 
 function withProviders(Component: ComponentType) {
   return () => providers.reduceRight((children, Provider) => <Provider>{children}</Provider>, <Component />);

diff --git a/frontend/apps/nft-marketplace/package.json b/frontend/apps/nft-marketplace/package.json
@@ -6,7 +6,7 @@
     "@dapps-frontend/error-tracking": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@gear-js/ui": "0.5.26",
     "@polkadot/api": "11.0.2",
     "@polkadot/react-identicon": "3.6.4",

diff --git a/frontend/apps/nft-marketplace/src/components/layout/header/Header.tsx b/frontend/apps/nft-marketplace/src/components/layout/header/Header.tsx
@@ -14,7 +14,7 @@ function Header() {
         </OnLogin>
       </nav>
 
-      <Wallet variant="gear" />
+      <Wallet theme="gear" />
     </header>
   );
 }

diff --git a/frontend/apps/nft-marketplace/src/hocs/index.tsx b/frontend/apps/nft-marketplace/src/hocs/index.tsx
@@ -5,6 +5,7 @@ import {
   ProviderProps,
 } from '@gear-js/react-hooks';
 import { Alert, alertStyles } from '@gear-js/ui';
+import { QueryProvider } from '@dapps-frontend/ui';
 import { ComponentType } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ADDRESS } from 'consts';
@@ -26,7 +27,7 @@ function AlertProvider({ children }: ProviderProps) {
   );
 }
 
-const providers = [BrowserRouter, IPFSProvider, AlertProvider, ApiProvider, AccountProvider];
+const providers = [BrowserRouter, IPFSProvider, AlertProvider, ApiProvider, AccountProvider, QueryProvider];
 
 function withProviders(Component: ComponentType) {
   return () => providers.reduceRight((children, Provider) => <Provider>{children}</Provider>, <Component />);

diff --git a/frontend/apps/nft-master/package.json b/frontend/apps/nft-master/package.json
@@ -12,7 +12,7 @@
     "@dapps-frontend/error-tracking": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@mantine/form": "6.0.8",
     "@polkadot/api": "11.0.2",
     "@polkadot/react-identicon": "3.6.4",

diff --git a/frontend/apps/nft-master/src/hocs/index.tsx b/frontend/apps/nft-master/src/hocs/index.tsx
@@ -5,6 +5,7 @@ import {
   ProviderProps,
 } from '@gear-js/react-hooks';
 import { DnsProvider as SharedDnsProvider } from '@dapps-frontend/hooks';
+import { QueryProvider } from '@dapps-frontend/ui';
 import { ComponentType } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider as UrqlClientProvider } from 'urql';
@@ -40,7 +41,15 @@ function UrqlProvider({ children }: ProviderProps) {
   return <UrqlClientProvider value={urqlClient}>{children}</UrqlClientProvider>;
 }
 
-const providers = [BrowserRouter, UrqlProvider, AlertProvider, ApiProvider, DnsProvider, AccountProvider];
+const providers = [
+  BrowserRouter,
+  UrqlProvider,
+  AlertProvider,
+  ApiProvider,
+  DnsProvider,
+  AccountProvider,
+  QueryProvider,
+];
 
 function withProviders(Component: ComponentType) {
   return () => providers.reduceRight((children, Provider) => <Provider>{children}</Provider>, <Component />);

diff --git a/frontend/apps/non-fungible-token/package.json b/frontend/apps/non-fungible-token/package.json
@@ -25,7 +25,7 @@
     "@dapps-frontend/error-tracking": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@gear-js/ui": "0.5.26",
     "@polkadot/api": "11.0.2",
     "@polkadot/react-identicon": "3.6.4",

diff --git a/frontend/apps/non-fungible-token/src/components/layout/header/Header.tsx b/frontend/apps/non-fungible-token/src/components/layout/header/Header.tsx
@@ -14,7 +14,7 @@ function Header() {
         {account && <CreateLink />}
       </nav>
 
-      <Wallet variant="gear" />
+      <Wallet theme="gear" />
     </header>
   );
 }

diff --git a/frontend/apps/non-fungible-token/src/hocs/index.tsx b/frontend/apps/non-fungible-token/src/hocs/index.tsx
@@ -5,6 +5,7 @@ import {
   ProviderProps,
 } from '@gear-js/react-hooks';
 import { Alert, alertStyles } from '@gear-js/ui';
+import { QueryProvider } from '@dapps-frontend/ui';
 import { ComponentType } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { IPFSProvider } from 'context';
@@ -26,7 +27,7 @@ function AlertProvider({ children }: ProviderProps) {
   );
 }
 
-const providers = [BrowserRouter, AlertProvider, IPFSProvider, ApiProvider, AccountProvider];
+const providers = [BrowserRouter, AlertProvider, IPFSProvider, ApiProvider, AccountProvider, QueryProvider];
 
 function withProviders(Component: ComponentType) {
   return () => providers.reduceRight((children, Provider) => <Provider>{children}</Provider>, <Component />);

diff --git a/frontend/apps/racing-car-game/package.json b/frontend/apps/racing-car-game/package.json
@@ -10,7 +10,7 @@
     "@dapps-frontend/error-tracking": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@gear-js/ui": "0.5.21",
     "@headlessui/react": "1.7.17",
     "@mantine/form": "6.0.15",

diff --git a/frontend/apps/racing-car-game/src/hocs/index.tsx b/frontend/apps/racing-car-game/src/hocs/index.tsx
@@ -14,8 +14,8 @@ import {
 } from '@dapps-frontend/ez-transactions';
 import { ADDRESS } from 'consts';
 import { DnsProvider as SharedDnsProvider, useDnsProgramIds } from '@dapps-frontend/hooks';
+import { QueryProvider } from '@dapps-frontend/ui';
 import { Alert, alertStyles } from '@/ui';
-import { QueryProvider } from './query-provider';
 import { useProgram } from '@/app/utils';
 
 function DnsProvider({ children }: ProviderProps) {

diff --git a/frontend/apps/racing-car-game/src/hocs/query-provider.tsx b/frontend/apps/racing-car-game/src/hocs/query-provider.tsx
diff --git a/frontend/apps/syndote/package.json b/frontend/apps/syndote/package.json
@@ -7,7 +7,7 @@
     "@dapps-frontend/hooks": "workspace:*",
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
-    "@gear-js/react-hooks": "0.12.1",
+    "@gear-js/react-hooks": "0.13.0",
     "@gear-js/ui": "0.5.21",
     "@gear-js/vara-ui": "0.0.11",
     "@mantine/form": "6.0.8",

diff --git a/frontend/apps/syndote/src/hocs/index.tsx b/frontend/apps/syndote/src/hocs/index.tsx
@@ -8,6 +8,7 @@ import { Alert, alertStyles } from '@gear-js/ui';
 import { ComponentType } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { DnsProvider as SharedDnsProvider } from '@dapps-frontend/hooks';
+import { QueryProvider } from '@dapps-frontend/ui';
 import { ADDRESS } from 'consts';
 
 function ApiProvider({ children }: ProviderProps) {
@@ -34,7 +35,7 @@ function AlertProvider({ children }: ProviderProps) {
   );
 }
 
-const providers = [BrowserRouter, AlertProvider, ApiProvider, DnsProvider, AccountProvider];
+const providers = [BrowserRouter, AlertProvider, ApiProvider, DnsProvider, AccountProvider, QueryProvider];
 
 function withProviders(Component: ComponentType) {
   return () => providers.reduceRight((children, Provider) => <Provider>{children}</Provider>, <Component />);

diff --git a/frontend/apps/syndote/src/pages/home/continue-game-modal/ContinueGameModal.tsx b/frontend/apps/syndote/src/pages/home/continue-game-modal/ContinueGameModal.tsx
@@ -4,21 +4,18 @@ import styles from './ContinueGameModal.module.scss';
 import { GameDetails } from 'components/layout/game-details';
 import { ReactComponent as VaraSVG } from 'assets/images/icons/vara-coin.svg';
 import { ReactComponent as TVaraSVG } from 'assets/images/icons/tvara-coin.svg';
-import { useAccountDeriveBalancesAll, useApi, useBalanceFormat } from '@gear-js/react-hooks';
+import { useApi } from '@gear-js/react-hooks';
 
 type Props = {
   onReserve: () => void;
   onClose: () => void;
 };
 
 function ContinueGameModal({ onReserve, onClose }: Props) {
-  const { isApiReady } = useApi();
-  const { getFormattedBalance } = useBalanceFormat();
-  const balances = useAccountDeriveBalancesAll();
-  const balance =
-    isApiReady && balances?.freeBalance ? getFormattedBalance(balances.freeBalance.toString()) : undefined;
+  const { api } = useApi();
+
+  const VaraSvg = api?.registry.chainTokens[0].toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
 
-  const VaraSvg = balance?.unit?.toLowerCase() === 'vara' ? <VaraSVG /> : <TVaraSVG />;
   const items = [
     {
       name: 'Required amount of gas  required for the game',