Skip to content

Commit

Permalink
fix: add useMemo hook to components/wallet/UserAssets.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@heyJonBray
heyJonBray committed Sep 12, 2024
1 parent ca578cd commit 9622b15
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 85 deletions.
22 changes: 7 additions & 15 deletions src/components/BookmarkAdded.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import {Image} from "@chakra-ui/react";
const explorerUrls = {
0: "https://sepolia.basescan.org/tx/",
1: "https://etherscan.io/tx/",
56: "https://bscscan.com/tx/",
137: "https://polygonscan.com/tx/",
84532: "https://sepolia.basescan.org/tx/",
};
import Image from 'next/image';

function BookmarkAdded({message, status, chainId, txHash}) {
const BookmarkAdded = ({ message, status, chainId, txHash }) => {
const explorerUrl = explorerUrls[chainId]
? `${explorerUrls[chainId]}${txHash}`
: null;
Expand All @@ -16,14 +9,13 @@ function BookmarkAdded({message, status, chainId, txHash}) {
<div className="bg-black text-grey flex flex-col justify-center items-center">
<p className="text-lg mb-4 text-center">{status}</p>
<Image
src={status === "success" ? "/success.webp" : "/fail.webp"}
src={status === 'success' ? '/success.webp' : '/fail.webp'}
alt="transaction status"
className=""
width={100} // adjust as per requirement
height={100} // adjust as per requirement
/>

<h3 className="text-2xl mt-4 text-center">{message}</h3>

{status === "success" && explorerUrl && (
{status === 'success' && explorerUrl && (
<a
href={explorerUrl}
target="_blank"
Expand All @@ -35,6 +27,6 @@ function BookmarkAdded({message, status, chainId, txHash}) {
)}
</div>
);
}
};

export default BookmarkAdded;
153 changes: 83 additions & 70 deletions src/components/wallet/UserAssets.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,94 @@
'use client';
import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { useState } from 'react';
import { useState, useMemo } from 'react';
import { FaEthereum } from 'react-icons/fa';
import AssetsValues from './AssetsValues';

function UserAssets() {
// Keep track of the switch state
const [isSwitched, setIsSwitched] = useState(false);

// Switch handler
const switchHandler = () => {
setIsSwitched(!isSwitched);
};

// Memoized values for deposit and withdraw sections
const depositSection = useMemo(
() => (
<motion.div
className="w-full"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
>
<div className="text-grey text-3xl md:text-5xl lg:text-7xl">
Deposit Tokens
</div>
<div className="text-grey mt-5 md:w-[100%]">
<input
type="text"
placeholder="Paste Address"
className="border-[1px] bg-[#71637f4d] rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<input
type="text"
placeholder="Amount..."
className="border-[1px] bg-[#71637f4d] mt-5 rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<div className="text-grey bg-[#71637f4d] rounded p-1 mt-5 flex justify-between md:w-[100%]">
<p className="w-full text-lime">Deposited:</p>
<p className="w-full text-floral">Withdrawn:</p>
</div>
<div className="flex w-full">
<button className="text-white bg-floral mx-auto mt-5 px-8 p-2 rounded-full border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-lime">
Deposit
</button>
</div>
</div>
</motion.div>
),
[]
);

const withdrawSection = useMemo(
() => (
<motion.div
className="w-full"
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 50 }}
>
<div className="text-grey text-3xl md:text-5xl lg:text-7xl mt-5">
Withdraw Tokens
</div>
<div className="text-grey mt-5 md:w-[100%]">
<input
type="text"
placeholder="Paste Address"
className="border-[1px] bg-[#71637f4d] rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<input
type="text"
placeholder="Amount..."
className="border-[1px] bg-[#71637f4d] mt-5 rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<div className="text-grey bg-[#71637f4d] rounded p-1 mt-5 flex justify-between md:w-[100%]">
<p className="w-full text-lime">Deposited:</p>
<p className="w-full text-floral">Withdrawn:</p>
</div>
<div className="flex w-full">
<button className="text-white bg-floral mx-auto mt-5 px-8 p-2 rounded-full border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-lime">
Withdraw
</button>
</div>
</div>
</motion.div>
),
[]
);

return (
<div className="flex flex-col gap-6 md:gap-12 lg:gap-12 lg:pb-20 relative md:flex-row justify-between items-center px-8 pt-8 max-w-screen-2xl mx-auto">
<div className="border-2 rounded-xl border-grey w-full p-4 hover:border-animate">
Expand All @@ -26,78 +103,14 @@ function UserAssets() {
</FormLabel>
</FormControl>

{isSwitched ? (
<motion.div
className="w-full"
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 50 }}
>
<div className="text-grey text-3xl md:text-5xl lg:text-7xl mt-5">
Withdraw Tokens
</div>
<div className="text-grey mt-5 md:w-[100%]">
<input
type="text"
placeholder="Paste Address"
className="border-[1px] bg-[#71637f4d] rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<input
type="text"
placeholder="Amount..."
className="border-[1px] bg-[#71637f4d] mt-5 rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<div className="text-grey bg-[#71637f4d] rounded p-1 mt-5 flex justify-between md:w-[100%]">
<p className="w-full text-lime">Deposited:</p>
<p className="w-full text-floral">Withdrawn:</p>
</div>
<div className="flex w-full">
<button className="text-white bg-floral mx-auto mt-5 px-8 p-2 rounded-full border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-lime">
Withdraw
</button>
</div>
</div>
</motion.div>
) : (
<motion.div
className="w-full"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
>
<div className="text-grey text-3xl md:text-5xl lg:text-7xl">
Deposit Tokens
</div>
<div className="text-grey mt-5 md:w-[100%]">
<input
type="text"
placeholder="Paste Address"
className="border-[1px] bg-[#71637f4d] rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<input
type="text"
placeholder="Amount..."
className="border-[1px] bg-[#71637f4d] mt-5 rounded-xl border-grey p-2 focus:outline-lime w-full"
/>
<div className="text-grey bg-[#71637f4d] rounded p-1 mt-5 flex justify-between md:w-[100%]">
<p className="w-full text-lime">Deposited:</p>
<p className="w-full text-floral">Withdrawn:</p>
</div>
<div className="flex w-full">
<button className="text-white bg-[#71637f4d] mx-auto mt-5 px-8 p-2 rounded-full border-t-none border-b-[1px] border-r-[1px] border-l-[1px] border-button-gradient hover:bg-purple hover:border-lime">
Deposit
</button>
</div>
</div>
</motion.div>
)}
{/* Conditionally render deposit or withdraw section */}
{isSwitched ? withdrawSection : depositSection}
</div>

<div className="w-full border-2 rounded-xl border-grey lg:py-9 p-4 flex gap-2 hover:border-animate">
<div className="w-full">
<div className="w-full flex justify-between gap-5">
{' '}
<div className="flex justify-between w-full mb-5">
{' '}
<p className="text-lime text-3xl">Net Worth</p>
<p className="text-grey text-3xl">$0.00</p>
</div>
Expand All @@ -110,8 +123,8 @@ function UserAssets() {
<div className="flex gap-4">
<div className="w-full">
<AssetsValues label="Deposits" value="0.00" />
<AssetsValues label="Dividents" value="0.00" />
<AssetsValues label="Commision" value="0.00" />
<AssetsValues label="Dividends" value="0.00" />
<AssetsValues label="Commission" value="0.00" />
<AssetsValues label="Xeon" value="0.00" />
</div>
<div className="w-full ">
Expand Down

0 comments on commit 9622b15

Please sign in to comment.