@dj-test/payment-sdk 1.0.7 → 1.0.8

package/README.md

@@ -222,13 +222,73 @@ function AutoDetectPayment({ depositAddress }: { depositAddress: string }) {
 
 ### EVM Wallets
 - **Injected Wallets**: MetaMask, Trust Wallet, Brave Wallet
-- **WalletConnect**: 200+ 모바일 지갑
-- **Coinbase Wallet**: Coinbase 공식 지갑
+- **Desktop**: Browser extensions (MetaMask, etc.)
+- **Mobile Web**: In-app browsers + deep links (MetaMask app)
 
 ### Tron Wallets
 - **TronLink**: Official Tron wallet extension
 - **TronLink Pro**: Mobile wallet with WalletConnect support
 
+## Mobile Web Support
+
+SDK follows **Daimo Pay approach** for mobile web:
+- ✅ **In-app browser detection**: Auto-detects MetaMask in-app browser
+- ✅ **Deep link support**: Opens MetaMask app from regular mobile browsers
+- ✅ **No WalletConnect needed**: Lightweight solution without WC dependency
+
+### Mobile Web Flow
+
+**Option 1: MetaMask In-App Browser** (Recommended)
+```
+User opens your site in MetaMask app browser
+→ SDK detects window.ethereum
+→ Direct wallet connection works
+```
+
+**Option 2: Regular Mobile Browser**
+```tsx
+import { getConnectionStrategy, openMetaMaskDeepLink } from 'payment-sdk';
+
+function ConnectButton() {
+  const strategy = getConnectionStrategy();
+
+  const handleConnect = () => {
+    if (strategy.type === 'deeplink') {
+      // Opens MetaMask app
+      openMetaMaskDeepLink();
+    } else if (strategy.type === 'injected') {
+      // Use wagmi connect
+      connect();
+    }
+  };
+
+  return <button onClick={handleConnect}>{strategy.message}</button>;
+}
+```
+
+### Mobile Utilities
+
+```tsx
+import {
+  isMobile,
+  isMetaMaskBrowser,
+  isMetaMaskAvailable,
+  shouldUseDeepLink,
+} from 'payment-sdk';
+
+// Check if on mobile device
+const mobile = isMobile();
+
+// Check if in MetaMask in-app browser
+const inMetaMask = isMetaMaskBrowser();
+
+// Check if MetaMask is available (extension or in-app)
+const hasMetaMask = isMetaMaskAvailable();
+
+// Determine if should use deep link
+const useDeepLink = shouldUseDeepLink();
+```
+
 ## API Reference
 
 ### PaymentProvider Props

package/dist/index.d.mts

@@ -1640,7 +1640,16 @@ declare const supportedChains: ({
 })[];
 /**
  * Create wagmi config following Daimo Pay approach
- * Uses injected connectors + deep links, no WalletConnect dependency
+ * Uses injected connector + deep links, no WalletConnect dependency
+ *
+ * Mobile web flow:
+ * 1. User clicks "Connect Wallet" in mobile browser
+ * 2. If in MetaMask in-app browser -> injected connector detects window.ethereum
+ * 3. If in regular browser -> Use deep link to open MetaMask app (handled by UI layer)
+ *
+ * Desktop flow:
+ * 1. MetaMask extension -> injected connector detects window.ethereum
+ * 2. Other wallets -> injected connector detects their providers
  */
 declare const createWagmiConfig: () => Config$1;
 declare const getEvmChainById: (chainId: number) => {
@@ -3904,4 +3913,41 @@ declare function generatePaymentQRUrl(publicOrderId: string): string;
  */
 declare function getPaymentDomain(): string;
 
-export { APIError, API_ENDPOINTS, ChainType, ChainType as ChainTypes, type CoinChain, type CoinChainResponse, type ConnectorInfo, type CreateOrderParams, DEFAULT_TIMEOUT, ENVIRONMENT_URLS, ERROR_CODES, EvmWalletAdapter, type IWalletAdapter, MIN_WITHDRAWAL_AMOUNT, ORDER_EXPIRY_MINUTES, type Order, type OrderCreateRequest, type OrderDetailResponse, OrderPayment, type OrderResponse, OrderStatus, PAYMENT_DOMAINS, PayWithAddress, type PayWithAddressParams, PayWithWallet, type PayWithWalletParams, PaymentButton, PaymentContext, PaymentFlow, type PaymentMethod$1 as PaymentMethod, type PaymentMethodType, PaymentModal, type PaymentMode, PaymentProvider, PaymentQRCode, type PaymentQRCodeProps, PaymentQRModal, type PaymentQRModalProps, type PaymentSession, type PaymentStatus, type PaymentTransaction, type PaymentTransactionParams, type SDKConfig, type SDKContext, SDKError, SDK_VERSION, SUPPORTED_CHAINS, type SupportedChain, TRON_NETWORKS, type TransactionResult, type TransactionResultInfo, TronWalletAdapter, type UseWalletAdapterOptions, ValidationError, type ValidationResult, WalletAdapterFactory, type WalletBalance, type WalletConnectionInfo, type WalletInfo, WalletProvider, WalletType, WalletType as WalletTypes, type WebhookPayload, type WithdrawalParams, coins as coinsAPI, config, createWagmiConfig, detectChainType, generatePaymentQRUrl, getChainById, getErrorMessage, getEvmChainById, getPaymentDomain, handleAPIError, isEvmAddress, isTronAddress, isValidAddress, orders as ordersAPI, supportedChains, supportedEvmChains, useOrder, usePayment, useWallet, useWalletAdapter, useWalletContext, validation };
+/**
+ * Mobile wallet utilities for deep links and mobile detection
+ * Following Daimo Pay approach for mobile web wallet connections
+ */
+/**
+ * Detect if user is on mobile device
+ */
+declare const isMobile: () => boolean;
+/**
+ * Detect if user is in MetaMask in-app browser
+ */
+declare const isMetaMaskBrowser: () => boolean;
+/**
+ * Detect if MetaMask is available (extension or in-app browser)
+ */
+declare const isMetaMaskAvailable: () => boolean;
+/**
+ * Open MetaMask mobile app via deep link
+ * Used when user is on mobile browser but not in MetaMask in-app browser
+ *
+ * @param returnUrl - The URL to return to after wallet connection (optional)
+ */
+declare const openMetaMaskDeepLink: (returnUrl?: string) => void;
+/**
+ * Get connection strategy based on environment
+ * Returns the recommended action for connecting wallet
+ */
+declare const getConnectionStrategy: () => {
+    type: "injected" | "deeplink" | "unavailable";
+    message: string;
+    action?: () => void;
+};
+/**
+ * Check if we should use deep link for wallet connection
+ */
+declare const shouldUseDeepLink: () => boolean;
+
+export { APIError, API_ENDPOINTS, ChainType, ChainType as ChainTypes, type CoinChain, type CoinChainResponse, type ConnectorInfo, type CreateOrderParams, DEFAULT_TIMEOUT, ENVIRONMENT_URLS, ERROR_CODES, EvmWalletAdapter, type IWalletAdapter, MIN_WITHDRAWAL_AMOUNT, ORDER_EXPIRY_MINUTES, type Order, type OrderCreateRequest, type OrderDetailResponse, OrderPayment, type OrderResponse, OrderStatus, PAYMENT_DOMAINS, PayWithAddress, type PayWithAddressParams, PayWithWallet, type PayWithWalletParams, PaymentButton, PaymentContext, PaymentFlow, type PaymentMethod$1 as PaymentMethod, type PaymentMethodType, PaymentModal, type PaymentMode, PaymentProvider, PaymentQRCode, type PaymentQRCodeProps, PaymentQRModal, type PaymentQRModalProps, type PaymentSession, type PaymentStatus, type PaymentTransaction, type PaymentTransactionParams, type SDKConfig, type SDKContext, SDKError, SDK_VERSION, SUPPORTED_CHAINS, type SupportedChain, TRON_NETWORKS, type TransactionResult, type TransactionResultInfo, TronWalletAdapter, type UseWalletAdapterOptions, ValidationError, type ValidationResult, WalletAdapterFactory, type WalletBalance, type WalletConnectionInfo, type WalletInfo, WalletProvider, WalletType, WalletType as WalletTypes, type WebhookPayload, type WithdrawalParams, coins as coinsAPI, config, createWagmiConfig, detectChainType, generatePaymentQRUrl, getChainById, getConnectionStrategy, getErrorMessage, getEvmChainById, getPaymentDomain, handleAPIError, isEvmAddress, isMetaMaskAvailable, isMetaMaskBrowser, isMobile, isTronAddress, isValidAddress, openMetaMaskDeepLink, orders as ordersAPI, shouldUseDeepLink, supportedChains, supportedEvmChains, useOrder, usePayment, useWallet, useWalletAdapter, useWalletContext, validation };

package/dist/index.d.ts

@@ -1640,7 +1640,16 @@ declare const supportedChains: ({
 })[];
 /**
  * Create wagmi config following Daimo Pay approach
- * Uses injected connectors + deep links, no WalletConnect dependency
+ * Uses injected connector + deep links, no WalletConnect dependency
+ *
+ * Mobile web flow:
+ * 1. User clicks "Connect Wallet" in mobile browser
+ * 2. If in MetaMask in-app browser -> injected connector detects window.ethereum
+ * 3. If in regular browser -> Use deep link to open MetaMask app (handled by UI layer)
+ *
+ * Desktop flow:
+ * 1. MetaMask extension -> injected connector detects window.ethereum
+ * 2. Other wallets -> injected connector detects their providers
  */
 declare const createWagmiConfig: () => Config$1;
 declare const getEvmChainById: (chainId: number) => {
@@ -3904,4 +3913,41 @@ declare function generatePaymentQRUrl(publicOrderId: string): string;
  */
 declare function getPaymentDomain(): string;
 
-export { APIError, API_ENDPOINTS, ChainType, ChainType as ChainTypes, type CoinChain, type CoinChainResponse, type ConnectorInfo, type CreateOrderParams, DEFAULT_TIMEOUT, ENVIRONMENT_URLS, ERROR_CODES, EvmWalletAdapter, type IWalletAdapter, MIN_WITHDRAWAL_AMOUNT, ORDER_EXPIRY_MINUTES, type Order, type OrderCreateRequest, type OrderDetailResponse, OrderPayment, type OrderResponse, OrderStatus, PAYMENT_DOMAINS, PayWithAddress, type PayWithAddressParams, PayWithWallet, type PayWithWalletParams, PaymentButton, PaymentContext, PaymentFlow, type PaymentMethod$1 as PaymentMethod, type PaymentMethodType, PaymentModal, type PaymentMode, PaymentProvider, PaymentQRCode, type PaymentQRCodeProps, PaymentQRModal, type PaymentQRModalProps, type PaymentSession, type PaymentStatus, type PaymentTransaction, type PaymentTransactionParams, type SDKConfig, type SDKContext, SDKError, SDK_VERSION, SUPPORTED_CHAINS, type SupportedChain, TRON_NETWORKS, type TransactionResult, type TransactionResultInfo, TronWalletAdapter, type UseWalletAdapterOptions, ValidationError, type ValidationResult, WalletAdapterFactory, type WalletBalance, type WalletConnectionInfo, type WalletInfo, WalletProvider, WalletType, WalletType as WalletTypes, type WebhookPayload, type WithdrawalParams, coins as coinsAPI, config, createWagmiConfig, detectChainType, generatePaymentQRUrl, getChainById, getErrorMessage, getEvmChainById, getPaymentDomain, handleAPIError, isEvmAddress, isTronAddress, isValidAddress, orders as ordersAPI, supportedChains, supportedEvmChains, useOrder, usePayment, useWallet, useWalletAdapter, useWalletContext, validation };
+/**
+ * Mobile wallet utilities for deep links and mobile detection
+ * Following Daimo Pay approach for mobile web wallet connections
+ */
+/**
+ * Detect if user is on mobile device
+ */
+declare const isMobile: () => boolean;
+/**
+ * Detect if user is in MetaMask in-app browser
+ */
+declare const isMetaMaskBrowser: () => boolean;
+/**
+ * Detect if MetaMask is available (extension or in-app browser)
+ */
+declare const isMetaMaskAvailable: () => boolean;
+/**
+ * Open MetaMask mobile app via deep link
+ * Used when user is on mobile browser but not in MetaMask in-app browser
+ *
+ * @param returnUrl - The URL to return to after wallet connection (optional)
+ */
+declare const openMetaMaskDeepLink: (returnUrl?: string) => void;
+/**
+ * Get connection strategy based on environment
+ * Returns the recommended action for connecting wallet
+ */
+declare const getConnectionStrategy: () => {
+    type: "injected" | "deeplink" | "unavailable";
+    message: string;
+    action?: () => void;
+};
+/**
+ * Check if we should use deep link for wallet connection
+ */
+declare const shouldUseDeepLink: () => boolean;
+
+export { APIError, API_ENDPOINTS, ChainType, ChainType as ChainTypes, type CoinChain, type CoinChainResponse, type ConnectorInfo, type CreateOrderParams, DEFAULT_TIMEOUT, ENVIRONMENT_URLS, ERROR_CODES, EvmWalletAdapter, type IWalletAdapter, MIN_WITHDRAWAL_AMOUNT, ORDER_EXPIRY_MINUTES, type Order, type OrderCreateRequest, type OrderDetailResponse, OrderPayment, type OrderResponse, OrderStatus, PAYMENT_DOMAINS, PayWithAddress, type PayWithAddressParams, PayWithWallet, type PayWithWalletParams, PaymentButton, PaymentContext, PaymentFlow, type PaymentMethod$1 as PaymentMethod, type PaymentMethodType, PaymentModal, type PaymentMode, PaymentProvider, PaymentQRCode, type PaymentQRCodeProps, PaymentQRModal, type PaymentQRModalProps, type PaymentSession, type PaymentStatus, type PaymentTransaction, type PaymentTransactionParams, type SDKConfig, type SDKContext, SDKError, SDK_VERSION, SUPPORTED_CHAINS, type SupportedChain, TRON_NETWORKS, type TransactionResult, type TransactionResultInfo, TronWalletAdapter, type UseWalletAdapterOptions, ValidationError, type ValidationResult, WalletAdapterFactory, type WalletBalance, type WalletConnectionInfo, type WalletInfo, WalletProvider, WalletType, WalletType as WalletTypes, type WebhookPayload, type WithdrawalParams, coins as coinsAPI, config, createWagmiConfig, detectChainType, generatePaymentQRUrl, getChainById, getConnectionStrategy, getErrorMessage, getEvmChainById, getPaymentDomain, handleAPIError, isEvmAddress, isMetaMaskAvailable, isMetaMaskBrowser, isMobile, isTronAddress, isValidAddress, openMetaMaskDeepLink, orders as ordersAPI, shouldUseDeepLink, supportedChains, supportedEvmChains, useOrder, usePayment, useWallet, useWalletAdapter, useWalletContext, validation };

package/dist/index.js

@@ -62,14 +62,20 @@ __export(index_exports, {
   detectChainType: () => detectChainType,
   generatePaymentQRUrl: () => generatePaymentQRUrl,
   getChainById: () => getChainById,
+  getConnectionStrategy: () => getConnectionStrategy,
   getErrorMessage: () => getErrorMessage,
   getEvmChainById: () => getEvmChainById,
   getPaymentDomain: () => getPaymentDomain,
   handleAPIError: () => handleAPIError,
   isEvmAddress: () => isEvmAddress,
+  isMetaMaskAvailable: () => isMetaMaskAvailable,
+  isMetaMaskBrowser: () => isMetaMaskBrowser,
+  isMobile: () => isMobile,
   isTronAddress: () => isTronAddress,
   isValidAddress: () => isValidAddress,
+  openMetaMaskDeepLink: () => openMetaMaskDeepLink,
   ordersAPI: () => orders_exports,
+  shouldUseDeepLink: () => shouldUseDeepLink,
   supportedChains: () => supportedChains,
   supportedEvmChains: () => supportedEvmChains,
   useOrder: () => useOrder,
@@ -170,7 +176,9 @@ var createWagmiConfig = () => {
   return (0, import_wagmi.createConfig)({
     chains: [import_chains.mainnet, import_chains.sepolia, import_chains.polygon, import_chains.polygonAmoy, import_chains.base, import_chains.baseSepolia],
     connectors: [
-      // Injected connector - primary method for both web and mobile in-app browsers
+      // Injected connector - works for all wallets (MetaMask, Trust Wallet, etc.)
+      // Mobile: detects in-app browser's window.ethereum
+      // Desktop: detects browser extension's window.ethereum
       (0, import_connectors.injected)({
         target() {
           return {
@@ -179,17 +187,6 @@ var createWagmiConfig = () => {
             provider: typeof window !== "undefined" ? window.ethereum : void 0
           };
         }
-      }),
-      // MetaMask specific connector
-      (0, import_connectors.metaMask)({
-        dappMetadata: {
-          name: "Payment SDK",
-          url: typeof window !== "undefined" ? window.location.origin : ""
-        }
-      }),
-      // Coinbase Wallet
-      (0, import_connectors.coinbaseWallet)({
-        appName: "Payment SDK"
       })
     ],
     transports: {
@@ -3840,6 +3837,52 @@ var useWallet = () => {
     // EVM만 체크
   };
 };
+
+// src/utils/mobile.ts
+var isMobile = () => {
+  if (typeof window === "undefined") return false;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+};
+var isMetaMaskBrowser = () => {
+  if (typeof window === "undefined") return false;
+  const { ethereum } = window;
+  return Boolean(ethereum && ethereum.isMetaMask);
+};
+var isMetaMaskAvailable = () => {
+  if (typeof window === "undefined") return false;
+  const { ethereum } = window;
+  return Boolean(ethereum && ethereum.isMetaMask);
+};
+var openMetaMaskDeepLink = (returnUrl) => {
+  if (typeof window === "undefined") return;
+  const url = returnUrl || window.location.href;
+  const deepLink = `https://metamask.app.link/dapp/${url.replace(/^https?:\/\//, "")}`;
+  window.location.href = deepLink;
+};
+var getConnectionStrategy = () => {
+  if (!isMobile() || isMetaMaskBrowser()) {
+    if (isMetaMaskAvailable()) {
+      return {
+        type: "injected",
+        message: "Connect with browser wallet"
+      };
+    }
+    return {
+      type: "unavailable",
+      message: "Please install MetaMask extension"
+    };
+  }
+  return {
+    type: "deeplink",
+    message: "Open in MetaMask app",
+    action: () => openMetaMaskDeepLink()
+  };
+};
+var shouldUseDeepLink = () => {
+  return isMobile() && !isMetaMaskBrowser();
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   API_ENDPOINTS,
@@ -3874,14 +3917,20 @@ var useWallet = () => {
   detectChainType,
   generatePaymentQRUrl,
   getChainById,
+  getConnectionStrategy,
   getErrorMessage,
   getEvmChainById,
   getPaymentDomain,
   handleAPIError,
   isEvmAddress,
+  isMetaMaskAvailable,
+  isMetaMaskBrowser,
+  isMobile,
   isTronAddress,
   isValidAddress,
+  openMetaMaskDeepLink,
   ordersAPI,
+  shouldUseDeepLink,
   supportedChains,
   supportedEvmChains,
   useOrder,

package/dist/index.mjs

@@ -86,7 +86,7 @@ import {
   base,
   baseSepolia
 } from "wagmi/chains";
-import { injected, coinbaseWallet, metaMask } from "@wagmi/connectors";
+import { injected } from "@wagmi/connectors";
 var supportedEvmChains = [
   mainnet,
   sepolia,
@@ -100,7 +100,9 @@ var createWagmiConfig = () => {
   return createConfig({
     chains: [mainnet, sepolia, polygon, polygonAmoy, base, baseSepolia],
     connectors: [
-      // Injected connector - primary method for both web and mobile in-app browsers
+      // Injected connector - works for all wallets (MetaMask, Trust Wallet, etc.)
+      // Mobile: detects in-app browser's window.ethereum
+      // Desktop: detects browser extension's window.ethereum
       injected({
         target() {
           return {
@@ -109,17 +111,6 @@ var createWagmiConfig = () => {
             provider: typeof window !== "undefined" ? window.ethereum : void 0
           };
         }
-      }),
-      // MetaMask specific connector
-      metaMask({
-        dappMetadata: {
-          name: "Payment SDK",
-          url: typeof window !== "undefined" ? window.location.origin : ""
-        }
-      }),
-      // Coinbase Wallet
-      coinbaseWallet({
-        appName: "Payment SDK"
       })
     ],
     transports: {
@@ -3781,6 +3772,52 @@ var useWallet = () => {
     // EVM만 체크
   };
 };
+
+// src/utils/mobile.ts
+var isMobile = () => {
+  if (typeof window === "undefined") return false;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+};
+var isMetaMaskBrowser = () => {
+  if (typeof window === "undefined") return false;
+  const { ethereum } = window;
+  return Boolean(ethereum && ethereum.isMetaMask);
+};
+var isMetaMaskAvailable = () => {
+  if (typeof window === "undefined") return false;
+  const { ethereum } = window;
+  return Boolean(ethereum && ethereum.isMetaMask);
+};
+var openMetaMaskDeepLink = (returnUrl) => {
+  if (typeof window === "undefined") return;
+  const url = returnUrl || window.location.href;
+  const deepLink = `https://metamask.app.link/dapp/${url.replace(/^https?:\/\//, "")}`;
+  window.location.href = deepLink;
+};
+var getConnectionStrategy = () => {
+  if (!isMobile() || isMetaMaskBrowser()) {
+    if (isMetaMaskAvailable()) {
+      return {
+        type: "injected",
+        message: "Connect with browser wallet"
+      };
+    }
+    return {
+      type: "unavailable",
+      message: "Please install MetaMask extension"
+    };
+  }
+  return {
+    type: "deeplink",
+    message: "Open in MetaMask app",
+    action: () => openMetaMaskDeepLink()
+  };
+};
+var shouldUseDeepLink = () => {
+  return isMobile() && !isMetaMaskBrowser();
+};
 export {
   API_ENDPOINTS,
   ChainType as ChainTypes,
@@ -3814,14 +3851,20 @@ export {
   detectChainType,
   generatePaymentQRUrl,
   getChainById,
+  getConnectionStrategy,
   getErrorMessage,
   getEvmChainById,
   getPaymentDomain,
   handleAPIError,
   isEvmAddress,
+  isMetaMaskAvailable,
+  isMetaMaskBrowser,
+  isMobile,
   isTronAddress,
   isValidAddress,
+  openMetaMaskDeepLink,
   orders_exports as ordersAPI,
+  shouldUseDeepLink,
   supportedChains,
   supportedEvmChains,
   useOrder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dj-test/payment-sdk",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Payment SDK for blockchain-based payment system",
   "main": "dist/index.js",
   "module": "dist/index.mjs",