Merge remote-tracking branch 'origin/fix-aptos-links' into data-api

sushi-labs · Aug 7, 2024 · 6c6415a · 6c6415a
2 parents ff46a8c + 7227d50
commit 6c6415a
Show file tree

Hide file tree

Showing 22 changed files with 376 additions and 464 deletions.
diff --git a/apps/tron/src/app/header.tsx b/apps/tron/src/app/header.tsx
@@ -54,15 +54,15 @@ export const Navigation: FC = () => {
             <NavigationMenuItem className="hidden lg:block">
               <NavigationMenuLink
                 href="/swap"
-                className={navigationMenuTriggerStyle()}
+                className={navigationMenuTriggerStyle}
               >
                 Swap
               </NavigationMenuLink>
             </NavigationMenuItem>
             <NavigationMenuItem className="hidden lg:block">
               <NavigationMenuLink
                 href="/pool"
-                className={navigationMenuTriggerStyle()}
+                className={navigationMenuTriggerStyle}
               >
                 Pool
               </NavigationMenuLink>

diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
@@ -63,6 +63,11 @@ const nextConfig = bundleAnalyzer({
         permanent: true,
         destination: '/pool/:path*',
       },
+      {
+        source: '/aptos',
+        permanent: true,
+        destination: '/aptos/swap',
+      },
       {
         source: '/skale/swap',
         permanent: true,

diff --git a/apps/web/src/app/(cms)/header.tsx b/apps/web/src/app/(cms)/header.tsx
@@ -1,19 +1,11 @@
 import { getDifficulties, getProducts } from '@sushiswap/graph-client/strapi'
 import {
-  EXPLORE_NAVIGATION_LINKS,
-  NavigationContainer,
-  NavigationListItem,
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  // OnramperButton,
-  buttonVariants,
+  Navigation,
+  NavigationElement,
+  NavigationElementType,
 } from '@sushiswap/ui'
-// import { getDifficulties, getProducts } from 'lib/api'
 import React from 'react'
+import { EXPLORE_NAVIGATION_LINKS } from '../_common/header-elements'
 import { DOCS_URL } from './constants'
 
 interface HeaderLink {
@@ -45,91 +37,49 @@ export async function Header() {
       : -1,
   )
 
-  const navData: HeaderSection[] = [
-    { title: 'Academy', href: '/academy' },
-    { title: 'Blog', href: '/blog' },
+  const navData: NavigationElement[] = [
+    {
+      title: 'Explore',
+      items: EXPLORE_NAVIGATION_LINKS,
+      show: 'everywhere',
+      type: NavigationElementType.Dropdown,
+    },
+    {
+      title: 'Academy',
+      href: '/academy',
+      show: 'everywhere',
+      type: NavigationElementType.Single,
+    },
+    {
+      title: 'Blog',
+      href: '/blog',
+      show: 'everywhere',
+      type: NavigationElementType.Single,
+    },
     {
       title: 'Products',
-      links: sortedProducts.map(({ longName, slug }) => ({
-        name: longName,
+      items: sortedProducts.map(({ longName, slug }) => ({
+        title: longName,
         href: `/academy/products/${slug}`,
+        description: '',
       })),
-      className: 'hidden md:flex',
+      show: 'desktop',
+      type: NavigationElementType.Dropdown,
     },
     {
       title: 'Learn',
-      links: difficulties?.map(({ shortDescription, slug }) => {
+      items: difficulties?.map(({ shortDescription, slug }) => {
         const isTechnical = slug === 'technical'
         return {
-          name: shortDescription,
+          title: shortDescription,
           href: isTechnical ? DOCS_URL : `/academy/explore?difficulty=${slug}`,
-          isExternal: isTechnical,
+          description: '',
         }
       }),
-      className: 'hidden md:flex',
+      show: 'desktop',
+      type: NavigationElementType.Dropdown,
     },
   ]
 
-  return (
-    <NavigationContainer>
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Explore</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="w-[400px] gap-3 p-4">
-                {EXPLORE_NAVIGATION_LINKS.map((component) => (
-                  <NavigationListItem
-                    key={component.title}
-                    title={component.title}
-                    href={component.href}
-                  >
-                    {component.description}
-                  </NavigationListItem>
-                ))}
-                {/* <OnramperButton>
-                    <NavigationListItem title="Buy Crypto">
-                      Need to buy some more crypto?
-                    </NavigationListItem>
-                  </OnramperButton> */}
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          {navData.map(({ title, href, links, className }) => {
-            if (href && !links) {
-              return (
-                <NavigationMenuItem key={href} className={className}>
-                  <NavigationMenuLink
-                    href={href}
-                    className={buttonVariants({ variant: 'ghost' })}
-                  >
-                    {title}
-                  </NavigationMenuLink>
-                </NavigationMenuItem>
-              )
-            }
-
-            return (
-              <NavigationMenuItem key={title} className={className}>
-                <NavigationMenuTrigger>{title}</NavigationMenuTrigger>
-                <NavigationMenuContent>
-                  <ul className="w-[400px] gap-3 p-4">
-                    {links?.map(({ name, href }) => (
-                      <NavigationListItem
-                        key={`${title}-${name}`}
-                        title={name.split('-')?.[0]}
-                        href={href}
-                      >
-                        {name.split('-')?.[1]}
-                      </NavigationListItem>
-                    ))}
-                  </ul>
-                </NavigationMenuContent>
-              </NavigationMenuItem>
-            )
-          })}
-        </NavigationMenuList>
-      </NavigationMenu>
-    </NavigationContainer>
-  )
+  return <Navigation leftElements={navData} />
 }
diff --git a/apps/web/src/app/(evm)/[chainId]/header.tsx b/apps/web/src/app/(evm)/[chainId]/header.tsx
@@ -5,11 +5,13 @@ import React, { FC } from 'react'
 import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { WagmiHeaderComponents } from 'src/lib/wagmi/components/wagmi-header-components'
 import { useChainId } from 'wagmi'
+import { headerElements } from '../_common/header-elements'
 
 export const Header: FC = () => {
   const chainId = useChainId()
   return (
     <Navigation
+      leftElements={headerElements}
       rightElement={<WagmiHeaderComponents chainIds={SUPPORTED_CHAIN_IDS} />}
       chainId={chainId}
     />

diff --git a/apps/web/src/app/(evm)/_common/header-elements.ts b/apps/web/src/app/(evm)/_common/header-elements.ts
@@ -0,0 +1,94 @@
+import {
+  type NavigationElement,
+  NavigationElementDropdown,
+  NavigationElementType,
+} from '@sushiswap/ui'
+import { EXPLORE_NAVIGATION_LINKS } from 'src/app/_common/header-elements'
+
+const TOOLS_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
+  {
+    title: 'Analytics',
+    href: '/analytics',
+    description: 'Find the best opportunities',
+  },
+  {
+    title: 'Blog',
+    href: '/blog',
+    description:
+      'Stay up to date with the latest product developments at Sushi.',
+  },
+  {
+    title: 'Academy',
+    href: '/academy',
+    description: 'Everything you need to get up to speed with DeFi.',
+  },
+  {
+    title: 'Forum & Proposals',
+    href: 'https://forum.sushi.com',
+    description: 'View and discuss proposals for SushiSwap.',
+  },
+  {
+    title: 'Participate',
+    href: 'https://snapshot.org/#/sushigov.eth',
+    description:
+      'As a Sushi holder, you can vote on proposals to shape the future of SushiSwap.',
+  },
+]
+
+const PARTNER_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
+  {
+    title: 'Partner with Sushi',
+    href: '/partner',
+    description: 'Incentivize your token with Sushi rewards.',
+  },
+  {
+    title: 'List enquiry',
+    href: '/tokenlist-request',
+    description: 'Get your token on our default token list.',
+  },
+]
+
+export const headerElements: NavigationElement[] = [
+  {
+    title: 'Explore',
+    items: EXPLORE_NAVIGATION_LINKS,
+    show: 'mobile',
+    type: NavigationElementType.Dropdown,
+  },
+  {
+    title: 'Swap',
+    href: '/swap',
+    show: 'desktop',
+    type: NavigationElementType.Single,
+  },
+  {
+    title: 'Pools',
+    href: '/pool',
+    show: 'desktop',
+    type: NavigationElementType.Single,
+  },
+  {
+    title: 'Bonds',
+    href: '/bonds',
+    show: 'desktop',
+    type: NavigationElementType.Single,
+  },
+  {
+    title: 'Stake',
+    href: '/stake',
+    show: 'desktop',
+    type: NavigationElementType.Single,
+  },
+  {
+    title: 'More',
+    items: TOOLS_NAVIGATION_LINKS,
+    show: 'desktop',
+    type: NavigationElementType.Dropdown,
+  },
+  {
+    title: 'Partners',
+    items: PARTNER_NAVIGATION_LINKS,
+    show: 'desktop',
+    type: NavigationElementType.Dropdown,
+  },
+]
diff --git a/apps/web/src/app/(evm)/bonds/header.tsx b/apps/web/src/app/(evm)/bonds/header.tsx
@@ -4,10 +4,12 @@ import { Navigation } from '@sushiswap/ui'
 import React, { FC } from 'react'
 import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { WagmiHeaderComponents } from 'src/lib/wagmi/components/wagmi-header-components'
+import { headerElements } from '../_common/header-elements'
 
 export const Header: FC = () => {
   return (
     <Navigation
+      leftElements={headerElements}
       rightElement={<WagmiHeaderComponents chainIds={SUPPORTED_CHAIN_IDS} />}
     />
   )

diff --git a/apps/web/src/app/(evm)/claims/components/Header.tsx b/apps/web/src/app/(evm)/claims/components/Header.tsx
@@ -4,10 +4,12 @@ import { Navigation } from '@sushiswap/ui'
 import React, { FC } from 'react'
 import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { WagmiHeaderComponents } from 'src/lib/wagmi/components/wagmi-header-components'
+import { headerElements } from '../../_common/header-elements'
 
 export const Header: FC = () => {
   return (
     <Navigation
+      leftElements={headerElements}
       rightElement={<WagmiHeaderComponents chainIds={SUPPORTED_CHAIN_IDS} />}
     />
   )

diff --git a/apps/web/src/app/(evm)/stake/header.tsx b/apps/web/src/app/(evm)/stake/header.tsx
@@ -4,10 +4,12 @@ import { Navigation } from '@sushiswap/ui'
 import React, { FC } from 'react'
 import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { WagmiHeaderComponents } from 'src/lib/wagmi/components/wagmi-header-components'
+import { headerElements } from '../_common/header-elements'
 
 export const Header: FC = () => {
   return (
     <Navigation
+      leftElements={headerElements}
       rightElement={<WagmiHeaderComponents chainIds={SUPPORTED_CHAIN_IDS} />}
     />
   )

diff --git a/apps/web/src/app/(evm)/swap/header.tsx b/apps/web/src/app/(evm)/swap/header.tsx
@@ -5,11 +5,13 @@ import React, { FC } from 'react'
 import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { WagmiHeaderComponents } from 'src/lib/wagmi/components/wagmi-header-components'
 import { useChainId } from 'wagmi'
+import { headerElements } from '../_common/header-elements'
 
 export const Header: FC = () => {
   const chainId = useChainId()
   return (
     <Navigation
+      leftElements={headerElements}
       rightElement={<WagmiHeaderComponents chainIds={SUPPORTED_CHAIN_IDS} />}
       chainId={chainId}
     />