Skip to content

Commit a6355b4

Browse files
andrewlee348andrewlee348
committed
added select wallet in send, copy wallet address button
1 parent 6a6ee83 commit a6355b4

File tree

16 files changed

+144
-105
lines changed

16 files changed

+144
-105
lines changed

‎packages/wallet-widget/src/components/CopyButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const CopyButton = (props: CopyButtonProps) => {
1717
if (isCopied) {
1818
setTimeout(() => {
1919
setCopy(false)
20-
}, 4000)
20+
}, 2000)
2121
}
2222
}, [isCopied])
2323

‎packages/wallet-widget/src/components/Filter/FilterMenu.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@ import { useState } from 'react'
77

88
import { useSettings } from '../../hooks'
99
import { useFiatWalletsMap } from '../../hooks/useFiatWalletsMap'
10-
import { getConnectorLogo } from '../../utils/wallets'
1110
import { MediaIconWrapper, StackedIconTag } from '../IconWrappers'
1211
import { ListCardNav } from '../ListCard'
1312
import { ListCardSelect } from '../ListCard/ListCardSelect'
14-
import { SlideupDrawer } from '../SlideupDrawer'
13+
import { SlideupDrawer } from '../Select/SlideupDrawer'
1514
import { WalletAccountGradient } from '../WalletAccountGradient'
1615

