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
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { type ButtonProps } from '@chakra-ui/react';
|
|
import { DynamicConnectButton, DynamicUserProfile, useDynamicContext, useIsLoggedIn } from '@dynamic-labs/sdk-react-core';
|
|
import React from 'react';
|
|
|
|
import { useMarketplaceContext } from 'lib/contexts/marketplace';
|
|
import useWalletDynamic from 'lib/web3/wallet/useWalletDynamic';
|
|
|
|
import UserProfileButton from './UserProfileButton';
|
|
import UserProfilePopover from './UserProfilePopover';
|
|
|
|
interface Props {
|
|
buttonSize?: ButtonProps['size'];
|
|
buttonVariant?: ButtonProps['variant'];
|
|
}
|
|
|
|
const UserProfile = ({ buttonSize, buttonVariant = 'header' }: Props) => {
|
|
const isLoggedIn = useIsLoggedIn();
|
|
const { user, authMode } = useDynamicContext();
|
|
const wallet = useWalletDynamic({ source: isLoggedIn ? 'Profile dropdown' : 'Login' });
|
|
const { isAutoConnectDisabled } = useMarketplaceContext();
|
|
|
|
const handleOpenModal = React.useCallback(() => {
|
|
wallet.openModal();
|
|
}, [ wallet ]);
|
|
|
|
if (isLoggedIn && authMode === 'connect-and-sign') {
|
|
return (
|
|
<>
|
|
<UserProfileButton
|
|
email={ user?.email }
|
|
size={ buttonSize }
|
|
variant={ buttonVariant }
|
|
onClick={ handleOpenModal }
|
|
selected
|
|
/>
|
|
<DynamicUserProfile variant="modal"/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (wallet.isConnected) {
|
|
return (
|
|
<>
|
|
<UserProfilePopover isAutoConnectDisabled={ isAutoConnectDisabled }>
|
|
<UserProfileButton
|
|
email={ user?.email }
|
|
size={ buttonSize }
|
|
variant={ buttonVariant }
|
|
selected
|
|
/>
|
|
</UserProfilePopover>
|
|
<DynamicUserProfile variant="modal"/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DynamicConnectButton>
|
|
<UserProfileButton
|
|
as="div"
|
|
size={ buttonSize }
|
|
variant={ buttonVariant }
|
|
/>
|
|
</DynamicConnectButton>
|
|
);
|
|
};
|
|
|
|
export default React.memo(UserProfile);
|