From 64094ff0ad158c917e2bed41bc7f05cce58fd130 Mon Sep 17 00:00:00 2001 From: Thomas Alvarenga Date: Mon, 9 Dec 2024 14:13:53 -0300 Subject: [PATCH 1/3] Fixed Allow Infinite button on Token Approvals --- package.json | 1 + site/messages/en.json | 2 +- site/messages/zh.json | 2 +- site/pages/[locale]/token-approvals.js | 85 ++++++++++++++++---------- 4 files changed, 56 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 9642633..d876607 100644 --- a/package.json +++ b/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 .", diff --git a/site/messages/en.json b/site/messages/en.json index 95f248b..1ca729a 100644 --- a/site/messages/en.json +++ b/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", diff --git a/site/messages/zh.json b/site/messages/zh.json index ba18f86..b3835e2 100644 --- a/site/messages/zh.json +++ b/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": "拍卖被卖家停止", diff --git a/site/pages/[locale]/token-approvals.js b/site/pages/[locale]/token-approvals.js index 5d6820b..505f1ce 100644 --- a/site/pages/[locale]/token-approvals.js +++ b/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,6 +15,25 @@ 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 isInfinite = function (allowance, token) { + if (!allowance || !token) { + return false + } + + if (allowance === infiniteSymbol) { + return true + } + + if (decimalRegex.test(allowance)) { + return new Big(allowance).gt(token.totalSupply) + } + + return false +} + const useAllowanceInput = function ( token, spender, @@ -23,7 +43,6 @@ const useAllowanceInput = function ( ) { const { account, active, chainId } = useWeb3React() const { tokenApprovals } = useContext(PureContext) - const disabled = !token || !spender || !active || !tokenApprovals useEffect( @@ -42,7 +61,11 @@ const useAllowanceInput = function ( tokenApprovals .allowance(token.address, account, spender.address) .then(function (currentAllowance) { - setAllowance(fromUnit(currentAllowance, token.decimals)) + setAllowance( + isInfinite(currentAllowance, token) + ? infiniteSymbol + : fromUnit(currentAllowance, token.decimals) + ) }) .catch(function (err) { setFeedback('error', err.message) @@ -52,9 +75,10 @@ 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)) { - setAllowance(e.target.value) + if (e.target.value === '' || decimalRegex.test(e.target.value)) { + setAllowance( + isInfinite(e.target.value, token) ? infiniteSymbol : e.target.value + ) } } @@ -92,7 +116,6 @@ const useFeedback = function () { const TokenApprovalsForm = function () { const t = useTranslations() - const { account } = useWeb3React() const { tokenApprovals } = useContext(PureContext) const { query } = useRouter() @@ -103,15 +126,16 @@ const TokenApprovalsForm = function () { const spenderInput = useTokenInput(query.spender, setSpender, true) const [allowance, setAllowance] = useState('') + const [feedback, setFeedback] = useFeedback() + const allowanceInput = useAllowanceInput( token, spender, allowance, - setAllowance + setAllowance, + setFeedback ) - 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,23 +157,13 @@ 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(allowance, token) + ? tokenApprovals.approveInfinite(token.address, spender.address) + : tokenApprovals.approve( + token.address, + spender.address, + toUnit(allowance, token.decimals) + ), onProgress ) @@ -175,12 +189,19 @@ const TokenApprovalsForm = function () { {...allowanceInput} /> -

- {t('approve-infinite')} -

+
+ +
From 0923d3f495e321701152b7d099de1de217e820d1 Mon Sep 17 00:00:00 2001 From: Thomas Alvarenga Date: Tue, 10 Dec 2024 12:38:43 -0300 Subject: [PATCH 2/3] Fixed Infinity state on Token Approvals --- site/pages/[locale]/token-approvals.js | 55 +++++++++++++------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/site/pages/[locale]/token-approvals.js b/site/pages/[locale]/token-approvals.js index 505f1ce..ee1285c 100644 --- a/site/pages/[locale]/token-approvals.js +++ b/site/pages/[locale]/token-approvals.js @@ -18,28 +18,13 @@ import CallToAction from '../../components/CallToAction' const decimalRegex = /^(([1-9][0-9]*)?[0-9](\.[0-9]*)?|\.[0-9]+)$/ const infiniteSymbol = '∞' -const isInfinite = function (allowance, token) { - if (!allowance || !token) { - return false - } - - if (allowance === infiniteSymbol) { - return true - } - - if (decimalRegex.test(allowance)) { - return new Big(allowance).gt(token.totalSupply) - } - - return false -} - const useAllowanceInput = function ( token, spender, allowance, setAllowance, - setFeedback + setFeedback, + setIsInfinite ) { const { account, active, chainId } = useWeb3React() const { tokenApprovals } = useContext(PureContext) @@ -48,10 +33,21 @@ const useAllowanceInput = function ( 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) { @@ -61,11 +57,8 @@ const useAllowanceInput = function ( tokenApprovals .allowance(token.address, account, spender.address) .then(function (currentAllowance) { - setAllowance( - isInfinite(currentAllowance, token) - ? infiniteSymbol - : fromUnit(currentAllowance, token.decimals) - ) + ;`` + setAllowanceInfinity(currentAllowance) }) .catch(function (err) { setFeedback('error', err.message) @@ -76,9 +69,8 @@ const useAllowanceInput = function ( const handleChange = function (e) { if (e.target.value === '' || decimalRegex.test(e.target.value)) { - setAllowance( - isInfinite(e.target.value, token) ? infiniteSymbol : e.target.value - ) + setIsInfinite(false) + setAllowance(e.target.value) } } @@ -127,13 +119,15 @@ const TokenApprovalsForm = function () { const [allowance, setAllowance] = useState('') const [feedback, setFeedback] = useFeedback() + const [isInfinite, setIsInfinite] = useState(false) const allowanceInput = useAllowanceInput( token, spender, allowance, setAllowance, - setFeedback + setFeedback, + setIsInfinite ) // Depending on the progress state of the approval operation, set the feedback @@ -157,7 +151,7 @@ const TokenApprovalsForm = function () { const approveButton = useFormButton( approveDisabled, () => - isInfinite(allowance, token) + isInfinite ? tokenApprovals.approveInfinite(token.address, spender.address) : tokenApprovals.approve( token.address, @@ -167,6 +161,11 @@ const TokenApprovalsForm = function () { onProgress ) + const allowInfinite = function () { + setIsInfinite(true) + setAllowance(infiniteSymbol) + } + return (