astra-modal-test 1.0.10 → 1.0.12

package/README.md

@@ -1,204 +1,276 @@
-# Astra SDK
+# NodeFlow SDK
 
-Astra SDK is a powerful React library that enables seamless asset bridging between EVM-compatible blockchains and the Bitcoin Lightning Network. Built with modern web technologies, it provides developers with an easy-to-integrate solution for cross-chain liquidity and payments.
+NodeFlow SDK is a React library that enables seamless asset bridging between EVM chains and the Bitcoin Lightning Network.
 
-## ✨ Features
+## Features
 
 - **Cross-Chain Bridge**: Bridge assets between EVM chains and Lightning Network
-- **Multi-Chain Support**: Support for Ethereum, Base, BSC, Botanix testnet, and more
-- **Wallet Integration**: Built-in support for WalletConnect and popular Web3 wallets
-- **TypeScript Ready**: Full TypeScript support with type definitions
-- **Responsive Design**: Mobile-first design with responsive UI components
-- **Real-time Updates**: Live transaction status and balance updates
-- **Customizable Theme**: Dark theme with customizable styling
+- **Multi-Chain Support**: Base, BSC, and more
+- **Wallet Integration**: Built-in WalletConnect support
+- **Dynamic Configuration**: Auto-detects supported networks from API
+- **Responsive UI**: Dark theme with customizable modal
 
-## 🚀 Quick Start
-
-### Installation
+## Installation
 
 ```bash
-npm install astra-modal
+yarn add @lnfi-network/nodeflow-sdk
 # or
-yarn add astra-modal
+npm install @lnfi-network/nodeflow-sdk
 ```
 