1716
import { NetworkRow } from './NetworkRow'
@@ -233,11 +232,7 @@ export const FilterMenu = ({
233232
}
234233
onClick={() => setSelectedWallets([wallet])}
235234
>
236-
<WalletAccountGradient
237-
accountAddress={wallet.address}
238-
loginIcon={getConnectorLogo(wallet.signInMethod)}
239-
size={'small'}
240-
/>
235+
<WalletAccountGradient accountAddress={wallet.address} size={'small'} />
241236
<Text color="primary" fontWeight="medium" variant="normal">
242237
{formatAddress(wallet.address)}
243238
</Text>

‎packages/wallet-widget/src/components/GradientAvatarList.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

packages/wallet-widget/src/components/NetworkSelect.tsx renamed to packages/wallet-widget/src/components/Select/NetworkSelect.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { cardVariants, ChevronUpDownIcon, cn, NetworkImage, Text } from '@0xsequ
22
import { useState } from 'react'
33
import { useChainId, useChains, useSwitchChain } from 'wagmi'
44

5-
import { NetworkRow } from './Filter/NetworkRow'
6-
import { WALLET_HEIGHT } from './SequenceWalletProvider'
5+
import { NetworkRow } from '../Filter/NetworkRow'
6+
import { WALLET_HEIGHT } from '../SequenceWalletProvider'
7+
78
import { SlideupDrawer } from './SlideupDrawer'
89

910
const NETWORK_SELECT_HEIGHT = 70
11+
1012
export const NetworkSelect = () => {
1113
const chains = useChains()
1214
const chainId = useChainId()

packages/wallet-widget/src/components/SlideupDrawer.tsx renamed to packages/wallet-widget/src/components/Select/SlideupDrawer.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import { motion } from 'motion/react'
33
import { useContext, useEffect, useState } from 'react'
44
import ReactDOM from 'react-dom'
55

6-
import { WalletContentRefContext } from '../contexts/WalletContentRef'
7-
8-
import { WALLET_WIDTH } from './SequenceWalletProvider'
6+
import { WalletContentRefContext } from '../../contexts/WalletContentRef'
7+
import { WALLET_WIDTH } from '../SequenceWalletProvider'
98

109
export const SlideupDrawer = ({
1110
label,

‎packages/wallet-widget/src/components/Select/WalletSelect.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useWallets } from '@0xsequence/connect'
2+
import { ChevronUpDownIcon, Text } from '@0xsequence/design-system'
3+
import { useState } from 'react'
4+
5+
import { SelectWalletRow } from '../SelectWalletRow'
6+
import { WALLET_HEIGHT } from '../SequenceWalletProvider'
7+
8+
import { SlideupDrawer } from './SlideupDrawer'
9+
10+
const WALLET_SELECT_HEIGHT = 60
11+
12+
export const WalletSelect = ({ selectedWallet, onClick }: { selectedWallet: string; onClick: (address: string) => void }) => {
13+
const { wallets } = useWallets()
14+
const [isOpen, setIsOpen] = useState(false)
15+
16+
const activeWallet = wallets.find(wallet => wallet.isActive)
17+
18+
const allButActiveWallet = wallets.filter(wallet => wallet.address !== activeWallet?.address)
19+
20+
const handleClick = (address: string) => {
21+
onClick(address)
22+
setIsOpen(false)
23+
}
24+
25+
return (
26+
<div
27+
className="flex bg-background-secondary justify-between items-center hover:opacity-80 cursor-pointer rounded-xl px-4 py-3 gap-2 select-none"
28+
style={{ height: WALLET_SELECT_HEIGHT }}
29+
onClick={() => setIsOpen(true)}
30+
>
31+
<div className="flex flex-col gap-2">
32+
<Text variant="small" fontWeight="bold" color="muted">
33+
Select Connected Wallet
34+
</Text>
35+
</div>
36+
37+
<ChevronUpDownIcon className="text-muted" />
38+
{isOpen && (
39+
<SlideupDrawer label="Network" onClose={() => setIsOpen(false)}>
40+
<div className="flex flex-col gap-2 px-2" style={{ maxHeight: `calc(${WALLET_HEIGHT} / 2)`, overflowY: 'auto' }}>
41+
{allButActiveWallet.map(wallet => (
42+
<SelectWalletRow
43+
key={wallet.address}
44+
wallet={wallet}
45+
isSelected={wallet.address === selectedWallet}
46+
onClick={handleClick}
47+
onClose={() => setIsOpen(false)}
48+
/>
49+
))}
50+
</div>
51+
</SlideupDrawer>
52+
)}
53+
</div>
54+
)
55+
}

‎packages/wallet-widget/src/components/SelectWalletRow.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,27 @@ import { Text } from '@0xsequence/design-system'
33

44
import { useSettings } from '../hooks'
55
import { useFiatWalletsMap } from '../hooks/useFiatWalletsMap'
6-
import { getConnectorLogo } from '../utils/wallets'
76

7+
import { CopyButton } from './CopyButton'
88
import { ListCardSelect } from './ListCard'
99
import { WalletAccountGradient } from './WalletAccountGradient'
1010

1111
export const SelectWalletRow = ({
1212
wallet,
13-
setActiveWallet,
13+
isSelected = false,
14+
onClick,
1415
onClose
1516
}: {
1617
wallet: ConnectedWallet
17-
setActiveWallet: (address: string) => void
18+
isSelected?: boolean
19+
onClick: (address: string) => void
1820
onClose: () => void
1921
}) => {
2022
const { fiatCurrency } = useSettings()
2123
const { fiatWalletsMap } = useFiatWalletsMap()
2224

2325
function onSelectWallet() {
24-
setActiveWallet(wallet.address)
26+
onClick(wallet.address)
2527
onClose()
2628
}
2729

@@ -36,12 +38,13 @@ export const SelectWalletRow = ({
3638
</Text>
3739
}
3840
onClick={onSelectWallet}
39-
isSelected={wallet.isActive}
41+
isSelected={wallet.isActive || isSelected}
4042
>
41-
<WalletAccountGradient accountAddress={wallet.address} loginIcon={getConnectorLogo(wallet.signInMethod)} size={'small'} />
43+
<WalletAccountGradient accountAddress={wallet.address} size={'small'} />
4244
<div className="flex flex-col">
43-
<Text color="primary" fontWeight="medium" variant="normal">
45+
<Text className="flex flex-row gap-1 items-center" color="primary" fontWeight="medium" variant="normal">
4446
{formatAddress(wallet.address)}
47+
<CopyButton text={wallet.address} buttonVariant="icon" />
4548
</Text>
4649
</div>
4750
</ListCardSelect>

‎packages/wallet-widget/src/components/WalletAccountGradient.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1+
import { useWallets } from '@0xsequence/connect'
12
import { GradientAvatar } from '@0xsequence/design-system'
2-
import { ReactNode } from 'react'
3+
4+
import { getConnectorLogo } from '../utils/wallets'
35

46
export const WalletAccountGradient = ({
57
accountAddress,
6-
loginIcon: LoginIcon,
78
size = 'large'
89
}: {
910
accountAddress: string
10-
loginIcon: ReactNode
1111
size?: 'small' | 'large'
1212
}) => {
13+
const { wallets } = useWallets()
1314
const remSize = size === 'small' ? 8 : 16
15+
16+
const LoginIcon = getConnectorLogo(wallets.find(wallet => wallet.address === accountAddress)?.signInMethod || '')
17+
1418
return (
1519
<div className="flex relative">
1620
<div className="relative inline-block">

‎packages/wallet-widget/src/components/WalletHeader/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { useState } from 'react'
55

66
import { HEADER_HEIGHT, HEADER_HEIGHT_WITH_LABEL } from '../../constants'
77
import { useNavigation } from '../../hooks'
8+
import { SlideupDrawer } from '../Select/SlideupDrawer'
89
import { SelectWalletRow } from '../SelectWalletRow'
9-
import { SlideupDrawer } from '../SlideupDrawer'
1010

1111
import { AccountInformation } from './components/AccountInformation'
1212

@@ -68,7 +68,7 @@ export const WalletHeader = ({
6868
key={index}
6969
wallet={wallet}
7070
onClose={() => setAccountSelectorModalOpen(false)}
71-
setActiveWallet={setActiveWallet}
71+
onClick={setActiveWallet}
7272
/>
7373
))}
7474
</div>

‎packages/wallet-widget/src/views/Home/IntegratedWallet/index.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@ import { AnimatePresence } from 'motion/react'
1919
import { useEffect, useMemo, useState } from 'react'
2020
import { useAccount, useConfig } from 'wagmi'
2121

22+
import { CopyButton } from '../../../components/CopyButton'
2223
import { FilterMenu } from '../../../components/Filter/FilterMenu'
2324
import { StackedIconTag } from '../../../components/IconWrappers/StackedIconTag'
2425
import { ListCardNav } from '../../../components/ListCard/ListCardNav'
2526
import { ListCardNavTable } from '../../../components/ListCardTable/ListCardNavTable'
27+
import { SlideupDrawer } from '../../../components/Select/SlideupDrawer'
2628
import { SelectWalletRow } from '../../../components/SelectWalletRow'
27-
import { SlideupDrawer } from '../../../components/SlideupDrawer'
2829
import { WalletAccountGradient } from '../../../components/WalletAccountGradient'
2930
import { useNavigation, useSettings } from '../../../hooks'
3031
import { useFiatWalletsMap } from '../../../hooks/useFiatWalletsMap'
3132
import { computeBalanceFiat } from '../../../utils'
32-
import { getConnectorLogo } from '../../../utils/wallets'
3333

3434
import { OperationButtonTemplate } from './Buttons/OperationButtonTemplate'
3535

@@ -226,9 +226,6 @@ export const IntegratedWallet = () => {
226226
})
227227
}
228228

229-
const activeWallet = wallets.find(wallet => wallet.isActive)
230-
const LoginIconComponent = getConnectorLogo(activeWallet?.signInMethod || '')
231-
232229
const homeNavTableItems = [
233230
<ListCardNav
234231
onClick={onClickTokens}
@@ -292,11 +289,14 @@ export const IntegratedWallet = () => {
292289
return (
293290
<div className="flex flex-col items-center pt-4">
294291
<div className="flex flex-row gap-2 items-center">
295-
<WalletAccountGradient accountAddress={accountAddress || ''} loginIcon={LoginIconComponent} />
292+
<WalletAccountGradient accountAddress={accountAddress || ''} />
296293
<div className="flex flex-col">
297-
<Text color="primary" fontWeight="medium" variant="normal">
298-
{formatAddress(accountAddress || '')}
299-
</Text>
294+
<div className="flex flex-row gap-1 items-center">
295+
<Text color="primary" fontWeight="medium" variant="normal">
296+
{formatAddress(accountAddress || '')}
297+
</Text>
298+
<CopyButton text={accountAddress || ''} buttonVariant="icon" />
299+
</div>
300300
{signInDisplay && (
301301
<Text color="muted" fontWeight="medium" variant="small">
302302
{signInDisplay}
@@ -362,7 +362,7 @@ export const IntegratedWallet = () => {
362362
key={index}
363363
wallet={wallet}
364364
onClose={() => setAccountSelectorModalOpen(false)}
365-
setActiveWallet={setActiveWallet}
365+
onClick={setActiveWallet}
366366
/>
367367
))}
368368
</div>

0 commit comments

Comments
 (0)