Merge remote-tracking branch 'origin/staging' into emc/chore/1639-int…

…egrate-swr-with-typesafe-api-client
KlimaDAO · Nov 27, 2023 · b873540 · b873540
2 parents 898ab6b + 7fb2ede
commit b873540
Show file tree

Hide file tree

Showing 78 changed files with 452 additions and 6,727 deletions.
diff --git a/app/components/CarbonTonnesRetiredCard/index.tsx b/app/components/CarbonTonnesRetiredCard/index.tsx
@@ -1,5 +1,4 @@
 import { t, Trans } from "@lingui/macro";
-import { FC } from "react";
 import { useSelector } from "react-redux";
 
 import ForestOutlinedIcon from "@mui/icons-material/ForestOutlined";
@@ -13,7 +12,7 @@ import { useWeb3 } from "@klimadao/lib/utils";
 
 import * as styles from "./styles";
 
-export const CarbonTonnesRetiredCard: FC = () => {
+export const CarbonTonnesRetiredCard = (props: { isConnected?: boolean }) => {
   const { address } = useWeb3();
   const totalCarbonRetired = useSelector(selectCarbonRetired);
   return (
@@ -25,34 +24,47 @@ export const CarbonTonnesRetiredCard: FC = () => {
         </Text>
       </div>
       <div className="cardContent">
-        <div className="stack">
-          <Text className="value">
-            {totalCarbonRetired?.totalTonnesRetired ?? "0"}
+        {!props.isConnected && (
+          <Text t="button" color="lighter">
+            <Trans>Not Connected</Trans>
           </Text>
-          <Text className="label" color="lightest">
-            <Trans id="offset.tonnes_of_carbon_retired">Tonnes of carbon</Trans>
-          </Text>
-        </div>
-        <div className="stack">
-          <Text className="value">
-            {totalCarbonRetired?.totalRetirements ?? "0"}
-          </Text>
-          <Text className="label" color="lightest">
-            <Trans id="offset.number_of_retirements">Total retirements</Trans>
-          </Text>
-        </div>
-        {Number(totalCarbonRetired?.totalRetirements) > 0 && (
-          <ButtonPrimary
-            target="_blank"
-            variant="transparent"
-            icon={<LaunchOutlinedIcon />}
-            href={`${urls.retirements_carbonmark}/${address}`}
-            className={styles.button}
-            label={t({
-              id: "offset.view_retirements",
-              message: "View Retirements",
-            })}
-          />
+        )}
+        {props.isConnected && (
+          <>
+            <div className="stack">
+              <Text className="value">
+                {totalCarbonRetired?.totalTonnesRetired ?? "0"}
+              </Text>
+              <Text className="label" color="lightest">
+                <Trans id="offset.tonnes_of_carbon_retired">
+                  Tonnes of carbon
+                </Trans>
+              </Text>
+            </div>
+            <div className="stack">
+              <Text className="value">
+                {totalCarbonRetired?.totalRetirements ?? "0"}
+              </Text>
+              <Text className="label" color="lightest">
+                <Trans id="offset.number_of_retirements">
+                  Total retirements
+                </Trans>
+              </Text>
+            </div>
+            {Number(totalCarbonRetired?.totalRetirements) > 0 && (
+              <ButtonPrimary
+                target="_blank"
+                variant="transparent"
+                icon={<LaunchOutlinedIcon />}
+                href={`${urls.retirements_carbonmark}/${address}`}
+                className={styles.button}
+                label={t({
+                  id: "offset.view_retirements",
+                  message: "View Retirements",
+                })}
+              />
+            )}
+          </>
         )}
       </div>
     </div>

diff --git a/app/components/views/Buy/index.tsx b/app/components/views/Buy/index.tsx
@@ -9,7 +9,7 @@ import LoginIcon from "@mui/icons-material/Login";
 import { BalancesCard } from "components/BalancesCard";
 import { DisclamerModal } from "components/DisclaimerModal";
 import { ImageCard } from "components/ImageCard";
-import * as styles from "./styles";
+import * as styles from "../styles";
 
 interface Props {
   provider?: providers.JsonRpcProvider;
@@ -22,21 +22,21 @@ export const Buy = (props: Props) => {
   return (
     <>
       <DisclamerModal />
-      <div className={styles.buyCard}>
-        <div className={styles.buyCard_header}>
+      <div className={styles.ctaCard}>
+        <div className={styles.ctaCard_header}>
           {props.isConnected && props.address ? (
             <div>
-              <Text t="h4" className={styles.buyCard_header_title}>
+              <Text t="h4" className={styles.ctaCard_header_title}>
                 <Payment />
                 <Trans id="buy.buy_klima">Buy KLIMA</Trans>
               </Text>
-              <Text t="caption" className={styles.buyCard_header_subtitle}>
+              <Text t="caption" className={styles.ctaCard_header_subtitle}>
                 <Trans id="buy.cta_1">
                   If you are a beginner, we recommend following our step-by-step
                   tutorial: <Anchor href={urls.buy}>How to Buy KLIMA</Anchor>.
                 </Trans>
               </Text>
-              <Text t="caption" className={styles.buyCard_header_subtitle}>
+              <Text t="caption" className={styles.ctaCard_header_subtitle}>
                 <Trans id="buy.cta_2">
                   Otherwise, if you already have a wallet with MATIC on Polygon,
                   the best way to get KLIMA is to swap on{" "}
@@ -49,7 +49,7 @@ export const Buy = (props: Props) => {
             </div>
           ) : (
             <>
-              <Text t="h4" className={styles.buyCard_header_title}>
+              <Text t="h4" className={styles.ctaCard_header_title}>
                 <LoginIcon />
                 <Trans id="buy.please_log_in">
                   Please Log In Or Connect A Wallet

diff --git a/app/components/views/Home/index.tsx b/app/components/views/Home/index.tsx
@@ -41,16 +41,13 @@ export const Home: FC = () => {
   const localeFromURL = useLocaleFromParams();
 
   const { pathname } = useLocation();
-  const [showCheckURLBanner, setShowCheckURLBanner] = useState(
-    !skipCheckURLBanner()
-  );
+  const [showCheckURLBanner, setShowCheckURLBanner] = useState(false);
 
   const { locale } = useSelector(selectAppState);
 
   const {
     address,
     isConnected,
-    initializing,
     disconnect,
     toggleModal,
     network,
@@ -66,6 +63,10 @@ export const Home: FC = () => {
     }
   }, [localeFromURL]);
 
+  useEffect(() => {
+    setShowCheckURLBanner(!skipCheckURLBanner());
+  }, []);
+
   useEffect(() => {
     if (pathname === "/") {
       window.location.replace(`/#/stake${window.location.search}`);
@@ -232,28 +233,11 @@ export const Home: FC = () => {
             />
             <Route
               path="/offset"
-              element={
-                <Offset
-                  address={address}
-                  provider={provider}
-                  isConnected={isConnected}
-                  initializing={initializing}
-                  onRPCError={handleRPCError}
-                  toggleModal={toggleModal}
-                />
-              }
+              element={<Offset isConnected={isConnected} />}
             />
             <Route
               path="/redeem"
-              element={
-                <Redeem
-                  address={address}
-                  provider={provider}
-                  isConnected={isConnected}
-                  onRPCError={handleRPCError}
-                  toggleModal={toggleModal}
-                />
-              }
+              element={<Redeem isConnected={isConnected} />}
             />
             <Route path="/info" element={<Info provider={provider} />} />
             <Route path="/bonds" element={<ChooseBond />} />

diff --git a/app/components/views/Offset/LoadingOverlay/index.tsx b/app/components/views/Offset/LoadingOverlay/index.tsx
diff --git a/app/components/views/Offset/LoadingOverlay/styles.ts b/app/components/views/Offset/LoadingOverlay/styles.ts
diff --git a/app/components/views/Offset/ProjectSearch/Checkbox/index.tsx b/app/components/views/Offset/ProjectSearch/Checkbox/index.tsx
diff --git a/app/components/views/Offset/ProjectSearch/Checkbox/styles.ts b/app/components/views/Offset/ProjectSearch/Checkbox/styles.ts
diff --git a/app/components/views/Offset/ProjectSearch/ConfirmProjectSelection/index.tsx b/app/components/views/Offset/ProjectSearch/ConfirmProjectSelection/index.tsx