Merge pull request #32 from tari-project/feat/functionality

New Features
The input field in the bridge form now displays a "0" placeholder when empty.
Bug Fixes
The modal now stays open and reflects the correct step during transaction processing.
Style
The "Done" button in the wrap modal is no longer visible or clickable.
Refactor
Clicking outside a modal no longer closes it.

Author: Niferu

app/page.tsx

@@ -46,7 +46,7 @@ export default function Home() {
     control,
     formState: { errors, isValid },
   } = useForm<BridgeFormValues>({
-    defaultValues: { amount: '1000' },
+    defaultValues: { amount: '' },
     mode: 'onChange',
   })
 
@@ -79,8 +79,11 @@ export default function Home() {
     if (modalOpen && modalStep === 0 && isConnected) {
       setModalOpen(false)
       setModalStep(1)
+    } else if (isProcessingTransaction) {
+      setModalStep(2)
+      setModalOpen(true)
     }
-  }, [isConnected, modalOpen, modalStep])
+  }, [isConnected, modalOpen, modalStep, isProcessingTransaction])
 
   const handleConnectClick = () => {
     if (!isConnected) {
@@ -112,7 +115,13 @@ export default function Home() {
 
         removePendingTransaction(txId)
       })
-  }, [amount, address, bridgeToEthereum])
+  }, [
+    amount,
+    address,
+    bridgeToEthereum,
+    addPendingTransaction,
+    removePendingTransaction,
+  ])
 
   const handleBridgeToTari = () => {
     console.log('Bridging to Tari...')

components/bridge-input/bridge-input.tsx

@@ -37,6 +37,7 @@ export const BridgeInput: React.FC<BridgeInputProps> = ({
           {...field}
           type="number"
           variant="standard"
+          placeholder="0"
           error={Boolean(errors.amount)}
           helperText={errors.amount?.message}
           slotProps={{

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

@@ -33,11 +33,11 @@ export const MainModal: React.FC<MainModalProps> = ({
     setStep(1)
   }
 
-  const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-      closeModal()
-    }
-  }
+  // const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  //   if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+  //     closeModal()
+  //   }
+  // }
 
   if (step === 0 && isConnected) return null
 
@@ -88,7 +88,7 @@ export const MainModal: React.FC<MainModalProps> = ({
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      onClick={handleOutsideClick}
+      // onClick={handleOutsideClick}
     >
       <section
         ref={modalRef}

components/modals/wrap-modal/wrap-modal.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import Image from 'next/image'
 // import { HiArrowRightOnRectangle } from 'react-icons/hi2'
 import { WrapModalProps } from './wrap-modal.types'
-import { ModalButton } from '@/components/modals/modal-button'
+// import { ModalButton } from '@/components/modals/modal-button'
 import { useBridgeInfo } from '@/hooks/use-bridge-info'
 
 export const WrapModal: React.FC<WrapModalProps> = ({
-  closeModal,
+  // closeModal,
   amount,
   tariWalletAddress,
   ethereumAddress,
@@ -88,7 +88,7 @@ export const WrapModal: React.FC<WrapModalProps> = ({
           <div className="py-[0.5px] w-full bg-gray-300 mt-2 mb-4"></div> */}
 
           {/* Section 1 */}
-          <ModalButton label="Done" onClick={closeModal} disabled={false} />
+          {/* <ModalButton label="Done" onClick={closeModal} disabled={false} /> */}
         </div>
       </div>
     </div>