WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-07-15 16:19:29 +00:00
committed by Gogs
parent 8116665045 e4addc47d9
commit 0e9fef218f
10 changed files with 334 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFund.jsx → src/components/MyWallet/Popup/AddFund.jsx
View File
src/components/MyWallet/AddFundDollars.jsx → src/components/MyWallet/Popup/AddFundDollars.jsx
+28 -15
View File
@@ -1,13 +1,13 @@
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import usersService from "../../services/UsersService";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import { Form, Formik } from "formik";
import { useSelector } from "react-redux";
import * as Yup from "yup";
import Icons from "../Helpers/Icons";
import Icons from "../../Helpers/Icons";
const validationSchema = Yup.object().shape({
name: Yup.string()
@@ -65,7 +65,8 @@ function AddFundDollars(props) {
const { firstname, lastname } = userDetails;
const [prevCardDetails, setPrevCardDetails] = useState({});
const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
let __awaitComponent = props.confirmCredit.show.awaitConfirm;
let __acceptComponent = props.confirmCredit.show.awaitConfirm;
const handleInputChange = (event) => {
const { name, value } = event.target;
setPrevCardDetails((prevState) => ({
@@ -84,6 +85,7 @@ function AddFundDollars(props) {
const handleSubmit = async (values, helpers) => {
props.setInputError("");
if (!props.input || props.input === "0") {
props.setInputError("Please Enter Amount");
return;
@@ -98,7 +100,12 @@ function AddFundDollars(props) {
if (!prevCardDetails) {
return;
}
setLoader(true);
props.setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: true } },
}));
let stateData = {
amount: Number(props.input) * 100,
currency: props.walletItem?.code,
@@ -107,7 +114,10 @@ function AddFundDollars(props) {
try {
const res = await apiCall.getStartCredit(stateData);
if (res.data.internal_return < 0) {
setLoader(false);
props.setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: false } },
}));
props.setInputError("An Error Occurred");
setTimeout(() => props.setInputError(""), 5000);
return;
@@ -120,20 +130,21 @@ function AddFundDollars(props) {
stateData = { ...stateData, ..._response };
setTimeout(() => {
setLoader(false);
props.setConfirmCredit({
show: true,
show: {
awaitConfirm: { loader: false, state: true },
acceptConfirm: { loader: false, state: false },
},
data: stateData,
});
}, 1500);
} catch (error) {
props.setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: false } },
}));
console.log(error);
}
return setTimeout(() => {
props.setConfirmCredit({ show: true, data: stateData });
setLoader(false);
}, 1500);
}
if (tab === "new") {
@@ -142,6 +153,8 @@ function AddFundDollars(props) {
currency: props.currency,
...values,
};
// Rest of the code for tab "new"
}
};
@@ -501,7 +514,7 @@ function AddFundDollars(props) {
type="button"
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
{loader ? (
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Continue</span>
src/components/MyWallet/AddFundPop.jsx → src/components/MyWallet/Popup/AddFundPop.jsx
+35 -14
View File
@@ -1,9 +1,9 @@
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from "../../../services/UsersService";
import Icons from "../../Helpers/Icons";
import InputCom from "../../Helpers/Inputs/InputCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import AddFundDollars from "./AddFundDollars";
function AddFundPop({
@@ -11,6 +11,7 @@ function AddFundPop({
input,
setInput,
onClose,
confirmCredit,
setConfirmCredit,
walletItem,
}) {
@@ -20,7 +21,7 @@ function AddFundPop({
const { payment, currency } = _payment;
const [inputError, setInputError] = useState("");
const [loader, setLoader] = useState(false);
let __awaitComponent = confirmCredit.show.awaitConfirm;
const handleChange = ({ target: { name, value } }) => {
setInput(value);
@@ -28,17 +29,26 @@ function AddFundPop({
const handleSubmit = async () => {
setInputError("");
setLoader(true);
setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: true } },
}));
if (!input || input === "0") {
setLoader(false);
setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: false } },
}));
setInputError("Please Enter Amount");
setTimeout(() => setInputError(""), 5000);
return;
}
if (isNaN(input)) {
setLoader(false);
setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: false } },
}));
setInputError("Amount must be a Number");
setTimeout(() => setInputError(""), 5000);
return;
@@ -52,7 +62,10 @@ function AddFundPop({
try {
const res = await apiCall.getStartCredit(stateData);
if (res.data.internal_return < 0) {
setLoader(false);
setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: false } },
}));
setInputError("An Error Occurred");
setTimeout(() => setInputError(""), 5000);
return;
@@ -64,13 +77,20 @@ function AddFundPop({
stateData = { ...stateData, ..._response };
setTimeout(() => {
setLoader(false);
setConfirmCredit({
show: true,
setConfirmCredit((prev) => ({
...prev,
show: {
awaitConfirm: { loader: false, state: true },
acceptConfirm: { loader: false, state: false },
},
data: stateData,
});
}));
}, 1500);
} catch (error) {
setConfirmCredit((prev) => ({
...prev,
show: { awaitConfirm: { loader: false } },
}));
console.log(error);
}
};
@@ -108,6 +128,7 @@ function AddFundPop({
setInput={setInput}
currency={currency}
onClose={onClose}
confirmCredit={confirmCredit}
setConfirmCredit={setConfirmCredit}
/>
</div>
@@ -128,7 +149,7 @@ function AddFundPop({
type="button"
className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
>
{loader ? (
{__awaitComponent.loader ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
src/components/MyWallet/Popup/CompleteConfirmCredit.jsx
+106
View File
@@ -0,0 +1,106 @@
import React from "react";
function CompleteConfirmCredit({ onClose, confirmCredit }) {
console.log(confirmCredit);
const { data } = confirmCredit;
return (
<div className="logout-modal-body w-full flex flex-col items-center">
<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">
<div className="px-4 md:p-8 py-4 add-fund-info">
<div className="field w-full mb-3 min-h-[45px]">
<div className="flex flex-col gap-4">
{/* Success Icon for now */}
<div className="flex items-center w-full justify-center">
{data?.result == "Charge success" ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
viewBox="0 0 24 24"
fill="none"
stroke="green"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="feather feather-check-circle"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
width="100"
height="100"
stroke="red"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="feather feather-x-circle"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
)}
</div>
<div className={`flex items-center`}>
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
{data?.result == "Charge success"
? "Credit was Successful!"
: "Credit was Unsuccessful"}
</h1>
</div>
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Amount({data?.currency || ""})
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{`${data?.symbol || ""} ${
Number(data?.amount * 0.01).toLocaleString() || ""
}`}
</span>
</div>
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Wallet Balance
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{data?.curr_balance}
</span>
</div>
<div className="flex items-center gap-8">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Confirmation Number
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{data?.confirmation}
</span>
</div>
</div>
</div>
</div>
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
<button
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
onClick={onClose}
>
Ok
</button>
</div>
</div>
</div>
</div>
</div>
);
}
export default CompleteConfirmCredit;
src/components/MyWallet/ConfirmAddFund.jsx → src/components/MyWallet/Popup/ConfirmAddFund.jsx
+65 -38
View File
@@ -1,13 +1,17 @@
import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import usersService from "../../../services/UsersService";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import usersService from "../../services/UsersService";
import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
function ConfirmAddFund({
confirmCredit,
onClose,
walletItem,
setConfirmCredit,
}) {
const __confirmData = confirmCredit?.data;
const __confirmCountry = walletItem?.country;
const __confirmCardDetails = __confirmData.card
@@ -15,21 +19,26 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
: "";
let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
let [confirmLoading, setConfirmLoading] = useState(false);
let [requestStatus, setRequestStatus] = useState({
message: "",
loading: false,
status: false,
}); // STATE FOR API REQUEST
// const [ConfirmCredit, setConfirmCredit] = useState({
// show: false,
// loader: false,
// msg: "",
// data: {},
// });
const apiURL = new usersService();
const navigate = useNavigate();
//FUNCTION TO HANDLE SUBMIT
const onSuccessPayment = () => {
setRequestStatus({ message: "", loading: true, status: false });
let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
let reqData = { amount: __confirmData?.account, currency: "NGN" };
apiURL
.startTopUp(reqData)
.then((res) => {
@@ -66,7 +75,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
const config = {
public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
tx_ref: Date.now(),
amount: confirmCredit?.data?.amount,
amount: __confirmData?.amount,
currency: "NGN",
payment_options: "card,mobilemoney,ussd",
customer: {
@@ -91,24 +100,54 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
onClose: () => {},
};
// Handling Previous Card
const handlePrevCard = async () => {
setConfirmLoading(true);
let reqData = {
amount: __confirmData.amount * 100,
card_uid: __confirmCardDetails.card_uid,
credit_reference: __confirmData.credit_reference,
currency: __confirmData.currency,
const { amount, credit_reference, currency } = __confirmData;
const { card_uid } = __confirmCardDetails;
const reqData = {
amount: amount * 100,
card_uid,
credit_reference,
currency,
};
try {
setConfirmCredit((prev) => ({
...prev,
show: {
acceptConfirm: { loader: true },
},
}));
const res = await apiURL.getPaidPrevCard(reqData);
setConfirmLoading(false);
console.log(res.data);
const _response = res.data;
if (res.data.internal_return < 0) {
setConfirmCredit((prev) => ({
...prev,
show: {
acceptConfirm: { loader: false },
},
}));
return;
}
setConfirmCredit((prev) => ({
...prev,
show: {
awaitConfirm: { loader: false, state: false },
acceptConfirm: { loader: false, state: true },
},
data: _response,
}));
} catch (error) {
setConfirmLoading(false);
setConfirmCredit((prev) => ({
...prev,
show: {
acceptConfirm: { loader: false },
},
}));
console.log(error);
}
console.log("Test me");
};
const ThePaymentText = ({ value }) => (
@@ -124,15 +163,13 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
</div>
);
console.log(confirmCredit);
return (
<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">
<div className="px-4 md:p-8 py-4 add-fund-info">
<div className="field w-full mb-3 min-h-[45px]">
{confirmCredit?.show ? (
{confirmCredit?.show?.awaitConfirm?.state ? (
<div className="flex flex-col gap-4">
<div
className={`flex items-center ${
@@ -180,7 +217,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
) : null}
</div>
</div>
{/* <hr /> */}
<div
className={
__confirmCountry == "US" ? "min-h-[163px]" : "min-h-[200px]"
@@ -202,7 +239,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
: () => console.log("Test me")
}
>
Proceed
{confirmCredit?.show?.acceptConfirm?.loader ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
"Proceed"
)}
</button>
)}
{__confirmCountry == "NG" && (
@@ -214,20 +255,6 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
</div>
</div>
</div>
{/* <div className="w-full mb-10">
<div className="wallet w-full md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
<h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
Recent Activity
</h2>
<p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
{payment.loading ? (
<LoadingSpinner size="16" color="sky-blue" />
) : (
<RecentActivityTable payment={payment} />
)}
</div>
</div> */}
</div>
);
}
src/components/MyWallet/ConfirmTransfer.jsx → src/components/MyWallet/Popup/ConfirmTransfer.jsx
+2 -2
View File
@@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import InputCom from "../../Helpers/Inputs/InputCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
import usersService from "../../services/UsersService";
src/components/MyWallet/Popup/CreditPopup.jsx
+45 -43
View File
@@ -1,39 +1,20 @@
import { useState } from "react";
import { useLocation } from "react-router-dom";
import usersService from "../../../services/UsersService";
import ModalCom from "../../Helpers/ModalCom";
import AddFundPop from "../AddFundPop";
import ConfirmAddFund from "../ConfirmAddFund";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import AddFundPop from "./AddFundPop";
import CompleteConfirmCredit from "./CompleteConfirmCredit";
import ConfirmAddFund from "./ConfirmAddFund";
const CreditPopup = ({ details, onClose, situation, walletItem }) => {
const { pathname, state } = useLocation();
const [submitTask, setSubmitTask] = useState({
loading: false,
msg: "",
state: "",
});
const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
let [input, setInput] = useState("");
const [confirmCredit, setConfirmCredit] = useState({
show: false,
show: {
awaitConfirm: { loader: false, state: false },
acceptConfirm: { loader: false, state: false },
},
data: {},
});
const switchNextStep = ({ target: value }) => {
setSuggestedNextStep(value);
};
const apiCall = new usersService();
const handleParentSuggestion = (values) => {
if (suggestedNextStep == "Send Task") {
let firstName = state?.firstname;
let family_uid = state?.family_uid;
// continuePopupData({ ...details, firstName, family_uid });
}
onClose();
};
return (
<ModalCom
action={onClose}
@@ -43,7 +24,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
{!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
{confirmCredit?.show?.acceptConfirm?.loader
? "Confirming Credit..."
: confirmCredit?.show?.awaitConfirm?.state
? "Confirm Credit Add"
: confirmCredit?.show?.acceptConfirm?.state
? "Credit Add Completed"
: "Add Credit"}
</h1>
<button
type="button"
@@ -72,22 +59,37 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
</button>
</div>
<div className="logout-modal-body w-full flex flex-col items-center">
{confirmCredit.show ? (
<ConfirmAddFund
confirmCredit={confirmCredit}
walletItem={walletItem}
onClose={onClose}
/>
{confirmCredit?.show?.acceptConfirm?.loader ? (
<div className="h-[33rem] flex items-center justify-center">
<LoadingSpinner size="12" color="sky-blue" />
</div>
) : (
<AddFundPop
_payment={details}
walletItem={walletItem}
input={input}
setInput={setInput}
onClose={onClose}
confirmCredit={confirmCredit}
setConfirmCredit={setConfirmCredit}
/>
<>
{confirmCredit?.show?.awaitConfirm?.state ? (
<ConfirmAddFund
confirmCredit={confirmCredit}
setConfirmCredit={setConfirmCredit}
walletItem={walletItem}
onClose={onClose}
/>
) : confirmCredit?.show?.acceptConfirm?.state ? (
<CompleteConfirmCredit
walletItem={walletItem}
confirmCredit={confirmCredit}
onClose={onClose}
/>
) : (
<AddFundPop
_payment={details}
walletItem={walletItem}
input={input}
setInput={setInput}
onClose={onClose}
confirmCredit={confirmCredit}
setConfirmCredit={setConfirmCredit}
/>
)}
</>
)}
</div>
</div>
src/components/MyWallet/TransferFund.jsx → src/components/MyWallet/Popup/TransferFund.jsx
+6 -5
View File
@@ -1,10 +1,10 @@
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
import InputCom from "../../Helpers/Inputs/InputCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
// import RecentActivityTable
import usersService from "../../services/UsersService";
import usersService from "../../../services/UsersService";
import { Form, Formik } from "formik";
import * as Yup from "yup";
@@ -326,7 +326,8 @@ function TransferFund({ payment, wallet }) {
{payment.loading ? (
<LoadingSpinner size="16" color="sky-blue" />
) : (
<RecentActivityTable payment={payment} />
// <RecentActivityTable payment={payment} />
null
)}
</div>
</div>
src/components/MyWallet/Wallet.jsx
+5 -46
View File
@@ -11,12 +11,12 @@ import usersService from "../../services/UsersService";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
const AddFund = lazy(() => import("./AddFund"));
const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
const TransferFund = lazy(() => import("./TransferFund"));
// const AddFund = lazy(() => import("./AddFund"));
// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
// const TransferFund = lazy(() => import("./TransferFund"));
const WalletBox = lazy(() => import("./WalletBox"));
const AddRecipient = lazy(() => import("./AddRecipient"));
const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
// const AddRecipient = lazy(() => import("./AddRecipient"));
// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
function Wallet() {
return (
@@ -119,31 +119,6 @@ const WalletRoutes = () => {
</Suspense>
}
>
{/* <Route
path="add-fund"
element={
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
<AddFund payment={paymentHistory} />
</Suspense>
}
/>
<Route
path="add-fund/confirm-add-fund"
element={
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
<ConfirmAddFund payment={paymentHistory} />
</Suspense>
}
/> */}
<Route
path="transfer-fund"
element={
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
<TransferFund payment={paymentHistory} wallet={walletList} />
</Suspense>
}
/>
{/*<Route index element={<Balance wallet={walletList} />} />*/}
<Route
index
element={
@@ -152,22 +127,6 @@ const WalletRoutes = () => {
</Suspense>
}
/>
<Route
path="transfer-fund/add-recipient"
element={
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
<AddRecipient />
</Suspense>
}
/>
<Route
path="transfer-fund/confirm-transfer"
element={
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
<ConfirmTransfer payment={paymentHistory} wallet={walletList} />
</Suspense>
}
/>
<Route path="*" element={<Navigate to="/" />} />
</Route>
</Routes>
src/components/MyWallet/WalletItemCard.jsx
+42 -38
View File
@@ -16,7 +16,6 @@ export default function WalletItemCard({ walletItem, payment }) {
// Credit popup
const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
const openPopUp = (value) => {
setCreditPopup({
show: true,
@@ -41,47 +40,52 @@ export default function WalletItemCard({ walletItem, payment }) {
}}
>
{/* <div className="w-[350px]"> */}
<div className="wallet w-full flex justify-between items-start gap-3">
<div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
<img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
</div>
<div className="balance w-full mt-2 flex justify-center">
<div className="">
<p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
Current Balance
</p>
<p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
{PriceFormatter(
walletItem.amount * 0.01,
walletItem.code,
undefined,
"text-[2rem]"
)}
</p>
</div>
<div className="wallet w-full flex justify-between items-start gap-3">
<div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
<img
src={localImgLoad(`images/currency/${image}`)}
className="w-full h-full"
alt="curreny-icon"
/>
</div>
<div className="balance w-full mt-2 flex justify-center">
<div className="">
<p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
Current Balance
</p>
<p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
{PriceFormatter(
walletItem.amount * 0.01,
walletItem.code,
undefined,
"text-[2rem]"
)}
</p>
</div>
</div>
</div>
<p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
HOLDINGS :{" "}
<span className="mt-1">
{PriceFormatter(
walletItem.escrow * 0.01,
walletItem.code,
undefined,
"text-[2rem]"
)}
</span>
</p>
{/* for white underline */}
<div className="my-2 w-full h-[1px] bg-white"></div>
<p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
HOLDINGS :{" "}
<span className="mt-1">
{PriceFormatter(
walletItem.escrow * 0.01,
walletItem.code,
undefined,
"text-[2rem]"
)}
</span>
</p>
{/* for white underline */}
<div className="my-2 w-full h-[1px] bg-white"></div>
{!accountType ? (
<WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
)
:
null
}
{!accountType ? (
<WalletAction
walletItem={walletItem}
payment={payment}
openPopUp={openPopUp}
/>
) : null}
{/* </div> */}
</div>
{creditPopup.show && (