feat: prepare for the quests page

components/ConnectPrax.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { createPenumbraClient } from '@penumbra-zone/client';
+import { Button } from '@penumbra-zone/ui/Button';
+
+const prax_id = 'lkpmkhpnhknhmibgnmmhdhgdilepfghe';
+const prax_origin = new URL(`chrome-extension://${prax_id}`).origin;
+
+const ConnectPrax = () => {
+  const onConnect = async () => {
+    const penumbra = createPenumbraClient(prax_origin);
+    void penumbra.connect();
+  };
+
+  return (
+    <Button onClick={onConnect}>
+      Connect Prax
+    </Button>
+  );
+};
+
+export default ConnectPrax;

next.config.js → next.config.mjs

@@ -1,16 +1,15 @@
-const withNextra = require('nextra')({
+import nextra from 'nextra';
+
+const withNextra = nextra({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.jsx'
 })
- 
-module.exports = withNextra({
+
+export default withNextra({
     // Attempt to generate static site, via https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
     output: 'export',
     // Disable image optimization, as it doesn't work for SSG.
     images: {
         unoptimized: true,
     },
 })
-
-// If you have other Next.js configurations, you can pass them as the parameter:
-// module.exports = withNextra({ /* other next.js config */ })

package.json

@@ -3,19 +3,31 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-"scripts": {
-  "dev": "next dev",
-  "build": "next build",
-  "start": "next start"
-},
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
   "keywords": [],
   "author": "",
   "license": "MIT",
+  "type": "module",
   "dependencies": {
+    "@connectrpc/connect": "^1.5.0",
+    "@penumbra-zone/client": "^18.1.0",
+    "@penumbra-zone/protobuf": "^6.0.0",
+    "@penumbra-zone/transport-dom": "^7.5.0",
+    "@penumbra-zone/ui": "file:/Users/vanishmax/Desktop/penumbra/web/packages/ui/penumbra-zone-ui-9.1.1.tgz",
     "next": "^14.2.5",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.13"
+  },
+  "packageManager": "[email protected]+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf",
+  "devDependencies": {
+    "@types/node": "22.5.5",
+    "typescript": "5.6.2"
   }
 }

pages/_app.tsx

@@ -0,0 +1,10 @@
+import type { AppProps } from 'next/app'
+import { PenumbraUIProvider } from '@penumbra-zone/ui/PenumbraUIProvider';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <PenumbraUIProvider>
+      <Component {...pageProps} />
+    </PenumbraUIProvider>
+  );
+}

pages/_meta.json

@@ -5,6 +5,12 @@
       "breadcrumb": false
     }
   },
+  "quest": {
+    "title": "Quest",
+    "theme": {
+      "breadcrumb": false
+    }
+  },
   "interchain-privacy": {
     "title": "Interchain Privacy",
     "theme": {
@@ -58,4 +64,4 @@
       "breadcrumb": false
     }
   }
-}
+}

pages/quest.mdx

@@ -0,0 +1,31 @@
+import { Callout } from 'nextra/components';
+import ConnectPrax from '@/components/ConnectPrax';
+
+# Quest
+
+## Setup a wallet
+
+In order to interact with Penumbra, you need a compatible wallet. One such option is Prax Wallet. Visit the link and click Add to Chrome to install it, then come back to this page.
+
+Great! You've now installed the Prax Wallet extension.
+
+Open it by clicking the extension icon in the Chrome toolbar, select Create a new wallet. During the guided tutorial, you'll need to set a passphrase to protect your wallet. The passphrase is not the same as the recovery phrase. The passphrase is used to restrict access to the web wallet on your computer. The recovery phrase can be used to restore your wallet in case you forget your passphrase, switch to a new machine or delete the extension. Make sure to store both the passphrase and the recovery phrase securely, for example in a password manager. Re-enter portions of the recovery phrase when prompted, to confirm that you've saved it properly.
+
+Before you connect your wallet, websites cannot access any of your data. It's all stored locally and securely on your device. To give a site permission to access your data, click the Connect button below.
+
+<ConnectPrax />
+
+
+## Deposit funds
+
+Now it's time to shield your funds and transfer them into Penumbra. Pick an account from Prax by clicking the extension icon, click the IBC Deposit Address checkbox, and copy the address.
+
+<Callout type="info">
+  IBC Deposit addresses exist because source chains record the deposit address. They serve as an additional layer of anonymity to not link your deposit and actual addresses.
+</Callout>
+
+We will use [Skip Protocol](https://go.skip.build/)  to bridge funds into Penumbra. Go to the Skip app, and input your IBC Deposit address. Select your source chain and asset (we recommend USDC, but any common asset is fine) and select Penumbra and USDC as the destination chain. Then initiate the deposit and come back to this page.
+
+<Callout type="info">
+  Penumbra supports paying fees in multiple tokens, including USDC. Prax will always choose the best token to pay fees with depending on your balances.
+</Callout>