From 9622b15f8aeaba3ab1460d6141d02ccb4b655a7d Mon Sep 17 00:00:00 2001
From: Jon <jon@xeon-protocol.io>
Date: Thu, 12 Sep 2024 01:15:44 -0400
Subject: [PATCH] fix: add useMemo hook to `components/wallet/UserAssets.js`

---
 src/components/BookmarkAdded.js     |  22 ++--
 src/components/wallet/UserAssets.js | 153 +++++++++++++++-------------
 2 files changed, 90 insertions(+), 85 deletions(-)

diff --git a/src/components/BookmarkAdded.js b/src/components/BookmarkAdded.js
index bfda0d7..993dc88 100644
--- a/src/components/BookmarkAdded.js
+++ b/src/components/BookmarkAdded.js
@@ -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;
@@ -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"
@@ -35,6 +27,6 @@ function BookmarkAdded({message, status, chainId, txHash}) {
       )}
     </div>
   );
-}
+};
 
 export default BookmarkAdded;
diff --git a/src/components/wallet/UserAssets.js b/src/components/wallet/UserAssets.js
index 00596cc..fec543c 100644
--- a/src/components/wallet/UserAssets.js
+++ b/src/components/wallet/UserAssets.js
@@ -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">
@@ -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>
@@ -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 ">