add card styles and general layout clean up

bitbeckers · Sep 12, 2023 · dbfe990 · dbfe990
1 parent 1adb730
commit dbfe990
Show file tree

Hide file tree

Showing 7 changed files with 1,473 additions and 1,034 deletions.
diff --git a/src/components/DetailsBox.tsx b/src/components/DetailsBox.tsx
@@ -1,23 +1,26 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-import { DataIndicator } from '@daohaus/ui';
-import { formatPeriods, formatValueTo, fromWei } from '@daohaus/utils';
+import { DataIndicator } from "@daohaus/ui";
+import { formatPeriods, formatValueTo, fromWei } from "@daohaus/utils";
+import { StyledRouterLink } from "./Layout";
 
 const DetailsBox = styled.div`
   display: flex;
   flex-wrap: wrap;
-  width: 30%;
+  width: 40%;
   justify-content: space-between;
 `;
 
 export const ClaimDetails = ({
   claimAmt,
   claimPeriod,
   unit,
+  claimId
 }: {
   claimAmt: string;
   claimPeriod: string;
   unit: string;
+  claimId: string | undefined;
 }) => {
   return (
     <DetailsBox>
@@ -26,11 +29,15 @@ export const ClaimDetails = ({
         data={formatValueTo({
           value: fromWei(claimAmt),
           decimals: 2,
-          format: 'numberShort',
+          format: "numberShort",
           unit: unit,
         })}
       />
       <DataIndicator label="Claim Period" data={formatPeriods(claimPeriod)} />
+      <DataIndicator label="Balance" data={"TODO"} />
+      <StyledRouterLink to={`/history/${claimId || ""}`}>
+        View History
+      </StyledRouterLink>{" "}
     </DetailsBox>
   );
 };
diff --git a/src/components/JarCard.tsx b/src/components/JarCard.tsx
@@ -1,8 +1,22 @@
 import styled from "styled-components";
 
-import { AddressDisplay, Card, Label, ParMd } from "@daohaus/ui";
+import {
+  AddressDisplay,
+  Card,
+  DataIndicator,
+  H4,
+  Label,
+  ParMd,
+  Tag,
+  widthQuery,
+} from "@daohaus/ui";
 import cookie from "../assets/cookie.png";
-import { ZERO_ADDRESS, formatPeriods, fromWei } from "@daohaus/utils";
+import {
+  ZERO_ADDRESS,
+  formatPeriods,
+  fromWei,
+  toWholeUnits,
+} from "@daohaus/utils";
 import { StyledRouterLink } from "./Layout";
 import { BigNumber } from "ethers";
 import COOKIEJAR_CORE_ABI from "../abis/CookieJarCore.json";
@@ -12,66 +26,137 @@ import { useDHConnect } from "@daohaus/connect";
 import { useTargets } from "../hooks/useTargets";
 import { CookieJar } from "../utils/cookieJarHandlers";
 import { useCookieJar } from "../hooks/useCookieJar";
-/**
 
- */
+export const StyledCard = styled(Card)`
+  background-color: ${({ theme }) => theme.secondary.step3};
+  border: 1px solid white;
+  padding: 3rem;
+  width: 100%;
+`;
+
+export const StyledCardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: 3rem;
+
+  .right-section {
+    display: flex;
+  }
+
+  .safe-link {
+    padding: 0.9rem;
+    background-color: ${({ theme }) => theme.secondary.step5};
+    border-radius: 4px;
+  }
+`;
+
+export const TagSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.8rem;
+`;
+
+export const DataGrid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  align-content: space-between;
+  div {
+    padding: 2rem 0;
+    width: 25rem;
+
+    @media ${widthQuery.sm} {
+      min-width: 100%;
+    }
+  }
+`;
+
 export const JarCard = ({ record }: { record: CookieJar }) => {
   const target = useTargets();
   const { cookieJar, isMember } = useCookieJar({ cookieJarId: record.id });
 
   return (
     <div style={{ marginBottom: "3rem" }}>
-      <Card>
-        <img src={cookie} alt="cookie" height={"20px"} />
+      <StyledCard>
+        <StyledCardHeader>
+          <div>
+            <img src={cookie} alt="cookie" height={"20px"} />
+            <H4>{record.name}</H4>
+            <ParMd style={{ marginBottom: ".4rem" }}>
+              {record.description}
+            </ParMd>
 
-        <AddressDisplay
-          address={record.address}
-          copy
-          explorerNetworkId={target?.CHAIN_ID}
-        />
+            {/* <Label>Cookie Jar</Label>
+              <AddressDisplay
+                address={record.address}
+                truncate
+                copy
+                explorerNetworkId={target?.CHAIN_ID}
+              /> */}
+            <TagSection>
+              <Label>Treasury:</Label>
+              <AddressDisplay
+                address={record?.initializer?.safeTarget || ZERO_ADDRESS}
+                copy
+                truncate
+                explorerNetworkId={target?.CHAIN_ID}
+              />
 
-        <Label>Safe: </Label>
-        <AddressDisplay
-          address={record?.initializer?.safeTarget || ZERO_ADDRESS}
-          copy
-          explorerNetworkId={target?.CHAIN_ID}
-        />
+              <Tag tagColor="pink">{record.type}</Tag>
+
+            </TagSection>
+            <TagSection>
+              <Label>Member</Label>
+              <Tag tagColor="pink">
+                {isMember ? (
+                  <span style={{ color: "green" }}>Yes</span>
+                ) : (
+                  <span style={{ color: "red" }}>No</span>
+                )}
+              </Tag>
+            </TagSection>
+          </div>
+          <div className="right-section">...</div>
+        </StyledCardHeader>
 
-        <Label>Type: </Label>
-        <ParMd style={{ marginBottom: ".4rem" }}>{record.type}</ParMd>
-        <Label>Title: </Label>
-        <ParMd style={{ marginBottom: ".4rem" }}>{record.name}</ParMd>
-        <Label>Description: </Label>
-        <ParMd style={{ marginBottom: ".4rem" }}>{record.description}</ParMd>
+        <DataGrid>
+          <>
+            <DataIndicator
+              label="Period"
+              data={formatPeriods(
+                BigNumber.from(
+                  record?.initializer?.periodLength || "0"
+                ).toString()
+              )}
+            />
+            <DataIndicator
+              label="Amount"
+              data={toWholeUnits(
+                BigNumber.from(
+                  record?.initializer?.cookieAmount || "0"
+                ).toString(),
+                18
+              )}
+            />
+            <DataIndicator
+              label="Token"
+              data={
+                record.initializer?.cookieToken == ZERO_ADDRESS
+                  ? "Native Token"
+                  : record?.initializer?.cookieToken
+              }
+            />
+            <DataIndicator
+              label="Jar Balance"
+              data={"TODO"}
+            />
+          </>
+        </DataGrid>
 
-        <Label>Period: </Label>
-        <ParMd style={{ marginBottom: ".4rem" }}>
-          {`${formatPeriods(
-            BigNumber.from(record?.initializer?.periodLength || "0").toString()
-          )}`}
-        </ParMd>
-        <Label>Amount: </Label>
-        <ParMd style={{ marginBottom: ".4rem" }}>
-          {BigNumber.from(record?.initializer?.cookieAmount || "0").toString()}
-        </ParMd>
-        <Label>Token: </Label>
-        <ParMd style={{ marginBottom: ".4rem" }}>
-          {record.initializer?.cookieToken == ZERO_ADDRESS
-            ? "Native Token"
-            : record?.initializer?.cookieToken}
-        </ParMd>
-        <Label>On allowlist: </Label>
-        <ParMd style={{ marginBottom: ".4rem" }}>
-          {isMember ? (
-            <span style={{ color: "green" }}>Yes</span>
-          ) : (
-            <span style={{ color: "red" }}>No</span>
-          )}
-        </ParMd>
         <ParMd style={{ marginBottom: ".4rem" }}>
-          Go to{" "}
-          <StyledRouterLink to={`/claims/${record.id}`}>Claim</StyledRouterLink>{" "}
-          to claim your tokens.
+          <StyledRouterLink to={`/claims/${record.id}`}>Claim</StyledRouterLink> tokens.
         </ParMd>
         <ParMd style={{ marginBottom: ".4rem" }}>
           Go to{" "}
@@ -80,7 +165,7 @@ export const JarCard = ({ record }: { record: CookieJar }) => {
           </StyledRouterLink>{" "}
           to inspect the crumbles.
         </ParMd>
-      </Card>
+      </StyledCard>
     </div>
   );
 };
diff --git a/src/components/LeaderBoardCard.tsx b/src/components/LeaderBoardCard.tsx
@@ -1,6 +1,7 @@
-import { Avatar, Card, ParMd } from "@daohaus/ui";
+import { AddressDisplay, Avatar, Card, ParMd } from "@daohaus/ui";
 import cookie from "../assets/cookie.png";
 import { useProfile } from "@daohaus/moloch-v3-hooks";
+import { useTargets } from "../hooks/useTargets";
 import { BigNumberish, ethers } from "ethers";
 /**
  * Represents a leaderboard record.
@@ -27,6 +28,7 @@ export const LeaderBoardCard = ({ record }: { record: LBRecord }) => {
   const { profile } = useProfile({
     address: record.user,
   });
+  const target = useTargets();
 
   return (
     <div style={{ marginBottom: "3rem", width: "50%" }}>
@@ -41,7 +43,12 @@ export const LeaderBoardCard = ({ record }: { record: LBRecord }) => {
           </ParMd>
         )}
         {/* Display the user's address */}
-        <ParMd style={{ marginBottom: "2rem" }}>{record?.user}</ParMd>
+        <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"} />{" "}

diff --git a/src/pages/Claim.tsx b/src/pages/Claim.tsx
@@ -155,6 +155,7 @@ export const Claims = () => {
               unit={
                 target ? HAUS_NETWORK_DATA[target.CHAIN_ID]?.symbol || "" : ""
               }
+              claimId={cookieJar?.id}
             />
             <ParMd style={{ marginBottom: ".4rem" }}>
               Go to{" "}
@@ -175,6 +176,7 @@ export const Claims = () => {
           claimAmt={data.claimAmt}
           claimPeriod={data.claimPeriod}
           unit={target ? HAUS_NETWORK_DATA[target.CHAIN_ID]?.symbol || "" : ""}
+          claimId={cookieJar?.id}
         />
         <ClaimForm
           user={address}

diff --git a/src/pages/History.tsx b/src/pages/History.tsx
@@ -1,4 +1,10 @@
-import { BiColumnLayout, ParMd, SingleColumnLayout } from "@daohaus/ui";
+import {
+  BiColumnLayout,
+  Card,
+  ParMd,
+  SingleColumnLayout,
+  widthQuery,
+} from "@daohaus/ui";
 
 import { HistoryCard } from "../components/HistoryCard";
 import { LeaderBoardCard } from "../components/LeaderBoardCard";
@@ -8,6 +14,19 @@ import { useMemo } from "react";
 import { groupBy } from "lodash";
 import { useQuery } from "react-query";
 import { BigNumber } from "ethers";
+import styled from "styled-components";
+import { StyledRouterLink } from "../components/Layout";
+
+const CardContainer = styled(Card)`
+  padding: 3rem;
+  width: 100%;
+  border: none;
+  margin-bottom: 3rem;
+  @media ${widthQuery.lg} {
+    max-width: 100%;
+    min-width: 0;
+  }
+`;
 
 export const History = () => {
   const { cookieJarId } = useParams();
@@ -44,7 +63,7 @@ export const History = () => {
   console.log({ cookies });
 
   return (
-    <>
+    <SingleColumnLayout>
       {!cookies && <ParMd style={{ marginBottom: "1rem" }}>Loading...</ParMd>}
 
       <BiColumnLayout
@@ -53,17 +72,18 @@ export const History = () => {
             <ParMd style={{ marginBottom: "1rem" }}>
               History (newer first)
             </ParMd>
-
-            {cookies &&
-              cookies.map((record, idx) => (
-                <HistoryCard record={record} key={idx} />
-              ))}
+            <CardContainer>
+              {cookies &&
+                cookies.map((record, idx) => (
+                  <HistoryCard record={record} key={idx} />
+                ))}
+            </CardContainer>
           </SingleColumnLayout>
         }
         right={
           <SingleColumnLayout>
             <ParMd style={{ marginBottom: "1rem" }}>Leader Board</ParMd>
-            {leaderBoardCards}
+            <CardContainer>{leaderBoardCards}</CardContainer>
           </SingleColumnLayout>
         }
         subtitle={
@@ -73,6 +93,9 @@ export const History = () => {
         }
         title="History and Stats"
       />
-    </>
+      <StyledRouterLink to={`/claims/${cookieJarId || ""}`}>
+        New Claim
+      </StyledRouterLink>
+    </SingleColumnLayout>
   );
 };