Merge pull request #764 from hemilabs/ad_menustaking

Add base files and menu for staking campaign
hemilabs · Jan 16, 2025 · 3a7cb4c · 3a7cb4c
2 parents fdb36e0 + c5c4ea3
commit 3a7cb4c
Show file tree

Hide file tree

Showing 15 changed files with 200 additions and 17 deletions.
diff --git a/.github/actions/deploy-portal/action.yml b/.github/actions/deploy-portal/action.yml
@@ -45,6 +45,9 @@ inputs:
   NEXT_PUBLIC_FEATURE_FLAG_ENABLE_MAINNET:
     required: true
     description: Feature flag to enable Mainnet
+  NEXT_PUBLIC_FEATURE_FLAG_ENABLE_STAKE_CAMPAIGN:
+    required: true
+    description: Feature flag to enable Stake Campaign
   NEXT_PUBLIC_SENTRY_DSN:
     required: false
     description: Sentry DSN URL
@@ -83,6 +86,7 @@ runs:
         NEXT_PUBLIC_ENABLE_ANALYTICS: ${{ inputs.NEXT_PUBLIC_ENABLE_ANALYTICS }}
         NEXT_PUBLIC_FEATURE_FLAG_ENABLE_BTC_TUNNEL: ${{ inputs.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_BTC_TUNNEL }}
         NEXT_PUBLIC_FEATURE_FLAG_ENABLE_MAINNET: ${{ inputs.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_MAINNET }}
+        NEXT_PUBLIC_FEATURE_FLAG_ENABLE_STAKE_CAMPAIGN: ${{ inputs.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_STAKE_CAMPAIGN }}
         NEXT_PUBLIC_SENTRY_DSN: ${{ inputs.NEXT_PUBLIC_SENTRY_DSN }}
         NEXT_PUBLIC_TRACES_SAMPLE_RATE: ${{ inputs.NEXT_PUBLIC_TRACES_SAMPLE_RATE }}
         SENTRY_AUTH_TOKEN: ${{ inputs.SENTRY_AUTH_TOKEN }}

diff --git a/.github/workflows/hostinger-deployment.yml b/.github/workflows/hostinger-deployment.yml
@@ -71,6 +71,7 @@ jobs:
           NEXT_PUBLIC_ENABLE_ANALYTICS: ${{ github.event_name == 'release' }}
           NEXT_PUBLIC_FEATURE_FLAG_ENABLE_BTC_TUNNEL: ${{ vars.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_BTC_TUNNEL || 'false' }}
           NEXT_PUBLIC_FEATURE_FLAG_ENABLE_MAINNET: ${{ vars.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_MAINNET || 'false' }}
+          NEXT_PUBLIC_FEATURE_FLAG_ENABLE_STAKE_CAMPAIGN: ${{ vars.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_STAKE_CAMPAIGN || 'false' }}
           NEXT_PUBLIC_SENTRY_DSN: ${{ vars.NEXT_PUBLIC_SENTRY_DSN }}
           NEXT_PUBLIC_TRACES_SAMPLE_RATE: ${{ vars.NEXT_PUBLIC_TRACES_SAMPLE_RATE }}
           SENTRY_AUTH_TOKEN: ${{ github.event_name == 'release' && secrets.SENTRY_AUTH_TOKEN_PROD || '' }} # TODO: ASK OP TO MOVE TO ENV SECRETS

diff --git a/webapp/README.md b/webapp/README.md
@@ -16,6 +16,11 @@ NEXT_PUBLIC_WORKERS_DEBUG_ENABLE=<true|false> # enable logging on web workers
 NEXT_PUBLIC_ENABLE_ANALYTICS=<true|false> # Enable Analytics with Umami
 NEXT_PUBLIC_ANALYTICS_URL=<url> # Umami analytics URL
 NEXT_PUBLIC_ANALYTICS_WEBSITE_ID=<string> # Umami website ID
+# These env variables are required for Enabling the fallowing features
+NEXT_PUBLIC_FEATURE_FLAG_ENABLE_BTC_TUNNEL=<true|false> # Enable BTC tunnel
+NEXT_PUBLIC_FEATURE_FLAG_ENABLE_MAINNET=<true|false> # Enable mainnet network
+NEXT_PUBLIC_FEATURE_FLAG_ENABLE_STAKE_CAMPAIGN=<true|false> # Enable Staking Campaign
+
 # The following variables could be used to customize the contracts addresses used by Hemi (for example, for testing with a forked blockchain):
 NEXT_PUBLIC_ADDRESS_MANAGER=<address>
 NEXT_PUBLIC_L2_BRIDGE=<address>

