add all missing translations

src/components/client/HIIQHolders.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import React, { useState, useCallback } from 'react'
-import { columns } from '../dashboard/hiiq-table/columns'
 import { DataTable } from '../dashboard/hiiq-table/data-table'
 import {
   useGetHIIQHoldersCountQuery,
@@ -83,13 +82,14 @@ export default function HIIQHolders() {
   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">{t('title')}</h1>
+        <h1 className="text-base lg:text-2xl font-semibold">
+          {`HiIQ ${t('tokenHolders')}`}
+        </h1>
         <p className="text-sm lg:text-base font-medium text-[#475569] dark:text-[#D2D2D2]">
           {t('description')}
         </p>
       </div>
       <DataTable
-        columns={columns}
         data={displayData}
         totalPages={totalPages}
         currentPage={page}

src/components/client/StakePage.tsx

@@ -132,12 +132,12 @@ const StakePage = () => {
   }
 
   const tabs = {
-    'Stake more IQ': {
+    stakeMore: {
       label: 'stakeMore',
       borderLeftRadius: '5',
       borderRightColor: 'transparent',
     },
-    'Increase Stake time': {
+    increaseTime: {
       label: 'increaseTime',
       borderRightRadius: '5',
       borderLeftColor: 'transparent',
@@ -219,7 +219,7 @@ const StakePage = () => {
                         _selected={{ color: 'white', bg: 'brandText' }}
                         {...tabProps}
                       >
-                        {t(label)}
+                        {t(`tabs.${label}`)}
                       </Tab>
                     ))}
                   </TabList>

src/components/client/VotingPage.tsx

@@ -68,6 +68,8 @@ type VotingItemProps = {
   active?: boolean
 }
 const VotingItem = (props: VotingItemProps) => {
+  const t = useTranslations('voting.votingItem')
+
   const { item, active } = props
   const date = new Date(item.end * 1000)
 
@@ -95,7 +97,7 @@ const VotingItem = (props: VotingItemProps) => {
       <Flex alignItems="center" fontSize="sm" gap="1">
         <IQLogo width={6} height={6} />
         <Text ml="1" fontWeight="medium">
-          Created by{' '}
+          {t('createdBy')}
         </Text>{' '}
         <Link
           href={`https://snapshot.org/#/profile/${item.author}`}
@@ -112,7 +114,7 @@ const VotingItem = (props: VotingItemProps) => {
           ml="auto"
           fontWeight="medium"
         >
-          <b>{active ? 'Ends' : 'Ended'}:</b> {formattedDate}
+          <b>{active ? t('ends') : t('ended')}:</b> {formattedDate}
         </Text>
       </Flex>
       <LinkOverlay

src/components/dashboard/Exchanges.tsx

@@ -42,7 +42,7 @@ const ExchangeLink: React.FC<IconButtonProps> = ({
 }
 
 const Exchanges = () => {
-  const t = useTranslations('tokenData')
+  const t = useTranslations('dashboard.tokenData')
 
   return (
     <Flex

src/components/dashboard/GraphComponent.tsx

@@ -9,6 +9,7 @@ import GraphLine from './GraphLine'
 import GraphPeriodWrapper from './GraphPeriodWrapper'
 import type { Dict } from '@chakra-ui/utils'
 import { Link } from '@/i18n/routing'
+import { useTranslations } from 'next-intl'
 
 const GraphComponent = ({
   graphTitle,
@@ -37,6 +38,8 @@ const GraphComponent = ({
   isHolderGraph?: boolean
   iqPrice?: number
 }) => {
+  const t = useTranslations('treasury')
+
   return (
     <Box
       rounded="lg"
@@ -214,7 +217,7 @@ const GraphComponent = ({
                     size={{ xl: 'xl', base: 'md' }}
                   />
                   <Text mt="5" color="tooltipColor">
-                    Fetching chart data
+                    {t('fetchingChartData')}
                   </Text>
                 </Flex>
               )}
@@ -273,7 +276,7 @@ const GraphComponent = ({
                     size={{ xl: 'xl', base: 'md' }}
                   />
                   <Text mt="5" color="tooltipColor">
-                    Fetching chart data
+                    {t('fetchingChartData')}
                   </Text>
                 </Flex>
               )}

src/components/dashboard/TreasuryGraphTable.tsx

@@ -31,6 +31,7 @@ import {
   useGetGraphDataQuery,
 } from '@/services/treasury/restApi'
 import { getCurrentTreasuryValue } from '@/utils/getTreasuryValue'
+import { useTranslations } from 'next-intl'
 
 export const TreasuryGraphTable = ({
   setTreasuryValue,
@@ -56,6 +57,8 @@ export const TreasuryGraphTable = ({
   const { colorMode } = useColorMode()
   const isTokenFetched = useRef(false)
 
+  const t = useTranslations('treasury.graphTable')
+
   const onPieEnter = useCallback<OnPieEnter>(
     (_, index) => {
       setActiveIndex(index)
@@ -118,19 +121,19 @@ export const TreasuryGraphTable = ({
   return (
     <>
       <PageHeader
-        header={`Tokens ($${formatValue(accountValue)})`}
+        header={`${t('tokens')} ($${formatValue(accountValue)})`}
         portfolios={[
           {
-            label: 'ETH Treasury',
+            label: t('label1'),
             externalLink:
               'https://debank.com/profile/0x56398b89d53e8731bca8c1b06886cfb14bd6b654',
-            tooltipLabel: 'Debank- ETH Treasury',
+            tooltipLabel: t('tooltipLabel1'),
           },
           {
-            label: 'FXTL Treasury',
+            label: t('label2'),
             externalLink:
               'https://debank.com/profile/0x5493F3dbE06aCCd1F51568213de839498a2A3b83',
-            tooltipLabel: 'Debank- FXTL Treasury',
+            tooltipLabel: t('tooltipLabel2'),
           },
         ]}
       />
@@ -172,7 +175,7 @@ export const TreasuryGraphTable = ({
                     textAlign={i === arr.length - 1 ? 'center' : 'initial'}
                     fontSize={{ base: '10' }}
                   >
-                    {key}
+                    {t(key)}
                   </Th>
                 ))}
               </Tr>

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

@@ -14,10 +14,12 @@ export type HIIQHoldersProps = {
   updated: number
 }
 
-export const columns: ColumnDef<HIIQHoldersProps>[] = [
+export const getColumns = (
+  t: (key: string) => string,
+): ColumnDef<HIIQHoldersProps>[] => [
   {
     accessorKey: 'rank',
-    header: 'Rank',
+    header: t('holders.hiiqTableHeader1'),
     cell: ({ row }) => {
       const ITEMS_PER_PAGE = 10
       const page = Math.max(
@@ -30,7 +32,7 @@ export const columns: ColumnDef<HIIQHoldersProps>[] = [
   },
   {
     accessorKey: 'address',
-    header: 'Address',
+    header: t('holders.hiiqTableHeader2'),
     cell: ({ row }) => {
       const [isCopied, setIsCopied] = useState(false)
 
@@ -81,7 +83,7 @@ export const columns: ColumnDef<HIIQHoldersProps>[] = [
           className="p-0"
           onClick={() => column.toggleSorting()}
         >
-          HiIQ Balance
+          {t('holders.hiiqTableHeader3')}
           <RiArrowDownSFill className="ml-2 h-4 w-4" />
         </Button>
       )
@@ -99,7 +101,7 @@ export const columns: ColumnDef<HIIQHoldersProps>[] = [
   },
   {
     accessorKey: 'updated',
-    header: 'Date Updated',
+    header: t('holders.hiiqTableHeader4'),
     cell: ({ row }) => {
       return (
         <div className="flex flex-row items-center gap-1 font-medium">

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

@@ -10,9 +10,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-
 import { Input } from '@/components/ui/input'
-
 import {
   Table,
   TableBody,
@@ -25,9 +23,10 @@ import { RiLoaderLine } from 'react-icons/ri'
 import { Badge } from '@/components/ui/badge'
 import { useGetHIIQHoldersCountQuery } from '@/services/holders'
 import { TablePagination } from './pagination'
+import { useTranslations } from 'next-intl'
+import { getColumns } from './columns'
 
 interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
   data: TData[]
   totalPages: number
   currentPage: number
@@ -37,7 +36,6 @@ interface DataTableProps<TData, TValue> {
 }
 
 export function DataTable<TData, TValue>({
-  columns,
   data,
   totalPages,
   currentPage,
@@ -46,10 +44,12 @@ export function DataTable<TData, TValue>({
   isSearching,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([])
+  const t = useTranslations('hiiq')
+  const columns = getColumns(t)
 
   const table = useReactTable({
     data,
-    columns,
+    columns: columns as ColumnDef<TData, TValue>[],
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onSortingChange: setSorting,
@@ -60,10 +60,11 @@ export function DataTable<TData, TValue>({
   })
 
   const { data: count, isLoading } = useGetHIIQHoldersCountQuery()
+
   return (
     <div className="rounded-xl border mb-20">
       <div className="border-b p-4 flex flex-row gap-4 items-center">
-        <h1>HiIQ Holders</h1>
+        <h1>{t('tabs.hiiqHoldersLabel')}</h1>
         <Badge
           className="bg-brand-50 text-brand-500 dark:text-brand-800 border-0 py-1 px-1.5"
           variant="outline"
@@ -73,12 +74,12 @@ export function DataTable<TData, TValue>({
           ) : (
             count ?? 0
           )}{' '}
-          Token Holders
+          {t('holders.tokenHolders')}
         </Badge>
       </div>
       <div className="flex items-center justify-end p-4">
         <Input
-          placeholder="Search by address..."
+          placeholder={t('holders.searchPlaceholder')}
           value={searchTerm}
           onChange={(event) => onSearch(event.target.value)}
           className="max-w-sm bg-transparent"
@@ -88,18 +89,16 @@ export function DataTable<TData, TValue>({
         <TableHeader className="bg-gray-50 dark:bg-gray-800 border-t">
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                  </TableHead>
-                )
-              })}
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </TableHead>
+              ))}
             </TableRow>
           ))}
         </TableHeader>
@@ -109,7 +108,7 @@ export function DataTable<TData, TValue>({
               <TableCell colSpan={columns.length} className="h-24 text-center">
                 <div className="flex items-center justify-center">
                   <RiLoaderLine className="animate-spin mr-2" size={18} />
-                  Searching...
+                  {t('holders.hiiqTableStatus.searching')}
                 </div>
               </TableCell>
             </TableRow>
@@ -129,7 +128,7 @@ export function DataTable<TData, TValue>({
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                {t('holders.hiiqTableStatus.noResults')}
               </TableCell>
             </TableRow>
           )}

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

@@ -5,6 +5,7 @@ import { useSearchParams, useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Table } from '@tanstack/react-table'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+import { useTranslations } from 'next-intl'
 
 interface PaginationProps<T> {
   table: Table<T>
@@ -16,6 +17,8 @@ export function TablePagination<T>({
   currentPage,
   totalPages,
 }: PaginationProps<T>) {
+  const t = useTranslations('hiiq.holders')
+
   const router = useRouter()
   const searchParams = useSearchParams()
 
@@ -91,7 +94,7 @@ export function TablePagination<T>({
 
       <div className="lg:hidden flex items-center">
         <span className="text-sm">
-          Page {currentPage} of {totalPages}
+          {t('page')} {currentPage} {t('of')} {totalPages}
         </span>
       </div>
 

src/components/elements/PieChart/Chart.tsx

@@ -7,6 +7,7 @@ import {
   ChartConstantNonTreasury,
 } from '@/types/chartType'
 import RenderActiveShape from './RenderActiveShape'
+import { useTranslations } from 'next-intl'
 
 const Chart = ({
   chartData,
@@ -18,6 +19,8 @@ const Chart = ({
   CHART_COLORS,
   isTreasuryPage = false,
 }: ChartType) => {
+  const t = useTranslations('treasury')
+
   return (
     <Box>
       {chartData.length > 0 ? (
@@ -75,7 +78,7 @@ const Chart = ({
         >
           <VStack>
             <CircularProgress isIndeterminate color="brandText" />
-            <Text color="tooltipColor">Fetching chart data</Text>
+            <Text color="tooltipColor">{t('fetchingChartData')}</Text>
           </VStack>
         </Box>
       )}