dont calculate TransferableBalance when balance is 0 (#614)

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

@@ -65,11 +65,11 @@ const WalletDropdownMenu = ({
         inline={true}
       />
     </div>
-    <p className="my-6 truncate text-center text-2xl font-bold" title={`${balance} ${tokenSymbol}`}>
+    <p className="my-6 text-2xl font-bold text-center truncate" title={`${balance} ${tokenSymbol}`}>
       {balance} {tokenSymbol}
     </p>
     <Button className="bg-base-300" size="sm" onClick={removeWalletAccount}>
-      <ArrowLeftEndOnRectangleIcon className="mr-2 w-5" />
+      <ArrowLeftEndOnRectangleIcon className="w-5 mr-2" />
       Disconnect
     </Button>
   </Dropdown.Menu>

src/helpers/substrate.ts

@@ -9,6 +9,11 @@ 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) {
+  // Check if the free balance is zero to avoid negative results
+  if (free.lte(0)) {
+    return new Big(0);
+  }
+
   // Emulate Math.max
   const max = frozen.minus(reserved).gt(EXISTENTIAL_DEPOSIT) ? frozen.minus(reserved) : EXISTENTIAL_DEPOSIT;
   return free.minus(max);