Feat/hiiq holders table

package.json

@@ -33,14 +33,19 @@
     "@ensdomains/ens-avatar": "^0.1.6",
     "@everipedia/wagmi-magic-connector": "^1.0.0",
     "@metamask/detect-provider": "^1.2.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@reduxjs/toolkit": "^1.8.3",
     "@rtk-query/graphql-request-base-query": "^2.1.0",
+    "@tanstack/react-table": "^8.20.5",
     "@types/uuid": "^8.3.4",
     "@zag-js/react": "^0.1.9",
     "@zag-js/tags-input": "^0.2.0",
     "alchemy-sdk": "^2.0.4",
     "axios": "^0.27.2",
     "boring-avatars": "^1.7.0",
+    "class-variance-authority": "^0.7.0",
     "date-fns": "^2.28.0",
     "debounce": "^1.2.1",
     "embla-carousel-autoplay": "^8.0.0-rc03",
@@ -54,6 +59,7 @@
     "graphql-request": "^6.1.0",
     "humanize-plus": "^1.8.2",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.456.0",
     "next": "^13.2.3",
     "next-redux-wrapper": "^7.0.5",
     "next-seo": "^5.5.0",
@@ -70,6 +76,8 @@
     "regenerator-runtime": "^0.13.11",
     "short-number": "^1.0.7",
     "slick-carousel": "^1.8.1",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
     "ual-anchor": "^1.3.0",
     "ual-reactjs-renderer": "^0.3.1",
     "universal-authenticator-library": "^0.3.0",
@@ -89,8 +97,11 @@
     "@types/react-dom": "18.0.5",
     "@types/react-slick": "^0.23.10",
     "@types/react-table": "^7.7.12",
+    "autoprefixer": "^10.4.20",
     "husky": "^8.0.1",
+    "postcss": "^8.4.49",
     "rome": "12.0.0",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.1.6"
   },
   "engines": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/dashboard/(hiiq)/hiiq-holders/page.tsx

@@ -0,0 +1,10 @@
+import HIIQHolders from '@/components/client/HIIQHolders'
+import React from 'react'
+
+export default function page() {
+  return (
+    <div>
+      <HIIQHolders />
+    </div>
+  )
+}

src/app/dashboard/(hiiq)/layout.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+const tabs = [
+  {
+    label: 'Stake',
+    id: 'stake',
+  },
+  {
+    label: 'HIIQ Holders',
+    id: 'hiiq-holders',
+  },
+]
+
+export default function layout({ children }: { children: React.ReactNode }) {
+  const path = usePathname()
+
+  return (
+    <div className="flex flex-col gap-6 mt-6 relative">
+      <div className="flex gap-4 flex-row items-center justify-center">
+        {tabs.map((tab) => (
+          <Link
+            key={tab.id}
+            href={`/dashboard/${tab.id}`}
+            className={cn(
+              'pb-2 border-b-4 px-2',
+              path?.includes(tab.id)
+                ? 'border-brand-500 dark:border-brand-800'
+                : ' border-none',
+            )}
+          >
+            {tab.label}
+          </Link>
+        ))}
+      </div>
+      <div className="absolute h-[0.5px] w-[calc(100vw)] -ml-[calc(50vw-50%)] border-b border-gray-300 dark:border-gray-600 top-9 -z-40" />
+      <div>{children}</div>
+    </div>
+  )
+}

src/app/dashboard/stake/page.tsx → src/app/dashboard/(hiiq)/stake/page.tsx

@@ -1,6 +1,5 @@
 import StakePage from '@/components/client/StakePage'
 import { Metadata } from 'next'
-import React from 'react'
 
 export const metadata: Metadata = {
   title: 'Stake Page',
@@ -12,6 +11,7 @@ export const metadata: Metadata = {
       'Stake IQ to earn IQ token rewards and NFT raffles. The more IQ staked and longer you stake for the greater the rewards you earn and the chance of winning NFTs.',
   },
 }
+
 const Page = () => {
   return <StakePage />
 }

styles/globals.css → src/app/global.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   padding: 0;

src/app/layout.tsx

@@ -1,4 +1,78 @@
 import 'regenerator-runtime/runtime'
 import React from 'react'
