add rwo color progress bar and useEth consistency

src/components/ProgressSection.tsx

@@ -1,6 +1,6 @@
 import { useDHConnect } from "@daohaus/connect";
 import { TARGETS } from "../targetDao";
-import { DataIndicator, Progress } from "@daohaus/ui";
+import { Badge, DataIndicator, Progress } from "@daohaus/ui";
 import { formatValueTo, fromWei } from "@daohaus/utils";
 import styled from "styled-components";
 import { DataGrid } from "./DataGrid";
@@ -18,45 +18,70 @@ export const ProgressSection = ({
 }: {
   yeetBalance?: string | null;
   max?: string | null;
-
 }) => {
+  let validCaps, softCapReached, hardCapReached, softCapDisp, hardCapDisp;
+
+  if (Number(TARGETS.SOFT_CAP) < Number(TARGETS.MAX_YEET)) {
+    validCaps = true;
+    softCapReached = Number(yeetBalance) > Number(TARGETS.SOFT_CAP);
+    hardCapReached = Number(yeetBalance) > Number(TARGETS.MAX_YEET);
+    const softCapPerc =
+      (Number(TARGETS.SOFT_CAP) / Number(TARGETS.MAX_YEET)) * 100; // 100% of soft cap
+    hardCapDisp =
+      Number(yeetBalance) > Number(TARGETS.MAX_YEET)
+        ? 100 - softCapPerc
+        : (Number(yeetBalance) / Number(TARGETS.MAX_YEET)) * 100 - softCapPerc; // 100% of hard cap minus soft cap
+    softCapDisp =
+      Number(yeetBalance) > Number(TARGETS.SOFT_CAP)
+        ? softCapPerc
+        : hardCapDisp;
+  }
 
   return (
     <ProgressBox>
       <DataGrid>
-        <DataIndicator
-          size="sm"
-          label={`Max ${TARGETS.STAKE_TOKEN_SYMBOL}:`}
-          data={
-            Number(TARGETS.MAX_YEET) / 10 ** TARGETS.STAKE_TOKEN_DECIMALS || "?"
-          }
-        />
-        {yeetBalance && (
+        {validCaps && (
           <DataIndicator
             size="sm"
-            label={`Yeeter ${TARGETS.STAKE_TOKEN_SYMBOL} Balance:`}
+            label={`${softCapReached ? "⭐ " : ""}Soft Cap:`}
+            data={yeetBalance != null ? fromWei(TARGETS.SOFT_CAP) : "--"}
+          />
+        )}
+        {validCaps && (
+          <DataIndicator
+            size="sm"
+            label={`${hardCapReached ? "⭐ " : ""}Max ${
+              TARGETS.STAKE_TOKEN_SYMBOL
+            }:`}
             data={
-              yeetBalance != null
-                ? fromWei(yeetBalance)
-                : "--"
+              Number(TARGETS.MAX_YEET) / 10 ** TARGETS.STAKE_TOKEN_DECIMALS ||
+              "?"
             }
           />
         )}
+        {yeetBalance && (
+          <DataIndicator
+            size="sm"
+            label={`Yeeter ${TARGETS.STAKE_TOKEN_SYMBOL} Balance:`}
+            data={yeetBalance != null ? fromWei(yeetBalance) : "--"}
+          />
+        )}
       </DataGrid>
+      {validCaps && (
       <Progress
-            backgroundColor="black"
-            progressSection={[
-              {
-                color: "green",
-                percentage: `${
-                  yeetBalance ? (Number(yeetBalance) / Number(TARGETS.MAX_YEET)) * 100 : 0
-                }%`
-                  
-              },
-            ]}
-          />
-
-
+        backgroundColor="black"
+        progressSection={[
+          {
+            color: "green",
+            percentage: `${yeetBalance ? softCapDisp : 0}%`,
+          },
+          {
+            color: "red",
+            percentage: `${yeetBalance ? hardCapDisp : 0}%`,
+          },
+        ]}
+      />
+      )}
     </ProgressBox>
   );
 };

src/hooks/useETH.tsx

@@ -1,4 +1,7 @@
 import { useQuery } from "react-query";
+import { ethers } from "ethers";
+
+import { HAUS_RPC } from "@daohaus/keychain-utils";
 
 import { ValidNetwork, Keychain } from "@daohaus/keychain-utils";
 
@@ -12,8 +15,7 @@ type FetchShape = {
 const fetchBalanceData = async ({
   userAddress,
   chainId,
-  provider,
-  rpcs,
+  rpcs = HAUS_RPC,
   fetchShape,
 }: {
   userAddress?: string | null;
@@ -23,7 +25,8 @@ const fetchBalanceData = async ({
   fetchShape?: FetchShape;
 }) => {
 
-  if (!provider || !userAddress || !chainId) {
+  if (!userAddress) {
+    console.log("early return");
     return;
   }
 
@@ -32,7 +35,11 @@ const fetchBalanceData = async ({
     const name = "Ethereum";
     const symbol = "ETH";
 
-    const balance = await provider?.getBalance(userAddress);    
+    const rpcUrl = rpcs[chainId];
+
+    const ethersProvider = new ethers.providers.JsonRpcProvider(rpcUrl);
+
+    const balance = await ethersProvider?.getBalance(userAddress);    
 
     const data = {
       decimals,

src/pages/Join.tsx

@@ -243,7 +243,8 @@ export const Join = () => {
             <MembershipSection tokenBalance={tokenBalance} balance={balance} />
             {TARGETS.STAKE_NEXT_START > Date.now() / 1000 ||
             TARGETS.STAKE_PAUSED ||
-            parseInt(expiry || "0") < Date.now() / 1000 ? (
+            parseInt(expiry || "0") < Date.now() / 1000 ||
+            Number(yeetBalance) > Number(TARGETS.MAX_YEET) ? (
               <Card className="space">
                 <ParMd>
                   Staking is currently paused. Please check back later.

src/targetDao.ts

@@ -12,6 +12,7 @@ export const TARGETS: {
     SHAMAN_ADDRESS: EthAddress;
     YEET_BANK: string;
     MAX_YEET: string;
+    SOFT_CAP: string;
     CHAIN_ID: ValidNetwork;
     STAKE_TOKEN_NAME: string;
     STAKE_TOKEN_SYMBOL: string;
@@ -33,7 +34,8 @@ export const TARGETS: {
     STAKE_TOKEN_DECIMALS: 18,
     SHAMAN_ADDRESS: "0x6d98023d9e73708103803818567a5Cc465Bb1486",
     YEET_BANK: "0x51197bda68a2fc4d7af96de76e3f6471786a03d9",
-    MAX_YEET: "3000000000000000000",
+    MAX_YEET: "800000000000000000",
+    SOFT_CAP: "200000000000000000",
     STAKE_PAUSED: false,
     STAKE_NEXT_START: 0,
 };