Only show Balances tab when its relevant

Author: gskril

client/src/components/AccountCard.tsx

@@ -116,6 +116,7 @@ function AccountDialog({
   prompt: 'Add' | 'Edit'
 } & VariantProps<typeof buttonVariants>) {
   const accounts = useAccounts()
+  const { refetch: refetchOffchainAccounts } = useAccounts('offchain')
   const selectedAccount = accounts.data?.find(
     (account) => account.address === address
   )
@@ -137,6 +138,7 @@ function AccountDialog({
       loading: `${prompt}ing account...`,
       success: () => {
         accounts.refetch()
+        refetchOffchainAccounts()
         return `${prompt}ed account`
       },
       error: {

client/src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import { ArrowUpRight } from 'lucide-react'
 import { Link, useLocation } from 'react-router-dom'
 
+import { useAccounts } from '@/hooks/useHono'
 import { SERVER_URL } from '@/hooks/useHono'
 import { useQueues } from '@/hooks/useQueues'
 import { cn } from '@/lib/utils'
@@ -32,18 +33,27 @@ const links = [
     label: 'Balances',
     to: '/balances',
   },
-]
+] as const
+
 export function Layout({ children }: { children: React.ReactNode }) {
   const { pathname } = useLocation()
   const queues = useQueues()
+  const { data: offchainAccounts } = useAccounts('offchain')
 
   return (
     <div className="grid grid-cols-[10rem_1fr] lg:grid-cols-[15rem_1fr]">
       <aside className="sticky top-0 flex h-svh flex-col justify-between border-r p-2 lg:p-6">
         <nav>
           <ul>
             {links.map((link) => (
-              <li key={link.to}>
+              <li
+                key={link.to}
+                className={cn(
+                  link.label === 'Balances' &&
+                    offchainAccounts?.length === 0 &&
+                    'hidden'
+                )}
+              >
                 <Link
                   to={link.to}
                   className={cn(