From c7a7c210ff8c21ae719ecd9308d77e505562d339 Mon Sep 17 00:00:00 2001 From: kazuko Date: Thu, 29 Sep 2022 06:41:06 +0400 Subject: [PATCH] get account info from connecting wallet (#20) --- .eslintrc.js | 2 ++ README.md | 11 ++++++++ demo/package-lock.json | 14 ++++----- demo/package.json | 2 +- demo/src/App.tsx | 5 ++++ demo/src/Connect.tsx | 46 ++++++++++++++++++++++++++++++ demo/src/Transaction.tsx | 30 ++++---------------- package-lock.json | 4 +-- package.json | 4 +-- src/interface.ts | 14 ++++++--- src/signer.ts | 61 ++++++++++++++++++++++++++++++++-------- 11 files changed, 140 insertions(+), 53 deletions(-) create mode 100644 demo/src/Connect.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 8d2c162..040ed4d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,5 +13,7 @@ module.exports = { ], rules: { "@typescript-eslint/no-var-requires": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-non-null-asserted-optional-chain": "off", }, }; diff --git a/README.md b/README.md index d8abdce..bfc0f47 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,17 @@ npm install webmax Add intmaxWalletSigner to your app first. +#### Get account from intmaxWallet. + +Signer can get account from intmaxWallet. + +```js +import { IntmaxWalletSigner } from "webmax"; + +const signer = new IntmaxWalletSigner(); +const account = await signer.connectToAccount(); +``` + #### Sign and send transaction to network. Signer can sign and send transactions. You will receive a receipt. diff --git a/demo/package-lock.json b/demo/package-lock.json index fa2666d..58a7998 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -27,7 +27,7 @@ "react-scripts": "5.0.1", "typescript": "^4.8.3", "web-vitals": "^2.1.4", - "webmax": "^0.1.3" + "webmax": "^0.1.4" } }, "node_modules/@adobe/css-tools": { @@ -17665,9 +17665,9 @@ } }, "node_modules/webmax": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/webmax/-/webmax-0.1.3.tgz", - "integrity": "sha512-Pw+gkvzb4W6ztQqEvqnIJVlG04jx5uHI0MNjeCN4ppI7V9lOBevSw/nRlhzfTOz/ChCh0MvqpkgzPaCjhbTCwQ==", + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/webmax/-/webmax-0.1.4.tgz", + "integrity": "sha512-x1YBC4WNTxS11XQiFDILTHB3VzlokTF8pbZp8jeaexmsuT59W1wBSP8pfTnHywz7GSGO4mdNPwr3ZIrYha1+Lg==", "dependencies": { "bignumber.js": "^9.1.0" }, @@ -31086,9 +31086,9 @@ "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==" }, "webmax": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/webmax/-/webmax-0.1.3.tgz", - "integrity": "sha512-Pw+gkvzb4W6ztQqEvqnIJVlG04jx5uHI0MNjeCN4ppI7V9lOBevSw/nRlhzfTOz/ChCh0MvqpkgzPaCjhbTCwQ==", + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/webmax/-/webmax-0.1.4.tgz", + "integrity": "sha512-x1YBC4WNTxS11XQiFDILTHB3VzlokTF8pbZp8jeaexmsuT59W1wBSP8pfTnHywz7GSGO4mdNPwr3ZIrYha1+Lg==", "requires": { "bignumber.js": "^9.1.0" } diff --git a/demo/package.json b/demo/package.json index f5fee44..af4c738 100644 --- a/demo/package.json +++ b/demo/package.json @@ -22,7 +22,7 @@ "react-scripts": "5.0.1", "typescript": "^4.8.3", "web-vitals": "^2.1.4", - "webmax": "^0.1.3" + "webmax": "^0.1.4" }, "scripts": { "start": "react-scripts start", diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 2cafb46..79aef11 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -14,6 +14,7 @@ import { import { ColorModeSwitcher } from "./ColorModeSwitcher"; import { Transaction } from "./Transaction"; import { Message } from "./Message"; +import { Connect } from "./Connect"; export const App = () => ( @@ -26,10 +27,14 @@ export const App = () => ( + Connect to Account Sign Transaction Sign Message + + + diff --git a/demo/src/Connect.tsx b/demo/src/Connect.tsx new file mode 100644 index 0000000..ba6a950 --- /dev/null +++ b/demo/src/Connect.tsx @@ -0,0 +1,46 @@ +import { useState } from "react"; +import { Button, Flex, VStack, Text, Box, useToast } from "@chakra-ui/react"; +import { IntmaxWalletSigner } from "webmax"; + +export const Connect = () => { + const [result, setResult] = useState<{ address: string; chainId: number } | null>(null); + const toast = useToast(); + + const handleConnect = async () => { + try { + const signer = new IntmaxWalletSigner(); + const account = await signer.connectToAccount(); + setResult(account); + + toast({ + title: "Success connect to account", + position: "top", + status: "success", + isClosable: true, + }); + } catch (error) { + console.error(error); + + toast({ + title: (error as Error).message, + position: "top", + status: "error", + isClosable: true, + }); + } + }; + + return ( + + + + + + address: {result?.address} + chainId: {result?.chainId} + + + + + ); +}; diff --git a/demo/src/Transaction.tsx b/demo/src/Transaction.tsx index 12a0f09..5886457 100644 --- a/demo/src/Transaction.tsx +++ b/demo/src/Transaction.tsx @@ -30,11 +30,7 @@ export const Transaction = () => { formState: { errors }, } = useForm(); - const onSubmit: SubmitHandler = async ({ - to, - value, - gas, - }: Inputs): Promise => { + const onSubmit: SubmitHandler = async ({ to, value, gas }: Inputs): Promise => { try { const tx = { to, @@ -64,8 +60,7 @@ export const Transaction = () => { } }; - const handleClick = (key: "to" | "value" | "gas"): void => - void resetField(key); + const handleClick = (key: "to" | "value" | "gas"): void => void resetField(key); return ( @@ -73,12 +68,7 @@ export const Transaction = () => { - + To Address @@ -103,12 +93,7 @@ export const Transaction = () => { - + Transaction Value @@ -133,12 +118,7 @@ export const Transaction = () => { - + gas diff --git a/package-lock.json b/package-lock.json index 778b0e6..5db2752 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "webmax", - "version": "0.1.3", + "version": "0.1.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "webmax", - "version": "0.1.3", + "version": "0.1.4", "license": "MIT", "dependencies": { "bignumber.js": "^9.1.0" diff --git a/package.json b/package.json index 0b7f923..ce577d4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "webmax", - "version": "0.1.3", + "version": "0.1.4", "description": "webmax js library", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -33,7 +33,7 @@ "scripts": { "compile": "tsc -p ./tsconfig.json", "prebuild": "rimraf dist", - "build": "npm run prebuild && tsc", + "build": "tsc", "dev": "npm run compile", "lint": "eslint --ext .js,.ts src/", "fix": "npm run lint --fix" diff --git a/src/interface.ts b/src/interface.ts index a03aa75..49fbc3d 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,11 +1,12 @@ import { BigNumber } from "bignumber.js"; -export const signType = { +export const signerType = { + connect: "connect", transaction: "transaction", message: "message", } as const; -export type SignType = typeof signType[keyof typeof signType]; +export type SignerType = typeof signerType[keyof typeof signerType]; export type IntmaxWalletTransactionParams = { to: string; @@ -20,8 +21,8 @@ export type IntmaxWalletMessageParams = { }; export type IntmaxWalletSignParams = { - type: SignType; - data: IntmaxWalletTransactionParams | IntmaxWalletMessageParams; + type: SignerType; + data?: IntmaxWalletTransactionParams | IntmaxWalletMessageParams; }; export type IntmaxWalletEventResponse = { @@ -69,3 +70,8 @@ export type ChildWindow = { window: Window | null; status: WindowStatusType; }; + +export type IntmaxWalletAccount = { + address: string; + chainId: number; +}; diff --git a/src/signer.ts b/src/signer.ts index eab2761..4e6faf0 100644 --- a/src/signer.ts +++ b/src/signer.ts @@ -1,5 +1,5 @@ import { - signType, + signerType, IntmaxWalletTransactionParams, IntmaxWalletSignParams, IntmaxWalletEventResponse, @@ -7,6 +7,7 @@ import { Signature, ChildWindow, windowStatus, + IntmaxWalletAccount, } from "./interface"; const INTMAX_WALLET_WINDOW_NAME = "intmaxWallet"; @@ -19,20 +20,58 @@ const config = { }; export class IntmaxWalletSigner { + private _account: IntmaxWalletAccount | null; + + async connectToAccount(): Promise { + if (this._account) { + return this._account; + } + + const params = { + type: signerType.connect, + }; + const url = this.generateIntmaxWalletSignUrl(params); + + const cWindow = this.openIntmaxWallet(url); + const timer = this.watchWindow(cWindow, "IntmaxWallet Connect: User Rejected."); + + this._account = await this.interactIntmaxWallet(cWindow, timer); + + return this._account; + } + + isConnected(): boolean { + return !!this._account; + } + + async getAddress(): Promise { + const account = await this.connectToAccount(); + + return account.address; + } + + async getChainId(): Promise { + const account = await this.connectToAccount(); + + return account.chainId; + } + async sendTransaction({ to, value, gas, }: IntmaxWalletTransactionParams): Promise { const params = { - type: signType.transaction, + type: signerType.transaction, data: { to, value, gas, }, }; - const cWindow = this.openIntmaxWallet(params); + const url = this.generateIntmaxWalletSignUrl(params); + + const cWindow = this.openIntmaxWallet(url); const timer = this.watchWindow( cWindow, "IntmaxWallet Tx Signature: User denied transaction signature." @@ -45,12 +84,14 @@ export class IntmaxWalletSigner { async signMessage(message: string): Promise { const params = { - type: signType.message, + type: signerType.message, data: { message, }, }; - const cWindow = this.openIntmaxWallet(params); + const url = this.generateIntmaxWalletSignUrl(params); + + const cWindow = this.openIntmaxWallet(url); const timer = this.watchWindow( cWindow, "IntmaxWallet Message Signature: User denied message signature." @@ -95,9 +136,7 @@ export class IntmaxWalletSigner { clearInterval(timer); } - private openIntmaxWallet(params: IntmaxWalletSignParams): ChildWindow { - const url = this.generateIntmaxWalletUrl(params); - + private openIntmaxWallet(url: string): ChildWindow { const top = window.screenY; const left = window.screenX + window.innerWidth - INTMAX_WALLET_WINDOW_WIDTH; @@ -121,10 +160,8 @@ export class IntmaxWalletSigner { return cWindow.window.close(); } - private generateIntmaxWalletUrl(params: IntmaxWalletSignParams): string { - return ( - `${config.intmaxWalletUrl}/sign?transaction=` + encodeURIComponent(JSON.stringify(params)) - ); + private generateIntmaxWalletSignUrl(params: IntmaxWalletSignParams): string { + return `${config.intmaxWalletUrl}/signer?params=` + encodeURIComponent(JSON.stringify(params)); } private eventPromiseListener(): Promise {