@@ -7,17 +7,26 @@ import { useConnect } from "hooks/useConnect";
77import { SUPPORTED_CHAINS } from "consts/chains" ;
88
99const AccountDisplay : React . FC = ( ) => {
10- const { account, chainId } = useWeb3 ( ) ;
11- const chainName = chainId ? SUPPORTED_CHAINS [ chainId ] . chainName : undefined ;
12- const shortAddress = account ? shortenAddress ( account ) : undefined ;
1310 return (
1411 < StyledContainer >
15- < small > { chainName } </ small >
16- < label > { shortAddress } </ label >
12+ < ChainDisplay / >
13+ < AddressDisplay / >
1714 </ StyledContainer >
1815 ) ;
1916} ;
2017
18+ export const ChainDisplay : React . FC = ( ) => {
19+ const { chainId } = useWeb3 ( ) ;
20+ const chainName = chainId ? SUPPORTED_CHAINS [ chainId ] . chainName : undefined ;
21+ return < small > { chainName } </ small > ;
22+ } ;
23+
24+ export const AddressDisplay : React . FC = ( ) => {
25+ const { account } = useWeb3 ( ) ;
26+ const shortAddress = account ? shortenAddress ( account ) : undefined ;
27+ return < label > { shortAddress } </ label > ;
28+ } ;
29+
2130const StyledContainer = styled . div `
2231 width: fit-content;
2332 height: 34px;
@@ -42,11 +51,7 @@ const StyledContainer = styled.div`
4251const ConnectButton : React . FC = ( ) => {
4352 const { active } = useWeb3 ( ) ;
4453 const { activate, connecting } = useConnect ( ) ;
45- return active ? (
46- < AccountDisplay />
47- ) : (
48- < Button disabled = { connecting } small text = { "Connect" } onClick = { activate } />
49- ) ;
54+ return active ? < AccountDisplay /> : < Button disabled = { connecting } small text = { "Connect" } onClick = { activate } /> ;
5055} ;
5156
5257export default ConnectButton ;
0 commit comments