Skip to content

Commit

Permalink
feat: continue
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielsimao
danielsimao committed Dec 13, 2024
1 parent 8dc5b2b commit 6c670d2
Show file tree
Hide file tree
Showing 20 changed files with 326 additions and 205 deletions.
42 changes: 34 additions & 8 deletions apps/evm/src/components/ConnectButton/ConnectButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
'use client';

import { useDynamicContext, useIsLoggedIn } from '@dynamic-labs/sdk-react-core';
import { isEthereumWallet } from '@dynamic-labs/ethereum';
import { useDynamicContext, useDynamicEvents, useIsLoggedIn, useSwitchWallet } from '@dynamic-labs/sdk-react-core';
import { Button } from '@gobob/ui';
import { Trans } from '@lingui/macro';
import { useStore } from '@tanstack/react-store';
import { useState } from 'react';
import { useTheme } from 'styled-components';
import { useMediaQuery } from 'usehooks-ts';
import { Drawer } from 'vaul';
import { useAccount } from 'wagmi';
import { isBitcoinWallet } from '@dynamic-labs/bitcoin';

import { ProfileDrawer } from '../ProfileDrawer';
import { ProfileTag } from '../ProfileTag';

import { StyledContent, StyledMobileContentWrapper, StyledTrigger, StyledUnderlay } from './ConnectButton.style';

import { useBtcAccount } from '@/hooks';
import { useDynamicWallets } from '@/hooks';
import { store } from '@/lib/store';

