display KSM balances and set max reasonable amount to send

src/components/TransferForm.tsx

@@ -1,9 +1,10 @@
 import { useForm } from '@mantine/form';
 import { isValidWalletAddress } from '../utils';
-import {FC, useEffect} from 'react';
-import { Button, Stack, TextInput } from '@mantine/core';
-import { TNodeWithRelayChains } from '@paraspell/sdk';
+import {FC, useEffect, useState} from 'react';
+import {Button, Grid, Stack, TextInput} from '@mantine/core';
+import {createApiInstanceForNode, TNodeWithRelayChains} from '@paraspell/sdk';
 import {useWallet} from "../providers/WalletProvider.tsx";
+import {formatBalance} from "@polkadot/util";
 
 export type FormValues = {
   from: TNodeWithRelayChains;
@@ -21,11 +22,55 @@ type Props = {
 
 const TransferForm: FC<Props> = ({ onSubmit, loading }) => {
   const { selectedAccount } = useWallet();
+  const encointerApi = createApiInstanceForNode('Encointer')
+  const kusamaApi = createApiInstanceForNode('Kusama')
+
+  const [encointerBalance, setEncointerBalance] = useState();
+  const [kusamaBalance, setKusamaBalance] = useState();
+
+  formatBalance.setDefaults({
+    decimals: 12,
+    unit: 'KSM',
+  });
 
   useEffect(() => {
     if (selectedAccount) form.values.address = selectedAccount.address;
   }, [selectedAccount]);
 
+  useEffect(() => {
+    let unsubscribe
+    encointerApi.then((api) => {
+      // If the user has selected an address, create a new subscription
+      selectedAccount &&
+      api.query.system
+          .account(selectedAccount.address, balance =>
+          {
+            setEncointerBalance(formatBalance(balance.data.free))
+            form.values.amount = Math.max(0, balance.data.free * Math.pow(10, -12) - 0.001)
+          }
+          )
+          .then(unsub => (unsubscribe = unsub))
+          .catch(console.error)
+      return () => unsubscribe && unsubscribe()
+    })
+  }, [selectedAccount, encointerApi]);
+
+  useEffect(() => {
+    let unsubscribe
+    if (selectedAccount) form.values.address = selectedAccount.address;
+    kusamaApi.then((api) => {
+      // If the user has selected an address, create a new subscription
+      selectedAccount &&
+      api.query.system
+          .account(selectedAccount.address, balance =>
+              setKusamaBalance(formatBalance(balance.data.free))
+          )
+          .then(unsub => (unsubscribe = unsub))
+          .catch(console.error)
+      return () => unsubscribe && unsubscribe()
+    })
+  }, [selectedAccount, kusamaApi]);
+
   const form = useForm<FormValues>({
     initialValues: {
       from: 'Encointer',
@@ -44,7 +89,15 @@ const TransferForm: FC<Props> = ({ onSubmit, loading }) => {
   return (
     <form onSubmit={form.onSubmit(onSubmit)}>
       <Stack>
-        <TextInput label="Amount KSM to send to same account on relaychain" placeholder="0.1" required {...form.getInputProps('amount')} />
+        <p>transferable KSM balance</p>
+        <Grid>
+          <Grid.Col span={6}>Encointer</Grid.Col>
+          <Grid.Col span={6}>{encointerBalance}</Grid.Col>
+          <Grid.Col span={6}>Kusama</Grid.Col>
+          <Grid.Col span={6}>{kusamaBalance}</Grid.Col>
+        </Grid>
+        <TextInput label="Amount KSM to send to same account on relaychain" placeholder="0.1"
+                   required {...form.getInputProps('amount')} />
         <Button type="submit" loading={loading}>
           Submit transaction
         </Button>

src/main.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import WalletProvider from './providers/WalletProvider';
+import WalletProvider, {useWallet} from './providers/WalletProvider';
+import {createApiInstanceForNode} from "@paraspell/sdk";
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>