Skip to content

Commit

Permalink
feat: wp
Browse files Browse the repository at this point in the history
  • Loading branch information
@BLuEScioN
BLuEScioN committed Feb 14, 2025
1 parent 005108b commit b06e1ed
Show file tree
Hide file tree
Showing 8 changed files with 359 additions and 143 deletions.
39 changes: 0 additions & 39 deletions src/common/components/TableTemp/ActivePoolsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,44 +36,6 @@ const defaultCellRenderer: CellRenderer<ActivePoolsData, string | number> = (
);
};

export function UpdateTableBannerRow() {
const numColumns = Object.keys(ActivePoolsColumns).length;

return (
<ChakraTable.Row
css={{
'& > td:first-of-type': {
borderTopLeftRadius: 'redesign.md',
borderBottomLeftRadius: 'redesign.md',
},
'& > td:last-of-type': {
borderTopRightRadius: 'redesign.md',
borderBottomRightRadius: 'redesign.md',
},
}}
>
<ChakraTable.Cell colSpan={numColumns} py={2} px={1}>
<Flex
alignItems="center"
justifyContent="center"
gap={1.5}
boxShadow="0px 4px 12px 0px color(display-p3 0.9882 0.3922 0.1961 / 0.25), 0px 4px 12px 0px rgba(255, 85, 18, 0.25)"
border="1px dashed var(--stacks-colors-accent-stacks-500)"
borderRadius="redesign.lg"
h={12}
>
<Text fontSize="sm" fontWeight="medium" color="textSecondary">
New transactions have come in. Update list
</Text>
<Icon h={3.5} w={3.5} color="iconTertiary">
<ArrowsClockwise />
</Icon>
</Flex>
</ChakraTable.Cell>
</ChakraTable.Row>
);
}

