zigap-utils 0.0.508 → 0.0.802

package/README.md

@@ -2,24 +2,39 @@
 
 It is a library that collects utils that help communicate between dapp and zigap.<br /> You can find out more at https://seoul-labs.gitbook.io/zigap-utils
 
+<br />
+<br />
+
 ## Installation
 
 ```
 npm i zigap-utils
 ```
 
+<br />
+<br />
+
 ## Usage
 
+> \_ INDEX
+>
+> 1. <b>Login</b>
+> 2. <b>Payment QR (Send)</b> > <br/>
+>    >
+
+### 1. Login
+
 ```ts
 import { LoginQR } from 'zigap-utils';
 
 const App = () => {
+
   ...
 
   return (
     <div>
       <LoginQR
-        dapp='yourDappName'
+        dapp='your Dapp Name'
         url='http://sample.yours.com'
         availableNetworks={['xphere']}
         isShowLogo={false}
@@ -42,8 +57,55 @@ const App = () => {
 
 <br />
 
+### 2. Payment QR
+
+```ts
+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>
+  )
+}
+```
+
+<br />
+
 ---
 
+---
+
+<br />
+
 ### `LoginQR` props
 
 | prop | type | description |
@@ -62,14 +124,19 @@ const App = () => {
 
 ### `AddressProvideQR` props
 
-| prop type           | 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            |
-| `validSeconds`      | number        | QR code valid time(seconds)                     |
-| `onReceive`         | (res) => void | Function called after login request             |
-| `icon`              | string        | Your dapp icon url to be displayed on zigap app |
+| 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                     |
 
 <br>
 
@@ -86,6 +153,60 @@ const App = () => {
 
 <br>
 
+### `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:
+
+```js
+ <PaymentQR
+   ...
+   processingMark={{
+     type: 'CUSTOM',
+     component: <div>Loading your payment...</div>,
+   }}
+ />
+```
+
+<br>
+
+---
+
+---
+
+<br>
+
 ### `useZigap`
 
 useZigap is a hook that fetches the information of the logged-in user in the zigap app and provides a logout function.

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/AddressProvideQR/AddressProvideQR.d.ts

@@ -0,0 +1,4 @@
+import { AddressProvideQRProps } from './AddressProvideQR.types';
+
+declare const AddressProvideQR: ({ availableNetworks, dapp, url, validSeconds, onReceive, isShowLogo, logoSize, icon, ...props }: AddressProvideQRProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressProvideQR;

package/dist/components/AddressProvideQR/AddressProvideQR.types.d.ts

@@ -0,0 +1,18 @@
+import { CommonStyleType } from 'src/components/LoginQR/LoginQR.types';
+
+export type AddressProvideResultType = {
+    isSuccess: boolean;
+    address?: string;
+    network?: string;
+    nickName?: string;
+};
+export type AddressProvideQRProps = {
+    availableNetworks: string[];
+    dapp: string;
+    url: string;
+    validSeconds: number;
+    icon?: string;
+    onReceive: (res: {
+        isSuccess: boolean;
+    }) => void;
+} & CommonStyleType;

package/dist/components/AddressProvideQR/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AddressProvideQR } from './AddressProvideQR';
+export * from './AddressProvideQR.types';

package/dist/components/AirdropQR/AirdropQR.d.ts

@@ -0,0 +1,4 @@
+import { AirdropQRProps } from './AirdropQR.types';
+
+declare const AirdropQR: ({ availableNetworks, dapp, validSeconds, onReceive, isShowLogo, logoSize, icon, ...props }: AirdropQRProps) => import("react/jsx-runtime").JSX.Element;
+export default AirdropQR;

package/dist/components/AirdropQR/AirdropQR.types.d.ts

@@ -0,0 +1,17 @@
+import { CommonStyleType } from 'src/components/LoginQR/LoginQR.types';
+
+export type AirdropResultType = {
+    isSuccess: boolean;
+    address?: string;
+    network?: string;
+    nickName?: string;
+};
+export type AirdropQRProps = {
+    availableNetworks: string[];
+    dapp: string;
+    validSeconds: number;
+    icon?: string;
+    onReceive: (res: {
+        isSuccess: boolean;
+    }) => void;
+} & CommonStyleType;

