From 45d4d986cf987da8249d9c675c324c0b354ef9a3 Mon Sep 17 00:00:00 2001
From: panosfilianos <scoupafi@gmail.com>
Date: Mon, 7 Oct 2024 15:21:17 +0300
Subject: [PATCH 1/2] refactor: Move min, max cashout limits to Offramp const
 file

---
 src/components/Cashout/Components/Initial.view.tsx | 4 +---
 src/components/Offramp/Offramp.consts.ts           | 3 +++
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx
index 10f0d866a..b662b543c 100644
--- a/src/components/Cashout/Components/Initial.view.tsx
+++ b/src/components/Cashout/Components/Initial.view.tsx
@@ -19,6 +19,7 @@ import { RecipientInfoComponent } from './RecipientInfo.comp'
 import { motion, AnimatePresence } from 'framer-motion'
 import Icon from '@/components/Global/Icon'
 import { twMerge } from 'tailwind-merge'
+import { MAX_CASHOUT_LIMIT, MIN_CASHOUT_LIMIT } from '@/components/Offramp/Offramp.consts'
 
 export const InitialCashoutView = ({
     onNext,
@@ -80,9 +81,6 @@ export const InitialCashoutView = ({
     const [newBankAccount, setNewBankAccount] = useState<string>('')
     const [activeInput, setActiveInput] = useState<'newBankAccount' | 'selectedBankAccount'>()
 
-    const MIN_CASHOUT_LIMIT = 10 // $10 minimum
-    const MAX_CASHOUT_LIMIT = 101000 // $101,000 maximum
-
     const isBelowMinLimit = useMemo(() => {
         return !usdValue || parseFloat(usdValue) < MIN_CASHOUT_LIMIT
     }, [usdValue])
diff --git a/src/components/Offramp/Offramp.consts.ts b/src/components/Offramp/Offramp.consts.ts
index 05b21e7d2..1457213e4 100644
--- a/src/components/Offramp/Offramp.consts.ts
+++ b/src/components/Offramp/Offramp.consts.ts
@@ -24,6 +24,9 @@ export enum OfframpType {
     CLAIM = 'CLAIM'
 }
 
+export const MIN_CASHOUT_LIMIT = 10 // $10 minimum
+export const MAX_CASHOUT_LIMIT = 101000 // $101,000 maximum
+
 export const usdcAddressOptimism = '0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85'
 export const optimismChainId = '10'
 

From 4c1e9d3f1bf4fa3987e9f491acb9f43db28323e3 Mon Sep 17 00:00:00 2001
From: panosfilianos <scoupafi@gmail.com>
Date: Mon, 7 Oct 2024 15:21:54 +0300
Subject: [PATCH 2/2] fix: Add check for dollar amount min, max on offramp link
 claims

---
 src/components/Claim/Link/Initial.view.tsx | 34 ++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx
index 1b5faa966..41d5e2d09 100644
--- a/src/components/Claim/Link/Initial.view.tsx
+++ b/src/components/Claim/Link/Initial.view.tsx
@@ -20,7 +20,7 @@ import { Popover } from '@headlessui/react'
 import { useAuth } from '@/context/authContext'
 import { ActionType, estimatePoints } from '@/components/utils/utils'
 import { CrispButton } from '@/components/CrispChat'
-import { optimismChainId, usdcAddressOptimism } from '@/components/Offramp/Offramp.consts'
+import { MAX_CASHOUT_LIMIT, MIN_CASHOUT_LIMIT, optimismChainId, usdcAddressOptimism } from '@/components/Offramp/Offramp.consts'
 
 export const InitialClaimLinkView = ({
     onNext,
@@ -142,6 +142,22 @@ export const InitialClaimLinkView = ({
             let tokenName = utils.getBridgeTokenName(claimLinkData.chainId, claimLinkData.tokenAddress)
             let chainName = utils.getBridgeChainName(claimLinkData.chainId)
 
+            if (tokenPrice) {
+                const cashoutUSDAmount = Number(claimLinkData.tokenAmount) * tokenPrice
+                if (cashoutUSDAmount < MIN_CASHOUT_LIMIT) {
+                    setErrorState({
+                        showError: true,
+                        errorMessage: 'offramp_lt_minimum',
+                    })
+                    return
+                } else if (cashoutUSDAmount > MAX_CASHOUT_LIMIT) {
+                    setErrorState({
+                        showError: true,
+                        errorMessage: 'offramp_mt_maximum',
+                    })
+                }
+            }
+
             if (tokenName && chainName) {
             } else {
                 if (!crossChainDetails) {
@@ -616,9 +632,9 @@ export const InitialClaimLinkView = ({
                                 </label>
                             ) : (
                                 <>
-                                    <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                                     {errorState.errorMessage === 'No route found for the given token pair.' && (
                                         <>
+                                            <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                                             {' '}
                                             <span
                                                 className="cursor-pointer text-h8 font-normal text-red underline"
@@ -635,6 +651,20 @@ export const InitialClaimLinkView = ({
                                             </span>
                                         </>
                                     )}
+                                    {errorState.errorMessage === 'offramp_lt_minimum' && (
+                                        <>
+                                            <label className=" text-h8 font-normal text-red ">
+                                                You can not claim links with less than ${MIN_CASHOUT_LIMIT} to your bank account.{' '}
+                                            </label>
+                                        </>
+                                    )}
+                                    {errorState.errorMessage === 'offramp_mt_maximum' && (
+                                        <>
+                                            <label className=" text-h8 font-normal text-red ">
+                                                You can not claim links with more than ${MAX_CASHOUT_LIMIT} to your bank account.{' '}
+                                            </label>
+                                        </>
+                                    )}
                                 </>
                             )}
                         </div>