zigap-utils v0.0.801

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

AddressProvideQR props

CommonStyle props (optional)

PaymentQR props

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>
  );
}