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
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { Box, HStack } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { useMarketplaceContext } from 'lib/contexts/marketplace';
|
|
import shortenString from 'lib/shortenString';
|
|
import useAccountWithDomain from 'lib/web3/useAccountWithDomain';
|
|
import { Button, type ButtonProps } from 'toolkit/chakra/button';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
import UserIdenticon from '../../UserIdenticon';
|
|
import { getUserHandle } from '../common/utils';
|
|
|
|
interface Props extends ButtonProps {
|
|
email?: string;
|
|
}
|
|
|
|
const UserProfileButton = ({ selected, email, ...rest }: Props) => {
|
|
const { isAutoConnectDisabled } = useMarketplaceContext();
|
|
const accountWithDomain = useAccountWithDomain(true);
|
|
|
|
const isLoading = accountWithDomain.isLoading;
|
|
|
|
const content = (() => {
|
|
if (selected && !isLoading) {
|
|
return accountWithDomain.address ? (
|
|
<HStack gap={ 2 }>
|
|
<UserIdenticon address={ accountWithDomain.address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
|
|
<Box display={{ base: 'none', md: 'block' }} maxW="200px" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
|
|
{ accountWithDomain.domain || shortenString(accountWithDomain.address) }
|
|
</Box>
|
|
</HStack>
|
|
) : (
|
|
<HStack gap={ 2 }>
|
|
<IconSvg name="profile" boxSize={ 5 }/>
|
|
<Box display={{ base: 'none', md: 'block' }}>{ email ? getUserHandle(email) : 'My profile' }</Box>
|
|
</HStack>
|
|
);
|
|
}
|
|
|
|
return 'Log in';
|
|
})();
|
|
|
|
return (
|
|
<Button
|
|
px={{ base: 2.5, lg: 3 }}
|
|
selected={ selected }
|
|
highlighted={ isAutoConnectDisabled }
|
|
fontWeight={ selected ? 700 : undefined }
|
|
loading={ isLoading }
|
|
{ ...rest }
|
|
>
|
|
{ content }
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default React.memo(UserProfileButton);
|