zigap-utils 0.0.507 → 0.0.801

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/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

@@ -1,2 +1,3 @@
 export * from './LoginQR';
+export * from './PaymentQR';
 export * from './AddressProvideQR';