Setup staking page

package.json

@@ -22,6 +22,7 @@
     "@metamask/providers": "10.2.1",
     "@rainbow-me/rainbowkit": "1.3.1",
     "@tanstack/react-query": "^5.13.4",
+    "@tanstack/react-table": "^8.10.7",
     "@vercel/analytics": "^1.1.1",
     "bignumber.js": "^9.1.2",
     "clsx": "^2.0.0",

src/app/app.tsx

@@ -44,9 +44,7 @@ export function BodyLayout({ children }: PropsWithChildren<any>) {
   return (
     <div className="min-w-screen bg-taupe-100 relative flex h-full min-h-screen w-full flex-col justify-between text-black">
       <Header />
-      <div className="mx-auto flex max-w-screen-xl grow items-center sm:px-4">
-        <main className="my-4 flex w-full flex-1 items-center justify-center">{children}</main>
-      </div>
+      <main className="w-full flex-1">{children}</main>
       <Footer />
     </div>
   );

src/app/staking/page.tsx

@@ -0,0 +1,49 @@
+import { SolidButton } from 'src/components/buttons/SolidButton';
+import { Card } from 'src/components/layout/Card';
+import { Section } from 'src/components/layout/Section';
+
+export default function Index() {
+  return (
+    <div className="space-y-8">
+      <HeroSection />
+      <ListSection />
+    </div>
+  );
+}
+
+function HeroSection() {
+  return (
+    <Section className="bg-purple-500 text-white">
+      <div className="my-10 flex items-center justify-between gap-20 lg:gap-x-40 xl:gap-x-80">
+        <div className="flex w-80 flex-col space-y-6">
+          <h1 className="font-serif text-4xl">Discover Validators</h1>
+          <p>Stake your CELO with validators to start earning rewards immediately.</p>
+          <SolidButton>{`Stake and earn up to 6%`}</SolidButton>
+        </div>
+        <div className="hidden grid-cols-2 grid-rows-2 gap-10 border border-white/20 p-6 md:grid">
+          <HeroStat label="Staking APY" value="6%" />
+          <HeroStat label="Validators Groups" value="100" />
+          <HeroStat label="Elected Minimum Votes" value="12345" />
+          <HeroStat label="Total Staked CELO" value="1234567" />
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+function HeroStat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex flex-col">
+      <label>{label}</label>
+      <div className="mt-1 font-serif text-3xl">{value}</div>
+    </div>
+  );
+}
+
+function ListSection() {
+  return (
+    <Section>
+      <Card>TODO</Card>
+    </Section>
+  );
+}

src/components/buttons/OutlineButton.tsx

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+export function OutlineButton({
+  children,
+  className,
+  ...props
+}: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>) {
+  return (
+    <button
+      className={`border-taupe-300 btn btn-outline h-fit min-h-fit rounded-full px-4 py-2.5 font-semibold text-black hover:bg-black/5 ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

src/components/buttons/SolidButton.tsx

@@ -7,7 +7,7 @@ export function SolidButton({
 }: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>) {
   return (
     <button
-      className={`border-taupe-300 btn rounded-full bg-yellow-500 font-semibold text-black hover:bg-yellow-500 hover:opacity-90 ${className}`}
+      className={`border-taupe-300 btn h-fit min-h-fit rounded-full bg-yellow-500 px-5 py-2.5 font-semibold text-black hover:bg-yellow-500 hover:opacity-90 ${className}`}
       {...props}
     >
       {children}

src/components/icons/Identicon.tsx

@@ -24,15 +24,17 @@ export class Identicon extends PureComponent<Props> {
     const jazziconResult = jazzicon(size, addressToSeed(address));
 
     return (
-      <div
-        style={{ height: size, ...styles }}
-        ref={(nodeElement) => {
-          if (nodeElement) {
-            nodeElement.innerHTML = '';
-            nodeElement.appendChild(jazziconResult);
-          }
-        }}
-      ></div>
+      <div className="border-taupe-300 flex w-fit items-center justify-center rounded-full border p-px">
+        <div
+          style={{ height: size, width: size, ...styles }}
+          ref={(nodeElement) => {
+            if (nodeElement) {
+              nodeElement.innerHTML = '';
+              nodeElement.appendChild(jazziconResult);
+            }
+          }}
+        ></div>
+      </div>
     );
   }
 }

src/components/layout/Card.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+export function Card({ className, children }: PropsWithChildren<{ className?: string }>) {
+  return (
+    <div className={`card rounded-none bg-white shadow ${className}`}>
+      <div className="card-body">{children}</div>
+    </div>
+  );
+}

src/components/layout/Section.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+export function Section({ className, children }: PropsWithChildren<{ className?: string }>) {
+  return (
+    <section className={`flex w-full grow items-center ${className}`}>
+      <div className="mx-auto max-w-screen-xl px-2 sm:px-4">{children}</div>
+    </section>
+  );
+}

src/components/menus/Dropdown.tsx

@@ -19,7 +19,7 @@ export function Dropdown({
       </div>
       <div
         tabIndex={0}
-        className="dropdown-content z-[1] mt-4 w-52 rounded-box bg-white p-2 shadow"
+        className="border-taupe-300 dropdown-content z-[1] mt-3 border bg-white p-4 shadow"
       >
         {content}
       </div>
@@ -46,7 +46,7 @@ export function DropdownMenu({
       </div>
       <ul
         tabIndex={0}
-        className="menu dropdown-content z-[1] mt-4 w-52 rounded-box bg-white p-2 shadow"
+        className="border-taupe-300 menu dropdown-content z-[1] mt-3 w-52 border bg-white p-2 shadow"
       >
         {items.map((item, index) => (
           <li key={index}>{item}</li>

src/components/nav/Header.tsx

@@ -5,13 +5,13 @@ import { NavBar } from './NavBar';
 
 export function Header() {
   return (
-    <header className="relative z-30 w-screen px-3 pb-5 pt-4 sm:pl-5 sm:pr-6">
+    <header className="relative z-30 w-screen px-3 py-3 sm:px-5">
       <div className="flex items-center justify-between">
         <Link href="/" className="flex items-center md:hidden">
-          <CeloGlyph width={30} height={30}></CeloGlyph>
+          <CeloGlyph width={26} height={26}></CeloGlyph>
         </Link>
         <Link href="/" className="hidden items-center md:flex">
-          <CeloLogo width={140} height={30}></CeloLogo>
+          <CeloLogo width={110} height={26}></CeloLogo>
         </Link>
         <div className="hidden md:block">
           <NavBar />

src/components/nav/NavBar.tsx

@@ -20,7 +20,7 @@ export function NavBar() {
               key={l.label}
               className={clsx(
                 'flex items-center justify-center',
-                l.to === pathname && 'font-semibold',
+                l.to === pathname ? 'font-semibold opacity-100' : 'opacity-70',
               )}
             >
               <Link href={l.to}>{l.label}</Link>

src/components/numbers/Amount.tsx

@@ -0,0 +1,34 @@
+import BigNumber from 'bignumber.js';
+import { CELO, TokenId, getTokenByAddress, getTokenById } from 'src/config/tokens';
+import { fromWei } from 'src/utils/amount';
+
+const NUMBER_FORMAT = {
+  decimalSeparator: '.',
+  groupSeparator: ',',
+  groupSize: 3,
+};
+
+export function Amount({
+  value,
+  valueWei,
+  tokenId,
+  tokenAddress,
+  className,
+}: {
+  value?: BigNumber.Value | bigint;
+  valueWei?: string;
+  tokenId?: TokenId;
+  tokenAddress?: Address;
+  className?: string;
+}) {
+  if (valueWei) {
+    value = fromWei(valueWei);
+  }
+  const valueFormatted = BigNumber(value?.toString() || '0').toFormat(NUMBER_FORMAT);
+
+  const token =
+    (tokenId ? getTokenById(tokenId) : tokenAddress ? getTokenByAddress(tokenAddress) : null) ||
+    CELO;
+
+  return <span className={`font-serif ${className}`}>{`${valueFormatted} ${token.symbol}`}</span>;
+}

src/features/wallet/WalletDropdown.tsx

@@ -1,7 +1,11 @@
 import { useConnectModal } from '@rainbow-me/rainbowkit';
+import Link from 'next/link';
 import { toast } from 'react-toastify';
+import { OutlineButton } from 'src/components/buttons/OutlineButton';
 import { SolidButton } from 'src/components/buttons/SolidButton';
+import { Identicon } from 'src/components/icons/Identicon';
 import { Dropdown } from 'src/components/menus/Dropdown';
+import { Amount } from 'src/components/numbers/Amount';
 import { shortenAddress } from 'src/utils/addresses';
 import { tryClipboardSet } from 'src/utils/clipboard';
 import { useAccount, useDisconnect } from 'wagmi';
@@ -10,20 +14,20 @@ export function WalletDropdown() {
   const { address, isConnected } = useAccount();
   const { openConnectModal } = useConnectModal();
   const { disconnect } = useDisconnect();
-  console.log('dis', disconnect);
-
-  const onClickCopy = async () => {
-    if (!address) return;
-    await tryClipboardSet(address);
-    toast.success('Address copied to clipboard', { autoClose: 1200 });
-  };
 
   return (
-    <div className="relative mb-1 flex justify-end opacity-90">
+    <div className="relative mb-1 flex justify-end">
       {address && isConnected ? (
         <Dropdown
-          button={<SolidButton>{shortenAddress(address)}</SolidButton>}
-          content={'FOObar'}
+          button={
+            <OutlineButton className="all:py-1 pl-1.5 pr-3">
+              <div className="flex items-center justify-center space-x-1">
+                <Identicon address={address} size={26} />
+                <div className="text-sm">{shortenAddress(address, true)}</div>
+              </div>
+            </OutlineButton>
+          }
+          content={<DropdownContent address={address} disconnect={disconnect} />}
           className="dropdown-end"
         />
       ) : (
@@ -32,3 +36,46 @@ export function WalletDropdown() {
     </div>
   );
 }
+
+function DropdownContent({ address, disconnect }: { address: Address; disconnect: () => void }) {
+  const onClickCopy = async () => {
+    if (!address) return;
+    await tryClipboardSet(address);
+    toast.success('Address copied to clipboard', { autoClose: 1200 });
+  };
+
+  return (
+    <div className="flex min-w-[16rem] flex-col items-center space-y-3">
+      <div className="flex flex-col items-center">
+        <Identicon address={address} size={34} />
+        <button title="Click to copy" onClick={onClickCopy} className="text-sm">
+          {shortenAddress(address)}
+        </button>
+      </div>
+      <div className="flex flex-col items-center">
+        <label className="text-sm">Total Balance</label>
+        <Amount value={0} className="text-2xl" />
+      </div>
+      <div className="flex w-full flex-col justify-stretch">
+        <ValueRow label="Wallet Balance" value={0} />
+        <ValueRow label="Total Locked" value={0} />
+        <ValueRow label="Total Earned" value={0} />
+      </div>
+      <div className="flex w-full items-center justify-between space-x-4">
+        <Link href="/account">
+          <OutlineButton>My Account</OutlineButton>
+        </Link>
+        <OutlineButton onClick={disconnect}>Disconnect</OutlineButton>
+      </div>
+    </div>
+  );
+}
+
+function ValueRow({ label, value }: { label: string; value: string | number | bigint }) {
+  return (
+    <div className="border-taupe-300 flex flex-col border p-3">
+      <label className="text-sm">{label}</label>
+      <Amount value={value} className="text-xl" />
+    </div>
+  );
+}

tailwind.config.js

@@ -36,6 +36,10 @@ module.exports = {
       mono: ['Courier New', 'monospace'],
     },
     extend: {
+      screens: {
+        'all': '1px',
+        'xs': '480px',
+      },
       spacing: {
         100: '26rem',
         112: '28rem',

yarn.lock

@@ -449,6 +449,7 @@ __metadata:
     "@metamask/providers": "npm:10.2.1"
     "@rainbow-me/rainbowkit": "npm:1.3.1"
     "@tanstack/react-query": "npm:^5.13.4"
+    "@tanstack/react-table": "npm:^8.10.7"
     "@types/jest": "npm:^29.5.11"
     "@types/node": "npm:^20.10.4"
     "@types/react": "npm:^18.2.45"
@@ -1904,6 +1905,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:^8.10.7":
+  version: 8.10.7
+  resolution: "@tanstack/react-table@npm:8.10.7"
+  dependencies:
+    "@tanstack/table-core": "npm:8.10.7"
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: ed4eaa648854ce95264c66fd7cc0effafee35d4c34fc2d04b047be0bd48b70695e3e69b2798a4d8b4797de36bf3c0aa24973255d434d7fd4f95856760eb16031
+  languageName: node
+  linkType: hard
+
+"@tanstack/table-core@npm:8.10.7":
+  version: 8.10.7
+  resolution: "@tanstack/table-core@npm:8.10.7"
+  checksum: aa4150e03e4efe3d7a52485debbd7dc297e487a1ba0d1e1171ae84907cde8ea7e88794f812226542266ead8b7a2017c433323426eb50a1d5bc57a8b493fd5af2
+  languageName: node
+  linkType: hard
+
 "@tsconfig/node10@npm:^1.0.7":
   version: 1.0.9
   resolution: "@tsconfig/node10@npm:1.0.9"