Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
25e7e00
commit 1314b2a
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| 'use client'; | ||
|
|
||
| import { Flex } from '@gobob/ui'; | ||
| import { ReactNode } from 'react'; | ||
|
|
||
| const AddornedAsset = ({ addornment, asset }: { asset: ReactNode; addornment: ReactNode }) => { | ||
| return ( | ||
| <Flex | ||
| elementType='span' | ||
| style={{ position: 'relative', display: 'inline-flex', width: 'max-content', height: 'fit-content' }} | ||
| > | ||
| {asset} | ||
| <span | ||
| style={{ | ||
| display: 'inline-flex', | ||
| position: 'absolute', | ||
| bottom: 0, | ||
| right: 0, | ||
| border: '1px solid #000000', | ||
| borderRadius: 99999, | ||
| overflow: 'hidden', | ||
| transform: 'translate(15%,15%)' | ||
| }} | ||
| > | ||
| {addornment} | ||
| </span> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export { AddornedAsset }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| 'use client'; | ||
|
|
||
| import { | ||
| Button, | ||
| Card, | ||
| ChevronRight, | ||
| Cog, | ||
| Drawer, | ||
| Flex, | ||
| P, | ||
| Power, | ||
| QrCode, | ||
| SolidCreditCard, | ||
| Span, | ||
| Tabs, | ||
| TabsItem | ||
| } from '@gobob/ui'; | ||
| import { Trans } from '@lingui/macro'; | ||
| import { useAccount } from 'wagmi'; | ||
| import { useDynamicContext } from '@dynamic-labs/sdk-react-core'; | ||
| import { ETH } from '@gobob/icons'; | ||
| import { WalletIcon } from '@dynamic-labs/wallet-book'; | ||
| import { truncateEthAddress } from '@gobob/utils'; | ||
|
|
||
| import { ChainLogo } from '../ChainLogo'; | ||
|
|
||
| import { ProfileTag } from './ProfileTag'; | ||
| import { TransactionList } from './TransactionList'; | ||
| import { ProfileTokenList } from './ProfileTokenList'; | ||
| import { AddornedAsset } from './AddornedAsset'; | ||
|
|
||
| import { useBalances, useBtcAccount, useTotalBalance } from '@/hooks'; | ||
| import { chainL1, L1_CHAIN } from '@/constants'; | ||
| import { useGetTransactions } from '@/hooks/useGetTransactions'; | ||
|
|
||
| enum ProfileDrawerTabs { | ||
| Tokens = 'tokens', | ||
| Activity = 'activity' | ||
| } | ||
|
|
||
| type ProfileDrawerProps = { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| const ProfileDrawer = ({ isOpen, onClose }: ProfileDrawerProps): JSX.Element => { | ||
| const { setShowAuthFlow, user, handleLogOut } = useDynamicContext(); | ||
| const { address: evmAddress, chain } = useAccount(); | ||
| const { address: btcAddress } = useBtcAccount(); | ||
|
|
||
| const chainId = chain?.id || L1_CHAIN; | ||
| const chainName = chain?.name || chainL1.name; | ||
|
|
||
| const { formatted } = useTotalBalance(chainId); | ||
|
|
||
| const { getBalance } = useBalances(chainId); | ||
| const { primaryWallet } = useDynamicContext(); | ||
|
|
||
| const { | ||
| data: transactions, | ||
| isInitialLoading: isTransactionsInitialLoading, | ||
| refetch: refetchTransaction | ||
| } = useGetTransactions(); | ||
|
|
||
| const isAuthenticated = evmAddress || btcAddress; | ||
|
|
||
| if (!isAuthenticated) { | ||
| const handleConnect = () => { | ||
| setShowAuthFlow(true); | ||
| }; | ||
|
|
||
| return ( | ||
| <Button variant='ghost' onPress={handleConnect}> | ||
| <Trans>Connect Wallet</Trans> | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| const handleLogout = () => { | ||
| handleLogOut(); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Drawer isOpen={isOpen} onClose={onClose}> | ||
| <Flex direction='column' gap='xl' paddingX='s'> | ||
| <Flex alignItems='center' justifyContent='space-between' padding='s'> | ||
| <ProfileTag btcAddress={btcAddress} evmAddress={evmAddress} size='md' user={user} /> | ||
| <Flex> | ||
| <Button isIconOnly aria-label='disconnect wallet(s)' size='s' variant='ghost' onPress={handleLogout}> | ||
| <Cog size='s' /> | ||
| </Button> | ||
| <Button isIconOnly aria-label='disconnect wallet(s)' size='s' variant='ghost' onPress={handleLogout}> | ||
| <Power size='s' /> | ||
| </Button> | ||
| </Flex> | ||
| </Flex> | ||
| {primaryWallet && ( | ||
| <Card | ||
| alignItems='center' | ||
| background='grey-600' | ||
| direction='row' | ||
| gap='md' | ||
| justifyContent='space-between' | ||
| padding='md' | ||
| > | ||
| <Flex alignItems='center'> | ||
| <AddornedAsset addornment={<ChainLogo chainId={chainId} size='xs' />} asset={<ETH size='xl' />} /> | ||
| <Flex direction='column'> | ||
| <Span size='s'>{getBalance('ETH')?.toSignificant()} ETH</Span> | ||
| <Flex gap='s'> | ||
| <Span color='grey-50' size='xs'> | ||
| {truncateEthAddress(primaryWallet.address)}{' '} | ||
| </Span> | ||
| <WalletIcon style={{ height: '1rem', width: '1rem' }} walletKey={primaryWallet?.connector?.key} /> | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| <ChevronRight /> | ||
| </Card> | ||
| )} | ||
| <P size='3xl' weight='bold'> | ||
| {formatted} | ||
| </P> | ||
| <Flex gap='md'> | ||
| <Card isHoverable isPressable flex={1} gap='lg' padding='lg' style={{ backgroundColor: '#3A1F12' }}> | ||
| <SolidCreditCard color='primary-500' /> | ||
| <P color='primary-500' weight='bold'> | ||
| Buy | ||
| </P> | ||
| </Card> | ||
| <Card isHoverable isPressable flex={1} gap='lg' padding='lg' style={{ backgroundColor: '#3A1F12' }}> | ||
| <QrCode color='primary-500' /> | ||
| <P color='primary-500' weight='bold'> | ||
| Receive | ||
| </P> | ||
| </Card> | ||
| </Flex> | ||
| <Tabs fullWidth size='s'> | ||
| <TabsItem key={ProfileDrawerTabs.Tokens} title={<Trans>Tokens</Trans>}> | ||
| <ProfileTokenList /> | ||
| </TabsItem> | ||
| <TabsItem key={ProfileDrawerTabs.Activity} title={<Trans>Activity</Trans>}> | ||
| <TransactionList | ||
| data={transactions} | ||
| isInitialLoading={isTransactionsInitialLoading} | ||
| onProveSuccess={refetchTransaction.bridge} | ||
| onRelaySuccess={refetchTransaction.bridge} | ||
| /> | ||
| </TabsItem> | ||
| </Tabs> | ||
| </Flex> | ||
| </Drawer> | ||
| ); | ||
| }; | ||
|
|
||
| export { ProfileDrawer }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| 'use client'; | ||
|
|
||
| import { UserProfile } from '@dynamic-labs/sdk-react-core'; | ||
| import { Flex, Span } from '@gobob/ui'; | ||
| import { truncateBtcAddress, truncateEthAddress } from '@gobob/utils'; | ||
| import ProfileAvatar from 'boring-avatars'; | ||
| import { Address } from 'viem'; | ||
|
|
||
| const sizeMap = { | ||
| s: { | ||
| icon: '1.5rem', | ||
| text: 's' | ||
| }, | ||
| md: { | ||
| icon: '2rem', | ||
| text: 'md' | ||
| } | ||
| } as const; | ||
|
|
||
| const ProfileTag = ({ | ||
| evmAddress, | ||
| btcAddress, | ||
| user, | ||
| size = 's' | ||
| }: { | ||
| btcAddress?: string; | ||
| evmAddress?: Address; | ||
| user?: UserProfile; | ||
| size?: 's' | 'md'; | ||
| }) => { | ||
| const displayedAddress = evmAddress | ||
| ? truncateEthAddress(evmAddress) | ||
| : btcAddress | ||
| ? truncateBtcAddress(btcAddress) | ||
| : undefined; | ||
|
|
||
| return ( | ||
| <Flex alignItems='center' elementType='span' gap='md'> | ||
| {user?.userId ? <ProfileAvatar name={user.userId} size={sizeMap[size].icon} /> : undefined} | ||
| <Span size={sizeMap[size].text} weight='semibold'> | ||
| {displayedAddress} | ||
| </Span> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export { ProfileTag }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { Flex, Span, ArrowDownCircle } from '@gobob/ui'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| type StyledExpandIconProps = { | ||
| $isExpanded?: boolean; | ||
| }; | ||
|
|
||
| const StyledSpan = styled(Span)` | ||
| display: inline-flex; | ||
| align-items: center; | ||
| position: relative; | ||
| margin-left: ${({ theme }) => theme.spacing('md')}; | ||
| padding: 0 ${({ theme }) => theme.spacing('s')}; | ||
| height: 24px; | ||
| border-radius: ${({ theme }) => theme.rounded('full')}; | ||
| `; | ||
|
|
||
| const StyledSpinnerWrapper = styled.span` | ||
| position: absolute; | ||
| top: 0; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| `; | ||
|
|
||
| const StyledTransactionList = styled(Flex)` | ||
| overflow-y: auto; | ||
| flex: 1 1 auto; | ||
| `; | ||
|
|
||
| const StyledTransactionListWrapper = styled(Flex)` | ||
| overflow: hidden; | ||
| `; | ||
|
|
||
| const StyledDetailsButton = styled(Flex)` | ||
| font: inherit; | ||
| display: flex; | ||
| width: 100%; | ||
| flex-direction: column; | ||
| gap: ${({ theme }) => theme.spacing('md')}; | ||
| padding: ${({ theme }) => `${theme.spacing('md')} 0`}; | ||
| `; | ||
|
|
||
| const StyledExpandIcon = styled(ArrowDownCircle)<StyledExpandIconProps>` | ||
| ${({ theme }) => theme.transition('common', 'normal')}; | ||
| transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(-180deg)' : 'rotate(0deg)')}; | ||
| `; | ||
|
|
||
| export { | ||
| StyledDetailsButton, | ||
| StyledExpandIcon, | ||
| StyledSpan, | ||
| StyledSpinnerWrapper, | ||
| StyledTransactionList, | ||
| StyledTransactionListWrapper | ||
| }; |
Oops, something went wrong.