Skip to content

Commit

Permalink
refactor(frontend/ui): migrate to @gear-js/wallet-connect (#465)
Browse files Browse the repository at this point in the history
nikitayutanov authored Oct 4, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent e5b38f0 commit 81e27b0
Showing 153 changed files with 427 additions and 2,205 deletions.
2 changes: 1 addition & 1 deletion frontend/apps/battleship-zk/package.json
Original file line number Diff line number Diff line change
@@ -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",
2 changes: 1 addition & 1 deletion frontend/apps/battleship-zk/src/app/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Original file line number Diff line number Diff line change
@@ -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 };
Original file line number Diff line number Diff line change
@@ -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',
2 changes: 1 addition & 1 deletion frontend/apps/battleship/package.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 3 additions & 0 deletions frontend/apps/battleship/src/app/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 1 addition & 1 deletion frontend/apps/galactic-express/package.json
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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')}
/>
3 changes: 2 additions & 1 deletion frontend/apps/galactic-express/src/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />);
2 changes: 1 addition & 1 deletion frontend/apps/nft-marketplace/package.json
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ function Header() {
</OnLogin>
</nav>

<Wallet variant="gear" />
<Wallet theme="gear" />
</header>
);
}
3 changes: 2 additions & 1 deletion frontend/apps/nft-marketplace/src/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />);
2 changes: 1 addition & 1 deletion frontend/apps/nft-master/package.json
Original file line number Diff line number Diff line change
@@ -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",
11 changes: 10 additions & 1 deletion frontend/apps/nft-master/src/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />);
2 changes: 1 addition & 1 deletion frontend/apps/non-fungible-token/package.json
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ function Header() {
{account && <CreateLink />}
</nav>

<Wallet variant="gear" />
<Wallet theme="gear" />
</header>
);
}
3 changes: 2 additions & 1 deletion frontend/apps/non-fungible-token/src/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />);
2 changes: 1 addition & 1 deletion frontend/apps/racing-car-game/package.json
Original file line number Diff line number Diff line change
@@ -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",
2 changes: 1 addition & 1 deletion frontend/apps/racing-car-game/src/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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) {
23 changes: 0 additions & 23 deletions frontend/apps/racing-car-game/src/hocs/query-provider.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion frontend/apps/syndote/package.json
Original file line number Diff line number Diff line change
@@ -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",
3 changes: 2 additions & 1 deletion frontend/apps/syndote/src/hocs/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />);
Original file line number Diff line number Diff line change
@@ -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',
Loading

0 comments on commit 81e27b0

Please sign in to comment.