feat: implement slippage UI validation and constraints

Author: serfersac

app/page.tsx

@@ -135,20 +135,21 @@ export default function Home() {
     <main className="relative min-h-screen w-full flex flex-col pl-(--tu-padding-left) pr-8 items-center justify-center">
       <Header />
       <FormProvider {...methods}>
-        <MainComponent remainingDailyLimit={remainingDailyLimit} />
-        {isModalOpen && !showModalDetailedTx && (
-          <MainModal
-            success={isWrapSuccess}
-            failed={isFailed}
-            step={modalStep}
-            amount={amount}
-            ethereumAddress={ethAddress}
-            tariWalletAddress={tariAccount?.address}
-            feesData={feesData}
-            closeModalAction={handleCloseModal}
-            type={ongoingBridgeTx?.type || 'wrap'}
-          />
-        )}
+        <MainComponent remainingDailyLimit={remainingDailyLimit}>
+  {isModalOpen && !showModalDetailedTx && (
+    <MainModal
+      success={isWrapSuccess}
+      failed={isFailed}
+      step={modalStep}
+      amount={amount}
+      ethereumAddress={ethAddress}
+      tariWalletAddress={tariAccount?.address}
+      feesData={feesData}
+      closeModalAction={handleCloseModal}
+      type={ongoingBridgeTx?.type || 'wrap'}
+    />
+  )}
+</MainComponent>
       </FormProvider>
       {detailedTx && <TransactionDetailsModal transaction={detailedTx} closeModalAction={() => setDetailedTx(null)} />}
       <FooterText />

components/main/main.component.tsx

@@ -14,7 +14,7 @@ import { useBridgeStore } from '@/store/bridge'
 
 // TODO - add translation keys
 
-export const MainComponent = ({ remainingDailyLimit }: MainComponentProps) => {
+export const MainComponent = ({ remainingDailyLimit, children }: MainComponentProps & { children: React.ReactNode }) => {
   const { t } = useTranslation('main', { useSuspense: false })
   const [showHistory, setShowHistory] = useState(false)
   const exceededDailyLimit = useBridgeStore((s) => s.exceededDailyLimit)
@@ -75,6 +75,7 @@ export const MainComponent = ({ remainingDailyLimit }: MainComponentProps) => {
           onClick={() => setShowHistory(true)}
           type="button"
         >
+
           {t('history')} ({bridgeTxs.length})
         </button>
       </div>
@@ -88,6 +89,7 @@ export const MainComponent = ({ remainingDailyLimit }: MainComponentProps) => {
       {offlineMarkup}
       <HomeText />
       {mainMarkup}
+      {children}
     </section>
   )
 }

components/modals/main-modal/main-modal.tsx

@@ -22,6 +22,8 @@ import { setIsModalOpen, setModalStep } from '@/store/modal'
 const DAILY_LIMIT_ERROR = 'Daily wrap limit exceeded'
 const DAILY_LIMIT_ERROR_TYPE = 'Forbidden'
 
+import { useForm, FormProvider } from 'react-hook-form'
+
 export const MainModal = ({
   success,
   failed,
@@ -36,6 +38,9 @@ export const MainModal = ({
   const modalRef = useRef<HTMLDivElement>(null)
   const tariAccount = useTariAccountStore((s) => s.tariAccount)
   const { address: ethAddress, chain, isConnected } = useConnection()
+  const methods = useForm({
+    mode: 'onChange',
+  })
 
   const { getUserBackendBridgeTxs } = useBridgeTransaction()
   const { bridgeToEthereum } = useBridgeToEthereum()
@@ -138,14 +143,16 @@ export const MainModal = ({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <section
-        ref={modalRef}
-        className="w-full max-w-md mx-4 bg-[#E0DFDE] shadow-[0px_4px_74px_0px_rgba(0,0,0,0.15)] backdrop-blur-[54px] rounded-3xl overflow-hidden flex flex-col justify-center items-center"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {renderModal()}
-      </section>
-    </div>
+    <FormProvider {...methods}>
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+        <section
+          ref={modalRef}
+          className="w-full max-w-md mx-4 bg-[#E0DFDE] shadow-[0px_4px_74px_0px_rgba(0,0,0,0.15)] backdrop-blur-[54px] rounded-3xl overflow-hidden flex flex-col justify-center items-center"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {renderModal()}
+        </section>
+      </div>
+    </FormProvider>
   )
 }

components/modals/review-modal/review-modal.tsx

@@ -11,6 +11,9 @@ import { useTranslation } from 'react-i18next'
 import { useBridgeStore } from '@/store/bridge'
 import { useConnection } from 'wagmi'
 
+import { SlippageSettings } from '@/components/settings/settings'
+import { useFormContext } from 'react-hook-form'
+
 export const ReviewModal = ({
   closeModalAction,
   amount,
@@ -24,6 +27,9 @@ export const ReviewModal = ({
   const { amountAfterFee, feeAmount, feePercentage, isOverHighBridgeThreshold } = feesData
   const fromNetwork = useBridgeStore((s) => s.fromNetwork)
   const toNetwork = useBridgeStore((s) => s.toNetwork)
+  const {
+    formState: { isValid },
+  } = useFormContext()
 
   const { fromToken, toToken, destAddress, bridgeHandler } = useBridgeInfo(
     fromNetwork,
@@ -149,6 +155,10 @@ export const ReviewModal = ({
 
           <div className="py-[0.5px] w-full bg-gray-300 my-2"></div>
 
+          <SlippageSettings />
+
+          <div className="py-[0.5px] w-full bg-gray-300 my-2"></div>
+
           <div className="font-medium">
             <div className="text-xs text-gray-500">Estimated time</div>
             <div className="text-sm">24h</div>
@@ -162,7 +172,7 @@ export const ReviewModal = ({
           </div> */}
         </div>
 
-        <ModalButton label={t('confirm_and_bridge')} onClick={handleClick} disabled={clicked} />
+        <ModalButton label={t('confirm_and_bridge')} onClick={handleClick} disabled={clicked || !isValid} />
       </div>
     </div>
   )

components/settings/settings.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+import { TextField } from '@mui/material'
+
+export const SlippageSettings = () => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext()
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="text-sm font-medium">Slippage Tolerance</div>
+      <Controller
+        name="slippage"
+        control={control}
+        defaultValue="0.5"
+        rules={{
+          min: {
+            value: 0,
+            message: 'Slippage cannot be negative',
+          },
+          max: {
+            value: 50,
+            message: 'Invalid Slippage',
+          },
+          pattern: {
+            value: /^\d+(\.\d{1,2})?$/,
+            message: 'Max 2 decimal places',
+          },
+        }}
+        render={({ field }) => (
+          <TextField
+            {...field}
+            type="number"
+            variant="outlined"
+            placeholder="0.5"
+            error={Boolean(errors.slippage)}
+            helperText={errors.slippage?.message as React.ReactNode}
+            sx={{
+              width: '100px',
+              '& .MuiInputBase-input': {
+                padding: '8px 12px',
+              },
+            }}
+          />
+        )}
+      />
+    </div>
+  )
+}