From 85676cdb58b9b0ec7a3f81e26a79969b8657dd3c Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Fri, 21 Apr 2023 17:28:40 +0100 Subject: [PATCH] wallet page implementation --- src/Routers.jsx | 2 +- src/components/MyWallet/AddFund.jsx | 83 ++++++++++++ src/components/MyWallet/Balance.jsx | 120 +++++++++++++++++ src/components/MyWallet/TransferFund.jsx | 141 ++++++++++++++++++++ src/components/MyWallet/Wallet.jsx | 35 +++++ src/components/Referral/ReferralDisplay.jsx | 4 +- src/views/MyWalletPage.jsx | 5 +- 7 files changed, 385 insertions(+), 5 deletions(-) create mode 100644 src/components/MyWallet/AddFund.jsx create mode 100644 src/components/MyWallet/Balance.jsx create mode 100644 src/components/MyWallet/TransferFund.jsx create mode 100644 src/components/MyWallet/Wallet.jsx diff --git a/src/Routers.jsx b/src/Routers.jsx index af7da6e..a19959c 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -63,7 +63,7 @@ export default function Routers() { } /> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx new file mode 100644 index 0000000..c50dda1 --- /dev/null +++ b/src/components/MyWallet/AddFund.jsx @@ -0,0 +1,83 @@ +import React, {useState} from 'react' + +function AddFund() { + + //STATE FOR CONTROLLED INPUTS + let [inputs, setInputs] = useState('0') + + // FUNCTION TO HANDLE INPUT CHANGE + const handleChange = ({target:{name, value}}) => { + setInputs(value) + } + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = (e) => { + e.preventDefault(); + + //valid inputs before submitting. Just for texting remove later + + setInputs('') + } + return ( +
+
+
+

Add Credit with Account Deposit

+
+
+
+ + +
+
+
+
+ +
+
+
+

Add Credit with Account Deposit

+
+

Transfer fund to WrenchBoard GTB Account 0250869867

+

+ Make sure you add your account username in the notes part of the transfer for prompt processing. When the transfer is complete notify here Contact us +

+
+
+ +
+
+

Recent Activity

+

Activity Report

+ + + + + + + + + + + + + + + + + +
DateRecipientAmount/FeeConf/Status
ItemItemItemItem
+
+
+
+ ) +} + +export default AddFund \ No newline at end of file diff --git a/src/components/MyWallet/Balance.jsx b/src/components/MyWallet/Balance.jsx new file mode 100644 index 0000000..46e6965 --- /dev/null +++ b/src/components/MyWallet/Balance.jsx @@ -0,0 +1,120 @@ +import React, {useState} from 'react' +import { Link } from 'react-router-dom' + +function Balance() { + return ( +
+
+
+
+
+

Wallet

+

Add New Wallet

+
+ {/* wallet balance */} +
+
+
+

Currency

+ Naira +

Naira

+
+
+

balance

+ ₦0.00 +
+
+

Escrow

+ ₦0.00 +
+
+ +
+ Transfer + Top Up +
+
+ {/* end of wallet balance */} +
+
+ +
+
+

Recent Activity

+

Activity Report

+ + + + + + + + + + + + + + + + + +
DateRecipientAmount/FeeConf/Status
ItemItemItemItem
+
+
+
+ +
+
+
+

Purchases

+ + + + + + + + + + + + + + + + + +
DateDescriptionAmountFee
ItemItemItemItem
+
+
+ +
+
+

Coupons

+ + + + + + + + + + + + + + + + + +
DateDescriptionAmountActive
ItemItemItemItem
+
+
+
+
+ ) +} + +export default Balance \ No newline at end of file diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/TransferFund.jsx new file mode 100644 index 0000000..a754224 --- /dev/null +++ b/src/components/MyWallet/TransferFund.jsx @@ -0,0 +1,141 @@ +import React, {useState} from 'react' +import { Link } from 'react-router-dom' + +function TransferFund() { + + //STATE FOR CONTROLLED INPUTS + let [inputs, setInputs] = useState({ + amount: '0', + fee: '0', + recipient: '', + total: '0', + comment: '' + }) + + // FUNCTION TO HANDLE INPUT CHANGE + const handleChange = ({target:{name, value}}) => { + setInputs(prev => ({...prev, [name]:value})) + } + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = (e) => { + e.preventDefault(); + + //valid inputs before submitting. Just for texting remove later + + setInputs({ + amount: '0', + fee: '0', + recipient: '', + total: '0', + comment: '' + }) + } + return ( +
+
+
+
+

Withdraw from Naira Wallet : ₦0.00

+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+
+ + Add New +
+ +
+
+ +
+
+ + +
+
+ +
+ +
+
+
+
+ +
+
+

Recent Activity

+

Activity Report

+ + + + + + + + + + + + + + + +
DateRecipientAmount/FeeConf/Status
ItemItemItem
+
+
+
+ ) +} + +export default TransferFund \ No newline at end of file diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx new file mode 100644 index 0000000..71c0680 --- /dev/null +++ b/src/components/MyWallet/Wallet.jsx @@ -0,0 +1,35 @@ +import React from 'react' +import {Routes, Route, Outlet, Navigate} from 'react-router-dom' + +import Layout from '../Partials/Layout' + +import Balance from './Balance' +import TransferFund from './TransferFund' +import AddFund from './AddFund' + +function Wallet() { + return ( + + + + ) +} + + + + + +const WalletRoutes = () => { + return ( + + }> + } /> + } /> + } /> + } /> + + + ) +} + +export default WalletRoutes \ No newline at end of file diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx index 2166391..033b4f7 100644 --- a/src/components/Referral/ReferralDisplay.jsx +++ b/src/components/Referral/ReferralDisplay.jsx @@ -34,7 +34,7 @@ function ReferralDisplay() {
-

Send Referral

+

Send Referral

@@ -81,7 +81,7 @@ function ReferralDisplay() {
-

Referral List

+

Referral List

diff --git a/src/views/MyWalletPage.jsx b/src/views/MyWalletPage.jsx index d48ef74..284e93d 100644 --- a/src/views/MyWalletPage.jsx +++ b/src/views/MyWalletPage.jsx @@ -1,10 +1,11 @@ import React from "react"; -import MyWallet from "../components/MyWallet"; +// import MyWallet from "../components/MyWallet"; +import WalletRoutes from "../components/MyWallet/Wallet"; export default function MyWalletPage() { return ( <> - + ); } -- 2.34.1