UX improvement

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 (
-          <Badge variant={success ? 'success' : 'error'}>
-            {success ? 'Success' : 'Failed'}
-          </Badge>
-        );
-      },
-      enableSorting: false
-    }),
-
     // Timestamp column
     columnHelper.accessor('timestamp', {
       id: 'timestamp',

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) => (
-      <LinkWithCopy
-        href={`${RESOURCES.blocks}/${props.getValue()}`}
-        text={formatBlockHeight(props.getValue())}
-        numeric
-      />
-    ),
-    enableSorting: true
-  }),
   columnHelper.accessor('created_at', {
     id: 'created_at',
     header: 'Created',

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

@@ -1,7 +1,6 @@
 import { createColumnHelper } from '@tanstack/react-table';
-import type { VariantProps } from 'class-variance-authority';
 
-import { Badge, type badgeVariants } 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';
@@ -17,11 +16,9 @@ import {
 } from '@/utils/formatter';
 import { getUnifiedTransactionDetailPath } from '@/utils/get-unified-transaction-detail-path';
 
-type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
-
 const STATUS_BADGE: Record<
   UnifiedListTransactionStatus,
-  { label: string; variant: BadgeVariant }
+  { label: string; variant: NonNullable<BadgeProps['variant']> }
 > = {
   SUCCESS: { label: 'Success', variant: 'success' },
   ERROR: { label: 'Error', variant: 'error' },
@@ -83,7 +80,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"
         />
       );
     },
@@ -100,7 +97,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"
         />
       );
     },
@@ -117,30 +114,12 @@ 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 <span className="font-mono text-muted-text">—</span>;
-      return (
-        <span className="numeric text-muted-text">
-          {formatMonetaryValue(value, 5)}
-        </span>
-      );
-    },
-    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
-      };
+      const config = STATUS_BADGE[status];
       return <Badge variant={config.variant}>{config.label}</Badge>;
     },
     enableSorting: false

src/components/features/cancelled-reversible-transaction-details/cancelled-reversible-transaction-information/CancelledReversibleTransactionInformation.tsx

@@ -85,6 +85,7 @@ export const CancelledReversibleTransactionInformation: React.FC<
             <AccountAddressCell
               address={value.id}
               href={`${RESOURCES.accounts}/${value.id}`}
+              truncate={false}
               className="break-all"
             />
           )
@@ -96,6 +97,7 @@ export const CancelledReversibleTransactionInformation: React.FC<
             <AccountAddressCell
               address={value.from.id}
               href={`${RESOURCES.accounts}/${value.from.id}`}
+              truncate={false}
               className="break-all"
             />
           )
@@ -107,6 +109,7 @@ export const CancelledReversibleTransactionInformation: React.FC<
             <AccountAddressCell
               address={value.to.id}
               href={`${RESOURCES.accounts}/${value.to.id}`}
+              truncate={false}
               className="break-all"
             />
           )

src/components/features/executed-reversible-transaction-details/executed-reversible-transaction-information/ExecutedReversibleTransactionInformation.tsx

@@ -76,6 +76,7 @@ export const ExecutedReversibleTransactionInformation: React.FC<
             <AccountAddressCell
               address={value.from.id}
               href={`${RESOURCES.accounts}/${value.from.id}`}
+              truncate={false}
               className="break-all"
             />
           )
@@ -87,6 +88,7 @@ export const ExecutedReversibleTransactionInformation: React.FC<
             <AccountAddressCell
               address={value.to.id}
               href={`${RESOURCES.accounts}/${value.to.id}`}
+              truncate={false}
               className="break-all"
             />
           )

src/components/features/high-security-set-details/high-security-set-information/HighSecuritySetInformation.tsx

@@ -93,6 +93,7 @@ export const HighSecuritySetInformation: React.FC<
               <AccountAddressCell
                 address={whoId}
                 href={`${RESOURCES.accounts}/${whoId}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -109,6 +110,7 @@ export const HighSecuritySetInformation: React.FC<
               <AccountAddressCell
                 address={guardianId}
                 href={`${RESOURCES.accounts}/${guardianId}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />

src/components/features/miner-reward-details/miner-reward-information/MinerRewardInformation.tsx

@@ -88,6 +88,7 @@ export const MinerRewardInformation: React.FC<MinerRewardInformationProps> = ({
             <AccountAddressCell
               address={(value as MinerReward['miner']).id}
               href={`${RESOURCES.accounts}/${(value as MinerReward['miner']).id}`}
+              truncate={false}
               className="break-all"
             />
           )

src/components/features/multisig-created-details/multisig-created-fields.tsx

@@ -48,6 +48,7 @@ const getSharedMultisigConfigurationFields = (): MultisigCreatedField[] => [
         <AccountAddressCell
           address={creatorId}
           href={`${RESOURCES.accounts}/${creatorId}`}
+          truncate={false}
         />
       ) : (
         <EmptyValue />
@@ -67,6 +68,7 @@ const getSharedMultisigConfigurationFields = (): MultisigCreatedField[] => [
               key={signer}
               address={signer}
               href={`${RESOURCES.accounts}/${signer}`}
+              truncate={false}
             />
           ))}
         </div>
@@ -117,6 +119,7 @@ export const getMultisigCreatedEventFields = (): MultisigCreatedField[] => [
         <AccountAddressCell
           address={String(value)}
           href={getMultisigWalletHref(String(value))}
+          truncate={false}
         />
       ) : (
         <EmptyValue />

src/components/features/multisig-deposits-claimed-details/multisig-deposits-claimed-information/MultisigDepositsClaimedInformation.tsx

@@ -90,6 +90,7 @@ export const MultisigDepositsClaimedInformation: React.FC<
               <AccountAddressCell
                 address={multisigId}
                 href={getMultisigWalletHref(multisigId)}
+                truncate={false}
                 className="break-all"
               />
             ) : (
@@ -106,6 +107,7 @@ export const MultisigDepositsClaimedInformation: React.FC<
               <AccountAddressCell
                 address={claimerId}
                 href={`${RESOURCES.accounts}/${claimerId}`}
+                truncate={false}
                 className="break-all"
               />
             ) : (

src/components/features/multisig-details/MultisigDetailDataTabs.tsx

@@ -32,7 +32,8 @@ export const MultisigDetailDataTabs: React.FC<Props> = ({ walletId }) => {
       search: {
         tab: nextTab,
         status: nextTab === 'proposals' ? status : 'all'
-      }
+      },
+      resetScroll: false
     });
   };
 

