[POC] - bridge to base link (#2372)

* poc - bridge to base link * update locales * move url to constants, remove rem from 0 value * add base icon and brand color to button
KlimaDAO · Jun 24, 2024 · 1c4bc16 · 1c4bc16
1 parent 931e881
commit 1c4bc16
Show file tree

Hide file tree

Showing 8 changed files with 1,915 additions and 1,483 deletions.
diff --git a/app/components/Logos/BaseLogo.tsx b/app/components/Logos/BaseLogo.tsx
@@ -0,0 +1,18 @@
+export const BaseLogo = (props: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="146"
+    height="146"
+    fill="none"
+    viewBox="0 0 146 146"
+    aria-hidden
+    role="presentation"
+    className={props.className}
+  >
+    <circle cx="73" cy="73" r="73" fill="#0052FF" />
+    <path
+      fill="#fff"
+      d="M73.323 123.729c28.294 0 51.23-22.897 51.23-51.141 0-28.245-22.936-51.142-51.23-51.142-26.843 0-48.865 20.61-51.052 46.843h67.715v8.597H22.27c2.187 26.233 24.209 46.843 51.052 46.843z"
+    />
+  </svg>
+);
diff --git a/app/components/NavMenu/index.tsx b/app/components/NavMenu/index.tsx
@@ -1,5 +1,6 @@
 import {
   Anchor as A,
+  ButtonPrimary,
   CopyValueButton,
   DiscordIcon,
   GithubIcon,
@@ -21,6 +22,8 @@ import LibraryAddOutlined from "@mui/icons-material/LibraryAddOutlined";
 import MenuBookOutlined from "@mui/icons-material/MenuBookOutlined";
 import ParkOutlined from "@mui/icons-material/ParkOutlined";
 import RedeemOutlined from "@mui/icons-material/RedeemOutlined";
+import { BaseLogo } from "components/Logos/BaseLogo";
+import { SQUID_ROUTER_URL } from "lib/constants";
 import { FC, ReactElement, ReactNode, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useLocation } from "react-router";
@@ -206,6 +209,13 @@ export const NavMenu: FC<Props> = (props) => {
         </div>
       )}
       <div className="navFooter">
+        <ButtonPrimary
+          target="_blank"
+          href={SQUID_ROUTER_URL}
+          className={styles.bridgeButton}
+          icon={<BaseLogo className={styles.baseIcon} />}
+          label={<Trans>Bridge to Base</Trans>}
+        />
         <div className="hr" />
         <div className="navFooter_buttons">
           <A className="navFooter_button" href={urls.twitter}>

diff --git a/app/components/NavMenu/styles.ts b/app/components/NavMenu/styles.ts
@@ -111,6 +111,17 @@ export const container = css`
   }
 `;
 
+export const bridgeButton = css`
+  padding: 0 1.2rem;
+  color: white !important;
+  background-color: #0052ff; // base brand color
+`;
+
+export const baseIcon = css`
+  width: 3rem;
+  height: 3rem;
+`;
+
 export const sidebarButton = css`
   ${typography.caption};
   display: flex;

diff --git a/app/lib/constants.ts b/app/lib/constants.ts
@@ -62,5 +62,8 @@ export const DEFAULT_NETWORK = config.networks[ENVIRONMENT] as
   | "testnet"
   | "mainnet";
 
+export const SQUID_ROUTER_URL =
+  "https://v2.app.squidrouter.com/?chains=137%2C8453&tokens=0x4e78011Ce80ee02d2c3e649Fb657E45898257815%2C0xDCEFd8C8fCc492630B943ABcaB3429F12Ea9Fea2";
+
 /** Exposed via env vars, this is an infura id to be used in the browser, in getStaticProvider, as a fallback for polygon-rpc */
 export const CLIENT_INFURA_ID = process.env.NEXT_PUBLIC_CLIENT_INFURA_ID;