create-near-app 6.0.0-beta.2 → 6.0.0-beta.3

package/templates/frontend/gateway/src/components/navigation/desktop/DesktopNavigation.tsx

@@ -1,109 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@/components/lib/Button';
-import { useAuthStore } from '@/stores/auth';
-
-import NearLogo from '../icons/near-icon.svg';
-import { UserDropdownMenu } from '../UserDropdownMenu';
-import { MainNavigationMenu } from './MainNavigationMenu';
-
-const Wrapper = styled.div<{
-  scrolled?: boolean;
-}>`
-  --nav-height: 75px;
-  z-index: 1000;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: white;
-  height: var(--nav-height);
-  box-shadow: 0 1px 0 var(--sand6);
-`;
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  margin: 0 auto;
-`;
-
-const Logo = styled.a`
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-  transition: all 200ms;
-  border-radius: 4px;
-
-  &:focus {
-    outline: 2px solid var(--violet4);
-    outline-offset: 0.3rem;
-  }
-
-  img {
-    width: 110px;
-  }
-`;
-
-const Actions = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  position: relative;
-  z-index: 10;
-  gap: 0.5rem;
-`;
-
-export const DesktopNavigation = () => {
-  const [scrolled, setScrolled] = useState(false);
-  const signedIn = useAuthStore((store) => store.signedIn);
-  const requestSignInWithWallet = useAuthStore((store) => store.requestSignInWithWallet);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.scrollY > 0) {
-        setScrolled(true);
-      } else {
-        setScrolled(false);
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  return (
-    <>
-
-      <Wrapper scrolled={scrolled}>
-        <Container className="container-xl">
-          <Link href="/" passHref legacyBehavior>
-            <Logo>
-              <Image priority src={NearLogo} alt="NEAR" />
-            </Logo>
-          </Link>
-
-          <MainNavigationMenu />
-
-          <Actions>
-            {signedIn ? (
-              <>
-                <UserDropdownMenu />
-              </>
-            ) : (
-              <>
-                <Button label="Sign In" variant="secondary" onClick={requestSignInWithWallet} />
-              </>
-            )}
-          </Actions>
-        </Container>
-      </Wrapper>
-    </>
-  );
-};

package/templates/frontend/gateway/src/components/navigation/desktop/MainNavigationMenu.tsx

