feat: stake page [NET-165]

next.config.js

@@ -1,6 +1,10 @@
 // https://github.com/vercel/geist-font/issues/13
 /** @type {import('next').NextConfig} */
 module.exports = {
+  webpack: (config) => {
+    config.externals.push('pino-pretty')
+    return config
+  },
   reactStrictMode: true,
   swcMinify: true,
   transpilePackages: ['geist'],

package.json

@@ -39,14 +39,15 @@
     "@react-spring/three": "^9.7.3",
     "@react-three/drei": "^9.105.6",
     "@react-three/fiber": "^8.16.3",
+    "@reown/appkit": "^1.6.0",
+    "@reown/appkit-adapter-wagmi": "^1.6.0",
     "@river-build/generated": "^0.0.127",
     "@styled-jsx/plugin-sass": "^4.0.1",
     "@tanstack/react-query": "^5.29.2",
     "@tanstack/react-query-devtools": "^5.45.0",
     "@types/seedrandom": "^3.0.8",
     "@types/three": "^0.164.0",
     "@use-gesture/react": "^10.3.1",
-    "@web3modal/wagmi": "^4.1.7",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "dotenv": "^16.4.5",
@@ -57,7 +58,7 @@
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "js-confetti": "^0.12.0",
-    "lucide-react": "^0.236.0",
+    "lucide-react": "^0.352.0",
     "mini-svg-data-uri": "^1.4.4",
     "mixpanel-browser": "^2.45.0",
     "next": "^14.2.3",
@@ -109,6 +110,7 @@
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "css-loader": "^6.8.1",
+    "encoding": "^0.1.13",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-next": "^14.2.3",

src/app/(requires-wallet)/claim/page.tsx

@@ -14,8 +14,8 @@ const Loading = () => {
   )
 }
 
