@arcblock/did-connect

Client side library to work with DID Connect by ArcBlock.

Usage no npm install needed!

<script type="module">
  import arcblockDidConnect from 'https://cdn.skypack.dev/@arcblock/did-connect';
</script>

README

@arcblock/did-connect

Client side library to work with DID Connect by ArcBlock.

Usage

yarn add @arcblock/did-connect

Then:

import axios from 'axios';

// import each module individually
import DidAddress from '@arcblock/did-connect/lib/Address';
import DidConnect from '@arcblock/did-connect/lib/Connect';
import DidAvatar from '@arcblock/did-connect/lib/Avatar';
import DidButton from '@arcblock/did-connect/lib/Button';
import DidLogo from '@arcblock/did-connect/lib/Logo';
import { SessionProvider, SessionConsumer } from '@arcblock/did-connect/lib/Session';
import SessionManager from '@arcblock/did-connect/lib/SessionManager';

// or use ES6 named imports
import { 
  Address as DidAddress, 
  Connect as DidConnect, 
  Avatar as DidAvatar, 
  Button as DidButton, 
  Logo as DidLogo, 
  Session, 
  SessionManager, 
} from '@arcblock/did-connect/lib';

DidConnect

<DidConnect
  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}
/>

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}
/>

DidAvatar

<DidAvatar did={userDid} size={256} />

DidButton

<ConnectButton size="large" />
<ConnectButton size="medium" />
<ConnectButton size="small" />
<ConnectButton>Custom Text</ConnectButton>

DidLogo

<DidLogo size={32} />

DidAddress

<DidAddress did={userDid} size={32} />

SessionManager

<SessionProvider serviceHost={get(window, 'blocklet.prefix', '/')} webWalletUrl={webWalletUrl}>
  <SessionConsumer>{(value) => <SessionManager session={value.session} />}</SessionConsumer>
  ...
</SessionProvider>