Skip to content

Commit 4312ac9

Browse files
0xmaayan0xmaayan
authored
feat: add Ethereum file upload example (#19)
* feat: add Ethereum file upload example - Add new example app for Ethereum developers - Demonstrates file upload to Shelby using RainbowKit wallet connection - Includes FileUploader component with drag-and-drop UI - Uses @shelby-protocol/ethereum-kit for Ethereum wallet integration - Updated pnpm-workspace.yaml to include apps/ethereum/* * fix: update lint script and fix accessibility issues - Replace next lint with biome check - Remove unused eslint dependencies - Add aria-hidden to decorative SVGs - Use semantic section element for drop zone - Fix string concatenation to template literal * update ethereum kit dep
1 parent 5663b23 commit 4312ac9

26 files changed

Lines changed: 8086 additions & 18 deletions

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

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

‎apps/ethereum/file-upload/.gitignore‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Environment variables
16+
.env
17+
.env.local
18+
.env*.local
19+
20+
# Next.js
21+
.next/
22+
out/
23+
24+
# Editor directories and files
25+
.vscode/*
26+
!.vscode/extensions.json
27+
.idea
28+
.DS_Store
29+
*.suo
30+
*.ntvs*
31+
*.njsproj
32+
*.sln
33+
*.sw?

‎apps/ethereum/file-upload/README.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Ethereum File Upload Example
2+
3+
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.
4+
5+
## Features
6+
7+
- Connect Ethereum wallets via [RainbowKit](https://www.rainbowkit.com/)
8+
- Upload files to Shelby's decentralized storage
9+
- Automatic storage account derivation from Ethereum address
10+
- Beautiful, modern UI with drag-and-drop file uploads
11+
12+
## Prerequisites
13+
14+
- [Node.js](https://nodejs.org/) v18 or higher
15+
- [pnpm](https://pnpm.io/) package manager
16+
- An Ethereum wallet (e.g., MetaMask)
17+
- A Shelby API key
18+
19+
## Getting Started
20+
21+
### 1. Clone the Repository
22+
23+
```bash
24+
git clone https://github.com/shelby-protocol/shelby-examples.git
25+
cd shelby-examples/apps/ethereum/file-upload
26+
```
27+
28+
### 2. Install Dependencies
29+
30+
From the monorepo root:
31+
32+
```bash
33+
pnpm install
34+
```
35+
36+
Or from this directory:
37+
38+
```bash
39+
pnpm install
40+
```
41+
42+
### 3. Set Up Environment Variables
43+
44+
Copy the example environment file:
45+
46+
```bash
47+
cp .env.example .env
48+
```
49+
50+
### 4. Get Your Shelby API Key
51+
52+
1. Visit the [Shelby API Keys documentation](https://docs.shelby.xyz/sdks/typescript/acquire-api-keys)
53+
2. Follow the instructions to acquire your API key
54+
3. Add your API key to the `.env` file:
55+
56+
```env
57+
NEXT_PUBLIC_SHELBY_API_KEY=your-api-key-here
58+
```
59+
60+
### 5. Run the Development Server
61+
62+
```bash
63+
pnpm dev
64+
```
65+
66+
Open [http://localhost:3000](http://localhost:3000) in your browser.
67+
68+
## How It Works
69+
70+
This example uses the following Shelby packages:
71+
72+
- [`@shelby-protocol/sdk`](https://docs.shelby.xyz/sdks/typescript) - Core TypeScript SDK for interacting with Shelby Protocol
73+
- [`@shelby-protocol/ethereum-kit`](https://docs.shelby.xyz/sdks/typescript) - Ethereum-specific utilities for wallet integration
74+
- [`@shelby-protocol/react`](https://docs.shelby.xyz/sdks/typescript) - React hooks for blob uploads
75+
76+
### Key Components
77+
78+
- **FileUploader** - Main component handling file selection and upload
79+
- **Header** - Wallet connection using RainbowKit
80+
- **providers.tsx** - Wagmi and RainbowKit configuration
81+
82+
### Storage Account
83+
84+
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.
85+
86+
## Learn More
87+
88+
- [Shelby Documentation](https://docs.shelby.xyz)
89+
- [TypeScript SDK Reference](https://docs.shelby.xyz/sdks/typescript)
90+
- [Shelby Explorer](https://explorer.shelby.xyz) - View your uploaded files
91+
92+
## License
93+
94+
MIT

‎apps/ethereum/file-upload/components.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"iconLibrary": "lucide",
14+
"aliases": {
15+
"components": "@/components",
16+
"utils": "@/lib/utils",
17+
"ui": "@/components/ui",
18+
"lib": "@/lib",
19+
"hooks": "@/hooks"
20+
},
21+
"registries": {}
22+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
/// <reference path="./.next/types/routes.d.ts" />
4+
5+
// NOTE: This file should not be edited
6+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { NextConfig } from "next";
2+
3+
const nextConfig: NextConfig = {
4+
// Enable WebAssembly support for Shelby SDK
5+
webpack: (config) => {
6+
config.experiments = {
7+
...config.experiments,
8+
asyncWebAssembly: true,
9+
};
10+
return config;
11+
},
12+
};
13+
14+
export default nextConfig;

‎apps/ethereum/file-upload/package.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@shelby-examples/ethereum-file-upload",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "biome check .",
10+
"fmt": "biome check . --write"
11+
},
12+
"dependencies": {
13+
"@metamask/sdk": "^0.34.0",
14+
"@radix-ui/react-progress": "^1.1.8",
15+
"@radix-ui/react-slot": "^1.2.4",
16+
"@rainbow-me/rainbowkit": "^2.2.10",
17+
"@shelby-protocol/ethereum-kit": "0.1.1",
18+
"@shelby-protocol/react": "^0.0.4",
19+
"@shelby-protocol/sdk": "^0.0.9",
20+
"@tanstack/react-query": "^5.90.20",
21+
"class-variance-authority": "^0.7.1",
22+
"clsx": "^2.1.1",
23+
"lucide-react": "^0.563.0",
24+
"next": "^15.2.4",
25+
"next-themes": "^0.4.6",
26+
"react": "^19.2.0",
27+
"react-dom": "^19.2.0",
28+
"sonner": "^2.0.7",
29+
"tailwind-merge": "^3.4.0",
30+
"viem": "^2.45.0",
31+
"wagmi": "^3.4.1"
32+
},
33+
"devDependencies": {
34+
"@tailwindcss/postcss": "^4.1.18",
35+
"@types/node": "^24.10.1",
36+
"@types/react": "^19.2.5",
37+
"@types/react-dom": "^19.2.3",
38+
"postcss": "^8.5.6",
39+
"tailwindcss": "^4.1.18",
40+
"tw-animate-css": "^1.4.0",
41+
"typescript": "~5.9.3"
42+
}
43+
}

0 commit comments

Comments
 (0)