zigap-utils 0.0.2 → 0.0.5

package/README.md

@@ -1,11 +1,11 @@
 # zigap-utils
 
-It is a library that collects utils that help communicate between dapp and zigap.
+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
 
 ## Installation
 
 ```
-npm i zigap-utils --save -D
+npm i zigap-utils
 ```
 
 ## Usage
@@ -19,11 +19,18 @@ const App = () => {
   return (
     <div>
       <LoginQR
-        validTime={10}
+        dapp='yourDappName'
+        url='http://sample.yours.com'
+        availableNetworks={['xphere']}
+        isShowLogo={false}
+        logoSize={25}
+        validSeconds={600}
         sigMessage="hello world"
-        onReceive={({ isSuccess, address })=>{
+        expire={{ type: 'EXTEND', seconds: 3600 }}
+        icon="http://sample.icon-url.com"
+        onReceive={({ isSuccess }) => {
           if(isSuccess) {
-            // something to do after login
+            // something to do after login (refresh page...)
           }
         }}
       />
@@ -38,26 +45,73 @@ const App = () => {
 
 ### `LoginQR` props
 
-| prop         | required | type            | default value | description                                        |
-| ------------ | :------: | --------------- | ------------- | -------------------------------------------------- |
-| `sigMessage` |   true   | string          |               | Messages signed to verify the identity of the user |
-| `validTime`  |   true   | number          |               | QR code valid time(minutes)                        |
-| `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                                   |
+| 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` | (value) => 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 |
 
 <br>
 
 ### `AddressProvideQR` props
 
-| prop         | required | type            | default value | description                                        |
-| ------------ | :------: | --------------- | ------------- | -------------------------------------------------- |
-| `sigMessage` |   true   | string          |               | Messages signed to verify the identity of the user |
-| `validTime`  |   true   | number          |               | QR code valid time(minutes)                        |
-| `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                                   |
+| 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`         | (value) => void | Function called after login request             |
+| `icon`              | string          | Your dapp icon url to be displayed on zigap app |
+
+<br>
+
+### `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                     |
+
+<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 } = useZigap();
+
+  const handleLogout = () => {
+    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>
+  );
+}
+```

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

@@ -1,4 +1,4 @@
 import { AddressProvideQRProps } from './AddressProvideQR.types';
 
-declare const AddressProvideQR: ({ validTime, onReceive, ...props }: AddressProvideQRProps) => import("react/jsx-runtime").JSX.Element;
+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

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

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

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

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

@@ -1,15 +1,48 @@
 import { CSSProperties } from 'react';
 
-export type LoginResultType = {
-    isSuccess: boolean;
-    address?: string;
-};
-export type LoginQRProps = {
-    sigMessage: string;
-    validTime: number;
-    onReceive: (result: LoginResultType) => void;
+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 LoginQRProps = {
+    availableNetworks: string[];
+    dapp: string;
+    url: string;
+    sigMessage: string;
+    validSeconds: number;
+    onReceive?: (res: {
+        isSuccess: boolean;
+    }) => void;
+    expire: LoginExpireType;
+    icon?: string;
+} & CommonStyleType;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useZigap.d.ts

@@ -0,0 +1,14 @@
+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;
+};
+export default useZigap;

package/dist/index.d.ts

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