263 lines
13 KiB
React
263 lines
13 KiB
React
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|
import WalletItemCard from "./WalletItemCard";
|
|
|
|
export default function WalletBox({ wallet, coupon, payment }) {
|
|
return (
|
|
<>
|
|
<div className="my-wallet-wrapper w-full mb-10">
|
|
<div className="main-wrapper w-full">
|
|
<div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
|
|
{wallet.loading ? (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<LoadingSpinner size="16" color="sky-blue" />
|
|
</div>
|
|
) : wallet.data.length ? (
|
|
wallet.data.map((item, index) => (
|
|
<div className="lg:w-full h-full mb-10 lg:mb-0">
|
|
<WalletItemCard walletItem={item} payment={payment} />
|
|
</div>
|
|
))
|
|
) : null}
|
|
|
|
{/*<div className="flex-1">*/}
|
|
{/* <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>
|
|
{/* 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>
|
|
</>
|
|
);
|
|
}
|