From ec4ae4ec4beab2ab4d747fd4e2ac67b72fd931c7 Mon Sep 17 00:00:00 2001
From: elliot <elliot.han@groundx.xyz>
Date: Thu, 29 Oct 2020 16:11:57 +0900
Subject: [PATCH] add decimal option at token transfer

---
 src/components/SmartContractExecution.js      | 102 ++++++++++-------
 src/components/SmartContractExecutionFD.js    |  82 +++++++++-----
 .../SmartContractExecutionFDRatio.js          | 103 ++++++++++++------
 .../SmartContractExecutionLegacy.js           | 100 ++++++++++-------
 4 files changed, 248 insertions(+), 139 deletions(-)

diff --git a/src/components/SmartContractExecution.js b/src/components/SmartContractExecution.js
index 3ad1cd9..691b303 100644
--- a/src/components/SmartContractExecution.js
+++ b/src/components/SmartContractExecution.js
@@ -16,6 +16,7 @@ class SmartContractExecution extends Component {
       txHash: null,
       receipt: null,
       error: null,
+      decimal: 18
     }
   }
 
@@ -26,49 +27,72 @@ class SmartContractExecution extends Component {
     return null
   }
 
-  handleChange = (e) => {
+  handleChange = e => {
     this.setState({
-      [e.target.name]: e.target.value,
+      [e.target.name]: e.target.value
     })
   }
 
   signTransaction = () => {
-    const { from, contractAddress, to, amount, gas } = this.state
-    const data = caver.klay.abi.encodeFunctionCall({
-      name: 'transfer',
-      type: 'function',
-      inputs: [{
-        type: 'address',
-        name: 'recipient',
-      }, {
-        type: 'uint256',
-        name: 'amount',
-      }],
-    }, [to, caver.utils.toPeb(amount, 'KLAY')])
+    const { from, contractAddress, to, amount, gas, decimal } = this.state
+    const data = caver.klay.abi.encodeFunctionCall(
+      {
+        name: 'transfer',
+        type: 'function',
+        inputs: [
+          {
+            type: 'address',
+            name: 'recipient'
+          },
+          {
+            type: 'uint256',
+            name: 'amount'
+          }
+        ]
+      },
+      [
+        to,
+        caver.utils
+          .toBN(amount)
+          .mul(caver.utils.toBN(Number(`1e${decimal}`)))
+          .toString()
+      ]
+    )
 
-    caver.klay.sendTransaction({
-      type: 'SMART_CONTRACT_EXECUTION',
-      from,
-      to: contractAddress,
-      data,
-      gas,
-    })
-      .on('transactionHash', (transactionHash) => {
+    caver.klay
+      .sendTransaction({
+        type: 'SMART_CONTRACT_EXECUTION',
+        from,
+        to: contractAddress,
+        data,
+        gas
+      })
+      .on('transactionHash', transactionHash => {
         console.log('txHash', transactionHash)
         this.setState({ txHash: transactionHash })
       })
-      .on('receipt', (receipt) => {
+      .on('receipt', receipt => {
         console.log('receipt', receipt)
         this.setState({ receipt: JSON.stringify(receipt) })
       })
-      .on('error', (error) => {
+      .on('error', error => {
         console.log('error', error)
         this.setState({ error: error.message })
       })
   }
 
   render() {
-    const { from, to, amount, contractAddress, gas, txHash, receipt, error } = this.state
+    const {
+      from,
+      to,
+      amount,
+      contractAddress,
+      gas,
+      txHash,
+      receipt,
+      error,
+      decimal
+    } = this.state
 
     return (
       <div className="SmartContractExecution">
@@ -77,45 +101,45 @@ class SmartContractExecution extends Component {
           label="From"
           value={from}
           onChange={this.handleChange}
-          placeholder="Account you logged in metamask"
+          placeholder="Kaikas account"
         />
         <Input
           name="to"
           label="To"
           value={to}
           onChange={this.handleChange}
-          placeholder="Address you want to send Token"
+          placeholder="Address you want to send token to"
         />
         <Input
           name="contractAddress"
-          label="Contract Address (Token Address)"
+          label="Token Contract Address"
           value={contractAddress}
           onChange={this.handleChange}
           placeholder="The address of the deployed smart contract"
         />
+        <Input
+          name="decimal"
+          label="Token Decimal"
+          value={decimal}
+          onChange={this.handleChange}
+          placeholder="Token's number of decimal"
+        />
         <Input
           name="amount"
           label="Amount"
           value={amount}
           onChange={this.handleChange}
-          placeholder="Amount of Eth you want to send"
+          placeholder="Amount of token you want to send"
         />
         <Input
           name="gas"
           label="Gas"
           value={gas}
           onChange={this.handleChange}
-          placeholder="Gas"
-        />
-        <Button
-          title="Sign Transaction"
-          onClick={this.signTransaction}
-        />
-        <TxResult
-          txHash={txHash}
-          receipt={receipt}
-          error={error}
+          placeholder="Transaction gas limit"
         />
+        <Button title="Sign Transaction" onClick={this.signTransaction} />
+        <TxResult txHash={txHash} receipt={receipt} error={error} />
       </div>
     )
   }
diff --git a/src/components/SmartContractExecutionFD.js b/src/components/SmartContractExecutionFD.js
index 7bc42e0..c00e5eb 100644
--- a/src/components/SmartContractExecutionFD.js
+++ b/src/components/SmartContractExecutionFD.js
@@ -5,7 +5,6 @@ import Button from 'components/Button'
 import Message from 'components/Message'
 import FeeDelegation from 'components/FeeDelegation'
 
-
 class SmartContractExecutionFD extends Component {
   constructor(props) {
     super(props)
@@ -17,6 +16,7 @@ class SmartContractExecutionFD extends Component {
       gas: 3000000,
       senderAddress: '',
       senderRawTransaction: null,
+      decimal: 18
     }
   }
 
@@ -27,36 +27,50 @@ class SmartContractExecutionFD extends Component {
     return null
   }
 
-  handleChange = (e) => {
+  handleChange = e => {
     this.setState({
-      [e.target.name]: e.target.value,
+      [e.target.name]: e.target.value
     })
   }
 
   signTransaction = async () => {
-    const { from, to, amount, contractAddress, gas } = this.state
+    const { from, to, amount, contractAddress, gas, decimal } = this.state
 
-    const data = caver.klay.abi.encodeFunctionCall({
-      name: 'transfer',
-      type: 'function',
-      inputs: [{
-        type: 'address',
-        name: 'recipient',
-      }, {
-        type: 'uint256',
-        name: 'amount',
-      }],
-    }, [to, caver.utils.toPeb(amount, 'KLAY')])
+    const data = caver.klay.abi.encodeFunctionCall(
+      {
+        name: 'transfer',
+        type: 'function',
+        inputs: [
+          {
+            type: 'address',
+            name: 'recipient'
+          },
+          {
+            type: 'uint256',
+            name: 'amount'
+          }
+        ]
+      },
+      [
+        to,
+        caver.utils
+          .toBN(amount)
+          .mul(caver.utils.toBN(Number(`1e${decimal}`)))
+          .toString()
+      ]
+    )
 
     const txData = {
       type: 'FEE_DELEGATED_SMART_CONTRACT_EXECUTION',
       from,
       to: contractAddress,
       gas,
-      data,
+      data
     }
 
-    const { rawTransaction: senderRawTransaction } = await caver.klay.signTransaction(txData)
+    const {
+      rawTransaction: senderRawTransaction
+    } = await caver.klay.signTransaction(txData)
 
     this.setState({
       senderAddress: from,
@@ -65,49 +79,61 @@ class SmartContractExecutionFD extends Component {
   }
 
   render() {
-    const { from, to, amount, contractAddress, gas, senderRawTransaction } = this.state
+    const {
+      from,
+      to,
+      amount,
+      contractAddress,
+      gas,
+      senderRawTransaction,
+      decimal
+    } = this.state
 
     return (
       <div className="SmartContractExecutionFD">
         <Input
           name="from"
-          label="From (Sender Address)"
+          label="From"
           value={from}
-          placeholder="From Address"
           onChange={this.handleChange}
+          placeholder="Kaikas account"
         />
         <Input
           name="to"
           label="To"
           value={to}
           onChange={this.handleChange}
-          placeholder="Address you want to send Token"
+          placeholder="Address you want to send token to"
         />
         <Input
           name="contractAddress"
-          label="Contract Address (Token Address)"
+          label="Token Contract Address"
           value={contractAddress}
           onChange={this.handleChange}
           placeholder="The address of the deployed smart contract"
         />
+        <Input
+          name="decimal"
+          label="Token Decimal"
+          value={decimal}
+          onChange={this.handleChange}
+          placeholder="Token's number of decimal"
+        />
         <Input
           name="amount"
           label="Amount"
           value={amount}
           onChange={this.handleChange}
-          placeholder="Amount of Eth you want to send"
+          placeholder="Amount of token you want to send"
         />
         <Input
           name="gas"
           label="Gas"
           value={gas}
           onChange={this.handleChange}
-          placeholder="Gas"
-        />
-        <Button
-          title="Sign Transaction"
-          onClick={this.signTransaction}
+          placeholder="Transaction gas limit"
         />
+        <Button title="Sign Transaction" onClick={this.signTransaction} />
         {senderRawTransaction && (
           <Message
             type="rawTransaction"
diff --git a/src/components/SmartContractExecutionFDRatio.js b/src/components/SmartContractExecutionFDRatio.js
index 76e0162..26af1c0 100644
--- a/src/components/SmartContractExecutionFDRatio.js
+++ b/src/components/SmartContractExecutionFDRatio.js
@@ -5,7 +5,6 @@ import Button from 'components/Button'
 import Message from 'components/Message'
 import FeeDelegation from 'components/FeeDelegation'
 
-
 class SmartContractExecutionFDRatio extends Component {
   constructor(props) {
     super(props)
@@ -18,6 +17,7 @@ class SmartContractExecutionFDRatio extends Component {
       gas: 3000000,
       senderAddress: '',
       senderRawTransaction: null,
+      decimal: 18
     }
   }
 
@@ -28,26 +28,46 @@ class SmartContractExecutionFDRatio extends Component {
     return null
   }
 
-  handleChange = (e) => {
+  handleChange = e => {
     this.setState({
-      [e.target.name]: e.target.value,
+      [e.target.name]: e.target.value
     })
   }
 
   signTransaction = async () => {
-    const { from, to, amount, contractAddress, ratio, gas } = this.state
+    const {
+      from,
+      to,
+      amount,
+      contractAddress,
+      ratio,
+      gas,
+      decimal
+    } = this.state
 
-    const data = caver.klay.abi.encodeFunctionCall({
-      name: 'transfer',
-      type: 'function',
-      inputs: [{
-        type: 'address',
-        name: 'recipient',
-      }, {
-        type: 'uint256',
-        name: 'amount',
-      }],
-    }, [to, caver.utils.toPeb(amount, 'KLAY')])
+    const data = caver.klay.abi.encodeFunctionCall(
+      {
+        name: 'transfer',
+        type: 'function',
+        inputs: [
+          {
+            type: 'address',
+            name: 'recipient'
+          },
+          {
+            type: 'uint256',
+            name: 'amount'
+          }
+        ]
+      },
+      [
+        to,
+        caver.utils
+          .toBN(amount)
+          .mul(caver.utils.toBN(Number(`1e${decimal}`)))
+          .toString()
+      ]
+    )
 
     const txData = {
       type: 'FEE_DELEGATED_SMART_CONTRACT_EXECUTION_WITH_RATIO',
@@ -55,10 +75,12 @@ class SmartContractExecutionFDRatio extends Component {
       to: contractAddress,
       data,
       feeRatio: ratio,
-      gas,
+      gas
     }
 
-    const { rawTransaction: senderRawTransaction } = await caver.klay.signTransaction(txData)
+    const {
+      rawTransaction: senderRawTransaction
+    } = await caver.klay.signTransaction(txData)
 
     this.setState({
       senderAddress: from,
@@ -67,56 +89,69 @@ class SmartContractExecutionFDRatio extends Component {
   }
 
   render() {
-    const { from, to, amount, contractAddress, gas, ratio, senderRawTransaction } = this.state
+    const {
+      from,
+      to,
+      amount,
+      contractAddress,
+      gas,
+      ratio,
+      senderRawTransaction,
+      decimal
+    } = this.state
 
     return (
       <div className="SmartContractExecutionFDRatio">
         <Input
           name="from"
-          label="From (Sender Address)"
+          label="From"
           value={from}
-          placeholder="From Address"
           onChange={this.handleChange}
+          placeholder="Kaikas account"
         />
         <Input
           name="to"
           label="To"
           value={to}
           onChange={this.handleChange}
-          placeholder="Address you want to send Token"
+          placeholder="Address you want to send token to"
         />
         <Input
           name="contractAddress"
-          label="Contract Address (Token Address)"
+          label="Token Contract Address"
           value={contractAddress}
           onChange={this.handleChange}
           placeholder="The address of the deployed smart contract"
         />
         <Input
-          name="amount"
-          label="Amount"
-          value={amount}
+          name="decimal"
+          label="Token Decimal"
+          value={decimal}
           onChange={this.handleChange}
-          placeholder="Amount of Eth you want to send"
+          placeholder="Token's number of decimal"
         />
         <Input
-          name="ratio"
-          label="Fee Ratio"
-          value={ratio}
+          name="amount"
+          label="Amount"
+          value={amount}
           onChange={this.handleChange}
-          placeholder="Fee Ratio (%)"
+          placeholder="Amount of token you want to send"
         />
         <Input
           name="gas"
           label="Gas"
           value={gas}
           onChange={this.handleChange}
-          placeholder="Gas"
+          placeholder="Transaction gas limit"
         />
-        <Button
-          title="Sign Transaction"
-          onClick={this.signTransaction}
+        <Input
+          name="ratio"
+          label="Fee Ratio"
+          value={ratio}
+          onChange={this.handleChange}
+          placeholder="Fee Ratio (%)"
         />
+        <Button title="Sign Transaction" onClick={this.signTransaction} />
         {senderRawTransaction && (
           <Message
             type="rawTransaction"
diff --git a/src/components/SmartContractExecutionLegacy.js b/src/components/SmartContractExecutionLegacy.js
index 75b9b01..cc8a2d1 100644
--- a/src/components/SmartContractExecutionLegacy.js
+++ b/src/components/SmartContractExecutionLegacy.js
@@ -16,6 +16,7 @@ class SmartContractExecutionLegacy extends Component {
       txHash: null,
       receipt: null,
       error: null,
+      decimal: 18
     }
   }
 
@@ -26,48 +27,71 @@ class SmartContractExecutionLegacy extends Component {
     return null
   }
 
-  handleChange = (e) => {
+  handleChange = e => {
     this.setState({
-      [e.target.name]: e.target.value,
+      [e.target.name]: e.target.value
     })
   }
 
   signTransaction = () => {
-    const { from, contractAddress, to, amount, gas } = this.state
-    const data = caver.klay.abi.encodeFunctionCall({
-      name: 'transfer',
-      type: 'function',
-      inputs: [{
-        type: 'address',
-        name: 'recipient',
-      }, {
-        type: 'uint256',
-        name: 'amount',
-      }],
-    }, [to, caver.utils.toPeb(amount, 'KLAY')])
+    const { from, contractAddress, to, amount, gas, decimal } = this.state
+    const data = caver.klay.abi.encodeFunctionCall(
+      {
+        name: 'transfer',
+        type: 'function',
+        inputs: [
+          {
+            type: 'address',
+            name: 'recipient'
+          },
+          {
+            type: 'uint256',
+            name: 'amount'
+          }
+        ]
+      },
+      [
+        to,
+        caver.utils
+          .toBN(amount)
+          .mul(caver.utils.toBN(Number(`1e${decimal}`)))
+          .toString()
+      ]
+    )
 
-    caver.klay.sendTransaction({
-      from,
-      to: contractAddress,
-      data,
-      gas,
-    })
-      .on('transactionHash', (transactionHash) => {
+    caver.klay
+      .sendTransaction({
+        from,
+        to: contractAddress,
+        data,
+        gas
+      })
+      .on('transactionHash', transactionHash => {
         console.log('txHash', transactionHash)
         this.setState({ txHash: transactionHash })
       })
-      .on('receipt', (receipt) => {
+      .on('receipt', receipt => {
         console.log('receipt', receipt)
         this.setState({ receipt: JSON.stringify(receipt) })
       })
-      .on('error', (error) => {
+      .on('error', error => {
         console.log('error', error)
         this.setState({ error: error.message })
       })
   }
 
   render() {
-    const { from, to, amount, contractAddress, gas, txHash, receipt, error } = this.state
+    const {
+      from,
+      to,
+      amount,
+      contractAddress,
+      gas,
+      txHash,
+      receipt,
+      error,
+      decimal
+    } = this.state
 
     return (
       <div className="SmartContractExecution">
@@ -76,45 +100,45 @@ class SmartContractExecutionLegacy extends Component {
           label="From"
           value={from}
           onChange={this.handleChange}
-          placeholder="Account you logged in metamask"
+          placeholder="Kaikas account"
         />
         <Input
           name="to"
           label="To"
           value={to}
           onChange={this.handleChange}
-          placeholder="Address you want to send Token"
+          placeholder="Address you want to send token to"
         />
         <Input
           name="contractAddress"
-          label="Contract Address (Token Address)"
+          label="Token Contract Address"
           value={contractAddress}
           onChange={this.handleChange}
           placeholder="The address of the deployed smart contract"
         />
+        <Input
+          name="decimal"
+          label="Token Decimal"
+          value={decimal}
+          onChange={this.handleChange}
+          placeholder="Token's number of decimal"
+        />
         <Input
           name="amount"
           label="Amount"
           value={amount}
           onChange={this.handleChange}
-          placeholder="Amount of Eth you want to send"
+          placeholder="Amount of token you want to send"
         />
         <Input
           name="gas"
           label="Gas"
           value={gas}
           onChange={this.handleChange}
-          placeholder="Gas"
-        />
-        <Button
-          title="Sign Transaction"
-          onClick={this.signTransaction}
-        />
-        <TxResult
-          txHash={txHash}
-          receipt={receipt}
-          error={error}
+          placeholder="Transaction gas limit"
         />
+        <Button title="Sign Transaction" onClick={this.signTransaction} />
+        <TxResult txHash={txHash} receipt={receipt} error={error} />
       </div>
     )
   }