wallet-connect-web-examples/wallets/react-wallet-auth/src/pages/walletconnect.tsx
Celine Sarafa 5a438ac92a
feat/add auth demos (#49)
* Add auth dapp

* Add initial auth wallet

* Remove unusused files

* Refactor code

* Switched both to NPM, use npm package
2022-09-02 12:34:03 +03:00

55 lines
1.4 KiB
TypeScript

import PageHeader from '@/components/PageHeader'
import QrReader from '@/components/QrReader'
import { authClient } 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 authClient.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
css={{ width: '100%' }}
bordered
aria-label="wc url connect input"
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>
)
}