Scribd
Upload
11 views2 pages

Code

The document contains a React component for a deposit form that uses Formik for form handling and Yup for validation. It allows users to input an amount and a cryptocurrency address, with the option to select a payment method (currently only crypto is available). Upon submission, it sends a POST request to an API endpoint and displays success or error messages based on the response.

Uploaded by

emefenam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views2 pages

Code

The document contains a React component for a deposit form that uses Formik for form handling and Yup for validation. It allows users to input an amount and a cryptocurrency address, with the option to select a payment method (currently only crypto is available). Upon submission, it sends a POST request to an API endpoint and displays success or error messages based on the response.

Uploaded by

emefenam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useState } from 'react';

import axios from 'axios';


import { toast } from 'react-toastify';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { Button, TextField, Box } from '@mui/material';
const DepositSchema = Yup.object().shape({
amount: Yup.number().required('Amount is required').positive('Amount must be
positive'),
cryptoAddress: Yup.string().required('Crypto Address is required'),
});

function DepositForm() {
const [paymentMethod, setPaymentMethod] = useState('crypto'); // Default method

const initialValues = {
amount:'',
cryptoAddress:''
}
const handleSubmit = async (values, {setSubmitting, resetForm}) => {
try {
const token = localStorage.getItem('authToken'); // Fetch your Auth
Token

const response = await axios.post('/api/transactions/deposit',


{ ...values, paymentMethod },
{ headers: { Authorization: `Bearer ${token}` } }
);
setSubmitting(false);
resetForm();
toast.success(response.data.message)
} catch (e) {
setSubmitting(false);
toast.error(e.response?.data?.message || 'Failed to initiate deposit')
}
}

return (
<Box sx={{ maxWidth: 400, margin: '0 auto', paddingTop: 3 }}>
<Formik
initialValues={initialValues}
validationSchema={DepositSchema}
onSubmit={handleSubmit}
>
{({ isSubmitting, values, handleChange, touched, errors }) => (
<Form>
<Box mb={2}>
<TextField
label="Amount"
type="number"
fullWidth
name="amount"
value={values.amount}
onChange={handleChange}
error={touched.amount && !!errors.amount}
helperText={touched.amount && errors.amount}
/>
</Box>
<div>
<label>Payment Method:</label>
<select
value={paymentMethod}
onChange={(e) => setPaymentMethod(e.target.value)}>
<option value="crypto">Crypto</option>
<option disabled value="fiat">Fiat (Coming
soon)</option>
</select>
</div>

{paymentMethod === 'crypto' &&


<Box mb={2}>
<TextField
label="Crypto Address"
type="text"
fullWidth
name="cryptoAddress"
value={values.cryptoAddress}
onChange={handleChange}
error={touched.cryptoAddress && !!
errors.cryptoAddress}
helperText={touched.cryptoAddress &&
errors.cryptoAddress}
/>
</Box>
}
<Button type="submit"
variant="contained"
color="primary"
disabled={isSubmitting}
>
{isSubmitting ? 'Depositing...' : 'Deposit'}
</Button>
</Form>
)}
</Formik>
</Box>
)
}
export default DepositForm;

You might also like