Sign transaction (#23)

* implement sign transaction

* sign transaction on demo app

README.md

@@ -31,6 +31,23 @@ const signer = new IntmaxWalletSigner();
 const account = await signer.connectToAccount();
 ```
 
+#### Sign transaction.
+
+Signer can sign transactions. You will receive a serialized signature.
+
+```js
+import { IntmaxWalletSigner } from "webmax";
+
+const tx = {
+  to,
+  value,
+  gasLimit,
+};
+
+const signer = new IntmaxWalletSigner();
+const serializedSignature = await signer.signTransaction(tx);
+```
+
 #### Sign and send transaction to network.
 
 Signer can sign and send transactions. You will receive a receipt.
@@ -41,7 +58,7 @@ import { IntmaxWalletSigner } from "webmax";
 const tx = {
   to,
   value,
-  gas,
+  gasLimit,
 };
 
 const signer = new IntmaxWalletSigner();

demo/package.json

@@ -22,7 +22,7 @@
     "react-scripts": "5.0.1",
     "typescript": "^4.8.3",
     "web-vitals": "^2.1.4",
-    "webmax": "^0.1.4"
+    "webmax": "^0.1.5"
   },
   "scripts": {
     "start": "react-scripts start",

demo/src/App.tsx

@@ -13,8 +13,9 @@ import {
 } from "@chakra-ui/react";
 import { ColorModeSwitcher } from "./ColorModeSwitcher";
 import { Connect } from "./Connect";
-import { Transaction } from "./Transaction";
-import { Message } from "./Message";
+import { SendTransaction } from "./SendTransaction";
+import { SignTransaction } from "./SignTransaction";
+import { SignMessage } from "./SignMessage";
 
 export const App = () => (
   <ChakraProvider theme={theme}>
@@ -29,17 +30,21 @@ export const App = () => (
             <TabList justifyContent="center">
               <Tab>Connect to Account</Tab>
               <Tab>Sign Transaction</Tab>
+              <Tab>Send Transaction</Tab>
               <Tab>Sign Message</Tab>
             </TabList>
             <TabPanels>
               <TabPanel>
                 <Connect />
               </TabPanel>
               <TabPanel>
-                <Transaction />
+                <SignTransaction />
               </TabPanel>
               <TabPanel>
-                <Message />
+                <SendTransaction />
+              </TabPanel>
+              <TabPanel>
+                <SignMessage />
               </TabPanel>
             </TabPanels>
           </Tabs>

demo/src/SendTransaction.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import {
+  Button,
+  Flex,
+  VStack,
+  Text,
+  Box,
+  InputGroup,
+  Input,
+  InputRightElement,
+  useToast,
+} from "@chakra-ui/react";
+import { SmallCloseIcon } from "@chakra-ui/icons";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { IntmaxWalletSigner } from "webmax";
+
+type Inputs = {
+  to: string;
+  value: string;
+  gasLimit: number;
+};
+
+export const SendTransaction = () => {
+  const [result, setResult] = useState("");
+  const toast = useToast();
+  const {
+    register,
+    handleSubmit,
+    resetField,
+    formState: { errors },
+  } = useForm<Inputs>();
+
+  const onSubmit: SubmitHandler<Inputs> = async ({
+    to,
+    value,
+    gasLimit,
+  }: Inputs): Promise<void> => {
+    try {
+      const tx = {
+        to,
+        value: value,
+        gasLimit,
+      };
+
+      const signer = new IntmaxWalletSigner();
+      const receipt = await signer.sendTransaction(tx);
+      setResult(JSON.stringify(receipt));
+
+      toast({
+        title: "Success Send Transaction",
+        position: "top",
+        status: "success",
+        isClosable: true,
+      });
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: (error as Error).message,
+        position: "top",
+        status: "error",
+        isClosable: true,
+      });
+    }
+  };
+
+  const handleClick = (key: "to" | "value" | "gasLimit"): 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 }}>
+                To Address
+              </Text>
+              <InputGroup>
+                <Input
+                  type="text"
+                  placeholder="0x..."
+                  {...register("to", {
+                    required: "address is required",
+                  })}
+                />
+                <InputRightElement
+                  children={<SmallCloseIcon color="gray" cursor="pointer" />}
+                  onClick={() => handleClick("to")}
+                />
+              </InputGroup>
+            </Flex>
+            {errors.to && (
+              <Text color="red.500" fontWeight="medium" mt={2}>
+                {errors.to.message}
+              </Text>
+            )}
+          </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 }}>
+                Transaction Value
+              </Text>
+              <InputGroup>
+                <Input
+                  type="text"
+                  placeholder="0.01"
+                  {...register("value", {
+                    required: "value is required",
+                  })}
+                />
+                <InputRightElement
+                  children={<SmallCloseIcon color="gray" cursor="pointer" />}
+                  onClick={() => handleClick("value")}
+                />
+              </InputGroup>
+            </Flex>
+            {errors.value && (
+              <Text color="red.500" fontWeight="medium" mt={2}>
+                {errors.value.message}
+              </Text>
+            )}
+          </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 }}>
+                gas
+              </Text>
+              <InputGroup>
+                <Input
+                  type="text"
+                  placeholder="21000"
+                  {...register("gasLimit", {
+                    required: "gasLimit is required",
+                    valueAsNumber: true,
+                  })}
+                />
+                <InputRightElement
+                  children={<SmallCloseIcon color="gray" cursor="pointer" />}
+                  onClick={() => handleClick("gasLimit")}
+                />
+              </InputGroup>
+            </Flex>
+            {errors.gasLimit && (
+              <Text color="red.500" fontWeight="medium" mt={2}>
+                {errors.gasLimit.message}
+              </Text>
+            )}
+          </Flex>
+        </VStack>
+        <Button type="submit">Send Transaction</Button>
+        <Box wordBreak="break-word">
+          <Text>result: {result}</Text>
+        </Box>
+      </VStack>
+    </Flex>
+  );
+};

demo/src/Message.tsx → demo/src/SignMessage.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Button, Flex, VStack, Text, Box, useToast } from "@chakra-ui/react";
 import { IntmaxWalletSigner } from "webmax";
 
-export const Message = () => {
+export const SignMessage = () => {
   const [result, setResult] = useState("");
   const toast = useToast();
 

demo/src/Transaction.tsx → demo/src/SignTransaction.tsx

@@ -17,10 +17,10 @@ import { IntmaxWalletSigner } from "webmax";
 type Inputs = {
   to: string;
   value: string;
-  gas: number;
+  gasLimit: number;
 };
 
-export const Transaction = () => {
+export const SignTransaction = () => {
   const [result, setResult] = useState("");
   const toast = useToast();
   const {
@@ -30,17 +30,21 @@ 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,
+    gasLimit,
+  }: Inputs): Promise<void> => {
     try {
       const tx = {
         to,
-        value,
-        gas,
+        value: value,
+        gasLimit,
       };
 
       const signer = new IntmaxWalletSigner();
-      const receipt = await signer.sendTransaction(tx);
-      setResult(JSON.stringify(receipt));
+      const signature = await signer.signTransaction(tx);
+      setResult(signature);
 
       toast({
         title: "Success Sign Transaction",
@@ -60,7 +64,7 @@ export const Transaction = () => {
     }
   };
 
-  const handleClick = (key: "to" | "value" | "gas"): void => void resetField(key);
+  const handleClick = (key: "to" | "value" | "gasLimit"): void => void resetField(key);
 
   return (
     <Flex textAlign="center" fontSize="xl" direction="column">
@@ -125,20 +129,20 @@ export const Transaction = () => {
                 <Input
                   type="text"
                   placeholder="21000"
-                  {...register("gas", {
-                    required: "gas is required",
+                  {...register("gasLimit", {
+                    required: "gasLimit is required",
                     valueAsNumber: true,
                   })}
                 />
                 <InputRightElement
                   children={<SmallCloseIcon color="gray" cursor="pointer" />}
-                  onClick={() => handleClick("gas")}
+                  onClick={() => handleClick("gasLimit")}
                 />
               </InputGroup>
             </Flex>
-            {errors.gas && (
+            {errors.gasLimit && (
               <Text color="red.500" fontWeight="medium" mt={2}>
-                {errors.gas.message}
+                {errors.gasLimit.message}
               </Text>
             )}
           </Flex>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webmax",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "webmax js library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",