@arcblock/did-connect

客户端库可与 DOD Connect 通过ArcBlock 工作.

使用量

yarn add @arcblock/did-connect

然后说:

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
  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!',
  }}
/>

说明: DidConnect 组件有一个内置的WebWalletSWkeeper实例,该实例将一个钱包iframe嵌入到DOM中,以使网页钱包的服务员能活下来. 当 DidConnect 组件被销毁后,WebWalletSWkeepter 也会被销毁,因此避免像下面这样使用:

{open && (
  <DidConnect
    popup
    action="login"
    ...
  />
)}

在弹出时显示 DidConnect

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 did={userDid} size={256} />

按钮

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

迪多罗戈

<DidLogo size={32} />

已安装

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

会话管理器

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