Merge pull request #90 from boys-cyberhub/feat/issues-22-23-24-25

feat: token balances hook, network hook, mismatch banner, and auto-reconnect

Author: IbrahimIjai

apps/web/src/features/trade/components/trade-panel/TradePanel.tsx

@@ -8,6 +8,7 @@ import { Badge } from "@workspace/ui/components/badge"
 import { useTradeState } from "../../hooks/useTradeState"
 import { useTokenPrices } from "../../hooks/useTokenPrices"
 import { useTradeFees } from "../../hooks/useTradeFees"
+import { useTokenBalances } from "../../../wallet/hooks/useTokenBalances"
 import { TradeInfoRows } from "./TradeInfoRows"
 import { ConfirmationDialog } from "./ConfirmationDialog"
 import {
@@ -191,17 +192,30 @@ export function TradePanel() {
 function TradeInputs({ trade }: { trade: ReturnType<typeof useTradeState> }) {
   const { fromAmount, fromTokenAddress, toTokenAddress, tradeFlags, setFromAmount, switchTokens } = trade
   const { getMidPrice } = useTokenPrices()
+  const { data: balances } = useTokenBalances()
 
   const fromPrice = getMidPrice(fromTokenAddress)
   const fromUsd = parseFloat(fromAmount || "0") * fromPrice
+  const walletBalance = balances?.[fromTokenAddress]
 
   return (
     <div className="mt-3 space-y-2">
       {/* Pay */}
       <div className="space-y-1">
-        <label className="text-xs text-muted-foreground">
-          {tradeFlags.isSwap ? "Pay" : "Collateral"}
-        </label>
+        <div className="flex items-center justify-between">
+          <label className="text-xs text-muted-foreground">
+            {tradeFlags.isSwap ? "Pay" : "Collateral"}
+          </label>
+          {walletBalance !== undefined && (
+            <span className="text-xs text-muted-foreground">
+              Balance:{" "}
+              <span className="font-mono font-medium text-foreground">
+                {walletBalance.toLocaleString(undefined, { maximumFractionDigits: 6 })}{" "}
+                {fromTokenAddress}
+              </span>
+            </span>
+          )}
+        </div>
         <div className="relative">
           <Input
             type="number"

apps/web/src/features/wallet/components/NetworkMismatchBanner.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react"
+import { useLocation } from "@tanstack/react-router"
+import { useNetwork } from "../hooks/useNetwork"
+import { useWalletStore } from "../store/wallet-store"
+import { NETWORK } from "@/app/config/network"
+
+const SESSION_KEY = "so4-network-mismatch-dismissed"
+
+export function NetworkMismatchBanner() {
+  const { pathname } = useLocation()
+  const { mismatch, network } = useNetwork()
+  const { status } = useWalletStore()
+  const [dismissed, setDismissed] = useState(
+    () => sessionStorage.getItem(SESSION_KEY) === "1"
+  )
+
+  // Never show on landing page
+  if (pathname === "/") return null
+  if (!mismatch || status !== "connected" || dismissed) return null
+
+  const walletLabel = network === "mainnet" ? "Mainnet" : "Testnet"
+  const appLabel = NETWORK.name === "mainnet" ? "Mainnet" : "Testnet"
+
+  function dismiss() {
+    sessionStorage.setItem(SESSION_KEY, "1")
+    setDismissed(true)
+  }
+
+  return (
+    <div
+      role="alert"
+      className="flex items-center justify-between border-b border-yellow-500/30 bg-yellow-500/10 px-4 py-2 text-sm text-yellow-700 dark:text-yellow-400"
+    >
+      <span>
+        Your wallet is connected to {walletLabel} but this app is running on{" "}
+        {appLabel}. Please switch networks in your wallet.
+      </span>
+      <button
+        onClick={dismiss}
+        className="ml-4 shrink-0 font-medium underline-offset-2 hover:underline"
+        aria-label="Dismiss network mismatch warning"
+      >
+        Dismiss
+      </button>
+    </div>
+  )
+}

apps/web/src/features/wallet/components/WalletProvider.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from "react"
+import { walletKit } from "../lib/wallet-kit"
+import { useWalletStore } from "../store/wallet-store"
+
+interface WalletProviderProps {
+  children: React.ReactNode
+}
+
+export function WalletProvider({ children }: WalletProviderProps) {
+  const { address, walletId, setConnected, setDisconnected } = useWalletStore()
+
+  useEffect(() => {
+    // Nothing persisted — nothing to reconnect
+    if (!address || !walletId) return
+
+    // Point the kit at the previously-used wallet module, then ask for the
+    // current address.  If the extension is still installed and approved,
+    // this resolves without a modal.  Any error means the wallet is gone —
+    // clear the store without showing a toast.
+    walletKit.setWallet(walletId)
+    walletKit
+      .getAddress()
+      .then(({ address: liveAddress }) => {
+        if (liveAddress === address) {
+          setConnected(liveAddress, walletId)
+        } else {
+          setDisconnected()
+        }
+      })
+      .catch(() => {
+        setDisconnected()
+      })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // intentionally run only once on mount
+
+  return <>{children}</>
+}

apps/web/src/features/wallet/hooks/useNetwork.ts

@@ -0,0 +1,13 @@
+import { NETWORK } from "@/app/config/network"
+import { useWalletStore } from "../store/wallet-store"
+
+export function useNetwork() {
+  const { network, status } = useWalletStore()
+
+  const isTestnet = network === "testnet"
+  const isMainnet = network === "mainnet"
+  // Mismatch only meaningful when a wallet is connected
+  const mismatch = status === "connected" && network !== NETWORK.name
+
+  return { network, isTestnet, isMainnet, mismatch }
+}

apps/web/src/features/wallet/hooks/useTokenBalances.ts

@@ -0,0 +1,36 @@
+import { useQuery } from "@tanstack/react-query"
+import { NETWORK } from "@/app/config/network"
+import { useWalletStore } from "../store/wallet-store"
+
+type HorizonBalance = {
+  asset_type: "native" | "credit_alphanum4" | "credit_alphanum12"
+  asset_code?: string
+  balance: string
+}
+
+async function fetchTokenBalances(
+  address: string
+): Promise<Record<string, number>> {
+  const res = await fetch(`${NETWORK.horizonUrl}/accounts/${address}`)
+  if (!res.ok) throw new Error(`Horizon error ${res.status}`)
+  const data = await res.json()
+
+  const result: Record<string, number> = {}
+  for (const entry of data.balances as HorizonBalance[]) {
+    const symbol = entry.asset_type === "native" ? "XLM" : (entry.asset_code ?? "")
+    if (symbol) result[symbol] = parseFloat(entry.balance)
+  }
+  return result
+}
+
+export function useTokenBalances() {
+  const { address, status } = useWalletStore()
+
+  return useQuery({
+    queryKey: ["tokenBalances", address],
+    queryFn: () => fetchTokenBalances(address!),
+    enabled: !!address && status === "connected",
+    staleTime: 15_000,
+    refetchInterval: 15_000,
+  })
+}

apps/web/src/features/wallet/lib/wallet-kit.ts

@@ -0,0 +1,13 @@
+import {
+  StellarWalletsKit,
+  WalletNetwork,
+  FreighterModule,
+} from "@creit.tech/stellar-wallets-kit"
+import { NETWORK } from "@/app/config/network"
+
+export const walletKit = new StellarWalletsKit({
+  network:
+    NETWORK.name === "mainnet" ? WalletNetwork.PUBLIC : WalletNetwork.TESTNET,
+  selectedWalletId: "freighter",
+  modules: [new FreighterModule()],
+})

apps/web/src/routes/__root.tsx

@@ -2,6 +2,8 @@ import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Toaster } from "sonner"
 import { ThemeProvider } from "../ui/theme-provider"
+import { WalletProvider } from "../features/wallet/components/WalletProvider"
+import { NetworkMismatchBanner } from "../features/wallet/components/NetworkMismatchBanner"
 import appCss from "@workspace/ui/globals.css?url"
 
 const queryClient = new QueryClient({
@@ -178,7 +180,10 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       <body>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider>
-            {children}
+            <WalletProvider>
+              <NetworkMismatchBanner />
+              {children}
+            </WalletProvider>
             <Toaster richColors position="bottom-right" />
           </ThemeProvider>
         </QueryClientProvider>