zigap-utils 3.0.4 → 3.1.0-preview.0

package/README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-![Zigap Utils](https://img.shields.io/badge/zigap--utils-v1.0.0-blue?style=for-the-badge) ![License](https://img.shields.io/badge/license-ISC-green?style=for-the-badge) ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+![Zigap Utils](https://img.shields.io/badge/zigap--utils-v3.1.0-blue?style=for-the-badge) ![License](https://img.shields.io/badge/license-ISC-green?style=for-the-badge) ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
 
 **A utility library that helps communicate between dapp and zigap**
 
@@ -50,25 +50,25 @@ QR code component for user wallet login.
 import { LoginQR, LoginResultType } from 'zigap-utils';
 
 const App = () => {
-  const [result, setResult] = useState<LoginResultType | null>(null);
-
-  return (
-    <div>
-      <LoginQR
-        dapp='My Awesome Dapp'
-        url='https://myapp.com'
-        availableNetworks={['v2xphere', 'v3xphere']}
-        sigMessage='Welcome to My Dapp!'
-        validSeconds={600}
-        onReceive={({ status, result }) => {
-          if (status === 'SUCCESS') {
-            console.log('Login successful!', result);
-            setResult(result as LoginResultType);
-          }
-        }}
-      />
-    </div>
-  );
+    const [result, setResult] = useState<LoginResultType | null>(null);
+
+    return (
+        <div>
+            <LoginQR
+                dapp='My Awesome Dapp'
+                url='https://myapp.com'
+                availableNetworks={['v2xphere', 'v3xphere']}
+                sigMessage='Welcome to My Dapp!'
+                validSeconds={600}
+                onReceive={({ status, result }) => {
+                    if (status === 'SUCCESS') {
+                        console.log('Login successful!', result);
+                        setResult(result as LoginResultType);
+                    }
+                }}
+            />
+        </div>
+    );
 };
 ```
 
@@ -105,14 +105,14 @@ const App = () => {
 
 ```tsx
 interface LoginResultType {
-  address: string;
-  network: string;
-  nickName: string;
-  token: string;
-  issuedDateTime: string;
-  expire: LoginExpireType;
-  isVerified: boolean;
-  signature: string;
+    address: string;
+    network: string;
+    nickName: string;
+    token: string;
+    issuedDateTime: string;
+    expire: LoginExpireType;
+    isVerified: boolean;
+    signature: string;
 }
 ```
 
@@ -128,25 +128,25 @@ QR code component for message signing.
 import { SignatureQR, SignatureResultType } from 'zigap-utils';
 
 const App = () => {
-  const [result, setResult] = useState<SignatureResultType | null>(null);
-
-  return (
-    <div>
-      <SignatureQR
-        dapp='My Awesome Dapp'
-        url='https://myapp.com'
-        availableNetworks={['v2xphere', 'v3xphere']}
-        sigMessage='I agree to the terms and conditions'
-        validSeconds={600}
-        onReceive={({ status, result }) => {
-          if (status === 'SUCCESS') {
-            console.log('Signature successful!', result);
-            setResult(result as SignatureResultType);
-          }
-        }}
-      />
-    </div>
-  );
+    const [result, setResult] = useState<SignatureResultType | null>(null);
+
+    return (
+        <div>
+            <SignatureQR
+                dapp='My Awesome Dapp'
+                url='https://myapp.com'
+                availableNetworks={['v2xphere', 'v3xphere']}
+                sigMessage='I agree to the terms and conditions'
+                validSeconds={600}
+                onReceive={({ status, result }) => {
+                    if (status === 'SUCCESS') {
+                        console.log('Signature successful!', result);
+                        setResult(result as SignatureResultType);
+                    }
+                }}
+            />
+        </div>
+    );
 };
 ```
 
@@ -183,14 +183,14 @@ const App = () => {
 
 ```tsx
 interface SignatureResultType {
-  address: string;
-  network: string;
-  nickName: string;
-  token: string;
-  issuedDateTime: string;
-  expire: SignatureLoginExpireType;
-  isVerified: boolean;
-  signature: string;
+    address: string;
+    network: string;
+    nickName: string;
+    token: string;
+    issuedDateTime: string;
+    expire: SignatureLoginExpireType;
+    isVerified: boolean;
+    signature: string;
 }
 ```
 
@@ -206,31 +206,31 @@ QR code component for transaction sending.
 import { SendTransactionQR, SendTransactionResultType } from 'zigap-utils';
 
 const App = () => {
-  const [result, setResult] = useState<SendTransactionResultType | null>(null);
-
-  return (
-    <div>
-      <SendTransactionQR
-        dapp='My Awesome Dapp'
-        url='https://myapp.com'
-        availableNetworks='v2xphere'
-        validSeconds={600}
-        transaction={{
-          type: 0,
-          to: '0x1234567890123456789012345678901234567890',
-          value: '1000000000000000000', // 1 XP
-          gasLimit: '21000',
-          gasPrice: '1000000000',
-        }}
-        onReceive={({ status, result }) => {
-          if (status === 'SUCCESS') {
-            console.log('Transaction Complete!', result);
-            setResult(result as SendTransactionResultType);
-          }
-        }}
-      />
-    </div>
-  );
+    const [result, setResult] = useState<SendTransactionResultType | null>(null);
+
+    return (
+        <div>
+            <SendTransactionQR
+                dapp='My Awesome Dapp'
+                url='https://myapp.com'
+                availableNetworks='v2xphere'
+                validSeconds={600}
+                transaction={{
+                    type: 0,
+                    to: '0x1234567890123456789012345678901234567890',
+                    value: '1000000000000000000', // 1 XP
+                    gasLimit: '21000',
+                    gasPrice: '1000000000',
+                }}
+                onReceive={({ status, result }) => {
+                    if (status === 'SUCCESS') {
+                        console.log('Transaction Complete!', result);
+                        setResult(result as SendTransactionResultType);
+                    }
+                }}
+            />
+        </div>
+    );
 };
 ```
 
@@ -260,37 +260,37 @@ const App = () => {
 ```tsx
 // Type 0: Legacy (pre-EIP-2718)
 interface TransactionType0 {
-  type: 0 | '0x0';
-  to: string;
-  data?: string;
-  value: string;
-  gasLimit: string;
-  gasPrice: string;
-  chainId?: number;
+    type: 0 | '0x0';
+    to: string;
+    data?: string;
+    value: string;
+    gasLimit: string;
+    gasPrice: string;
+    chainId?: number;
 }
 
 // Type 1: EIP-2930 (access list)
 interface TransactionType1 {
-  type: 1 | '0x1';
-  to: string;
-  data?: string;
-  value: string;
-  gasLimit: string;
-  gasPrice: string;
-  accessList?: AccessList;
-  chainId?: number;
+    type: 1 | '0x1';
+    to: string;
+    data?: string;
+    value: string;
+    gasLimit: string;
+    gasPrice: string;
+    accessList?: AccessList;
+    chainId?: number;
 }
 
 // Type 2: EIP-1559 (dynamic fees)
 interface TransactionType2 {
-  type: 2 | '0x2';
-  to: string;
-  data?: string;
-  value: string;
-  gasLimit: string;
-  maxFeePerGas: string;
-  maxPriorityFeePerGas: string;
-  chainId?: number;
+    type: 2 | '0x2';
+    to: string;
+    data?: string;
+    value: string;
+    gasLimit: string;
+    maxFeePerGas: string;
+    maxPriorityFeePerGas: string;
+    chainId?: number;
 }
 
 type TransactionType = TransactionType0 | TransactionType1 | TransactionType2;
@@ -300,9 +300,9 @@ type TransactionType = TransactionType0 | TransactionType1 | TransactionType2;
 
 ```tsx
 interface SendTransactionResultType {
-  txHash: string;
-  status: 0 | 1; // 0 : fail , 1 : success
-  error: string;
+    txHash: string;
+    status: 0 | 1; // 0 : fail , 1 : success
+    error: string;
 }
 ```
 
@@ -331,13 +331,13 @@ Common style options available for all QR components.
 
 ```tsx
 <LoginQR
-  // ... other props
-  size={200}
-  bgColor='#ffffff'
-  fgColor='#000000'
-  isShowLogo={true}
-  logoSize={40}
-  style={{ borderRadius: '8px' }}
+    // ... other props
+    size={200}
+    bgColor='#ffffff'
+    fgColor='#000000'
+    isShowLogo={true}
+    logoSize={40}
+    style={{ borderRadius: '8px' }}
 />
 ```
 
@@ -357,22 +357,22 @@ Configure how to display during processing.
 
 ```tsx
 <SendTransactionQR
-  // ... other props
-  processingMark={{
-    type: 'CUSTOM',
-    component: (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px',
-        }}
-      >
-        <div className='spinner'></div>
-        <span>Processing payment...</span>
-      </div>
-    ),
-  }}
+    // ... other props
+    processingMark={{
+        type: 'CUSTOM',
+        component: (
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                }}
+            >
+                <div className='spinner'></div>
+                <span>Processing payment...</span>
+            </div>
+        ),
+    }}
 />
 ```