npm package: @mocanetwork/air-credential-sdk
Description: AIR Credential SDK.
Latest version: 0.0.7-beta.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# AIR Credential SDK

AIR Credential SDK.

## Installation

``` shell
pnpm add @mocanetwork/air-credential-sdk

# or
yarn add @mocanetwork/air-credential-sdk

# or
npm install @mocanetwork/air-credential-sdk
```

## Getting Started

### Step 1. Import styles

#### To ensure the widget displays correctly, import the SDK’s CSS file early in your application:

``` typescript
import '@mocanetwork/air-credential-sdk/dist/style.css'
```

### Step 2. Create a new ``AirCredentialWidget`` instance

#### Issue Credential

``` typescript
import {
  type JsonDocumentObject,
  AirCredentialWidget
} from '@mocanetwork/air-credential-sdk'

// Set the credential attribute value according to the scheme type configured in the dashboard
const credentialSubject: JsonDocumentObject = {
  birthday: 20020101,
  documentType: 99,
}

// Construct the claim request for issuing a credential
const claimRequest = {
  process: 'Issue',
  issuerDid: 'Your issuer DID',
  issuerAuth: 'Refer to the API documentation to obtain a token',
  credentialId: 'The credential id configured in the dashboard',
  credentialSubject: credentialSubject,
}

const airCredentialWidget = new AirCredentialWidget(
  claimRequest,
  'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' // AIR partnerId
  options // Optional configurations are detailed in the table below
)
```

#### Verify Proof

``` typescript
import {
  AirCredentialWidget
} from '@mocanetwork/air-credential-sdk'

const queryRequest = {
  process: 'Verify',
  verifierAuth: 'Refer to the API documentation to obtain a token',
  programId: 'The program id configured in the dashboard',
}

const airCredentialWidget = new AirCredentialWidget(
  queryRequest,
  'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' // AIR partnerId
  options // Optional configurations are detailed in the table below
)

```

| Param             | Type               | Description |
|-------------------|--------------------|------------------------------------------------------|
| options.endpoint  | string?            | URL to the widget endpoint. |
| options.theme     | Theme?             | ``"auto"``, ``"light"`` or ``"dark"``, default ``"auto"``. |
| options.locale    | Language?          | ``"en"`` or ``"zh-hk"``, default ``"en"`` |
| options.redirectUrlForIssuer | string?           | During the verification process, if the user does not possess the specified type of credential, the SDK will automatically open the link and guide the user to complete the credential issuance. If needed, please obtain this link from the issuer of the credential type you want to verify. |

### Step 3. Listen to the ``issueCompleted``/``verifyCompleted`` widget events to detect when the user has completed the Issue/Verify process.

#### Issue

``` typescript
function handleIssueCompleted() {
  console.log('Credential issuance completed successfully.')
  // You can add additional success logic here, such as UI notifications.
}

airCredentialWidget.on('issueCompleted', handleIssueCompleted)
```

#### Verify

``` typescript
function handleVerifyCompleted(results) {
  const { status } = results

  if (status === 'Compliant') {
    // Add your success logic here, such as:
    // Updating UI to show verification success.
  } else if (status === 'Non-Compliant') {
    // Prompt the user that does not meet your verification conditions.
  } else {
    // See the table below for more details on other statuses.
  }
}
airCredentialWidget.on('verifyCompleted', handleVerifyCompleted)
```

| Status             | Description |
|-------------------|------------------------------------------------------|
| Pending     | The target credential is waiting for confirmation on the blockchain. |
| Revoking    | Target credential are being revoked. |
| Revoked    | The target credential have been revoked. |
| Expired    | The target credential have expired. |
| NotFound    | No such credentials was found. |

### Step 4. Launch the AirCredential widget and it will be displayed in the center of your webpage.

``` typescript
// Button on your page
button.addEventListener('click', () => {
  airCredentialWidget.launch()
})
```

## AirCredentialWidget instance methods

### launch()

Launch the AirCredential widget and it will be displayed in the center of your webpage.

``` typescript
launch(): void
```

### on()

The widget emits several events you can subscribe to in order to manage your application's flow:

- ``issueCompleted``: Emitted when the issuance is successfully completed.
- ``verifyCompleted``: Emitted when credential verification concludes. This event includes a result object with verification status.
- ``close``: Emitted when the widget is closed or cancelled by the user.

``` typescript
on(event: 'issueCompleted', callback: () => void): void;
on(event: 'verifyCompleted', callback: VerifyCompletedHook): void;
on(event: 'close', callback: () => void): void;
```

### hide()

Hide the AirCredential widget.

``` typescript
hide(): void
```

### destroy()

Remove the message event listener registered by the AirCredential widget from the window and destroy the DOM node.

``` typescript
destroy(): void
```