2e23016873
* feat: implements just works in example dapp * feat: implements just works in example wallet * feat: adds toast on app pairing attempt * chore: updates canary * refactor: resets app only after successful disconnect * chore: updates wallet canary * fix: modal state * chore: updates canary to rc * fix: session update & session events * fix: fixes accounts changed and updates canary * chore: updates dapp canary * chore: updates examples to latest --------- Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import ChainCard from '@/components/ChainCard'
|
|
import SettingsStore from '@/store/SettingsStore'
|
|
import { eip155Addresses } from '@/utils/EIP155WalletUtil'
|
|
import { truncate } from '@/utils/HelperUtil'
|
|
import { updateSignClientChainId } from '@/utils/WalletConnectUtil'
|
|
import { Avatar, Button, Text, Tooltip } from '@nextui-org/react'
|
|
import Image from 'next/image'
|
|
import { useState } from 'react'
|
|
import { useSnapshot } from 'valtio'
|
|
|
|
interface Props {
|
|
name: string
|
|
logo: string
|
|
rgb: string
|
|
address: string
|
|
chainId: string
|
|
}
|
|
|
|
export default function AccountCard({ name, logo, rgb, address = '', chainId }: Props) {
|
|
const [copied, setCopied] = useState(false)
|
|
const { activeChainId, account } = useSnapshot(SettingsStore.state)
|
|
function onCopy() {
|
|
navigator?.clipboard?.writeText(address)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 1500)
|
|
}
|
|
|
|
async function onChainChanged(chainId: string, address: string) {
|
|
SettingsStore.setActiveChainId(chainId)
|
|
await updateSignClientChainId(chainId.toString(), address)
|
|
}
|
|
|
|
return (
|
|
<ChainCard rgb={rgb} flexDirection="row" alignItems="center">
|
|
<Avatar src={logo} />
|
|
<div style={{ flex: 1 }}>
|
|
<Text h5 css={{ marginLeft: '$9' }}>
|
|
{name}
|
|
</Text>
|
|
<Text weight="light" size={13} css={{ marginLeft: '$9' }}>
|
|
{address ? truncate(address, 19) : '<no address available>'}
|
|
</Text>
|
|
</div>
|
|
|
|
<Tooltip content={copied ? 'Copied!' : 'Copy'} placement="left">
|
|
<Button
|
|
size="sm"
|
|
css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.15)' }}
|
|
data-testid={'chain-copy-button' + chainId}
|
|
onClick={onCopy}
|
|
>
|
|
<Image
|
|
src={copied ? '/icons/checkmark-icon.svg' : '/icons/copy-icon.svg'}
|
|
width={15}
|
|
height={15}
|
|
alt="copy icon"
|
|
/>
|
|
</Button>
|
|
</Tooltip>
|
|
<Button
|
|
size="sm"
|
|
css={{
|
|
minWidth: 'auto',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
|
marginLeft: '$5'
|
|
}}
|
|
data-testid={'chain-switch-button' + chainId}
|
|
onPress={() => {
|
|
onChainChanged(chainId, address)
|
|
}}
|
|
>
|
|
{activeChainId === chainId ? `✅` : `🔄`}
|
|
</Button>
|
|
</ChainCard>
|
|
)
|
|
}
|