Merge pull request #55 from burrowHQ/update-rpc-ui

Update rpc UI
burrowHQ · Apr 9, 2024 · 5f421ea · 5f421ea
2 parents 254c3c3 + c078fee
commit 5f421ea
Show file tree

Hide file tree

Showing 10 changed files with 324 additions and 86 deletions.
diff --git a/components/Footer/svg.tsx b/components/Footer/svg.tsx
@@ -1,22 +1,22 @@
-export function TwitterIcon(props) {
+export function TwitterIcon({ fill = "#FFFFFF", ...props }) {
   return (
     <svg
       {...props}
-      width="16"
+      width="13"
       height="13"
-      viewBox="0 0 16 13"
+      viewBox="0 0 13 13"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M14.3077 3.07262C14.3461 3.14578 14.3461 3.29209 14.3461 3.47499C14.3461 4.90156 14 6.29155 13.2692 7.60838C12.5 8.99838 11.4615 10.1323 10.1154 10.9736C8.65384 11.8881 6.92307 12.3636 5.03847 12.3636C3.19231 12.3636 1.53846 11.8881 0 10.9736C0.230769 11.0102 0.499994 11.0102 0.769237 11.0102C2.30769 11.0102 3.65385 10.5713 4.84615 9.6568C4.11539 9.6568 3.46154 9.43733 2.92307 9.03496C2.3846 8.63258 1.99999 8.12049 1.76922 7.49865C1.96154 7.53524 2.19231 7.53524 2.34615 7.53524C2.65385 7.53524 2.92307 7.49865 3.23077 7.46207C2.50001 7.31576 1.84615 6.94996 1.34616 6.36471C0.846166 5.77945 0.615378 5.12104 0.615378 4.38945V4.31629C1.07692 4.57235 1.57693 4.71866 2.07692 4.71866C1.65384 4.42603 1.26923 4.06025 1.00001 3.58473C0.730763 3.14578 0.576923 2.63367 0.576923 2.08499C0.576923 1.53631 0.730763 1.0242 1.03846 0.512109C1.84615 1.49974 2.84616 2.26789 4.03846 2.81657C5.23076 3.36525 6.46154 3.69446 7.8077 3.76761C7.76922 3.54814 7.73077 3.29209 7.73077 3.07262C7.73077 2.52394 7.88461 2.01183 8.15385 1.49974C8.42309 0.987644 8.84616 0.621845 9.34615 0.365782C9.88462 0.146309 10.4231 0 11.0385 0C11.5 0 11.9615 0.0731633 12.3846 0.256046C12.8077 0.438945 13.1538 0.658418 13.4615 0.987627C14.2308 0.841318 14.9231 0.585255 15.5385 0.256046C15.3077 0.987627 14.8077 1.57288 14.1154 1.97525C14.7308 1.90209 15.3461 1.71921 16 1.46315C15.5 2.08499 14.9615 2.63367 14.3077 3.07262Z"
-        fill="#979ABE"
+        d="M7.73803 5.50525L12.5784 0H11.4318L7.22713 4.77915L3.8714 0H0L5.07563 7.22761L0 13H1.1466L5.58393 7.95197L9.1286 13H13M1.56043 0.846028H3.32193L11.4309 12.1955H9.66897"
+        fill={fill}
       />
     </svg>
   );
 }
 
-export function DiscordIcon(props) {
+export function DiscordIcon({ fill = "#FFFFFF", ...props }) {
   return (
     <svg
       {...props}
@@ -28,13 +28,13 @@ export function DiscordIcon(props) {
     >
       <path
         d="M8 0.523747C4.81493 0.523747 2.58063 1.80526 2.58063 1.80526C3.80475 0.78005 5.94397 0.189441 5.94397 0.189441L5.74193 0C3.73344 0.0334307 1.9151 1.33723 1.9151 1.33723C-0.129049 5.33776 0.00168121 8.79226 0.00168121 8.79226C1.66552 10.8092 4.13751 10.6644 4.13751 10.6644L4.98132 9.66146C3.49575 9.36058 2.55686 8.12365 2.55686 8.12365C2.55686 8.12365 4.79116 9.55002 8 9.55002C11.2088 9.55002 13.4431 8.12365 13.4431 8.12365C13.4431 8.12365 12.5043 9.36058 11.0187 9.66146L11.8625 10.6644C11.8625 10.6644 14.3345 10.8092 15.9983 8.79226C15.9983 8.79226 16.129 5.33776 14.0849 1.33723C14.0849 1.33723 12.2666 0.0334307 10.2581 0L10.056 0.189441C10.056 0.189441 12.1953 0.78005 13.4194 1.80526C13.4194 1.80526 11.1851 0.523747 8 0.523747ZM5.53989 4.74715C6.31239 4.74715 6.94227 5.38234 6.93039 6.16238C6.93039 6.93129 6.31239 7.57762 5.53989 7.57762C4.77928 7.57762 4.16128 6.93129 4.16128 6.16238C4.16128 5.38234 4.76739 4.74715 5.53989 4.74715ZM10.4958 4.74715C11.2683 4.74715 11.8863 5.38234 11.8863 6.16238C11.8863 6.93129 11.2683 7.57762 10.4958 7.57762C9.73515 7.57762 9.11715 6.93129 9.11715 6.16238C9.11715 5.38234 9.72326 4.74715 10.4958 4.74715Z"
-        fill="#979ABE"
+        fill={fill}
       />
     </svg>
   );
 }
 
-export function MediumIcon(props) {
+export function MediumIcon({ fill = "#FFFFFF", ...props }) {
   return (
     <svg
       {...props}
@@ -47,7 +47,7 @@ export function MediumIcon(props) {
       <g clipPath="url(#clip0_378_558)">
         <path
           d="M0 11.6594L1.25815 9.97344C1.25815 9.97344 1.60312 9.70938 1.60312 8.53125V3.31094C1.60312 3.31094 1.664 2.84375 1.21756 2.29531C0.771122 1.74688 0.344976 1.21875 0.344976 1.21875H3.91649L6.87922 7.6375L9.45639 1.21875H12.9873L11.8915 2.47812V10.4812L13.0076 11.6391H8.05619L9.13171 10.5625L9.19258 3.47344L5.84429 11.7812L2.19161 3.7375L2.13073 8.87656C2.13073 8.87656 2.09015 9.44531 2.43512 9.93281C2.7801 10.4 3.77444 11.6594 3.77444 11.6594H0Z"
-          fill="#979ABE"
+          fill={fill}
         />
       </g>
       <defs>

diff --git a/components/Header/MenuMobile.tsx b/components/Header/MenuMobile.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, createContext, useContext } from "react";
-import { Modal as MUIModal } from "@mui/material";
+import { Box, Modal as MUIModal, useTheme } from "@mui/material";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { MenuButton, CloseIcon, ArrowRightIcon, ArrowTopRightIcon, ArrowDownIcon } from "./svg";
@@ -9,6 +9,7 @@ import { mainMenuList, helpMenu, Imenu } from "./menuData";
 import { toggleShowDust } from "../../redux/appSlice";
 import { getShowDust } from "../../redux/appSelectors";
 import { useAppSelector, useAppDispatch } from "../../redux/hooks";
+import { DiscordIcon, MediumIcon, TwitterIcon } from "../Footer/svg";
 
 export default function MenuMobile() {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -37,7 +38,9 @@ export default function MenuMobile() {
             })}
             <BridgeMenuItem onClose={handleClose} />
             <SetMenuItem />
-            <MenuItem onClose={handleClose} item={helpMenu} isOuterLink isLast />
+            <MenuItem onClose={handleClose} item={helpMenu} isOuterLink />
+            <CommunityItem />
+            <DeveloperItem />
           </div>
         </WrapperMenuMobile>
       </MUIModal>
@@ -193,3 +196,81 @@ const BridgeSubMenuItem = ({ title, pathname, subTitle, onClose }: PropsSubMenu)
     </div>
   );
 };
+
+const CommunityItem = () => {
+  return (
+    <div className="flex items-center justify-between h-[60px] px-6 border-b border-dark-700">
+      <div className="flex items-center gap-2">
+        <span className="text-base text-white">Community</span>
+      </div>
+      <Links />
+    </div>
+  );
+};
+
+const DeveloperItem = () => {
+  return (
+    <div className="flex items-center justify-between h-[60px] px-6">
+      <Link href="https://github.com/burrowHQ/">
+        <a
+          href="https://github.com/burrowHQ/"
+          className="flex items-center gap-2"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span className="text-base text-gray-300">Github</span>
+          <ArrowTopRightIcon fill="#979ABE" />
+        </a>
+      </Link>
+      <Link href="https://immunefi.com/bounty/burrow/">
+        <a
+          href="https://immunefi.com/bounty/burrow/"
+          className="flex items-center gap-2"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span className="text-base text-gray-300">Bug Bounty</span>
+          <ArrowTopRightIcon fill="#979ABE" />
+        </a>
+      </Link>
+    </div>
+  );
+};
+
+const Links = () => {
+  const theme = useTheme();
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns="repeat(3, 1fr)"
+      alignItems="center"
+      lineHeight="0"
+      sx={{ gap: "26px" }}
+    >
+      <Link
+        href="https://twitter.com/burrow_finance"
+        title="Twitter"
+        target="_blank"
+        color={theme.custom.footerIcon}
+      >
+        <TwitterIcon fill="#979ABE" />
+      </Link>
+      <Link
+        href="https://discord.gg/gUWBKy9Vur"
+        title="Discord"
+        target="_blank"
+        color={theme.custom.footerIcon}
+      >
+        <DiscordIcon fill="#979ABE" />
+      </Link>
+      <Link
+        href="https://burrowfinance.medium.com/"
+        title="Medium"
+        target="_blank"
+        color={theme.custom.footerIcon}
+      >
+        <MediumIcon fill="#979ABE" />
+      </Link>
+    </Box>
+  );
+};
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -1,20 +1,22 @@
 import React, { useState, useEffect } from "react";
-import { useTheme, Box, Snackbar, Alert } from "@mui/material";
+import { useTheme, Box, Snackbar, Typography } from "@mui/material";
 import { useRouter } from "next/router";
 import Link from "next/link";
-
 import LogoIcon from "../../public/logo.svg";
 import BurrowIcon from "../../public/burrow.svg";
 import BrrrIcon from "../../public/brrr.svg";
 import WalletButton from "./WalletButton";
 import Bridge from "./Bridge";
 import Set from "./Set";
-import { Wrapper, Logo, Menu, LinkStyled, WrapperMobile, WalletMobile } from "./style";
+import { Wrapper, Logo, Menu, LinkStyled, WrapperMobile } from "./style";
 import { useAppSelector } from "../../redux/hooks";
 import { isAssetsFetching } from "../../redux/assetsSelectors";
 import { helpMenu, mainMenuList, Imenu } from "./menuData";
 import MenuMobile from "./MenuMobile";
 import { RefreshIcon } from "./svg";
+import { DiscordIcon, MediumIcon, TwitterIcon } from "../Footer/svg";
+import { LinksWrapper } from "../Footer/style";
+import { isMobileDevice } from "../../helpers/helpers";
 
 const MenuItem = ({ item }: { item: Imenu }) => {
   const { title, link, allLinks } = item;
@@ -53,6 +55,45 @@ const HelpMenuItem = () => {
     </div>
   );
 };
+const CommunityItem = () => {
+  const [isHovered, setIsHovered] = useState(false);
+  const isMobile = isMobileDevice();
+  return (
+    <div
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className="inline-block py-3 px-2 cursor-pointer hover:bg-gray-800 hover:border hover:border-dark-50 relative rounded-md"
+    >
+      <svg
+        width="13"
+        height="3"
+        viewBox="0 0 13 3"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={`fill-current ${isHovered ? "text-white" : "text-blue-200"}`}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3 1.5C3 2.32843 2.32843 3 1.5 3C0.671573 3 0 2.32843 0 1.5C0 0.671573 0.671573 0 1.5 0C2.32843 0 3 0.671573 3 1.5ZM8 1.5C8 2.32843 7.32843 3 6.5 3C5.67157 3 5 2.32843 5 1.5C5 0.671573 5.67157 0 6.5 0C7.32843 0 8 0.671573 8 1.5ZM11.5 3C12.3284 3 13 2.32843 13 1.5C13 0.671573 12.3284 0 11.5 0C10.6716 0 10 0.671573 10 1.5C10 2.32843 10.6716 3 11.5 3Z"
+        />
+      </svg>
+      {isHovered && (
+        <div className="absolute z-50 top-full mt-1 left-0 w-48 p-2 bg-dark-100 shadow-lg border border-dark-300 rounded-md pt-4 pb-6 px-6">
+          <h1 className="text-sm text-gray-300 mb-4">Community</h1>
+          <LinksWrapper>
+            <Links />
+          </LinksWrapper>
+          <h1 className="text-sm text-gray-300 mt-4">Developer</h1>
+          <div>
+            <Github />
+            <BugBounty />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
 const Header = () => {
   const [open, setOpen] = useState(false);
   const isFetching = useAppSelector(isAssetsFetching);
@@ -93,6 +134,7 @@ const Header = () => {
               return <MenuItem key={item.title} item={item} />;
             })}
             <HelpMenuItem />
+            <CommunityItem />
           </Menu>
           <Box display="flex" justifyContent="flex-end" alignItems="stretch" className=" gap-4">
             <Bridge />
@@ -133,3 +175,69 @@ const Header = () => {
 };
 
 export default Header;
+const Links = () => {
+  const theme = useTheme();
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns="repeat(4, 1fr)"
+      alignItems="center"
+      lineHeight="0"
+      sx={{ gap: "48px" }}
+    >
+      <Link
+        href="https://twitter.com/burrow_finance"
+        title="Twitter"
+        target="_blank"
+        color={theme.custom.footerIcon}
+      >
+        <TwitterIcon />
+      </Link>
+      <Link
+        href="https://discord.gg/gUWBKy9Vur"
+        title="Discord"
+        target="_blank"
+        color={theme.custom.footerIcon}
+      >
+        <DiscordIcon />
+      </Link>
+      <Link
+        href="https://burrowfinance.medium.com/"
+        title="Medium"
+        target="_blank"
+        color={theme.custom.footerIcon}
+      >
+        <MediumIcon />
+      </Link>
+    </Box>
+  );
+};
+const BugBounty = () => {
+  const isMobile = isMobileDevice();
+  return (
+    <Link href="https://immunefi.com/bounty/burrow/" title="Bug Bounty" target="_blank">
+      <Typography
+        fontSize="14px"
+        lineHeight="16px"
+        style={{ color: isMobile ? "#6F7188" : "#ffffff", letterSpacing: "1px" }}
+      >
+        Bug Bounty
+      </Typography>
+    </Link>
+  );
+};
+
+const Github = () => {
+  const isMobile = isMobileDevice();
+  return (
+    <Link href="https://github.com/burrowHQ/" title="Github" target="_blank">
+      <Typography
+        fontSize="14px"
+        lineHeight="46px"
+        style={{ color: isMobile ? "#6F7188" : "#ffffff", letterSpacing: "1px" }}
+      >
+        Github
+      </Typography>
+    </Link>
+  );
+};
diff --git a/components/Header/svg.tsx b/components/Header/svg.tsx
@@ -128,7 +128,7 @@ export function ArrowRightIcon(props) {
   );
 }
 
-export function ArrowTopRightIcon(props) {
+export function ArrowTopRightIcon({ fill = "#FFFFFF", ...props }) {
   return (
     <svg
       {...props}
@@ -140,7 +140,7 @@ export function ArrowTopRightIcon(props) {
     >
       <path
         d="M4.46918 14.4135C4.14529 14.7067 4.12037 15.2069 4.41354 15.5308C4.7067 15.8547 5.20692 15.8796 5.53082 15.5865L4.46918 14.4135ZM16.2771 5.5474C16.2988 5.11108 15.9627 4.73975 15.5264 4.71802L8.41606 4.36387C7.97974 4.34214 7.60841 4.67824 7.58668 5.11456C7.56495 5.55089 7.90104 5.92221 8.33736 5.94395L14.6577 6.25874L14.3429 12.579C14.3211 13.0154 14.6572 13.3867 15.0935 13.4084C15.5299 13.4301 15.9012 13.0941 15.9229 12.6577L16.2771 5.5474ZM5.53082 15.5865L16.0179 6.09452L14.9562 4.92159L4.46918 14.4135L5.53082 15.5865Z"
-        fill="white"
+        fill={fill}
       />
     </svg>
   );

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -43,13 +43,15 @@ const Layout = ({ children }) => {
   const { hasTicker } = useTicker();
   return (
     <Theme>
-      <PageGrid>
-        <Header />
-        <main className="md:px-10" id="root">
-          {children}
-        </main>
-      </PageGrid>
-      <Footer />
+      <div className="md:pb-8">
+        <PageGrid>
+          <Header />
+          <main className="md:px-10" id="root">
+            {children}
+          </main>
+        </PageGrid>
+        {/* <Footer /> */}
+      </div>
     </Theme>
   );
 };