feat: show balances

components/Balances.tsx

@@ -0,0 +1,34 @@
+import { useBalances } from '@/components/hooks';
+import type { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueViewComponent';
+import type React from 'react';
+
+export function Balances() {
+  const { data: balances } = useBalances();
+
+  return balances
+    ? balances
+        .map((bal) => bal.balanceView)
+        .map((balanceView) => (
+          <BalanceRow
+            key={balanceView!.toJsonString()}
+            balance={balanceView!}
+          />
+        ))
+    : null;
+}
+
+function BalanceRow({
+  balance,
+}: {
+  balance: ValueView;
+}) {
+  return (
+    <div
+      className="mt-3 flex gap-3 items-center bg-gray-700 text-white p-3"
+      key={balance.toJsonString()}
+    >
+      <ValueViewComponent valueView={balance} />
+    </div>
+  );
+}

pages/web/balances.mdx

@@ -1,4 +1,10 @@
+import {Balances} from '@/components/Balances';
+
 # Viewing Balances
 
-To view your balance, simply navigate to the `Assets` tab in the frontend site you are using. The balance of your wallet will be displayed there, separated by asset type. 
-Here you may also toggle into a `Transactions` view, which will allow you to see the connected wallet's transaction history, and dive into their transaction details.
+To view your balance, simply navigate to the `Assets` tab in the frontend site you are using. The balance of your wallet will be displayed there, separated by asset type.
+Here you may also toggle into a `Transactions` view, which will allow you to see the connected wallet's transaction history, and dive into their transaction details.
+
+Connected sites can also query your data, so if you connected your wallet, this guide can also show your balances:
+
+<Balances/>