Para 1
Para 2
Para 3
+Blurred...
+diff --git a/.gitignore b/.gitignore index a48ce2e6c..b0105535e 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,12 @@ doppler.yaml .env* CURRENT_WORK.md + + +.parcel-cache + +# Widget bundles (generated in CI/CD) +packages/sdk/bundles/ +apps/widget-demo/public/widget/*.js +apps/widget-demo/public/widget/*.css +apps/widget-demo/public/widget/*.map diff --git a/apps/widget-demo/.gitignore b/apps/widget-demo/.gitignore new file mode 100644 index 000000000..7b29135f0 --- /dev/null +++ b/apps/widget-demo/.gitignore @@ -0,0 +1,17 @@ +# Dependencies +node_modules + +# Build output +dist + +# Environment +.env +.env.local +.env.production + +# Logs +*.log + +# OS +.DS_Store + diff --git a/apps/widget-demo/DEPLOYMENT.md b/apps/widget-demo/DEPLOYMENT.md new file mode 100644 index 000000000..ca3da062f --- /dev/null +++ b/apps/widget-demo/DEPLOYMENT.md @@ -0,0 +1,314 @@ +# B3 Widget Demo - Deployment Guide + +## ๐ฏ Overview + +Static demo site for the B3 Widget SDK. Shows sign-in and content gating features. Railway-ready for one-click deployment. + +## ๐ Quick Deploy to Railway + +### Option 1: GitHub Integration (Recommended) + +1. Push this repo to GitHub +2. Go to [Railway.app](https://railway.app) +3. Click "New Project" โ "Deploy from GitHub repo" +4. Select your repo +5. Railway auto-detects `railway.json` and deploys +6. **No environment variables needed** - it's a static site! + +### Option 2: Railway CLI + +```bash +# Install Railway CLI +npm i -g @railway/cli + +# Login +railway login + +# Initialize +railway init + +# Deploy +railway up +``` + +## ๐ฆ What Gets Deployed + +``` +dist/ +โโโ index.html # Full demo with docs +โโโ examples/ +โ โโโ basic.html # Minimal sign-in +โ โโโ content-gate.html # Content gating +โโโ assets/ # Bundled JS/CSS +``` + +## ๐ง Local Development + +### 1. Build the Widget SDK First + +```bash +# From root of monorepo +cd packages/sdk +pnpm build:widget +``` + +This creates: `packages/sdk/bundles/widget/b3-widget.js` and `.css` + +### 2. Copy Widget Bundle to Demo + +```bash +# From apps/widget-demo +pnpm copy-widget + +# Or manually: +cp ../../packages/sdk/bundles/widget/* ./public/widget/ +``` + +### 3. Run Dev Server + +```bash +pnpm dev +# Open http://localhost:3000 +``` + +### Quick Start (All-in-One) + +```bash +pnpm dev:full +# Copies widget bundle and starts dev server +``` + +## ๐ Directory Structure + +``` +widget-demo/ +โโโ index.html # Main demo page +โโโ examples/ +โ โโโ basic.html # Simple sign-in only +โ โโโ content-gate.html # Article with gate +โโโ public/ +โ โโโ widget/ # Local widget bundle (gitignored) +โ โโโ b3-widget.js +โ โโโ b3-widget.css +โโโ scripts/ +โ โโโ copy-widget-bundle.sh +โโโ vite.config.js # Vite configuration +โโโ railway.json # Railway deployment config +โโโ package.json +``` + +## ๐ CDN vs Local Development + +### Production (CDN) + +```html + + +``` + +Once the widget is deployed to CDN, the demo will automatically work. + +### Development (Local) + +```html + + +``` + +Requires running `pnpm copy-widget` to copy SDK build to `/public/widget/`. + +## ๐ ๏ธ Build Process + +### Development Build + +```bash +pnpm dev +# Runs vite dev server with hot reload +``` + +### Production Build + +```bash +pnpm build +# Output: dist/ folder with optimized static files +``` + +### Preview Production Build + +```bash +pnpm preview +# Serves the dist/ folder locally +``` + +## ๐ข Railway Configuration + +### `railway.json` + +```json +{ + "build": { + "builder": "NIXPACKS", + "buildCommand": "pnpm install && pnpm build" + }, + "deploy": { + "startCommand": "pnpm start" + } +} +``` + +### Start Command + +```json +"start": "vite preview --port $PORT --host 0.0.0.0" +``` + +Railway provides `$PORT` automatically. Vite preview serves the built static files. + +## ๐ URLs + +After deployment: + +- **Main Demo**: `https://your-app.railway.app/` +- **Basic Example**: `https://your-app.railway.app/examples/basic.html` +- **Content Gate**: `https://your-app.railway.app/examples/content-gate.html` + +## ๐ Dependencies + +### Runtime + +None! It's a static site. The B3 Widget SDK is loaded from CDN (or local for dev). + +### Build + +- `vite` - Build tool and dev server + +That's it! No React, no framework dependencies. + +## ๐ Troubleshooting + +### Widget Not Loading + +**Symptom**: "B3 Widget SDK not loaded" error in console + +**Solutions**: + +1. For dev: Run `pnpm copy-widget` to copy SDK bundle +2. For production: Ensure CDN URLs are correct +3. Check browser console for 404 errors + +### Build Fails on Railway + +**Symptom**: Railway build fails + +**Solutions**: + +1. Ensure `pnpm-lock.yaml` is committed +2. Check Railway build logs +3. Verify `railway.json` is present + +### Port Issues Locally + +**Symptom**: Port 3000 already in use + +**Solution**: + +```bash +# Use different port +vite --port 3001 +``` + +## ๐ Environment Variables + +None needed! The demo is a static site with no backend. + +However, you may want to configure: + +- **Partner ID**: Hardcoded in HTML as `'dbcd5e9b-564e-4ba0-91a0-becf0edabb61'` +- Update in `index.html`, `examples/basic.html`, etc. before deploying + +## ๐จ Customization + +### Update Partner ID + +Find and replace in HTML files: + +```javascript +window.B3Widget.init({ + partnerId: "your-actual-partner-id", // โ Change this + // ... +}); +``` + +### Change Theme + +```javascript +window.B3Widget.init({ + partnerId: "your-id", + theme: "dark", // or 'light' +}); +``` + +### Modify Examples + +All examples are standalone HTML files. Edit directly: + +- `index.html` - Full featured demo +- `examples/basic.html` - Minimal example +- `examples/content-gate.html` - Article with gate + +## ๐ Updates & Maintenance + +### Update Widget SDK + +1. Build new SDK version: + +```bash +cd ../../packages/sdk +pnpm build:widget +``` + +2. Copy to demo (for local dev): + +```bash +cd ../../apps/widget-demo +pnpm copy-widget +``` + +3. For production, deploy new widget to CDN first + +### Deploy Updates + +Railway auto-deploys on git push to main branch. + +Or manually: + +```bash +railway up +``` + +## ๐ Support + +- **SDK Issues**: See `packages/sdk/src/widget/README.md` +- **Demo Issues**: Open issue in repo +- **Deployment Issues**: Check Railway logs + +## โ Pre-Deployment Checklist + +- [ ] Widget SDK built (`pnpm build:widget` in sdk/) +- [ ] Partner ID updated in HTML files +- [ ] Tested locally with `pnpm dev` +- [ ] Built and tested with `pnpm build && pnpm preview` +- [ ] `railway.json` present +- [ ] Pushed to GitHub + +## ๐ Success! + +Once deployed, share these URLs: + +- Main demo for full documentation +- Basic example for quick start +- Content gate example for content creators + +--- + +**Last Updated**: Nov 25, 2025 diff --git a/apps/widget-demo/GETTING_STARTED.md b/apps/widget-demo/GETTING_STARTED.md new file mode 100644 index 000000000..a03f5fe38 --- /dev/null +++ b/apps/widget-demo/GETTING_STARTED.md @@ -0,0 +1,100 @@ +# Getting Started + +## ๐ฏ Local E2E Testing + +### One-Time Setup + +```bash +# 1. Install dependencies +cd apps/widget-demo +pnpm install + +# 2. Start dev mode (builds SDK + watches + serves) +pnpm dev:widget + +# 3. Open http://localhost:3000 +``` + +**That's it!** The widget auto-rebuilds when you edit SDK code. + +--- + +## ๐ Development Workflow + +### Active Development (SDK + Demo) + +```bash +pnpm dev:widget +``` + +- โ Watches `packages/sdk/src/widget/**` +- โ Auto-rebuilds on changes +- โ Auto-copies to demo +- โ Browser hot-reloads + +**Use when**: Editing SDK widget code + +### Demo-Only Development + +```bash +pnpm dev:full +``` + +- โ Builds widget once +- โ Starts dev server +- โ No watching + +**Use when**: Only editing HTML/CSS + +--- + +## ๐งช Testing + +Visit these pages: + +1. **Main Demo** - http://localhost:3000 +2. **Basic Example** - http://localhost:3000/examples/basic.html +3. **Content Gate** - http://localhost:3000/examples/content-gate.html + +Test flow: + +1. See blurred content +2. Click "Sign In with B3" +3. Authenticate +4. Watch content unlock +5. Check Event Log + +--- + +## ๐ Troubleshooting + +### Widget not loading? + +```bash +# Rebuild and copy +cd packages/sdk +pnpm build:widget + +cd ../../apps/widget-demo +ls public/widget/ # Should see b3-widget.js + +# Hard refresh browser (Cmd+Shift+R) +``` + +### Changes not showing? + +```bash +# Restart dev mode +pnpm dev:widget + +# Or manually rebuild +cd ../../packages/sdk && pnpm build:widget +``` + +--- + +## ๐ Next Steps + +- Read full demo at `/` +- Check `README.md` for deployment +- See `../../packages/sdk/src/widget/` for SDK code diff --git a/apps/widget-demo/QUICK_REFERENCE.md b/apps/widget-demo/QUICK_REFERENCE.md new file mode 100644 index 000000000..efb9be0ac --- /dev/null +++ b/apps/widget-demo/QUICK_REFERENCE.md @@ -0,0 +1,148 @@ +# ๐ Quick Reference + +> **TL;DR**: `pnpm dev:widget` from `apps/widget-demo/` does everything. + +--- + +## ๐ Commands + +```bash +# Active development (recommended) +pnpm dev:widget # Full hot-reload setup + +# Other modes +pnpm dev:full # Build once + serve +pnpm dev # Serve only +pnpm build # Production build +pnpm preview # Preview production +``` + +--- + +## ๐ Key Files + +### Demo App +``` +apps/widget-demo/ +โโโ index.html # Main demo +โโโ examples/ +โ โโโ basic.html # Sign-in only +โ โโโ content-gate.html # Content gating +โโโ QUICK_REFERENCE.md # This file โฌ ๏ธ +โโโ GETTING_STARTED.md # Setup guide +โโโ WIDGET_EXAMPLES.md # 8+ example use cases +โโโ README.md # Project overview +``` + +### SDK +``` +packages/sdk/ +โโโ src/widget/ +โ โโโ index.tsx # Entry point +โ โโโ renderer.tsx # React roots +โ โโโ manager.ts # Lifecycle +โ โโโ TODO.md # Development status โฌ ๏ธ +โ โโโ components/widgets/ +โ โโโ SignInWidget.tsx +โ โโโ ContentGateWidget.tsx +โโโ vite.widget.config.ts # Build config +โโโ WIDGET_QUICKSTART.md # SDK quick start +``` + +--- + +## ๐ URLs (Dev Mode) + +- **Main Demo**: http://localhost:3000 +- **Basic Example**: http://localhost:3000/examples/basic.html +- **Content Gate**: http://localhost:3000/examples/content-gate.html + +--- + +## ๐ฏ Widget Usage + +### Minimal Sign-In + +```html +
+ + +``` + +### Content Gate + +```html +Para 1
Para 2
Para 3
+Blurred...
+Amazing content...
+Entry Fee: $10 USDC
+Prize Pool: $500
+ + + +
+ Only 100 available
+ + + +$9.99/month - Cancel anytime
+This is the simplest possible implementation of B3 widgets.
+ +Click the button below to authenticate:
+ +Just 3 steps:
+partnerIddata-b3-widget="sign-in" to any divThat's it! The widget system handles everything else.
+<!-- 1. Include SDK -->
+<link href="https://cdn.b3.fun/widget/v1/b3-widget.css" rel="stylesheet" />
+<script src="https://cdn.b3.fun/widget/v1/b3-widget.js"></script>
+
+<!-- 2. Initialize -->
+<script>
+ window.B3Widget.init({
+ partnerId: 'your-partner-id'
+ });
+</script>
+
+<!-- 3. Add Widget -->
+<div data-b3-widget="sign-in"></div>
+ + In the rapidly evolving landscape of Web3, decentralized identity is emerging as a cornerstone technology that + promises to revolutionize how we interact online. Unlike traditional identity systems that rely on centralized + authorities, decentralized identity puts users in control of their own data. +
+ ++ The concept is simple yet powerful: instead of creating separate accounts for each service, users maintain a + single, portable identity that works across the entire web. This identity is secured by cryptographic keys that + only the user controls, ensuring both privacy and security. +
+ ++ Major tech companies and governments are starting to recognize the potential of this technology. From financial + services to healthcare, the applications are virtually limitless. But what makes decentralized identity truly + revolutionary is its ability to empower individuals. +
+ ++ ๐ This content is premium. The remaining paragraphs are restricted. Sign in with your B3 + account to continue reading this article and access our entire archive of premium content. It's free and takes + less than 30 seconds! +
+ ++ The technical implementation of decentralized identity relies on several key technologies. At its core are + Decentralized Identifiers (DIDs), which provide a new type of identifier that enables verifiable, self-sovereign + digital identity. These DIDs are created, owned, and controlled by the identity owner, not by any central + authority. +
+ ++ Verifiable Credentials (VCs) are another crucial component. These are cryptographically secure, tamper-proof + credentials that can be presented to verify claims about the identity holder. Think of them as digital versions + of your driver's license or passport, but with far more flexibility and security. +
+ ++ The implications for privacy are profound. With decentralized identity, you can prove you're over 18 without + revealing your exact birthdate. You can prove you're a licensed professional without sharing your personal + details. This selective disclosure is a game-changer for online privacy. +
+ ++ Looking ahead, we can expect to see decentralized identity become the standard for online authentication. The + technology is maturing rapidly, and the ecosystem of tools and services is expanding. For users, this means more + control, better privacy, and a more seamless experience across the web. +
+ ++ The B3 platform is at the forefront of this revolution, providing the infrastructure needed to make + decentralized identity accessible to everyone. By combining cutting-edge cryptography with intuitive user + experiences, B3 is helping to build the future of online identity. +
+This page demonstrates the B3 Widget system with two key features:
++ Web3 authentication is revolutionizing how users interact with decentralized applications. Unlike + traditional username/password systems, Web3 auth uses cryptographic signatures to verify identity, + providing both security and user sovereignty. +
+ ++ The B3 platform takes this concept further by offering global accounts that work across multiple chains + and applications. Users can sign in once and access a unified experience across the entire ecosystem, + making Web3 as easy to use as Web2. +
+ ++ Traditional authentication methods require users to create accounts on each platform, remember multiple + passwords, and trust centralized databases with their sensitive information. Web3 authentication + eliminates these pain points by leveraging blockchain technology. +
+ + ++ With B3's global accounts, developers can integrate seamless authentication in minutes. The SDK handles + all the complexity of wallet connections, chain switching, and account management, allowing you to focus + on building great user experiences. +
+ ++ Smart contract wallets enable features like social recovery, spending limits, and session keys. These + capabilities make Web3 applications more accessible to mainstream users who may not be familiar with + managing private keys. +
+ ++ The future of authentication is passwordless, decentralized, and user-controlled. B3 is building the + infrastructure to make this future a reality today, with tools that developers love and users find + intuitive. +
+Visible paragraph 1...
+Visible paragraph 2...
+Visible paragraph 3...
+This will be blurred...
+This too...
+Your content here...
+First paragraph is visible...
+Second paragraph is visible...
+Third paragraph is visible...
+This paragraph will be blurred...
+And this one too...
+Paragraph 1...
+Paragraph 2...
+Paragraph 3...
+This will be blurred...
+Please sign in first to make a payment
+Please sign in first
+Please sign in first
+Please sign in first
++ {gatePrice} {gateCurrency} +
+ )} ++ Sign in required before payment +
+ )} +Please sign in first to link accounts
+Please sign in first to purchase NFT
+Please sign in to view order history
+Please sign in first
+Please sign in first
+Please sign in first to stake B3
+Please sign in first
+