-const RootLayout = ({ children }: { children: React.ReactNode }) => children
+import { Metadata } from 'next'
+import AppProviders from '@/components/client/AppProviders'
+import ColorMode from '@/components/chakra/ColorMode'
+import './global.css'
+
+export const metadata: Metadata = {
+  title: {
+    default: 'BrainDAO | native DAO and treasury of the IQ Token',
+    template: '%s | BrainDAO',
+  },
+  metadataBase: new URL('https://iq.braindao.org/'),
+  description:
+    'BrainDAO is the native DAO and treasury of the IQ Token which powers IQ.wiki',
+  openGraph: {
+    title: 'BrainDAO | native DAO and treasury of the IQ Token',
+    description:
+      'BrainDAO is the native DAO and treasury of the IQ Token which powers IQ.wiki',
+    url: 'https://iq.braindao.org/dashboard',
+    siteName: 'IQ Dashboard',
+    type: 'website',
+    images: [
+      {
+        url: 'https://iq.braindao.org/og_image.png',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    creator: '@IQWiki',
+    site: 'IQ GPT',
+  },
+}
+
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
+        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+        <meta
+          property="og:image"
+          content="https://iq.braindao.org/og_image.png"
+        />
+        <meta name="image:type" content="png" />
+        <meta
+          property="twitter:image"
+          content="https://iq.braindao.org/og_image.png"
+        />
+        <meta name="twitter:image:type" content="png" />
+        <meta name="twitter:image:width" content="300px" />
+        <meta name="twitter:image:height" content="157px" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="debank-cloud-site-verification"
+          content="bba105af03355b417ae9969b16131dea"
+        />
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content="black-translucent"
+        />
+        <link rel="manifest" href="/manifest.json" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+        />
+      </head>
+      <body>
+        <ColorMode />
+        <AppProviders>{children}</AppProviders>
+      </body>
+    </html>
+  )
+}
+
 export default RootLayout

src/app/theme-provider.tsx

@@ -0,0 +1,16 @@
+import { useColorMode } from '@chakra-ui/react'
+import { type ReactNode, useEffect } from 'react'
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const { colorMode } = useColorMode()
+
+  useEffect(() => {
+    if (colorMode === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, [colorMode])
+
+  return children
+}

src/components/client/AppProviders.tsx

@@ -11,6 +11,7 @@ import { store } from '@/store/store'
 import { DashboardLayout } from '@/components/dashboard/layout'
 import chakraTheme from '@/theme'
 import { CSPostHogProvider } from './PosthogProvider'
+import { ThemeProvider } from '../../app/theme-provider'
 
 const { ToastContainer } = createStandaloneToast()
 const ReduxProvider = ReduxProviderClass as (props: Dict) => JSX.Element
@@ -27,12 +28,14 @@ const AppProviders = ({ children }: { children: React.ReactNode }) => {
     <>
       <ReduxProvider store={store}>
         <ChakraProvider resetCSS theme={chakraTheme}>
-          <Fonts />
-          <WagmiConfig config={client}>
-            <CSPostHogProvider>
-              <DashboardLayout>{children}</DashboardLayout>
-            </CSPostHogProvider>
-          </WagmiConfig>
+          <ThemeProvider>
+            <Fonts />
+            <WagmiConfig config={client}>
+              <CSPostHogProvider>
+                <DashboardLayout>{children}</DashboardLayout>
+              </CSPostHogProvider>
+            </WagmiConfig>
+          </ThemeProvider>
         </ChakraProvider>
       </ReduxProvider>
 

src/components/client/HIIQHolders.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import React, { useState } from 'react'
+import { columns } from '../dashboard/hiiq-table/columns'
+import { DataTable } from '../dashboard/hiiq-table/data-table'
+import {
+  useGetHIIQHoldersCountQuery,
+  useGetHIIQHoldersRankQuery,
+} from '@/services/holders'
+import { useSearchParams } from 'next/navigation'
+
+const ITEMS_PER_PAGE = 10
+
+export default function HIIQHolders() {
+  const searchParams = useSearchParams()
+  const page = Number(searchParams?.get('page') || '1')
+  const offset = (page - 1) * ITEMS_PER_PAGE
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const { data, isLoading } = useGetHIIQHoldersRankQuery({
+    limit: ITEMS_PER_PAGE,
+    offset: offset,
+  })
+  const { data: count } = useGetHIIQHoldersCountQuery()
+
+  const filteredData =
+    data?.filter((holder) =>
+      holder.address.toLowerCase().includes(searchTerm.toLowerCase()),
+    ) || []
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+  const totalPages = count ? Math.ceil(count / ITEMS_PER_PAGE) : 1
+
+  return (
+    <div className="flex flex-col gap-6 mt-6 lg:mt-0">
+      <div className="space-y-1">
+        <h1 className="text-base lg:text-2xl font-semibold">
+          HiIQ Token Holders
+        </h1>
+        <p className="text-sm lg:text-base font-medium text-[#475569] dark:text-[#D2D2D2]">
+          View key data and insights on HiIQ token holders.
+        </p>
+      </div>
+      <DataTable
+        columns={columns}
+        data={filteredData}
+        totalPages={totalPages}
+        currentPage={page}
+        onSearch={setSearchTerm}
+        searchTerm={searchTerm}
+      />
+    </div>
+  )
+}