diff --git a/webapp/app/[locale]/_components/header.tsx b/webapp/app/[locale]/_components/header.tsx
@@ -1,6 +1,7 @@
 import { CloseIcon } from 'components/icons/closeIcon'
 import { HamburgerIcon } from 'components/icons/hamburgerIcon'
 import { Link } from 'components/link'
+import { StakeTabs } from 'components/stakeTabs'
 import { TunnelTabs } from 'components/tunnelTabs'
 import { useTunnelOperationByConnectedWallet } from 'hooks/useTunnelOperationByConnectedWallet'
 import dynamic from 'next/dynamic'
@@ -32,6 +33,9 @@ export const Header = function ({ isMenuOpen, toggleMenu }: Props) {
           <HemiSymbol />
         </Link>
       </div>
+      <div className="hidden pl-6 md:block">
+        <StakeTabs />
+      </div>
       <div className="hidden pl-6 md:block">
         <TunnelTabs />
       </div>

diff --git a/webapp/app/[locale]/_components/navbar/_components/navItem.tsx b/webapp/app/[locale]/_components/navbar/_components/navItem.tsx
@@ -16,13 +16,15 @@ import { usePathname } from 'next/navigation'
 import { useLocale } from 'next-intl'
 import { ComponentProps, MutableRefObject, ReactNode, useState } from 'react'
 import { useOnClickOutside } from 'ui-common/hooks/useOnClickOutside'
+import { UrlObject } from 'url'
 import { isRelativeUrl } from 'utils/url'
 
 type Props = {
-  event: AnalyticsEventsWithChain
+  event?: AnalyticsEventsWithChain
   icon?: ReactNode
   rightSection?: ReactNode
   text: string
+  urlToBeSelected?: string | UrlObject
 }
 
 type Selectable = { selected?: boolean }
@@ -129,13 +131,17 @@ const PageLink = function ({
   icon,
   rightSection,
   text,
+  urlToBeSelected = href,
 }: ItemLinkProps) {
   const locale = useLocale()
   const [networkType] = useNetworkType()
   const pathname = usePathname()
   const { track } = useUmami()
 
-  const selected = pathname.startsWith(`/${locale}${href}`)
+  const selected =
+    typeof urlToBeSelected === 'string'
+      ? pathname.startsWith(`/${locale}${urlToBeSelected}`)
+      : pathname.startsWith(`/${locale}${urlToBeSelected.pathname}`)
 
   return (
     <ItemContainer

diff --git a/webapp/app/[locale]/_components/navbar/index.tsx b/webapp/app/[locale]/_components/navbar/index.tsx
@@ -7,6 +7,7 @@ import { DexIcon } from 'components/icons/dexIcon'
 import { DocsIcon } from 'components/icons/docsIcon'
 import { ElectroCardiogramIcon } from 'components/icons/electroCardiogramIcon'
 import { PoPMinerIcon } from 'components/icons/popMinerIcon'
+import { StakeIcon } from 'components/icons/stakeIcon'
 import { ToolsIcon } from 'components/icons/toolsIcon'
 import { TunnelIcon } from 'components/icons/tunnelIcon'
 import { Link } from 'components/link'
@@ -63,38 +64,48 @@ export const Navbar = function () {
           />
         </li>
         <li className="order-2">
+          {featureFlags.stakeCampaignEnabled && (
+            <ItemLink
+              href="/stake/dashboard"
+              icon={<StakeIcon />}
+              text={t('stake')}
+              urlToBeSelected="/stake"
+            />
+          )}
+        </li>
+        <li className="order-3">
           <ItemLink
             event="nav - dex"
             href="https://swap.hemi.xyz"
             icon={<DexIcon />}
             text={t('swap')}
           />
         </li>
-        <li className="order-3">
+        <li className="order-4">
           <Suspense>
             <HemiExplorerLink />
           </Suspense>
         </li>
-        <li className="order-4">
+        <li className="order-5">
           <ItemLink
             event="nav - web pop miner"
             href="https://pop-miner.hemi.xyz"
             icon={<PoPMinerIcon />}
             text={t('web-pop-miner')}
           />
         </li>
-        <li className="order-5">
+        <li className="order-6">
           <Separator />
         </li>
-        <li className="order-6">
+        <li className="order-7">
           <ItemLink
             event="nav - hbk"
             href="https://docs.hemi.xyz/building-bitcoin-apps/hemi-bitcoin-kit-hbk"
             icon={<BitcoinKitIcon />}
             text={t('bitcoinkit')}
           />
         </li>
-        <li className="order-7">
+        <li className="order-8">
           <ItemWithSubmenu
             event="nav - tools"
             icon={<ToolsIcon />}
@@ -115,26 +126,26 @@ export const Navbar = function () {
             text={t('tools')}
           />
         </li>
-        <li className="order-8">
+        <li className="order-9">
           <Separator />
         </li>
-        <li className="order-9 mb-auto">
+        <li className="order-10 mb-auto">
           <ItemLink
             event="nav - demos"
             href="/demos"
             icon={<DemosPageIcon />}
             text={t('demos')}
           />
         </li>
-        <li className="order-10 md:order-11">
+        <li className="order-11 md:order-12">
           <ItemLink
             event="nav - network status"
             href="https://hemistatus.com"
             icon={<ElectroCardiogramIcon />}
             text={t('network-status')}
           />
         </li>
-        <li className="order-11 md:order-12">
+        <li className="md:order-13 order-12">
           <ItemLink
             event="nav - docs"
             href="https://docs.hemi.xyz"
@@ -143,23 +154,23 @@ export const Navbar = function () {
           />
         </li>
         {featureFlags.mainnetEnabled && (
-          <li className="md:order-13 order-12">
+          <li className="md:order-14 order-13">
             <NetworkSwitch />
           </li>
         )}
-        <li className="order-13 md:hidden">
+        <li className="order-15 md:hidden">
           <Separator />
         </li>
-        <li className="order-14 md:order-10">
+        <li className="order-16 md:order-11">
           <GetStarted />
         </li>
-        <li className="order-15 md:order-14">
+        <li className="order-17 md:order-15">
           <SocialLinks />
         </li>
-        <li className="order-16 md:hidden">
+        <li className="order-17 md:hidden">
           <Separator />
         </li>
-        <li className="order-17 md:order-15">
+        <li className="order-18 md:order-16">
           <TermsAndConditions />
         </li>
       </ul>

diff --git a/webapp/app/[locale]/stake/dashboard/page.tsx b/webapp/app/[locale]/stake/dashboard/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { featureFlags } from 'app/featureFlags'
+import { PageTitle } from 'components/pageTitle'
+import { useTranslations } from 'next-intl'
+
+const Page = function () {
+  const t = useTranslations('stake-page')
+
+  if (!featureFlags.stakeCampaignEnabled) return null
+
+  return (
+    <div className="h-fit-rest-screen">
+      <PageTitle
+        subtitle={t('dashboard.subtitle')}
+        title={t('dashboard.title')}
+      />
+    </div>
+  )
+}
+
+export default Page
diff --git a/webapp/app/[locale]/stake/layout.tsx b/webapp/app/[locale]/stake/layout.tsx
@@ -0,0 +1,16 @@
+import { StakeTabs } from 'components/stakeTabs'
+
+type Props = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Props) => (
+  <>
+    <div className="mb-4 mt-5 md:hidden">
+      <StakeTabs />
+    </div>
+    {children}
+  </>
+)
+
+export default Layout
diff --git a/webapp/app/[locale]/stake/page.tsx b/webapp/app/[locale]/stake/page.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { featureFlags } from 'app/featureFlags'
+import { PageTitle } from 'components/pageTitle'
+import { useTranslations } from 'next-intl'
+
+const Stake = function () {
+  const t = useTranslations('stake-page')
+
+  if (!featureFlags.stakeCampaignEnabled) return null
+
+  return (
+    <div className="h-fit-rest-screen">
+      <PageTitle subtitle={t('stake.subtitle')} title={t('stake.title')} />
+    </div>
+  )
+}
+
+export default function Page() {
+  return <Stake />
+}
diff --git a/webapp/app/featureFlags.ts b/webapp/app/featureFlags.ts
@@ -3,4 +3,6 @@ export const featureFlags = {
     process.env.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_BTC_TUNNEL === 'true',
   mainnetEnabled:
     process.env.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_MAINNET === 'true',
+  stakeCampaignEnabled:
+    process.env.NEXT_PUBLIC_FEATURE_FLAG_ENABLE_STAKE_CAMPAIGN === 'true',
 }
diff --git a/webapp/app/stake/page.tsx b/webapp/app/stake/page.tsx
@@ -0,0 +1,5 @@
+import { LocalePageRedirect } from 'components/localePageRedirect'
+
+const Page = () => <LocalePageRedirect redirectPage="/stake/dashboard" />
+
+export default Page
diff --git a/webapp/components/icons/stakeIcon.tsx b/webapp/components/icons/stakeIcon.tsx
@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react'
+
+export const StakeIcon = (props: ComponentProps<'svg'>) => (
+  <svg
+    fill="none"
+    height="14"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="m3.674 2.448-.086.002a1.575 1.575 0 0 1 1.486-1.052h3.85A1.576 1.576 0 0 1 10.41 2.45c-.028-.002-.057-.002-.086-.002h-6.65ZM1.161 6.06a1.575 1.575 0 0 0-.462 1.113v3.85a1.575 1.575 0 0 0 1.575 1.575h9.45a1.573 1.573 0 0 0 1.575-1.575v-3.85a1.574 1.574 0 0 0-1.575-1.575h-9.45c-.417 0-.818.166-1.113.462Zm1.027-1.51c.029-.002.058-.002.086-.002h9.45c.029 0 .058 0 .086.002a1.577 1.577 0 0 0-1.486-1.052h-6.65A1.575 1.575 0 0 0 2.188 4.55Zm5.038 2.592a.243.243 0 0 0-.36.11L6.409 8.35l-1.186.095a.243.243 0 0 0-.138.427l.903.773-.275 1.158a.243.243 0 0 0 .362.263l1.015-.62 1.016.62a.243.243 0 0 0 .363-.264l-.276-1.157.903-.774a.243.243 0 0 0-.138-.426L7.77 8.35 7.315 7.25a.243.243 0 0 0-.09-.109Z"
+      fill="#A3A3A3"
+      fillRule="evenodd"
+    />
+  </svg>
+)
diff --git a/webapp/components/stakeTabs.tsx b/webapp/components/stakeTabs.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import { featureFlags } from 'app/featureFlags'
+import { Tab, Tabs } from 'components/tabs'
+import { usePathname } from 'next/navigation'
+import { useLocale, useTranslations } from 'next-intl'
+import { Suspense } from 'react'
+
+const StakeTabsImpl = function () {
+  const locale = useLocale()
+  const pathname = usePathname()
+  const t = useTranslations('stake-page')
+
+  if (
+    !pathname.startsWith(`/${locale}/stake/`) ||
+    !featureFlags.stakeCampaignEnabled
+  ) {
+    return null
+  }
+
+  const isInDashboard = pathname === `/${locale}/stake/dashboard/`
+  const isInStake = pathname === `/${locale}/stake/`
+
+  return (
+    <div className="flex items-center justify-center gap-x-4">
+      <Tabs>
+        <Tab href="/stake/dashboard" selected={isInDashboard}>
+          <div className="flex items-center justify-between gap-x-2">
+            <span>{t('dashboard.title')}</span>
+          </div>
+        </Tab>
+        <Tab href="/stake" selected={isInStake}>
+          <span className="flex h-full min-h-7 items-center">
+            {t('stake.title')}
+          </span>
+        </Tab>
+      </Tabs>
+    </div>
+  )
+}
+
+export const StakeTabs = () => (
+  <Suspense>
+    <StakeTabsImpl />
+  </Suspense>
+)
diff --git a/webapp/messages/en.json b/webapp/messages/en.json
@@ -172,10 +172,21 @@
     "hemidocs": "Hemi Docs",
     "network-status": "Network Status",
     "swap": "Swap",
+    "stake": "Stake",
     "tools": "Tools",
     "tunnel": "Tunnel",
     "web-pop-miner": "Web PoP Miner"
   },
+  "stake-page": {
+    "dashboard": {
+      "subtitle": "Stake your assets to earn rewards and boost your points.",
+      "title": "Dashboard"
+    },
+    "stake": {
+      "subtitle": "Stake assets to earn points and rewards.",
+      "title": "Stake"
+    }
+  },
   "token-custom-drawer": {
     "add-contract-to-preview": "Add a contract address to preview the token...",
     "add-this-pair": "Add this pair to Hemi’s token list for everyone to tunnel",

diff --git a/webapp/messages/es.json b/webapp/messages/es.json
@@ -172,10 +172,21 @@
     "hemidocs": "Documentación de Hemi",
     "network-status": "Estado de la red",
     "swap": "Intercambiar",
+    "stake": "Apostar",
     "tools": "Herramientas",
     "tunnel": "Túnel",
     "web-pop-miner": "Minero PoP Web"
   },
+  "stake-page": {
+    "dashboard": {
+      "subtitle": "Apueste sus activos para ganar recompensas y aumentar tus puntos.",
+      "title": "Panel"
+    },
+    "stake": {
+      "subtitle": "Apueste activos para ganar puntos y recompensas.",
+      "title": "Apostar"
+    }
+  },
   "token-custom-drawer": {
     "add-contract-to-preview": "Añada una dirección de contrato para previsualizar el token...",
     "add-this-pair": "Agregue este par a la lista de tokens de Hemi para que todos puedan tunelizarlos",