@maximedogawa/chia-wallet-connect-react 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MaximEdogawa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,622 @@
+# Wallet Connect Plugin for Chia Network
+
+A WalletConnect integration plugin for the Chia blockchain. This plugin provides a complete WalletConnect implementation that can be easily integrated into any Chia-based application.
+
+## Features
+
+- **WalletConnect v2 Support**: Full integration with WalletConnect Sign Client
+- **Session Management**: Connect, manage, and disconnect multiple wallet sessions
+- **QR Code Pairing**: Display QR codes for easy wallet pairing
+- **Manual URI Copy**: Copy pairing URIs manually for advanced users
+- **Address Management**: Get and display wallet addresses
+- **Asset Management**: Add CAT tokens to connected wallets
+- **Offer Generation**: Generate offers for Chia transactions
+- **Dark Mode Support**: Full dark/light mode support - all components automatically adapt to theme changes
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ or Bun 1.0+
+- npm, yarn, pnpm, or bun
+
+### Installation
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+### Build Package
+
+Build the package for distribution (required before using in other projects):
+
+```bash
+npm run build
+# or
+yarn build
+# or
+pnpm build
+# or
+bun run build
+```
+
+This will:
+- Compile TypeScript to JavaScript
+- Generate type definitions (.d.ts files)
+- Copy styles to the dist directory
+- Prepare the package for publishing or local use
+
+### Environment Variables
+
+Create a `.env.local` file in the root directory with the following variables:
+
+```env
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id
+NEXT_PUBLIC_WALLET_CONNECT_RELAY_URL=wss://relay.walletconnect.com
+NEXT_PUBLIC_CHIA_NETWORK=testnet
+
+# WalletConnect Metadata (optional)
+NEXT_PUBLIC_WALLET_CONNECT_METADATA_NAME=Wallet Connect
+NEXT_PUBLIC_WALLET_CONNECT_METADATA_DESCRIPTION=Wallet Connect for Chia blockchain
+NEXT_PUBLIC_WALLET_CONNECT_METADATA_URL=https://example.com
+NEXT_PUBLIC_WALLET_CONNECT_METADATA_ICONS=https://example.com/logo.jpg
+```
+
+### Development
+
+Run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+### Build Demo
+
+Build the demo application for production:
+
+```bash
+cd demo
+npm run build
+# or
+yarn build
+# or
+pnpm build
+# or
+bun run build
+```
+
+### Start Production Server
+
+```bash
+npm start
+# or
+yarn start
+# or
+pnpm start
+# or
+bun start
+```
+
+## Accessing Wallet Connection State
+
+The package provides several ways to access and monitor the WalletConnect connection state in your application.
+
+### Using the `useWalletConnectionState` Hook (Recommended)
+
+The easiest way to access connection state in your React components:
+
+```tsx
+import { useWalletConnectionState } from '@maximedogawa/chia-wallet-connect-react';
+
+function MyComponent() {
+  const {
+    isConnected,
+    connectedWallet,
+    address,
+    isWalletConnect,
+    walletConnectSession,
+    walletImage,
+    walletName,
+    cnsName,
+  } = useWalletConnectionState();
+
+  if (!isConnected) {
+    return <div>No wallet connected</div>;
+  }
+
+  return (
+    <div>
+      <p>Connected to: {connectedWallet}</p>
+      <p>Address: {address}</p>
+      {isWalletConnect && walletConnectSession && (
+        <p>Wallet: {walletConnectSession.peer.metadata.name}</p>
+      )}
+    </div>
+  );
+}
+```
+
+**Hook Return Values:**
+- `isConnected: boolean` - Whether any wallet is connected
+- `connectedWallet: string | null` - The name of the connected wallet (e.g., "WalletConnect") or null
+- `address: string | null` - The wallet address or null
+- `isWalletConnect: boolean` - Whether WalletConnect is the connected wallet
+- `walletConnectSession: SessionTypes.Struct | null` - The active WalletConnect session or null
+- `walletImage: string | null` - The wallet image/icon URL or null
+- `walletName: string | null` - The wallet name or null
+- `cnsName: string | null` - The CNS name (if available) or null
+
+### Using Redux Store Directly
+
+You can also access the state directly from the Redux store:
+
+```tsx
+import { store, useAppSelector } from '@maximedogawa/chia-wallet-connect-react';
+import type { RootState } from '@maximedogawa/chia-wallet-connect-react';
+
+function MyComponent() {
+  // Using useAppSelector hook
+  const connectedWallet = useAppSelector(
+    (state: RootState) => state.wallet.connectedWallet
+  );
+  const address = useAppSelector((state: RootState) => state.wallet.address);
+  const walletConnectSession = useAppSelector(
+    (state: RootState) => state.walletConnect.selectedSession
+  );
+  const walletConnectSessions = useAppSelector(
+    (state: RootState) => state.walletConnect.sessions
+  );
+
+  // Or access store directly (outside React components)
+  const state = store.getState();
+  const isConnected =
+    state.wallet.connectedWallet === "WalletConnect"
+      ? Boolean(state.walletConnect.selectedSession)
+      : Boolean(state.wallet.connectedWallet);
+
+  return (
+    <div>
+      <p>Wallet: {connectedWallet}</p>
+      <p>Address: {address}</p>
+    </div>
+  );
+}
+```
+
+**Redux State Structure:**
+
+#### `state.wallet`
+- `connectedWallet: string | null` - Connected wallet name
+- `address: string | null` - Wallet address
+- `image: string | null` - Wallet image URL
+- `name: string | null` - Wallet name
+- `CNSName: string | null` - CNS name
+
+#### `state.walletConnect`
+- `sessions: SessionTypes.Struct[]` - All WalletConnect sessions
+- `selectedSession: SessionTypes.Struct | null` - Currently selected/active session
+- `selectedFingerprint: { [topic: string]: number }` - Fingerprint for each session
+- `pairingUri: string | null` - Current pairing URI (if pairing)
+
+### State Persistence
+
+The connection state is automatically persisted to IndexedDB using `redux-persist`. This means:
+
+- ✅ Connection state survives page refreshes
+- ✅ State is automatically restored on app load
+- ✅ No additional setup required
+
+The following state is persisted:
+- `wallet` slice (connectedWallet, address, image, name)
+- `walletConnect` slice (sessions, selectedSession, selectedFingerprint)
+
+### Complete Example
+
+```tsx
+import { useWalletConnectionState, ConnectButton } from '@maximedogawa/chia-wallet-connect-react';
+
+function WalletStatus() {
+  const {
+    isConnected,
+    connectedWallet,
+    address,
+    isWalletConnect,
+    walletConnectSession,
+    walletImage,
+  } = useWalletConnectionState();
+
+  return (
+    <div>
+      <ConnectButton />
+
+      {isConnected && (
+        <div>
+          <h3>Wallet Status</h3>
+          <p>Connected: {connectedWallet}</p>
+          <p>Address: {address}</p>
+
+          {isWalletConnect && walletConnectSession && (
+            <div>
+              <p>Wallet: {walletConnectSession.peer.metadata.name}</p>
+              {walletImage && (
+                <img src={walletImage} alt="Wallet icon" />
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### Notes
+
+- The `useWalletConnectionState` hook automatically updates when the connection state changes
+- For WalletConnect, both `connectedWallet === "WalletConnect"` AND `selectedSession` must be truthy for the connection to be considered active
+- The connection state is restored automatically after page refresh - no manual restoration needed
+- Address may be `null` initially if it hasn't been fetched yet, but the connection is still valid
+
+## Usage as a Package/Plugin
+
+### Installation
+
+Install the package in your project:
+
+```bash
+npm install @maximedogawa/chia-wallet-connect-react
+# or
+yarn add @maximedogawa/chia-wallet-connect-react
+# or
+pnpm add @maximedogawa/chia-wallet-connect-react
+# or
+bun add @maximedogawa/chia-wallet-connect-react
+```
+
+### Setup
+
+#### 1. Import Styles
+
+**Important**: You must import the package styles in your app's main entry point:
+
+```tsx
+// In your _app.tsx, layout.tsx, or main.tsx
+import '@maximedogawa/chia-wallet-connect-react/styles';
+```
+
+#### 2. Configure Tailwind CSS (if using Tailwind)
+
+**Option A: Merge the package's Tailwind config (Recommended)**
+
+Import and merge the package's Tailwind configuration to ensure all styles and theme extensions are included:
+
+```js
+// tailwind.config.js
+const packageConfig = require('@maximedogawa/chia-wallet-connect-react/tailwind.config');
+
+module.exports = {
+  ...packageConfig,
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@maximedogawa/chia-wallet-connect-react/dist/**/*.{js,ts,jsx,tsx}', // Important: Add this
+  ],
+  // You can extend the theme further if needed
+  theme: {
+    ...packageConfig.theme,
+    extend: {
+      ...packageConfig.theme.extend,
+      // Your custom extensions
+    },
+  },
+}
+```
+
+**Option B: Manual configuration**
+
+If you prefer not to merge the config, manually add the package to your Tailwind content paths and include the theme extensions:
+
+```js
+// tailwind.config.js
+module.exports = {
+  darkMode: 'class', // Required for dark mode support
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@maximedogawa/chia-wallet-connect-react/dist/**/*.{js,ts,jsx,tsx}', // Important: Add this
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brandDark: '#526e78',
+        brandLight: '#EFF4F7',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 }
+        }
+      },
+      animation: {
+        fadeIn: 'fadeIn .3s ease-in-out',
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+**Important Notes:**
+- The `content` array **must** include the package's dist files so Tailwind can scan for class names
+- The `darkMode: 'class'` setting is required for proper dark mode support
+- Make sure your PostCSS config includes Tailwind and Autoprefixer
+
+#### 3. Dark Mode Support
+
+The package includes full dark mode support out of the box. Components automatically adapt to dark mode when the `dark` class is present on the `<html>` or `<body>` element.
+
+**Enable Dark Mode:**
+
+```tsx
+// Toggle dark mode by adding/removing the 'dark' class
+// Option 1: Manual toggle
+const toggleDarkMode = () => {
+  document.documentElement.classList.toggle('dark');
+  localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+};
+
+// Option 2: React hook example
+import { useEffect, useState } from 'react';
+
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Check localStorage or system preference
+    const stored = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const shouldBeDark = stored === 'dark' || (!stored && prefersDark);
+    
+    setIsDark(shouldBeDark);
+    if (shouldBeDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const toggle = () => {
+    const newValue = !isDark;
+    setIsDark(newValue);
+    if (newValue) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  };
+
+  return [isDark, toggle] as const;
+}
+```
+
+**All components automatically support dark mode:**
+- `ConnectButton` - Adapts colors for dark/light themes
+- `ConnectWalletModal` - Full dark mode styling
+- `Modal` - Dark background and text colors
+- `WalletConnectQR` - Dark mode compatible QR display
+- All other components - Fully theme-aware
+
+#### 4. Setup Redux Provider
+
+Wrap your app with the Redux Provider:
+
+```tsx
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { store, persistor } from '@maximedogawa/chia-wallet-connect-react';
+
+function App() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        {/* Your app */}
+      </PersistGate>
+    </Provider>
+  );
+}
+```
+
+### Basic Usage
+
+#### Use the Connect Button
+
+```tsx
+import { ConnectButton } from '@maximedogawa/chia-wallet-connect-react';
+
+function MyComponent() {
+  return (
+    <div>
+      {/* Default usage */}
+      <ConnectButton />
+      
+      {/* Custom text */}
+      <ConnectButton connectText="Connect Wallet" />
+      
+      {/* Custom text and styling */}
+      <ConnectButton 
+        connectText="My Custom Text" 
+        className="custom-button-class"
+      />
+    </div>
+  );
+}
+```
+
+**ConnectButton Props:**
+- `connectText?: string` - Text to display when wallet is not connected (default: "Manage Wallet")
+- `className?: string` - Additional CSS classes to apply to the button
+
+#### 3. Use WalletManager Programmatically
+
+```tsx
+import { WalletManager, useAppSelector } from '@maximedogawa/chia-wallet-connect-react';
+
+function MyComponent() {
+  const walletManager = new WalletManager();
+  const connectedWallet = useAppSelector(state => state.wallet.connectedWallet);
+  
+  const handleConnect = async () => {
+    await walletManager.connect('WalletConnect');
+  };
+  
+  return (
+    <button onClick={handleConnect}>
+      {connectedWallet ? 'Connected' : 'Connect Wallet'}
+    </button>
+  );
+}
+```
+
+#### 4. Access Wallet State
+
+```tsx
+import { useAppSelector } from '@maximedogawa/chia-wallet-connect-react';
+import type { RootState } from '@maximedogawa/chia-wallet-connect-react';
+
+function WalletInfo() {
+  const address = useAppSelector((state: RootState) => state.wallet.address);
+  const connectedWallet = useAppSelector((state: RootState) => state.wallet.connectedWallet);
+  
+  return (
+    <div>
+      <p>Wallet: {connectedWallet}</p>
+      <p>Address: {address}</p>
+    </div>
+  );
+}
+```
+
+### Available Exports
+
+#### Components
+- `ConnectButton` - Button component for connecting wallets (accepts `connectText` and `className` props)
+- `ConnectButtonProps` - TypeScript type for ConnectButton props
+- `ConnectWalletModal` - Modal for wallet connection UI
+- `WalletConnectQR` - QR code display component
+- `WalletConnectSession` - Session management component
+- `AddAssetButton` - Button to add assets to wallet
+- `FingerprintListbox` - Fingerprint selector component
+
+#### Core Utilities
+- `WalletManager` - Main wallet management class
+- `WalletConnect` - WalletConnect implementation class
+
+#### Redux Store
+- `store` - Redux store instance
+- `persistor` - Redux persist instance
+- `useAppDispatch` - Typed dispatch hook
+- `useAppSelector` - Typed selector hook
+- `RootState` - TypeScript type for root state
+- `AppDispatch` - TypeScript type for dispatch
+
+#### Redux Actions
+- `setConnectedWallet` - Set connected wallet
+- `setAddress` - Set wallet address
+- `setCNSName` - Set CNS name
+- `connectSession` - Connect WalletConnect session
+- `setPairingUri` - Set pairing URI
+- `selectSession` - Select active session
+- `setSessions` - Set all sessions
+- And more...
+
+### Environment Variables
+
+Make sure to set these environment variables in your project:
+
+```env
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id
+NEXT_PUBLIC_WALLET_CONNECT_RELAY_URL=wss://relay.walletconnect.com
+NEXT_PUBLIC_CHIA_NETWORK=testnet
+```
+
+### Styling
+
+#### Import Styles
+
+Import the package styles in your app's main entry point:
+
+```tsx
+// In your _app.tsx, layout.tsx, or main.tsx
+import '@maximedogawa/chia-wallet-connect-react/styles';
+```
+
+Or if using CSS modules:
+
+```css
+@import '@maximedogawa/chia-wallet-connect-react/styles';
+```
+
+#### Troubleshooting Styling Issues
+
+If styles are not appearing correctly:
+
+1. **Verify CSS import**: Make sure you've imported the styles in your main entry point
+2. **Check Tailwind content paths**: Ensure your `tailwind.config.js` includes the package's dist files:
+   ```js
+   content: [
+     // ... your paths
+     './node_modules/@maximedogawa/chia-wallet-connect-react/dist/**/*.{js,ts,jsx,tsx}',
+   ]
+   ```
+3. **Verify PostCSS config**: Ensure your `postcss.config.js` includes Tailwind:
+   ```js
+   module.exports = {
+     plugins: {
+       tailwindcss: {},
+       autoprefixer: {},
+     },
+   }
+   ```
+4. **Rebuild Tailwind**: After updating your config, restart your dev server and rebuild
+5. **Check dark mode**: If using dark mode, ensure `darkMode: 'class'` is set in your Tailwind config and the `dark` class is on your `<html>` element
+6. **Merge package config**: Use Option A in the setup section to automatically include all required theme extensions
+
+#### Dark Mode Troubleshooting
+
+If dark mode isn't working:
+
+1. **Verify `dark` class**: Check that `document.documentElement.classList.contains('dark')` returns `true` when dark mode should be active
+2. **Check Tailwind config**: Ensure `darkMode: 'class'` is set in your Tailwind config (included when merging package config)
+3. **Inspect components**: Use browser dev tools to verify `dark:` classes are being applied
+4. **Clear cache**: Sometimes Tailwind needs a rebuild to recognize dark mode classes
+
+## Supported Wallets
+
+- Sage Wallet
+- Ozone Wallet
+- Reference Wallet
+- Any WalletConnect-compatible Chia wallet
+
+## License
+
+See LICENSE file for details.

package/dist/api.d.ts

@@ -0,0 +1,62 @@
+export interface Token {
+    asset_id: string;
+    hidden_puzzle_hash: string | null;
+    name: string;
+    short_name: string;
+    image_url: string;
+    verified: boolean;
+}
+export interface Pair {
+    pair_id: string;
+    asset_id: string;
+    asset_name: string;
+    asset_hidden_puzzle_hash: string | null;
+    asset_short_name: string;
+    asset_image_url: string;
+    asset_verified: boolean;
+    inverse_fee: number;
+    liquidity_asset_id: string;
+    xch_reserve: number;
+    token_reserve: number;
+    liquidity: number;
+    last_coin_id_on_chain: string;
+}
+export declare function pairToToken(pair: Pair): Token;
+export declare enum ActionType {
+    SWAP = "SWAP",
+    ADD_LIQUIDITY = "ADD_LIQUIDITY",
+    REMOVE_LIQUIDITY = "REMOVE_LIQUIDITY"
+}
+export interface Quote {
+    amount_in: number;
+    amount_out: number;
+    price_warning: boolean;
+    fee: number;
+    asset_id: string;
+    input_reserve: number;
+    output_reserve: number;
+}
+export interface OfferResponse {
+    success: boolean;
+    message: string;
+    offer_id: string;
+}
+export interface CreatePairResponse {
+    success: boolean;
+    message: string;
+    coin_id: string;
+}
+export declare function getAllPairs(skip?: number, limit?: number): Promise<Pair[]>;
+export declare function getAllTokens(): Promise<Token[]>;
+export declare function getPairByLauncherId(launcherId: string): Promise<Pair>;
+export declare function getQuoteForPair(pairId: string, amountIn?: number, amountOut?: number, xchIsInput?: boolean, estimateFee?: boolean): Promise<Quote>;
+export declare function createOfferForPair(pairId: string, offer: string, action: ActionType, devFee: number): Promise<OfferResponse>;
+export declare function createPair(assetId: string, hidden_puzzle_hash: string | null, inverse_fee: number, offer: string, xch_liquidity: number, token_liquidity: number, liquidity_destination_address: string): Promise<CreatePairResponse>;
+export declare function refreshRouter(rcat: boolean): Promise<void>;
+export declare function isCoinSpent(coinId: string): Promise<boolean>;
+export declare function getInputPrice(input_amount: number, input_reserve: number, output_reserve: number, inverse_fee: number): number;
+export declare function getOutputPrice(output_amount: number, input_reserve: number, output_reserve: number, inverse_fee: number): number;
+export declare function getFastQuote(amountIn: number | undefined, amountOut: number | undefined, xchIsInput: boolean, xchReserve: number, tokenReserve: number, inverseFee: number): number;
+export declare function getLiquidityQuote(knownIn: number, knownReserve: number, unknownReserve: number, checkUnknown: boolean): number;
+export declare function getCNSNameApiCall(address: string): Promise<string | null>;
+//# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.tsx"],"names":[],"mappings":"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"}