Add available balance display to transfer balance form

idea/frontend/src/features/balance/ui/balance/balance.module.scss

@@ -0,0 +1,10 @@
+.value {
+  font-family: Kanit;
+  font-weight: 600;
+}
+
+.unit {
+  font-family: Kanit;
+  font-weight: 300;
+  color: rgba(255, 255, 255, 0.7);
+}

idea/frontend/src/features/balance/ui/balance/balance.tsx

@@ -0,0 +1,26 @@
+import { useBalanceFormat } from '@gear-js/react-hooks';
+import { Balance as BalanceType } from '@polkadot/types/interfaces';
+
+import styles from './balance.module.scss';
+
+type Props = {
+  value: BalanceType | undefined;
+};
+
+function Balance({ value }: Props) {
+  const { getFormattedBalance } = useBalanceFormat();
+
+  if (!value) return null;
+
+  const balance = getFormattedBalance(value);
+
+  return (
+    <p>
+      <span className={styles.value}>{balance.value}</span>
+      &nbsp;
+      <span className={styles.unit}>{balance.unit}</span>
+    </p>
+  );
+}
+
+export { Balance };

idea/frontend/src/features/balance/ui/balance/index.ts

@@ -0,0 +1,3 @@
+import { Balance } from './balance';
+
+export { Balance };

idea/frontend/src/features/balance/ui/program-balance/program-balance.module.scss

@@ -3,16 +3,3 @@
   align-items: center;
   gap: 8px;
 }
-
-.value {
-  font-family: Kanit;
-  font-weight: 600;
-  line-height: 18.2px;
-}
-
-.unit {
-  font-family: Kanit;
-  font-weight: 300;
-  line-height: 18.2px;
-  color: rgba(255, 255, 255, 0.7);
-}

idea/frontend/src/features/balance/ui/program-balance/program-balance.tsx

@@ -1,10 +1,11 @@
 import { HexString } from '@gear-js/api';
-import { useAccount, useBalance, useBalanceFormat } from '@gear-js/react-hooks';
+import { useAccount, useBalance } from '@gear-js/react-hooks';
 import { Button } from '@gear-js/ui';
 
 import { useModalState } from '@/hooks';
 
 import PlusSVG from '../../assets/plus.svg?react';
+import { Balance } from '../balance';
 import styles from './program-balance.module.scss';
 import { TransferBalanceModal } from '../transfer-balance-modal';
 
@@ -15,19 +16,13 @@ type Props = {
 function ProgramBalance({ id }: Props) {
   const { account } = useAccount();
   const { balance } = useBalance(id);
-  const { getFormattedBalance } = useBalanceFormat();
-  const formattedBalance = balance ? getFormattedBalance(balance) : balance;
 
   const [isModalOpen, openModal, closeModal] = useModalState();
 
   return (
     <>
       <div className={styles.balance}>
-        <p>
-          <span className={styles.value}>{formattedBalance?.value}</span>
-          &nbsp;
-          <span className={styles.unit}>{formattedBalance?.unit}</span>
-        </p>
+        <Balance value={balance} />
 
         {account && <Button icon={PlusSVG} color="transparent" onClick={openModal} />}
       </div>

idea/frontend/src/features/balance/ui/transfer-balance-modal/transfer-balance-modal.module.scss

@@ -10,3 +10,16 @@
   grid-template-columns: 1fr 1fr;
   gap: 32px;
 }
+
+.balance {
+  margin-top: 8px;
+
+  display: flex;
+  gap: 8px;
+
+  .text {
+    font-family: Kanit;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.7);
+  }
+}

idea/frontend/src/features/balance/ui/transfer-balance-modal/transfer-balance-modal.tsx

@@ -1,4 +1,4 @@
-import { useApi } from '@gear-js/react-hooks';
+import { useAccount, useApi, useDeriveBalancesAll } from '@gear-js/react-hooks';
 import { Button, Modal } from '@gear-js/ui';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -10,6 +10,7 @@ import { useBalanceSchema, useLoading, useSignAndSend } from '@/hooks';
 import { ACCOUNT_ADDRESS_SCHEMA } from '@/shared/config';
 
 import SubmitSVG from '../../assets/submit.svg?react';
+import { Balance } from '../balance';
 import styles from './transfer-balance-modal.module.scss';
 
 const FIELD_NAME = {
@@ -41,6 +42,9 @@ type Props = {
 
 const TransferBalanceModal = ({ defaultAddress = '', close }: Props) => {
   const { api, isApiReady } = useApi();
+  const { account } = useAccount();
+  const balance = useDeriveBalancesAll(account?.address);
+
   const [isLoading, enableLoading, disableLoading] = useLoading();
   const signAndSend = useSignAndSend();
 
@@ -72,7 +76,16 @@ const TransferBalanceModal = ({ defaultAddress = '', close }: Props) => {
         <form onSubmit={handleSubmit}>
           <div className={styles.inputs}>
             <Input name={FIELD_NAME.ADDRESS} label="Address" direction="y" block />
-            <ValueField name={FIELD_NAME.VALUE} label="Value" direction="y" block />
+
+            <div>
+              <ValueField name={FIELD_NAME.VALUE} label="Value" direction="y" block />
+
+              <div className={styles.balance}>
+                <p className={styles.text}>Your transferrable balance:</p>
+                <Balance value={balance?.availableBalance} />
+              </div>
+            </div>
+
             <Checkbox name={FIELD_NAME.KEEP_ALIVE} label="Keep Alive" />
           </div>