multicoyn-sdk 0.1.8 → 0.1.10

package/README.md

@@ -1,6 +1,6 @@
 # Multicoyn SDK
 
-A Web3 payment SDK for multichain crypto payments with support for multiple tokens and settlement options.
+React SDK for multi-coin/multi-token payments with split allocation, auto-optimize, and multi-chain support (Lisk Sepolia). Includes a ready-to-use payment modal UI and wallet integration via RainbowKit/Wagmi.
 
 ## Installation
 
@@ -12,112 +12,258 @@ yarn add multicoyn-sdk
 pnpm add multicoyn-sdk
 ```
 
-## Peer Dependencies
-
-Make sure you have the following peer dependencies installed:
-
+### Peer Dependencies
+Make sure these are installed:
 ```bash
-npm install react react-dom viem wagmi @tanstack/react-query @rainbow-me/rainbowkit
+npm install react react-dom wagmi viem @tanstack/react-query @rainbow-me/rainbowkit
 ```
 
-## Usage
-
-### 1. Setup Providers
-
-Wrap your app with the required providers:
+## Quick Start
 
 ```tsx
-import { Web3Provider, PaymentProvider } from 'multicoyn-sdk';
+import { Web3Provider, PaymentProvider, MulticoynButton } from 'multicoyn-sdk';
 import 'multicoyn-sdk/styles';
 
+const items = [{ name: 'Order #123', price: 100 }]; // price in selected currency (default USD)
+
 function App() {
   return (
     <Web3Provider>
       <PaymentProvider>
-        <YourApp />
+        <MulticoynButton
+          merchantAddress="0xYourMerchantAddress"
+          items={items}
+          config={{ currency: 'USD' }} // or 'IDR'
+          onPaymentComplete={(result) => console.log('Success:', result)}
+          onPaymentError={(error) => console.error('Error:', error)}
+        />
       </PaymentProvider>
     </Web3Provider>
   );
 }
 ```
 
-### 2. Use the Payment Button
+## Key Features
 
-```tsx
-import { MulticoynButton, type PaymentConfig } from 'multicoyn-sdk';
+- 🪙 **Multi-token split**: Users can allocate multiple tokens at once (ETH, USDC, USDT, DAI, WBTC)
+- ⚖️ **Auto-optimize**: Automatically distributes allocation (prioritizes stablecoins if sufficient)
+- 🔄 **Live price fetch**: Real-time token prices via on-chain TokenRegistry
+- 🛡️ **Balance & price validation**: Verifies allocation covers total payment before submission
+- 🧾 **Multi-item cart**: Supports multiple items with automatic total calculation
+- 💱 **Multi-currency**: Supports USD and IDR pricing with automatic conversion
+- 💸 **IDR Settlement**: Option to settle payments in IDRX stablecoin
+- 🌐 **Wallet-ready**: RainbowKit + Wagmi + React Query pre-configured via `Web3Provider`
 
