vega-frontend-monorepo/apps/trading/components/web3-container/web3-container.tsx

90 lines
2.4 KiB
TypeScript
Raw Normal View History

import { t } from '@vegaprotocol/react-helpers';
import { Button, Splash } from '@vegaprotocol/ui-toolkit';
import { Web3Provider, Web3ConnectDialog } from '@vegaprotocol/web3';
import { useWeb3React } from '@web3-react/core';
import type { ReactNode } from 'react';
import { useEffect, useState } from 'react';
import { Connectors } from '../../lib/web3-connectors';
interface Web3ContainerProps {
children: ReactNode;
}
export const Web3Container = ({ children }: Web3ContainerProps) => {
const [dialogOpen, setDialogOpen] = useState(false);
return (
<Web3Provider connectors={Connectors}>
<Web3Content setDialogOpen={setDialogOpen}>{children}</Web3Content>
<Web3ConnectDialog
connectors={Connectors}
dialogOpen={dialogOpen}
setDialogOpen={setDialogOpen}
desiredChainId={Number(process.env['NX_ETHEREUM_CHAIN_ID'] || 3)}
/>
</Web3Provider>
);
};
interface Web3ContentProps {
children: ReactNode;
setDialogOpen: (isOpen: boolean) => void;
}
export const Web3Content = ({ children, setDialogOpen }: Web3ContentProps) => {
const appChainId = Number(process.env['NX_ETHEREUM_CHAIN_ID'] || 3);
const { isActive, error, connector, chainId } = useWeb3React();
useEffect(() => {
if (typeof connector?.connectEagerly === 'function') {
connector.connectEagerly();
}
}, [connector]);
if (error) {
return (
<SplashWrapper>
<p className="mb-12">{t(`Something went wrong: ${error.message}`)}</p>
<Button onClick={() => connector.deactivate()}>
{t('Disconnect')}
</Button>
</SplashWrapper>
);
}
if (!isActive) {
return (
<SplashWrapper>
<p className="mb-12">{t('Connect your Ethereum wallet')}</p>
<Button onClick={() => setDialogOpen(true)}>{t('Connect')}</Button>
</SplashWrapper>
);
}
if (chainId !== appChainId) {
return (
<SplashWrapper>
<p className="mb-12">
{t(`This app only works on chain ID: ${appChainId}`)}
</p>
<Button onClick={() => connector.deactivate()}>
{t('Disconnect')}
</Button>
</SplashWrapper>
);
}
return <>{children}</>;
};
interface SplashWrapperProps {
children: ReactNode;
}
const SplashWrapper = ({ children }: SplashWrapperProps) => {
return (
<Splash>
<div className="text-center">{children}</div>
</Splash>
);
};