Merge pull request #39 from Quantus-Network/feat/some-updates

Some updates

Author: dewabisma

.cursor/skills/code-review/SKILL.md

@@ -0,0 +1,58 @@
+You are an Expert Staff Frontend Engineer performing a code review. Your goal is to ensure the code is robust, performant, accessible, and maintainable. You balance rigorous engineering standards with pragmatic delivery.
+
+TECH STACK CONTEXT:
+
+- Web Development (HTML5, CSS3, Modern Browser APIs)
+- TypeScript (Strict Mode)
+- JavaScript (ES6+)
+- React Ecosystem (Functional components, Hooks, Context)
+
+REVIEW GUIDELINES:
+
+1. TypeScript Rigor:
+
+- Flag any use of `any`. Suggest specific types, `unknown`, or generics.
+- Catch overly permissive types or missing return types on complex functions.
+- If a custom type/interface is missing from the provided context, point it out only if it obscures a potential bug.
+
+2. React Best Practices:
+
+- Enforce the Rules of Hooks (e.g., missing dependencies in `useEffect` or `useCallback`).
+- Identify unnecessary re-renders. Suggest `useMemo` or `useCallback` ONLY where it objectively improves performance. Do not prematurely optimize.
+- Flag anti-patterns (e.g., using indexes as keys, mutating state directly, derived state).
+
+3. Architecture & Clean Code:
+
+- Highlight components violating the Single Responsibility Principle.
+- Catch duplicated logic that should be extracted into custom hooks or utilities.
+- Flag "magic strings/numbers" and suggest constants.
+
+4. Web Vitals & Accessibility (a11y):
+
+- Flag missing `alt` tags, incorrect ARIA attributes, or non-semantic HTML.
+- Note potential performance bottlenecks (e.g., missing lazy loading for heavy components).
+
+5. Testing & Security:
+
+- If tests are provided, flag tests that check implementation details rather than user behavior.
+- Flag potential XSS vulnerabilities (e.g., `dangerouslySetInnerHTML`).
+
+OUTPUT FORMAT:
+Provide your review in structured Markdown. Use the following severity tags:
+
+- [BLOCKER]: Critical bug, security flaw, or massive anti-pattern. Must fix.
+- [SUGGESTION]: Strong recommendation for better performance, typing, or readability.
+- [NITPICK]: Minor styling, naming conventions, or formatting.
+- [QUESTION]: Use this if the provided code snippet is missing critical context (e.g., an imported hook or state shape) needed to accurately review it.
+
+For every issue found, provide:
+
+1. File name and line number (if applicable).
+2. A brief, objective explanation of _why_ it is an issue.
+3. A short, corrected code snippet demonstrating the fix (only the modified lines).
+
+TONE & BEHAVIOR:
+
+- Be objective, constructive, and concise.
+- UNDER NO CIRCUMSTANCES should you include introductory or concluding conversational filler (e.g., "Here is your review," "Great job," or "Let me know if you need help").
+- Output ONLY the structured review.

src/components/common/table-columns/BLOCK_COLUMNS.tsx

