Skip to content

feat: Add a Vite + React example with injected provider #136

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.

Sign up for GitHub

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

Open
tiero wants to merge 7 commits into
base: master
Choose a base branch
from
Open

feat: Add a Vite + React example with injected provider #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f1f8a71
feat: Add a Vite + React example for Phantom wallet integration
google-labs-jules[bot] Aug 18, 2025
f89012a
fix phantom example (#137)
tiero Aug 19, 2025
c6d1ba7
feat: Implement Xverse wallet integration with ARK transactions
tiero Aug 27, 2025
8fd0bf4
format
tiero Aug 27, 2025
686dbba
feat: Update README for ARK SDK Xverse wallet integration example and…
tiero Aug 27, 2025
2fe37f0
refactor: Remove Phantom example files and configuration
tiero Aug 27, 2025
3e59fab
feat: add Bitcoin signing Snap with Taproot support
tiero Aug 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .husky/pre-commit
View file
Open in desktop

This file was deleted.

97 changes: 97 additions & 0 deletions examples/metamask-react-app/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
# ARK MetaMask Snap Demo

A React application demonstrating ARK wallet integration using MetaMask Snap for Bitcoin Taproot operations.

## Overview

This demo showcases:

- MetaMask Snap integration for Bitcoin signing
- Taproot address generation and management
- ARK protocol transactions (send, settle, balance management)
- Secure signing without exposing private keys

## Prerequisites

- MetaMask browser extension
- Node.js 18+
- pnpm package manager

## Quick Start

### 1. Install Dependencies

```bash
# Install snap dependencies
cd ../../snap
pnpm install

# Install app dependencies
cd ../examples/metamask-react-app
pnpm install
```

### 2. Build and Start the Snap

```bash
cd ../../snap
pnpm build
pnpm serve
```

The snap development server will start on `http://localhost:8080`.

### 3. Start the React App

```bash
cd ../examples/metamask-react-app
pnpm dev
```

The app will be available at `http://localhost:5173`.

### 4. Connect and Use

1. Open the app in your browser
2. Click "Connect MetaMask Snap"
3. Approve the snap installation in MetaMask
4. Your Taproot and ARK addresses will be displayed
5. Use the app to check balances and send transactions

## Features

- **Secure Key Management**: Private keys remain in MetaMask Snap
- **Taproot Addresses**: Native Taproot address generation
- **ARK Integration**: Full ARK protocol support (send, settle, balance)
- **User Confirmation**: All transactions require MetaMask approval
- **Signet Network**: Uses Bitcoin Signet for safe testing

## Architecture

### MetaMask Snap (`/snap/`)

- Deterministic key derivation from MetaMask entropy
- PSBT signing for Taproot transactions
- RPC interface for dApp communication

### React App

- MetaMaskSnapIdentity: Drop-in replacement for other wallet identities
- ArkWallet: Simplified wallet management interface
- Real-time balance and transaction updates

## Development

The snap runs locally during development. For production:

1. Publish snap to npm
2. Update snap manifest with production details
3. Use production snap ID in the React app

## Network Configuration

- **Bitcoin Network**: Signet (testnet)
- **ARK Server**: `https://signet.arkade.sh`
- **Block Explorer**: `https://mempool.space/signet/`

Get testnet Bitcoin from [Signet faucets](https://signet.bc-2.jp/) for testing.
21 changes: 21 additions & 0 deletions examples/metamask-react-app/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
export default {
root: true,
env: { browser: true, es2020: true },
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: "18.2" } },
plugins: ["react-refresh"],
rules: {
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
"react/prop-types": "off",
},
};
13 changes: 13 additions & 0 deletions examples/metamask-react-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ARK MetaMask Snap - React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions examples/metamask-react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "arkade-metamask-react-app",
"private": true,
"version": "0.1.0",
"description": "ARK MetaMask Snap demo application",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"packageManager": "pnpm@10.15.0",
"dependencies": {
"@arkade-os/sdk": "link:../..",
"@scure/base": "^1.1.3",
"@scure/btc-signer": "^1.3.1",
"@noble/curves": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.2.0"
}
}
Comment on lines +1 to +25
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

❓ Verification inconclusive

Fix Prettier CI failure.

Run repository formatting; if you want, add a local script for this example.

🏁 Script executed:

#!/bin/bash
# Format and re-check at repo root (uses workspace).
pnpm -w exec prettier --write .
pnpm -w exec prettier --check .

Length of output: 189

Fix Prettier commands for example CI

  • Remove the -w flag and run formatting locally in examples/metamask-react-app: 
    cd examples/metamask-react-app
pnpm exec prettier --write .
pnpm exec prettier --check .
  • Optionally add these scripts to examples/metamask-react-app/package.json: 
    "scripts": {
  "format": "prettier --write .",
  "format:check": "prettier --check ."
}
🧰 Tools
🪛 GitHub Actions: CI

[error] 1-1: Prettier formatting issue detected. Run 'prettier --write' to fix code style.

🛠️ Refactor suggestion

Declare Node engine to match Vite 5 (Node ≥18).

Prevent “unsupported engine” CI/dev surprises by pinning a minimum Node.

   "packageManager": "pnpm@10.15.0",
+  "engines": {
+    "node": ">=18.0.0"
+  },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{
"name": "arkade-metamask-react-app",
"private": true,
"version": "0.1.0",
"description": "ARK MetaMask Snap demo application",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"packageManager": "pnpm@10.15.0",
"dependencies": {
"@arkade-os/sdk": "link:../..",
"@scure/base": "^1.1.3",
"@scure/btc-signer": "^1.3.1",
"@noble/curves": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.2.0"
}
}
{
"name": "arkade-metamask-react-app",
"private": true,
"version": "0.1.0",
"description": "ARK MetaMask Snap demo application",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"packageManager": "pnpm@10.15.0",
"engines": {
"node": ">=18.0.0"
},
"dependencies": {
"@arkade-os/sdk": "link:../..",
"@scure/base": "^1.1.3",
"@scure/btc-signer": "^1.3.1",
"@noble/curves": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.2.0"
}
}
🧰 Tools
🪛 GitHub Actions: CI

[error] 1-1: Prettier formatting issue detected. Run 'prettier --write' to fix code style.

🤖 Prompt for AI Agents 
examples/metamask-react-app/package.json lines 1-25: the package.json lacks an
"engines" field declaring the minimum Node version required by Vite 5; add an
"engines" entry (e.g. "engines": { "node": ">=18" }) to the top-level of
package.json (near other metadata fields) so CI and developers receive a clear
minimum Node requirement and avoid unsupported-engine failures.

Loading
Loading