Merge branch 'staging' into emc/chore/1639-integrate-swr-with-typesaf…

…e-api-client

carbon/app/[locale]/token-details/page.tsx

@@ -74,14 +74,14 @@ export default async function TokenDetailsPage(props: LocalizedPageProps) {
       title={title()}
       tabs={[
         {
-          key: "c3",
-          label: t`C3`,
+          key: "toucan",
+          label: t`Toucan`,
           optionsList: [
-            getC3PoolsOptions(),
+            getToucanPoolsOptions(),
             getDateFilteringOptions(),
             getPoolStatusOptions(),
           ],
-          contents: c3Contents,
+          contents: toucanContents,
         },
         {
           key: "moss",
@@ -90,14 +90,14 @@ export default async function TokenDetailsPage(props: LocalizedPageProps) {
           contents: mossContents,
         },
         {
-          key: "toucan",
-          label: t`Toucan`,
+          key: "c3",
+          label: t`C3`,
           optionsList: [
-            getToucanPoolsOptions(),
+            getC3PoolsOptions(),
             getDateFilteringOptions(),
             getPoolStatusOptions(),
           ],
-          contents: toucanContents,
+          contents: c3Contents,
         },
       ]}
     />

carbon/components/ExploreMarketplaceButton/index.tsx

@@ -0,0 +1,18 @@
+import { urls } from "@klimadao/lib/constants";
+import { t } from "@lingui/macro";
+import { Button } from "@mui/material";
+import Link from "components/Link";
+import { FC } from "react";
+import styles from "./styles.module.scss";
+
+export const ExploreMarketplaceButton: FC<{ className?: string }> = ({
+  className = "",
+}) => {
+  return (
+    <Link href={urls.marketplace}>
+      <Button className={`${styles.exploreMarketplaceButton} ${className}`}>
+        {t`Explore Marketplace`}
+      </Button>
+    </Link>
+  );
+};

carbon/components/ExploreMarketplaceButton/styles.module.scss

@@ -0,0 +1,15 @@
+.exploreMarketplaceButton {
+  white-space: nowrap;
+  font-size: 1.4rem;
+  padding: 0 2.4rem;
+  height: 4.8rem;
+  color: var(--brand-black);
+  background-color: var(--brand-green);
+  border-radius: 4rem;
+  font-family: Poppins;
+  font-weight: 600;
+
+  &:hover {
+    background-color: var(--brand-green);
+  }
+}

carbon/components/Layout/MobileMenuButton/index.tsx

@@ -3,6 +3,7 @@
 import ClearIcon from "@mui/icons-material/Clear";
 import MenuIcon from "@mui/icons-material/Menu";
 import { Button, Drawer } from "@mui/material";
+import { ExploreMarketplaceButton } from "components/ExploreMarketplaceButton";
 import { useState } from "react";
 import { navItems } from "../NavItems";
 import layoutStyles from "../styles.module.scss";
@@ -22,10 +23,15 @@ export function MobileMenuButton() {
       </Button>
       <Drawer anchor="bottom" open={showDrawer} onClick={toggleDrawer}>
         <div className={styles.wrapper}>
-          <div className={styles.links}>
-            {navItems().map((navItem) => (
-              <MobileMenuButtonItem key={navItem.url} navItem={navItem} />
-            ))}
+          <div className={styles.content}>
+            <div className={styles.links}>
+              {navItems().map((navItem) => (
+                <MobileMenuButtonItem key={navItem.url} navItem={navItem} />
+              ))}
+            </div>
+            <ExploreMarketplaceButton
+              className={styles.exploreMarketplaceButton}
+            />
           </div>
         </div>
       </Drawer>

carbon/components/Layout/MobileMenuButton/styles.module.scss

@@ -1,16 +1,32 @@
 .wrapper {
   padding-top: 6.4rem;
   height: 100vh;
+  height: 100dvh;
   display: flex;
+  flex-direction: column;
   pointer-events: all;
 }
+
+.exploreMarketplaceButton {
+  width: 100%;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--brand-white);
+  padding: 0 1.6rem;
+  padding-top: 4rem;
+  padding-bottom: 7.2rem;
+}
+
 .links {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
-  padding: 1.2rem 2.4rem;
-  background-color: var(--brand-white);
 }
 
 .button {

carbon/components/PageHeader/PageHeader.tsx

@@ -1,6 +1,4 @@
-import { urls } from "@klimadao/lib/constants";
-import { t } from "@lingui/macro";
-import { Button } from "@mui/material";
+import { ExploreMarketplaceButton } from "components/ExploreMarketplaceButton";
 import { ChangeLanguageButton } from "components/Layout/ChangeLanguageButton";
 import Link from "components/Link";
 import { FC } from "react";
@@ -32,11 +30,7 @@ export const PageHeader: FC<{
       <div className={layout.desktopOnly}>
         <div className={styles.buttons}>
           <ChangeLanguageButton />
-          <Link href={urls.marketplace}>
-            <Button className={styles.exploreButton}>
-              {t`Explore Marketplace`}
-            </Button>
-          </Link>
+          <ExploreMarketplaceButton />
         </div>
       </div>
     </div>

carbon/components/PageHeader/styles.module.scss

@@ -60,19 +60,3 @@
     gap: 1.2rem;
   }
 }
-
-.exploreButton {
-  white-space: nowrap;
-  font-size: 1.4rem;
-  padding: 0 2.4rem;
-  height: 4.8rem;
-  color: var(--brand-black);
-  background-color: var(--brand-green);
-  border-radius: 4rem;
-  font-family: Poppins;
-  font-weight: 600;
-
-  &:hover {
-    background-color: var(--brand-green);
-  }
-}

carbon/lib/tokens.tsx

@@ -35,7 +35,9 @@ export async function getTokenSelectiveFeeDescription(token: Token) {
 
   if (tokenInfo.fee_redeem_factor == 0)
     return t`There is no selective redemption/retirement functionality for ${tokenInfo.name}.`;
-  return t`This cost includes the asset spot price + the ${tokenInfo.fee_redeem_factor.toFixed(
+  return t`This cost includes the asset spot price + the ${(
+    tokenInfo.fee_redeem_factor * 100
+  ).toFixed(
     2
   )}% fee to selectively redeem or retire an underlying carbon project charged by ${
     tokenInfo.bridge