chore: added HIIQ holders count

src/components/client/HIIQHolders.tsx

@@ -7,7 +7,7 @@ import { useGetHIIQHoldersRankQuery } from '@/services/holders'
 
 export default function HIIQHolders() {
   const { data, isLoading } = useGetHIIQHoldersRankQuery({
-    limit: 10,
+    limit: 100,
     offset: 0,
   })
 

src/components/dashboard/hiiq-table/columns.tsx

@@ -3,35 +3,52 @@
 import { ColumnDef } from '@tanstack/react-table'
 
 import { Button } from '@/components/ui/button'
-import { RiArrowDownSFill, RiFileCopyLine } from 'react-icons/ri'
+import { RiArrowDownSFill, RiCheckFill, RiFileCopyLine } from 'react-icons/ri'
 import { getShortenAddress } from '@/lib/helpers/getShortenAddress'
+import { useState } from 'react'
 
 export type HIIQHoldersProps = {
   address: string
   tokens: string
-  percentage?: string
-  updated: number
   created: number
 }
 
 export const columns: ColumnDef<HIIQHoldersProps>[] = [
   {
     accessorKey: 'rank',
     header: 'Rank',
+    cell: ({ row }) => {
+      return <div>{row.index + 1}</div>
+    },
   },
   {
     accessorKey: 'address',
     header: 'Address',
     cell: ({ row }) => {
+      const [isCopied, setIsCopied] = useState(false)
+
+      const handleCopy = () => {
+        navigator.clipboard.writeText(row.getValue('address'))
+        setIsCopied(true)
+        setTimeout(() => {
+          setIsCopied(false)
+        }, 3000)
+      }
+
       return (
         <div className="flex flex-row items-center gap-2">
           <span className="text-brand-500 dark:text-brand-800">
             {getShortenAddress(row.getValue('address'))}
           </span>
-          <RiFileCopyLine
-            size={18}
-            className="opacity-40 hover:opacity-70 cursor-pointer"
-          />
+          {isCopied ? (
+            <RiCheckFill size={18} className="text-green-500" />
+          ) : (
+            <RiFileCopyLine
+              size={18}
+              className="opacity-40 hover:opacity-70 cursor-pointer"
+              onClick={handleCopy}
+            />
+          )}
         </div>
       )
     },
@@ -59,25 +76,24 @@ export const columns: ColumnDef<HIIQHoldersProps>[] = [
     },
   },
   {
-    accessorKey: 'percentage',
-    header: 'Percentage',
-  },
-  {
-    accessorKey: 'update',
-    header: 'Last Updated',
+    accessorKey: 'created',
+    header: 'Date Staked',
     cell: ({ row }) => {
+      const dateString = row.getValue('created')
+      const date = new Date(dateString as string)
+
+      console.log(date)
       return (
         <div className="flex flex-row items-center gap-1 font-medium">
-          Block{' '}
-          <span className="text-brand-500 dark:text-brand-800">
-            {row.getValue('update')}
+          <span>
+            {new Date(row.getValue('created')).toLocaleDateString('en-GB', {
+              day: 'numeric',
+              month: 'short',
+              year: 'numeric',
+            })}
           </span>
         </div>
       )
     },
   },
-  {
-    accessorKey: 'dateStaked',
-    header: 'Date Staked',
-  },
 ]

src/components/dashboard/hiiq-table/data-table.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/components/ui/table'
 import { RiRefreshLine } from 'react-icons/ri'
 import { Badge } from '@/components/ui/badge'
+import { useGetHIIQHoldersCountQuery } from '@/services/holders'
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -61,6 +62,8 @@ export function DataTable<TData, TValue>({
     },
   })
 
+  const { data: count } = useGetHIIQHoldersCountQuery()
+
   return (
     <div className="rounded-xl border">
       <div className="border-b p-4 flex flex-row gap-4 items-center">
@@ -69,7 +72,7 @@ export function DataTable<TData, TValue>({
           className="bg-brand-50 text-brand-200 dark:text-brand-800"
           variant="outline"
         >
-          227 Token Holders
+          {count} Token Holders
         </Badge>
       </div>
       <div className="flex items-center justify-end gap-4 p-4">

src/services/holders/index.ts

@@ -2,7 +2,7 @@ import { createApi } from '@reduxjs/toolkit/query/react'
 import { HYDRATE } from 'next-redux-wrapper'
 import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
 import config from '@/config'
-import { DAILY_HOLDERS, HIIQ_HOLDERS_RANK } from './queries'
+import { DAILY_HOLDERS, HIIQ_HOLDERS_COUNT, HIIQ_HOLDERS_RANK } from './queries'
 
 type GetHoldersResponse = {
   IQHolders: { amount: number; day: string }[]
@@ -13,7 +13,6 @@ type GetHIIQHoldersRankResponse = {
     address: string
     tokens: string
     created: number
-    updated: number
   }[]
 }
 
@@ -45,7 +44,6 @@ export const IQHoldersApi = createApi({
         address: string
         tokens: string
         created: number
-        updated: number
       }[],
       { limit: number; offset: number }
     >({
@@ -60,9 +58,24 @@ export const IQHoldersApi = createApi({
         return response.hiIQHoldersRank
       },
     }),
+    getHIIQHoldersCount: builder.query<number, void>({
+      query: () => ({
+        document: HIIQ_HOLDERS_COUNT,
+      }),
+      transformResponse: (response: {
+        hiIQHoldersCount: { amount: number }[]
+      }) => {
+        return response.hiIQHoldersCount[0].amount
+      },
+    }),
   }),
 })
 
-export const { useGetIQHoldersQuery, useGetHIIQHoldersRankQuery } = IQHoldersApi
+export const {
+  useGetIQHoldersQuery,
+  useGetHIIQHoldersRankQuery,
+  useGetHIIQHoldersCountQuery,
+} = IQHoldersApi
 
-export const { getIQHolders, getHIIQHoldersRank } = IQHoldersApi.endpoints
+export const { getIQHolders, getHIIQHoldersRank, getHIIQHoldersCount } =
+  IQHoldersApi.endpoints

src/services/holders/queries.ts

@@ -15,8 +15,15 @@ export const HIIQ_HOLDERS_RANK = gql`
       address
       tokens
       created
-      updated
     }
   }
 
 `
+
+export const HIIQ_HOLDERS_COUNT = gql`
+  query HIIQHoldersCount {
+    hiIQHoldersCount {
+      amount
+    }
+  }
+`