add dollar fund component added

src/components/MyWallet/AddFund.jsx

@@ -1,15 +1,18 @@
 import React, {useState} from 'react'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 import InputCom from '../Helpers/Inputs/InputCom'
 
+import AddFundDollars from './AddFundDollars'
+
 function AddFund({payment}) {
    
     const navigate = useNavigate()
+    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
 
     //STATE FOR CONTROLLED INPUT
-    let [input, setInput] = useState('0')
+    let [input, setInput] = useState('')
 
     let [inputError, setInputError] = useState('')
 
@@ -23,15 +26,15 @@ function AddFund({payment}) {
         setInputError('')
         if(!input || input == '0'){
             setInputError('Please Enter Amount')
-            return
+            return setTimeout(()=>{setInputError('')}, 5000)
         }
 
         if(isNaN(input)){
             setInputError('Amount must be a Number')
-            return
+            return setTimeout(()=>{setInputError('')}, 5000)
         }
 
-        const stateData = {amount: Number(input)}
+        const stateData = {amount: Number(input), currency: 'naira'}
         navigate('confirm-add-fund', {state: stateData})
      
         setInput('')
@@ -79,18 +82,27 @@ function AddFund({payment}) {
                             <div className="field w-full mb-6">
                                 <InputCom
                                     fieldClass="px-6"
-                                    label="Amount(Naira)"
+                                    label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
                                     type="text"
                                     name="amount"
-                                    placeholder="Amount"
+                                    placeholder="0"
                                     value={input}
                                     inputHandler={handleChange}
-                                    // blurHandler={props.handleBlur}
                                 />
                                 {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                             </div>
                         </form>
                         <hr />
+
+                        {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
+                        {currency == 'US Dollars' &&
+                        <div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
+                            <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
+                        </div>
+                        }
+
+                        {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
+                        {currency != 'US Dollars' &&
                         <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
                             <button
                                 onClick={handleSubmit}
@@ -100,10 +112,13 @@ function AddFund({payment}) {
                                 <span className="text-white">Continue</span>
                             </button>
                         </div>
+                        }
                     </div>
                 </div>
             </div>
 
+            {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
+            {currency != 'US Dollars' &&
             <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
                 <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
@@ -117,6 +132,7 @@ function AddFund({payment}) {
                     </div>
                 </div>
             </div>
+            }          
         </div>
       )
 }