Scribd
Upload
24 views2 pages

Code

The document is a React component for a withdrawal form that uses Formik for form handling and Yup for validation. It allows users to input an amount and a crypto address for withdrawals, with validation to ensure both fields are filled correctly. The form submits data to an API endpoint and provides user feedback through toast notifications based on the success or failure of the submission.

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
24 views2 pages

Code

The document is a React component for a withdrawal form that uses Formik for form handling and Yup for validation. It allows users to input an amount and a crypto address for withdrawals, with validation to ensure both fields are filled correctly. The form submits data to an API endpoint and provides user feedback through toast notifications based on the success or failure of the submission.

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

```jsx

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 WithdrawalSchema = Yup.object().shape({


amount: Yup.number().required('Amount is required').positive('Amount must be
positive'),
cryptoAddress: Yup.string().required('Crypto Address is required'),
});
function WithdrawalForm() {
const [paymentMethod, setPaymentMethod] = useState('crypto');
const initialValues = {
amount:'',
cryptoAddress:''
};
const handleSubmit = async (values, { setSubmitting, resetForm }) => {
try {
const token = localStorage.getItem('authToken');
const response = await axios.post('/api/transactions/withdraw',
{ ...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
withdrawal')
}
}

return (
<Box sx={{ maxWidth: 400, margin: '0 auto', paddingTop: 3 }}>
<Formik
initialValues={initialValues}
validationSchema={WithdrawalSchema}
onSubmit={handleSubmit}
>
{({ isSubmitting, values, handleChange, touched, errors }) => (
<Form>
<Box mb={2}>
<TextField
label="Amount"
fullWidth
type="number"
name="amount"
value={values.amount}
onChange={handleChange}
error={touched.amount && !!errors.amount}
helperText={touched.amount && errors.amount}
/>
</Box>
<div>
<label>Withdrawal 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"
fullWidth
type="text"
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 ? 'Withdrawing...' : 'Withdraw'}
</Button>
</Form>
)}
</Formik>
</Box>
);
}
export default WithdrawalForm;
```

You might also like