zigap-utils 0.0.2 → 0.0.6

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,19 @@ 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 })=>{
-          if(isSuccess) {
-            // something to do after login
+        expire={{ type: 'EXTEND', seconds: 3600 }}
+        icon="http://sample.icon-url.com"
+        onReceive={({ status }) => {
+          if(status === 'SUCCESS') {
+            // something to do after login (refresh page...)
+            // status type: 'REQUEST' | 'ACCOUNT' | 'SUCCESS' | 'ERROR'
           }
         }}
       />
@@ -38,26 +46,76 @@ 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` | (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 |
+| `processingMark` | {type: "DEFAULT" / "CUSTOM" / "NONE", component: React.ReactNode} | How to show the QR image when it's being processed |
 
 <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`         | (res) => 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, 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>
+  );
+}
+```

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "zigap-utils",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "author": "Seoullabs",
   "license": "ISC",
+  "homepage": "https://seoul-labs.gitbook.io/zigap-utils",
   "repository": {
     "type": "git",
     "url": "https://github.com/Seoullabs-official/zigap-utils"
@@ -16,15 +17,19 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite",
-    "build": "rm -rf dist && tsc -p ./tsconfig.node.json && vite build",
+    "build": "rm -rf dist && tsc -p ./tsconfig.node.json && tsx ./src/preprocessEnv.js && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "dayjs": "^1.11.11",
+    "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "saseul": "^2.8.0",
     "styled-components": "^6.1.11",
+    "tsx": "^4.16.2",
+    "tweetnacl": "^1.0.3",
     "vite-plugin-commonjs": "^0.10.1"
   },
   "devDependencies": {

package/dist/App.d.ts

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

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

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

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

@@ -1,14 +0,0 @@
-import { CSSProperties } from 'react';
-
-export type AddressProvideResultType = {
-    isSuccess: boolean;
-    address?: string;
-};
-export type AddressProvideQRProps = {
-    validTime: number;
-    onReceive: (result: AddressProvideResultType) => void;
-    size?: number;
-    bgColor?: string;
-    fgColor?: string;
-    style?: CSSProperties;
-};

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

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

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

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

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

@@ -1,15 +0,0 @@
-import { CSSProperties } from 'react';
-
-export type LoginResultType = {
-    isSuccess: boolean;
-    address?: string;
-};
-export type LoginQRProps = {
-    sigMessage: string;
-    validTime: number;
-    onReceive: (result: LoginResultType) => void;
-    size?: number;
-    bgColor?: string;
-    fgColor?: string;
-    style?: CSSProperties;
-};

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

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

package/dist/components/index.d.ts

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