React app integration

examples/with-vite-react/.env.example

@@ -0,0 +1,10 @@
+# Network Configuration
+# Options: "preprod" (testnet), "preview" (testnet), "mainnet"
+VITE_NETWORK=preprod
+
+# Blockfrost API Configuration
+# Get your free API key from https://blockfrost.io
+# For testnet (preprod): Use the preprod project ID
+# For preview: Use the preview project ID
+# For mainnet: Use the mainnet project ID
+VITE_BLOCKFROST_PROJECT_ID=your_blockfrost_project_id_here

examples/with-vite-react/.gitignore

@@ -0,0 +1,29 @@
+# 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
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/with-vite-react/README.md

@@ -0,0 +1,192 @@
+# Evolution SDK - Vite + React Example
+
+A simple React application demonstrating how to use the Evolution SDK with Vite.
+
+## Features
+
+- ⚡️ Vite for fast development and builds
+- ⚛️ React 18 with TypeScript
+- 🎨 TailwindCSS for styling
+- 💼 Cardano wallet integration
+- 🔗 Evolution SDK integration
+
+## Prerequisites
+
+- Node.js 18+ and pnpm
+- A Cardano wallet browser extension (e.g., Nami, Eternl, Flint)
+- A Blockfrost API key (get one free at [blockfrost.io](https://blockfrost.io))
+
+## Getting Started
+
+### 1. Configure Environment Variables
+
+Create a `.env` file in this directory:
+
+```bash
+cp .env.example .env
+```
+
+Then edit `.env` and configure your network and Blockfrost project ID:
+
+```env
+# Choose your network: "preprod", "preview", or "mainnet"
+VITE_NETWORK=preprod
+
+# Add your Blockfrost project ID for the selected network
+VITE_BLOCKFROST_PROJECT_ID=your_blockfrost_project_id_here
+```
+
+**Network Options:**
+- `preprod` - Cardano preprod testnet (recommended for development)
+- `preview` - Cardano preview testnet (for testing upcoming features)
+- `mainnet` - Cardano mainnet (production)
+
+**Important:** Make sure your Blockfrost project ID matches your selected network!
+
+### 2. Install Dependencies
+
+From the root of the Evolution SDK monorepo:
+
+```bash
+pnpm install
+```
+
+### 3. Build the Evolution SDK
+
+```bash
+pnpm --filter @evolution-sdk/evolution run build
+```
+
+### 4. Run the Development Server
+
+Navigate to this example directory and start the dev server:
+
+```bash
+cd examples/with-vite-react
+pnpm dev
+```
+
+The app will be available at `http://localhost:5173`
+
+## Project Structure
+
+```
+with-vite-react/
+├── src/
+│   ├── components/
+│   │   ├── Main.tsx              # Main container component
+│   │   ├── WalletConnect.tsx     # Wallet connection UI
+│   │   └── TransactionBuilder.tsx # Transaction building demo
+│   ├── App.tsx                    # App component
+│   ├── main.tsx                   # Entry point
+│   ├── index.css                  # Global styles with Tailwind
+│   └── vite-env.d.ts             # Type definitions
+├── index.html                     # HTML template
+├── vite.config.ts                 # Vite configuration
+├── tsconfig.json                  # TypeScript configuration
+├── tailwind.config.js             # Tailwind CSS configuration
+└── package.json
+```
+
+## Usage
+
+1. **Connect Wallet**: Click the "Connect Wallet" button and select your Cardano wallet
+2. **View Balance**: Once connected, your wallet address and balance will be displayed
+3. **Send ADA**:
+   - Enter the recipient's Cardano address
+   - Enter the amount in ADA (e.g., 5.0 for 5 ADA)
+   - Click "Send ADA"
+   - Approve the transaction in your wallet
+   - Wait for confirmation and view the transaction hash
+
+## Evolution SDK Integration
+
+The app demonstrates how to use the Evolution SDK for building and submitting transactions:
+
+```typescript
+import { createClient } from "@evolution-sdk/evolution";
+
+// Create client with network
+const client = createClient("preprod")
+  .attachWallet({ type: "api", api: walletApi })
+  .attachProvider({
+    type: "blockfrost",
+    baseUrl: "https://cardano-preprod.blockfrost.io/api/v0",
+    projectId: "your_project_id"
+  });
+
+// Build and submit transaction
+const txHash = await client
+  .newTx()
+  .payToAddress({
+    address: recipientAddress,
+    assets: { lovelace: 5_000_000n }
+  })
+  .build()
+  .then(tx => tx.sign())
+  .then(tx => tx.submit());
+```
+
+### Key Concepts
+
+- **Client Creation**: Initialize with network ID (`"preprod"`, `"mainnet"`, etc.)
+- **Wallet Attachment**: Connect CIP-30 wallet API
+- **Provider Configuration**: Use Blockfrost, Maestro, Kupmios, or Koios
+- **Transaction Building**: Chain operations like `payToAddress()`, `collectFrom()`, etc.
+- **Signing & Submission**: Build → Sign → Submit pipeline
+
+## Development
+
+### Building for Production
+
+```bash
+pnpm build
+```
+
+The built files will be in the `dist/` directory.
+
+### Preview Production Build
+
+```bash
+pnpm preview
+```
+
+## Environment Configuration
+
+The app uses environment variables to configure the network:
+
+```env
+VITE_NETWORK=preprod          # Network to use
+VITE_BLOCKFROST_PROJECT_ID=... # Your Blockfrost API key
+```
+
+### Switching Networks
+
+To switch between networks, update your `.env` file:
+
+**For Preprod Testnet (Development):**
+```env
+VITE_NETWORK=preprod
+VITE_BLOCKFROST_PROJECT_ID=preprodXXXXXXXXXXXXXXXX
+```
+
+**For Preview Testnet (Testing):**
+```env
+VITE_NETWORK=preview
+VITE_BLOCKFROST_PROJECT_ID=previewXXXXXXXXXXXXXXXX
+```
+
+**For Mainnet (Production):**
+```env
+VITE_NETWORK=mainnet
+VITE_BLOCKFROST_PROJECT_ID=mainnetXXXXXXXXXXXXXXXX
+```
+
+Restart the dev server after changing the `.env` file.
+
+## Learn More
+
+- [Evolution SDK Documentation](https://github.com/IntersectMBO/evolution-sdk)
+- [Vite Documentation](https://vitejs.dev/)
+- [React Documentation](https://react.dev/)
+- [Cardano Connect with Wallet](https://github.com/cardano-foundation/cardano-connect-with-wallet)

examples/with-vite-react/index.html

@@ -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>Evolution SDK - Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/with-vite-react/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "evolution-vite-react-example",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "type-check": "tsc --noEmit",
+    "preview": "vite preview",
+    "test": "echo \"No tests specified for Vite React example\" && exit 0"
+  },
+  "dependencies": {
+    "@cardano-foundation/cardano-connect-with-wallet": "^0.2.9",
+    "@cardano-foundation/cardano-connect-with-wallet-core": "^0.2.5",
+    "@evolution-sdk/evolution": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.5"
+  }
+}

examples/with-vite-react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

examples/with-vite-react/src/App.tsx

@@ -0,0 +1,21 @@
+import Main from "./components/Main";
+
+function App() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950">
+      <div className="container mx-auto px-4 py-16 max-w-2xl">
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl font-bold text-zinc-100 mb-2">
+            Evolution SDK Demo
+          </h1>
+          <p className="text-sm text-zinc-400">
+            A Vite + React example using Evolution SDK
+          </p>
+        </div>
+        <Main />
+      </div>
+    </div>
+  );
+}
+
+export default App;

examples/with-vite-react/src/components/Main.tsx

@@ -0,0 +1,26 @@
+import WalletConnect from "./WalletConnect";
+import TransactionBuilder from "./TransactionBuilder";
+
+export default function Main() {
+  return (
+    <div className="w-full">
+      <div className="bg-zinc-900/50 border border-zinc-800/60 rounded-lg shadow-md overflow-hidden">
+        {/* Wallet section */}
+        <div className="border-b border-zinc-800/40">
+          <div className="px-5 py-3 border-b border-zinc-800/20">
+            <h3 className="text-sm font-medium text-zinc-100">Wallet</h3>
+          </div>
+          <WalletConnect />
+        </div>
+
+        {/* Transaction section */}
+        <div>
+          <div className="px-5 py-3 border-b border-zinc-800/20">
+            <h3 className="text-sm font-medium text-zinc-100">Transaction</h3>
+          </div>
+          <TransactionBuilder />
+        </div>
+      </div>
+    </div>
+  );
+}