feat: Add Streaming Video Example App with Content Gating

README.md

@@ -32,6 +32,7 @@ This Turborepo includes the following example applications:
 | `@shelby-protocol/cross-chain-accounts` | Shelby cross chain accounts example | [`apps/cross-chain-accounts`](./apps/cross-chain-accounts) |
 | `@shelby-protocol/download-example` | An example app to demonstrate downloading blobs using the Shelby SDK | [`apps/download-blob`](./apps/download-blob) |
 | `@shelby-protocol/list-example` | An example app to demonstrate listing blobs using the Shelby SDK | [`apps/list-blob`](./apps/list-blob) |
+| `@shelby-protocol/streaming-video` | Shelby Streaming Video example with Gating | [`apps/streaming-video`](./apps/streaming-video) |
 | `@shelby-protocol/upload-example` | An example app to demonstrate uploading blobs using the Shelby SDK | [`apps/upload-blob`](./apps/upload-blob) |
 
 <!-- APPS_TABLE_END -->

apps/solana/token-gated/package.json

@@ -26,6 +26,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
+    "@aptos-labs/ace-sdk": "^0.1.0",
     "@coral-xyz/anchor": "^0.31.1",
     "@shelby-protocol/react": "latest",
     "@shelby-protocol/sdk": "latest",
@@ -35,7 +36,6 @@
     "@solana/react-hooks": "^1.1.5",
     "@solana/web3.js": "^1.98.4",
     "@tanstack/react-query": "^5.90.16",
-    "@aptos-labs/ace-sdk": "^0.1.0",
     "next": "16.0.10",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -55,4 +55,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}

apps/streaming-video/.env.example

@@ -0,0 +1,5 @@
+# Shelby Protocol Configuration
+NEXT_PUBLIC_SHELBY_API_URL=https://api.shelbynet.shelby.xyz
+
+# Shelby API Key for enhanced rate limits
+NEXT_PUBLIC_SHELBY_API_KEY=your_shelby_api_key_here

apps/streaming-video/README.md

@@ -0,0 +1,58 @@
+# Shelby Streaming Video Example
+
+This example demonstrates how to build a video streaming application with decentralized content gating using the Shelby Protocol.
+
+## Key Features
+
+- **Real-time Streaming**: Utilizes Shelby SDK's `streamData` for low-latency video playback.
+- **On-chain Gating**: Protects premium content with rules stored on-chain (Aptos/Solana).
+- **Micropayments**: Integrated "Tip-to-Unlock" flow for content monetization.
+- **Wallet Integration**: Seamless connection with Aptos wallets (Petra, etc.).
+...
+2. **Access Rules**: Creators set a price (e.g., 0.5 APT) and their wallet address receives payments directly.
+
+## Getting Started
+
+### 1. Installation
+
+Install dependencies from the root of the monorepo:
+
+```bash
+pnpm install
+```
+
+### 2. Environment Setup
+
+Copy `.env.example` to `.env` and fill in your API keys:
+
+```bash
+cp .env.example .env
+```
+
+Required variables:
+- `NEXT_PUBLIC_SHELBY_API_KEY`: Your Shelby Protocol API key.
+- `NEXT_PUBLIC_APTOS_API_KEY`: Aptos network API key.
+
+### 3. Development
+
+Run the development server:
+
+```bash
+pnpm dev --filter=@shelby-protocol/streaming-video
+```
+
+Open [http://localhost:3005](http://localhost:3005) to view the app.
+
+## How it Works
+
+1. **Content Upload**: Videos are encrypted and uploaded as blobs to Shelby storage.
+2. **Access Rules**: A access policy is set (e.g., "Must pay 0.1 APT to address X").
+3. **Streaming**: When a user visits the page, the app checks for the payment. If not found, the `VideoPlayer` displays a lock screen.
+4. **Unlocking**: Upon payment, the Shelby SDK provides the authorized stream to the browser.
+
+## Built With
+
+- [Next.js](https://nextjs.org/)
+- [Shelby SDK](https://docs.shelby.xyz)
+- [React Player](https://github.com/cookpete/react-player)
+- [Tailwind CSS](https://tailwindcss.com/)

apps/streaming-video/app/globals.css

@@ -0,0 +1 @@
+@import "@shelby-protocol/ui/globals.css";

apps/streaming-video/app/layout.tsx

@@ -0,0 +1,36 @@
+import { Toaster } from "@shelby-protocol/ui/components";
+import localFont from "next/font/local";
+import { WalletProvider } from "@/components/WalletProvider";
+import "./globals.css";
+import type { Metadata } from "next";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+});
+
+export const metadata: Metadata = {
+  title: "Shelby Streaming Video Example",
+  description: "A decentralized video streaming example with content gating using Shelby Protocol",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <WalletProvider>
+          {children}
+          <Toaster />
+        </WalletProvider>
+      </body>
+    </html>
+  );
+}