src/components/features/multisig-details/MultisigDetailStatusFilter.tsx

@@ -26,7 +26,8 @@ export const MultisigDetailStatusFilter: React.FC = () => {
       search: {
         tab: tab ?? 'proposals',
         status: nextStatus
-      }
+      },
+      resetScroll: false
     });
   };
 

src/components/features/multisig-proposal-cancelled-details/multisig-proposal-cancelled-information/MultisigProposalCancelledInformation.tsx

@@ -107,6 +107,7 @@ export const MultisigProposalCancelledInformation: React.FC<
               <AccountAddressCell
                 address={multisigId}
                 href={getMultisigWalletHref(multisigId)}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -123,6 +124,7 @@ export const MultisigProposalCancelledInformation: React.FC<
               <AccountAddressCell
                 address={proposerId}
                 href={`${RESOURCES.accounts}/${proposerId}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -140,6 +142,7 @@ export const MultisigProposalCancelledInformation: React.FC<
               <AccountAddressCell
                 address={cancelledById}
                 href={`${RESOURCES.accounts}/${cancelledById}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />

src/components/features/multisig-proposal-created-details/multisig-proposal-created-information/MultisigProposalCreatedInformation.tsx

@@ -103,6 +103,7 @@ export const MultisigProposalCreatedInformation: React.FC<
               <AccountAddressCell
                 address={multisigId}
                 href={getMultisigWalletHref(multisigId)}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -119,6 +120,7 @@ export const MultisigProposalCreatedInformation: React.FC<
               <AccountAddressCell
                 address={proposerId}
                 href={`${RESOURCES.accounts}/${proposerId}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />

src/components/features/multisig-proposal-details/multisig-proposal-information/MultisigProposalInformation.tsx

@@ -82,6 +82,7 @@ const accountLink = (accountId?: string | null) =>
     <AccountAddressCell
       address={accountId}
       href={`${RESOURCES.accounts}/${accountId}`}
+      truncate={false}
     />
   ) : (
     <EmptyValue />
@@ -92,6 +93,7 @@ const walletLink = (walletId?: string | null) =>
     <AccountAddressCell
       address={walletId}
       href={getMultisigWalletHref(walletId)}
+      truncate={false}
     />
   ) : (
     <EmptyValue />
@@ -235,6 +237,7 @@ const BASE_PROPOSAL_FIELDS: ProposalField[] = [
               key={approver}
               address={approver}
               href={`${RESOURCES.accounts}/${approver}`}
+              truncate={false}
             />
           ))}
         </div>

src/components/features/multisig-proposal-executed-details/multisig-proposal-executed-information/MultisigProposalExecutedInformation.tsx

@@ -107,6 +107,7 @@ export const MultisigProposalExecutedInformation: React.FC<
               <AccountAddressCell
                 address={multisigId}
                 href={getMultisigWalletHref(multisigId)}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -123,6 +124,7 @@ export const MultisigProposalExecutedInformation: React.FC<
               <AccountAddressCell
                 address={proposerId}
                 href={`${RESOURCES.accounts}/${proposerId}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -142,6 +144,7 @@ export const MultisigProposalExecutedInformation: React.FC<
                     key={approver}
                     address={approver}
                     href={`${RESOURCES.accounts}/${approver}`}
+                    truncate={false}
                   />
                 ))}
               </div>

src/components/features/multisig-proposal-ready-details/multisig-proposal-ready-information/MultisigProposalReadyInformation.tsx

@@ -114,6 +114,7 @@ export const MultisigProposalReadyInformation: React.FC<
               <AccountAddressCell
                 address={multisigId}
                 href={getMultisigWalletHref(multisigId)}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -130,6 +131,7 @@ export const MultisigProposalReadyInformation: React.FC<
               <AccountAddressCell
                 address={proposerId}
                 href={`${RESOURCES.accounts}/${proposerId}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />

src/components/features/multisig-proposal-removed-details/multisig-proposal-removed-information/MultisigProposalRemovedInformation.tsx

@@ -104,6 +104,7 @@ export const MultisigProposalRemovedInformation: React.FC<
               <AccountAddressCell
                 address={multisigId}
                 href={getMultisigWalletHref(multisigId)}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -120,6 +121,7 @@ export const MultisigProposalRemovedInformation: React.FC<
               <AccountAddressCell
                 address={proposerId}
                 href={`${RESOURCES.accounts}/${proposerId}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />
@@ -136,6 +138,7 @@ export const MultisigProposalRemovedInformation: React.FC<
               <AccountAddressCell
                 address={removedById}
                 href={`${RESOURCES.accounts}/${removedById}`}
+                truncate={false}
               />
             ) : (
               <EmptyValue />