diff --git a/src/components/client/HIIQHolders.tsx b/src/components/client/HIIQHolders.tsx index 3fb86c59..3b03543d 100644 --- a/src/components/client/HIIQHolders.tsx +++ b/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, }) diff --git a/src/components/dashboard/hiiq-table/columns.tsx b/src/components/dashboard/hiiq-table/columns.tsx index e609697a..8c52e9e7 100644 --- a/src/components/dashboard/hiiq-table/columns.tsx +++ b/src/components/dashboard/hiiq-table/columns.tsx @@ -3,14 +3,13 @@ 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 } @@ -18,20 +17,38 @@ export const columns: ColumnDef[] = [ { accessorKey: 'rank', header: 'Rank', + cell: ({ row }) => { + return
{row.index + 1}
+ }, }, { 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 (
{getShortenAddress(row.getValue('address'))} - + {isCopied ? ( + + ) : ( + + )}
) }, @@ -59,25 +76,24 @@ export const columns: ColumnDef[] = [ }, }, { - 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 (
- Block{' '} - - {row.getValue('update')} + + {new Date(row.getValue('created')).toLocaleDateString('en-GB', { + day: 'numeric', + month: 'short', + year: 'numeric', + })}
) }, }, - { - accessorKey: 'dateStaked', - header: 'Date Staked', - }, ] diff --git a/src/components/dashboard/hiiq-table/data-table.tsx b/src/components/dashboard/hiiq-table/data-table.tsx index 63db082b..65f02113 100644 --- a/src/components/dashboard/hiiq-table/data-table.tsx +++ b/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 { columns: ColumnDef[] @@ -61,6 +62,8 @@ export function DataTable({ }, }) + const { data: count } = useGetHIIQHoldersCountQuery() + return (
@@ -69,7 +72,7 @@ export function DataTable({ className="bg-brand-50 text-brand-200 dark:text-brand-800" variant="outline" > - 227 Token Holders + {count} Token Holders
diff --git a/src/services/holders/index.ts b/src/services/holders/index.ts index c3203401..ec19306e 100644 --- a/src/services/holders/index.ts +++ b/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({ + 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 diff --git a/src/services/holders/queries.ts b/src/services/holders/queries.ts index 2d0a326e..34020c07 100644 --- a/src/services/holders/queries.ts +++ b/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 + } + } +`