Show the portal pen balance only for transferrable tokens

src/components/Wallet/modals/DisconnectModal/index.tsx

@@ -77,10 +77,11 @@ const WalletDropdownMenu = ({
 
 export const DisconnectModal = () => {
   const { walletAccount, removeWalletAccount } = useGlobalState();
-  const { query, balances } = useAccountBalance();
   const { ss58Format, tokenSymbol } = useNodeInfoState().state;
   const { wallet, address } = walletAccount || {};
-  const { total: balance } = balances;
+
+  const { query, balances } = useAccountBalance();
+  const { transferable: transferableBalance } = balances;
 
   if (!address) return <></>;
 
@@ -89,15 +90,15 @@ export const DisconnectModal = () => {
       <WalletButton
         wallet={wallet}
         query={query}
-        balance={balance}
+        balance={transferableBalance}
         tokenSymbol={tokenSymbol}
         walletAccount={walletAccount}
       />
       <WalletDropdownMenu
         walletAccount={walletAccount}
         ss58Format={ss58Format}
         address={address}
-        balance={balance}
+        balance={transferableBalance}
         tokenSymbol={tokenSymbol}
         removeWalletAccount={removeWalletAccount}
       />

src/helpers/substrate.ts

@@ -1,5 +1,18 @@
+import Big from 'big.js';
 import { EventRecord } from '@polkadot/types/interfaces';
 import { ApiPromise } from '@polkadot/api';
+import { nativeToDecimal } from '../shared/parseNumbers/metric';
+
+// Defined [here](https://github.com/pendulum-chain/pendulum/blob/63bd13abbe089308f9702925697dba22d7792eba/runtime/common/src/lib.rs#L55)
+const EXISTENTIAL_DEPOSIT = nativeToDecimal(1_000_000_000);
+
+// Calculate the transferable balance. It's calculated as `transferable = free - max(frozen - reserved, ED)`,
+// see [here](https://wiki.polkadot.network/docs/learn-guides-accounts#query-account-data-in-polkadot-js).
+export function calculateTransferableBalance(free: Big, frozen: Big, reserved: Big) {
+  // Emulate Math.max
+  const max = frozen.minus(reserved).gt(EXISTENTIAL_DEPOSIT) ? frozen.minus(reserved) : EXISTENTIAL_DEPOSIT;
+  return free.minus(max);
+}
 
 export function containsError(events: EventRecord[], api: ApiPromise): boolean {
   const errorEvents = events

src/shared/useAccountBalance.ts

@@ -5,6 +5,7 @@ import { emptyCacheKey, QueryOptions } from './helpers';
 import { nativeToDecimal, prettyNumbers } from './parseNumbers/metric';
 import { useSharedState } from './Provider';
 import { cacheKeys } from '../constants/cache';
+import { calculateTransferableBalance } from '../helpers/substrate';
 
 export interface UseAccountBalanceResponse {
   query: UseQueryResult<FrameSystemAccountInfo | undefined, unknown>;
@@ -50,11 +51,11 @@ export const useAccountBalance = (
 
     const { free: freeRaw, frozen: frozenRaw, reserved: reservedRaw } = data.data;
 
-    const free = nativeToDecimal(freeRaw || 0, decimals).toNumber();
-    const frozen = nativeToDecimal(frozenRaw || 0, decimals).toNumber();
-    const reserved = nativeToDecimal(reservedRaw || 0, decimals).toNumber();
-    const total = prettyNumbers(free);
-    const transferable = prettyNumbers(free - frozen - reserved);
+    const free = nativeToDecimal(freeRaw || 0, decimals);
+    const frozen = nativeToDecimal(frozenRaw || 0, decimals);
+    const reserved = nativeToDecimal(reservedRaw || 0, decimals);
+    const total = prettyNumbers(free.toNumber());
+    const transferable = prettyNumbers(calculateTransferableBalance(free, frozen, reserved).toNumber());
     return { total, transferable };
   }, [data, decimals]);