@did-connect/react v2.2.4
Client side library to work with DID Connect by ArcBlock.
Usage
yarn add @did-connect/react
Then:
import axios from 'axios';
// import each module individually
import DidConnect from '@did-connect/react/Connect';
import DidButton from '@did-connect/react/Button';
import { SessionProvider, SessionConsumer } from '@did-connect/react/Session';
// or use ES6 named imports
import {
Connect as DidConnect,
Button as DidButton,
Session,
} from '@did-connect/react';
DidConnect
<DidConnect
popup
open={open}
action="login"
checkFn={axios.get}
onClose={() => handleOnClose()}
onSuccess={() => (window.location.href = '/profile')}
messages={{
title: 'login',
scan: 'Scan QR code with DID Wallet',
confirm: 'Confirm login on your DID Wallet',
success: 'You have successfully signed in!',
}}
/>
Note: DidConnect component has a built-in instance of WebWalletSWKeeper that embeds a wallet iframe in the DOM to keep the service worker of the web wallet alive. When the DidConnect component is destroyed, WebWalletSWKeeper will also be destroyed, so avoid using it like the following:
{open && (
<DidConnect
popup
action="login"
...
/>
)}
display DidConnect in popup
const [open, setOpen] = React.useState(false);
const handleOnClose = () => {
// ...
setOpen(false);
};
...
<button type="button" onClick={() => setOpen(true)}>
Open DidConnect
</button>
<DidConnect
popup
open={open}
action="login"
checkFn={axios.get}
onClose={() => handleOnClose()}
onSuccess={() => (window.location.href = '/profile')}
messages={{
title: 'login',
scan: 'Scan QR code with DID Wallet',
confirm: 'Confirm login on your DID Wallet',
success: 'You have successfully signed in!',
}}
webWalletUrl={webWalletUrl}
/>
DidButton
<ConnectButton size="large" />
<ConnectButton size="medium" />
<ConnectButton size="small" />
<ConnectButton>Custom Text</ConnectButton>
15 days ago
18 days ago
19 days ago
6 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago