JSPM – @arcblock/did-connect-react@3.1.54

Package Exports

@arcblock/did-connect-react
@arcblock/did-connect-react/lib/Address
@arcblock/did-connect-react/lib/Address/index.js
@arcblock/did-connect-react/lib/Avatar
@arcblock/did-connect-react/lib/Avatar/index.js
@arcblock/did-connect-react/lib/Button
@arcblock/did-connect-react/lib/Button/index.js
@arcblock/did-connect-react/lib/Connect
@arcblock/did-connect-react/lib/Connect/components/login-item/login-method-item
@arcblock/did-connect-react/lib/Connect/components/login-item/login-method-item.js
@arcblock/did-connect-react/lib/Connect/contexts/state
@arcblock/did-connect-react/lib/Connect/contexts/state.js
@arcblock/did-connect-react/lib/Connect/fullpage
@arcblock/did-connect-react/lib/Connect/fullpage.js
@arcblock/did-connect-react/lib/Connect/index.js
@arcblock/did-connect-react/lib/Connect/use-connect
@arcblock/did-connect-react/lib/Connect/use-connect.js
@arcblock/did-connect-react/lib/Passkey
@arcblock/did-connect-react/lib/Passkey/index.js
@arcblock/did-connect-react/lib/Session
@arcblock/did-connect-react/lib/Session/index.js
@arcblock/did-connect-react/lib/SessionManager
@arcblock/did-connect-react/lib/SessionManager/index.js
@arcblock/did-connect-react/lib/User/use-did
@arcblock/did-connect-react/lib/User/use-did.js
@arcblock/did-connect-react/lib/constant
@arcblock/did-connect-react/lib/constant.js
@arcblock/did-connect-react/lib/index.js
@arcblock/did-connect-react/lib/utils
@arcblock/did-connect-react/lib/utils.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arcblock/did-connect-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Client side library to work with DID Connect by ArcBlock.

Usage

yarn add @arcblock/did-connect-react

Then:

import axios from 'axios';

// import each module individually
import DidAddress from '@arcblock/did-connect-react/lib/Address';
import DidConnect from '@arcblock/did-connect-react/lib/Connect';
import DidAvatar from '@arcblock/did-connect-react/lib/Avatar';
import DidButton from '@arcblock/did-connect-react/lib/Button';
import DIDLogo from '@arcblock/did-connect-react/lib/Logo';
import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
import SessionManager from '@arcblock/did-connect-react/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-react/lib';

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"
    ...
  />
)}

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>

@arcblock/did-connect-react