Bun + React

This guide will help you integrate SwapKit into your Bun-powered React application. Bun is a fast JavaScript runtime that includes a bundler, test runner, and package manager.

Installation

Install SwapKit:

bun add @swapkit/sdk

pnpm add @swapkit/sdk

npm install @swapkit/sdk

yarn add @swapkit/sdk

Project Setup

Create a new Bun + React project:

bun create react my-swapkit-app
cd my-swapkit-app

Basic Configuration

Create a bunfig.toml file for Bun configuration:

[serve.static]
plugins = ["bun-plugin-tailwind"]
env = "BUN_PUBLIC_*"

Server Setup

Create a server file to serve your React application:

// @noErrorValidation
import { serve } from "bun";

const PORT = process.env.PORT || 3000;

serve({
  port: PORT,
  async fetch(req) {
    const url = new URL(req.url);

    // Serve static files
    if (url.pathname === "/") {
      return new Response(Bun.file("pages/index.html"));
    }

    // Handle API routes if needed
    if (url.pathname.startsWith("/api/")) {
      // Add your API logic here
    }

    // Default 404
    return new Response("Not Found", { status: 404 });
  },
});

console.log(`Server running at http://localhost:${PORT}`);

React Application Setup

Create your main React application with SwapKit:

// @noErrorValidation
import { useState } from 'react';
import { createSwapKit, Chain, WalletOption } from '@swapkit/sdk';

const swapKit = createSwapKit();

export function App() {
  const [isConnected, setIsConnected] = useState(false);
  const [address, setAddress] = useState<string>('');

  const connectWallet = async () => {
    try {
      await swapKit.connectEVMWallet([Chain.Ethereum], WalletOption.METAMASK);

      setIsConnected(true);
      const ethAddress = await swapKit.getAddress(Chain.Ethereum);
      setAddress(ethAddress);
    } catch (error) {
      console.error('Failed to connect wallet:', error);
    }
  };

  const disconnectWallet = () => {
    swapKit.disconnectWallet(Chain.Ethereum);
    setIsConnected(false);
    setAddress('');
  };

  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">SwapKit + Bun</h1>
      {!isConnected ? (
        <button
          onClick={connectWallet}
          className="px-4 py-2 bg-blue-500 text-white rounded"
        >
          Connect Wallet
        </button>
      ) : (
        <div>
          <p className="mb-4">Connected: {address}</p>
          <button
            onClick={disconnectWallet}
            className="px-4 py-2 bg-red-500 text-white rounded"
          >
            Disconnect
          </button>
        </div>
      )}
    </div>
  );
}

Entry Point

Create the entry point for your React application:

// @noErrorValidation
import { createRoot } from 'react-dom/client';
import { App } from '../src/App';
import '../styles/index.css';

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
}

HTML Template

Create an HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SwapKit + Bun</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/pages/index.tsx"></script>
</body>
</html>

Build Configuration

Create a build script for production:

// @noErrorValidation
import { build } from "bun";

await build({
  entrypoints: ["./pages/index.tsx"],
  outdir: "./dist",
  target: "browser",
  minify: true,
  splitting: true,
  sourcemap: "external",
});

Environment Variables

Bun uses BUN_PUBLIC_ prefix for client-side environment variables:

BUN_PUBLIC_SWAPKIT_API_KEY=your_api_key_here
BUN_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here

Access them in your code:

// @noErrorValidation
import { SKConfig } from '@swapkit/sdk';

if (process.env.BUN_PUBLIC_SWAPKIT_API_KEY) {
  SKConfig.setApiKey('swapKit', process.env.BUN_PUBLIC_SWAPKIT_API_KEY);
}

Common Issues

Module Resolution

Bun handles module resolution differently than Node.js. If you encounter issues:

Clear the cache: bun clean
Reinstall dependencies: bun install

TypeScript Configuration

Bun supports TypeScript out of the box. Create a tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "types": ["bun-types"]
  }
}

Example Repository

For a complete working example, check out the Bun + React playground in the SwapKit repository.