From 885a31a8fe395540a9e54c147873ab6791f38f2e Mon Sep 17 00:00:00 2001 From: Beast Date: Mon, 5 Oct 2026 13:40:55 +0800 Subject: [PATCH 1/3] feat: update tx table cols --- .../UNIFIED_LIST_TRANSACTION_COLUMNS.tsx | 57 ++----------------- 1 file changed, 6 insertions(+), 51 deletions(-) diff --git a/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx b/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx index c2d38e1..91a1a87 100644 --- a/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx +++ b/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx @@ -1,15 +1,11 @@ import { createColumnHelper } from '@tanstack/react-table'; -import type { VariantProps } from 'class-variance-authority'; -import { Badge, type badgeVariants } from '@/components/ui/badge'; +import { Badge } from '@/components/ui/badge'; import { AccountAddressCell } from '@/components/ui/composites/account-address-cell/AccountAddressCell'; import { LinkWithCopy } from '@/components/ui/composites/link-with-copy/LinkWithCopy'; import { TimestampDisplay } from '@/components/ui/timestamp-display'; import { RESOURCES } from '@/constants/resources'; -import type { - UnifiedListTransaction, - UnifiedListTransactionStatus -} from '@/schemas'; +import type { UnifiedListTransaction } from '@/schemas'; import { formatBlockHeight, formatMonetaryValue, @@ -17,19 +13,6 @@ import { } from '@/utils/formatter'; import { getUnifiedTransactionDetailPath } from '@/utils/get-unified-transaction-detail-path'; -type BadgeVariant = NonNullable['variant']>; - -const STATUS_BADGE: Record< - UnifiedListTransactionStatus, - { label: string; variant: BadgeVariant } -> = { - SUCCESS: { label: 'Success', variant: 'success' }, - ERROR: { label: 'Error', variant: 'error' }, - SCHEDULED: { label: 'Scheduled', variant: 'reversible' }, - EXECUTED: { label: 'Executed', variant: 'success' }, - CANCELLED: { label: 'Cancelled', variant: 'error' } -}; - const columnHelper = createColumnHelper(); export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ @@ -66,12 +49,6 @@ export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ ), enableSorting: true }), - columnHelper.accessor('timestamp', { - id: 'timestamp', - header: 'Time', - cell: (props) => , - enableSorting: true - }), columnHelper.accessor((row) => row.from?.id, { id: 'from', header: 'From', @@ -117,33 +94,11 @@ export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ }, enableSorting: true }), - columnHelper.accessor('fee', { - id: 'fee', - header: 'Fee', - cell: (props) => { - const value = props.getValue(); - if (value == null) - return —; - return ( - - {formatMonetaryValue(value, 5)} - - ); - }, + columnHelper.accessor('timestamp', { + id: 'timestamp', + header: 'Time', + cell: (props) => , enableSorting: true - }), - columnHelper.accessor('status', { - id: 'status', - header: 'Status', - cell: (props) => { - const status = props.getValue(); - const config = STATUS_BADGE[status] ?? { - label: status, - variant: 'miner' as const - }; - return {config.label}; - }, - enableSorting: false }) ]; From 63b37c5ca7afd8065000cec9fff6445bca0a99d5 Mon Sep 17 00:00:00 2001 From: Beast Date: Mon, 5 Oct 2026 14:43:15 +0800 Subject: [PATCH 2/3] feat: make UX even better --- .../table-columns/EXTRINSIC_COLUMNS.tsx | 16 ------------- .../MULTISIG_PROPOSAL_COLUMNS.tsx | 24 +------------------ .../UNIFIED_LIST_TRANSACTION_COLUMNS.tsx | 4 ++-- ...celledReversibleTransactionInformation.tsx | 3 +++ ...ecutedReversibleTransactionInformation.tsx | 2 ++ .../HighSecuritySetInformation.tsx | 2 ++ .../MinerRewardInformation.tsx | 1 + .../multisig-created-fields.tsx | 3 +++ .../MultisigDepositsClaimedInformation.tsx | 2 ++ .../MultisigDetailDataTabs.tsx | 3 ++- .../MultisigDetailStatusFilter.tsx | 3 ++- .../MultisigProposalCancelledInformation.tsx | 3 +++ .../MultisigProposalCreatedInformation.tsx | 2 ++ .../MultisigProposalInformation.tsx | 3 +++ .../MultisigProposalExecutedInformation.tsx | 3 +++ .../MultisigProposalReadyInformation.tsx | 2 ++ .../MultisigProposalRemovedInformation.tsx | 3 +++ .../MultisigSignerApprovedInformation.tsx | 3 +++ ...eduledReversibleTransactionInformation.tsx | 2 ++ 19 files changed, 41 insertions(+), 43 deletions(-) diff --git a/src/components/common/table-columns/EXTRINSIC_COLUMNS.tsx b/src/components/common/table-columns/EXTRINSIC_COLUMNS.tsx index fc0b77f..7c1a0f8 100644 --- a/src/components/common/table-columns/EXTRINSIC_COLUMNS.tsx +++ b/src/components/common/table-columns/EXTRINSIC_COLUMNS.tsx @@ -1,6 +1,5 @@ import { createColumnHelper } from '@tanstack/react-table'; -import { Badge } from '@/components/ui/badge'; import { AccountAddressCell } from '@/components/ui/composites/account-address-cell/AccountAddressCell'; import { LinkWithCopy } from '@/components/ui/composites/link-with-copy/LinkWithCopy'; import { TimestampDisplay } from '@/components/ui/timestamp-display'; @@ -91,21 +90,6 @@ export const createExtrinsicColumns = () => { enableSorting: false }), - // Success column - columnHelper.accessor('success', { - id: 'success', - header: 'Result', - cell: (props) => { - const success = props.getValue(); - return ( - - {success ? 'Success' : 'Failed'} - - ); - }, - enableSorting: false - }), - // Timestamp column columnHelper.accessor('timestamp', { id: 'timestamp', diff --git a/src/components/common/table-columns/MULTISIG_PROPOSAL_COLUMNS.tsx b/src/components/common/table-columns/MULTISIG_PROPOSAL_COLUMNS.tsx index 87aef44..29164cf 100644 --- a/src/components/common/table-columns/MULTISIG_PROPOSAL_COLUMNS.tsx +++ b/src/components/common/table-columns/MULTISIG_PROPOSAL_COLUMNS.tsx @@ -6,11 +6,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 { MultisigProposal } from '@/schemas'; -import { - formatBlockHeight, - formatMonetaryValue, - formatTxAddress -} from '@/utils/formatter'; +import { formatTxAddress } from '@/utils/formatter'; import { getMultisigProposalHref } from '@/utils/get-multisig-proposal-href'; import { getMultisigWalletHref } from '@/utils/get-multisig-wallet-href'; @@ -102,24 +98,6 @@ export const MULTISIG_PROPOSAL_COLUMNS = [ }, enableSorting: false }), - columnHelper.accessor('deposit', { - id: 'deposit', - header: 'Deposit', - cell: (props) => formatMonetaryValue(props.getValue(), 5), - enableSorting: true - }), - columnHelper.accessor('expiry_block', { - id: 'expiry_block', - header: 'Expiry Block', - cell: (props) => ( - - ), - enableSorting: true - }), columnHelper.accessor('created_at', { id: 'created_at', header: 'Created', diff --git a/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx b/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx index 91a1a87..f108963 100644 --- a/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx +++ b/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx @@ -60,7 +60,7 @@ export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ address={id} href={`${RESOURCES.accounts}/${id}`} text={formatTxAddress(id)} - className="font-mono text-muted-text" + className="font-mono text-flare" /> ); }, @@ -77,7 +77,7 @@ export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ address={id} href={`${RESOURCES.accounts}/${id}`} text={formatTxAddress(id)} - className="font-mono text-muted-text" + className="font-mono text-flare" /> ); }, diff --git a/src/components/features/cancelled-reversible-transaction-details/cancelled-reversible-transaction-information/CancelledReversibleTransactionInformation.tsx b/src/components/features/cancelled-reversible-transaction-details/cancelled-reversible-transaction-information/CancelledReversibleTransactionInformation.tsx index 84d7abe..f9b9a87 100644 --- a/src/components/features/cancelled-reversible-transaction-details/cancelled-reversible-transaction-information/CancelledReversibleTransactionInformation.tsx +++ b/src/components/features/cancelled-reversible-transaction-details/cancelled-reversible-transaction-information/CancelledReversibleTransactionInformation.tsx @@ -85,6 +85,7 @@ export const CancelledReversibleTransactionInformation: React.FC< ) @@ -96,6 +97,7 @@ export const CancelledReversibleTransactionInformation: React.FC< ) @@ -107,6 +109,7 @@ export const CancelledReversibleTransactionInformation: React.FC< ) diff --git a/src/components/features/executed-reversible-transaction-details/executed-reversible-transaction-information/ExecutedReversibleTransactionInformation.tsx b/src/components/features/executed-reversible-transaction-details/executed-reversible-transaction-information/ExecutedReversibleTransactionInformation.tsx index 43de001..099906f 100644 --- a/src/components/features/executed-reversible-transaction-details/executed-reversible-transaction-information/ExecutedReversibleTransactionInformation.tsx +++ b/src/components/features/executed-reversible-transaction-details/executed-reversible-transaction-information/ExecutedReversibleTransactionInformation.tsx @@ -76,6 +76,7 @@ export const ExecutedReversibleTransactionInformation: React.FC< ) @@ -87,6 +88,7 @@ export const ExecutedReversibleTransactionInformation: React.FC< ) diff --git a/src/components/features/high-security-set-details/high-security-set-information/HighSecuritySetInformation.tsx b/src/components/features/high-security-set-details/high-security-set-information/HighSecuritySetInformation.tsx index 4eef09b..70ce875 100644 --- a/src/components/features/high-security-set-details/high-security-set-information/HighSecuritySetInformation.tsx +++ b/src/components/features/high-security-set-details/high-security-set-information/HighSecuritySetInformation.tsx @@ -93,6 +93,7 @@ export const HighSecuritySetInformation: React.FC< ) : ( @@ -109,6 +110,7 @@ export const HighSecuritySetInformation: React.FC< ) : ( diff --git a/src/components/features/miner-reward-details/miner-reward-information/MinerRewardInformation.tsx b/src/components/features/miner-reward-details/miner-reward-information/MinerRewardInformation.tsx index dbbb6d0..f3a5401 100644 --- a/src/components/features/miner-reward-details/miner-reward-information/MinerRewardInformation.tsx +++ b/src/components/features/miner-reward-details/miner-reward-information/MinerRewardInformation.tsx @@ -88,6 +88,7 @@ export const MinerRewardInformation: React.FC = ({ ) diff --git a/src/components/features/multisig-created-details/multisig-created-fields.tsx b/src/components/features/multisig-created-details/multisig-created-fields.tsx index 6c62f2d..0f9c1db 100644 --- a/src/components/features/multisig-created-details/multisig-created-fields.tsx +++ b/src/components/features/multisig-created-details/multisig-created-fields.tsx @@ -48,6 +48,7 @@ const getSharedMultisigConfigurationFields = (): MultisigCreatedField[] => [ ) : ( @@ -67,6 +68,7 @@ const getSharedMultisigConfigurationFields = (): MultisigCreatedField[] => [ key={signer} address={signer} href={`${RESOURCES.accounts}/${signer}`} + truncate={false} /> ))} @@ -117,6 +119,7 @@ export const getMultisigCreatedEventFields = (): MultisigCreatedField[] => [ ) : ( diff --git a/src/components/features/multisig-deposits-claimed-details/multisig-deposits-claimed-information/MultisigDepositsClaimedInformation.tsx b/src/components/features/multisig-deposits-claimed-details/multisig-deposits-claimed-information/MultisigDepositsClaimedInformation.tsx index 4d99f39..be979b0 100644 --- a/src/components/features/multisig-deposits-claimed-details/multisig-deposits-claimed-information/MultisigDepositsClaimedInformation.tsx +++ b/src/components/features/multisig-deposits-claimed-details/multisig-deposits-claimed-information/MultisigDepositsClaimedInformation.tsx @@ -90,6 +90,7 @@ export const MultisigDepositsClaimedInformation: React.FC< ) : ( @@ -106,6 +107,7 @@ export const MultisigDepositsClaimedInformation: React.FC< ) : ( diff --git a/src/components/features/multisig-details/MultisigDetailDataTabs.tsx b/src/components/features/multisig-details/MultisigDetailDataTabs.tsx index 2eaa29c..cc1b720 100644 --- a/src/components/features/multisig-details/MultisigDetailDataTabs.tsx +++ b/src/components/features/multisig-details/MultisigDetailDataTabs.tsx @@ -32,7 +32,8 @@ export const MultisigDetailDataTabs: React.FC = ({ walletId }) => { search: { tab: nextTab, status: nextTab === 'proposals' ? status : 'all' - } + }, + resetScroll: false }); }; diff --git a/src/components/features/multisig-details/MultisigDetailStatusFilter.tsx b/src/components/features/multisig-details/MultisigDetailStatusFilter.tsx index ddd86be..76e582e 100644 --- a/src/components/features/multisig-details/MultisigDetailStatusFilter.tsx +++ b/src/components/features/multisig-details/MultisigDetailStatusFilter.tsx @@ -26,7 +26,8 @@ export const MultisigDetailStatusFilter: React.FC = () => { search: { tab: tab ?? 'proposals', status: nextStatus - } + }, + resetScroll: false }); }; diff --git a/src/components/features/multisig-proposal-cancelled-details/multisig-proposal-cancelled-information/MultisigProposalCancelledInformation.tsx b/src/components/features/multisig-proposal-cancelled-details/multisig-proposal-cancelled-information/MultisigProposalCancelledInformation.tsx index 96891b1..4efaa3e 100644 --- a/src/components/features/multisig-proposal-cancelled-details/multisig-proposal-cancelled-information/MultisigProposalCancelledInformation.tsx +++ b/src/components/features/multisig-proposal-cancelled-details/multisig-proposal-cancelled-information/MultisigProposalCancelledInformation.tsx @@ -107,6 +107,7 @@ export const MultisigProposalCancelledInformation: React.FC< ) : ( @@ -123,6 +124,7 @@ export const MultisigProposalCancelledInformation: React.FC< ) : ( @@ -140,6 +142,7 @@ export const MultisigProposalCancelledInformation: React.FC< ) : ( diff --git a/src/components/features/multisig-proposal-created-details/multisig-proposal-created-information/MultisigProposalCreatedInformation.tsx b/src/components/features/multisig-proposal-created-details/multisig-proposal-created-information/MultisigProposalCreatedInformation.tsx index 72a5080..939f5c3 100644 --- a/src/components/features/multisig-proposal-created-details/multisig-proposal-created-information/MultisigProposalCreatedInformation.tsx +++ b/src/components/features/multisig-proposal-created-details/multisig-proposal-created-information/MultisigProposalCreatedInformation.tsx @@ -103,6 +103,7 @@ export const MultisigProposalCreatedInformation: React.FC< ) : ( @@ -119,6 +120,7 @@ export const MultisigProposalCreatedInformation: React.FC< ) : ( diff --git a/src/components/features/multisig-proposal-details/multisig-proposal-information/MultisigProposalInformation.tsx b/src/components/features/multisig-proposal-details/multisig-proposal-information/MultisigProposalInformation.tsx index 190d0b3..5ed5530 100644 --- a/src/components/features/multisig-proposal-details/multisig-proposal-information/MultisigProposalInformation.tsx +++ b/src/components/features/multisig-proposal-details/multisig-proposal-information/MultisigProposalInformation.tsx @@ -82,6 +82,7 @@ const accountLink = (accountId?: string | null) => ) : ( @@ -92,6 +93,7 @@ const walletLink = (walletId?: string | null) => ) : ( @@ -235,6 +237,7 @@ const BASE_PROPOSAL_FIELDS: ProposalField[] = [ key={approver} address={approver} href={`${RESOURCES.accounts}/${approver}`} + truncate={false} /> ))} diff --git a/src/components/features/multisig-proposal-executed-details/multisig-proposal-executed-information/MultisigProposalExecutedInformation.tsx b/src/components/features/multisig-proposal-executed-details/multisig-proposal-executed-information/MultisigProposalExecutedInformation.tsx index 3b6c17f..17db9f5 100644 --- a/src/components/features/multisig-proposal-executed-details/multisig-proposal-executed-information/MultisigProposalExecutedInformation.tsx +++ b/src/components/features/multisig-proposal-executed-details/multisig-proposal-executed-information/MultisigProposalExecutedInformation.tsx @@ -107,6 +107,7 @@ export const MultisigProposalExecutedInformation: React.FC< ) : ( @@ -123,6 +124,7 @@ export const MultisigProposalExecutedInformation: React.FC< ) : ( @@ -142,6 +144,7 @@ export const MultisigProposalExecutedInformation: React.FC< key={approver} address={approver} href={`${RESOURCES.accounts}/${approver}`} + truncate={false} /> ))} diff --git a/src/components/features/multisig-proposal-ready-details/multisig-proposal-ready-information/MultisigProposalReadyInformation.tsx b/src/components/features/multisig-proposal-ready-details/multisig-proposal-ready-information/MultisigProposalReadyInformation.tsx index 60a2d2c..35b74cd 100644 --- a/src/components/features/multisig-proposal-ready-details/multisig-proposal-ready-information/MultisigProposalReadyInformation.tsx +++ b/src/components/features/multisig-proposal-ready-details/multisig-proposal-ready-information/MultisigProposalReadyInformation.tsx @@ -114,6 +114,7 @@ export const MultisigProposalReadyInformation: React.FC< ) : ( @@ -130,6 +131,7 @@ export const MultisigProposalReadyInformation: React.FC< ) : ( diff --git a/src/components/features/multisig-proposal-removed-details/multisig-proposal-removed-information/MultisigProposalRemovedInformation.tsx b/src/components/features/multisig-proposal-removed-details/multisig-proposal-removed-information/MultisigProposalRemovedInformation.tsx index 9af5c75..5ca9589 100644 --- a/src/components/features/multisig-proposal-removed-details/multisig-proposal-removed-information/MultisigProposalRemovedInformation.tsx +++ b/src/components/features/multisig-proposal-removed-details/multisig-proposal-removed-information/MultisigProposalRemovedInformation.tsx @@ -104,6 +104,7 @@ export const MultisigProposalRemovedInformation: React.FC< ) : ( @@ -120,6 +121,7 @@ export const MultisigProposalRemovedInformation: React.FC< ) : ( @@ -136,6 +138,7 @@ export const MultisigProposalRemovedInformation: React.FC< ) : ( diff --git a/src/components/features/multisig-signer-approved-details/multisig-signer-approved-information/MultisigSignerApprovedInformation.tsx b/src/components/features/multisig-signer-approved-details/multisig-signer-approved-information/MultisigSignerApprovedInformation.tsx index 9115292..4aa4a01 100644 --- a/src/components/features/multisig-signer-approved-details/multisig-signer-approved-information/MultisigSignerApprovedInformation.tsx +++ b/src/components/features/multisig-signer-approved-details/multisig-signer-approved-information/MultisigSignerApprovedInformation.tsx @@ -96,6 +96,7 @@ export const MultisigSignerApprovedInformation: React.FC< ) : ( @@ -131,6 +132,7 @@ export const MultisigSignerApprovedInformation: React.FC< ) : ( @@ -147,6 +149,7 @@ export const MultisigSignerApprovedInformation: React.FC< ) : ( diff --git a/src/components/features/scheduled-reversible-transaction-details/scheduled-reversible-transaction-information/ScheduledReversibleTransactionInformation.tsx b/src/components/features/scheduled-reversible-transaction-details/scheduled-reversible-transaction-information/ScheduledReversibleTransactionInformation.tsx index d96dd87..7ef6627 100644 --- a/src/components/features/scheduled-reversible-transaction-details/scheduled-reversible-transaction-information/ScheduledReversibleTransactionInformation.tsx +++ b/src/components/features/scheduled-reversible-transaction-details/scheduled-reversible-transaction-information/ScheduledReversibleTransactionInformation.tsx @@ -99,6 +99,7 @@ export const ScheduledReversibleTransactionInformation: React.FC< ) @@ -110,6 +111,7 @@ export const ScheduledReversibleTransactionInformation: React.FC< ) From ae9a9005946af4c3dec71838ba9ad09ad74f0ea2 Mon Sep 17 00:00:00 2001 From: Beast Date: Mon, 5 Oct 2026 16:06:53 +0800 Subject: [PATCH 3/3] fix: readd status to unified table --- .../UNIFIED_LIST_TRANSACTION_COLUMNS.tsx | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx b/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx index f108963..37ab9d3 100644 --- a/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx +++ b/src/components/common/table-columns/UNIFIED_LIST_TRANSACTION_COLUMNS.tsx @@ -1,11 +1,14 @@ import { createColumnHelper } from '@tanstack/react-table'; -import { Badge } from '@/components/ui/badge'; +import { Badge, type BadgeProps } from '@/components/ui/badge'; import { AccountAddressCell } from '@/components/ui/composites/account-address-cell/AccountAddressCell'; import { LinkWithCopy } from '@/components/ui/composites/link-with-copy/LinkWithCopy'; import { TimestampDisplay } from '@/components/ui/timestamp-display'; import { RESOURCES } from '@/constants/resources'; -import type { UnifiedListTransaction } from '@/schemas'; +import type { + UnifiedListTransaction, + UnifiedListTransactionStatus +} from '@/schemas'; import { formatBlockHeight, formatMonetaryValue, @@ -13,6 +16,17 @@ import { } from '@/utils/formatter'; import { getUnifiedTransactionDetailPath } from '@/utils/get-unified-transaction-detail-path'; +const STATUS_BADGE: Record< + UnifiedListTransactionStatus, + { label: string; variant: NonNullable } +> = { + SUCCESS: { label: 'Success', variant: 'success' }, + ERROR: { label: 'Error', variant: 'error' }, + SCHEDULED: { label: 'Scheduled', variant: 'reversible' }, + EXECUTED: { label: 'Executed', variant: 'success' }, + CANCELLED: { label: 'Cancelled', variant: 'error' } +}; + const columnHelper = createColumnHelper(); export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ @@ -49,6 +63,12 @@ export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ ), enableSorting: true }), + columnHelper.accessor('timestamp', { + id: 'timestamp', + header: 'Time', + cell: (props) => , + enableSorting: true + }), columnHelper.accessor((row) => row.from?.id, { id: 'from', header: 'From', @@ -94,11 +114,15 @@ export const UNIFIED_LIST_TRANSACTION_COLUMNS = [ }, enableSorting: true }), - columnHelper.accessor('timestamp', { - id: 'timestamp', - header: 'Time', - cell: (props) => , - enableSorting: true + columnHelper.accessor('status', { + id: 'status', + header: 'Status', + cell: (props) => { + const status = props.getValue(); + const config = STATUS_BADGE[status]; + return {config.label}; + }, + enableSorting: false }) ];