removed currencies balances when account disconnected

.storybook/preview.ts

@@ -8,7 +8,7 @@ export const parameters = {
 const preview: Preview = {
   loaders: [
     async () => ({
-      settings: await (await fetch(`https://bridge-api.layerswap.io/api/settings?version=sandbox`)).json(),
+      settings: await (await fetch(`https://bridge-api-dev.layerswap.cloud/api/networks?version=sandbox`)).json(),
     }),
   ],
   parameters: {

components/Input/CurrencyFormField.tsx

@@ -22,6 +22,8 @@ const BalanceComponent = dynamic(() => import("./dynamic/Balance"), {
     loading: () => <></>,
 });
 
+const CurrencyDetails = dynamic(() => import("./dynamic/CurrencyFormItems"), {});
+
 const CurrencyFormField: FC<{ direction: string }> = ({ direction }) => {
     const {
         values,
@@ -116,7 +118,8 @@ const CurrencyFormField: FC<{ direction: string }> = ({ direction }) => {
         direction === "from" ? sourceRoutes?.data : destinationRoutes?.data,
         direction,
         balances[walletAddress || ''],
-        query
+        query,
+        direction === 'from' ? from?.internal_name : to?.internal_name
     )
     const currencyAsset = direction === 'from' ? fromCurrency?.asset : toCurrency?.asset;
 
@@ -198,7 +201,10 @@ const CurrencyFormField: FC<{ direction: string }> = ({ direction }) => {
 
     return (
         <div className="relative">
-            <BalanceComponent values={values} direction={direction} onLoad={(v) => setWalletAddress(v)} />
+            {
+                (direction == "from" ? values.from : values.to) &&
+                <BalanceComponent values={values} direction={direction} onLoad={(v) => setWalletAddress(v)} />
+            }
             <PopoverSelectWrapper
                 placeholder="Asset"
                 values={currencyMenuItems}
@@ -217,7 +223,8 @@ export function GenerateCurrencyMenuItems(
     routes?: { network: string, asset: string }[],
     direction?: string,
     balances?: Balance[],
-    query?: QueryParams): SelectMenuItem<NetworkCurrency>[] {
+    query?: QueryParams,
+    network?: string): SelectMenuItem<NetworkCurrency>[] {
     const { to, from } = values
     const lockAsset = direction === 'from' ? query?.lockFromAsset
         : query?.lockToAsset
@@ -240,8 +247,6 @@ export function GenerateCurrencyMenuItems(
     return currencies?.map(c => {
         const currency = c
         const displayName = currency.display_asset ?? currency.asset;
-        const balance = balances?.find(b => b?.token === c?.asset && (direction === 'from' ? from : to)?.internal_name === b.network)
-        const formatted_balance_amount = balance ? Number(truncateDecimals(balance?.amount, c.precision)) : ''
 
         const res: SelectMenuItem<NetworkCurrency> = {
             baseObject: c,
@@ -250,7 +255,7 @@ export function GenerateCurrencyMenuItems(
             order: CurrencySettings.KnownSettings[c.asset]?.Order ?? 5,
             imgSrc: resolveImgSrc && resolveImgSrc(c),
             isAvailable: currencyIsAvailable(c),
-            details: `${formatted_balance_amount}`,
+            menuItemDetails: <CurrencyDetails values={values} network={network} currency={c} />,
             type: "currency"
         };
 

components/Input/dynamic/CurrencyFormItems.tsx

@@ -0,0 +1,46 @@
+import { truncateDecimals } from "../../utils/RoundDecimals";
+import { NetworkCurrency } from "../../../Models/CryptoNetwork";
+import { useBalancesState } from "../../../context/balances";
+import useWallet from "../../../hooks/useWallet";
+import { useMemo } from "react";
+import { SwapFormValues } from "../../DTOs/SwapFormValues";
+
+const FormItems = ({ values, network, currency }: { values: SwapFormValues, network: string | undefined, currency: NetworkCurrency }) => {
+
+    const { to, from } = values
+    const { balances: allBalances } = useBalancesState()
+    const { wallets, getAutofillProvider: getProvider } = useWallet()
+
+    for (const key in allBalances) {
+        const matchingWallet = wallets.find(wallet => wallet.address === key);
+        if (!matchingWallet) {
+            delete allBalances[key];
+        }
+    }
+
+    const sourceWalletProvider = useMemo(() => {
+        return from && getProvider(from)
+    }, [from, getProvider])
+
+    const destinationWalletProvider = useMemo(() => {
+        return to && getProvider(to)
+    }, [to, getProvider])
+
+    const sourceNetworkWallet = sourceWalletProvider?.getConnectedWallet()
+    const destinationNetworkWallet = destinationWalletProvider?.getConnectedWallet()
+
+    const balance = allBalances[(sourceNetworkWallet ? sourceNetworkWallet?.address : destinationNetworkWallet?.address) || ""]?.find(b => b?.token === currency?.asset && network === b.network)
+    const formatted_balance_amount = balance ? Number(truncateDecimals(balance?.amount, currency.precision)) : ''
+
+    return (
+        balance && <span className="text-primary-text-placeholder flex flex-col items-end">
+            {Number(formatted_balance_amount) ?
+                <span className="text-primary-text-muted text-sm">{formatted_balance_amount}</span>
+                :
+                ""
+            }
+        </span>
+    )
+}
+
+export default FormItems

components/Select/Shared/Props/selectMenuItem.tsx

@@ -1,9 +1,11 @@
+import { SwapFormValues } from "../../../DTOs/SwapFormValues";
 import { CurrencyDisabledReason } from "../../../Input/CurrencyFormField";
 import { LayerDisabledReason } from "../../Popover/PopoverSelect";
 
 export class SelectMenuItem<T> implements ISelectMenuItem {
     id: string;
     name: string;
+    menuItemDetails?: React.ReactNode;
     order: number;
     imgSrc: string;
     isAvailable: {
@@ -33,6 +35,7 @@ export class SelectMenuItem<T> implements ISelectMenuItem {
 export interface ISelectMenuItem {
     id: string;
     name: string;
+    menuItemDetails?: React.ReactNode;
     imgSrc: string;
     group?: string;
     isAvailable: {

components/Select/Shared/SelectItem.tsx

@@ -18,9 +18,8 @@ export default function SelectItem({ item }: { item: ISelectMenuItem }) {
                 {item.name}
             </p>
             {
-                item.details &&
                 <p className="text-primary-text-muted">
-                    {item.details}
+                    {item.details || item.menuItemDetails}
                 </p>
             }
         </div>

hooks/useBalance.ts

@@ -13,7 +13,6 @@ import { NetworkCurrency } from "../Models/CryptoNetwork"
 import useQueryBalances from "../lib/balances/query/useQueryBalances"
 import { useQueryState } from "../context/query"
 
-
 export default function useBalanceProvider() {
 
     const BalanceProviders: BalanceProvider[] = [
@@ -37,7 +36,7 @@ export default function useBalanceProvider() {
         setAllGases
     } = useBalancesUpdate()
 
-    const { getAutofillProvider } = useWallet()
+    const { getAutofillProvider, wallets } = useWallet()
 
     const fetchBalance = async (network: Layer) => {
         const provider = getAutofillProvider(network)