wallet-connect-web-examples/wallets/react-web3wallet/src/components/PairingCard.tsx
Gancho Radkov 7a3886073b
feat: Web3Wallet Example (#94)
* feat: v2 wallet

* feat: Web3Wallet sign integration

* chore: adds `core` to package.json

* feat: Web3Wallet Auth integration

* chore: core & web3wallet canary

* chore: rm config

* chore: force redeploy

* chore: rm core & sign-client deps

* fix: rm `sign-client` usage

* refactor: updates README

* feat: adds metadata mock obj & removes relay url param

* refactor: more url mentions

* refactor: rm v2 wallet readme references & uses web3wallet.core...

* refactor: wallet -> web3wallet

* refactor: rm wallet to web3wallet

* fix: adds async to example listeners
2022-12-22 11:19:46 +02:00

55 lines
1.3 KiB
TypeScript

import { truncate } from '@/utils/HelperUtil'
import { Avatar, Button, Card, Link, Text, Tooltip } from '@nextui-org/react'
import Image from 'next/image'
/**
* Types
*/
interface IProps {
logo?: string
name?: string
url?: string
onDelete: () => Promise<void>
}
/**
* Component
*/
export default function PairingCard({ logo, name, url, onDelete }: IProps) {
return (
<Card
bordered
borderWeight="light"
css={{
position: 'relative',
marginBottom: '$6',
minHeight: '70px'
}}
>
<Card.Body
css={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
overflow: 'hidden'
}}
>
<Avatar src={logo} />
<div style={{ flex: 1 }}>
<Text h5 css={{ marginLeft: '$9' }}>
{name}
</Text>
<Link href={url} css={{ marginLeft: '$9' }}>
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Link>
</div>
<Tooltip content="Delete" placement="left">
<Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}>
<Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
</Button>
</Tooltip>
</Card.Body>
</Card>
)
}