@@ -1,170 +0,0 @@
-import * as NavigationMenu from '@radix-ui/react-navigation-menu';
-import Link from 'next/link';
-import styled from 'styled-components';
-
-import { navigationCategories } from '../navigation-categories';
-
-const Wrapper = styled.div`
-  position: relative;
-  display: flex;
-  z-index: 1;
-  flex-grow: 1;
-  padding: 0 1rem;
-  height: var(--nav-height);
-
-  @media (min-width: 1145px) {
-    // This center aligns the nav items in the center of the viewport on larger screens
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    max-width: min-content;
-  }
-`;
-
-const NavRoot = styled(NavigationMenu.Root)`
-  height: 100%;
-
-  > div {
-    height: 100%;
-  }
-`;
-
-const NavList = styled(NavigationMenu.List)`
-  display: flex;
-  justify-content: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-`;
-
-const NavItem = styled(NavigationMenu.Item)`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 100%;
-`;
-
-const NavTrigger = styled(NavigationMenu.Trigger)`
-  all: unset;
-  font: var(--text-s);
-  color: var(--sand12);
-  font-weight: 600;
-  padding: 0 1rem;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  border-radius: 100px;
-  transition: all 200ms;
-
-  &:hover,
-  &:focus,
-  &[data-state='open'] {
-    background: var(--sand4);
-  }
-`;
-
-const NavContent = styled(NavigationMenu.Content)`
-  position: absolute;
-  top: calc(100% - 1rem + 1px);
-  left: 0;
-  padding-top: 1rem;
-  transform-origin: center top;
-  animation: fadeIn 200ms;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: scale(1, 0.5);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
-  }
-`;
-
-const Container = styled.div`
-  display: flex;
-  padding: 12px 0;
-  transform-origin: center top;
-  background: var(--white);
-  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  max-height: calc(100dvh - var(--nav-height));
-  overflow: auto;
-  scroll-behavior: smooth;
-  overscroll-behavior: contain;
-`;
-
-const NavLink = styled(NavigationMenu.Link)`
-  display: block;
-  padding: 7px 0;
-  font: var(--text-s);
-  color: var(--sand12);
-  transition: color 200ms;
-  white-space: nowrap;
-  outline: none;
-
-  &:hover,
-  &:focus {
-    color: var(--sand12);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-`;
-
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 24px 0;
-  min-width: 200px;
-`;
-
-const SectionTitle = styled.p`
-  font: var(--text-xs);
-  color: var(--sand10);
-  font-weight: 450;
-  padding: 12px 0;
-  letter-spacing: 0.24px;
-  margin: 0;
-`;
-
-export const MainNavigationMenu = () => {
-
-  return (
-    <Wrapper>
-      <NavRoot delayDuration={0}>
-        <NavList>
-          {navigationCategories
-            .filter((category) => category.visible === 'all' || category.visible === 'desktop')
-            .map((category) => (
-              <NavItem key={category.title}>
-                <NavTrigger >{category.title}</NavTrigger>
-
-                <NavContent>
-                  <Container>
-                    {category.sections.map((section) => (
-                      <Section key={section.title}>
-                        {section.title && <SectionTitle>{section.title}</SectionTitle>}
-
-                        {section.links.map((link) => (
-                          <NavLink key={link.title} asChild>
-                            <Link href={link.url} target={link.url.indexOf('http') === 0 ? '_blank' : undefined}>
-                              {link.title}
-                            </Link>
-                          </NavLink>
-                        ))}
-                      </Section>
-                    ))}
-                  </Container>
-                </NavContent>
-              </NavItem>
-            ))}
-        </NavList>
-      </NavRoot>
-    </Wrapper>
-  );
-};

package/templates/frontend/gateway/src/components/navigation/icons/close.svg

@@ -1,22 +0,0 @@
-<svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M17.25 6.75L6.75 17.25"
-        stroke="#9BA1A6"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M6.75 6.75L17.25 17.25"
-        stroke="#9BA1A6"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>

package/templates/frontend/gateway/src/components/navigation/icons/near-icon.svg

@@ -1,3 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.5528 1.01528L12.3722 7.22222C12.3127 7.31161 12.2875 7.41954 12.3014 7.52604C12.3153 7.63254 12.3673 7.73042 12.4477 7.80156C12.5282 7.87271 12.6317 7.91231 12.7391 7.91305C12.8465 7.91378 12.9505 7.87559 13.0319 7.80556L17.1472 4.23611C17.1713 4.21453 17.2012 4.20045 17.2332 4.19557C17.2652 4.19068 17.2979 4.19522 17.3274 4.20862C17.3568 4.22203 17.3817 4.24371 17.3991 4.27104C17.4164 4.29836 17.4254 4.33014 17.425 4.3625V15.5375C17.425 15.5717 17.4144 15.6051 17.3948 15.6331C17.3752 15.6611 17.3474 15.6824 17.3152 15.6941C17.2831 15.7058 17.2481 15.7073 17.2151 15.6984C17.182 15.6895 17.1525 15.6707 17.1306 15.6444L4.69167 0.754167C4.49159 0.51791 4.24246 0.328063 3.9616 0.197824C3.68073 0.067585 3.37487 7.92977e-05 3.06528 7.36094e-08H2.63056C2.0655 7.36094e-08 1.52358 0.224469 1.12403 0.624025C0.724468 1.02358 0.5 1.5655 0.5 2.13056V17.8694C0.5 18.4345 0.724468 18.9764 1.12403 19.376C1.52358 19.7755 2.0655 20 2.63056 20C2.99488 20.0001 3.35316 19.9068 3.67119 19.7291C3.98922 19.5513 4.2564 19.2951 4.44722 18.9847L8.62778 12.7778C8.68732 12.6884 8.71248 12.5805 8.6986 12.474C8.68472 12.3675 8.63274 12.2696 8.55228 12.1984C8.47182 12.1273 8.36832 12.0877 8.26092 12.087C8.15352 12.0862 8.04948 12.1244 7.96806 12.1944L3.85278 15.7639C3.82866 15.7855 3.79878 15.7996 3.76679 15.8044C3.7348 15.8093 3.70208 15.8048 3.67263 15.7914C3.64317 15.778 3.61826 15.7563 3.60092 15.729C3.58358 15.7016 3.57458 15.6699 3.575 15.6375V4.45972C3.57501 4.42551 3.58555 4.39213 3.60519 4.36412C3.62483 4.3361 3.65261 4.31481 3.68477 4.30313C3.71693 4.29145 3.7519 4.28995 3.78494 4.29883C3.81797 4.30772 3.84748 4.32655 3.86944 4.35278L16.3069 19.2458C16.507 19.4821 16.7562 19.6719 17.037 19.8022C17.3179 19.9324 17.6237 19.9999 17.9333 20H18.3681C18.648 20.0002 18.9252 19.9452 19.1838 19.8382C19.4425 19.7312 19.6775 19.5743 19.8755 19.3765C20.0735 19.1786 20.2305 18.9437 20.3377 18.6851C20.4448 18.4265 20.5 18.1494 20.5 17.8694V2.13056C20.5 1.5655 20.2755 1.02358 19.876 0.624025C19.4764 0.224469 18.9345 7.36094e-08 18.3694 7.36094e-08C18.0051 -9.56524e-05 17.6468 0.093176 17.3288 0.270914C17.0108 0.448651 16.7436 0.704924 16.5528 1.01528Z" fill="#11181C"/>
-</svg>

package/templates/frontend/gateway/src/components/navigation/icons/near-logo.svg

@@ -1,14 +0,0 @@
-<svg width="110" height="28" viewBox="0 0 110 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1_1899)">
-<path d="M45.5211 4.46114C43.4964 4.46114 42.0241 4.93816 40.7733 6.03856L38.5644 7.94588C38.3803 8.09301 38.0121 8.20297 37.7549 7.98228C37.4969 7.76235 37.4604 7.46886 37.6811 7.17537L38.8589 5.41442C39.043 5.15733 38.8962 4.82743 38.5644 4.82743H35.7302C35.3992 4.82743 35.1413 5.08452 35.1413 5.41442V22.5841C35.1413 22.914 35.3992 23.1711 35.7302 23.1711H38.6748C39.0058 23.1711 39.2637 22.914 39.2637 22.5841V12.8988C39.2637 8.46006 42.9813 7.76311 44.3798 7.76311C47.3609 7.76311 48.4284 9.89112 48.4284 11.5049V22.5841C48.4284 22.914 48.6863 23.1711 49.0173 23.1711H51.9618C52.2928 23.1711 52.5508 22.914 52.5508 22.5841V11.1379C52.5508 7.029 49.8634 4.46114 45.5203 4.46114H45.5211Z" fill="black"/>
-<path d="M64.5489 4.38757C58.8439 4.38757 55.2001 7.87307 55.2001 12.6053V15.2104C55.2001 20.1997 58.8439 23.6117 64.5489 23.6117C69.5912 23.6117 73.1246 21.0067 73.4929 17.4848C73.5302 17.1177 73.2723 16.8614 72.904 16.8614H70.0332C69.7753 16.8614 69.5546 17.0085 69.4808 17.2648C69.1126 18.4388 67.3831 20.1997 64.5489 20.1997C61.7146 20.1997 59.0645 18.1453 59.1011 15.2104L59.1383 11.9456C59.1749 9.48766 61.7519 7.80027 64.5489 7.80027C67.0887 7.80027 69.5546 9.23133 69.8118 11.5793C69.8331 11.8508 69.6459 12.0957 69.3774 12.1473L61.125 13.7437C60.794 13.8172 60.5361 14.1107 60.5361 14.477V14.5134C60.5361 14.8433 60.867 15.1368 61.3456 15.1368H73.1977C73.5233 15.1368 73.7866 14.8737 73.7866 14.5498V12.2391C73.7866 7.87383 69.9952 4.38833 64.5481 4.38833L64.5489 4.38757Z" fill="black"/>
-<path d="M85.0863 4.38757C80.4853 4.38757 76.5105 7.0654 76.5105 10.5873C76.5105 10.8808 76.7685 11.1007 77.0994 11.1007H80.0805C80.375 11.1007 80.5956 10.8808 80.6329 10.5873C80.9274 8.97348 82.8782 7.79951 84.976 7.79951C87.4785 7.79951 89.1722 9.34053 89.1722 11.982V15.174C89.1722 18.4388 86.7427 20.0898 83.7243 20.0898C81.3687 20.0898 80.0067 19.2093 80.0067 17.7782C80.0067 16.5307 80.6694 15.4667 83.3926 14.8433L87.3309 13.7793C87.7356 13.6693 87.8832 13.3387 87.8094 12.9724C87.7729 12.6789 87.4419 12.5318 87.1467 12.5318H83.0616C79.6019 12.5318 76.105 14.7326 76.105 17.961V18.4744C76.105 21.7764 79.2337 23.5002 82.8037 23.5002C85.0855 23.5002 87.0364 22.6197 88.2507 21.5929L90.0548 20.0519C90.3492 19.7948 90.6437 19.7948 90.9008 20.0519C91.1215 20.2718 91.0477 20.6024 90.8636 20.8588L89.7595 22.5833C89.5754 22.8404 89.7223 23.1703 90.054 23.1703H92.7041C93.0351 23.1703 93.293 22.9132 93.293 22.5833V11.467C93.293 7.21177 90.2381 4.38681 85.0848 4.38681L85.0863 4.38757Z" fill="black"/>
-<path d="M109.194 4.82819H105.071C103.636 4.82819 102.237 5.70866 101.243 6.55274L99.6243 7.94663C99.4401 8.09376 99.1084 8.20372 98.8877 8.0202C98.6298 7.83667 98.5195 7.46962 98.7409 7.17612L99.9187 5.41517C100.103 5.15808 99.956 4.82819 99.6243 4.82819H96.8638C96.5328 4.82819 96.2749 5.08528 96.2749 5.41517V22.5848C96.2749 22.9147 96.5328 23.1718 96.8638 23.1718H99.8822C100.213 23.1718 100.471 22.9147 100.471 22.5848V13.7801C100.471 10.0011 102.017 8.31369 105.367 8.31369H109.194C109.525 8.31369 109.783 8.0566 109.783 7.7267V5.41517C109.783 5.08528 109.525 4.82819 109.194 4.82819H109.194Z" fill="black"/>
-<path d="M24.079 0.690475C23.0899 0.690475 22.1715 1.20162 21.6534 2.0419L16.0709 10.3029C15.889 10.5752 15.9628 10.9422 16.236 11.1235C16.4574 11.2706 16.7503 11.2524 16.952 11.0795L22.447 6.32901C22.5383 6.24711 22.679 6.25545 22.7612 6.34645C22.7985 6.38816 22.8183 6.44201 22.8183 6.49737V21.3707C22.8183 21.4935 22.7186 21.5921 22.5953 21.5921C22.5291 21.5921 22.4668 21.5633 22.4249 21.5125L5.81436 1.69457C5.27339 1.05829 4.47904 0.691234 3.64284 0.690475H3.0623C1.4911 0.690475 0.217407 1.96 0.217407 3.52605V24.4739C0.217407 26.04 1.4911 27.3095 3.0623 27.3095C4.05143 27.3095 4.9698 26.7984 5.48795 25.9581L11.0705 17.6971C11.2523 17.4248 11.1785 17.0578 10.9053 16.8765C10.6839 16.7294 10.391 16.7476 10.1894 16.9205L4.69436 21.671C4.60306 21.7529 4.4623 21.7445 4.38013 21.6535C4.34284 21.6118 4.32306 21.558 4.32382 21.5026V6.62554C4.32382 6.50268 4.42349 6.40409 4.54675 6.40409C4.61219 6.40409 4.67534 6.43291 4.71719 6.48372L21.3255 26.3054C21.8664 26.9417 22.6608 27.3088 23.497 27.3095H24.0775C25.6487 27.3103 26.9232 26.0415 26.9247 24.4755V3.52605C26.9247 1.96 25.651 0.690475 24.0798 0.690475H24.079Z" fill="black"/>
-</g>
-<defs>
-<clip-path id="clip0_1_1899">
-<rect width="110" height="27" fill="white" transform="translate(0 0.5)"/>
-</clip-path>
-</defs>
-</svg>

package/templates/frontend/gateway/src/components/navigation/icons/return.svg

@@ -1,29 +0,0 @@
-<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g clip-path="url(#clip0_2_7)">
-    <path
-      d="M9 12L4.5 16.5L9 21"
-      stroke="#9BA1A6"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M18 3V16.5H4.5"
-      stroke="#9BA1A6"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </g>
-  <defs>
-    <clip-path id="clip0_2_7">
-      <rect width="24" height="24" fill="white" />
-    </clip-path>
-  </defs>
-</svg>

package/templates/frontend/gateway/src/components/navigation/icons/search.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z" stroke="#9BA1A6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/templates/frontend/gateway/src/components/navigation/mobile/AccordionMenu.tsx

@@ -1,141 +0,0 @@
-import * as Accordion from '@radix-ui/react-accordion';
-import Link from 'next/link';
-import styled from 'styled-components';
-
-import { navigationCategories } from '../navigation-categories';
-
-type Props = {
-  onCloseMenu: () => void;
-};
-
-const Wrapper = styled.div`
-  margin: 0 -24px;
-`;
-
-const AccordionRoot = styled(Accordion.Root)``;
-
-const AccordionItem = styled(Accordion.Item)``;
-
-const AccordionHeader = styled(Accordion.Header)`
-  display: block;
-  margin: 0;
-`;
-
-const AccordionTrigger = styled(Accordion.Trigger)`
-  all: unset;
-  box-sizing: border-box;
-  background: var(--white);
-  font: var(--text-base);
-  font-weight: 600;
-  color: var(--sand12);
-  padding: 0 24px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-
-  i {
-    transition: transform 200ms;
-  }
-
-  &[data-state='open'] {
-    i {
-      transform: rotate(-180deg);
-    }
-  }
-`;
-
-const AccordionContent = styled(Accordion.Content)`
-  background: var(--sand3);
-  overflow: hidden;
-
-  &[data-state='open'] {
-    animation: slideDown 200ms;
-  }
-  &[data-state='closed'] {
-    animation: slideUp 200ms;
-  }
-
-  @keyframes slideDown {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes slideUp {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-`;
-
-const Section = styled.div`
-  padding: 0.5rem 0;
-
-  a {
-    display: block;
-    font: var(--text-s);
-    color: var(--sand12);
-    padding: 0.5rem 24px;
-    margin: 0;
-  }
-`;
-
-const SectionTitle = styled.p`
-  font: var(--text-xs);
-  color: var(--sand10);
-  font-weight: 450;
-  padding: 0.5rem 24px 1rem;
-  margin: 0 0 0.5rem;
-  letter-spacing: 0.24px;
-  border-bottom: 1px solid var(--sand6);
-`;
-
-export const AccordionMenu = (props: Props) => {
-
-  return (
-    <Wrapper>
-      <AccordionRoot type="multiple">
-        {navigationCategories
-          .filter((category) => category.visible === 'all' || category.visible === 'mobile')
-          .map((category) => (
-            <AccordionItem value={category.title} key={category.title}>
-              <AccordionHeader>
-                <AccordionTrigger>
-                  {category.title}
-                  <i className="ph-bold ph-caret-down" />
-                </AccordionTrigger>
-              </AccordionHeader>
-
-              <AccordionContent>
-                {category.sections.map((section) => (
-                  <Section key={section.title}>
-                    {section.title && <SectionTitle>{section.title}</SectionTitle>}
-
-                    {section.links.map((link) => (
-                      <Link
-                        href={link.url}
-                        target={link.url.indexOf('http') === 0 ? '_blank' : undefined}
-                        key={link.title}
-                        onClick={props.onCloseMenu}
-                      >
-                        {link.title}
-                      </Link>
-                    ))}
-                  </Section>
-                ))}
-
-              </AccordionContent>
-            </AccordionItem>
-          ))}
-      </AccordionRoot>
-    </Wrapper>
-  );
-};

package/templates/frontend/gateway/src/components/navigation/mobile/Menu.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@/components/lib/Button';
-import { useAuthStore } from '@/stores/auth';
-
-import { AccordionMenu } from './AccordionMenu';
-
-type Props = {
-  isVisible: boolean;
-  onCloseMenu: () => void;
-};
-
-const Wrapper = styled.div<{
-  visible: boolean;
-}>`
-  position: fixed;
-  top: var(--nav-height);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  display: ${(p) => (p.visible ? 'block' : 'none')};
-  transition: 200ms;
-  background: var(--white);
-  border-top: 1px solid var(--sand6);
-  overflow: auto;
-  scroll-behavior: smooth;
-  overscroll-behavior: contain;
-  transform-origin: center top;
-  animation: fadeIn 200ms;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: scale(1, 0);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
-  }
-`;
-
-const InnerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 24px;
-  min-height: calc(100% + 1px);
-
-  /*
-    The +1px for "min-height" allows "overscroll-behavior: contain;" on the <Wrapper>
-    to prevent the <body> from scrolling. Setting "overflow: hidden;" on the <body> would
-    break the "position: sticky;" behavior of the navigation - that's why we need to
-    use this hack instead.
-
-    https://stackoverflow.com/a/48954092
-  */
-`;
-
-const Actions = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`;
-
-export function Menu(props: Props) {
-  const signedIn = useAuthStore((store) => store.signedIn);
-  const requestSignInWithWallet = useAuthStore((store) => store.requestSignInWithWallet);
-
-  return (
-    <Wrapper visible={props.isVisible}>
-      <InnerWrapper>
-
-        <AccordionMenu onCloseMenu={props.onCloseMenu} />
-
-        {!signedIn && (
-          <Actions>
-            <Button label="Sign in" variant="secondary" size="large" onClick={requestSignInWithWallet} />
-          </Actions>
-        )}
-      </InnerWrapper>
-    </Wrapper>
-  );
-}