@arcblock/did-playground/README.md

React components that works with wallet-playground

![@arcblock/did-connect](https://www.arcblock.io/.netlify/functions/badge/?text=did-connect)

> UI components that can be used in React Applications built on top of forge powered blockchain.

## Usage

```shell
yarn add @arcblock/did-connect
```

Then:

```javascript
import axios from 'axios';
import DidConnect from '@arcblock/did-connect/lib/Connect';
import DidAvatar from '@arcblock/did-connect/lib/Avatar';
import DidLogo from '@arcblock/did-connect/lib/Logo';
import DidAddress from '@arcblock/did-connect/lib/Address';
```

### DidAuth

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

### DidAvatar

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

### DidLogo

```jsx
<DidLogo size={32} />
```

### DidAddress

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