-function YourComponent() {
-  const handlePaymentComplete = (result) => {
-    console.log('Payment success:', result.transactionId);
-  };
+## Supported Tokens
 
-  const handlePaymentError = (error) => {
-    console.error('Payment error:', error.message);
-  };
+| Token | Symbol | Use |
+|-------|--------|-----|
+| Ether | ETH | Payment |
+| USD Coin | USDC | Payment |
+| Tether USD | USDT | Payment |
+| Dai Stablecoin | DAI | Payment |
+| Wrapped Bitcoin | WBTC | Payment |
+| Indonesian Rupiah | IDRX | Settlement only |
 
-  return (
-    <MulticoynButton
-      totalAmount={100}
-      merchantAddress="0x..."
-      items={[
-        { name: "Product 1", price: 50 },
-        { name: "Product 2", price: 50 }
-      ]}
-      currency="USD" // or "IDR" - automatically determines settlement currency
-      onPaymentComplete={handlePaymentComplete}
-      onPaymentError={handlePaymentError}
-    />
-  );
+## Components & API
+
+### `<MulticoynButton />`
+
+Main button component that opens the payment modal.
+
+```ts
+interface MulticoynButtonProps {
+  merchantAddress: `0x${string}`;      // Merchant wallet address
+  items: PaymentItem[];                 // Cart items
+  config?: PaymentConfig;               // Payment configuration
+  onPaymentComplete?: (result: PaymentResult) => void;
+  onPaymentError?: (error: Error) => void;
+  className?: string;                   // Custom button styling
+  children?: React.ReactNode;           // Custom button content
+}
+
+interface PaymentItem {
+  name: string;
+  price: number;  // Price in selected currency
+}
+
+interface PaymentConfig {
+  currency?: 'USD' | 'IDR';             // Default: 'USD'
+  target?: `0x${string}`;               // Optional: target contract for callback
+  callData?: `0x${string}`;             // Optional: calldata for router callback
 }
 ```
 
-#### Advanced Usage with Smart Contract Interaction
+#### Payment Result
 
-```tsx
-<MulticoynButton
-  totalAmount={100}
-  merchantAddress="0x..."
-  items={[{ name: "NFT Mint", price: 100 }]}
-  currency="USD" // or "IDR" - automatically determines settlement currency
-  // Optional: Execute custom contract call after payment
-  target="0xNFTContractAddress"
-  callData="0x..." // encoded function call
-  onPaymentComplete={handlePaymentComplete}
-  onPaymentError={handlePaymentError}
-/>
+```ts
+interface PaymentResult {
+  success: boolean;
+  transactionId?: string;               // Transaction hash
+  tokens: Token[];                      // Tokens used in payment
+}
+
+interface Token {
+  id: string;
+  name: string;
+  symbol: string;
+  amount: number;                       // User's balance
+  chain: string;
+  percentage: number;                   // Allocation percentage (0-100)
+  address: `0x${string}`;
+  decimals: number;
+  priceUSD: number;
+}
 ```
 
-### 3. Access Payment Configuration
+### Providers
+
+#### `<Web3Provider>`
+Wraps your app with Wagmi, RainbowKit, and React Query providers.
 
 ```tsx
-import { usePaymentConfig } from 'multicoyn-sdk';
+<Web3Provider>
+  {/* Your app */}
+</Web3Provider>
+```
+
+#### `<PaymentProvider>`
+Optional provider for global payment configuration.
 
-function YourComponent() {
-  const config = usePaymentConfig();
-  // Access payment configuration and state
+```tsx
+interface PaymentConfig {
+  merchantAddress?: `0x${string}`;
+  settleInIDR?: boolean;
+  enabledTokens?: string[];
+  theme?: 'light' | 'dark';
 }
+
+<PaymentProvider initialConfig={{ theme: 'dark' }}>
+  {/* Your app */}
+</PaymentProvider>
 ```
 
-## Features
+#### `usePaymentConfig()`
+Hook to access and update payment configuration at runtime.
 
-- Multi-chain payment support
-- Multiple token options (USDC, USDT, DAI, WBTC, Native tokens)
-- Settlement token support (IDRX)
-- Built-in wallet connection via RainbowKit
-- TypeScript support
-- Tailwind CSS styling
+```tsx
+const { config, updateConfig } = usePaymentConfig();
+updateConfig({ settleInIDR: true });
+```
 
-## Configuration
+### Hooks
 
-The SDK comes with pre-configured contracts and chains. You can also access these configurations:
+Available hooks for advanced usage:
+
+| Hook | Description |
+|------|-------------|
+| `usePaymentModal` | Control payment modal state |
+| `usePaymentRouter` | Execute payments & check transaction status |
+| `useTokenRegistry` | Fetch token prices from on-chain registry |
+| `useMultiTokenBalances` | Get user balances for all supported tokens |
+| `useMultiTokenPrices` | Get current prices for all supported tokens |
+| `useERC20` | Generic ERC20 token operations |
+
+#### Example: usePaymentRouter
 
 ```tsx
-import { CONTRACTS, TOKENS, liskSepolia } from 'multicoyn-sdk';
+const { 
+  executePayment,    // Execute payment transaction
+  hash,              // Transaction hash
+  isPending,         // Transaction pending
+  isConfirming,      // Waiting for confirmation
+  isConfirmed,       // Transaction confirmed
+  error              // Error if any
+} = usePaymentRouter();
+```
 
-console.log(CONTRACTS.PAYMENT_ROUTER);
-console.log(TOKENS.USDC);
+### Configuration & Constants
+
+```ts
+import { 
+  CONTRACTS,           // Contract addresses
+  TOKENS,              // Token addresses
+  wagmiConfig,         // Wagmi configuration
+  liskSepolia,         // Chain config
+  FEE_PERCENTAGE,      // 0.003 (0.3%)
+  USD_SCALE,           // 1e8
+  TOKEN_METADATA       // Token info (symbol, decimals, name)
+} from 'multicoyn-sdk';
+```
+
+#### Contract Addresses (Lisk Sepolia)
+
+```ts
+CONTRACTS = {
+  PAYMENT_ROUTER: "0x73Dbc7447E3B097cFc8b08ee7896a9D27D67e2B4",
+  TOKEN_REGISTRY: "0x1d2C6dfB2f127d6F3c14859c9E54cbc27bd7FcCE"
+}
+
+TOKENS = {
+  NATIVE: "0x0000000000000000000000000000000000000000",  // ETH
+  USDC: "0x0Ff0aED4862e168086FD8BC38a4c27cE1830228b",
+  USDT: "0xBc63b0cf19b757c2a6Ef646027f8CeA7Af2c3e7F",
+  DAI: "0xd2aAa24D5C305B7968e955A89F0bf4E7776E7078",
+  WBTC: "0x1BEC7ec7F995B9bcd93F411B2cE7d289C6b05f03",
+  IDRX: "0x39B9205cDC53114c0B0F22F04C1215A13197b4d9"   // Settlement
+}
+```
+
+## Styling
+
+Import the styles once in your app:
+
+```tsx
+import 'multicoyn-sdk/styles';
+// or
+import 'multicoyn-sdk/dist/multicoyn-sdk.css';
+```
+
+- No Tailwind setup required in host app (CSS is bundled)
+- All classes are prefixed with `mc:` to prevent conflicts
+
+## Payment Flow
+
+1. User clicks the MulticoynButton
+2. If not connected, wallet connection is triggered
+3. Payment modal opens showing user's token balances
+4. User allocates tokens (manually or via auto-optimize)
+5. Total allocation must equal 100%
+6. User submits payment
+7. SDK handles token approvals automatically
+8. Payment is executed via PaymentRouter contract
+9. Transaction confirmation triggers `onPaymentComplete` callback
+
+## Validation Rules
+
+- ✅ Total token allocation must equal 100%
+- ✅ Token prices must be available from registry
+- ✅ User must have sufficient balance for selected allocation
+- ❌ Button disabled if any validation fails
+
+## Fees
+
+- Platform fee: **0.3%** (automatically added to payment)
+- Fee is calculated on top of the product price
+
+## Build & Development
+
+```bash
+npm run dev        # Start development server
+npm run build      # Build library (dist/)
+npm run build:lib  # Build with type declarations
+npm run lint       # Run ESLint
 ```
 
+## Requirements
+
+- Node.js 20.19+ (Vite 7)
+- React 18 or 19
+
+## Network
+
+Currently deployed on **Lisk Sepolia** testnet.
+
 ## License
 
 MIT

package/dist/{ccip-BBBr8vlp.cjs → ccip-C24Kx7fL.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Daw_yCWZ.cjs");function k(r){const{abi:n,data:a}=r,o=e.slice(a,0,4),t=n.find(s=>s.type==="function"&&o===e.toFunctionSelector(e.formatAbiItem(s)));if(!t)throw new e.AbiFunctionSignatureNotFoundError(o,{docsPath:"/docs/contract/decodeFunctionData"});return{functionName:t.name,args:"inputs"in t&&t.inputs&&t.inputs.length>0?e.decodeAbiParameters(t.inputs,e.slice(a,4)):void 0}}const h="/docs/contract/encodeErrorResult";function y(r){const{abi:n,errorName:a,args:o}=r;let t=n[0];if(a){const f=e.getAbiItem({abi:n,args:o,name:a});if(!f)throw new e.AbiErrorNotFoundError(a,{docsPath:h});t=f}if(t.type!=="error")throw new e.AbiErrorNotFoundError(void 0,{docsPath:h});const s=e.formatAbiItem(t),c=e.toFunctionSelector(s);let i="0x";if(o&&o.length>0){if(!t.inputs)throw new e.AbiErrorInputsNotFoundError(t.name,{docsPath:h});i=e.encodeAbiParameters(t.inputs,o)}return e.concatHex([c,i])}const m="/docs/contract/encodeFunctionResult";function L(r){const{abi:n,functionName:a,result:o}=r;let t=n[0];if(a){const c=e.getAbiItem({abi:n,name:a});if(!c)throw new e.AbiFunctionNotFoundError(a,{docsPath:m});t=c}if(t.type!=="function")throw new e.AbiFunctionNotFoundError(void 0,{docsPath:m});if(!t.outputs)throw new e.AbiFunctionOutputsNotFoundError(t.name,{docsPath:m});const s=(()=>{if(t.outputs.length===0)return[];if(t.outputs.length===1)return[o];if(Array.isArray(o))return o;throw new e.InvalidArrayError(o)})();return e.encodeAbiParameters(t.outputs,s)}const b="x-batch-gateway:true";async function g(r){const{data:n,ccipRequest:a}=r,{args:[o]}=k({abi:e.batchGatewayAbi,data:n}),t=[],s=[];return await Promise.all(o.map(async(c,i)=>{try{s[i]=c.urls.includes(b)?await g({data:c.data,ccipRequest:a}):await a(c),t[i]=!1}catch(f){t[i]=!0,s[i]=F(f)}})),L({abi:e.batchGatewayAbi,functionName:"query",result:[t,s]})}function F(r){return r.name==="HttpRequestError"&&r.status?y({abi:e.batchGatewayAbi,errorName:"HttpError",args:[r.status,r.shortMessage]}):y({abi:[e.solidityError],errorName:"Error",args:["shortMessage"in r?r.shortMessage:r.message]})}function O(r,n){if(!e.isAddress(r,{strict:!1}))throw new e.InvalidAddressError({address:r});if(!e.isAddress(n,{strict:!1}))throw new e.InvalidAddressError({address:n});return r.toLowerCase()===n.toLowerCase()}class P extends e.BaseError{constructor({callbackSelector:n,cause:a,data:o,extraData:t,sender:s,urls:c}){super(a.shortMessage||"An error occurred while fetching for an offchain result.",{cause:a,metaMessages:[...a.metaMessages||[],a.metaMessages?.length?"":[],"Offchain Gateway Call:",c&&["  Gateway URL(s):",...c.map(i=>`    ${e.getUrl(i)}`)],`  Sender: ${s}`,`  Data: ${o}`,`  Callback selector: ${n}`,`  Extra data: ${t}`].flat(),name:"OffchainLookupError"})}}class S extends e.BaseError{constructor({result:n,url:a}){super("Offchain gateway response is malformed. Response data must be a hex value.",{metaMessages:[`Gateway URL: ${e.getUrl(a)}`,`Response: ${e.stringify(n)}`],name:"OffchainLookupResponseMalformedError"})}}class x extends e.BaseError{constructor({sender:n,to:a}){super("Reverted sender address does not match target contract address (`to`).",{metaMessages:[`Contract address: ${a}`,`OffchainLookup sender address: ${n}`],name:"OffchainLookupSenderMismatchError"})}}const M="0x556f1830",E={name:"OffchainLookup",type:"error",inputs:[{name:"sender",type:"address"},{name:"urls",type:"string[]"},{name:"callData",type:"bytes"},{name:"callbackFunction",type:"bytes4"},{name:"extraData",type:"bytes"}]};async function N(r,{blockNumber:n,blockTag:a,data:o,to:t}){const{args:s}=e.decodeErrorResult({data:o,abi:[E]}),[c,i,f,u,d]=s,{ccipRead:l}=r,w=l&&typeof l?.request=="function"?l.request:A;try{if(!O(t,c))throw new x({sender:c,to:t});const p=i.includes(b)?await g({data:f,ccipRequest:w}):await w({data:f,sender:c,urls:i}),{data:R}=await e.call(r,{blockNumber:n,blockTag:a,data:e.concat([u,e.encodeAbiParameters([{type:"bytes"},{type:"bytes"}],[p,d])]),to:t});return R}catch(p){throw new P({callbackSelector:u,cause:p,data:o,extraData:d,sender:c,urls:i})}}async function A({data:r,sender:n,urls:a}){let o=new Error("An unknown error occurred.");for(let t=0;t<a.length;t++){const s=a[t],c=s.includes("{data}")?"GET":"POST",i=c==="POST"?{data:r,sender:n}:void 0,f=c==="POST"?{"Content-Type":"application/json"}:{};try{const u=await fetch(s.replace("{sender}",n.toLowerCase()).replace("{data}",r),{body:JSON.stringify(i),headers:f,method:c});let d;if(u.headers.get("Content-Type")?.startsWith("application/json")?d=(await u.json()).data:d=await u.text(),!u.ok){o=new e.HttpRequestError({body:i,details:d?.error?e.stringify(d.error):u.statusText,headers:u.headers,status:u.status,url:s});continue}if(!e.isHex(d)){o=new S({result:d,url:s});continue}return d}catch(u){o=new e.HttpRequestError({body:i,details:u.message,url:s})}}throw o}exports.ccipRequest=A;exports.offchainLookup=N;exports.offchainLookupAbiItem=E;exports.offchainLookupSignature=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BYCRbJsO.cjs");function k(r){const{abi:n,data:a}=r,o=e.slice(a,0,4),t=n.find(s=>s.type==="function"&&o===e.toFunctionSelector(e.formatAbiItem(s)));if(!t)throw new e.AbiFunctionSignatureNotFoundError(o,{docsPath:"/docs/contract/decodeFunctionData"});return{functionName:t.name,args:"inputs"in t&&t.inputs&&t.inputs.length>0?e.decodeAbiParameters(t.inputs,e.slice(a,4)):void 0}}const h="/docs/contract/encodeErrorResult";function y(r){const{abi:n,errorName:a,args:o}=r;let t=n[0];if(a){const f=e.getAbiItem({abi:n,args:o,name:a});if(!f)throw new e.AbiErrorNotFoundError(a,{docsPath:h});t=f}if(t.type!=="error")throw new e.AbiErrorNotFoundError(void 0,{docsPath:h});const s=e.formatAbiItem(t),c=e.toFunctionSelector(s);let i="0x";if(o&&o.length>0){if(!t.inputs)throw new e.AbiErrorInputsNotFoundError(t.name,{docsPath:h});i=e.encodeAbiParameters(t.inputs,o)}return e.concatHex([c,i])}const m="/docs/contract/encodeFunctionResult";function L(r){const{abi:n,functionName:a,result:o}=r;let t=n[0];if(a){const c=e.getAbiItem({abi:n,name:a});if(!c)throw new e.AbiFunctionNotFoundError(a,{docsPath:m});t=c}if(t.type!=="function")throw new e.AbiFunctionNotFoundError(void 0,{docsPath:m});if(!t.outputs)throw new e.AbiFunctionOutputsNotFoundError(t.name,{docsPath:m});const s=(()=>{if(t.outputs.length===0)return[];if(t.outputs.length===1)return[o];if(Array.isArray(o))return o;throw new e.InvalidArrayError(o)})();return e.encodeAbiParameters(t.outputs,s)}const b="x-batch-gateway:true";async function g(r){const{data:n,ccipRequest:a}=r,{args:[o]}=k({abi:e.batchGatewayAbi,data:n}),t=[],s=[];return await Promise.all(o.map(async(c,i)=>{try{s[i]=c.urls.includes(b)?await g({data:c.data,ccipRequest:a}):await a(c),t[i]=!1}catch(f){t[i]=!0,s[i]=F(f)}})),L({abi:e.batchGatewayAbi,functionName:"query",result:[t,s]})}function F(r){return r.name==="HttpRequestError"&&r.status?y({abi:e.batchGatewayAbi,errorName:"HttpError",args:[r.status,r.shortMessage]}):y({abi:[e.solidityError],errorName:"Error",args:["shortMessage"in r?r.shortMessage:r.message]})}function O(r,n){if(!e.isAddress(r,{strict:!1}))throw new e.InvalidAddressError({address:r});if(!e.isAddress(n,{strict:!1}))throw new e.InvalidAddressError({address:n});return r.toLowerCase()===n.toLowerCase()}class P extends e.BaseError{constructor({callbackSelector:n,cause:a,data:o,extraData:t,sender:s,urls:c}){super(a.shortMessage||"An error occurred while fetching for an offchain result.",{cause:a,metaMessages:[...a.metaMessages||[],a.metaMessages?.length?"":[],"Offchain Gateway Call:",c&&["  Gateway URL(s):",...c.map(i=>`    ${e.getUrl(i)}`)],`  Sender: ${s}`,`  Data: ${o}`,`  Callback selector: ${n}`,`  Extra data: ${t}`].flat(),name:"OffchainLookupError"})}}class S extends e.BaseError{constructor({result:n,url:a}){super("Offchain gateway response is malformed. Response data must be a hex value.",{metaMessages:[`Gateway URL: ${e.getUrl(a)}`,`Response: ${e.stringify(n)}`],name:"OffchainLookupResponseMalformedError"})}}class x extends e.BaseError{constructor({sender:n,to:a}){super("Reverted sender address does not match target contract address (`to`).",{metaMessages:[`Contract address: ${a}`,`OffchainLookup sender address: ${n}`],name:"OffchainLookupSenderMismatchError"})}}const M="0x556f1830",E={name:"OffchainLookup",type:"error",inputs:[{name:"sender",type:"address"},{name:"urls",type:"string[]"},{name:"callData",type:"bytes"},{name:"callbackFunction",type:"bytes4"},{name:"extraData",type:"bytes"}]};async function N(r,{blockNumber:n,blockTag:a,data:o,to:t}){const{args:s}=e.decodeErrorResult({data:o,abi:[E]}),[c,i,f,u,d]=s,{ccipRead:l}=r,w=l&&typeof l?.request=="function"?l.request:A;try{if(!O(t,c))throw new x({sender:c,to:t});const p=i.includes(b)?await g({data:f,ccipRequest:w}):await w({data:f,sender:c,urls:i}),{data:R}=await e.call(r,{blockNumber:n,blockTag:a,data:e.concat([u,e.encodeAbiParameters([{type:"bytes"},{type:"bytes"}],[p,d])]),to:t});return R}catch(p){throw new P({callbackSelector:u,cause:p,data:o,extraData:d,sender:c,urls:i})}}async function A({data:r,sender:n,urls:a}){let o=new Error("An unknown error occurred.");for(let t=0;t<a.length;t++){const s=a[t],c=s.includes("{data}")?"GET":"POST",i=c==="POST"?{data:r,sender:n}:void 0,f=c==="POST"?{"Content-Type":"application/json"}:{};try{const u=await fetch(s.replace("{sender}",n.toLowerCase()).replace("{data}",r),{body:JSON.stringify(i),headers:f,method:c});let d;if(u.headers.get("Content-Type")?.startsWith("application/json")?d=(await u.json()).data:d=await u.text(),!u.ok){o=new e.HttpRequestError({body:i,details:d?.error?e.stringify(d.error):u.statusText,headers:u.headers,status:u.status,url:s});continue}if(!e.isHex(d)){o=new S({result:d,url:s});continue}return d}catch(u){o=new e.HttpRequestError({body:i,details:u.message,url:s})}}throw o}exports.ccipRequest=A;exports.offchainLookup=N;exports.offchainLookupAbiItem=E;exports.offchainLookupSignature=M;

package/dist/{ccip-BamGZKKI.js → ccip-RHKXqG9a.js}

@@ -1,4 +1,4 @@
-import { s as b, t as x, f as F, A as I, d as C, g as M, a as E, b as D, e as w, c as G, h as A, i as T, I as H, j as m, k as v, l as R, m as k, B as y, n as N, o as P, p as j, q as B, r as U, H as L, u as _ } from "./index-C1S0YnyW.js";
+import { s as b, t as x, f as F, A as I, d as C, g as M, a as E, b as D, e as w, c as G, h as A, i as T, I as H, j as m, k as v, l as R, m as k, B as y, n as N, o as P, p as j, q as B, r as U, H as L, u as _ } from "./index-CKIs5Pi7.js";
 function J(e) {
   const { abi: s, data: a } = e, r = b(a, 0, 4), t = s.find((n) => n.type === "function" && r === x(F(n)));
   if (!t)

package/dist/components/PaymentModal.d.ts

@@ -1,4 +1,4 @@
-import type { Token, PaymentItem } from "./types";
+import type { PaymentItem, Token } from "./types";
 interface PaymentModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -11,7 +11,8 @@ interface PaymentModalProps {
     transactionHash?: string;
     isProcessing?: boolean;
     isSuccess?: boolean;
+    isError?: boolean;
     conversionRate?: number;
 }
-export declare function PaymentModal({ isOpen, onClose, totalAmount, currency, items, tokens: initialTokens, onPaymentSubmit, fee, transactionHash, isProcessing: externalIsProcessing, isSuccess: externalIsSuccess, conversionRate, }: PaymentModalProps): import("react").ReactPortal | null;
+export declare function PaymentModal({ isOpen, onClose, totalAmount, currency, items, tokens: initialTokens, onPaymentSubmit, fee, transactionHash, isProcessing: externalIsProcessing, isSuccess: externalIsSuccess, isError: externalIsError, conversionRate, }: PaymentModalProps): import("react").ReactPortal | null;
 export {};

package/dist/constants/payment.d.ts

@@ -9,30 +9,36 @@ export declare const TOKEN_METADATA: {
         readonly symbol: "ETH";
         readonly decimals: 18;
         readonly name: "Ether";
+        readonly logo: "https://cryptologos.cc/logos/ethereum-eth-logo.svg";
     };
     readonly USDC: {
         readonly symbol: "USDC";
         readonly decimals: 6;
         readonly name: "USD Coin";
+        readonly logo: "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg";
     };
     readonly USDT: {
         readonly symbol: "USDT";
         readonly decimals: 6;
         readonly name: "Tether USD";
+        readonly logo: "https://cryptologos.cc/logos/tether-usdt-logo.svg";
     };
     readonly DAI: {
         readonly symbol: "DAI";
         readonly decimals: 18;
         readonly name: "Dai Stablecoin";
+        readonly logo: "https://cryptologos.cc/logos/multi-collateral-dai-dai-logo.svg";
     };
     readonly WBTC: {
         readonly symbol: "WBTC";
         readonly decimals: 8;
         readonly name: "Wrapped Bitcoin";
+        readonly logo: "https://cryptologos.cc/logos/wrapped-bitcoin-wbtc-logo.svg";
     };
     readonly IDRX: {
         readonly symbol: "IDRX";
         readonly decimals: 18;
         readonly name: "Indonesian Rupiah";
+        readonly logo: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/info/logo.png";
     };
 };