DRY-ed table cell FormatBalance usage (#8810)

packages/page-alliance/src/Members/Member.tsx

@@ -6,9 +6,8 @@ import type { Member as MemberType } from '../types';
 
 import React, { useCallback, useMemo } from 'react';
 
-import { AddressSmall, Menu, Popup, Tag } from '@polkadot/react-components';
+import { AddressSmall, Menu, Popup, Table, Tag } from '@polkadot/react-components';
 import { useAccounts, useApi, useQueue } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from '../translate';
 import useMemberInfo from '../useMemberInfo';
@@ -82,11 +81,7 @@ function Member ({ bestNumber, className, info: { accountId, role }, isPrime, is
           />
         ))}
       </td>
-      <td className='number'>
-        {info && info.deposit && (
-          <FormatBalance value={info.deposit} />
-        )}
-      </td>
+      <Table.Column.Balance value={info?.deposit} />
       <td className='number'>
         {role}
       </td>

packages/page-bounties/src/Bounty.tsx

@@ -70,7 +70,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
         <td>
           <BountyStatusView bountyStatus={bountyStatus} />
         </td>
-        <td className='number'><FormatBalance value={value} /></td>
+        <Table.Column.Balance value={value} />
         <td>
           {curatorToRender && (
             <Curator

packages/page-collator/src/Collator.tsx

@@ -5,8 +5,8 @@ import type { Collator as CollatorType } from './types';
 
 import React, { useMemo } from 'react';
 
-import { AddressSmall, Badge } from '@polkadot/react-components';
-import { BalanceFree, FormatBalance } from '@polkadot/react-query';
+import { AddressSmall, Badge, Table } from '@polkadot/react-components';
+import { BalanceFree } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 interface Props {
@@ -36,11 +36,7 @@ function Collator ({ className, info: { accountId, deposit, isInvulnerable, last
       <td className='address all'>
         <AddressSmall value={accountId} />
       </td>
-      <td className='number'>
-        {deposit && (
-          <FormatBalance value={deposit} />
-        )}
-      </td>
+      <Table.Column.Balance value={deposit} />
       <td className='number'>
         <BalanceFree params={accountId} />
       </td>

packages/page-democracy/src/Overview/External.tsx

@@ -5,9 +5,8 @@ import type { DeriveProposalExternal } from '@polkadot/api-derive/types';
 
 import React from 'react';
 
-import { AddressMini, Button, Columar, ExpandButton, LinkExternal } from '@polkadot/react-components';
+import { AddressMini, Button, Columar, ExpandButton, LinkExternal, Table } from '@polkadot/react-components';
 import { useCollectiveMembers, useToggle } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 
 import Fasttrack from './Fasttrack';
 import PreImageButton from './PreImageButton';
@@ -34,9 +33,7 @@ function External ({ className = '', value: { image, imageHash, threshold } }: P
             <AddressMini value={image.proposer} />
           )}
         </td>
-        <td className='number'>
-          {image && <FormatBalance value={image.balance} />}
-        </td>
+        <Table.Column.Balance value={image?.balance} />
         <td className='actions'>
           <Button.Group>
             {!image?.proposal && (

packages/page-parachains/src/Auctions/WinRange.tsx

@@ -7,7 +7,6 @@ import type { AuctionInfo, WinnerData } from '../types';
 import React from 'react';
 
 import { AddressMini, ParaLink, Table } from '@polkadot/react-components';
-import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -44,7 +43,7 @@ function WinRanges ({ auctionInfo, blockNumber, className = '', isFirst, isLates
           : `${formatNumber(firstSlot)} - ${formatNumber(lastSlot)}`
         }
       </td>
-      <td className='number'><FormatBalance value={value} /></td>
+      <Table.Column.Balance value={value} />
     </tr>
   );
 }

packages/page-society/src/Candidates/Bid.tsx

@@ -5,9 +5,8 @@ import type { PalletSocietyBid } from '@polkadot/types/lookup';
 
 import React, { useMemo } from 'react';
 
-import { AddressSmall, TxButton } from '@polkadot/react-components';
+import { AddressSmall, Table, TxButton } from '@polkadot/react-components';
 import { useAccounts, useApi } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 
 import { useTranslation } from '../translate';
 import BidType from './BidType';
@@ -72,14 +71,8 @@ function BidRow ({ index, value: { kind, value, who } }: Props): React.ReactElem
           )
         }
       </td>
-      <td className='number'>
-        <FormatBalance value={value} />
-      </td>
-      <td className='number'>
-        {tip && (
-          <FormatBalance value={tip} />
-        )}
-      </td>
+      <Table.Column.Balance value={value} />
+      <Table.Column.Balance value={tip} />
     </tr>
   );
 }

packages/page-society/src/Candidates/Candidate.tsx

@@ -8,9 +8,8 @@ import type { VoteType } from '../types';
 
 import React, { useMemo } from 'react';
 
-import { AddressSmall } from '@polkadot/react-components';
+import { AddressSmall, Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 
 import Votes from '../Overview/Votes';
 import BidType from './BidType';
@@ -45,9 +44,7 @@ function Candidate ({ allMembers, isMember, ownMembers, value: { accountId, kind
       <td className='start'>
         <BidType value={kind} />
       </td>
-      <td className='number'>
-        <FormatBalance value={value} />
-      </td>
+      <Table.Column.Balance value={value} />
       <Votes votes={votes} />
       <td className='button'>
         <CandidateVoting

packages/page-society/src/Suspended/Suspension.tsx

@@ -6,8 +6,7 @@ import type { PalletSocietyBidKind } from '@polkadot/types/lookup';
 
 import React from 'react';
 
-import { AddressSmall } from '@polkadot/react-components';
-import { FormatBalance } from '@polkadot/react-query';
+import { AddressSmall, Table } from '@polkadot/react-components';
 
 import BidType from '../Candidates/BidType';
 
@@ -26,11 +25,7 @@ function Suspension ({ balance, bid, value }: Props): React.ReactElement<Props>
       <td className='start'>
         <BidType value={bid} />
       </td>
-      <td className='number'>
-        {balance && (
-          <FormatBalance value={balance} />
-        )}
-      </td>
+      <Table.Column.Balance value={balance} />
     </tr>
   );
 }

packages/page-staking/src/Bags/Bag.tsx

@@ -8,8 +8,7 @@ import type { ListNode, StashNode } from './types';
 
 import React, { useEffect, useState } from 'react';
 
-import { AddressMini } from '@polkadot/react-components';
-import { FormatBalance } from '@polkadot/react-query';
+import { AddressMini, Table } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import Rebag from './Rebag';
@@ -63,8 +62,8 @@ function Bag ({ bagLower, bagUpper, info, nodesOwn }: Props): React.ReactElement
   return (
     <tr>
       <td className='number' />
-      <td className='number'><FormatBalance value={bagUpper} /></td>
-      <td className='number'><FormatBalance value={bagLower} /></td>
+      <Table.Column.Balance value={bagUpper} />
+      <Table.Column.Balance value={bagLower} />
       <td className='address'>{info.head.isSome && <AddressMini value={info.head.unwrap()} />}</td>
       <td className='address'>{info.tail.isSome && <AddressMini value={info.tail.unwrap()} />}</td>
       <td className='address'>

packages/page-staking/src/Payouts/Stash.tsx

@@ -6,8 +6,8 @@ import type { PayoutStash } from './types';
 
 import React, { useEffect, useState } from 'react';
 
-import { AddressSmall } from '@polkadot/react-components';
-import { BlockToTime, FormatBalance } from '@polkadot/react-query';
+import { AddressSmall, Table } from '@polkadot/react-components';
+import { BlockToTime } from '@polkadot/react-query';
 import { BN_MILLION } from '@polkadot/util';
 
 import useEraBlocks from './useEraBlocks';
@@ -46,7 +46,7 @@ function Stash ({ className = '', historyDepth, payout: { available, rewards, st
       <td className='start'>
         <span className='payout-eras'>{eraStr}</span>
       </td>
-      <td className='number'><FormatBalance value={available} /></td>
+      <Table.Column.Balance value={available} />
       <td className='number'>
         <BlockToTime
           className={eraBlocks ? '' : '--tmp'}

packages/page-staking/src/Payouts/Validator.tsx

@@ -6,8 +6,8 @@ import type { PayoutValidator } from './types';
 
 import React, { useMemo } from 'react';
 
-import { AddressMini, AddressSmall, Expander } from '@polkadot/react-components';
-import { BlockToTime, FormatBalance } from '@polkadot/react-query';
+import { AddressMini, AddressSmall, Expander, Table } from '@polkadot/react-components';
+import { BlockToTime } from '@polkadot/react-query';
 
 import { useTranslation } from '../translate';
 import PayButton from './PayButton';
@@ -66,7 +66,7 @@ function Validator ({ className = '', historyDepth, isDisabled, payout }: Props)
       <td className='start'>
         <span className='payout-eras'>{eraStr}</span>
       </td>
-      <td className='number'><FormatBalance value={payout.available} /></td>
+      <Table.Column.Balance value={payout.available} />
       <td className='number'>{eraBlocks && <BlockToTime value={eraBlocks} />}</td>
       <td
         className='expand'

packages/page-staking/src/Payouts/index.tsx

@@ -12,7 +12,6 @@ import styled from 'styled-components';
 
 import { Button, MarkWarning, Table, ToggleGroup } from '@polkadot/react-components';
 import { useApi, useBlockInterval, useCall, useOwnEraRewards } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 import { BN, BN_THREE } from '@polkadot/util';
 
 import ElectionBanner from '../ElectionBanner';
@@ -212,9 +211,7 @@ function Payouts ({ className = '', historyDepth, isInElection, ownPools, ownVal
   const footerStash = useMemo(() => (
     <tr>
       <td colSpan={3} />
-      <td className='number'>
-        {stashAvail && <FormatBalance value={stashAvail} />}
-      </td>
+      <Table.Column.Balance value={stashAvail} />
       <td colSpan={4} />
     </tr>
   ), [stashAvail]);
@@ -222,9 +219,7 @@ function Payouts ({ className = '', historyDepth, isInElection, ownPools, ownVal
   const footerVal = useMemo(() => (
     <tr>
       <td colSpan={3} />
-      <td className='number'>
-        {valAvail && <FormatBalance value={valAvail} />}
-      </td>
+      <Table.Column.Balance value={valAvail} />
       <td colSpan={4} />
     </tr>
   ), [valAvail]);

packages/page-staking/src/Pools/Pool.tsx

@@ -68,12 +68,10 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
             ? info.bonded.state.type
             : <span className='--tmp'>Destroying</span>}
         </td>
-        <td className='number'>
-          <FormatBalance
-            className={info ? '' : '--tmp'}
-            value={info?.bonded.points || 1}
-          />
-        </td>
+        <Table.Column.Balance
+          value={info?.bonded.points}
+          withLoading
+        />
         <td className='number media--1400'>{info && !info.rewardClaimable.isZero() && <FormatBalance value={info.rewardClaimable} />}</td>
         <td className='number'>
           {info && info.nominating.length !== 0 && (

packages/page-treasury/src/Overview/Proposal.tsx

@@ -7,7 +7,6 @@ import React, { useMemo } from 'react';
 
 import { AddressMini, AddressSmall, Columar, LinkExternal, Table } from '@polkadot/react-components';
 import { useApi, useToggle } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 import { isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -42,9 +41,7 @@ function ProposalDisplay ({ className = '', isMember, members, proposal: { counc
         <td className='address all'>
           <AddressSmall value={proposal.beneficiary} />
         </td>
-        <td className='number'>
-          <FormatBalance value={proposal.value} />
-        </td>
+        <Table.Column.Balance value={proposal.value} />
         <td className='address'>
           <AddressMini
             balance={proposal.bond}

packages/react-components/src/Table/Column/Balance.tsx

@@ -0,0 +1,26 @@
+// Copyright 2017-2023 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ColBalanceProps as Props } from '../types';
+
+import React from 'react';
+
+import { FormatBalance } from '@polkadot/react-query';
+
+function Balance ({ className = '', value, withLoading }: Props): React.ReactElement<Props> {
+  return (
+    <td className={`ui--Table-Column-Balance number ${className}`}>
+      {value
+        ? <FormatBalance value={value} />
+        : withLoading && (
+          <FormatBalance
+            className='tmp'
+            value={1}
+          />
+        )
+      }
+    </td>
+  );
+}
+
+export default React.memo(Balance);

packages/react-components/src/Table/Column/index.ts

@@ -0,0 +1,11 @@
+// Copyright 2017-2023 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { TableType } from '../types';
+
+import Balance from './Balance';
+import Expand from './Expand';
+import Favorite from './Favorite';
+import Id from './Id';
+
+export const Column: TableType['Column'] = { Balance, Expand, Favorite, Id };

packages/react-components/src/Table/index.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2023 @polkadot/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { TableType } from './types';
+
+import { Column } from './Column';
+import TableBase from './Table';
+
+const Table = TableBase as unknown as TableType;
+
+Table.Column = Column;
+
+export default Table;

packages/react-components/src/Table/index.tsx

@@ -1,25 +0,0 @@
-// Copyright 2017-2023 @polkadot/react-components authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { ColExpandProps, ColFavoriteProps, ColIdProps, TableProps } from './types';
-
-import React from 'react';
-
-import Expand from './Column/Expand';
-import Favorite from './Column/Favorite';
-import Id from './Column/Id';
-import TableBase from './Table';
-
-type TableType = React.ComponentType<TableProps> & {
-  Column: {
-    Expand: React.ComponentType<ColExpandProps>;
-    Favorite: React.ComponentType<ColFavoriteProps>;
-    Id: React.ComponentType<ColIdProps>;
-  }
-};
-
-const Table = TableBase as unknown as TableType;
-
-Table.Column = { Expand, Favorite, Id };
-
-export default Table;

packages/react-components/src/Table/types.ts

@@ -3,6 +3,12 @@
 
 import type { BN } from '@polkadot/util';
 
+export interface ColBalanceProps {
+  className?: string;
+  value?: BN | null;
+  withLoading?: boolean;
+}
+
 export interface ColExpandProps {
   className?: string;
   isExpanded: boolean;
@@ -36,3 +42,12 @@ export interface TableProps {
   legend?: React.ReactNode;
   noBodyTag?: boolean;
 }
+
+export type TableType = React.ComponentType<TableProps> & {
+  Column: {
+    Balance: React.ComponentType<ColBalanceProps>;
+    Expand: React.ComponentType<ColExpandProps>;
+    Favorite: React.ComponentType<ColFavoriteProps>;
+    Id: React.ComponentType<ColIdProps>;
+  }
+};