8e9c2e4080
* add deposit page * add web3 provider using web3-react package * add env setup, add guard for incorrect chain id * add lib for web3-provider * make wallet and ethereum connect dialogs look more consistent * add setup tests file for jest-dom * remove chain id config and just use appChainId prop, add disconnect button to invalid chainId state * remove .env file for now, will complete as own ticket * switch handling of connect dialog state to the consuming app * rename web3-provider package to just web3 * envs for each environment so we can specify chainId * remove fallback to testnet for apollo client creation * make web3container enforce connection before rendering childen * move infura id to env var
80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import { Button, Splash } from '@vegaprotocol/ui-toolkit';
|
|
import { Web3Provider, Web3ConnectDialog } from '@vegaprotocol/web3';
|
|
import { useWeb3React } from '@web3-react/core';
|
|
import { ReactNode, 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(() => {
|
|
connector?.connectEagerly();
|
|
}, [connector]);
|
|
|
|
if (error) {
|
|
return (
|
|
<SplashWrapper>
|
|
<p className="mb-12">Something went wrong: {error.message}</p>
|
|
<Button onClick={() => connector.deactivate()}>Disconnect</Button>
|
|
</SplashWrapper>
|
|
);
|
|
}
|
|
|
|
if (!isActive) {
|
|
return (
|
|
<SplashWrapper>
|
|
<p className="mb-12">Connect your Ethereum wallet</p>
|
|
<Button onClick={() => setDialogOpen(true)}>Connect</Button>
|
|
</SplashWrapper>
|
|
);
|
|
}
|
|
|
|
if (chainId !== appChainId) {
|
|
return (
|
|
<SplashWrapper>
|
|
<p className="mb-12">This app only works on chain ID: {appChainId}</p>
|
|
<Button onClick={() => connector.deactivate()}>Disconnect</Button>
|
|
</SplashWrapper>
|
|
);
|
|
}
|
|
|
|
return <>{children}</>;
|
|
};
|
|
|
|
interface SplashWrapperProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
const SplashWrapper = ({ children }: SplashWrapperProps) => {
|
|
return (
|
|
<Splash>
|
|
<div className="text-center">{children}</div>
|
|
</Splash>
|
|
);
|
|
};
|