fix(ui): spacing and balance

bitbeckers · Oct 1, 2023 · 1e02c1a · 1e02c1a
1 parent 4c5b673
commit 1e02c1a
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 77 deletions.
diff --git a/src/components/HistoryCard.tsx b/src/components/HistoryCard.tsx
@@ -15,6 +15,13 @@ const DootBox = styled.div`
   justify-content: center;
 `;
 
+const CookieCard = styled(Card)`
+  background-color: ${({ theme }) => theme.secondary.step3};
+  padding: 3rem;
+  width: 100%;
+  margin-bottom: 3rem;
+`;
+
 /**
  * Renders a card displaying a history record, including the user's profile picture,
  * username, description, link, and the number of upvotes and downvotes.
@@ -81,56 +88,54 @@ export const HistoryCard = ({ record }: { record: Cookie }) => {
   };
 
   return (
-    <div style={{ marginBottom: "3rem", width: "70%" }}>
-      <Card>
-        {cookieGiver && (
-          <ParMd style={{ marginBottom: ".4rem" }}>
-            Giver:
-            {cookieGiver?.image && !cookieGiver.image.includes("null") && (
-              <Avatar alt={cookieGiver.ens} size="sm" src={cookieGiver.image} />
-            )}{" "}
-            {cookieGiver.ens}
-          </ParMd>
-        )}
-        {cookieMonster && (
-          <ParMd style={{ marginBottom: ".4rem" }}>
-            CookieMonster:
-            {cookieMonster?.image && !cookieMonster.image.includes("null") && (
-              <Avatar
-                alt={cookieMonster.ens}
-                size="sm"
-                src={cookieMonster.image}
-              />
-            )}{" "}
-            {cookieMonster.ens}
-          </ParMd>
-        )}
-        <ParMd style={{ marginBottom: "1rem" }}>
-          <img src={cookie} alt="cookie" height={"20px"} />{" "}
-          {reason ? reason.description : "No reason provided."}
+    <CookieCard style={{ marginBottom: "3rem" }}>
+      {cookieGiver && (
+        <ParMd style={{ marginBottom: ".4rem" }}>
+          Giver:
+          {cookieGiver?.image && !cookieGiver.image.includes("null") && (
+            <Avatar alt={cookieGiver.ens} size="sm" src={cookieGiver.image} />
+          )}{" "}
+          {cookieGiver.ens}
         </ParMd>
-
-        <DootBox style={{ fontSize: "2rem", marginTop: "1rem" }}>
-          <Button
-            onClick={() => onDoot("up")}
-            style={{ background: "none", border: "none" }}
-          >
-            👍
-            <Badge
-              badgeLabel={`${doots?.filter((d) => d.isGood).length} updoot`}
+      )}
+      {cookieMonster && (
+        <ParMd style={{ marginBottom: ".4rem" }}>
+          CookieMonster:
+          {cookieMonster?.image && !cookieMonster.image.includes("null") && (
+            <Avatar
+              alt={cookieMonster.ens}
+              size="sm"
+              src={cookieMonster.image}
             />
-          </Button>
-          <Button
-            onClick={() => onDoot("down")}
-            style={{ background: "none", border: "none" }}
-          >
-            👎
-            <Badge
-              badgeLabel={`${doots?.filter((d) => !d.isGood).length}  downdoot`}
-            />
-          </Button>
-        </DootBox>
-      </Card>
-    </div>
+          )}{" "}
+          {cookieMonster.ens}
+        </ParMd>
+      )}
+      <ParMd style={{ marginBottom: "1rem" }}>
+        <img src={cookie} alt="cookie" height={"20px"} />{" "}
+        {reason ? reason.description : "No reason provided."}
+      </ParMd>
+
+      <DootBox style={{ fontSize: "2rem", marginTop: "1rem" }}>
+        <Button
+          onClick={() => onDoot("up")}
+          style={{ background: "none", border: "none" }}
+        >
+          👍
+          <Badge
+            badgeLabel={`${doots?.filter((d) => d.isGood).length} updoot`}
+          />
+        </Button>
+        <Button
+          onClick={() => onDoot("down")}
+          style={{ background: "none", border: "none" }}
+        >
+          👎
+          <Badge
+            badgeLabel={`${doots?.filter((d) => !d.isGood).length}  downdoot`}
+          />
+        </Button>
+      </DootBox>
+    </CookieCard>
   );
 };
diff --git a/src/components/JarCard.tsx b/src/components/JarCard.tsx
@@ -21,6 +21,8 @@ import { StyledRouterLink } from "./Layout";
 import { useTargets } from "../hooks/useTargets";
 import { useCookieJar } from "../hooks/useCookieJar";
 import { CookieJar } from "../utils/indexer/db";
+import { useDHConnect } from "@daohaus/connect";
+import { useEffect, useState } from "react";
 
 export const StyledCard = styled(Card)`
   background-color: ${({ theme }) => theme.secondary.step3};
@@ -70,7 +72,23 @@ export const DataGrid = styled.div`
 
 export const JarCard = ({ record }: { record: CookieJar }) => {
   const target = useTargets();
+  const { publicClient } = useDHConnect();
   const { isMember } = useCookieJar({ cookieJarId: record.jarUid });
+  const [balance, setBalance] = useState<string>("Loading");
+
+  useEffect(() => {
+    const getBalance = async () => {
+      const _balance = await publicClient?.getBalance({
+        address: record.initializer.safeTarget as `0x${string}`,
+      });
+      if (!_balance) {
+        return;
+      }
+      setBalance(fromWei(_balance.toString()));
+    };
+
+    getBalance();
+  }, [publicClient]);
 
   return (
     <div style={{ marginBottom: "3rem" }}>
@@ -138,7 +156,7 @@ export const JarCard = ({ record }: { record: CookieJar }) => {
                   : record?.initializer?.cookieToken
               }
             />
-            <DataIndicator label="Jar Balance" data={"TODO"} />
+            <DataIndicator label="Jar Balance" data={balance} />
           </>
         </DataGrid>
 

diff --git a/src/components/LeaderBoardCard.tsx b/src/components/LeaderBoardCard.tsx
@@ -1,9 +1,17 @@
+import styled from "styled-components";
 import { AddressDisplay, Avatar, Card, ParMd } from "@daohaus/ui";
 import cookie from "../assets/cookie.png";
 import { useProfile } from "@daohaus/moloch-v3-hooks";
 import { formatEther } from "viem";
 import { useTargets } from "../hooks/useTargets";
 
+const LeaderCard = styled(Card)`
+  background-color: ${({ theme }) => theme.secondary.step3};
+  padding: 3rem;
+  width: 100%;
+  margin-bottom: 3rem;
+`;
+
 /**
  * Represents a leaderboard record.
  *
@@ -32,30 +40,28 @@ export const LeaderBoardCard = ({ record }: { record: LBRecord }) => {
   const target = useTargets();
 
   return (
-    <div style={{ marginBottom: "3rem", width: "50%" }}>
-      <Card>
-        {/* If the user has a profile image, display it along with their ENS name */}
-        {profile && (
-          <ParMd style={{ marginBottom: ".4rem" }}>
-            {profile?.image && !profile.image.includes("null") && (
-              <Avatar alt={profile.ens} size="sm" src={profile.image} />
-            )}{" "}
-            {profile.ens}
-          </ParMd>
-        )}
-        {/* Display the user's address */}
-        <AddressDisplay
-          address={record?.user}
-          truncate
-          copy
-          explorerNetworkId={target?.CHAIN_ID}
-        />
-        {/* Display the user's cookie count */}
-        <ParMd style={{ marginBottom: "1rem" }}>
-          <img src={cookie} alt="cookie" height={"20px"} />{" "}
-          {`Count: ${formatEther(record?.count)}`}
+    <LeaderCard>
+      {/* If the user has a profile image, display it along with their ENS name */}
+      {profile && (
+        <ParMd style={{ marginBottom: ".4rem" }}>
+          {profile?.image && !profile.image.includes("null") && (
+            <Avatar alt={profile.ens} size="sm" src={profile.image} />
+          )}{" "}
+          {profile.ens}
         </ParMd>
-      </Card>
-    </div>
+      )}
+      {/* Display the user's address */}
+      <AddressDisplay
+        address={record?.user}
+        truncate
+        copy
+        explorerNetworkId={target?.CHAIN_ID}
+      />
+      {/* Display the user's cookie count */}
+      <ParMd style={{ marginBottom: "1rem" }}>
+        <img src={cookie} alt="cookie" height={"20px"} />{" "}
+        {`Count: ${formatEther(record?.count)}`}
+      </ParMd>
+    </LeaderCard>
   );
 };
diff --git a/src/pages/Claim.tsx b/src/pages/Claim.tsx
@@ -17,7 +17,7 @@ import { useCookieJar } from "../hooks/useCookieJar";
 import { StyledRouterLink } from "../components/Layout";
 
 export const Claims = () => {
-  const { address, chainId, isConnected } = useDHConnect();
+  const { address, isConnected } = useDHConnect();
   const [showConfetti, setShowConfetti] = useState(false);
   const { width, height } = useWindowSize();
   const target = useTargets();
@@ -139,7 +139,7 @@ export const Claims = () => {
               unit={
                 target ? HAUS_NETWORK_DATA[target.CHAIN_ID]?.symbol || "" : ""
               }
-              claimId={cookieJar?.id}
+              claimId={cookieJar?.jarUid}
             />
             <ParMd style={{ marginBottom: ".4rem" }}>
               Go to{" "}
@@ -160,7 +160,7 @@ export const Claims = () => {
           claimAmt={data.claimAmt}
           claimPeriod={data.claimPeriod}
           unit={target ? HAUS_NETWORK_DATA[target.CHAIN_ID]?.symbol || "" : ""}
-          claimId={cookieJar?.id}
+          claimId={cookieJar?.jarUid}
         />
         <ClaimForm
           user={address}