zigap-utils

It is a library that collects utils that help communicate between dapp and zigap. You can find out more at https://seoul-labs.gitbook.io/zigap-utils

Installation

npm i zigap-utils

Usage

_ INDEX

1. Login
2. Payment QR (Send) >

1. Login

import { LoginQR } from 'zigap-utils';

const App = () => {

  ...

  return (
    <div>
      <LoginQR
        dapp='your Dapp Name'
        url='http://sample.yours.com'
        availableNetworks={['xphere']}
        isShowLogo={false}
        logoSize={25}
        validSeconds={600}
        sigMessage="hello world"
        expire={{ type: 'EXTEND', seconds: 3600 }}
        icon="http://sample.icon-url.com"
        onReceive={({ status }) => {
          if(status === 'SUCCESS') {
            // something to do after login (refresh page...)
            // status type: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR'
          }
        }}
      />
    </div>
  );
}

2. Payment QR

import { PaymentQR } from 'zigap-utils';

const App = () => {
  const [result1, setResult1] = useState<undefined | string>(undefined);

  ...

  return (
    <div>
      <PaymentQR
        network={'network name'}
        dapp='your dapp name'
        address='address'
        amount='100'
        validSeconds={10000}
        onReceive={({ status }) => {
          if (status === 'SUCCESS') {
            setResult1('succeed');
          } else if (status === 'REQUEST' || status === 'ACCOUNT') {
            setResult1(`processing - ${status}`);
          } else {
            setResult1('failed');
          }
        }}
        size={200}
        processingMark={{
          type: 'NONE',
        }}
      />

      <div>
        {result1 === undefined ? <span>before start</span> : <span>{result1}</span>}
      </div>
    </div>
  )
}

LoginQR props

| prop | type | description | | --- | --- | --- | | dapp | string | Name of the dapp to use | | url | string | The url of dapp to connect | | availableNetworks | string[] | List of connectable networks in dapp | | sigMessage | string | Messages signed to verify the identity of the user | | validSeconds | number | QR code valid time(minutes) | | onReceive | (res) => void | Function called after login request | | expire | {type: "NONE / FIX / EXTEND", seconds: number} | time and type for user login to expire | | icon | string | Your dapp icon url to be displayed on zigap app | | processingMark | {type: "DEFAULT" / "CUSTOM" / "NONE", component: React.ReactNode} | How to show the QR image when it's being processed |

AddressProvideQR props

| prop type | required | type | default value | description | | ------------------------ | -------- | --------------- | ------------- | --------------------------------------- | | dapp | true | string | | Name of the dapp to use | | url | true | string | | The url of dapp to connect | | availavailableNetworks | true | string[] | | List of connectable networks in dapp | | validTime | true | number | | QR code valid time(seconds) | | onReceive | true | (value) => void | | Function called after login request | | size | false | number | 128 | canvas width | | bgColor | false | string | #fff | background color | | fgColor | false | string | #000 | foreground color | | style | false | CSSProperties | custom | css style | | isShowLogo | false | boolean | false | Zigap logo in the middle of the QR code | | logoSize | false | number | 30 | logo width & height |

CommonStyle props (optional)

| prop | type | default value | description | | ------------ | ------------- | ------------- | --------------------------------------- | | size | number | 128 | canvas width | | bgColor | string | #fff | background color | | fgColor | string | #000 | foreground color | | style | CSSProperties | | custom css style | | isShowLogo | boolean | false | Zigap logo in the middle of the QR code | | logoSize | number | 30 | logo width & height |

PaymentQR props

| Prop | Required | Type | Description | | --- | --- | --- | --- | | network | true | string | The name of the network to use (e.g., "xphere"). | | dapp | true | string | The name of the DApp initiating the payment request. | | address | true | string | The recipient's address for the payment. | | amount | true | string | The amount to be paid. | | description | false | string | A brief description of the payment. | | info | false | object | Additional information related to the payment. | | validSeconds | true | number | The duration (in seconds) for which the QR code is valid. | | isShowLogo | false | boolean | Whether to display your DApp’s logo in the QR code. | | logoSize | false | number | The size of the logo displayed in the QR code (in pixels). | | size | true | number | The size of the generated QR code (in pixels). | | onReceive | true | (res : { status: string }) => void | Callback function that handles payment status updates. | | processingMark | false | type: DEFAULT or CUSTOM or NONE | Configures the appearance of the QR code while processing. |

Payment Statuses

The onReceive callback provides the following statuses:

• SUCCESS : Payment was successful.
• REQUEST : Payment has been requested and is in progress.
• ACCOUNT : Account selection or preparation is in progress.
• ERROR : An error occurred during payment.

Processing Mark Options

• DEFAULT : Displays a default "processing..." message during payment.
• CUSTOM : Allows you to pass a custom React component to display during processing.
• NONE : No visual indicator is shown during processing.

Example Usage of processingMark

To use a custom component:

 <PaymentQR
   ...
   processingMark={{
     type: 'CUSTOM',
     component: <div>Loading your payment...</div>,
   }}
 />

useZigap

useZigap is a hook that fetches the information of the logged-in user in the zigap app and provides a logout function.

import { useZigap } from 'zigap-utils';

...

const Component = () => {
  const { userInfo, logout, isWindowLoaded } = useZigap();

  const handleLogout = () => {
    if(isWindowLoaded) {
      logout();
      window.location.reload();
    }
  }

  return (
    <div>
      <p>Address: {userInfo.address}</p>
      <p>Network: {userInfo.network}</p>
      <p>Nickname: {userInfo.nickName}</p>
      <p>Token: {userInfo.token}</p>
      <p>Issued DateTime: {userInfo.issuedDateTime}</p>
      <p>Expire DateTime: {userInfo.expireDateTime}</p>

      <button onClick={handleLogout}> LOGOUT </button>
    </div>
  );
}