package/dist/components/AirdropQR/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AirdropQR } from './AirdropQR';
+export * from './AirdropQR.types';

package/dist/components/LoginQR/LoginQR.d.ts

@@ -0,0 +1,4 @@
+import { LoginQRProps } from './LoginQR.types';
+
+declare const LoginQR: ({ availableNetworks, dapp, url, sigMessage, onReceive, validSeconds, isShowLogo, logoSize, expire, icon, size, processingMark, ...props }: LoginQRProps) => import("react/jsx-runtime").JSX.Element;
+export default LoginQR;

package/dist/components/LoginQR/LoginQR.types.d.ts

@@ -0,0 +1,57 @@
+import { CSSProperties } from 'react';
+
+export type CommonStyleType = {
+    size?: number;
+    bgColor?: string;
+    fgColor?: string;
+    style?: CSSProperties;
+    isShowLogo?: boolean;
+    logoSize?: number;
+};
+export type PayloadType = {
+    publicKey: string;
+    message: string;
+};
+export type AccountType = {
+    address: string;
+    network: string;
+    nickName: string;
+};
+export type NoneLoginExpire = {
+    type: 'NONE';
+    seconds?: never;
+};
+export type FixedOrExtensionLoginExpire = {
+    type: 'FIX' | 'EXTEND';
+    seconds: number;
+};
+export type LoginExpireType = FixedOrExtensionLoginExpire | NoneLoginExpire;
+export type LoginResultType = {
+    address: string;
+    network: string;
+    nickName: string;
+    token: string;
+    issuedDateTime: string;
+    expire: LoginExpireType;
+};
+export type ProcessingMarkType = {
+    type: 'DEFAULT';
+} | {
+    type: 'CUSTOM';
+    component: React.ReactNode;
+} | {
+    type: 'NONE';
+};
+export type LoginQRProps = {
+    availableNetworks: string[];
+    dapp: string;
+    url: string;
+    sigMessage: string;
+    validSeconds: number;
+    onReceive?: (res: {
+        status: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR';
+    }) => void;
+    expire: LoginExpireType;
+    icon?: string;
+    processingMark?: ProcessingMarkType;
+} & CommonStyleType;

package/dist/components/LoginQR/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoginQR } from './LoginQR';
+export * from './LoginQR.types';

package/dist/components/PaymentQR/PaymentQR.d.ts

@@ -0,0 +1,4 @@
+import { PaymentQRProps } from './PaymentQR.types';
+
+declare const PaymentQR: ({ network, dapp, address, amount, description, info, onReceive, validSeconds, isShowLogo, logoSize, size, processingMark, ...props }: PaymentQRProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentQR;

package/dist/components/PaymentQR/PaymentQR.types.d.ts

@@ -0,0 +1,20 @@
+import { CommonStyleType, ProcessingMarkType } from 'src/components/LoginQR/LoginQR.types';
+
+export type PaymentResultType = {
+    from: string;
+    txHash: string;
+    status: string;
+};
+export type PaymentQRProps = {
+    network: string;
+    dapp: string;
+    address: string;
+    amount: string;
+    description?: string;
+    info?: string;
+    validSeconds: number;
+    onReceive?: (res: {
+        status: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR';
+    }) => void;
+    processingMark?: ProcessingMarkType;
+} & CommonStyleType;

package/dist/components/PaymentQR/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PaymentQR } from './PaymentQR';
+export * from './PaymentQR.types';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './LoginQR';
+export * from './PaymentQR';
+export * from './AddressProvideQR';
+export * from './AirdropQR';

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as useZigap } from './useZigap';

package/dist/hooks/useZigap.d.ts

@@ -0,0 +1,15 @@
+export declare const LOGIN_RES_KEY = "userInfo";
+export declare const TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+declare const useZigap: () => {
+    userInfo: {
+        address: string | undefined;
+        network: string | undefined;
+        nickName: string | undefined;
+        token: string | undefined;
+        issuedDateTime: string | undefined;
+        expireDateTime: string | undefined;
+    };
+    logout: () => void;
+    isWindowLoaded: boolean;
+};
+export default useZigap;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './xphere';
+export * from './zigap';
+export * from './hooks';