-### Basic Usage
+> Peer dependencies (wagmi, viem, @reown/appkit, etc.) will be installed automatically.
+
+## Configuration
+
+| Item | Value | Description |
+| :--- | :--- | :--- |
+| **Project ID** | Get from [WalletConnect](https://cloud.walletconnect.com/) | Required for wallet connection |
+| **Dev API URL** | `<API_BASE_URL>` | Development/Testnet |
+| **Prod API URL** | *(Contact support)* | Production |
+
+---
+
+## Quick Start
 
 ```jsx
-import React from 'react';
-import { AstraProvider, AstraModal, astraSend, astraReceive } from 'astra-modal';
+import { 
+  NodeFlowProvider, 
+  NodeFlowModal, 
+  nodeFlowSend, 
+  nodeFlowReceive,
+  useNodeFlowPairs  // Hook to get available asset pairs
+} from '@lnfi-network/nodeflow-sdk';
 
 function App() {
   return (
-    <AstraProvider 
-      projectId="your-project-id" 
+    <NodeFlowProvider 
+      projectId="your-walletconnect-project-id" 
+      apiUrl="<API_BASE_URL>"
     >
-      <AstraModal />
-      
-      {/* Lightning to EVM */}
-      <button onClick={() => astraSend({
-        assetId: "your-asset-id",
-        amount: 1000
+      <NodeFlowModal />
+      <MyBridgeUI />
+    </NodeFlowProvider>
+  );
+}
+
+function MyBridgeUI() {
+  // Get available trading pairs dynamically - no hardcoded asset IDs needed!
+  const { pairs, defaultAssetId, isReady } = useNodeFlowPairs();
+  
+  if (!isReady) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {/* Lightning → EVM: Get tokens by paying LN invoice */}
+      <button onClick={() => nodeFlowSend({
+        assetId: defaultAssetId,  // Use dynamic asset ID
+        amount: 1000,             // Amount in sats
+        onSuccess: (result) => console.log('Success!', result)
       })}>
-        Bridge from Lightning
+        Get Tokens (Pay Lightning)
       </button>
       
-      {/* EVM to Lightning */}
-      <button onClick={() => astraReceive({
-        assetId: "your-asset-id",
-        invoice: "lnbc..."
+      {/* EVM → Lightning: Pay LN invoice with tokens */}
+      <button onClick={() => nodeFlowReceive({
+        assetId: defaultAssetId,
+        invoice: "lnbc...",       // Lightning invoice to pay
+        onSuccess: (result) => console.log('Paid!', result)
       })}>
-        Bridge to Lightning
+        Pay Invoice (Use Tokens)
       </button>
-    </AstraProvider>
+    </div>
   );
 }
 ```
 
-## 📖 API Reference
+---
 
-### AstraProvider
+## How It Works
 
-The main provider component that wraps your application.
+### Lightning → EVM (Get Tokens)
+
+User pays a Lightning invoice to receive EVM tokens.
 
-```jsx
-<AstraProvider
-  projectId={string}        // WalletConnect project ID (required)
->
-  {children}
-</AstraProvider>
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                    Lightning → EVM (nodeFlowSend)                           │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+    User                           SDK                           LSP Node
+      │                              │                               │
+      │  nodeFlowSend({              │                               │
+      │    assetId, amount           │                               │
+      │  })                          │                               │
+      ├─────────────────────────────►│                               │
+      │                              │                               │
+      │                              │  Request Quote & Invoice      │
+      │                              ├──────────────────────────────►│
+      │                              │  ◄── { invoice }              │
+      │                              │                               │
+      │  Show Invoice QR             │                               │
+      ◄──────────────────────────────│                               │
+      │                              │                               │
+      │  User pays via LN wallet     │                               │
+      ├──────────────────────────────┼──────────────────────────────►│
+      │                              │                               │
+      │                              │  LSP releases tokens on-chain │
+      │                              │  ◄──────────────────────────────
+      │                              │                               │
+      │  ✅ Tokens received!          │                               │
+      ◄──────────────────────────────│                               │
 ```
 
-### astraSend
+### EVM → Lightning (Pay Invoice)
 
-Bridge assets from Lightning Network to EVM chains.
+User pays a Lightning invoice using their EVM tokens.
 
-```jsx
-astraSend({
-  assetId: string,      // Asset identifier
-  amount: number,       // Amount to bridge (in satoshis)
-  onAstraInvoice?: (invoice, tx, txUrl) => void,  // Callback for invoice
-});
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                    EVM → Lightning (nodeFlowReceive)                        │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+    User                           SDK                           LSP Node
+      │                              │                               │
+      │  nodeFlowReceive({           │                               │
+      │    assetId, invoice          │                               │
+      │  })                          │                               │
+      ├─────────────────────────────►│                               │
+      │                              │                               │
+      │  Show quote & confirm        │                               │
+      ◄──────────────────────────────│                               │
+      │                              │                               │
+      │  Approve & Deposit tokens    │                               │
+      ├─────────────────────────────►│                               │
+      │                              │                               │
+      │                              │  Lock tokens in contract      │
+      │                              ├──────────────────────────────►│
+      │                              │                               │
+      │                              │  LSP pays LN invoice          │
+      │                              │  ◄──────────────────────────────
+      │                              │                               │
+      │  ✅ Invoice paid!             │                               │
+      ◄──────────────────────────────│                               │
 ```
 
-### astraReceive
-
-Bridge assets from EVM chains to Lightning Network.
+---
 
-```jsx
-astraReceive({
-  assetId: string,      // Asset identifier
-  invoice: string       // Lightning invoice
-});
-```
+## API Reference
 
-## 🏗️ Development
+### Components
 
-### Prerequisites
+#### `<NodeFlowProvider>`
 
-- Node.js 16+ 
-- npm or yarn
-- React 18+
+Main provider component. Wrap your app with this.
 
-### Local Development
+| Prop | Type | Required | Description |
+| :--- | :--- | :--- | :--- |
+| `projectId` | `string` | ✅ | WalletConnect Project ID |
+| `apiUrl` | `string` | ✅ | NodeFlow API URL |
+| `themeMode` | `'dark' \| 'light'` | - | Theme mode (default: `'dark'`) |
+| `customNetworks` | `Network[]` | - | Custom network configuration |
 
-```bash
-# Clone the repository
-git clone <repository-url>
-cd astrasdk
+#### `<NodeFlowModal>`
 
-# Install dependencies (use npm only)
-npm install
+Modal component for transaction UI. Add once inside the provider.
 
-# Start development server
-npm run dev
+---
 
-# Build for production
-npm run build
+### Functions
 
-# Run linter
-npm run lint
-```
+#### `nodeFlowSend(options)`
 
-**Note**: This project uses npm as the package manager. Please avoid using yarn to prevent compatibility issues.
+Lightning → EVM: Get tokens by paying a Lightning invoice.
 
-### Environment Configuration
+| Option | Type | Description |
+| :--- | :--- | :--- |
+| `assetId` | `string` | Asset ID (get from `useNodeFlowPairs`) |
+| `amount` | `number` | Amount in satoshis |
+| `onProgress` | `(step, data) => void` | Progress callback |
+| `onSuccess` | `(result) => void` | Success callback |
+| `onError` | `(error) => void` | Error callback |
 
-For development, you can use the provided test configuration:
+**Progress steps**: `'init'` → `'signature'` → `'deposit'` → `'pending'` → `'complete'`
 
-```jsx
-const projectId = "your-test-project-id";
+```javascript
+const result = await nodeFlowSend({
+  assetId: defaultAssetId,
+  amount: 1000,
+  onProgress: (step) => console.log('Step:', step),
+  onSuccess: (result) => console.log('Success:', result),
+});
 ```
 
-## 🔧 Technical Stack
+#### `nodeFlowReceive(options)`
 
-- **React 18** - UI library
-- **Wagmi** - React hooks for Ethereum
-- **Viem** - TypeScript interface for Ethereum
-- **Reown AppKit** - Wallet connection
-- **Ant Design** - UI components
-- **Styled Components** - CSS-in-JS styling
-- **Zustand** - State management
-- **Axios** - HTTP client
-- **Decimal.js** - Precise decimal arithmetic
+EVM → Lightning: Pay a Lightning invoice using tokens.
 
-## 🌐 Supported Networks
+| Option | Type | Description |
+| :--- | :--- | :--- |
+| `assetId` | `string` | Asset ID (get from `useNodeFlowPairs`) |
+| `invoice` | `string` | Lightning invoice to pay |
+| `onProgress` | `(step, data) => void` | Progress callback |
+| `onSuccess` | `(result) => void` | Success callback |
+| `onError` | `(error) => void` | Error callback |
 
-### Production Networks
-- **BSC** - Binance Smart Chain
-- **Base** - Coinbase Layer 2
+**Progress steps**: `'init'` → `'approve'` → `'deposit'` → `'complete'`
 
-### Development Networks
-- **Sepolia** - Ethereum testnet
-- **Base Sepolia** - Base testnet
-- **Botanix** - Bitcoin EVM testnet
+```javascript
+const result = await nodeFlowReceive({
+  assetId: defaultAssetId,
+  invoice: 'lnbc...',
+  onSuccess: (result) => console.log('Paid:', result),
+});
+```
 
-## 📱 Mobile Support
+---
 
-The SDK is fully responsive and optimized for mobile devices with:
-- Touch-friendly interfaces
-- Responsive modal design
-- Mobile wallet compatibility
-- Optimized font sizes and spacing
+### Hooks
 
-## 🔐 Security Features
+#### `useNodeFlowPairs()`
 
-- Secure wallet connections via WalletConnect
-- Transaction validation and verification
-- Real-time status monitoring
-- Error handling and user feedback
-- Safe contract interactions
+Get available trading pairs for the current chain.
 
-## 📄 License
+```javascript
+const { 
+  pairs,          // All available pairs
+  defaultAssetId, // First pair's asset ID
+  currentPair,    // Currently selected pair
+  setCurrentPair, // Set current pair
+  isReady         // Whether pairs are loaded
+} = useNodeFlowPairs();
+```
 
-MIT License - see [LICENSE](LICENSE) file for details.
+#### `useNodeFlowState()`
 
-## 🤝 Contributing
+Get SDK configuration state.
 
-We welcome contributions! Please see our contributing guidelines:
+```javascript
+const { 
+  supportedChainIds, // Supported chain IDs from backend
+  isConfigReady,     // Config loaded
+  apiUrl,            // Current API URL
+  targetNetwork      // Current network
+} = useNodeFlowState();
+```
 
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests if applicable
-5. Submit a pull request
+---
 
-## 📞 Support
+## Using NodeFlowConfig (Existing Wagmi Setup)
 
-For support and questions:
-- Create an issue in the GitHub repository
-- Check the documentation
-- Review example implementations
+If you already have Wagmi configured in your app, use `NodeFlowConfig` instead:
 
-## 🔄 Changelog
+```jsx
+import { NodeFlowConfig, NodeFlowModal } from '@lnfi-network/nodeflow-sdk';
 
-### v1.0.34
-- Initial public release
-- EVM ↔ Lightning bridge functionality
-- Multi-chain support
-- Wallet integration
-- Responsive design
+// Inside your existing WagmiProvider
+<NodeFlowConfig apiUrl="<API_BASE_URL>">
+  <NodeFlowModal />
+  <YourApp />
+</NodeFlowConfig>
+```
 
 ---
 
-Built with ❤️ by the Astra Labs team
+## License
+
+MIT

package/dist/{SwapController-DyormRqe.js → SwapController-mYFErPzx.js}

@@ -1,4 +1,4 @@
-import { N as l, L as G, M as O, R as f, S as g, O as E, P as S, Q as U, T as D, U as B, V as P, X as b, Y as M, Z as C, _ as z, $ as R, a0 as V, a1 as x, a2 as H, a3 as $, a4 as Q, a5 as q } from "./index-2vYoun4O.js";
+import { N as l, L as G, M as O, R as f, S as g, O as E, P as S, Q as U, T as D, U as B, V as P, X as b, Y as M, Z as C, _ as z, $ as R, a0 as V, a1 as x, a2 as H, a3 as $, a4 as Q, a5 as q } from "./index-LucuShOc.js";
 const I = {
   getGasPriceInEther(n, t) {
     const o = t * n;

package/dist/{add-C1zIRxeS.js → add-CXtFvysR.js}

@@ -1,4 +1,4 @@
-import { D as l } from "./index-2vYoun4O.js";
+import { D as l } from "./index-LucuShOc.js";
 const o = l`<svg
   width="14"
   height="14"

package/dist/{all-wallets-5a2U9fLw.js → all-wallets-B9fFXw5x.js}

@@ -1,4 +1,4 @@
-import { D as a } from "./index-2vYoun4O.js";
+import { D as a } from "./index-LucuShOc.js";
 const o = a`<svg fill="none" viewBox="0 0 24 24">
   <path
     style="fill: var(--wui-color-accent-100);"

package/dist/{app-store-2IKrZeLe.js → app-store-BXf1yvR8.js}

@@ -1,4 +1,4 @@
-import { D as a } from "./index-2vYoun4O.js";
+import { D as a } from "./index-LucuShOc.js";
 const e = a`
 <svg width="36" height="36">
   <path

package/dist/{apple-DH9ESSKX.js → apple-DtcOcX1n.js}

@@ -1,4 +1,4 @@
-import { D as l } from "./index-2vYoun4O.js";
+import { D as l } from "./index-LucuShOc.js";
 const f = l`<svg fill="none" viewBox="0 0 40 40">
   <g clip-path="url(#a)">
     <g clip-path="url(#b)">

package/dist/{arrow-bottom-BxAPS43J.js → arrow-bottom-BXeLKqSV.js}

@@ -1,4 +1,4 @@
-import { D as o } from "./index-2vYoun4O.js";
+import { D as o } from "./index-LucuShOc.js";
 const e = o`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{arrow-bottom-circle-Cy5Gjca4.js → arrow-bottom-circle-BVUU200N.js}

@@ -1,4 +1,4 @@
-import { D as C } from "./index-2vYoun4O.js";
+import { D as C } from "./index-LucuShOc.js";
 const e = C`<svg
   fill="none"
   viewBox="0 0 21 20"

package/dist/{arrow-left-CBX7JaHB.js → arrow-left-LguJPyNR.js}

@@ -1,4 +1,4 @@
-import { D as e } from "./index-2vYoun4O.js";
+import { D as e } from "./index-LucuShOc.js";
 const o = e`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{arrow-right-G72bt1-M.js → arrow-right-D9kKZzGG.js}

@@ -1,4 +1,4 @@
-import { D as l } from "./index-2vYoun4O.js";
+import { D as l } from "./index-LucuShOc.js";
 const e = l`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{arrow-top-DCkQG0Dq.js → arrow-top-C5JcaCqz.js}

@@ -1,4 +1,4 @@
-import { D as o } from "./index-2vYoun4O.js";
+import { D as o } from "./index-LucuShOc.js";
 const e = o`<svg fill="none" viewBox="0 0 14 15">
   <path
     fill="currentColor"

package/dist/{bank-FNxAUs8r.js → bank-DgbCzr0A.js}

@@ -1,4 +1,4 @@
-import { D as e } from "./index-2vYoun4O.js";
+import { D as e } from "./index-LucuShOc.js";
 const o = e`<svg
   xmlns="http://www.w3.org/2000/svg"
   width="12"

package/dist/{bin-B-c2CIPW.js → bin-ykHym2bC.js}

@@ -1,4 +1,4 @@
-import { D as C } from "./index-2vYoun4O.js";
+import { D as C } from "./index-LucuShOc.js";
 const o = C`<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90029 1.71429C4.09883 0.736183 4.96358 0 6.00028 0C7.03698 0 7.90173 0.736183 8.10027 1.71429H9.41533C9.42361 1.71417 9.4319 1.71417 9.44022 1.71429H10.286C10.7594 1.71429 11.1431 2.09804 11.1431 2.57143C11.1431 3.04482 10.7594 3.42857 10.286 3.42857H10.1855L9.73675 7.01877C9.6785 7.48493 9.6279 7.88983 9.55601 8.22075C9.47948 8.57304 9.36472 8.91574 9.13613 9.22925C8.91553 9.53181 8.63151 9.78254 8.30392 9.96392C7.96448 10.1519 7.61019 10.2232 7.25112 10.2555C6.91385 10.2858 6.50581 10.2857 6.03603 10.2857H5.96453C5.49475 10.2857 5.08671 10.2858 4.74944 10.2555C4.39037 10.2232 4.03608 10.1519 3.69664 9.96392C3.36905 9.78254 3.08503 9.53181 2.86442 9.22925C2.63583 8.91574 2.52108 8.57304 2.44455 8.22075C2.37266 7.88984 2.32206 7.48496 2.26382 7.0188L1.81504 3.42857H1.71456C1.24118 3.42857 0.857422 3.04482 0.857422 2.57143C0.857422 2.09804 1.24118 1.71429 1.71456 1.71429H2.56034C2.56866 1.71417 2.57695 1.71417 2.58522 1.71429H3.90029ZM3.54266 3.42857L3.96043 6.77068C4.02441 7.2825 4.06617 7.61016 4.11976 7.85681C4.17051 8.09045 4.21726 8.17492 4.2496 8.21928C4.32314 8.32013 4.41781 8.4037 4.52701 8.46416C4.57504 8.49076 4.66465 8.52666 4.90278 8.54805C5.15417 8.57063 5.48448 8.57143 6.00028 8.57143C6.51608 8.57143 6.84638 8.57063 7.09778 8.54805C7.33591 8.52666 7.42552 8.49076 7.47355 8.46416C7.58275 8.4037 7.67742 8.32013 7.75096 8.21928C7.7833 8.17491 7.83005 8.09045 7.8808 7.85681C7.93439 7.61016 7.97615 7.2825 8.04013 6.77068L8.4579 3.42857H3.54266Z" fill="currentColor"/>
 </svg>

package/dist/{bitcoin-jk4NLDu1.js → bitcoin-B8jzy_uV.js}

@@ -1,4 +1,4 @@
-import { D as L } from "./index-2vYoun4O.js";
+import { D as L } from "./index-LucuShOc.js";
 const i = L`
 <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_24458_3947)">

package/dist/{browser-D6w0J78l.js → browser-Bk8u8PAA.js}

@@ -1,4 +1,4 @@
-import { D as l } from "./index-2vYoun4O.js";
+import { D as l } from "./index-LucuShOc.js";
 const a = l`<svg fill="none" viewBox="0 0 20 20">
   <path
     fill="currentColor"

package/dist/{card-BLWRKU-r.js → card-DcwQMUca.js}

@@ -1,4 +1,4 @@
-import { D as C } from "./index-2vYoun4O.js";
+import { D as C } from "./index-LucuShOc.js";
 const l = C`<svg
   xmlns="http://www.w3.org/2000/svg"
   width="12"