feat: Add example Pages in docs site (#47)

* feat: build after install * chore: docs fixes * feat: separate Testing code from FedimintWallet * feat: add instructions to vite-core demo * feat: upgrade bare js demo * feat: add example pages to docs * chore: add changeset * fix: remove package-lock from bare-js now that its using pnpm * chore: fix sherlock warnings * fix: swap public testing federation for solo mint
fedimint · Sep 27, 2024 · 27d42ad · 27d42ad
1 parent ada54ce
commit 27d42ad
Show file tree

Hide file tree

Showing 33 changed files with 444 additions and 754 deletions.
diff --git a/.changeset/kind-fans-jog.md b/.changeset/kind-fans-jog.md
@@ -0,0 +1,5 @@
+---
+'@fedimint/core-web': patch
+---
+
+Added Example projects to docs containing Stackblitz previews
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -1,3 +1,4 @@
+# NO LONGER USED - the docs site is now being deployed to github pages instead of the example
 name: Deploy Vite-Core Example to GitHub Pages
 
 on:

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -49,7 +49,7 @@ export default withMermaid({
     },
     nav: [
       { text: 'Documentation', link: '/core/getting-started' },
-      { text: 'Examples', link: '/examples' },
+      { text: 'Examples', link: '/examples/vite-react' },
       {
         text: 'More',
         items: [

diff --git a/docs/.vitepress/sidebar.ts b/docs/.vitepress/sidebar.ts
@@ -22,6 +22,16 @@ export function getSidebar() {
         ],
       },
     ],
+    '/examples/': [
+      {
+        base: '/examples/',
+        text: 'Examples',
+        items: [
+          { text: 'Vite + React', link: 'vite-react' },
+          { text: 'Vanilla JS', link: 'bare-js' },
+        ],
+      },
+    ],
   } satisfies DefaultTheme.Sidebar
 }
 

diff --git a/docs/core/FedimintWallet/constructor.md b/docs/core/FedimintWallet/constructor.md
@@ -1,4 +1,4 @@
-# FedimintWallet
+# new FedimintWallet()t
 
 Creates a new instance of FedimintWallet.
 
@@ -39,15 +39,13 @@ until needed. Default is false.
 import { FedimintWallet } from '@fedimint/core-web'
 
 // Create a wallet with immediate initialization
-const wallet = new FedimintWallet()
+const wallet = new FedimintWallet() // wasm gets initialized here
 wallet.open()
 
 // Create a wallet with lazy initialization
-const lazyWallet = new FedimintWallet(true)
+const lazyWallet = new FedimintWallet(true) // lazy = true
 // Some time later...
-lazyWallet.initialize().then(() => {
-  lazyWallet.open()
-})
+lazyWallet.open() // wasm gets initialized here
 ```
 
 #### Defined in

diff --git a/docs/core/FedimintWallet/index.md b/docs/core/FedimintWallet/index.md
@@ -1,4 +1,4 @@
-# Wallet Overview
+# FedimintWallet Overview
 
 The `FedimintWallet` class serves as the main entry point for the library. It orchestrates the various services and the WorkerClient.
 

diff --git a/docs/core/getting-started.md b/docs/core/getting-started.md
@@ -87,6 +87,8 @@ Currently requires modifying the library and utilizing the `@fedimint/wasm-web`
 
 See the [bare-js sample app](https://github.com/fedimint/fedimint-web-sdk/tree/main/examples/bare-js) for a full working example.
 
+:::
+
 ### Webpack
 
 ::: details Webpack Setup
@@ -187,12 +189,6 @@ Check out the Vite + React example in the [`examples/vite-core`](https://github.
 
 For a list of public federations with invite codes, visit [Bitcoin Mints](https://bitcoinmints.com/?tab=mints&showFedimint=true).
 
-## Next Steps
-
-- **API Reference**: Browse the collection of available methods and learn how to use them.
-- **Advanced Usage**: Discover more complex scenarios and best practices for using @fedimint/core-web.
-- **Framework Integration**: Learn how to integrate @fedimint/core-web with popular front-end frameworks.
-
 ## What's Next?
 
 - To see the sdk in action, check out the [examples](../examples/index.md)

diff --git a/docs/examples/bare-js.md b/docs/examples/bare-js.md
@@ -0,0 +1,23 @@
+# Bare JS Example
+
+This example shows how to use the `core-web` package in a bare javascript environment (no bundler).
+
+There's no ui, so open your browser's console to see the library in action.
+
+## Live Preview
+
+<iframe src="https://stackblitz.com/github/fedimint/fedimint-web-sdk/tree/main/examples/bare-js?embed=1" style="width: 100%; height: 600px; border: 0;"></iframe>
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/fedimint/fedimint-web-sdk/tree/main/examples/bare-js)
+
+## Running the Example Locally
+
+```bash
+# from the root of the repo
+
+# install dependencies
+pnpm i
+
+# run the dev server
+pnpm run dev:bare
+```
diff --git a/docs/examples/index.md b/docs/examples/index.md
diff --git a/docs/examples/vite-react.md b/docs/examples/vite-react.md
@@ -0,0 +1,21 @@
+# Vite + React Example
+
+This is an example application demonstrating the usage of Fedimint client in React Application application.
+
+## Live Preview
+
+<iframe src="https://stackblitz.com/github/fedimint/fedimint-web-sdk/tree/main/examples/vite-core?embed=1" style="width: 100%; height: 600px; border: 0;"></iframe>
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/fedimint/fedimint-web-sdk/tree/main/examples/vite-core)
+
+## Running the Example Locally
+
+```bash
+# from the root of the repo
+
+# install dependencies
+pnpm i
+
+# run the dev server
+pnpm run dev:vite
+```
diff --git a/examples/bare-js/README.md b/examples/bare-js/README.md
@@ -2,11 +2,22 @@
 
 This example shows how to use the `core-web` package in a bare javascript environment (no bundler).
 
-## Running the example
+There's no ui, so open your browser's console to see the library in action.
+
+## Live Preview
+
+<iframe src="https://stackblitz.com/github/fedimint/fedimint-web-sdk/tree/main/examples/bare-js?embed=1" style="width: 100%; height: 600px; border: 0;"></iframe>
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/fedimint/fedimint-web-sdk/tree/main/examples/bare-js)
+
+## Running the Example Locally
 
 ```bash
 # from the root of the repo
+
+# install dependencies
+pnpm i
+
+# run the dev server
 pnpm run dev:bare
 ```
-
-There's no ui, so open your browser's console to see the library in action.
diff --git a/examples/bare-js/index.html b/examples/bare-js/index.html
@@ -2,19 +2,58 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Testy Fedimint Web SDK Bare</title>
+    <link rel="stylesheet" href="style.css">
   </head>
 
 <body>
+  <div class="container">
+    <h2>Fedimint Web SDK Bare html/js example</h2>
+    <div id="actions">
+      <button id="getBalance">wallet.balance.getBalance()</button>
+      <button id="createInvoice">wallet.lightning.createInvoice(1000, 'Test Invoice')</button>
+    </div>
+    <p>Console output:</p>
+    <div id="console"></div>
+    <p>Faucet Link: <a href="https://faucet.mutinynet.com/" target="_blank">https://faucet.mutinynet.com/</a></p>
+  </div>
   <script type="module">
     import * as Default from './index.js';
     const { FedimintWallet } = Default;
 
+    ////////////////////////////////
+    //////////// Setup /////////////
+    ////////////////////////////////
+
+    // Override console methods to display in UI
+    const consoleDiv = document.getElementById('console');
+    ['log', 'error', 'warn', 'info'].forEach(method => {
+      const original = console[method];
+      console[method] = (...args) => {
+        original.apply(console, args);
+        const message = args.map(arg => 
+          typeof arg === 'object' ? JSON.stringify(arg, null, 2) : arg
+        ).join(' ');
+        consoleDiv.innerHTML += `${message}\n`;
+        consoleDiv.scrollTop = consoleDiv.scrollHeight;
+      };
+    });
+
+    /////////////////////////////////
+    ///////// Wallet Setup //////////
+    ////////////////////////////////
+
+    let wallet;
     const TESTNET_INVITE_CODE = 'fed11qgqzc2nhwden5te0vejkg6tdd9h8gepwvejkg6tdd9h8garhduhx6at5d9h8jmn9wshxxmmd9uqqzgxg6s3evnr6m9zdxr6hxkdkukexpcs3mn7mj3g5pc5dfh63l4tj6g9zk4er';
 
     (async () => {
       try {
-        const wallet = new FedimintWallet();
+        wallet = new FedimintWallet();
+
+        // HACK: Expose client to global for testing in the browser console
+        globalThis.wallet = wallet
+
         wallet.setLogLevel('debug')
 
         // Tries to open the wallet. If it's not open (new user), it joins the federation
@@ -23,8 +62,21 @@
           const joinRes = await wallet.joinFederation(TESTNET_INVITE_CODE)
         }
 
-        // HACK: Expose client to global for testing in the browser console
-        globalThis.wallet = wallet
+
+      /////////////////////////////////
+      ////////// UI Actions //////////
+      ////////////////////////////////
+
+        // Set up event listeners for buttons
+        document.getElementById('getBalance').addEventListener('click', async () => {
+          const balance = await wallet.balance.getBalance();
+          console.log('Balance Response:', balance);
+        });
+
+        document.getElementById('createInvoice').addEventListener('click', async () => {
+          const createInvoice = await wallet.lightning.createInvoice(1000, "Test Invoice");
+          console.log('Invoice Response:', createInvoice);
+        });
 
       } catch (e) {
         console.error(e);
@@ -33,5 +85,4 @@
 
   </script>
 </body>
-
 </html>
diff --git a/examples/bare-js/index.js b/examples/bare-js/index.js