Merge pull request #390 from kleros/fix(web)/convert-pnk-crash

Fix(web)/convert pnk crash
kleros · Nov 15, 2023 · 920a89c · 920a89c
2 parents 53655e9 + 113ab69
commit 920a89c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 23 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -55,20 +55,6 @@
           "debug"
         ]
       }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "styled-components",
-            "message": "Please import from styled-components/macro."
-          }
-        ],
-        "patterns": [
-          "!styled-components/macro"
-        ]
-      }
     ]
   }
 }
diff --git a/src/containers/convert-pnk/convert-pnk-card.js b/src/containers/convert-pnk/convert-pnk-card.js
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { Card, Divider } from "antd";
 import { ButtonLink } from "../../adapters/antd";

diff --git a/src/containers/convert-pnk/wihdraw-stpnk-card.js b/src/containers/convert-pnk/wihdraw-stpnk-card.js
@@ -1,8 +1,8 @@
 import React from "react";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 import Web3 from "web3";
 import { useSideChainApi } from "../../api/side-chain";
-import { Card, Button, Form, InputNumber } from "antd";
+import { Card, Button, Form, Input } from "antd";
 import stPNKAbi from "../../assets/contracts/wrapped-pinakion.json";
 import TokenSymbol from "../../components/token-symbol";
 import { drizzleReactHooks } from "@drizzle/react-plugin";
@@ -112,22 +112,22 @@ const WithdrawStPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, dis
     account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
   }));
   const { validateFieldsAndScroll, getFieldDecorator, setFieldsValue, getFieldsError } = form;
-  const maxAvailableNumeric = Number(fromWei(maxAvailable ?? "0"));
 
   const amountDecorator = getFieldDecorator("amount", {
     rules: [
       { required: true, message: "Amount is required." },
       async function validateBalance(_, value) {
-        if (value > maxAvailableNumeric) {
+        if (isNaN(value)) throw new Error("Must be a number.");
+        if (toBN(toWei(value)).gt(maxAvailable ?? toBN("0"))) {
           throw new Error("Not enough available tokens.");
         }
       },
     ],
   });
 
   const handleUseMaxClick = React.useCallback(() => {
-    setFieldsValue({ amount: maxAvailableNumeric });
-  }, [setFieldsValue, maxAvailableNumeric]);
+    setFieldsValue({ amount: fromWei(maxAvailable) });
+  }, [setFieldsValue, maxAvailable]);
 
   const handleSubmit = React.useCallback(
     async (evt) => {
@@ -140,7 +140,7 @@ const WithdrawStPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, dis
         const stPNKaddress = chainId === 100 && process.env.REACT_APP_PINAKION_XDAI_ADDRESS;
         if (stPNKaddress) {
           const stPNK = new drizzle.web3.eth.Contract(stPNKAbi.abi, stPNKaddress);
-          const amountInWei = toWei(String(values.amount));
+          const amountInWei = toBN(toWei(values.amount));
           try {
             await stPNK.methods.withdraw(amountInWei).send({ from: account });
           } catch (_) {
@@ -166,7 +166,7 @@ const WithdrawStPnkForm = Form.create()(({ form, maxAvailable, isSubmitting, dis
             }
           >
             {amountDecorator(
-              <InputNumber placeholder="Amount to convert" min={0} max={maxAvailableNumeric} size="large" />
+              <Input placeholder="Amount to convert" size="large" />
             )}
           </StyledFormItem>