feat: wp

hirosystems · Feb 14, 2025 · 1b7a47e · 1b7a47e
1 parent 0dbfc9c
commit 1b7a47e
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 22 deletions.
diff --git a/src/app/PageClient.tsx b/src/app/PageClient.tsx
@@ -36,8 +36,6 @@ export function HomePageLayout({
     <>
       {title}
       {stats}
-      {/* <ActivePoolsTable /> */}
-      <TxsTable />
       <Grid
         gap="7"
         width="full"

diff --git a/src/common/components/table/table-examples/ActivePoolsTable.tsx b/src/common/components/table/table-examples/ActivePoolsTable.tsx
@@ -50,51 +50,51 @@ export function ActivePoolsTable() {
     return data;
   }, []);
 
-  const columnDefinitions: ColumnDefinition<ActivePoolsData, ActivePoolsColumns>[] = useMemo(
+  const columnDefinitions: ColumnDefinition<ActivePoolsData, any>[] = useMemo(
     () => [
       {
         id: ActivePoolsColumns.Provider,
         header: 'Provider',
         onSort: (a, b) => a.provider.localeCompare(b.provider),
         accessor: row => row[ActivePoolsColumns.Provider],
         cellRenderer: defaultCellRenderer,
-      },
+      } as ColumnDefinition<ActivePoolsData, string>,
       {
         id: ActivePoolsColumns.PoxAddress,
         header: 'PoX Address',
         accessor: row => row[ActivePoolsColumns.PoxAddress],
         cellRenderer: defaultCellRenderer,
-      },
+      } as ColumnDefinition<ActivePoolsData, string>,
       {
         id: ActivePoolsColumns.Contract,
         header: 'Contract',
         accessor: row => row[ActivePoolsColumns.Contract],
         cellRenderer: defaultCellRenderer,
-      },
+      } as ColumnDefinition<ActivePoolsData, string>,
       {
         id: ActivePoolsColumns.RewardsIn,
         header: 'Rewards in',
         accessor: row => row[ActivePoolsColumns.RewardsIn],
         cellRenderer: defaultCellRenderer,
-      },
+      } as ColumnDefinition<ActivePoolsData, string>,
       {
         id: ActivePoolsColumns.StackersDelegating,
         header: 'Stackers delegating',
         accessor: row => row[ActivePoolsColumns.StackersDelegating],
         cellRenderer: defaultCellRenderer,
-      },
+      } as ColumnDefinition<ActivePoolsData, number>,
       {
         id: ActivePoolsColumns.AmountStacked,
         header: 'Amount stacked',
         accessor: row => row[ActivePoolsColumns.AmountStacked],
         cellRenderer: defaultCellRenderer,
-      },
+      } as ColumnDefinition<ActivePoolsData, number>,
       {
         id: ActivePoolsColumns.Rewards,
         header: 'Rewards',
         accessor: row => row[ActivePoolsColumns.Rewards],
         cellRenderer: defaultCellRenderer,
-      },
+      } as ColumnDefinition<ActivePoolsData, number>,
     ],
     []
   );

diff --git a/src/common/components/table/table-examples/TxTableCellRenderers.tsx b/src/common/components/table/table-examples/TxTableCellRenderers.tsx
@@ -3,10 +3,10 @@ import { Text } from '@/ui/Text';
 import ClarityIcon from '@/ui/icons/ClarityIcon';
 import StxIcon from '@/ui/icons/StxIcon';
 import { Flex, Icon } from '@chakra-ui/react';
-import { ArrowsLeftRight, PhoneCall, Question } from '@phosphor-icons/react';
+import { ArrowsLeftRight, PhoneCall, Question, XCircle } from '@phosphor-icons/react';
 
 import { CellRenderer } from '../Table';