@@ -35,7 +35,7 @@ export const BLOCK_COLUMNS = [
     id: 'extrinsicsCount',
     header: 'Extrinsics',
     cell: (props) => props.getValue(),
-    enableSorting: false
+    enableSorting: true
   }),
   columnHelper.accessor('reward', {
     id: 'reward',

src/components/common/table-columns/EXTRINSIC_COLUMNS.tsx

@@ -5,6 +5,7 @@ import { TimestampDisplay } from '@/components/ui/timestamp-display';
 import { RESOURCES } from '@/constants/resources';
 import { cn } from '@/lib/utils';
 import type { BlockExtrinsic } from '@/schemas/blocks';
+import { getExtrinsicDetailPath } from '@/utils/get-extrinsic-detail-path';
 import { formatMonetaryValue, formatTxAddress } from '@/utils/formatter';
 
 const columnHelper = createColumnHelper<BlockExtrinsic>();
@@ -26,32 +27,7 @@ export const createExtrinsicColumns = () => {
       cell: (props) => {
         const hash = props.getValue();
         const { pallet, call } = props.row.original;
-
-        // Determine the appropriate resource based on pallet
-        let href = '';
-        if (pallet === 'Wormhole') {
-          href = `${RESOURCES.wormhole}/${hash}`;
-        } else if (pallet === 'Balances') {
-          href = `${RESOURCES.transactions}/${hash}`;
-        } else if (
-          pallet === 'ReversibleTransfers' &&
-          call === 'schedule_transfer'
-        ) {
-          href = `${RESOURCES.scheduledReversibleTransactions}/${hash}`;
-        } else if (
-          pallet === 'ReversibleTransfers' &&
-          call === 'execute_transfer'
-        ) {
-          href = `${RESOURCES.executedReversibleTransactions}/${hash}`;
-        } else if (
-          pallet === 'ReversibleTransfers' &&
-          call === 'cancel_transfer'
-        ) {
-          href = `${RESOURCES.cancelledReversibleTransactions}/${hash}`;
-        } else {
-          // Default to transactions for now
-          href = `${RESOURCES.transactions}/${hash}`;
-        }
+        const href = getExtrinsicDetailPath({ id: hash, pallet, call });
 
         return (
           <LinkWithCopy

src/components/common/table-columns/TRANSACTION_COLUMNS.tsx

@@ -4,6 +4,7 @@ import { LinkWithCopy } from '@/components/ui/composites/link-with-copy/LinkWith
 import { TimestampDisplay } from '@/components/ui/timestamp-display';
 import { RESOURCES } from '@/constants/resources';
 import type { Transaction } from '@/schemas';
+import { getExtrinsicDetailPath } from '@/utils/get-extrinsic-detail-path';
 import { formatMonetaryValue, formatTxAddress } from '@/utils/formatter';
 
 const columnHelper = createColumnHelper<Transaction>();
@@ -12,16 +13,26 @@ export const TRANSACTION_COLUMNS = [
   columnHelper.accessor('extrinsic.id', {
     id: 'tx-hash',
     header: 'Hash',
-    cell: (props) =>
-      props.getValue() ? (
+    cell: (props) => {
+      const extrinsicId = props.getValue();
+      const extrinsic = props.row.original.extrinsic;
+
+      if (!extrinsicId || !extrinsic?.pallet || !extrinsic?.call) {
+        return 'Is not available';
+      }
+
+      return (
         <LinkWithCopy
-          href={`${RESOURCES.transactions}/${props.getValue()}`}
-          text={formatTxAddress(props.getValue() ?? '-')}
-          textCopy={props.getValue() ?? ''}
+          href={getExtrinsicDetailPath({
+            id: extrinsicId,
+            pallet: extrinsic.pallet,
+            call: extrinsic.call
+          })}
+          text={formatTxAddress(extrinsicId)}
+          textCopy={extrinsicId}
         />
-      ) : (
-        'Is not available'
-      ),
+      );
+    },
     enableSorting: false
   }),
   columnHelper.accessor('block.height', {

src/components/features/block-listing/blocks-table/hook.tsx

@@ -5,8 +5,7 @@ import useApiClient from '@/api';
 import { BLOCK_COLUMNS } from '@/components/common/table-columns/BLOCK_COLUMNS';
 import { DATA_POOL_INTERVAL } from '@/constants/data-pool-interval';
 import { QUERY_DEFAULT_LIMIT } from '@/constants/query-default-limit';
-import type { BlockSorts } from '@/constants/query-sorts';
-import { useOrderBy } from '@/hooks/useOrderBy';
+import { transformBlockOrderBy } from '@/constants/query-sorts';
 import { useTableState } from '@/hooks/useTableState';
 import type { Block } from '@/schemas';
 import { transformSortLiteral } from '@/utils/transform-sort';
@@ -22,7 +21,10 @@ export const useBlocksTable = () => {
     paginationValue
   } = useTableState('timestamp:desc', QUERY_DEFAULT_LIMIT);
 
-  const orderByObject = useOrderBy<BlockSorts>(orderBy ?? 'timestamp:desc');
+  const orderByObject = useMemo(
+    () => transformBlockOrderBy(orderBy ?? 'timestamp:desc'),
+    [orderBy]
+  );
   const sortingValue = transformSortLiteral(orderBy);
 
   const {

src/components/features/landing/block-tables/hook.tsx

@@ -4,8 +4,7 @@ import { useMemo } from 'react';
 import useApiClient from '@/api';
 import { BLOCK_COLUMNS } from '@/components/common/table-columns/BLOCK_COLUMNS';
 import { DATA_POOL_INTERVAL } from '@/constants/data-pool-interval';
-import type { BlockSorts } from '@/constants/query-sorts';
-import { useOrderBy } from '@/hooks/useOrderBy';
+import { transformBlockOrderBy } from '@/constants/query-sorts';
 import { useTableState } from '@/hooks/useTableState';
 import type { Block } from '@/schemas';
 import { transformSortLiteral } from '@/utils/transform-sort';
@@ -21,7 +20,10 @@ export const useBlocksTable = () => {
     paginationValue
   } = useTableState('timestamp:desc');
 
-  const orderByObject = useOrderBy<BlockSorts>(orderBy ?? 'timestamp:desc');
+  const orderByObject = useMemo(
+    () => transformBlockOrderBy(orderBy ?? 'timestamp:desc'),
+    [orderBy]
+  );
   const sortingValue = transformSortLiteral(orderBy);
 
   const {

src/components/features/transaction-details/transaction-information/TransactionInformation.tsx

@@ -1,4 +1,4 @@
-import { notFound } from '@tanstack/react-router';
+import { notFound, useNavigate } from '@tanstack/react-router';
 import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import * as React from 'react';
 
@@ -12,6 +12,7 @@ import { RESOURCES } from '@/constants/resources';
 import { cn } from '@/lib/utils';
 import type { ExtrinsicDetail, ExtrinsicTransfer } from '@/schemas';
 import { formatMonetaryValue, formatTimestamp } from '@/utils/formatter';
+import { isWormholeExtrinsic } from '@/utils/get-extrinsic-detail-path';
 
 export interface TransactionInformationProps {
   hash: string;
@@ -21,16 +22,29 @@ export const TransactionInformation: React.FC<TransactionInformationProps> = ({
   hash
 }) => {
   const api = useApiClient();
+  const navigate = useNavigate();
   const { data, loading } = api.transactions.getByHash().useQuery(hash);
 
-  if (!loading && (!data || data.extrinsics.length === 0)) throw notFound();
+  const extrinsic = data?.extrinsics[0];
+
+  const isRedirectingToWormhole =
+    !loading && !!extrinsic && isWormholeExtrinsic(extrinsic);
+
+  React.useEffect(() => {
+    if (!isRedirectingToWormhole) return;
+
+    navigate({
+      to: '/wormhole/$id',
+      params: { id: hash },
+      replace: true
+    });
+  }, [isRedirectingToWormhole, hash, navigate]);
 
   const extrinsicTransactionColumns = React.useMemo(
     () => EXTRINSIC_TRANSACTION_COLUMNS,
     []
   );
 
-  const extrinsic = data?.extrinsics[0];
   const transfers = data?.transfers ?? [];
   const table = useReactTable<ExtrinsicTransfer>({
     data: transfers,
@@ -40,6 +54,12 @@ export const TransactionInformation: React.FC<TransactionInformationProps> = ({
     manualPagination: true
   });
 
+  if (!loading && (!data || data.extrinsics.length === 0)) throw notFound();
+
+  if (isRedirectingToWormhole) {
+    return null;
+  }
+
   const extrinsicInfo: Partial<ExtrinsicDetail>[] = [
     {
       id: extrinsic?.id,