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
- Login
- 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>
);
}
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago