53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import PageHeader from '@/components/PageHeader'
|
|
import QrReader from '@/components/QrReader'
|
|
import { walletConnectClient } from '@/utils/WalletConnectUtil'
|
|
import { Button, Input, Loading, Text } from '@nextui-org/react'
|
|
import { Fragment, useState } from 'react'
|
|
|
|
export default function WalletConnectPage() {
|
|
const [uri, setUri] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
async function onConnect(uri: string) {
|
|
try {
|
|
setLoading(true)
|
|
await walletConnectClient.pair({ uri })
|
|
} catch (err: unknown) {
|
|
alert(err)
|
|
} finally {
|
|
setUri('')
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<PageHeader title="WalletConnect" />
|
|
|
|
<QrReader onConnect={onConnect} />
|
|
|
|
<Text size={13} css={{ textAlign: 'center', marginTop: '$10', marginBottom: '$10' }}>
|
|
or use walletconnect uri
|
|
</Text>
|
|
|
|
<Input
|
|
bordered
|
|
placeholder="e.g. wc:a281567bb3e4..."
|
|
onChange={e => setUri(e.target.value)}
|
|
value={uri}
|
|
contentRight={
|
|
<Button
|
|
size="xs"
|
|
disabled={!uri}
|
|
css={{ marginLeft: -60 }}
|
|
onClick={() => onConnect(uri)}
|
|
color="gradient"
|
|
>
|
|
{loading ? <Loading size="sm" /> : 'Connect'}
|
|
</Button>
|
|
}
|
|
/>
|
|
</Fragment>
|
|
)
|
|
}
|