zigap-utils 0.0.811 → 2.0.0

package/README.md

@@ -19,16 +19,18 @@ npm i zigap-utils
 > \_ INDEX
 >
 > 1. <b>Login</b>
-> 2. <b>Payment QR (Send)</b> > <br/>
->    >
+> 2. <b>Signature</b>
+> 3. <b>SendTransaction</b>
+> 4. <b>useZigap Hook</b>
 
 ### 1. Login
 
 ```ts
 import { LoginQR } from 'zigap-utils';
+import type { LoginResultType } from 'zigap-utils/LoginQR/LoginQR.types'
 
 const App = () => {
-
+  const [result, setResult] = useState<LoginResultType | null>(null);
   ...
 
   return (
@@ -36,17 +38,19 @@ const App = () => {
       <LoginQR
         dapp='your Dapp Name'
         url='http://sample.yours.com'
-        availableNetworks={['xphere']}
+        availableNetworks={['v2xphere, v3xphere']}
         isShowLogo={false}
         logoSize={25}
         validSeconds={600}
         sigMessage="hello world"
         expire={{ type: 'EXTEND', seconds: 3600 }}
         icon="http://sample.icon-url.com"
-        onReceive={({ status }) => {
+        onReceive={({ status, result }) => {
           if(status === 'SUCCESS') {
             // something to do after login (refresh page...)
             // status type: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR'
+            // you can use result when status is 'SUCCESS'
+            setResult(result as LoginResultType);
           }
         }}
       />
@@ -57,50 +61,123 @@ const App = () => {
 
 <br />
 
-### 2. Payment QR
+### 2. SignatureQR
 
 ```ts
-import { PaymentQR } from 'zigap-utils';
+import { SignatureQR } from 'zigap-utils';
+import type { SignatureResultType } from 'zigap-utils/SignatureQR/SignatureQR.types'
 
 const App = () => {
-  const [result1, setResult1] = useState<undefined | string>(undefined);
+  const [result, setResult] = useState<SignatureResultType | null>(null);
 
   ...
 
   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');
+      <SignatureQR
+        dapp='your Dapp Name'
+        url='http://sample.yours.com'
+        availableNetworks={['v2xphere, v3xphere']}
+        isShowLogo={false}
+        logoSize={25}
+        validSeconds={600}
+        sigMessage="hello world"
+        expire={{ type: 'EXTEND', seconds: 3600 }}
+        icon="http://sample.icon-url.com"
+        onReceive={({ status, result }) => {
+          if(status === 'SUCCESS') {
+            // it is same with LoginQR. But you can see another type in zigap signature history.
+            // status type: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR'
+            // you can use result when status is 'SUCCESS'
+            setResult(result as SignatureResultType);
           }
         }}
-        size={200}
-        processingMark={{
-          type: 'NONE',
-        }}
       />
+    <div>
+  )
+}
+```
 
-      <div>
-        {result1 === undefined ? <span>before start</span> : <span>{result1}</span>}
-      </div>
-    </div>
+<br />
+
+### 3. SendTransactionQR
+
+```ts
+import { SendTransactionQR } from 'zigap-utils';
+import type { SendTransactionResultType } from 'zigap-utils/SendTransactionQR/SendTransactionQR.types'
+
+const App = () => {
+  const [result, setResult] = useState<SendTransactionResultType | null>(null);
+
+  ...
+
+  return (
+    <div>
+      <SendTransactionQR
+        dapp='your Dapp Name'
+        url='http://sample.yours.com'
+        availableNetworks={'v2xphere'} // It is string not array
+        isShowLogo={false}
+        logoSize={25}
+        validSeconds={600}
+        sigMessage="hello world"
+        expire={{ type: 'EXTEND', seconds: 3600 }}
+        icon="http://sample.icon-url.com"
+        transaction={{
+          type: 0,
+          to: '0x1234567890123456789012345678901234567890',
+          value: '1000000000000000000',
+          gasLimit: '21000',
+          gasPrice: '1000000000',
+        }}
+        onReceive={({ status, result }) => {
+          if(status === 'SUCCESS') {
+            // status type: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR'
+            // you can use result when status is 'SUCCESS'
+            setResult(result as SendTransactionResultType);
+          }
+        }}
+      />
+    <div>
   )
 }
 ```
 
 <br />
 
----
+### 4. useZigap Hook
+
+useZigap is a hook that fetches the information of the logged-in user in the zigap app and provides a logout function.
+
+```ts
+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>
+  );
+}
+```
+
+<br />
 
 ---
 
@@ -112,9 +189,9 @@ const App = () => {
 | --- | --- | --- |
 | `dapp` | string | Name of the dapp to use |
 | `url` | string | The url of dapp to connect |
-| `availableNetworks` | string[] | List of connectable networks in dapp |
+| `availableNetworks` | string[] | 'binance' \| 'ethereum' \| 'v2xphere' \| 'v3xphere' |
 | `sigMessage` | string | Messages signed to verify the identity of the user |
-| `validSeconds` | number | QR code valid time(minutes) |
+| `validSeconds` | number | QR code valid time(seconds) |
 | `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 |
