first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,159 @@
|
||||
import React, { useState } from "react";
|
||||
import CurrencyStatics from "../Charts/CurrencyStatics";
|
||||
import SelectBox from "../Helpers/SelectBox";
|
||||
|
||||
export default function CurrencyStaticsSection() {
|
||||
const filterDatas = ["Last 15 days", "Last 7 days", "Last Month"];
|
||||
const [currencyDataLvl, setCurrencyDataLvl] = useState([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
"Jan 8",
|
||||
"Jan 9",
|
||||
"Jan 10",
|
||||
"Jan 11",
|
||||
"Jan 12",
|
||||
"Jan 13",
|
||||
"Jan 14",
|
||||
"Jan 15",
|
||||
]);
|
||||
const [datasetLtc, setDatasetLtc] = useState([
|
||||
0, 10, 12, 15, 20, 24, 45, 25, 75, 65, 70, 85, 88, 90, 100,
|
||||
]);
|
||||
const [datasetsBtc, setDatasetBtc] = useState([
|
||||
0, 15, 15, 18, 23, 30, 40, 28, 78, 68, 73, 88, 88, 90, 100,
|
||||
]);
|
||||
const [datasetsEth, setDatasetEth] = useState([
|
||||
0, 17, 18, 20, 28, 35, 48, 30, 80, 70, 78, 90, 91, 94, 98,
|
||||
]);
|
||||
const currencyStaticsHandler = (value) => {
|
||||
if (value === "Last Month") {
|
||||
setCurrencyDataLvl([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
"Jan 8",
|
||||
"Jan 9",
|
||||
"Jan 10",
|
||||
"Jan 11",
|
||||
"Jan 12",
|
||||
"Jan 13",
|
||||
"Jan 14",
|
||||
"Jan 15",
|
||||
"Jan 16",
|
||||
"Jan 17",
|
||||
"Jan 18",
|
||||
"Jan 19",
|
||||
"Jan 20",
|
||||
"Jan 21",
|
||||
"Jan 22",
|
||||
"Jan 23",
|
||||
"Jan 24",
|
||||
"Jan 25",
|
||||
"Jan 26",
|
||||
"Jan 27",
|
||||
"Jan 28",
|
||||
"Jan 29",
|
||||
"Jan 30",
|
||||
]);
|
||||
setDatasetLtc([
|
||||
0, 5, 8, 11, 12, 16, 18, 21, 28, 31, 46, 38, 35, 41, 50, 43, 65, 76, 58,
|
||||
66, 60, 71, 72, 78, 81, 86, 89, 91, 95, 99,
|
||||
]);
|
||||
setDatasetBtc([
|
||||
1, 5, 8, 11, 12, 16, 20, 21, 28, 31, 46, 38, 38, 41, 50, 45, 61, 76, 58,
|
||||
66, 60, 71, 72, 78, 81, 86, 91, 91, 95, 99,
|
||||
]);
|
||||
setDatasetEth([
|
||||
0, 5, 8, 11, 12, 20, 18, 21, 28, 25, 46, 38, 35, 41, 50, 55, 65, 70, 58,
|
||||
66, 60, 71, 72, 78, 81, 86, 89, 91, 96, 99,
|
||||
]);
|
||||
} else if (value === "Last 7 days") {
|
||||
setCurrencyDataLvl([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
]);
|
||||
setDatasetLtc([0, 10, 15, 30, 45, 75, 65]);
|
||||
setDatasetBtc([4, 15, 21, 35, 41, 91, 61]);
|
||||
setDatasetEth([5, 16, 21, 43, 51, 61, 74]);
|
||||
} else {
|
||||
setCurrencyDataLvl([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
"Jan 8",
|
||||
"Jan 9",
|
||||
"Jan 10",
|
||||
"Jan 11",
|
||||
"Jan 12",
|
||||
"Jan 13",
|
||||
"Jan 14",
|
||||
"Jan 15",
|
||||
]);
|
||||
setDatasetLtc([
|
||||
0, 10, 12, 15, 20, 24, 45, 25, 75, 65, 70, 85, 88, 90, 100,
|
||||
]);
|
||||
setDatasetBtc([
|
||||
0, 15, 15, 18, 23, 30, 40, 28, 78, 68, 73, 88, 88, 90, 100,
|
||||
]);
|
||||
setDatasetEth([
|
||||
0, 17, 18, 20, 28, 35, 48, 30, 80, 70, 78, 90, 91, 94, 98,
|
||||
]);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="currency-statics w-full mb-11">
|
||||
<div className="w-full bg-white dark:bg-dark-white rounded-2xl p-7">
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<div className="content sm:flex justify-between items-center mb-5">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Currency Statistics
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<span className="w-4 h-4 bg-purple block rounded-full"></span>
|
||||
<p className="text-sm text-thin-light-gray font-medium">LTC</p>
|
||||
</div>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<span className="w-4 h-4 bg-pink block rounded-full"></span>
|
||||
<p className="text-sm text-thin-light-gray font-medium">ETH</p>
|
||||
</div>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<span className="w-4 h-4 bg-gold block rounded-full"></span>
|
||||
<p className="text-sm text-thin-light-gray font-medium">BTC</p>
|
||||
</div>
|
||||
</div>
|
||||
<SelectBox datas={filterDatas} action={currencyStaticsHandler} />
|
||||
</div>
|
||||
<div className="currency-statics-chart">
|
||||
<CurrencyStatics
|
||||
datasetsLtc={datasetLtc}
|
||||
datasetsBtc={datasetsBtc}
|
||||
datasetsEth={datasetsEth}
|
||||
dataLabels={currencyDataLvl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import React, { useState } from "react";
|
||||
import background from "../../assets/images/shape/balance-bg.svg";
|
||||
|
||||
export default function CurrentBalanceWidget() {
|
||||
const [eth] = useState(90);
|
||||
const [btc] = useState(85);
|
||||
const [ltc] = useState(20);
|
||||
return (
|
||||
<div
|
||||
className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col justify-between px-8 py-9"
|
||||
style={{
|
||||
background: `url(${background}) 0% 0% / cover no-repeat`,
|
||||
}}
|
||||
>
|
||||
<div className="wallet flex justify-between">
|
||||
<div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
|
||||
<div>
|
||||
<p className="text-26 font-bold text-white tracking-wide text-center">
|
||||
04
|
||||
</p>
|
||||
<p className="text-lg text-white tracking-wide text-center">
|
||||
Wallets
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-26 font-bold tracking-wide text-white text-right">
|
||||
6,572.00
|
||||
</p>
|
||||
<p className="tracking-wide text-white text-lg opacity-[70%]">
|
||||
Total Transactions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="balance">
|
||||
<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">
|
||||
$94734.00
|
||||
</p>
|
||||
<p className="text-lg text-white tracking-wide">
|
||||
+324.75 <span className="text-light-green">(11.5%)</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="counters flex space-x-16">
|
||||
<div className="circle-count">
|
||||
<div>
|
||||
<div className="percent">
|
||||
<svg>
|
||||
<circle cx="37" cy="37" r="30"></circle>
|
||||
<circle
|
||||
cx="37"
|
||||
cy="37"
|
||||
r="30"
|
||||
style={{ "--percent": `${eth}` }}
|
||||
></circle>
|
||||
</svg>
|
||||
<div className="number">
|
||||
<h3>
|
||||
{eth}
|
||||
<span>%</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-18 text-white text-center">2.32 ETH</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="circle-count">
|
||||
<div>
|
||||
<div className="percent">
|
||||
<svg>
|
||||
<circle cx="37" cy="37" r="30"></circle>
|
||||
<circle
|
||||
cx="37"
|
||||
cy="37"
|
||||
r="30"
|
||||
style={{ "--percent": `${btc}` }}
|
||||
></circle>
|
||||
</svg>
|
||||
<div className="number">
|
||||
<h3>
|
||||
{btc}
|
||||
<span>%</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-18 text-white text-center">1.76 BTC</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="circle-count">
|
||||
<div>
|
||||
<div className="percent">
|
||||
<svg>
|
||||
<circle cx="37" cy="37" r="30"></circle>
|
||||
<circle
|
||||
cx="37"
|
||||
cy="37"
|
||||
r="30"
|
||||
style={{ "--percent": `${ltc}` }}
|
||||
></circle>
|
||||
</svg>
|
||||
<div className="number">
|
||||
<h3>
|
||||
{ltc}
|
||||
<span>%</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-18 text-white text-center">2.32 LTC</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React, { useState } from "react";
|
||||
import InvestmentLineChart from "../Charts/InvestmentLineChart";
|
||||
import SelectBox from "../Helpers/SelectBox";
|
||||
|
||||
export default function InvestmentSection() {
|
||||
const filterDatas = ["Last 15 days", "Last 7 days", "Last Month"];
|
||||
const [filterDataSet, setFilterDataSet] = useState([
|
||||
50, 30, 100, 20, 197, 50, 30, 100, 20, 200, 50, 30, 100, 20, 197, 50,
|
||||
]);
|
||||
const dataSetHandler = (value) => {
|
||||
if (value === "Last Month") {
|
||||
setFilterDataSet([
|
||||
50, 30, 100, 20, 197, 50, 30, 100, 20, 200, 50, 30, 100, 20, 197, 50,
|
||||
50, 30, 100, 20, 197, 50, 30, 100, 20, 200, 50, 30, 100, 20, 197, 50,
|
||||
]);
|
||||
} else if (value === "Last 7 days") {
|
||||
setFilterDataSet([154, 50, 30, 100, 20, 197, 50]);
|
||||
} else {
|
||||
setFilterDataSet([
|
||||
50, 30, 100, 20, 197, 50, 30, 100, 20, 200, 50, 30, 100, 20, 197, 50,
|
||||
]);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="investment-widget w-full h-full p-7 rounded-2xl bg-white dark:bg-dark-white flex flex-col justify-between">
|
||||
{/* heading */}
|
||||
<div className="heading mb-5 flex justify-between items-center">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">Investment</h3>
|
||||
<SelectBox datas={filterDatas} action={dataSetHandler} />
|
||||
</div>
|
||||
<div className="h-[286px]">
|
||||
<InvestmentLineChart datasets={filterDataSet} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
import React, { useState } from "react";
|
||||
import transaction1 from "../../assets/images/recent-transation-1.png";
|
||||
import transaction2 from "../../assets/images/recent-transation-2.png";
|
||||
import transaction3 from "../../assets/images/recent-transation-3.png";
|
||||
|
||||
export default function RecentTransactionWidget() {
|
||||
const transationFilterData = [
|
||||
{
|
||||
id: 1,
|
||||
name: "all",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "send",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "recent",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
];
|
||||
const [filterActive, setValue] = useState(transationFilterData[0].id);
|
||||
const filterHander = (value) => {
|
||||
setValue(value);
|
||||
};
|
||||
return (
|
||||
<div className="recent-transaction-widget w-full h-full p-7 rounded-2xl bg-white dark:bg-dark-white ">
|
||||
{/* heading */}
|
||||
<div className="heading sm:flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
Recent Transaction
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="flex space-x-5 items-center">
|
||||
{transationFilterData.map((value) => (
|
||||
<li
|
||||
onClick={() => filterHander(value.id)}
|
||||
key={value.uniqueId}
|
||||
className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase ${
|
||||
filterActive === value.id ? "border-purple text-purple" : ""
|
||||
}`}
|
||||
>
|
||||
{value.name}
|
||||
</li>
|
||||
))}
|
||||
{/* <li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
All
|
||||
</li>
|
||||
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
SEND
|
||||
</li>
|
||||
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
recent
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* content */}
|
||||
|
||||
{filterActive === 2 ? (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction3} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Buy Nft art from LTC
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-924.54
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : filterActive === 3 ? (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction3} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Buy Nft art from LTC
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-924.54
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
import React from "react";
|
||||
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 Layout from "../Partials/Layout";
|
||||
import CurrencyStaticsSection from "./CurrencyStaticsSection";
|
||||
import CurrentBalanceWidget from "./CurrentBalanceWidget";
|
||||
import InvestmentSection from "./InvestmentSection";
|
||||
import RecentTransactionWidget from "./RecentTransactionWidget";
|
||||
|
||||
export default function MyWallet() {
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<div className="my-wallet-wrapper w-full mb-10">
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
|
||||
<div className="lg:w-1/2 h-full mb-10 lg:mb-0">
|
||||
<CurrentBalanceWidget />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="my-wallets w-full h-full bg-white dark:bg-dark-white rounded-lg p-6">
|
||||
<div className="mb-4">
|
||||
<h1 className="text-xl font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
My Wallet
|
||||
</h1>
|
||||
</div>
|
||||
<div className="content-area">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<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="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
MetaMask
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div>
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">
|
||||
$734.79
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
New Add
|
||||
<span className="text-light-green ml-1">
|
||||
+324.75
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="dark:text-thin-light-gray text-[#374557]">
|
||||
<svg
|
||||
width="6"
|
||||
height="26"
|
||||
viewBox="0 0 6 26"
|
||||
fill="none"
|
||||
className="fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="3" cy="3" r="3" fillOpacity="0.6" />
|
||||
<circle
|
||||
cx="3"
|
||||
cy="12.75"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="3"
|
||||
cy="22.5"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<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={bank2} alt="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div>
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">
|
||||
$734.79
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
New Add
|
||||
<span className="text-light-green ml-1">
|
||||
+324.75
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="dark:text-thin-light-gray text-[#374557]">
|
||||
<svg
|
||||
width="6"
|
||||
height="26"
|
||||
viewBox="0 0 6 26"
|
||||
fill="none"
|
||||
className="fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="3" cy="3" r="3" fillOpacity="0.6" />
|
||||
<circle
|
||||
cx="3"
|
||||
cy="12.75"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="3"
|
||||
cy="22.5"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<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={bank3} alt="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Bitski
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div>
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">
|
||||
$734.79
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
New Add
|
||||
<span className="text-light-green ml-1">
|
||||
+324.75
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="dark:text-thin-light-gray text-[#374557]">
|
||||
<svg
|
||||
width="6"
|
||||
height="26"
|
||||
viewBox="0 0 6 26"
|
||||
fill="none"
|
||||
className="fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="3" cy="3" r="3" fillOpacity="0.6" />
|
||||
<circle
|
||||
cx="3"
|
||||
cy="12.75"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="3"
|
||||
cy="22.5"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<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={bank4} alt="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
WalletConnect
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-5 items-center">
|
||||
<div>
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">
|
||||
$734.79
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
New Add
|
||||
<span className="text-light-green ml-1">
|
||||
+324.75
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="dark:text-thin-light-gray text-[#374557]">
|
||||
<svg
|
||||
width="6"
|
||||
height="26"
|
||||
viewBox="0 0 6 26"
|
||||
fill="none"
|
||||
className="fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="3" cy="3" r="3" fillOpacity="0.6" />
|
||||
<circle
|
||||
cx="3"
|
||||
cy="12.75"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="3"
|
||||
cy="22.5"
|
||||
r="3"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CurrencyStaticsSection />
|
||||
{/* flex space-x-11 */}
|
||||
<div className="recent-and-investment grid lg:grid-cols-2 grid-cols-1 2xl:gap-[40px] xl:gap-7 gap-4 lg:h-[416px] w-full justify-between">
|
||||
<div className=" h-full">
|
||||
<RecentTransactionWidget />
|
||||
</div>
|
||||
<div className=" h-full">
|
||||
<InvestmentSection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user