feat: deposit management modal

#62
golemfactory · May 27, 2024 · 03cef5c · 03cef5c
1 parent 2a66621
commit 03cef5c
Show file tree

Hide file tree

Showing 13 changed files with 227 additions and 208 deletions.
diff --git a/frontend/public/golem-light.svg b/frontend/public/golem-light.svg
diff --git a/frontend/src/components/approveForm.tsx b/frontend/src/components/approveForm.tsx
@@ -24,7 +24,7 @@ export const ApproveForm = () => {
           <div className="stat-title">Current</div>
           <div className="stat-value flex">
             <div className="leading-6">
-              {formatEther(user.allowanceAmount || 0n)}{" "}
+              {formatBalance(user.allowanceAmount || 0n)}{" "}
             </div>
             <GolemCoinIcon className="ml-1 " />
           </div>
@@ -34,7 +34,7 @@ export const ApproveForm = () => {
           <div className="stat-title">Minimal</div>
           <div className="stat-value flex ">
             <div className="leading-6">
-              {formatEther(config.minimalAllowance)}{" "}
+              {formatBalance(config.minimalAllowance)}{" "}
             </div>
             <GolemCoinIcon className="ml-1" />
           </div>

diff --git a/frontend/src/components/atoms/GLMAmount.tsx b/frontend/src/components/atoms/GLMAmount.tsx
@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import { GolemCoinIcon } from "./golem.coin.icon";
+
+export const GLMAmountStat = ({ amount }: { amount: ReactNode }) => {
+  return (
+    <div className="stat-value flex">
+      <div className="leading-6">{amount ? `${amount} ` : "-"}</div>
+      <GolemCoinIcon className="ml-1" />
+    </div>
+  );
+};
diff --git a/frontend/src/components/atoms/golem.coin.icon.tsx b/frontend/src/components/atoms/golem.coin.icon.tsx
@@ -1,13 +1,16 @@
-import { ComponentProps } from 'react'
+import { ComponentProps } from "react";
 
-export const GolemCoinIcon = (props: ComponentProps<'svg'>) => {
+export const GolemCoinIcon = (props: ComponentProps<"svg">) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
       viewBox="0 0 24 24"
       fill="none"
+      style={{
+        scale: "0.8",
+      }}
       {...props}
     >
       <g filter="url(#filter0_bi_1472_11883)">
@@ -62,5 +65,5 @@ export const GolemCoinIcon = (props: ComponentProps<'svg'>) => {
         </filter>
       </defs>
     </svg>
-  )
-}
+  );
+};
diff --git a/frontend/src/components/connectWallet.tsx b/frontend/src/components/connectWallet.tsx
@@ -48,59 +48,53 @@ const pathToConnectText = [
 ];
 
 export const ConnectWallet = () => {
-  const { isConnected } = useAccount();
+  const { isConnected, address } = useAccount();
   const { GLM, ETH } = useBalance();
 
   useEffect(() => {
-    try {
-      console.log("Adjusting styles");
-      console.log("GLM", GLM);
-      console.log("ETH", ETH);
-      const slot = queryShadowRootDeep(pathToAccountText) as HTMLSlotElement;
-      slot.style.fontSize = "16px";
-      slot.style.fontWeight = "400";
-      const textNode = slot.assignedNodes()[1] as Text;
-      const balanceSummary = `GLM: ${formatBalance(GLM)} / ETH: ${formatBalance(ETH)}`;
-      if (ETH && GLM) {
-        setTimeout(() => {
-          textNode.textContent = balanceSummary;
-        }, 1000);
-      }
-    } catch (e) {
-      console.log("Text not found");
-    }
-  }, [isConnected, GLM, ETH]);
+    setTimeout(() => {
+      try {
+        const slot = queryShadowRootDeep(pathToAccountText) as HTMLSlotElement;
+        slot.style.fontSize = "16px";
+        slot.style.fontWeight = "400";
+        slot.style.color = "white";
+        const textNode = slot.assignedNodes()[1] as Text;
+        const balanceSummary = `GLM: ${formatBalance(GLM)} / ETH: ${formatBalance(ETH)}`;
+        if (ETH && GLM) {
+          setTimeout(() => {
+            textNode.textContent = balanceSummary;
+          }, 1000);
+        }
+      } catch (e) {}
+    }, 1000);
+  }, [isConnected, GLM, ETH, address]);
   useEffect(() => {
     setTimeout(() => {
       try {
         const button = queryShadowRootDeep(pathToAccountButton) as HTMLElement;
-
+        button.style.color = "white";
         button.style.borderRadius = "3px";
         button.style.backgroundColor = "#181ea9";
         button.style.padding = "0.5rem 1rem";
         button.style.fontSize = "16px";
         button.style.fontWeight = "400";
-      } catch (e) {
-        console.log("Button not found");
-      }
+      } catch (e) {}
 
       try {
         const button = queryShadowRootDeep(pathToConnectButton) as HTMLElement;
+        button.style.color = "white";
+
         button.style.fontSize = "16px";
         button.style.fontWeight = "100";
         button.style.borderRadius = "3px";
         button.style.backgroundColor = "#181ea9";
-      } catch (e) {
-        console.log("Button not found");
-      }
+      } catch (e) {}
 
       try {
         const text = queryShadowRootDeep(pathToConnectText) as HTMLElement;
         text.style.fontWeight = "400";
-        console.log("Text found", text);
-      } catch (e) {
-        console.log("Text not found");
-      }
+        text.style.color = "white";
+      } catch (e) {}
     }, 0);
   }, [isConnected]);
   return (