get account info from connecting wallet (#20)

.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",
   },
 };

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.

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",

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 = () => (
   <ChakraProvider theme={theme}>
@@ -26,10 +27,14 @@ export const App = () => (
           </Text>
           <Tabs variant="soft-rounded" colorScheme="green">
             <TabList justifyContent="center">
+              <Tab>Connect to Account</Tab>
               <Tab>Sign Transaction</Tab>
               <Tab>Sign Message</Tab>
             </TabList>
             <TabPanels>
+              <TabPanel>
+                <Connect />
+              </TabPanel>
               <TabPanel>
                 <Transaction />
               </TabPanel>

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 (
+    <Flex textAlign="center" fontSize="xl" direction="column" pt={6}>
+      <VStack spacing={6}>
+        <Button onClick={handleConnect}>Connect to account</Button>
+        <Box wordBreak="break-word">
+          <VStack spacing={4}>
+            <Text>address: {result?.address}</Text>
+            <Text>chainId: {result?.chainId}</Text>
+          </VStack>
+        </Box>
+      </VStack>
+    </Flex>
+  );
+};

demo/src/Transaction.tsx

@@ -30,11 +30,7 @@ export const Transaction = () => {
     formState: { errors },
   } = useForm<Inputs>();
 
-  const onSubmit: SubmitHandler<Inputs> = async ({
-    to,
-    value,
-    gas,
-  }: Inputs): Promise<void> => {
+  const onSubmit: SubmitHandler<Inputs> = async ({ to, value, gas }: Inputs): Promise<void> => {
     try {
       const tx = {
         to,
@@ -64,21 +60,15 @@ export const Transaction = () => {
     }
   };
 
-  const handleClick = (key: "to" | "value" | "gas"): void =>
-    void resetField(key);
+  const handleClick = (key: "to" | "value" | "gas"): void => void resetField(key);
 
   return (
     <Flex textAlign="center" fontSize="xl" direction="column">
       <VStack as="form" spacing={6} onSubmit={handleSubmit(onSubmit)}>
         <VStack spacing={3} my={2}>
           <Flex w="100%" alignItems="center" flexDirection="column">
             <Flex w="100%" alignItems="center">
-              <Text
-                fontWeight="bold"
-                fontSize={{ base: "xs" }}
-                w="150px"
-                mr={{ base: 2, md: 8 }}
-              >
+              <Text fontWeight="bold" fontSize={{ base: "xs" }} w="150px" mr={{ base: 2, md: 8 }}>
                 To Address
               </Text>
               <InputGroup>
@@ -103,12 +93,7 @@ export const Transaction = () => {
           </Flex>
           <Flex w="100%" alignItems="center" flexDirection="column">
             <Flex w="100%" alignItems="center">
-              <Text
-                fontWeight="bold"
-                fontSize={{ base: "xs" }}
-                w="150px"
-                mr={{ base: 2, md: 8 }}
-              >
+              <Text fontWeight="bold" fontSize={{ base: "xs" }} w="150px" mr={{ base: 2, md: 8 }}>
                 Transaction Value
               </Text>
               <InputGroup>
@@ -133,12 +118,7 @@ export const Transaction = () => {
           </Flex>
           <Flex w="100%" alignItems="center" flexDirection="column">
             <Flex w="100%" alignItems="center">
-              <Text
-                fontWeight="bold"
-                fontSize={{ base: "xs" }}
-                w="150px"
-                mr={{ base: 2, md: 8 }}
-              >
+              <Text fontWeight="bold" fontSize={{ base: "xs" }} w="150px" mr={{ base: 2, md: 8 }}>
                 gas
               </Text>
               <InputGroup>

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"

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;
+};

src/signer.ts

@@ -1,12 +1,13 @@
 import {
-  signType,
+  signerType,
   IntmaxWalletTransactionParams,
   IntmaxWalletSignParams,
   IntmaxWalletEventResponse,
   TransactionReceipt,
   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<IntmaxWalletAccount> {
+    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<IntmaxWalletAccount>(cWindow, timer);
+
+    return this._account;
+  }
+
+  isConnected(): boolean {
+    return !!this._account;
+  }
+
+  async getAddress(): Promise<string> {
+    const account = await this.connectToAccount();
+
+    return account.address;
+  }
+
+  async getChainId(): Promise<number> {
+    const account = await this.connectToAccount();
+
+    return account.chainId;
+  }
+
   async sendTransaction({
     to,
     value,
     gas,
   }: IntmaxWalletTransactionParams): Promise<TransactionReceipt> {
     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<string> {
     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<T>(): Promise<T> {