-import { TxTableData } from './TxsTable';
+import { TxTableData, TxTableTransactionColumnData } from './TxsTable';
 
 export const defaultCellRenderer: CellRenderer<TxTableData, string> = value => {
   return (
@@ -139,3 +139,65 @@ export const TimeStampCellRenderer: CellRenderer<TxTableData, string> = (value:
     </Flex>
   );
 };
+
+export const IconCellRenderer: CellRenderer<TxTableData, React.ReactNode> = (
+  value: React.ReactNode,
+  row: TxTableData
+) => {
+  console.log({ value, row });
+  return (
+    <Icon h={3} w={3} color="textSecondary">
+      {value}
+    </Icon>
+  );
+};
+
+export const TransactionTitleCellRenderer: CellRenderer<
+  TxTableData,
+  TxTableTransactionColumnData
+> = (value: TxTableTransactionColumnData) => {
+  const { functionName, contractName, txType, status, amount } = value;
+
+  let content: React.ReactNode = null;
+  if (txType === 'contract_call') {
+    content = (
+      <Flex gap={1}>
+        <Text fontSize="sm" fontWeight="medium" color="textPrimary">
+          {functionName}
+        </Text>
+        <Flex gap={1}>
+          <Icon h={3} w={3} color="iconSecondary">
+            <ClarityIcon />
+          </Icon>
+          <Text fontSize="xs" fontWeight="medium" color="textSecondary">
+            {contractName}
+          </Text>
+        </Flex>
+      </Flex>
+    );
+  }
+  if (txType === 'token_transfer') {
+    content = (
+      <Text fontSize="sm" fontWeight="medium" color="textPrimary">
+        {amount}
+      </Text>
+    );
+  }
+
+  if (status === 'abort_by_post_condition' || status === 'abort_by_response') {
+    return (
+      <Flex>
+        {content}
+        <Flex gap={1} px={1.5} py={0.5} bg="transactionStatus.failed" borderRadius="redesign.md">
+          <Icon h={3} w={3} color="feedback.red-600">
+            <XCircle />
+          </Icon>
+          <Text fontSize="xs" fontWeight="medium" color="textSecondary">
+            Failed
+          </Text>
+        </Flex>
+      </Flex>
+    );
+  }
+  return content;
+};
diff --git a/src/common/components/table/table-examples/TxsTable.tsx b/src/common/components/table/table-examples/TxsTable.tsx
@@ -6,7 +6,7 @@ import { microToStacksFormatted, truncateMiddle } from '@/common/utils/utils';
 import { Text } from '@/ui/Text';
 import { Table as ChakraTable, Flex, Icon } from '@chakra-ui/react';
 import { UTCDate } from '@date-fns/utc';
-import { ArrowsClockwise } from '@phosphor-icons/react';
+import { ArrowRight, ArrowsClockwise } from '@phosphor-icons/react';
 import { useMemo } from 'react';
 
 import { Transaction } from '@stacks/stacks-blockchain-api-types';
@@ -16,28 +16,31 @@ import { TableContainer } from '../TableContainer';
 import {
   AddressLinkCellRenderer,
   FeeCellRenderer,
+  IconCellRenderer,
   TimeStampCellRenderer,
   TxLinkCellRenderer,
   TxTypeCellRenderer,
-  defaultCellRenderer,
+  TransactionTitleCellRenderer,
 } from './TxTableCellRenderers';
 
 export enum TxTableColumns {
   Transaction = 'transaction',
   TxId = 'txId',
   TxType = 'txType',
   From = 'from',
+  ArrowRight = 'arrowRight',
   To = 'to',
   BlockTime = 'blockTime',
   Amount = 'amount',
   Fee = 'fee',
 }
 
 export interface TxTableData {
-  [TxTableColumns.Transaction]: string;
+  [TxTableColumns.Transaction]: TxTableTransactionColumnData;
   [TxTableColumns.TxId]: string;
   [TxTableColumns.TxType]: string;
   [TxTableColumns.From]: string;
+  [TxTableColumns.ArrowRight]: JSX.Element;
   [TxTableColumns.To]: string;
   [TxTableColumns.BlockTime]: number;
   [TxTableColumns.Amount]: number;
@@ -87,13 +90,21 @@ export function formatBlockTime(timestamp: number): string {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} (UTC)`;
 }
 
+export interface TxTableTransactionColumnData {
+  amount?: number;
+  functionName?: string;
+  contractName?: string;
+  txType?: Transaction['tx_type'];
+  status?: Transaction['tx_status'];
+}
+
 export const columnDefinitions: ColumnDefinition<TxTableData, any>[] = [
   {
     id: TxTableColumns.Transaction,
     header: 'Transaction',
     accessor: (row: TxTableData) => row[TxTableColumns.Transaction],
-    cellRenderer: defaultCellRenderer,
-  } as ColumnDefinition<TxTableData, string>,
+    cellRenderer: TransactionTitleCellRenderer,
+  } as ColumnDefinition<TxTableData, TxTableTransactionColumnData>,
   {
     id: TxTableColumns.TxId,
     header: 'ID',
@@ -112,6 +123,12 @@ export const columnDefinitions: ColumnDefinition<TxTableData, any>[] = [
     accessor: (row: TxTableData) => truncateMiddle(row[TxTableColumns.From]),
     cellRenderer: AddressLinkCellRenderer,
   } as ColumnDefinition<TxTableData, string>,
+  {
+    id: TxTableColumns.ArrowRight,
+    header: '',
+    accessor: (row: TxTableData) => row[TxTableColumns.ArrowRight],
+    cellRenderer: IconCellRenderer,
+  } as ColumnDefinition<TxTableData, React.ReactNode>,
   {
     id: TxTableColumns.To,
     header: 'To',
@@ -179,23 +196,31 @@ export function UpdateTableBannerRow() {
 export function TxsTable() {
   const response = useConfirmedTransactionsInfinite();
   const txs = useInfiniteQueryResult<Transaction>(response, 100);
-  console.log({ txs });
 
   const rowData: TxTableData[] = useMemo(
     () =>
       txs.map(tx => {
         const to = getToAddress(tx);
         const amount = getAmount(tx);
         return {
-          [TxTableColumns.Transaction]: 'N/A',
+          [TxTableColumns.Transaction]: {
+            amount,
+            functionName:
+              tx.tx_type === 'contract_call' ? tx.contract_call?.function_name : undefined,
+            contractName:
+              tx.tx_type === 'contract_call' ? tx.contract_call?.contract_id : undefined,
+            txType: tx.tx_type,
+            status: tx.tx_status,
+          },
           [TxTableColumns.TxId]: tx.tx_id,
           [TxTableColumns.TxType]: tx.tx_type,
           [TxTableColumns.From]: tx.sender_address,
+          [TxTableColumns.ArrowRight]: <ArrowRight />,
           [TxTableColumns.To]: to,
           [TxTableColumns.Fee]: tx.fee_rate,
           [TxTableColumns.Amount]: amount,
           [TxTableColumns.BlockTime]: tx.block_time,
-        };
+        } as TxTableData;
       }),
     [txs]
   );

diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx
@@ -56,7 +56,7 @@ const meta: Meta<TableStoryArgs> = {
 export default meta;
 type Story = StoryObj<TableStoryArgs>;
 
-export const SimpleTableWithTableContainer: Story = {
+export const SimpleTable: Story = {
   render: args => (
     <Table
       tableContainerWrapper={

diff --git a/src/stories/table-utils/tx-table-data.ts → src/stories/table-utils/tx-table-data.tsx b/src/stories/table-utils/tx-table-data.ts → src/stories/table-utils/tx-table-data.tsx
@@ -4,6 +4,7 @@ import {
   getAmount,
   getToAddress,
 } from '@/common/components/table/table-examples/TxsTable';
+import { ArrowRight } from '@phosphor-icons/react';
 
 import { Transaction } from '@stacks/stacks-blockchain-api-types';
 
@@ -2156,10 +2157,17 @@ export const txTableRowData: TxTableData[] = txTableData.map(tx => {
   const to = getToAddress(tx as Transaction);
   const amount = getAmount(tx as Transaction);
   return {
-    [TxTableColumns.Transaction]: 'N/A',
+    [TxTableColumns.Transaction]: {
+      amount,
+      functionName: tx.tx_type === 'contract_call' ? tx.contract_call?.function_name : undefined,
+      contractName: tx.tx_type === 'contract_call' ? tx.contract_call?.contract_id : undefined,
+      txType: tx.tx_type,
+      status: tx.tx_status,
+    },
     [TxTableColumns.TxId]: tx.tx_id,
     [TxTableColumns.TxType]: tx.tx_type,
     [TxTableColumns.From]: tx.sender_address,
+    [TxTableColumns.ArrowRight]: <ArrowRight />,
     [TxTableColumns.To]: to,
     [TxTableColumns.Fee]: tx.fee_rate,
     [TxTableColumns.Amount]: amount,
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,8 +36,6 @@ export function HomePageLayout({ @@
         <>
           {title}
           {stats}
-          {/* <ActivePoolsTable /> */}
-          <TxsTable />
           <Grid
             gap="7"
             width="full"
@@ Expand Down @@