feat: add Ethereum file upload example #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

0xmaayan merged 3 commits into main from feat/ethereum-file-upload-example

Jan 29, 2026

apps/ethereum/file-upload/.env.example

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Get your API key from https://docs.shelby.xyz/sdks/typescript/acquire-api-keys
		NEXT_PUBLIC_SHELBY_API_KEY=AG-xxx

apps/ethereum/file-upload/.gitignore

-Original file line number
+Diff line change
@@ -0,0 +1,33 @@
+    # Logs
+    logs
+    *.log
+    npm-debug.log*
+    yarn-debug.log*
+    yarn-error.log*
+    pnpm-debug.log*
+    lerna-debug.log*
+    node_modules
+    dist
+    dist-ssr
+    *.local
+    # Environment variables
+    .env
+    .env.local
+    .env*.local
+    # Next.js
+    .next/
+    out/
+    # Editor directories and files
+    .vscode/*
+    !.vscode/extensions.json
+    .idea
+    .DS_Store
+    *.suo
+    *.ntvs*
+    *.njsproj
+    *.sln
+    *.sw?

apps/ethereum/file-upload/README.md

-Original file line number
+Diff line change
@@ -0,0 +1,94 @@
+    # Ethereum File Upload Example
+    A Next.js example application demonstrating how Ethereum developers can build a file upload dApp on [Shelby Protocol](https://shelby.xyz). This app allows users to connect their Ethereum wallet and upload files to decentralized storage.
+    ## Features
+    - Connect Ethereum wallets via [RainbowKit](https://www.rainbowkit.com/)
+    - Upload files to Shelby's decentralized storage
+    - Automatic storage account derivation from Ethereum address
+    - Beautiful, modern UI with drag-and-drop file uploads
+    ## Prerequisites
+    - [Node.js](https://nodejs.org/) v18 or higher
+    - [pnpm](https://pnpm.io/) package manager
+    - An Ethereum wallet (e.g., MetaMask)
+    - A Shelby API key
+    ## Getting Started
+    ### 1. Clone the Repository
+    ```bash
+    git clone https://github.com/shelby-protocol/shelby-examples.git
+    cd shelby-examples/apps/ethereum/file-upload
+    ```
+    ### 2. Install Dependencies
+    From the monorepo root:
+    ```bash
+    pnpm install
+    ```
+    Or from this directory:
+    ```bash
+    pnpm install
+    ```
+    ### 3. Set Up Environment Variables
+    Copy the example environment file:
+    ```bash
+    cp .env.example .env
+    ```
+    ### 4. Get Your Shelby API Key
+. Visit the [Shelby API Keys documentation](https://docs.shelby.xyz/sdks/typescript/acquire-api-keys)
+. Follow the instructions to acquire your API key
+. Add your API key to the `.env` file:
+    ```env
+    NEXT_PUBLIC_SHELBY_API_KEY=your-api-key-here
+    ```
+    ### 5. Run the Development Server
+    ```bash
+    pnpm dev
+    ```
+    Open [http://localhost:3000](http://localhost:3000) in your browser.
+    ## How It Works
+    This example uses the following Shelby packages:
+    - [`@shelby-protocol/sdk`](https://docs.shelby.xyz/sdks/typescript) - Core TypeScript SDK for interacting with Shelby Protocol
+    - [`@shelby-protocol/ethereum-kit`](https://docs.shelby.xyz/sdks/typescript) - Ethereum-specific utilities for wallet integration
+    - [`@shelby-protocol/react`](https://docs.shelby.xyz/sdks/typescript) - React hooks for blob uploads
+    ### Key Components
+    - **FileUploader** - Main component handling file selection and upload
+    - **Header** - Wallet connection using RainbowKit
+    - **providers.tsx** - Wagmi and RainbowKit configuration
+    ### Storage Account
+    When you connect your Ethereum wallet, a Shelby storage account is automatically derived from your Ethereum address. This allows you to upload and manage files using your existing wallet.
+    ## Learn More
+    - [Shelby Documentation](https://docs.shelby.xyz)
+    - [TypeScript SDK Reference](https://docs.shelby.xyz/sdks/typescript)
+    - [Shelby Explorer](https://explorer.shelby.xyz) - View your uploaded files
+    ## License
+    MIT

apps/ethereum/file-upload/components.json

-Original file line number
+Diff line change
@@ -0,0 +1,22 @@
+    {
+      "$schema": "https://ui.shadcn.com/schema.json",
+      "style": "new-york",
+      "rsc": true,
+      "tsx": true,
+      "tailwind": {
+        "config": "",
+        "css": "src/app/globals.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+      },
+      "iconLibrary": "lucide",
+      "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+      },
+      "registries": {}
+    }

apps/ethereum/file-upload/next-env.d.ts

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    /// <reference types="next" />
+    /// <reference types="next/image-types/global" />
+    /// <reference path="./.next/types/routes.d.ts" />
+    // NOTE: This file should not be edited
+    // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/ethereum/file-upload/next.config.ts

-Original file line number
+Diff line change
@@ -0,0 +1,14 @@
+    import type { NextConfig } from "next";
+    const nextConfig: NextConfig = {
+      // Enable WebAssembly support for Shelby SDK
+      webpack: (config) => {
+        config.experiments = {
+          ...config.experiments,
+          asyncWebAssembly: true,
+        };
+        return config;
+      },
+    };
+    export default nextConfig;

apps/ethereum/file-upload/package.json

-Original file line number
+Diff line change
@@ -0,0 +1,43 @@
+    {
+      "name": "@shelby-examples/ethereum-file-upload",
+      "private": true,
+      "version": "0.0.0",
+      "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "biome check .",
+        "fmt": "biome check . --write"
+      },
+      "dependencies": {
+        "@metamask/sdk": "^0.34.0",
+        "@radix-ui/react-progress": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@rainbow-me/rainbowkit": "^2.2.10",
+        "@shelby-protocol/ethereum-kit": "0.1.1",
+        "@shelby-protocol/react": "^0.0.4",
+        "@shelby-protocol/sdk": "^0.0.9",
+        "@tanstack/react-query": "^5.90.20",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.563.0",
+        "next": "^15.2.4",
+        "next-themes": "^0.4.6",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^3.4.0",
+        "viem": "^2.45.0",
+        "wagmi": "^3.4.1"
+      },
+      "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
+        "@types/node": "^24.10.1",
+        "@types/react": "^19.2.5",
+        "@types/react-dom": "^19.2.3",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.1.18",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "~5.9.3"
+      }
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Ethereum file upload example #19

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!