const ConnectButton = (): JSX.Element => {
Expand All @@ -26,15 +27,40 @@ const ConnectButton = (): JSX.Element => {

const [isOpen, setOpen] = useState(false);

const { setShowAuthFlow } = useDynamicContext();
const { setShowAuthFlow, handleUnlinkWallet } = useDynamicContext();
const switchWallet = useSwitchWallet();
const isLoggedIn = useIsLoggedIn();

const { address: evmAddress } = useAccount();
const { address: btcAddress } = useBtcAccount();
const { btcWallet, evmWallet } = useDynamicWallets();

const isLoading = isLoggedIn && !(evmAddress || btcAddress);
const isLoading = isLoggedIn && !(btcWallet || evmWallet);

// const isAuthenticated = evmAddress || btcAddress;
useDynamicEvents('walletAdded', async (newWallet, userWallets) => {
const otherWallets = userWallets.filter((wallet) => wallet.id !== newWallet.id);

// Only newWallet is conencted
if (!otherWallets.length) return;

if (isEthereumWallet(newWallet)) {
await switchWallet(newWallet.id);

const evmWallet = otherWallets.find((wallet) => isEthereumWallet(wallet));

// unlink if there is another evm wallet
if (evmWallet) {
handleUnlinkWallet(evmWallet.id);
}
}

if (isBitcoinWallet(newWallet)) {
const btcWallet = otherWallets.find((wallet) => isBitcoinWallet(wallet) && wallet.id !== newWallet.id);

// unlink if there is another btc wallet
if (btcWallet) {
handleUnlinkWallet(btcWallet.id);
}
}
});

if (!isLoggedIn) {
const handleConnect = () => {
Expand Down
98 changes: 19 additions & 79 deletions apps/evm/src/components/ProfileDrawer/ProfileBtcWallet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
'use client';

import { WalletIcon } from '@dynamic-labs/wallet-book';
import { CurrencyAmount } from '@gobob/currency';
import { BTC } from '@gobob/icons';
import { Button, Card, ChevronRight, Flex, LinkSlash, Span, Spinner, Tooltip } from '@gobob/ui';
import { BITCOIN } from '@gobob/tokens';
import { truncateBtcAddress } from '@gobob/utils';
import { Trans } from '@lingui/macro';
import { CurrencyAmount } from '@gobob/currency';
import { BITCOIN } from '@gobob/tokens';
import { useState } from 'react';

import { CopyAddress } from '../CopyAddress';

import { StyledWalletCard } from './ProfileDrawer.style';
import { ProfileWallet } from './ProfileWallet';

import { useBtcAccount, useBtcBalance, useBtcDynamicWallet } from '@/hooks';
import { useBtcAccount, useBtcBalance, useDynamicWallets } from '@/hooks';

type ProfileBtcWalletProps = {
onPressConnect: () => void;
Expand All @@ -23,79 +19,23 @@ type ProfileBtcWalletProps = {
const ProfileBtcWallet = ({ onPressConnect, onUnlink }: ProfileBtcWalletProps): JSX.Element | null => {
const { data: btcBalance } = useBtcBalance();
const { address: btcAddress, connector: btcConnector } = useBtcAccount();
const btcWallet = useBtcDynamicWallet();

const [prevBtcWallet, setPrevBtcWallet] = useState<string | undefined>(btcWallet?.id);
const [isDisconnecting, setDisconnecting] = useState(false);

if (btcWallet && btcWallet?.id !== prevBtcWallet) {
setPrevBtcWallet(btcWallet?.id);
setDisconnecting(false);
}

if (!btcConnector || !btcAddress || !btcWallet) {
return (
<StyledWalletCard
isHoverable
isPressable
alignItems='center'
background='grey-600'
direction='row'
gap='md'
justifyContent='space-between'
padding='md'
onPress={onPressConnect}
>
<Flex alignItems='center' gap='md'>
<BTC size='xl' />
<Span size='s' weight='semibold'>
<Trans>Connect BTC Wallet</Trans>
</Span>
</Flex>
<ChevronRight color='grey-50' />
</StyledWalletCard>
);
}

const handleUnlink = () => {
onUnlink(btcWallet.id);
setDisconnecting(true);
};
const { btcWallet, evmWallet } = useDynamicWallets();

return (
<Card
key={btcWallet.id}
alignItems='center'
background='grey-600'
direction='row'
gap='md'
justifyContent='space-between'
padding='md'
>
<Flex alignItems='center' gap='md'>
<BTC size='xl' />
<Flex direction='column'>
<Span size='s' weight='semibold'>
{CurrencyAmount.fromRawAmount(BITCOIN, btcBalance?.total || 0).toSignificant()} BTC
</Span>
<Flex alignItems='center' gap='s'>
<WalletIcon style={{ height: '1rem', width: '1rem' }} walletKey={btcConnector.key} />
<CopyAddress
address={btcAddress || ''}
color='grey-50'
size='xs'
truncatedAddress={truncateBtcAddress(btcAddress || '')}
weight='semibold'
/>
</Flex>
</Flex>
</Flex>
<Tooltip label={<Trans>Unlink wallet</Trans>}>
<Button isIconOnly size='s' variant='ghost' onPress={handleUnlink}>
{isDisconnecting ? <Spinner size='s' /> : <LinkSlash color='grey-50' size='s' />}
</Button>
</Tooltip>
</Card>
<ProfileWallet
address={btcAddress}
avatar={<BTC size='xl' />}
balanceLabel={`${CurrencyAmount.fromRawAmount(BITCOIN, btcBalance?.total || 0).toSignificant()} BTC`}
connectLabel={<Trans>Connect BTC Wallet</Trans>}
isRemovable={!!evmWallet}
truncatedAddress={truncateBtcAddress(btcAddress || '')}
walletAvatar={
btcConnector && <WalletIcon style={{ height: '1rem', width: '1rem' }} walletKey={btcConnector.key} />
}
walletId={btcWallet?.id}
onPressConnect={onPressConnect}
onUnlink={onUnlink}
/>
);
};

Expand Down
58 changes: 30 additions & 28 deletions apps/evm/src/components/ProfileDrawer/ProfileDrawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
'use client';

import { useDynamicContext, useDynamicModals } from '@dynamic-labs/sdk-react-core';
import { useDynamicContext, useDynamicModals, useSwitchWallet } from '@dynamic-labs/sdk-react-core';
import { Button, Card, Flex, P, Power, QrCode, Skeleton, SolidCreditCard, Tooltip } from '@gobob/ui';
import { Trans } from '@lingui/macro';
import { useAccount } from 'wagmi';

import { ProfileTag } from '../ProfileTag';
Expand All @@ -11,53 +10,46 @@ import { ProfileBtcWallet } from './ProfileBtcWallet';
import { ProfileEvmWallet } from './ProfileEvmWallet';
import { ProfileTokenList } from './ProfileTokenList';

import { L1_CHAIN } from '@/constants';
import { useBtcAccount, useTotalBalance } from '@/hooks';
import { store } from '@/lib/store';
import { chakraPetch } from '@/app/fonts';
import { ExternalLinks, L1_CHAIN } from '@/constants';
import { useDynamicWallets, useTotalBalance } from '@/hooks';
import { store } from '@/lib/store';

type ProfileDrawerProps = {
onClose: () => void;
};

const ProfileDrawer = ({ onClose }: ProfileDrawerProps): JSX.Element => {
const { setShowAuthFlow, handleLogOut } = useDynamicContext();
const { address: evmAddress, chain } = useAccount();
const { address: btcAddress } = useBtcAccount();
const { handleUnlinkWallet, setSelectedTabIndex } = useDynamicContext();
const { handleLogOut } = useDynamicContext();
const { chainId = L1_CHAIN } = useAccount();
const { handleUnlinkWallet, setSelectedTabIndex, primaryWallet } = useDynamicContext();
const switchWallet = useSwitchWallet();
const { setShowLinkNewWalletModal } = useDynamicModals();

const chainId = chain?.id || L1_CHAIN;
const { evmWallet } = useDynamicWallets();

const { formatted, isPending: isBalancePending } = useTotalBalance(chainId);

const isAuthenticated = evmAddress || btcAddress;

if (!isAuthenticated) {
const handleConnect = () => {
setShowAuthFlow(true);
};

return (
<Button variant='ghost' onPress={handleConnect}>
<Trans>Connect Wallet</Trans>
</Button>
);
}

const handleLogout = () => {
setSelectedTabIndex(0);
handleLogOut();
onClose();
};

const handleConnectEvmWallet = () => {
setSelectedTabIndex(1);
setShowLinkNewWalletModal(true);
onClose();
};

const handleConnectBtcWallet = () => {
setSelectedTabIndex(2);
setShowLinkNewWalletModal(true);
onClose();
};

const handlePressBuy = () => {
window.open('https://checkout.banxa.com/?coinType=ETH&fiatType=EUR&blockchain=BOB', '_blank', 'noreferrer');
window.open(ExternalLinks.BANXA, '_blank', 'noreferrer');

onClose();
};

Expand All @@ -70,6 +62,16 @@ const ProfileDrawer = ({ onClose }: ProfileDrawerProps): JSX.Element => {
}
}));

const handleUnlinkBtc = async (walletId: string) => {
if (!evmWallet || !primaryWallet) return;

if (walletId === primaryWallet?.id) {
await switchWallet(evmWallet.id);
}

handleUnlinkWallet(walletId);
};

return (
<Flex direction='column' flex={1} gap='xl'>
<Flex alignItems='center' justifyContent='space-between'>
Expand Down Expand Up @@ -118,8 +120,8 @@ const ProfileDrawer = ({ onClose }: ProfileDrawerProps): JSX.Element => {
</Card>
</Flex>
<Flex direction='column' gap='md'>
<ProfileEvmWallet chainId={chainId} />
<ProfileBtcWallet onPressConnect={handleConnectBtcWallet} onUnlink={handleUnlinkWallet} />
<ProfileEvmWallet chainId={chainId} onPressConnect={handleConnectEvmWallet} />
<ProfileBtcWallet onPressConnect={handleConnectBtcWallet} onUnlink={handleUnlinkBtc} />
</Flex>
<Flex direction='column' gap='md'>
<ProfileTokenList chainId={chainId} />
Expand Down
Loading

0 comments on commit 6c670d2

Please sign in to comment.