-const ConnectWallet = dynamic(
-  () => import('../../../components/claim/connect-wallet').then((mod) => mod.ConnectWallet),
+const ConnectWalletSection = dynamic(
+  () => import('../../../components/claim/connect-wallet').then((mod) => mod.ConnectWalletSection),
   {
     loading: Loading,
     ssr: false,
@@ -32,7 +32,7 @@ const ClaimPage = dynamic(
 
 const Page = () => {
   const { isConnected } = useAccount()
-  return isConnected ? <ClaimPage /> : <ConnectWallet />
+  return isConnected ? <ClaimPage /> : <ConnectWalletSection />
 }
 
 export default Page

src/app/(requires-wallet)/delegate/page.tsx

@@ -14,8 +14,9 @@ const Loading = () => {
   )
 }
 
-const ConnectWallet = dynamic(
-  () => import('../../../components/delegate/connect-wallet').then((mod) => mod.ConnectWallet),
+const ConnectWalletSection = dynamic(
+  () =>
+    import('../../../components/delegate/connect-wallet').then((mod) => mod.ConnectWalletSection),
   {
     loading: Loading,
     ssr: false,
@@ -32,7 +33,7 @@ const DelegateSection = dynamic(
 
 const DelegatePage = () => {
   const { isConnected } = useAccount()
-  return isConnected ? <DelegateSection /> : <ConnectWallet />
+  return isConnected ? <DelegateSection /> : <ConnectWalletSection />
 }
 
 export default DelegatePage

src/app/(requires-wallet)/layout.tsx

@@ -1,23 +1,11 @@
-import { WalletConnectProvider } from '@/components/wallet-connect'
-import { wagmiConfig } from '@/lib/wagmi'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-
 import { FooterDivider } from '@/components/footer/footer-divider'
-import { TanstackQueryProvider } from '@/lib/context/tanstack-query-provider'
-import { headers } from 'next/headers'
-import { cookieToInitialState } from 'wagmi'
 
 const WalletLayout = ({ children }: { children: React.ReactNode }) => {
-  const initialState = cookieToInitialState(wagmiConfig, headers().get('cookie'))
-
   return (
-    <WalletConnectProvider initialState={initialState}>
-      <TanstackQueryProvider>
-        {children}
-        <FooterDivider />
-        <ReactQueryDevtools initialIsOpen={false} />
-      </TanstackQueryProvider>
-    </WalletConnectProvider>
+    <>
+      {children}
+      <FooterDivider />
+    </>
   )
 }
 

src/app/(requires-wallet)/stake/layout.tsx

@@ -0,0 +1,32 @@
+import { sharedMetadata } from '@/constants/metadata'
+import { Metadata } from 'next'
+
+const metadataTitle = 'Stake - River Protocol'
+const metadataDescription = 'Stake your tokens and earn rewards'
+
+export const metadata: Metadata = {
+  title: metadataTitle,
+  description: metadataDescription,
+  openGraph: {
+    ...sharedMetadata.openGraph,
+    url: 'https://river.build/stake',
+    title: metadataTitle,
+    description: metadataDescription,
+    images: [
+      {
+        url: '/og-image-stake.jpg',
+        alt: metadataTitle,
+      },
+    ],
+  },
+  twitter: {
+    ...sharedMetadata.twitter,
+    description: metadataDescription,
+  },
+}
+
+const StakeLayout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>
+}
+
+export default StakeLayout

src/app/(requires-wallet)/stake/page.tsx

@@ -0,0 +1,41 @@
+import { getSsrChainId } from '@/app/utils'
+import { AllOperators } from '@/components/stake/all-operators'
+import { TotalSupplyCard } from '@/components/stake/total-supply'
+import { YourAccountCard } from '@/components/stake/your-account'
+import { YourRewardsCard } from '@/components/stake/your-rewards'
+import { SwitchToBase } from '@/components/switch-to-base'
+import { getStakeableOperators } from '@/data/requests'
+import { cn } from '@/lib/utils'
+import { baseSepolia } from 'viem/chains'
+
+// TODO: add cache later
+// export const revalidate = 60
+export const dynamic = 'force-dynamic'
+
+const StakePage = async () => {
+  const chainId = getSsrChainId()
+  const env = chainId === baseSepolia.id ? 'gamma' : 'omega'
+  const initialData = await getStakeableOperators(env).catch(() => undefined)
+
+  return (
+    <section
+      className={cn(
+        'hero-glow relative w-full overflow-x-clip bg-gray-90 text-white',
+        'pb-24 pt-[88px]',
+      )}
+    >
+      <div className="container space-y-12 px-4 md:px-8 xl:max-w-screen-xl">
+        <SwitchToBase />
+
+        <TotalSupplyCard initialData={initialData} />
+        <div className="grid gap-6 md:grid-cols-2">
+          <YourAccountCard />
+          <YourRewardsCard />
+        </div>
+        <AllOperators initialData={initialData} />
+      </div>
+    </section>
+  )
+}
+
+export default StakePage

src/app/(requires-wallet)/stake/profile/connect-wallet.tsx

@@ -0,0 +1,32 @@
+import { DelegateAscii } from '@/components/delegate/delegate-ascii'
+import { ConnectWalletButton } from '@/components/ui/connect-wallet-button'
+import { Typography } from '@/components/ui/typography'
+import { cn } from '@/lib/utils'
+
+export const ConnectWalletSection = () => {
+  return (
+    <section
+      className={cn(
+        'hero-glow relative w-full overflow-x-clip bg-gray-90',
+        'flex w-full flex-col items-start justify-center gap-6',
+        'px-4 py-24',
+        'min-h-screen items-center',
+      )}
+    >
+      <DelegateAscii />
+      <div className="flex flex-col items-center gap-2">
+        <Typography
+          as="h1"
+          size="4xl"
+          className="text-[32px] font-semibold leading-[44px] text-gray-10"
+        >
+          My Stakes
+        </Typography>
+        <Typography size="sm" as="span" className="text-gray-20">
+          View your staked RVR
+        </Typography>
+      </div>
+      <ConnectWalletButton>Connect Wallet</ConnectWalletButton>
+    </section>
+  )
+}

src/app/(requires-wallet)/stake/profile/my-stakes.tsx

@@ -0,0 +1,116 @@
+import { OperatorCard } from '@/components/stake/operator-card'
+import { SwitchToBase } from '@/components/switch-to-base'
+import { Button, buttonVariants } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { useOperatorsWithDeposits, type Deposit } from '@/lib/hooks/use-stakeable-operators'
+import { useWithdraw } from '@/lib/hooks/use-withdraw'
+import { useWithdrawTimer } from '@/lib/hooks/use-withdraw-timer'
+import { cn } from '@/lib/utils'
+import { formatRVRAmount } from '@/lib/utils/formatRVRAmount'
+import Link from 'next/link'
+import { useMemo } from 'react'
+
+export const MyStakesSection = () => {
+  // TODO: this is slow and should be better with a better initial data
+  const { data: operators, pendingWithdrawals } = useOperatorsWithDeposits()
+
+  const myStakes = useMemo(() => operators.filter((operator) => operator.deposits), [operators])
+
+  return (
+    <section
+      className={cn(
+        'hero-glow relative w-full overflow-x-clip bg-gray-90 text-white',
+        'pb-24 pt-[88px]',
+      )}
+    >
+      <div className="container space-y-12 px-4 md:px-8 xl:max-w-screen-xl">
+        <SwitchToBase />
+
+        <section className="mx-auto max-w-lg space-y-4">
+          <h1 className="text-center text-2xl font-bold">My Stakes</h1>
+          {myStakes.length === 0 ? (
+            <div className="flex w-full items-center justify-center py-12">
+              <div className="flex flex-col items-center justify-center gap-4">
+                <p className="text-center text-gray-20">
+                  You currently have no stakes. Stake to start earning rewards.
+                </p>
+                <div className="w-3/4">
+                  <Link
+                    href="/stake"
+                    className={cn(
+                      buttonVariants({ variant: 'primary' }),
+                      'w-full bg-gray-10 text-gray-90',
+                    )}
+                  >
+                    Stake
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div
+              className={cn(
+                'grid grid-cols-1 gap-4',
+                myStakes.length > 2 ? 'md:grid-cols-2' : 'md:grid-cols-1',
+              )}
+            >
+              {myStakes.map((operator) => (
+                <OperatorCard key={operator.address} operator={operator} showButton />
+              ))}
+            </div>
+          )}
+        </section>
+        {pendingWithdrawals && (
+          <section className="mx-auto max-w-3xl space-y-4">
+            <h1 className="text-center text-2xl font-bold">Pending Withdrawals</h1>
+            <div
+              className={cn(
+                'grid grid-cols-2 place-items-center gap-4',
+                pendingWithdrawals.length > 2 ? 'grid-cols-2' : 'grid-cols-1',
+              )}
+            >
+              {pendingWithdrawals.map((withdrawal) => (
+                <WithdrawalCard
+                  key={`${withdrawal.delegatee}-${withdrawal.pendingWithdrawal}-${withdrawal.amount}`}
+                  withdrawal={withdrawal}
+                />
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </section>
+  )
+}
+
+const WithdrawalCard = ({ withdrawal }: { withdrawal: Deposit }) => {
+  const { lockCooldown } = useWithdraw(withdrawal.depositId)
+  const withdrawTimer = useWithdrawTimer(lockCooldown)
+  const isWithdrawable = withdrawTimer === null
+
+  return (
+    <Card className="max-w-sm">
+      <CardHeader className="p-4 pb-0">
+        <CardTitle className="text-center text-xl">
+          {formatRVRAmount(withdrawal.pendingWithdrawal)} RVR
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4 p-4 pt-0">
+        <h2 className="text-center text-lg font-bold"></h2>
+        <div className="flex flex-col items-center gap-2 sm:flex-row sm:justify-between">
+          <span className="text-gray-20">Time left</span>
+          <span className="font-medium">{withdrawTimer}</span>
+        </div>
+        <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
+          <Button
+            className={isWithdrawable ? 'w-full' : 'p-4'}
+            variant={isWithdrawable ? 'secondary' : 'primary'}
+          >
+            Redelegate
+          </Button>
+          {isWithdrawable && <Button className="-order-1 w-full">Withdrawable</Button>}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/app/(requires-wallet)/stake/profile/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import dynamic from 'next/dynamic'
+import { useAccount } from 'wagmi'
+
+const Loading = () => {
+  return (
+    <section className="hero-glow relative flex w-full flex-col justify-center overflow-x-clip bg-gray-90 pb-24 pt-[88px] md:min-h-screen">
+      <div className="flex h-full w-full flex-grow items-center justify-center text-white">
+        <Loader2 className="h-4 w-4 animate-spin" />
+      </div>
+    </section>
+  )
+}
+
+const ConnectWalletSection = dynamic(
+  () => import('./connect-wallet').then((mod) => mod.ConnectWalletSection),
+  {
+    loading: Loading,
+    ssr: false,
+  },
+)
+
+const MyStakesSection = dynamic(() => import('./my-stakes').then((mod) => mod.MyStakesSection), {
+  loading: Loading,
+  ssr: false,
+})
+
+const MyStakesPage = () => {
+  const { isConnected } = useAccount()
+  return isConnected ? <MyStakesSection /> : <ConnectWalletSection />
+}
+
+export default MyStakesPage