Text align to right for status cell

Use cell metadata to align the text to the right. For this,  need to extend the type consistent for all columns. This is recommended and following the TanStack [documentation](https://tanstack.com/table/v8/docs/api/core/column-def#meta).

dapp/.eslintignore

@@ -1 +1,2 @@
 dist
+src/react-table.d.ts

dapp/src/components/TransactionHistory/Table/Cell/components/Status.tsx

@@ -1,16 +1,25 @@
 import React from "react"
 import { TransactionInfoStatus } from "#/types"
 import StatusInfo from "#/components/shared/StatusInfo"
+import { TextProps } from "@chakra-ui/react"
 import SimpleText from "./SimpleText"
 
-function Status({ status }: { status: TransactionInfoStatus }) {
+type StatusProps = {
+  status: TransactionInfoStatus
+} & TextProps
+
+function Status({ status, ...textProps }: StatusProps) {
   if (status === "syncing")
-    return <StatusInfo status={status} withDefaultColor />
+    return <StatusInfo status={status} withDefaultColor {...textProps} />
 
   if (status === "pending")
-    return <SimpleText color="grey.400">In queue</SimpleText>
+    return (
+      <SimpleText color="grey.400" {...textProps}>
+        In queue
+      </SimpleText>
+    )
 
-  return <StatusInfo status={status} />
+  return <StatusInfo status={status} {...textProps} />
 }
 
 export default Status

dapp/src/components/TransactionHistory/Table/Cell/utils/content.tsx

@@ -43,7 +43,7 @@ export const getCustomContent = (
       )
     }
     case "status": {
-      return <Status status={transaction.status} />
+      return <Status status={transaction.status} textAlign="right" />
     }
     default:
       // eslint-disable-next-line react/jsx-no-useless-fragment

dapp/src/components/TransactionHistory/Table/Header.tsx

@@ -8,12 +8,13 @@ function TableHeader({ table }: { table: UseTransactionHistoryTableResult }) {
     <Thead>
       {table.getHeaderGroups().map(({ id, headers }) => (
         <Tr key={id}>
-          {headers.map((header) => (
+          {headers.map(({ id: headerId, column, getContext }) => (
             <Th
-              key={header.id}
-              onClick={header.column.getToggleSortingHandler()}
+              key={headerId}
+              onClick={column.getToggleSortingHandler()}
+              textAlign={column.columnDef.meta?.style.textAlign}
             >
-              {flexRender(header.column.columnDef.header, header.getContext())}
+              {flexRender(column.columnDef.header, getContext())}
             </Th>
           ))}
         </Tr>

dapp/src/components/TransactionHistory/Table/utils/columns.tsx

@@ -85,6 +85,9 @@ export const COLUMNS: ColumnDef<StakeHistory, any>[] = [
   }),
   columnHelper.display({
     header: "Status",
+    meta: {
+      style: { textAlign: "right" },
+    },
     cell: ({ row: { original } }) => (
       <CustomCell
         type="status"

dapp/src/components/shared/StatusInfo/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { TransactionInfoStatus } from "#/types"
-import { Box, Icon, useMultiStyleConfig } from "@chakra-ui/react"
+import { Box, Icon, TextProps, useMultiStyleConfig } from "@chakra-ui/react"
 import { Complete, Pending, Syncing } from "#/static/icons"
 
 const DATA: Record<
@@ -14,24 +14,23 @@ const DATA: Record<
 
 type StatusInfoProps = {
   status: TransactionInfoStatus
-  color?: string
   withDefaultColor?: boolean
   withIcon?: boolean
-}
+} & TextProps
 
 export default function StatusInfo({
   status,
-  color,
   withDefaultColor,
   withIcon,
+  ...textProps
 }: StatusInfoProps) {
   const data = DATA[status]
   const styles = useMultiStyleConfig("StatusInfo", {
     ...(withDefaultColor && { colorScheme: data.colorScheme }),
   })
 
   return (
-    <Box __css={styles.container} color={color}>
+    <Box __css={styles.container} {...textProps}>
       {withIcon && <Icon as={data.icon} boxSize={5} />}
       <Box as="span" __css={styles.label}>
         {data.label}

dapp/src/react-table.d.ts

@@ -0,0 +1,9 @@
+import "@tanstack/react-table"
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    style: {
+      textAlign: "left" | "center" | "right"
+    }
+  }
+}

dapp/src/theme/StatusInfo.tsx

@@ -21,6 +21,7 @@ const baseStyleLabel = defineStyle({
   fontWeight: "semibold",
   fontSize: "sm",
   lineHeight: "sm",
+  w: "100%",
 })
 
 const baseStyle = multiStyleConfig.definePartsStyle(