@wheelx-widget/widget 0.1.10 → 0.1.12

package/README.md

@@ -10,6 +10,7 @@ An open-source, framework-agnostic React widget for cross-chain token swaps and
 - ⚛️ **Framework Agnostic** — Works with any React framework (Next.js, Vite, Create React App, etc.)
 - 📦 **Tree-shakeable** — ESM + CJS builds with TypeScript declarations
 - 🔌 **Configurable Default Tokens** — Set default from/to chains and tokens
+- 📱 **Deep Link Support** — Wallet app launch support in WebView (React Native) — see [Deep Link Guide](./DEEP_LINK_GUIDE.md)
 
 ## Installation
 
@@ -105,6 +106,45 @@ Customize 14 visual tokens:
 </WheelXProvider>
 ```
 
+### API Base URL
+
+Override the default WheelX API endpoint. Useful for testing against a staging or development environment.
+
+```tsx
+<WheelXProvider config={{
+  apiBaseUrl: 'https://dev-api.wheelx.fi'  // Default: 'https://api.wheelx.fi'
+}}>
+  <WheelXWidget />
+</WheelXProvider>
+```
+
+### Fixed Recipient Address (Different Address)
+
+Configure fixed recipient addresses for EVM or Solana chains. When set, the widget will:
+
+- **Display the configured address** in the To field instead of showing "Connect Wallet"
+- **Query the token balance** of the configured address
+- **Skip wallet connection** for the target chain (only the source chain wallet is required for signing)
+- **Show GetGas** when the configured address has insufficient native token balance
+
+This is useful for exchange or merchant scenarios where funds should always be sent to a specific address regardless of which wallet the user connects.
+
+**Priority order for recipient address:**
+1. Configured fixed address (`evmDifferentAddress` / `solanaDifferentAddress`)
+2. User manually entered different address (via Different Address dialog)
+3. Connected wallet address
+
+```tsx
+<WheelXProvider config={{
+  evmDifferentAddress: '0xAbCdEf1234567890...',  // Fixed recipient for EVM chains (0x format)
+  solanaDifferentAddress: '9zQX...'               // Fixed recipient for Solana chains (base58 format)
+}}>
+  <WheelXWidget />
+</WheelXProvider>
+```
+
+> **Note:** You can configure one, both, or neither. The widget will only use the relevant one based on the selected To chain.
+
 ## API Reference
 
 ### `<WheelXProvider>`
@@ -129,6 +169,10 @@ The main trading widget component.
 ```typescript
 interface WidgetConfig {
   theme?: Partial<WidgetTheme>
+
+  /** API base URL. Default 'https://api.wheelx.fi' */
+  apiBaseUrl?: string
+
   from?: {
     chains?: number[]
     defaultChainId?: number
@@ -147,6 +191,12 @@ interface WidgetConfig {
     getCurrentPathname?: () => string
   }
   dynamicEnvironmentId?: string
+  onDeepLink?: (url: string) => void  // See Deep Link Guide for WebView environments
+
+  /** Fixed recipient address for EVM chains (0x format). Takes priority over wallet address and manual different address */
+  evmDifferentAddress?: string
+  /** Fixed recipient address for Solana chains (base58 format). Takes priority over wallet address and manual different address */
+  solanaDifferentAddress?: string
 }
 ```
 
@@ -168,6 +218,8 @@ interface WidgetTheme {
   normalButtonText: string
   disabledButtonBg: string
   disabledButtonText: string
+  /** Color palette for the GetGas switch component. e.g. 'purple', 'blue', 'green'. Default: 'purple' */
+  getGasSwitchColorPalette?: string
 }
 ```
 
@@ -179,6 +231,17 @@ A demo `https://widget.wheelx.fi`
 
 This widget connects to the WheelX API at `https://api.wheelx.fi`. The API domain is not configurable.
 
+## React Native / WebView Integration
+
+If you embed the Widget into a React Native WebView, additional configuration is required to properly launch wallet apps.
+
+Please refer to: **[Mobile Wallet Launch Guide (DEEP_LINK_GUIDE.md)](./DEEP_LINK_GUIDE.md)**
+
+In short, three things are required:
+1. Add `onMessage` listener in the WebView
+2. Configure `<queries>` declaration in Android's `AndroidManifest.xml`
+3. Configure `LSApplicationQueriesSchemes` in iOS's `Info.plist`
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -0,0 +1,426 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Fraction } from 'bi-fraction';
+import * as _tanstack_react_query from '@tanstack/react-query';
+import * as zustand from 'zustand';
+
+interface TokenConfig {
+    chainId: number;
+    address: string;
+    decimals?: number;
+    symbol?: string;
+    name?: string;
+    logo?: string;
+}
+interface WidgetTheme {
+    defaultTextColor: string;
+    highlightTextColor: string;
+    weakTextColor: string;
+    defaultBgColor: string;
+    highlightBgColor: string;
+    assistBgColor: string;
+    defaultBorderColor: string;
+    highlightBorderColor: string;
+    highlightButtonBg: string;
+    highlightButtonText: string;
+    normalButtonBg: string;
+    normalButtonText: string;
+    disabledButtonBg: string;
+    disabledButtonText: string;
+    /**
+     * GetGas Switch colorPalette — accepts Chakra UI color palette names
+     * e.g. 'gray', 'red', 'orange', 'yellow', 'green', 'teal', 'cyan', 'blue', 'purple', 'pink'
+     * @default 'purple'
+     */
+    getGasSwitchColorPalette?: string;
+}
+interface WidgetConfig {
+    theme?: Partial<WidgetTheme>;
+    /** API base URL. Default 'https://api.wheelx.fi' */
+    apiBaseUrl?: string;
+    from?: {
+        chains?: number[];
+        defaultChainId?: number;
+        chainTokens?: Record<number, TokenConfig[]>;
+        defaultToken?: {
+            chainId: number;
+            address: string;
+        };
+    };
+    to?: {
+        chains?: number[];
+        defaultChainId?: number;
+        chainTokens?: Record<number, TokenConfig[]>;
+        defaultToken?: {
+            chainId: number;
+            address: string;
+        };
+    };
+    routerCallback?: {
+        onPathnameChange?: (pathname: string) => void;
+        onRouteLeave?: () => void;
+        getCurrentPathname?: () => string;
+    };
+    dynamicEnvironmentId?: string;
+    /**
+     * 深度链接处理器。当 widget 在 WebView 中运行时，用于将钱包的 deep link URL
+     * 传递给宿主 App 处理（如通过 Linking.openURL 打开钱包 App）。
+     *
+     * 如果不提供此回调，widget 会自动尝试通过 ReactNativeWebView.postMessage
+     * 或自定义 DOM 事件进行通信。
+     */
+    onDeepLink?: (url: string) => void;
+    /** EVM链固定收款异地址（0x格式）。配置后，to网络为EVM链时优先使用此地址 */
+    evmDifferentAddress?: string;
+    /** Solana链固定收款异地址（base58格式）。配置后，to网络为Solana链时优先使用此地址 */
+    solanaDifferentAddress?: string;
+}
+
+interface WheelXProviderProps {
+    config?: WidgetConfig;
+    children: React.ReactNode;
+}
+declare const WheelXProvider: React.FC<WheelXProviderProps>;
+
+interface routesItem {
+    name: string;
+    logo: string;
+}
+interface TxInfoProps {
+    priceImpact: {
+        bridgeFee: string;
+        dstGasFee: string;
+        swapFee: string;
+        before_discount_fee: string;
+        discount_percentage: string | undefined;
+    };
+    slippage: number;
+    minReceive: string;
+    estimatedTime: number;
+    recipient: string;
+    router: string;
+    points: number | string;
+    amountOut: string;
+    fromTokenInUsd?: Fraction;
+    router_type: string | null | undefined;
+    routes?: routesItem[] | undefined;
+}
+
+interface RefetchQuoteParams {
+    slippageValue?: string;
+    isAutoSlippage?: boolean;
+}
+
+interface QuoteRequest {
+    from_chain: number;
+    to_chain: number;
+    from_token: string;
+    to_token: string;
+    from_address: string;
+    to_address: string;
+    amount: string;
+    slippage?: number;
+    to_platform_id: number;
+    sponsor_gas?: boolean;
+}
+type QuoteErrorType = 'business_error' | 'http_error' | 'network_error' | 'timeout' | 'unknown_error';
+interface QuoteMutationError extends Error {
+    httpStatus?: number;
+    hasResponseBody?: boolean;
+    errorType?: QuoteErrorType;
+    detail?: string;
+    code?: string;
+}
+
+type Tag = 'pin' | 'top' | 'cert' | 'native';
+type FeeLevel = 'Group1' | 'Group2' | null;
+interface TokenInfo {
+    name: string;
+    address: `0x${string}`;
+    chain_id: number;
+    decimals: number;
+    symbol: string;
+    logo: string;
+    tags: Tag[];
+    support_kline?: boolean;
+    token_type?: string;
+    categories?: string[];
+    chain_icon?: string;
+    platform_id?: number;
+    platform_type?: string[];
+    isSolana?: boolean;
+    fee_level?: FeeLevel;
+}
+interface TokenInfoWithBalance extends TokenInfo {
+    balance?: string;
+    usdPrice?: string;
+}
+type ChainInfo = {
+    name: string;
+    rpc_url: string;
+    rpc_fallback: string[];
+    chain_icon: string;
+    chain_id: number;
+    eth_token: `0x${string}`;
+    support_kline: boolean;
+    is_popular: boolean;
+    outbound: boolean;
+    inbound: boolean;
+    is_testnet?: boolean;
+    platform_id?: number;
+    support_sponsor_gas?: boolean;
+};
+interface Prediction {
+    chains: ChainInfo[];
+    tokens: TokenInfo[];
+}
+interface SlippagePolicy {
+    bridge: boolean;
+    from_fee_level: FeeLevel;
+    to_fee_level: FeeLevel;
+    default_slippage: number;
+    min_slippage: number;
+    max_slippage: number;
+    refresh_interval: number;
+    /** Number of quote rounds after which to show a transaction-failure warning. Defaults to 2. */
+    notice_rounds?: number;
+}
+interface ChainsAndTokens {
+    chains: ChainInfo[];
+    tokens: TokenInfo[];
+    slippage_policies?: SlippagePolicy[];
+    deposit_platforms: {
+        prediction: Prediction;
+    };
+}
+declare function getChainsAndTokens(): Promise<ChainsAndTokens>;
+declare const useChainsAndTokens: (enabled?: boolean) => _tanstack_react_query.UseQueryResult<ChainsAndTokens, Error>;
+declare function mergeTokensWithCompositeKey(arr1: TokenInfoWithBalance[], arr2: TokenInfoWithBalance[]): TokenInfoWithBalance[];
+
+type WheelXWidgetProps = {
+    config?: WidgetConfig;
+};
+
+interface QuoteInfo {
+    isFetching: boolean;
+    error: string | null;
+    data: `0x${string}` | null;
+    contractAddress: `0x${string}` | null;
+    info: TxInfoProps | null;
+    request_id?: string | null;
+    gas?: bigint | null;
+    maxFeePerGas?: bigint | undefined;
+    maxPriorityFeePerGas?: bigint | undefined;
+    backApprove?: boolean;
+    router_type?: string | null;
+    tx_value?: string | null;
+    points?: number | 0 | string;
+    quote_message?: string | null;
+    routes?: routesItem[];
+    solanaTxMessage?: string;
+    solanaTxSender?: string;
+}
+interface QuoteRequestWithToTokenDecimals extends QuoteRequest {
+    toTokenDecimals: number;
+    isAutoRefetch?: boolean;
+    affiliation?: string | null;
+}
+declare const initialQuoteInfo: QuoteInfo;
+declare const WheelXWidget: ({ config }: WheelXWidgetProps) => react_jsx_runtime.JSX.Element;
+
+declare const defaultTheme: WidgetTheme;
+
+interface WidgetThemeContextValue {
+    theme: WidgetTheme;
+}
+declare const useWidgetTheme: () => WidgetThemeContextValue;
+interface WidgetThemeProviderProps {
+    theme?: Partial<WidgetTheme>;
+    children: React.ReactNode;
+}
+declare const WidgetThemeProvider: React.FC<WidgetThemeProviderProps>;
+
+interface SwapState {
+    fromTokenInfo: TokenInfo;
+    toTokenInfo: TokenInfo;
+    fromAmount: string;
+    toAmount: string;
+    slippage?: string;
+    fromAmountToUsd?: string | null;
+    toAmountToUsd?: string | null;
+    isShortLink?: boolean;
+    shortLink?: string;
+    transactionType?: string;
+    autoSlippage?: number | undefined;
+    tradeType?: string | null;
+}
+interface SwapAndBridgeContextStore extends SwapState {
+    setFromTokenInfo: (tokenInfo: TokenInfo) => void;
+    setToTokenInfo: (tokenInfo: TokenInfo) => void;
+    setFromAmount: (amount: string) => void;
+    setToAmount: (amount: string) => void;
+    switchTokens: () => void;
+    resetState: () => void;
+    setAmounts: (fromAmount: string, toAmount: string) => void;
+    resetAmounts: () => void;
+    setSlippage: (slippage?: string) => void;
+    setFromAmountToUsd: (value: string | null) => void;
+    setToAmountToUsd: (value: string | null) => void;
+    setIsShortLink: (value: boolean) => void;
+    setShortLink: (value: string) => void;
+    setTransactionType: (value: string) => void;
+    setAutoSlippage: (value: number | undefined) => void;
+}
+declare const useSwapAndBridgeContextStore: zustand.UseBoundStore<zustand.StoreApi<SwapAndBridgeContextStore>>;
+declare const useInitSwapAndBridgeState: (config?: WidgetConfig) => void;
+declare const useResetSwapAndBridgeState: () => void;
+
+interface TxStateContextStore {
+    fromTxHash: `0x${string}` | null;
+    toTxHash: `0x${string}` | null;
+    setFromTxHash: (fromTxHash: `0x${string}` | null) => void;
+    setToTxHash: (toTxHash: `0x${string}` | null) => void;
+    resetTxState: () => void;
+    startTrading: boolean;
+    setStartTrading: (startTrading: boolean) => void;
+    userCancelsTransaction: boolean;
+    setUserCancelsTransaction: (userCancelsTransaction: boolean) => void;
+    fromValue?: string | null;
+    setFromValue?: (fromValue: string | null) => void;
+    tryAgain?: boolean;
+    setTryAgain: (tryAgain: boolean) => void;
+    solanaFromTxHash: string | null;
+    setSolanaFromTxHash: (hash: string | null) => void;
+    isSolanaTransaction: boolean;
+    setIsSolanaTransaction: (isSolana: boolean) => void;
+}
+declare const useTxStateContextStore: zustand.UseBoundStore<zustand.StoreApi<TxStateContextStore>>;
+
+declare const useGuardChain: (callback: () => void, requiredChainId: number) => {
+    isSwitching: boolean;
+    sendTx: () => Promise<void>;
+};
+
+declare const useRefreshLoading: () => {
+    isLoading: boolean;
+    startLoading: () => void;
+};
+
+interface Props {
+    chainId: number;
+    tokenAddress?: `0x${string}`;
+    connectAddress?: `0x${string}`;
+}
+interface BalanceResult {
+    decimals: number;
+    formatted: string;
+    symbol: string;
+    value: bigint;
+}
+declare const useTokenBalance: ({ chainId, tokenAddress, connectAddress }: Props) => BalanceResult | undefined;
+
+interface ChainsStore {
+    chains: ChainInfo[] | null;
+    setChains: (chains: ChainInfo[]) => void;
+    isSelectPredictionChain: boolean;
+    setIsSelectPredictionChain: (isSelectPredictionChain: boolean) => void;
+    slippagePolicies: SlippagePolicy[] | null;
+    setSlippagePolicies: (policies: SlippagePolicy[]) => void;
+}
+interface TokenStore {
+    tokens: TokenInfo[] | null;
+    setTokens: (tokens: TokenInfo[]) => void;
+}
+declare const useChainsStore: zustand.UseBoundStore<zustand.StoreApi<ChainsStore>>;
+declare const useTokensStore: zustand.UseBoundStore<zustand.StoreApi<TokenStore>>;
+
+/**
+ * Hook to get EVM wallet address with fallback to saved address
+ * This ensures that when a user first connects an EVM wallet (e.g., OKX),
+ * then connects a Solana wallet (e.g., MetaMask), the EVM address remains
+ * consistent with the first connected wallet.
+ *
+ * @returns The EVM wallet address (saved address or current wagmi address)
+ */
+declare const useEvmAddress: () => `0x${string}` | undefined;
+
+/**
+ * Platform detection utilities for WebView environments.
+ * Used to detect and intercept deep links when the widget runs inside
+ * a WebView (e.g., React Native, Android WebView, WKWebView).
+ */
+/** Check if running inside a React Native WebView */
+declare const isReactNativeWebView: () => boolean;
+/** Check if running in any WebView (Android/iOS) */
+declare const isWebView: () => boolean;
+/** Check if running on mobile device */
+declare const isMobileDevice: () => boolean;
+/**
+ * Check if we should intercept deep links.
+ *
+ * We ONLY intercept in React Native WebView because that's the only WebView
+ * environment where we have a reliable forwarding mechanism (postMessage).
+ *
+ * Regular browsers (Chrome, Safari) handle deep links natively — we must not
+ * interfere there. Generic Android/iOS WebViews may or may not handle deep
+ * links depending on host app configuration, so we leave them alone.
+ */
+declare const shouldInterceptDeepLinks: () => boolean;
+/** Check if URL is a deep link (non-http/https scheme) */
+declare const isDeepLinkUrl: (url: string) => boolean;
+/**
+ * Known wallet universal link (https) domains.
+ * Wallet libraries (e.g. Dynamic SDK) may prefer universal links over
+ * custom URL schemes. These https:// URLs look like normal web pages but
+ * are designed to open wallet apps via OS-level app link resolution.
+ * In WebView environments, we must intercept them too.
+ */
+declare const KNOWN_WALLET_UNIVERSAL_LINKS: Record<string, string>;
+/**
+ * Convert a wallet universal link to its corresponding deep-link scheme
+ * so that `Linking.openURL()` on React Native opens the wallet app
+ * directly instead of routing through the system browser.
+ *
+ * For example:
+ *   https://phantom.app/ul/v1/connect?...  →  phantom://ul/v1/connect?...
+ */
+declare const convertToDeepLink: (url: string) => string;
+/**
+ * Check if URL is a deep link (non-http/https scheme) OR a known wallet
+ * universal link that should be intercepted and forwarded to native.
+ */
+declare const isWalletRelatedUrl: (url: string) => boolean;
+
+interface WalletStore {
+    isEthWalletConnected: boolean;
+    setIsEthWalletConnected: (isEthWalletConnected: boolean) => void;
+    isSolanaWalletConnected: boolean;
+    setIsSolanaWalletConnected: (isSolanaWalletConnected: boolean) => void;
+    totalConnectedWallets: number;
+    setTotalConnectedWallets: () => void;
+    totalWallets: number;
+    solanaWalletAddress: string | null;
+    setSolanaWalletAddress: (address: string | null) => void;
+    evmWalletAddress: string | null;
+    evmWalletConnectorId: string | null;
+    setEvmWalletInfo: (address: string | null, connectorId: string | null) => void;
+    isEvmWalletMetamask: boolean;
+    setIsEvmWalletMetamask: (isEvmWalletMetamask: boolean) => void;
+    isLoggingOut: boolean;
+    setIsLoggingOut: (isLoggingOut: boolean) => void;
+    lastDisconnectTimestamp: number;
+    setLastDisconnectTimestamp: (timestamp: number) => void;
+}
+declare const useWalletConnectedStore: zustand.UseBoundStore<zustand.StoreApi<WalletStore>>;
+
+interface DifferentAddressProp {
+    differentAddress: `0x${string}` | undefined | string;
+    setDifferentAddress: (address: `0x${string}` | undefined | string) => void;
+    isDepositPlatformToken: boolean;
+    setIsDepositPlatformToken: (isDepositPlatformToken: boolean) => void;
+}
+declare const useDifferentAddressStore: zustand.UseBoundStore<zustand.StoreApi<DifferentAddressProp>>;
+
+declare const useSyncWalletConnectedStore: () => void;
+
+export { type ChainInfo, type ChainsAndTokens, type FeeLevel, KNOWN_WALLET_UNIVERSAL_LINKS, type QuoteErrorType, type QuoteInfo, type QuoteMutationError, type QuoteRequest, type QuoteRequestWithToTokenDecimals, type RefetchQuoteParams, type SlippagePolicy, type TokenConfig, type TokenInfo, type TxInfoProps, WheelXProvider, type WheelXProviderProps, WheelXWidget, type WheelXWidgetProps, type WidgetConfig, type WidgetTheme, WidgetThemeProvider, convertToDeepLink, defaultTheme, getChainsAndTokens, initialQuoteInfo, isDeepLinkUrl, isMobileDevice, isReactNativeWebView, isWalletRelatedUrl, isWebView, mergeTokensWithCompositeKey, shouldInterceptDeepLinks, useChainsAndTokens, useChainsStore, useDifferentAddressStore, useEvmAddress, useGuardChain, useInitSwapAndBridgeState, useRefreshLoading, useResetSwapAndBridgeState, useSwapAndBridgeContextStore, useSyncWalletConnectedStore, useTokenBalance, useTokensStore, useTxStateContextStore, useWalletConnectedStore, useWidgetTheme };