Fix/data format of eip712

package.json

@@ -17,11 +17,13 @@
   "author": "Chance Hudson",
   "license": "MIT",
   "dependencies": {
+    "@ethersproject/bignumber": "5.7.0",
     "axios": "^0.20.0",
     "compression": "^1.7.4",
     "dayjs": "^1.10.6",
     "especial": "0.0.4",
     "eth-ens-namehash": "^2.0.8",
+    "ethers": "5.7.2",
     "express": "^4.17.1",
     "js-sha512": "^0.8.0",
     "lottie-web": "^5.8.1",

src/Deposit.vue

@@ -112,13 +112,12 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import AssetDropdown from './components/AssetDropdown'
 import AssetAmountField from './components/AssetAmountField'
-import { toWei, fromWei } from './utils/wei'
+import { ethers } from 'ethers'
 import Checkbox from './components/Checkbox'
-import BN from 'bn.js'
+import { BigNumber } from "@ethersproject/bignumber";
 import CenteredLeftMenu from './components/CenteredLeftMenu'
 import NextButton from './components/NextButton'
 import ConfirmDepositPopup from './components/ConfirmDepositPopup'
-import measureText from './utils/measure-text'
 import tooltips from './tooltips'
 import InfoText from './components/InfoText'
 import decimalCount from './utils/decimal-count'
@@ -150,6 +149,7 @@ export default class Deposit extends Vue {
   depositType = 0
   showingDepositConfirm = false
   activeFeePromise = undefined
+  ethers = ethers
 
   mounted() {
     const { type, asset } = this.$route.query
@@ -169,20 +169,22 @@ export default class Deposit extends Vue {
   }
 
   async setFeeAmount(clickedButton) {
-    const multiplier = clickedButton === 'Fast' ? new BN('200000') : new BN('100000')
+    const multiplier = clickedButton === 'Fast' ? BigNumber.from('200000') : BigNumber.from('100000')
     this.feeAmountState = 3
+    let feePromise
     try {
-      const feePromise = this.$store.dispatch('loadCurrentWeiPerByte')
+      feePromise = this.$store.dispatch('loadCurrentWeiPerByte')
       this.activeFeePromise = feePromise
       const weiPerByte = await feePromise
       if (this.activeFeePromise !== feePromise) return
       this.activeFeePromise = undefined
       // Assume 2000 bytes for a simple deposit tx in a block
-      const feeWeiAmount = new BN(weiPerByte).mul(multiplier)
+      const feeWeiAmount = BigNumber.from(weiPerByte.toString()).mul(multiplier)
+      console.log(feeWeiAmount)
       this.feeAmount = ''
       Vue.nextTick(() => {
         if (this.activeFeePromise !== undefined) return
-        this.feeAmount = fromWei(feeWeiAmount, 9).toString()
+        this.feeAmount = ethers.utils.formatEther(feeWeiAmount)
       })
     } catch (err) {
       if (this.activeFeePromise === feePromise) this.activeFeePromise = undefined

src/Transfer.vue

@@ -88,8 +88,7 @@ import Button from './components/Button'
 import AddressField from './components/AddressField'
 import FeeField from './components/FeeField'
 import AssetAmountField from './components/AssetAmountField'
-import { toWei, fromWei } from './utils/wei'
-import BN from 'bn.js'
+import { ethers } from 'ethers'
 import CenteredLeftMenu from './components/CenteredLeftMenu'
 import NextButton from './components/NextButton'
 import ConfirmTransferPopup from './components/ConfirmTransferPopup'
@@ -133,6 +132,7 @@ export default class Transfer extends Vue {
   tx = undefined
   showingTransferConfirm = false
   activeFeePromise = undefined
+  ethers = ethers
 
   mounted() {
     if (this.$route.query.asset) {
@@ -184,25 +184,24 @@ export default class Transfer extends Vue {
       if (this.activeAsset === 'ETH') {
         const tx = await this.$store.state.zkopru.wallet.generateEtherTransfer(
           this.zkAddress,
-          toWei(this.transferAmount),
-          (+this.fee * (10 ** 9)).toString()
+          ethers.utils.parseEther(this.transferAmount.toString()).toString(),
+          ethers.utils.parseUnits(this.fee.toString(), 'gwei').toString(),
         )
-        this.totalFee = fromWei(tx.fee.toString(), 8)
-        this.totalEther = fromWei(new BN(tx.fee).add(new BN(toWei(this.transferAmount))).toString())
+        this.totalFee = ethers.utils.formatEther(tx.fee.toString())
+        this.totalEther = this.totalFee.add(ethers.utils.parseEther(this.transferAmount))
         this.tx = tx
       } else {
         const { address, decimals } = this.$store.state.zkopru.registeredTokens.find(({ symbol }) => {
           return symbol === this.activeAsset
         })
-        const decimalAmount = `${+this.transferAmount * (10 ** +decimals)}`
         const tx = await this.$store.state.zkopru.wallet.generateTokenTransfer(
           this.zkAddress,
-          decimalAmount,
+          ethers.utils.parseUnits(this.transferAmount.toString(), decimals),
           address,
-          (+this.fee * (10 ** 9)).toString()
+          ethers.utils.parseUnits(this.fee.toString(), 'gwei').toString(),
         )
-        this.totalFee = fromWei(tx.fee.toString(), 8)
-        this.totalEther = fromWei(new BN(tx.fee)).toString()
+        this.totalFee = ethers.utils.formatEther(tx.fee.toString())
+        this.totalEther = this.totalFee
         this.tx = tx
       }
     } catch (err) {
@@ -214,6 +213,7 @@ export default class Transfer extends Vue {
           this.amountState = 2
         }
       }
+      console.log(err)
     }
   }
 

src/Withdraw.vue

@@ -103,8 +103,7 @@ import FeeField from './components/FeeField'
 import AssetAmountField from './components/AssetAmountField'
 import Button from './components/Button'
 import Checkbox from './components/Checkbox'
-import { toWei, fromWei } from './utils/wei'
-import BN from 'bn.js'
+import { ethers } from 'ethers'
 import CenteredLeftMenu from './components/CenteredLeftMenu'
 import NextButton from './components/NextButton'
 import ConfirmWithdrawPopup from './components/ConfirmWithdrawPopup'
@@ -159,6 +158,7 @@ export default class Withdraw extends Vue {
   withdrawType = 0
   showingWithdrawConfirm = false
   activeFeePromise = undefined
+  ethers = ethers
 
   mounted() {
     const { type, asset } = this.$route.query
@@ -202,32 +202,29 @@ export default class Withdraw extends Vue {
     if (this.activeAsset === 'ETH') {
       const tx = await this.$store.state.zkopru.wallet.generateWithdrawal(
         this.$store.state.account.accounts[0],
-        toWei(this.withdrawAmount),
-        (+this.feeAmount * (10 ** 9)).toString(),
-        toWei(this.instantWithdrawFee || '0')
+        ethers.utils.parseEther(this.withdrawAmount.toString()),
+        ethers.utils.parseUnits(this.feeAmount, 'gwei').toString(),
+        ethers.utils.parseEther(this.instantWithdrawFee.toString() || '0')
       )
-      this.totalFee = fromWei(tx.fee.toString(), 8)
-      this.totalEther = fromWei(new BN(tx.fee)
-        .add(new BN(toWei(this.withdrawAmount)))
-        .toString())
+      this.totalFee = ethers.utils.parseEther(tx.fee.toString())
+      this.totalEther = ethers.utils.parseEther(this.withdrawAmount).add(this.totalFee)
       this.tx = tx
     } else {
       const { address, decimals } = this.$store.state.zkopru.registeredTokens.find(({ symbol }) => {
         return symbol === this.activeAsset
       })
-      const withdrawAmountDecimal = +this.withdrawAmount * (10 ** +decimals)
-      const instantWithdrawFeeDecimal = +(this.instantWithdrawFee || 0) * (10 ** +decimals)
-      const decimalAmount = new BN(withdrawAmountDecimal).add(new BN(instantWithdrawFeeDecimal))
+      const withdrawAmountDecimal = ethers.utils.parseUnits(this.withdrawAmount, decimals.toString())
+      const instantWithdrawFeeDecimal = ethers.utils.parseUnits((this.instantWithdrawFee || 0), decimals.toString())
+      const decimalAmount = withdrawAmountDecimal.add(instantWithdrawFeeDecimal).toString()
       const tx = await this.$store.state.zkopru.wallet.generateTokenWithdrawal(
         this.$store.state.account.accounts[0],
         decimalAmount,
         address,
-        (+this.feeAmount * (10 ** 9)).toString(),
+        ethers.utils.parseUnits(this.feeAmount, 'gwei').toString(),
         '0',
       )
-      this.totalFee = fromWei(tx.fee.toString(), 8)
-      this.totalEther = fromWei(new BN(tx.fee)
-        .toString())
+      this.totalFee = ethers.utils.parseEther(tx.fee.toString())
+      this.totalEther = this.totalFee
       this.tx = tx
     }
   }

src/components/AddTokenPopup.vue

@@ -98,9 +98,9 @@ export default class AddTokenPopup extends Vue {
     try {
       const tokenContract = await this.$store.state.zkopru.client.getERC20Contract(this.tokenAddress)
       const [ decimals, symbol, name ] = await Promise.all([
-        tokenContract.methods.decimals().call(),
-        tokenContract.methods.symbol().call(),
-        tokenContract.methods.name().call(),
+        tokenContract.decimals(),
+        tokenContract.symbol(),
+        tokenContract.name(),
       ])
       this.tokenInfo = { decimals, symbol, name }
       if (this.$store.state.zkopru.tokensByAddress[this.tokenAddress]) {

src/components/ConfirmDepositPopup.vue

@@ -92,9 +92,9 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import NextButton from './NextButton'
-import { toWei, fromWei } from '../utils/wei'
 import lottie from 'lottie-web'
-import BN from 'bn.js'
+import { BigNumber } from "@ethersproject/bignumber";
+import { ethers } from "ethers"
 
 @Component({
   name: 'ConfirmDepositPopup',
@@ -139,18 +139,18 @@ export default class ConfirmDepositPopup extends Vue {
     this.loadingTitle = 'Waiting for Metamask'
     this.loadingSubtitle = 'Please confirm the transaction to complete your deposit.'
     const token = this.$store.state.zkopru.registeredTokens.find(({ symbol }) => symbol === this.activeToken)
-    const amountDecimals = `${(+this.tokenDepositAmount)*(10**(+token.decimals))}`
+    const amountDecimals = ethers.utils.parseUnits(this.tokenDepositAmount, token.decimals)
     const { to, data, value, onComplete } = this.$store.state.zkopru.wallet.wallet.depositERC20Tx(
-      toWei(this.etherDepositAmount),
+      ethers.utils.parseEther(this.etherDepositAmount),
       token.address,
       amountDecimals,
-      toWei(this.feeAmount),
+      ethers.utils.parseEther(this.feeAmount),
     )
     const tokenContract = await this.$store.state.zkopru.client.getERC20Contract(token.address)
-    const amount = new BN(this.tokenDepositAmount)
+    const amount = BigNumber.from(this.tokenDepositAmount.toString())
     const existingAllowance = await this.$store.dispatch('loadTokenAllowance', token.address)
-    if (new BN(existingAllowance).lt(amount)) {
-      const transferData = tokenContract.methods.approve(to, amountDecimals).encodeABI()
+    if ((BigNumber.from(existingAllowance.toString())).lt(amount)) {
+      const transferData = tokenContract.interface.encodeFunctionData('approve', [to, amountDecimals])
       try {
         const txHash = await window.ethereum.request({
           method: 'eth_sendTransaction',
@@ -183,9 +183,9 @@ export default class ConfirmDepositPopup extends Vue {
     this.loadingSubtitle = 'Please confirm the transaction to complete your deposit.'
     if (!this.activeToken) {
       try {
-        const { to, data, value, onComplete } = this.$store.state.zkopru.wallet.wallet.depositEtherTx(
-          toWei(this.etherDepositAmount),
-          toWei(this.feeAmount),
+        const { to, data, value, onComplete } = await this.$store.state.zkopru.wallet.wallet.depositEtherTx(
+          ethers.utils.parseEther(this.etherDepositAmount),
+          ethers.utils.parseEther(this.feeAmount),
         )
         await window.ethereum.request({
           method: 'eth_sendTransaction',
@@ -206,13 +206,12 @@ export default class ConfirmDepositPopup extends Vue {
       }
     } else {
       const token = this.$store.state.zkopru.registeredTokens.find(({ symbol }) => symbol === this.activeToken)
-      const amountDecimals = `${(+this.tokenDepositAmount)*(10**(+token.decimals))}`
       try {
         const { to, data, value, onComplete } = this.$store.state.zkopru.wallet.wallet.depositERC20Tx(
-          toWei(this.etherDepositAmount),
+          ethers.utils.parseEther(this.etherDepositAmount),
           token.address,
-          amountDecimals,
-          toWei(this.feeAmount),
+          ethers.utils.parseUnits(this.tokenDepositAmount, token.decimals),
+          ethers.utils.parseEther(this.feeAmount),
         )
         await window.ethereum.request({
           method: 'eth_sendTransaction',

src/components/ConfirmTransferPopup.vue

@@ -28,7 +28,7 @@
         class="line-item"
       >
         <div>Layer 2 Fee</div>
-        <div>{{ feeAmount.toFixed(18) }} ETH</div>
+        <div>{{ feeAmount }} ETH</div>
       </div>
       <div
         class="line-item"
@@ -74,7 +74,6 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import NextButton from './NextButton'
-import { toWei, fromWei } from '../utils/wei'
 import lottie from 'lottie-web'
 
 @Component({
@@ -111,21 +110,22 @@ export default class ConfirmDepositPopup extends Vue {
   async send() {
     if (!this.tx) return
     this.sending = true
-    try {
-      this.currentMessageIndex = 0
-      const zkTx = await this.$store.state.zkopru.wallet.wallet.shieldTx({
-        tx: this.tx,
-      })
-      this.currentMessageIndex = 1
-      await this.$store.state.zkopru.wallet.wallet.sendLayer2Tx(zkTx)
-      await this.$store.dispatch('loadL2Balance')
-      await this.$store.dispatch('loadHistory')
-      this.sending = false
-      this.sendComplete = true
-    } catch (err) {
+    this.currentMessageIndex = 0
+    const zkTx = await this.$store.state.zkopru.wallet.wallet.shieldTx({
+      tx: this.tx,
+    })
+    this.currentMessageIndex = 1
+    const response = await this.$store.state.zkopru.wallet.wallet.sendLayer2Tx(zkTx)
+    if (response.status !== 200) {
       this.sending = false
-      console.log(err)
+      await this.$store.state.zkopru.wallet.wallet.unlockUtxos(this.tx.inflow)
+      await this.$store.state.zkopru.wallet.wallet.unlockUtxos(this.tx.outflow)
+      throw Error(await response.text())
     }
+    await this.$store.dispatch('loadL2Balance')
+    await this.$store.dispatch('loadHistory')
+    this.sending = false
+    this.sendComplete = true
   }
   closeClicked() {
     if (typeof this.onClose === 'function') {

src/components/ConfirmWithdrawPopup.vue

@@ -91,8 +91,8 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import NextButton from './NextButton'
-import { fromWei } from '../utils/wei'
-import BN from 'bn.js'
+import { ethers } from 'ethers'
+import { BigNumber } from "@ethersproject/bignumber";
 import lottie from 'lottie-web'
 
 @Component({
@@ -109,7 +109,7 @@ import lottie from 'lottie-web'
   ],
   computed: {
     etherFee() {
-      return fromWei(this.tx.fee, 8)
+      return ethers.utils.formatEther(this.tx.fee)
     }
   }
 })
@@ -118,6 +118,7 @@ export default class ConfirmWithdrawPopup extends Vue {
   prepayInfo = undefined
   loadingTitle = ''
   loadingSubtitle = ''
+  ethers = ethers
 
   mounted() {
     lottie.loadAnimation({
@@ -139,7 +140,7 @@ export default class ConfirmWithdrawPopup extends Vue {
         return symbol.toUpperCase() === this.activeAsset
       })
       const tokenContract = await this.$store.state.zkopru.client.getERC20Contract(address)
-      decimals = await tokenContract.methods.decimals().call()
+      decimals = await tokenContract.decimals()
       this.$store.state.zkopru.tokensByAddres
     }
     let instantWithdrawFeeNoDecimal = this.instantWithdrawFee
@@ -150,13 +151,13 @@ export default class ConfirmWithdrawPopup extends Vue {
     }
     console.log(decimals)
     console.log(instantWithdrawFeeNoDecimal)
-    const instantWithdrawFeeDecimal = `0x${new BN(instantWithdrawFeeNoDecimal)
-      .mul(new BN('10').pow(new BN(decimals)))
-      .div(new BN('10').pow(new BN(precision)))
-      .toString('hex')}`
+    const instantWithdrawFeeDecimal = BigNumber.from(instantWithdrawFeeNoDecimal.toString())
+      .mul(BigNumber.from('10').pow(decimals))
+      .div(BigNumber.from('10').pow(precision))
+      .toHexString()
     const msgParams = {
       domain: {
-        chainId: 5,
+        chainId: this.$store.state.chainId,
         name: 'Zkopru',
         verifyingContract: this.$store.state.zkopru.client.node.layer1.address,
         version: '1',
@@ -179,7 +180,7 @@ export default class ConfirmWithdrawPopup extends Vue {
       },
       message: {
         prepayer: '0x0000000000000000000000000000000000000000',
-        withdrawalHash: `0x${withdrawal.hash().toString('hex')}`,
+        withdrawalHash: withdrawal.hash().toHexString(),
         prepayFeeInEth: this.activeAsset === 'ETH' ? instantWithdrawFeeDecimal : 0,
         prepayFeeInToken: this.activeAsset === 'ETH' ? 0 : instantWithdrawFeeDecimal,
         expiration: Math.floor(+new Date() / 1000) + 24*3600,
@@ -220,7 +221,7 @@ export default class ConfirmWithdrawPopup extends Vue {
     await this.$store.dispatch('loadHistory')
     this.withdrawState = 3
   }
-
+  
   async withdraw() {
     if (this.withdrawType === 2 && this.withdrawState === 0) {
       this.withdrawState = 5