Merge pull request #58 from hemilabs/fix-allow-infinite

Fixed Allow Infinite button on Token Approvals

package.json

@@ -7,6 +7,7 @@
     "build": "npm run lerna:run build",
     "deps:check": "npm run lerna:run deps:check",
     "format:check": "prettier --check .",
+    "format:write": "prettier --write .",
     "postinstall": "lerna bootstrap",
     "lerna:run": "lerna run --stream --concurrency 1",
     "lint": "eslint --cache --quiet .",

site/messages/en.json

@@ -4,11 +4,11 @@
   "address": "Address",
   "add-stream": "Add Stream",
   "allowance": "Allowance",
+  "allow-infinite": "Allow Infinite",
   "already-claimed": "Already Claimed",
   "approval-in-progress": "Approval in Progress",
   "approval-succeeded": "Approval Succeeded",
   "approve-allowance": "Approve allowance",
-  "approve-infinite": "Approve infinite",
   "approve": "Approve",
   "auction-ended": "This auction has ended",
   "auction-stopped": "Auction stopped by seller",

site/messages/zh.json

@@ -4,11 +4,11 @@
   "address": "地址",
   "add-stream": "Add Stream",
   "allowance": "津贴",
+  "allow-infinite": "允许无限",
   "already-claimed": "已领取",
   "approval-in-progress": "审批中",
   "approval-succeeded": "批准成功",
   "approve-allowance": "批准津贴",
-  "approve-infinite": "批准无限",
   "approve": "批准",
   "auction-ended": "本次拍卖已结束",
   "auction-stopped": "拍卖被卖家停止",

site/pages/[locale]/token-approvals.js

@@ -1,3 +1,4 @@
+import Big from 'big.js'
 import { useWeb3React } from '@web3-react/core'
 import { useRouter } from 'next/router'
 import { useTranslations } from 'next-intl'
@@ -14,25 +15,39 @@ import { useTokenInput } from '../../hooks/useTokenInput'
 import { fromUnit, toUnit } from '../../utils'
 import CallToAction from '../../components/CallToAction'
 
+const decimalRegex = /^(([1-9][0-9]*)?[0-9](\.[0-9]*)?|\.[0-9]+)$/
+const infiniteSymbol = '∞'
+
 const useAllowanceInput = function (
   token,
   spender,
   allowance,
   setAllowance,
-  setFeedback
+  setFeedback,
+  setIsInfinite
 ) {
   const { account, active, chainId } = useWeb3React()
   const { tokenApprovals } = useContext(PureContext)
-
   const disabled = !token || !spender || !active || !tokenApprovals
 
   useEffect(
     function () {
       setAllowance('')
+      setIsInfinite(false)
     },
     [active, token, spender]
   )
 
+  const setAllowanceInfinity = function (allowance) {
+    const isInfinite =
+      decimalRegex.test(allowance) && new Big(allowance).gt(token.totalSupply)
+
+    setIsInfinite(isInfinite)
+    setAllowance(
+      isInfinite ? infiniteSymbol : fromUnit(allowance, token.decimals)
+    )
+  }
+
   useEffect(
     function () {
       if (disabled) {
@@ -42,7 +57,7 @@ const useAllowanceInput = function (
       tokenApprovals
         .allowance(token.address, account, spender.address)
         .then(function (currentAllowance) {
-          setAllowance(fromUnit(currentAllowance, token.decimals))
+          setAllowanceInfinity(currentAllowance)
         })
         .catch(function (err) {
           setFeedback('error', err.message)
@@ -52,8 +67,8 @@ const useAllowanceInput = function (
   )
 
   const handleChange = function (e) {
-    const re = /^(([1-9][0-9]*)?[0-9](\.[0-9]*)?|\.[0-9]+)$/ // Decimal number
-    if (e.target.value === '' || re.test(e.target.value)) {
+    if (e.target.value === '' || decimalRegex.test(e.target.value)) {
+      setIsInfinite(false)
       setAllowance(e.target.value)
     }
   }
@@ -92,7 +107,6 @@ const useFeedback = function () {
 
 const TokenApprovalsForm = function () {
   const t = useTranslations()
-  const { account } = useWeb3React()
   const { tokenApprovals } = useContext(PureContext)
   const { query } = useRouter()
 
@@ -103,15 +117,18 @@ const TokenApprovalsForm = function () {
   const spenderInput = useTokenInput(query.spender, setSpender, true)
 
   const [allowance, setAllowance] = useState('')
+  const [feedback, setFeedback] = useFeedback()
+  const [isInfinite, setIsInfinite] = useState(false)
+
   const allowanceInput = useAllowanceInput(
     token,
     spender,
     allowance,
-    setAllowance
+    setAllowance,
+    setFeedback,
+    setIsInfinite
   )
 
-  const [feedback, setFeedback] = useFeedback()
-
   // Depending on the progress state of the approval operation, set the feedback
   // color and message.
   const onProgress = function (err, state) {
@@ -133,26 +150,21 @@ const TokenApprovalsForm = function () {
   const approveButton = useFormButton(
     approveDisabled,
     () =>
-      tokenApprovals.approve(
-        token.address,
-        spender.address,
-        toUnit(allowance, token.decimals)
-      ),
-    onProgress
-  )
-  const infiniteButton = useFormButton(
-    approveDisabled,
-    () =>
-      tokenApprovals
-        .approveInfinite(token.address, spender.address)
-        .then(() =>
-          tokenApprovals
-            .allowance(token.address, account, spender.address)
-            .then(setAllowance)
-        ),
+      isInfinite
+        ? tokenApprovals.approveInfinite(token.address, spender.address)
+        : tokenApprovals.approve(
+            token.address,
+            spender.address,
+            toUnit(allowance, token.decimals)
+          ),
     onProgress
   )
 
+  const allowInfinite = function () {
+    setIsInfinite(true)
+    setAllowance(infiniteSymbol)
+  }
+
   return (
     <UtilFormBox
       text={t('utilities-text.token-approvals')}
@@ -175,12 +187,19 @@ const TokenApprovalsForm = function () {
         {...allowanceInput}
       />
 
-      <p
-        className="text-orange-950 hover:text-orange-500 cursor-pointer text-right"
-        {...infiniteButton}
-      >
-        {t('approve-infinite')}
-      </p>
+      <div className="flex justify-end">
+        <button
+          disabled={approveDisabled}
+          onClick={allowInfinite}
+          className={`${
+            !approveDisabled
+              ? 'text-orange-950 hover:text-orange-500 cursor-pointer'
+              : 'text-orange-500 cursor-not-allowed'
+          }`}
+        >
+          {t('allow-infinite')}
+        </button>
+      </div>
 
       <div className="mt-4">
         <CallToAction>