11import React from "react" ;
22import styled from "styled-components" ;
3- import { useAccount , useNetwork } from "wagmi" ;
4- import { arbitrumGoerli } from "wagmi/chains" ;
3+ import { useAccount , useNetwork , useSwitchNetwork } from "wagmi" ;
54import { useWeb3Modal } from "@web3modal/react" ;
65import { shortenAddress } from "utils/shortenAddress" ;
76import { Button } from "@kleros/ui-components-library" ;
8-
9- const AccountDisplay : React . FC = ( ) => {
10- return (
11- < StyledContainer >
12- < ChainDisplay />
13- < AddressDisplay />
14- </ StyledContainer >
15- ) ;
16- } ;
17-
18- export const ChainDisplay : React . FC = ( ) => {
19- const { chain } = useNetwork ( ) ;
20- return < small > { chain ?. name } </ small > ;
21- } ;
22-
23- export const AddressDisplay : React . FC = ( ) => {
24- const { address } = useAccount ( ) ;
25- return < label > { address && shortenAddress ( address ) } </ label > ;
26- } ;
7+ import { SUPPORTED_CHAINS , DEFAULT_CHAIN } from "consts/chains" ;
278
289const StyledContainer = styled . div `
2910 width: fit-content;
@@ -46,15 +27,63 @@ const StyledContainer = styled.div`
4627 }
4728` ;
4829
30+ const AccountDisplay : React . FC = ( ) => {
31+ return (
32+ < StyledContainer >
33+ < ChainDisplay />
34+ < AddressDisplay />
35+ </ StyledContainer >
36+ ) ;
37+ } ;
38+
39+ export const ChainDisplay : React . FC = ( ) => {
40+ const { chain } = useNetwork ( ) ;
41+ return < small > { chain ?. name } </ small > ;
42+ } ;
43+
44+ export const AddressDisplay : React . FC = ( ) => {
45+ const { address } = useAccount ( ) ;
46+ return < label > { address && shortenAddress ( address ) } </ label > ;
47+ } ;
48+
49+ export const SwitchChainButton : React . FC = ( ) => {
50+ const { switchNetwork, isLoading } = useSwitchNetwork ( ) ;
51+ const handleSwitch = ( ) => {
52+ if ( ! switchNetwork ) {
53+ console . error ( "Cannot switch network. Please do it manually." ) ;
54+ return ;
55+ }
56+ try {
57+ switchNetwork ( DEFAULT_CHAIN ) ;
58+ } catch ( err ) {
59+ console . error ( err ) ;
60+ }
61+ } ;
62+ return (
63+ < Button
64+ isLoading = { isLoading }
65+ disabled = { isLoading }
66+ text = { `Switch to ${ SUPPORTED_CHAINS [ DEFAULT_CHAIN ] . chainName } }
67+ onClick = { handleSwitch }
68+ />
69+ ) ;
70+ } ;
71+
4972const ConnectButton : React . FC = ( ) => {
50- const { isConnected } = useAccount ( ) ;
51- const { open, setDefaultChain, isOpen } = useWeb3Modal ( ) ;
52- setDefaultChain ( arbitrumGoerli ) ;
53- return isConnected ? (
54- < AccountDisplay />
55- ) : (
73+ const { open, isOpen } = useWeb3Modal ( ) ;
74+ return (
5675 < Button disabled = { isOpen } small text = { "Connect" } onClick = { async ( ) => await open ( { route : "ConnectWallet" } ) } />
5776 ) ;
5877} ;
5978
60- export default ConnectButton ;
79+ const ConnectWallet : React . FC = ( ) => {
80+ const { chain } = useNetwork ( ) ;
81+ const { isConnected } = useAccount ( ) ;
82+ if ( isConnected ) {
83+ if ( chain && chain . id !== DEFAULT_CHAIN ) {
84+ return < SwitchChainButton /> ;
85+ } else return < AccountDisplay /> ;
86+ } else return < ConnectButton /> ;
87+ } ;
88+
89+ export default ConnectWallet ;
0 commit comments