Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 86d876b013 | |||
| f804e13b56 | |||
| 5e248bc108 | |||
| 26647b088f | |||
| ae8ada33f4 | |||
| c31dab92e7 | |||
| c16764269e | |||
| afe6a1afcb | |||
| e98929627f | |||
| 3919a2bc4b | |||
| 93e89f996c | |||
| 7990959e9f |
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#4687ba" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#4687ba" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
|
||||
|
After Width: | Height: | Size: 566 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" id="Coin"><path d="M8.452 281.052a7.487 7.487 0 0 0-7.483 7.482 7.485 7.485 0 0 0 7.483 7.48 7.484 7.484 0 0 0 7.48-7.48 7.486 7.486 0 0 0-7.48-7.482zm0 1.232a6.253 6.253 0 0 1 6.248 6.25 6.25 6.25 0 0 1-6.248 6.248c-3.449 0-6.25-2.8-6.25-6.248a6.254 6.254 0 0 1 6.25-6.25zm0 .53a5.717 5.717 0 0 0-5.721 5.72 5.715 5.715 0 0 0 5.72 5.719 5.713 5.713 0 0 0 5.72-5.719 5.715 5.715 0 0 0-5.72-5.72zm-.004 2.011a.265.265 0 0 1 .267.268v.596H9.74a.265.265 0 1 1 0 .529H8.715v2.05h.17c.856 0 1.551.697 1.551 1.555s-.696 1.555-1.549 1.555h-.172v.596a.265.265 0 1 1-.529 0v-.596H7.161a.265.265 0 1 1 0-.53h1.025v-2.05h-.172a1.552 1.552 0 0 1-1.547-1.555c0-.858.694-1.554 1.547-1.554h.172v-.596a.265.265 0 0 1 .262-.268zm-.434 1.393a1.01 1.01 0 0 0-1.018 1.025 1.01 1.01 0 0 0 1.018 1.026h.172v-2.051zm.701 2.58v2.05h.172c.57 0 1.02-.448 1.02-1.025s-.449-1.025-1.022-1.025z" color="#000" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -280.067)" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" fill="#4687ba" class="color000000 svgShape"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import usersService from "../../services/UsersService";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
import { Form, Formik } from "formik";
|
||||
import { useSelector } from "react-redux";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
@@ -60,24 +60,28 @@ function AddFundDollars(props) {
|
||||
|
||||
let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
|
||||
const [loader, setLoader] = useState(false);
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
let { firstname, lastname } = userDetails;
|
||||
let [prevCardDetails, setPrevCardDetails] = useState({}); // STATE TO HOLD PREVIOUS CARD SELECTED
|
||||
let [payListCards, setPayListCards] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
|
||||
// const [payListCard, setPayListCard] = useState({ data: "" }); //USER PAYLIST
|
||||
|
||||
let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value } = event.target;
|
||||
setPrevCardDetails((prevState) => ({
|
||||
...prevState,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
let [payListCard, setPayListCard] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfFirstItem = 0;
|
||||
const indexOfLastItem =
|
||||
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentPreviousCards = payListCard?.data?.slice(
|
||||
indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentPreviousCards = payListCards?.data?.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem
|
||||
);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
// FUNCTION TO SUBMIT
|
||||
const handleSubmit = (values, helpers) => {
|
||||
props.setInputError("");
|
||||
@@ -95,10 +99,17 @@ function AddFundDollars(props) {
|
||||
}, 5000);
|
||||
}
|
||||
if (tab == "previous") {
|
||||
if (!prevCardDetails) {
|
||||
// return setTimeout(() => {
|
||||
// props.setInputError("");
|
||||
// }, 5000);
|
||||
return;
|
||||
}
|
||||
setLoader(true);
|
||||
const stateData = {
|
||||
amount: Number(props.input),
|
||||
currency: props.currency,
|
||||
card: prevCardDetails["payment-card"],
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -111,7 +122,7 @@ function AddFundDollars(props) {
|
||||
const stateData = {
|
||||
amount: Number(props.input),
|
||||
currency: props.currency,
|
||||
...values,
|
||||
values,
|
||||
};
|
||||
// navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
|
||||
}
|
||||
@@ -121,11 +132,11 @@ function AddFundDollars(props) {
|
||||
apiCall
|
||||
.payListCard()
|
||||
.then((res) => {
|
||||
setPayListCard({ loading: false, data: res.data.result_list });
|
||||
setPayListCards({ loading: false, data: res.data.result_list });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("PAYCARDLIST ERROR", err);
|
||||
setPayListCard({ loading: false, data: [] });
|
||||
setPayListCards({ loading: false, data: [] });
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -133,63 +144,77 @@ function AddFundDollars(props) {
|
||||
<>
|
||||
<div className="w-full">
|
||||
{/* switch button */}
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
onClick={() => setTab("previous")}
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="previous"
|
||||
name="card-option"
|
||||
checked={tab === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Previous Cards
|
||||
</label>
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
checked={tab === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Add New Card
|
||||
</label>
|
||||
<div className="flex">
|
||||
<form className="add-fund-info flex items-center gap-3">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{props.currency == "US Dollars" && "Payment Method"}
|
||||
</h1>
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
onClick={() => setTab("previous")}
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="previous"
|
||||
name="card-option"
|
||||
checked={tab === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Previous Cards
|
||||
</label>
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
checked={tab === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Add New Card
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<hr />
|
||||
{/* END OF switch button */}
|
||||
|
||||
{/* previous tab */}
|
||||
{tab == "previous" ? (
|
||||
<div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center">
|
||||
{payListCard.loading ? (
|
||||
<div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
|
||||
{payListCards.loading ? (
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
) : payListCard?.data?.length ? (
|
||||
<select className="my-3 w-full rounded-full p-4 outline-none border-none">
|
||||
) : payListCards?.data?.length ? (
|
||||
<select
|
||||
className="my-3 w-full rounded-full p-4 outline-none border-none text-base text-black dark:text-gray-100 bg-[#dce2e6] dark:bg-[#5e6278] border"
|
||||
value={prevCardDetails["payment-card"]?.card_uid}
|
||||
id="payment-card"
|
||||
name="payment-card"
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">Select a card</option>
|
||||
{currentPreviousCards.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className={index != 0 && "border-t-2"}
|
||||
value={item}
|
||||
value={JSON.stringify(item)}
|
||||
>
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
{/* <input
|
||||
type="radio"
|
||||
className="w-8 h-8"
|
||||
name="card"
|
||||
value="value"
|
||||
/> */}
|
||||
type="radio"
|
||||
className="w-8 h-8"
|
||||
name="card"
|
||||
value="value"
|
||||
/> */}
|
||||
<div className="card-details">
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{item.description} Card
|
||||
@@ -198,24 +223,24 @@ function AddFundDollars(props) {
|
||||
Bank **************{item.digits}
|
||||
</p>
|
||||
{/* <div className="w-full sm:flex items-center gap-5">
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{item.added}
|
||||
</p>
|
||||
<p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
|
||||
Verified
|
||||
</p>
|
||||
</div> */}
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{item.added}
|
||||
</p>
|
||||
<p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
|
||||
Verified
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <td>
|
||||
<button
|
||||
// onClick={handleSubmit}
|
||||
type="button"
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
<span className="text-white">Manage</span>
|
||||
</button>
|
||||
</td> */}
|
||||
<button
|
||||
// onClick={handleSubmit}
|
||||
type="button"
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
<span className="text-white">Manage</span>
|
||||
</button>
|
||||
</td> */}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
@@ -233,26 +258,9 @@ function AddFundDollars(props) {
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* PAGINATION BUTTON */}
|
||||
{/* <div className="w-full">
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
payListCard?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={payListCard?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
</div> */}
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
) : (
|
||||
<div className="new-details w-full max-h-[19.063rem] overflow-y-scroll">
|
||||
<div className="new-details w-full max-h-[23rem] overflow-y-scroll">
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
@@ -267,6 +275,12 @@ function AddFundDollars(props) {
|
||||
<div className="fields w-full">
|
||||
{/* inputs starts here */}
|
||||
{/* Name */}
|
||||
<div className="flex items-center field w-full my-6 gap-3">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
Name:
|
||||
</label>
|
||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||
</div>
|
||||
<div className="field w-full my-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
|
||||
@@ -20,7 +20,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
|
||||
//FUNCTION TO HANDLE SUBMIT
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
setInputError("");
|
||||
if (!input || input == "0") {
|
||||
setInputError("Please Enter Amount");
|
||||
@@ -36,7 +36,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
if(input) return;
|
||||
if (input) return;
|
||||
// setTimeout(
|
||||
// () =>
|
||||
// setConfirmCredit({
|
||||
@@ -53,38 +53,34 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-[36rem] w-full">
|
||||
<div className="h-[33rem] w-full">
|
||||
<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="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
{/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
|
||||
{/*<hr />*/}
|
||||
<form className="md:p-8 p-4 add-fund-info">
|
||||
<div className="field w-full">
|
||||
<form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"}
|
||||
</h1>
|
||||
<div className="field w-full max-w-[250px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={
|
||||
currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
|
||||
}
|
||||
type="text"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={input}
|
||||
inputHandler={handleChange}
|
||||
/>
|
||||
{inputError && (
|
||||
<p className="text-base text-red-500">{inputError}</p>
|
||||
)}
|
||||
<p className="text-base text-red-500 h-5">
|
||||
{inputError && inputError}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
<h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
|
||||
{currency == "US Dollars" && "Payment Method"}
|
||||
</h1>
|
||||
<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">
|
||||
<div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
|
||||
<AddFundDollars
|
||||
setInputError={setInputError}
|
||||
input={input}
|
||||
|
||||
@@ -96,30 +96,39 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
console.log("data on confirm", confirmCredit);
|
||||
let __confirmCard = JSON.parse(confirmCredit?.data.card);
|
||||
const ThePaymentText = ({ value }) => (
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details flex items-center gap-3">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{value.description} Card
|
||||
</h1>
|
||||
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Bank **************{value.digits}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full h-[36rem]">
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
{/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
Confirm Add Fund To Account
|
||||
</h2>
|
||||
<hr /> */}
|
||||
<div className="px-4 md:px-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px] flex items-center">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
{confirmCredit?.show ? (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<label
|
||||
htmlFor="amount"
|
||||
className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
|
||||
>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{confirmCredit?.data?.currency == "naira"
|
||||
? "Amount (Naira):"
|
||||
: "Amount (Dollars):"}
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{`${walletItem?.symbol} ${
|
||||
Number(confirmCredit?.data?.amount).toLocaleString() ||
|
||||
""
|
||||
@@ -127,14 +136,17 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
|
||||
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||
>
|
||||
{confirmCredit?.data?.currency && "Payment Method"}
|
||||
{confirmCredit?.data?.currency && "Payment Method:"}
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
|
||||
Coming Soon...
|
||||
<span className="text-[#181c32] dark:text-white ">
|
||||
{__confirmCard && (
|
||||
<ThePaymentText value={__confirmCard} />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -158,10 +170,10 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
{confirmCredit?.data?.currency && "Payment Method"}
|
||||
</h1> */}
|
||||
{/* <hr /> */}
|
||||
<div className="min-h-[350px]"></div>
|
||||
<div className="min-h-[220px]"></div>
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
||||
<button
|
||||
className="px-2 h-11 flex justify-center items-center border-gradient text-base rounded-full"
|
||||
className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
|
||||
@@ -47,7 +47,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
console.log("prop drills >> ", confirmCredit);
|
||||
console.log("prop drills >> ", state);
|
||||
|
||||
return (
|
||||
<ModalCom
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
import bank3 from "../../assets/images/bank-3.png";
|
||||
import bank4 from "../../assets/images/bank-4.png";
|
||||
// import bank1 from "../../assets/images/bank-1.png";
|
||||
// import bank2 from "../../assets/images/bank-2.png";
|
||||
// import bank3 from "../../assets/images/bank-3.png";
|
||||
// import bank4 from "../../assets/images/bank-4.png";
|
||||
import Accordion from "../Helpers/Accordion";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
|
||||
export default function WalletHeader(props) {
|
||||
// debugger;
|
||||
@@ -41,30 +42,35 @@ export default function WalletHeader(props) {
|
||||
<ul>
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.result_list?.length > 0 &&
|
||||
props.myWalletList.result_list.map((value, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
>
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={bank1} alt="" />
|
||||
props.myWalletList.result_list.map((value, index) =>
|
||||
{
|
||||
let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
|
||||
return(
|
||||
<li
|
||||
key={index}
|
||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
>
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={localImgLoad(`images/currency/${image}`)} alt="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium">
|
||||
{value.description}
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
)}
|
||||
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
|
||||
Reference in New Issue
Block a user