wip 1

Caddyfile

@@ -0,0 +1,4 @@
+localhost {
+    tls internal
+    reverse_proxy localhost:3000
+}

components/Balances.tsx

@@ -1,28 +1,45 @@
-import { useBalances } from '@/components/hooks';
-import type { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
+import { useBalances, useAddresses } from '@/components/hooks';
+import type { ValueView, AddressView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { ValueViewComponent } from '@penumbra-zone/ui/ValueViewComponent';
+import { AddressViewComponent } from '@penumbra-zone/ui/AddressViewComponent';
 import type React from 'react';
+
 export function Balances() {
   const { data: balances } = useBalances();
+  const { data: addresses } = useAddresses(1);
+
+  const filteredBalances = balances?.filter(b =>
+    b.balanceView !== undefined &&
+    b.accountAddress?.addressView.case === 'decoded' &&
+    b.accountAddress.addressView.value.index?.account === 0
+  );
+
+  if (!filteredBalances?.length || !addresses?.length) return null;
 
-  return balances?.every((b) => b.balanceView !== undefined)
-    ? balances.map(({ balanceView }) => (
-        <BalanceRow key={balanceView!.toJsonString()} balance={balanceView!} />
-      ))
-    : null;
-}
+  const addressView: AddressView = {
+    addressView: {
+      case: 'decoded',
+      value: {
+        address: addresses[0].address,
+        index: {
+          account: 0,
+          randomizer: new Uint8Array()
+        }
+      }
+    }
+  };
 
-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 className="p-4">
+      <div className="flex flex-wrap gap-4 items-center">
+        <AddressViewComponent addressView={addressView} />
+        {filteredBalances.map(({ balanceView }) => (
+          <ValueViewComponent
+            key={balanceView!.toJsonString()}
+            valueView={balanceView!}
+          />
+        ))}
+      </div>
     </div>
   );
-}
+}

components/WalletInstallSteps.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useWalletManifests, useConnect } from './hooks';
+
+const WalletInstallSteps = () => {
+    const { data: wallets } = useWalletManifests();
+    const { connected, connectionLoading, onConnect } = useConnect();
+
+    const isPraxInstalled = wallets &&
+        Object.values(wallets).some(manifest => manifest.name.includes('Prax'));
+
+    return (
+        <div className="flex items-center justify-center gap-6 py-8">
+            <div className={`rounded-lg p-4 border-2 ${isPraxInstalled
+                    ? 'bg-green-900/20 border-green-500 text-green-400'
+                    : 'bg-gray-900/20 border-blue-500'
+                }`}>
+                {isPraxInstalled ? (
+                    <div className="font-medium">
+                        Prax Wallet Installed
+                    </div>
+                ) : (
+                    <a
+                        href="https://praxwallet.com"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-blue-400 hover:text-blue-300 font-medium"
+                    >
+                        Install Prax Wallet
+                    </a>
+                )}
+            </div>
+
+            <div className="flex-grow-0 h-0.5 w-16 bg-gray-700" />
+
+            <div className={`rounded-lg p-4 border-2 ${!isPraxInstalled ? 'bg-gray-900/20 border-gray-700 text-gray-500' :
+                    connected ? 'bg-green-900/20 border-green-500 text-green-400' : 'bg-gray-900/20 border-blue-500'
+                }`}>
+                {connected ? (
+                    <div className="font-medium">
+                        Wallet Connected
+                    </div>
+                ) : (
+                    <button
+                        onClick={() => isPraxInstalled && onConnect(Object.keys(wallets)[0])}
+                        disabled={!isPraxInstalled || connectionLoading}
+                        className="text-blue-400 hover:text-blue-300 disabled:text-gray-600 font-medium"
+                    >
+                        {connectionLoading ? 'Connecting...' : 'Connect Wallet'}
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default WalletInstallSteps;

pages/_meta.json

@@ -35,7 +35,7 @@
       "breadcrumb": false
     }
   },
-  "web": "Using Penumbra on the web",
+  "web": "Getting Started",
   "pcli": "Using Penumbra from the command line",
   "node": "Running a node",
   "frontend": "Running a frontend",
@@ -58,4 +58,4 @@
       "breadcrumb": false
     }
   }
-}
+}

pages/interchain-privacy.mdx

@@ -9,6 +9,17 @@ across chains.
 
 <Steps>
 
+### Test
+
+<Steps>
+
+### Nested
+
+</Steps>
+</Steps>
+
+<Steps>
+
 ### Deposit
 
 To deposit tokens into Penumbra's shielded pool, users initiate an ordinary IBC

pages/web.md → pages/web.mdx

@@ -1,4 +1,28 @@
-# Using Penumbra on the web
+import WalletInstallSteps from '@/components/WalletInstallSteps';
+import {Balances} from '@/components/Balances';
+import { Callout, Steps } from 'nextra/components'
+
+<Steps>
+
+### Install Prax Wallet
+
+To get started, [install Prax Wallet](https://praxwallet.com), then open it from the Chrome extensions toolbar to create a wallet.  
+
+<WalletInstallSteps/>
+
+Connected sites, like this one, can view your addresses and balances:
+
+<Balances/>
+
+
+### Shield Funds
+
+Test
+
+
+</Steps>
+
+(Old Content)
 
 Penumbra's web tooling is designed to support a decentralized ecosystem of
 frontends.  This allows different frontends to focus on different user

pages/web/_meta.json

@@ -1,5 +1,4 @@
 {
-  "prax": "Prax Wallet",
   "balances": "Viewing Balances",
   "ibc-transfers": "Shielding Funds",
   "send": "Sending Funds",