wallet-connect-web-examples/wallets/react-wallet-v2/src/components/AccountCard.tsx
2022-02-07 13:02:26 +02:00

42 lines
1.1 KiB
TypeScript

import { truncate } from '@/utils/HelperUtil'
import { Avatar, Button, Card, Text } from '@nextui-org/react'
import { Paper } from 'react-iconly'
interface Props {
name: string
logo: string
rgb: string
address: string
}
export default function AccountCard({ name, logo, rgb, address }: Props) {
return (
<Card
bordered
borderWeight="light"
css={{
borderColor: `rgba(${rgb}, 0.4)`,
boxShadow: `0 0 10px 0 rgba(${rgb}, 0.2)`,
marginBottom: '$6',
overflowY: 'hidden',
minHeight: '70px'
}}
>
<Card.Body
css={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
>
<Avatar src={logo} />
<div style={{ flex: 1 }}>
<Text h5 css={{ marginLeft: '$9' }}>
{name}
</Text>
<Text weight="light" size={13} css={{ marginLeft: '$9' }}>
{truncate(address, 19)}
</Text>
</div>
<Button auto flat color="primary" icon={<Paper filled />} />
</Card.Body>
</Card>
)
}