From 9fba2a04ad83f78d523fe3212f316ffb19febe21 Mon Sep 17 00:00:00 2001
From: dredshep <dredshep@gmail.com>
Date: Tue, 9 Apr 2024 16:33:05 +0100
Subject: [PATCH] Refactor ImageWithPlaceholder and WalletModal components

---
 components/app/ImageWithPlaceholder/index.tsx | 31 +++-------
 .../app/organisms/UserWallet/WalletModal.tsx  | 56 +++++++++++--------
 components/app/organisms/UserWallet/index.tsx | 13 ++---
 utils/wallet/keplrConnect.ts                  |  3 +-
 4 files changed, 47 insertions(+), 56 deletions(-)

diff --git a/components/app/ImageWithPlaceholder/index.tsx b/components/app/ImageWithPlaceholder/index.tsx
index de00e03..442ff1a 100644
--- a/components/app/ImageWithPlaceholder/index.tsx
+++ b/components/app/ImageWithPlaceholder/index.tsx
@@ -20,36 +20,21 @@ function ImageWithPlaceholder({
 }: ImageWithPlaceholderProps) {
   const [currentImageUrl, setCurrentImageUrl] = useState<string>(imageUrl);
 
-  const zIndex = length - index;
-  const marginLeft = index === 0 ? "" : "-7px";
-
   const handleError = () => {
     setCurrentImageUrl(placeholderUrl);
   };
   const defaultSize = 48;
   const pixelSize = size || defaultSize;
-  const stringifiedSizeWithPx = `${pixelSize}px`;
 
   return (
-    <div
-      style={{
-        marginLeft,
-        zIndex,
-        position: "relative",
-        width: stringifiedSizeWithPx,
-        height: stringifiedSizeWithPx,
-      }}
-      className="rounded-circle"
-    >
-      <Image
-        src={currentImageUrl}
-        alt={alt}
-        onError={handleError}
-        className="rounded-circle object-cover rounded-full"
-        height={pixelSize} // Dynamic size
-        width={pixelSize} // Dynamic size
-      />
-    </div>
+    <Image
+      src={currentImageUrl}
+      alt={alt}
+      onError={handleError}
+      className="rounded-circle object-cover rounded-full"
+      height={pixelSize} // Dynamic size
+      width={pixelSize} // Dynamic size
+    />
   );
 }
 
diff --git a/components/app/organisms/UserWallet/WalletModal.tsx b/components/app/organisms/UserWallet/WalletModal.tsx
index 47925ce..fa7fd6f 100644
--- a/components/app/organisms/UserWallet/WalletModal.tsx
+++ b/components/app/organisms/UserWallet/WalletModal.tsx
@@ -23,6 +23,8 @@ const WalletModal: React.FC = () => {
       toast.success("Address copied to clipboard!");
     });
   };
