mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
401dc58402
* basic login button implementation * refactoring and add dynamic auth button to the other pages * connect wallet without authenticating an user * login and logout user in blockscout account * refactoring and RPC overrides * authenticate user with connected wallet * add ENS to profile button * override evm chains and fix contract write with waas wallet * disconnect wallet and fix docker build * add dynamic imports to components that use web3 wallet packages * refactor user profile directory * clean up * tweaks * update pw ci script * fix "connect wallet" button behavior * handle linking email to profile with dynamic provider * fix test * async loading web3 hooks and remove dynamic loading from components that use them * fix pw tests * add account navigation in horizontal layout when auth provider is dynamic * fix address verification modal * review fixes * spelling fixes
108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import { chakra, Box, Flex, Spinner } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import delay from 'lib/delay';
|
|
import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
|
|
import useWeb3Wallet from 'lib/web3/useWallet';
|
|
import { Button } from 'toolkit/chakra/button';
|
|
import { IconButton } from 'toolkit/chakra/icon-button';
|
|
import { Hint } from 'toolkit/components/Hint/Hint';
|
|
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
interface Props {
|
|
onClose?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
const UserProfileContentWallet = ({ onClose, className }: Props) => {
|
|
const web3Wallet = useWeb3Wallet({ source: 'Profile dropdown' });
|
|
|
|
const web3AccountWithDomain = useWeb3AccountWithDomain(true);
|
|
|
|
const handleConnectWalletClick = React.useCallback(async() => {
|
|
web3Wallet.openModal();
|
|
await delay(300);
|
|
onClose?.();
|
|
}, [ web3Wallet, onClose ]);
|
|
|
|
const handleOpenWalletClick = React.useCallback(async() => {
|
|
web3Wallet.openModal();
|
|
await delay(300);
|
|
onClose?.();
|
|
}, [ web3Wallet, onClose ]);
|
|
|
|
const handleAddressClick = React.useCallback(() => {
|
|
onClose?.();
|
|
}, [ onClose ]);
|
|
|
|
const content = (() => {
|
|
if (web3Wallet.isConnected && web3AccountWithDomain.address) {
|
|
return (
|
|
<Flex
|
|
alignItems="center"
|
|
columnGap={ 2 }
|
|
bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
|
|
px={ 2 }
|
|
py="10px"
|
|
borderRadius="base"
|
|
justifyContent="space-between"
|
|
>
|
|
<AddressEntity
|
|
address={{ hash: web3AccountWithDomain.address, ens_domain_name: web3AccountWithDomain.domain }}
|
|
isLoading={ web3AccountWithDomain.isLoading }
|
|
truncation="dynamic"
|
|
fontSize="sm"
|
|
fontWeight={ 500 }
|
|
noAltHash
|
|
onClick={ handleAddressClick }
|
|
/>
|
|
{ web3Wallet.isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
|
|
<IconButton
|
|
aria-label="Open wallet"
|
|
variant="icon_secondary"
|
|
size="2xs"
|
|
onClick={ handleOpenWalletClick }
|
|
loading={ web3Wallet.isOpen }
|
|
>
|
|
<IconSvg name="gear"/>
|
|
</IconButton>
|
|
) }
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
size="sm"
|
|
onClick={ handleConnectWalletClick }
|
|
loading={ web3Wallet.isOpen }
|
|
loadingText="Connect Wallet"
|
|
w="100%"
|
|
>
|
|
Connect
|
|
</Button>
|
|
);
|
|
})();
|
|
|
|
return (
|
|
<Box className={ className }>
|
|
<Flex px={ 1 } mb="1" textStyle="xs" alignItems="center" fontWeight="500">
|
|
<span>Connected wallet</span>
|
|
<Hint
|
|
label={
|
|
web3Wallet.isConnected ?
|
|
'This wallet is currently connected to Blockscout and used for interacting with apps and smart contracts' :
|
|
'This wallet is used for interacting with apps and smart contracts'
|
|
}
|
|
boxSize={ 4 }
|
|
ml={ 1 }
|
|
/>
|
|
</Flex>
|
|
{ content }
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default React.memo(chakra(UserProfileContentWallet));
|