export function ActivePoolsTable() {
const rowData: ActivePoolsData[] = useMemo(() => {
const data: ActivePoolsData[] = Array.from({ length: 10 }, (_, index) => ({
Expand Down Expand Up @@ -146,7 +108,6 @@ export function ActivePoolsTable() {
tableContainerWrapper={table => (
<TableContainer title={'Active Pools'}>{table}</TableContainer>
)}
bannerRow={<UpdateTableBannerRow />}
/>
);
}
15 changes: 8 additions & 7 deletions src/common/components/TableTemp/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function SortIcon({
);
}

export function TableHeader<R>({
export function TableHeader<R, V = R[keyof R]>({
columnDefinition,
sortColumn,
sortOrder,
Expand All @@ -94,7 +94,7 @@ export function TableHeader<R>({
}: {
sortColumn?: string | null;
sortOrder?: SortOrder;
columnDefinition: ColumnDefinition<R, keyof R>;
columnDefinition: ColumnDefinition<R, V>;
headerTitle: string;
columnIndex: number;
setSortColumnId: (columnId: string) => void;
Expand Down Expand Up @@ -165,14 +165,14 @@ export function TableHeader<R>({
);
}

export function TableRow<R>({
export function TableRow<R, V = R[keyof R]>({
rowData,
columnDefinitions,
rowIndex,
hasFixedFirstColumn,
}: {
rowData: R;
columnDefinitions: ColumnDefinition<R, keyof R>[];
columnDefinitions: ColumnDefinition<R, V>[];
rowIndex: number;
hasFixedFirstColumn?: boolean;
}) {
Expand Down Expand Up @@ -263,27 +263,28 @@ export function Table<R>({
const [sortColumnId, setSortColumnId] = useState<string | undefined>(undefined);
const [sortOrder, setSortOrder] = useState<SortOrder | undefined>(undefined);
const [sortedRowData, setSortedRowData] = useState(rowData);
console.log({ rowData });

// Handles table sorting when sort column or order changes.
useEffect(() => {
if (!sortColumnId || !sortOrder) {
setSortedRowData(rowData); // If no sort column or order, show the original unsorted data
return;
}
const columnDefinition = columnDefinitions.find(col => col.id === sortColumnId);
if (!columnDefinition) {
throw new Error(`Column definition not found for columnId: ${sortColumnId}`);
}
if (onSort) {
if (!!onSort) {
// Let the parent component handle the loading state and data updates
onSort(sortColumnId, sortOrder).then(setSortedRowData);
} else {
if (!columnDefinition.onSort) {
throw new Error(`Column ${sortColumnId} does not have an onSort function`);
}
console.log({ sortOrder, sortColumnId });
setSortedRowData(
sortOrder
? rowData.sort((a, b) => {
? [...rowData].sort((a, b) => {
const result = columnDefinition.onSort!(a, b);
return sortOrder === 'asc' ? result : -result;
})
Expand Down
50 changes: 45 additions & 5 deletions src/common/components/TableTemp/TxTableCellRenderers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { TxLink } from '@/common/components/ExplorerLinks';
import { AddressLink, TxLink } from '@/common/components/ExplorerLinks';
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';

Expand Down Expand Up @@ -36,6 +37,8 @@ function getTxTypeLabel(txType: string) {
return 'Contract Call';
case 'smart_contract':
return 'Contract Deploy';
default:
return 'Unknown';
}
}

Expand All @@ -59,6 +62,7 @@ export const TxTypeCellRenderer = ({ txType }: { txType: string }) => {
borderWidth={1}
borderStyle="solid"
bg="surfaceSecondary"
w='fit-content'
>
<Flex alignItems="center" gap={1.5}>
<Flex
Expand All @@ -80,7 +84,7 @@ export const TxTypeCellRenderer = ({ txType }: { txType: string }) => {
);
};

export const LinkCellRenderer: CellRenderer<TxTableData, string> = (value: string) => {
export const TxLinkCellRenderer: CellRenderer<TxTableData, string> = (value: string) => {
return (
<TxLink txId={value}>
<Text whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" fontSize="sm">
Expand All @@ -90,12 +94,48 @@ export const LinkCellRenderer: CellRenderer<TxTableData, string> = (value: strin
);
};

export const FeeCellRenderer: CellRenderer<TxTableData, string> = (value: string) => {
export const AddressLinkCellRenderer: CellRenderer<TxTableData, string> = (value: string) => {
return (
<TxLink txId={value}>
<AddressLink principal={value}>
<Text whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" fontSize="sm">
{value}
</Text>
</TxLink>
</AddressLink>
);
};

export const FeeCellRenderer: CellRenderer<TxTableData, string> = (value: string) => {
return (
<Flex alignItems="center" gap={1}>
<Icon h={3} w={3} color="textSecondary">
<StxIcon />
</Icon>
<Text whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" fontSize="sm">
{value} STX
</Text>
</Flex>
);
};

export const AmountCellRenderer: CellRenderer<TxTableData, number> = (value: number) => {
return (
<Flex alignItems="center" gap={1}>
<Icon h={3} w={3} color="textSecondary">
<StxIcon />
</Icon>
<Text whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" fontSize="sm">
{value} STX
</Text>
</Flex>
);
};

export const TimeStampCellRenderer: CellRenderer<TxTableData, string> = (value: string) => {
return (
<Flex alignItems="center" justifyContent="center" bg='surfacePrimary' borderRadius='sm' p={1.5}>
<Text whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" fontSize="sm">
{value}
</Text>
</Flex>
);
};
130 changes: 99 additions & 31 deletions src/common/components/TableTemp/TxsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,25 @@

import { useInfiniteQueryResult } from '@/common/hooks/useInfiniteQueryResult';
import { useConfirmedTransactionsInfinite } from '@/common/queries/useConfirmedTransactionsInfinite';
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 { useMemo } from 'react';

import { Transaction } from '@stacks/stacks-blockchain-api-types';

import { CellRenderer, ColumnDefinition, Table } from './Table';
import { ColumnDefinition, Table } from './Table';
import { TableContainer } from './TableContainer';
import { LinkCellRenderer, TxTypeCellRenderer, defaultCellRenderer } from './TxTableCellRenderers';
import { truncateMiddle } from '@/common/utils/utils';
import {
AddressLinkCellRenderer,
FeeCellRenderer,
TimeStampCellRenderer,
TxLinkCellRenderer,
TxTypeCellRenderer,
defaultCellRenderer,
} from './TxTableCellRenderers';

export enum TxTableColumns {
Transaction = 'transaction',
Expand Down Expand Up @@ -57,7 +67,27 @@ export function getAmount(tx: Transaction): number {
return 0;
}

const columnDefinitions: ColumnDefinition<TxTableData, any>[] = [
// TODO: API doesn't return any information about the token, eg it's name, symbol, tokenImage, etc. Open a ticket to get this added.
// export function getAmountSymbol(tx: Transaction): string {
// if (tx.tx_type === 'token_transfer') {
// return tx.token_transfer?.token_symbol ?? '';
// }
// return '';
// }

export function formatBlockTime(timestamp: number): string {
const date = new UTCDate(timestamp * 1000);
const year = date.getUTCFullYear();
const month = String(date.getUTCMonth() + 1).padStart(2, '0');
const day = String(date.getUTCDate()).padStart(2, '0');
const hours = String(date.getUTCHours()).padStart(2, '0');
const minutes = String(date.getUTCMinutes()).padStart(2, '0');
const seconds = String(date.getUTCSeconds()).padStart(2, '0');

return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} (UTC)`;
}

export const columnDefinitions: ColumnDefinition<TxTableData, any>[] = [
{
id: TxTableColumns.Transaction,
header: 'Transaction',
Expand All @@ -68,46 +98,84 @@ const columnDefinitions: ColumnDefinition<TxTableData, any>[] = [
id: TxTableColumns.TxId,
header: 'ID',
accessor: (row: TxTableData) => truncateMiddle(row[TxTableColumns.TxId]),
cellRenderer: LinkCellRenderer,
cellRenderer: TxLinkCellRenderer,
} as ColumnDefinition<TxTableData, string>,
{
id: TxTableColumns.TxType,
header: 'Tx Type',
accessor: (row: TxTableData) => row[TxTableColumns.TxType],
cellRenderer: value => <TxTypeCellRenderer txType={value} />,
} as ColumnDefinition<TxTableData, string>,
// {
// id: TxTableColumns.From,
// header: 'From',
// accessor: (row: TxTableData) => truncateMiddle(row[TxTableColumns.From]),
// cellRenderer: defaultCellRenderer,
// },
// {
// id: TxTableColumns.To,
// header: 'To',
// accessor: (row: TxTableData) => truncateMiddle(row[TxTableColumns.To]),
// cellRenderer: defaultCellRenderer,
// },
// {
// id: TxTableColumns.Fee,
// header: 'Fee',
// accessor: (row: TxTableData) => row[TxTableColumns.Fee],
// cellRenderer: defaultCellRenderer,
// },
// {
// id: TxTableColumns.BlockTime,
// header: 'Block Time',
// accessor: (row: TxTableData) => row[TxTableColumns.BlockTime],
// cellRenderer: defaultCellRenderer,
// },
{
id: TxTableColumns.From,
header: 'From',
accessor: (row: TxTableData) => truncateMiddle(row[TxTableColumns.From]),
cellRenderer: AddressLinkCellRenderer,
} as ColumnDefinition<TxTableData, string>,
{
id: TxTableColumns.To,
header: 'To',
accessor: (row: TxTableData) => truncateMiddle(row[TxTableColumns.To]),
cellRenderer: AddressLinkCellRenderer,
} as ColumnDefinition<TxTableData, string>,
{
id: TxTableColumns.Fee,
header: 'Fee',
accessor: (row: TxTableData) => microToStacksFormatted(row[TxTableColumns.Fee]),
cellRenderer: FeeCellRenderer,
} as ColumnDefinition<TxTableData, string>,
// {
// id: TxTableColumns.Amount,
// header: 'Amount',
// accessor: (row: TxTableData) => row[TxTableColumns.Amount],
// cellRenderer: defaultCellRenderer,
// },
// cellRenderer: AmountCellRenderer,
// } as ColumnDefinition<TxTableData, number>,
{
id: TxTableColumns.BlockTime,
header: 'Block Time',
accessor: (row: TxTableData) => formatBlockTime(row[TxTableColumns.BlockTime]),
cellRenderer: TimeStampCellRenderer,
} as ColumnDefinition<TxTableData, string>,
];

export function UpdateTableBannerRow() {
const numColumns = Object.keys(TxTableColumns).length;

return (
<ChakraTable.Row
css={{
'& > td:first-of-type': {
borderTopLeftRadius: 'redesign.md',
borderBottomLeftRadius: 'redesign.md',
},
'& > td:last-of-type': {
borderTopRightRadius: 'redesign.md',
borderBottomRightRadius: 'redesign.md',
},
}}
>
<ChakraTable.Cell colSpan={numColumns} py={2} px={1}>
<Flex
alignItems="center"
justifyContent="center"
gap={1.5}
boxShadow="0px 4px 12px 0px color(display-p3 0.9882 0.3922 0.1961 / 0.25), 0px 4px 12px 0px rgba(255, 85, 18, 0.25)"
border="1px dashed var(--stacks-colors-accent-stacks-500)"
borderRadius="redesign.lg"
h={12}
>
<Text fontSize="sm" fontWeight="medium" color="textSecondary">
New transactions have come in. Update list
</Text>
<Icon h={3.5} w={3.5} color="iconTertiary">
<ArrowsClockwise />
</Icon>
</Flex>
</ChakraTable.Cell>
</ChakraTable.Row>
);
}

export function TxsTable() {
const response = useConfirmedTransactionsInfinite();
const txs = useInfiniteQueryResult<Transaction>(response, 100);
Expand Down
Loading

0 comments on commit b06e1ed

Please sign in to comment.