+  const truncatedAddress =
+    address === null ? "" : address.slice(0, 6) + "..." + address.slice(-4);
 
   // Placeholder function for settings modal
   const openSettingsModal = () => {
@@ -31,37 +33,43 @@ const WalletModal: React.FC = () => {
   };
 
   return (
-    <div className="bg-adamant-box-veryDark rounded-lg shadow-md p-6 absolute top-2 right-2 w-[312px] h-[calc(100vh-16px)] z-10">
-      <div className="flex items-center justify-between mb-4">
-        <PlaceholderImageFromSeed
-          seed={address || "secret1 no address"}
-          size={48}
-        />
-        <div className="flex-grow mx-3">
-          <p className="font-bold">{address || "secret1 no address"}</p>
+    <div className="bg-adamant-box-veryDark rounded-lg shadow-md absolute top-2 right-2 w-[312px] h-[calc(100vh-16px)] z-10">
+      <div className="flex items-center justify-between mb-4 p-6">
+        <div className="flex items-center">
+          <PlaceholderImageFromSeed
+            seed={address || "secret1 no address"}
+            size={48}
+          />
+          <div className="mx-3">
+            <p className="font-bold">
+              {truncatedAddress || "secret1 no address"}
+            </p>
+          </div>
+          <RiFileCopyLine
+            className="text-gray-500 p-1 w-6 h-6 rounded-full hover:bg-opacity-10 duration-150 transition-all hover:bg-white cursor-pointer text-base"
+            onClick={copyAddressToClipboard}
+          />
+          <RiSettings3Line
+            className="text-gray-500 p-1 w-6 h-6 rounded-full hover:bg-opacity-10 duration-150 transition-all hover:bg-white cursor-pointer"
+            onClick={openSettingsModal}
+          />
         </div>
-        <RiFileCopyLine
-          className="text-gray-600 cursor-pointer"
-          onClick={copyAddressToClipboard}
-        />
-        <RiSettings3Line
-          className="text-gray-600 cursor-pointer ml-2"
-          onClick={openSettingsModal}
-        />
         <RiArrowUpSLine
-          className="text-gray-600 cursor-pointer ml-2"
+          className="text-gray-500 p-1 w-7 h-7 rounded-full hover:bg-opacity-10 duration-150 transition-all hover:bg-white cursor-pointer text-xl mb-0.5"
           onClick={closeWalletModal}
         />
       </div>
-      <div className="text-center my-8">
-        <p className="text-lg font-semibold">Your Balance</p>
-        <p className="text-4xl font-bold">${balance}</p>
+      <div className="my-8 px-6">
+        <p className="text-lg font-semibold text-gray-500">Your balance</p>
+        <p className="text-4xl font-bold top-1">${balance}</p>
+      </div>
+      <div className="px-6">
+        <button className="w-full py-3 rounded-xl bg-adamant-accentBg text-black font-bold my-4 uppercase">
+          Get Tokens
+        </button>
       </div>
-      <button className="w-full py-3 rounded-lg bg-adamant-button-accent text-white font-bold my-4">
-        Get Tokens
-      </button>
       <div>
-        <p className="text-lg font-semibold mb-2">Tokens</p>
+        <p className="text-lg font-semibold mb-2 ml-6">Tokens</p>
         {tokens?.map((token, index) => (
           <div
             key={index}
diff --git a/components/app/organisms/UserWallet/index.tsx b/components/app/organisms/UserWallet/index.tsx
index e6c49a4..48a0f3b 100644
--- a/components/app/organisms/UserWallet/index.tsx
+++ b/components/app/organisms/UserWallet/index.tsx
@@ -7,6 +7,7 @@ import { useStore } from "@/store/swapStore";
 import keplrDisconnect from "@/utils/wallet/keplrDisconnect";
 import { useModalStore } from "@/store/modalStore";
 import WalletModal from "./WalletModal";
+import { useWalletStore } from "@/store/walletStore";
 
 interface UserWalletProps {
   // isConnected: boolean;
@@ -27,14 +28,10 @@ const UserWallet: React.FC<UserWalletProps> = (
 ) => {
   const { connectionRefused } = useStore();
   const { isWalletModalOpen, openWalletModal } = useModalStore();
-  const {
-    wallet: { address: userAddress, ADMTBalance, SCRTBalance },
-  } = useStore();
+  const { address, ADMTBalance, SCRTBalance } = useWalletStore();
   const truncatedAddress =
-    userAddress === null
-      ? ""
-      : userAddress.slice(0, 6) + "..." + userAddress.slice(-4);
-  const isConnected = userAddress !== null;
+    address === null ? "" : address.slice(0, 6) + "..." + address.slice(-4);
+  const isConnected = address !== null;
   useEffect(() => {
     if (!connectionRefused) {
       keplrConnect();
@@ -50,7 +47,7 @@ const UserWallet: React.FC<UserWalletProps> = (
             onClick={() => isConnected && openWalletModal()}
           >
             <div className="relative" onClick={() => keplrDisconnect()}>
-              <PlaceholderImageFromSeed seed={userAddress} size={48} />
+              <PlaceholderImageFromSeed seed={address} size={48} />
             </div>
             <div>
               <div className="hidden md:flex font-medium items-center gap-2">
diff --git a/utils/wallet/keplrConnect.ts b/utils/wallet/keplrConnect.ts
index e11d8f4..54ee9fe 100644
--- a/utils/wallet/keplrConnect.ts
+++ b/utils/wallet/keplrConnect.ts
@@ -1,4 +1,5 @@
 import { useStore } from "@/store/swapStore";
+import { useWalletStore } from "@/store/walletStore";
 
 type CustomWindow = typeof window & {
   keplr: any;
@@ -15,7 +16,7 @@ const keplrConnect = async () => {
 
       if (accounts && accounts.length > 0) {
         const { address } = accounts[0];
-        useStore.getState().connectWallet(address);
+        useWalletStore.getState().connectWallet(address);
         console.log("Connected to Keplr.");
       }
     } catch (error) {