@@ -122,66 +199,48 @@ const App = () => {
 
 <br>
 
-### `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                     |
+### `SignatureQR` props
+
+| prop | type | description |
+| --- | --- | --- |
+| `dapp` | string | Name of the dapp to use |
+| `url` | string | The url of dapp to connect |
+| `availableNetworks` | string[] | 'binance' \| 'ethereum' \| 'v2xphere' \| 'v3xphere' |
+| `sigMessage` | string | Messages signed to verify the identity of the user |
+| `validSeconds` | number | QR code valid time(seconds) |
+| `onReceive` | (res) => void | Function called after signature request |
+| `expire` | {type: "NONE / FIX / EXTEND", seconds: number} | time and type for signature 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 |
 
 <br>
 
-### `CommonStyle` props (optional)
+### `SendTransactionQR` props
 
-| 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                     |
+| prop | type | description |
+| --- | --- | --- |
+| `dapp` | string | Name of the dapp to use |
+| `url` | string | The url of dapp to connect |
+| `availableNetworks` | string | 'binance' \| 'ethereum' \| 'v2xphere' \| 'v3xphere' |
+| `validSeconds` | number | QR code valid time(seconds) |
+| `onReceive` | (res) => void | Function called after transaction request |
+| `expire` | {type: "NONE / FIX / EXTEND", seconds: number} | time and type for transaction to expire |
+| `icon` | string | Your dapp icon url to be displayed on zigap app |
+| `transaction` | object | Transaction details (type, to, value, gasLimit, gasPrice) |
+| `processingMark` | {type: "DEFAULT" / "CUSTOM" / "NONE", component: React.ReactNode} | How to show the QR image when it's being processed |
 
 <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.
+- `SUCCESS` : process was successful.
+- `REQUEST` : process 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.
+- `DEFAULT` : Displays a default "processing..." message during process.
 - `CUSTOM` : Allows you to pass a custom React component to display during processing.
 - `NONE` : No visual indicator is shown during processing.
 
@@ -190,7 +249,7 @@ The `onReceive` callback provides the following statuses:
 To use a custom component:
 
 ```js
- <PaymentQR
+  <SendTransactionQR
    ...
    processingMark={{
      type: 'CUSTOM',
@@ -201,42 +260,17 @@ To use a custom component:
 
 <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.
-
-```ts
-import { useZigap } from 'zigap-utils';
-
-...
-
-const Component = () => {
-  const { userInfo, logout, isWindowLoaded } = useZigap();
+### `CommonStyle` props (optional)
 
-  const handleLogout = () => {
-    if(isWindowLoaded) {
-      logout();
-      window.location.reload();
-    }
-  }
+| 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                     |
 
-  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>
+## License
 
-      <button onClick={handleLogout}> LOGOUT </button>
-    </div>
-  );
-}
-```
+ISC

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

@@ -33,6 +33,7 @@ export type LoginResultType = {
     token: string;
     issuedDateTime: string;
     expire: LoginExpireType;
+    isVerified: boolean;
 };
 export type ProcessingMarkType = {
     type: 'DEFAULT';
@@ -50,6 +51,7 @@ export type LoginQRProps = {
     validSeconds: number;
     onReceive?: (res: {
         status: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR';
+        result?: LoginResultType;
     }) => void;
     expire: LoginExpireType;
     icon?: string;

package/dist/components/SendTransactionQR/SendTransactionQR.d.ts

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

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

@@ -0,0 +1,58 @@
+import { CommonStyleType, ProcessingMarkType } from 'src/components/LoginQR/LoginQR.types';
+
+/** Type 0: Legacy (pre-EIP-2718) */
+export type TransactionType0 = {
+    type: 0 | '0x0';
+    to: string;
+    data?: string;
+    value: string;
+    gasLimit: string;
+    gasPrice: string;
+    chainId?: number;
+};
+/** Type 1: EIP-2930 (access list) */
+export type TransactionType1 = {
+    type: 1 | '0x1';
+    to: string;
+    data?: string;
+    value: string;
+    gasLimit: string;
+    gasPrice: string;
+    accessList?: AccessList;
+    chainId?: number;
+};
+/** Type 2: EIP-1559 (dynamic fees) */
+export type TransactionType2 = {
+    type: 2 | '0x2';
+    to: string;
+    data?: string;
+    value: string;
+    gasLimit: string;
+    maxFeePerGas: string;
+    maxPriorityFeePerGas: string;
+    chainId?: number;
+};
+/** AccessList entry type (used in EIP-2930 and EIP-1559) */
+export type AccessList = {
+    address: string;
+    storageKeys: string[];
+}[];
+export type TransactionType = TransactionType0 | TransactionType1 | TransactionType2;
+export type SendTransactionResultType = {
+    txHash: string;
+    status: string;
+    error: string;
+};
+export type SendTransactionQRProps = {
+    availableNetworks: 'binance' | 'ethereum' | 'v2xphere' | 'v3xphere';
+    dapp: string;
+    url: string;
+    validSeconds: number;
+    transaction: TransactionType;
+    icon?: string;
+    onReceive?: (res: {
+        status: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR';
+        result?: SendTransactionResultType;
+    }) => void;
+    processingMark?: ProcessingMarkType;
+} & CommonStyleType;

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

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

package/dist/components/SignatureQR/SignatureQR.d.ts

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

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

@@ -0,0 +1,59 @@
+import { CSSProperties } from 'react';
+
+export type SignatureCommonStyleType = {
+    size?: number;
+    bgColor?: string;
+    fgColor?: string;
+    style?: CSSProperties;
+    isShowLogo?: boolean;
+    logoSize?: number;
+};
+export type SignaturePayloadType = {
+    publicKey: string;
+    message: string;
+};
+export type SignatureAccountType = {
+    address: string;
+    network: string;
+    nickName: string;
+};
+export type SignatureNoneLoginExpire = {
+    type: 'NONE';
+    seconds?: never;
+};
+export type SignatureFixedOrExtensionLoginExpire = {
+    type: 'FIX' | 'EXTEND';
+    seconds: number;
+};
+export type SignatureLoginExpireType = SignatureFixedOrExtensionLoginExpire | SignatureNoneLoginExpire;
+export type SignatureResultType = {
+    address: string;
+    network: string;
+    nickName: string;
+    token: string;
+    issuedDateTime: string;
+    expire: SignatureLoginExpireType;
+    isVerified: boolean;
+};
+export type SignatureProcessingMarkType = {
+    type: 'DEFAULT';
+} | {
+    type: 'CUSTOM';
+    component: React.ReactNode;
+} | {
+    type: 'NONE';
+};
+export type SignatureQRProps = {
+    availableNetworks: string[];
+    dapp: string;
+    url: string;
+    sigMessage: string;
+    validSeconds: number;
+    onReceive?: (res: {
+        status: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR';
+        result?: SignatureResultType;
+    }) => void;
+    expire: SignatureLoginExpireType;
+    icon?: string;
+    processingMark?: SignatureProcessingMarkType;
+} & SignatureCommonStyleType;

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

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

package/dist/components/index.d.ts

@@ -2,3 +2,5 @@ export * from './LoginQR';
 export * from './PaymentQR';
 export * from './AddressProvideQR';
 export * from './AirdropQR';
+export * from './SendTransactionQR';
+export * from './SignatureQR';