@daimo/pay 1.8.1 → 1.8.2

package/build/index.d.ts

@@ -339,6 +339,7 @@ type WalletConfigProps = {
     shouldDeeplinkDesktop?: boolean;
     showInMobileConnectors?: boolean;
     isWcMobileConnector?: boolean;
+    isSolanaOnly?: boolean;
 };
 
 type TrpcClient = CreateTRPCClient<AppRouter>;

package/build/index.js

@@ -1,18 +1,18 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ExternalPaymentOptions, assert, assertNotNull, debugJson, supportedChains, ethereum, isCCTPV1Chain, getOrderDestChainId, readDaimoPayOrderID, writeDaimoPayOrderID, getChainName, DaimoPayOrderMode, arbitrum as arbitrum$1, base as base$2, blast as blast$1, bsc as bsc$1, linea as linea$1, mantle as mantle$1, optimism as optimism$1, polygon as polygon$1, worldchain as worldchain$1, getAddressContraction, DaimoPayOrderStatusDest, getChainExplorerTxUrl, DaimoPayIntentStatus, retryBackoff, DaimoPayOrderStatusSource, DaimoPayEventType, getDaimoPayOrderView } from '@daimo/pay-common';
 import { Buffer } from 'buffer';
-import React, { useState, useEffect, createContext, useRef, useCallback, useLayoutEffect, useMemo, createElement } from 'react';
+import React, { useState, useEffect, createContext, useMemo, useRef, useCallback, useLayoutEffect, createElement } from 'react';
 import styled$1, { css, keyframes, ThemeProvider } from 'styled-components';
 import { http, useConfig, useAccountEffect, useWriteContract, useSendTransaction, useAccount, useEnsName, useConnectors as useConnectors$1, useSwitchChain, useConnect as useConnect$1, useDisconnect, useChainId, WagmiContext, createConfig, useEnsAddress, useEnsAvatar } from 'wagmi';
 import { mainnet, base as base$1, polygon, optimism, arbitrum, linea, bsc, sepolia, baseSepolia, worldchain, blast, mantle } from 'wagmi/chains';
 import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { useConnection, useWallet as useWallet$1, ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
 import { hexToBytes, zeroAddress, erc20Abi, getAddress, formatUnits, parseUnits } from 'viem';
+import { detect } from 'detect-browser';
 import { VersionedTransaction } from '@solana/web3.js';
 import { createTRPCClient, httpBatchLink } from '@trpc/client';
 import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { detect } from 'detect-browser';
 import { useTransition } from 'react-transition-state';
 import ResizeObserver from 'resize-observer-polyfill';
 import useMeasure from 'react-use-measure';
@@ -22,7 +22,7 @@ import { WalletSignTransactionError, WalletSendTransactionError } from '@solana/
 import { normalize } from 'viem/ens';
 
 var name = "@daimo/pay";
-var version = "1.8.1";
+var version = "1.8.2";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -61,7 +61,7 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/pay-common": "1.8.1",
+	"@daimo/pay-common": "1.8.2",
 	"@rollup/plugin-typescript": "^12.1.2",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
@@ -797,6 +797,7 @@ const walletConfigs = {
             const ref = encodeURIComponent(window.location.origin);
             return `https://solflare.com/ul/v1/browse/${url}?ref=${ref}`;
         },
+        isSolanaOnly: true,
     },
     // steak: {
     //   name: "Steak",
@@ -948,7 +949,6 @@ function extractWcWalletFromProvider(p, log) {
         let deeplinkUrl;
         try {
             deeplinkUrl = JSON.parse(deeplinkJson).href;
-            console.log(`[WCWALLET] deeplinkUrl: ${deeplinkUrl}`);
         }
         catch { }
         wallet = {
@@ -1055,6 +1055,47 @@ function useExternalPaymentOptions({ trpc, filterIds, platform, usdRequired, mod
     return { options, loading };
 }
 
+const detectBrowser = () => {
+    const browser = detect();
+    return browser?.name ?? "";
+};
+const detectOS = () => {
+    const browser = detect();
+    return browser?.os ?? "";
+};
+const isIOS = () => {
+    const os = detectOS();
+    return os.toLowerCase().includes("ios");
+};
+const isAndroid = () => {
+    const os = detectOS();
+    return os.toLowerCase().includes("android");
+};
+const isMobile = () => {
+    const os = detectOS().toLowerCase();
+    return os.includes("android") || os.includes("ios");
+};
+function flattenChildren(children) {
+    const childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce((flatChildren, child) => {
+        if (child.type === React.Fragment) {
+            return flatChildren.concat(flattenChildren(child.props.children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+}
+const isWalletConnectConnector = (connectorId) => connectorId === "walletConnect";
+const isCoinbaseWalletConnector = (connectorId) => connectorId === "coinbaseWalletSDK";
+const isSafeConnector = (connectorId) => connectorId === "safe";
+const isInjectedConnector = (connectorId) => connectorId === "injected";
+
+function useIsMobile() {
+    const isI = useMemo(isIOS, []);
+    const isA = useMemo(isAndroid, []);
+    return { isMobile: isI || isA, isIOS: isI, isAndroid: isA };
+}
+
 function useOrderUsdLimits({ trpc }) {
     const [limits, setLimits] = useState({});
     const [loading, setLoading] = useState(false);
@@ -1420,6 +1461,7 @@ function usePaymentState({ trpc, lockPayParams, daimoPayOrder, setDaimoPayOrder,
         });
         return depositAddressOption;
     };
+    const { isIOS } = useIsMobile();
     /// Hydrates an order to prepare for paying in an in-wallet browser via
     /// deeplink. Then, if wallet is specified, opens in that wallet.
     const payWithWallet = async (wallet, amountUsd) => {
@@ -1441,7 +1483,10 @@ function usePaymentState({ trpc, lockPayParams, daimoPayOrder, setDaimoPayOrder,
         assert(wallet.getDaimoPayDeeplink != null, "payWithWallet: missing deeplink");
         const payId = writeDaimoPayOrderID(hydratedOrder.id);
         const deeplink = wallet.getDaimoPayDeeplink(payId);
-        window.open(deeplink, "_blank");
+        // if we are in IOS, we don't open the deeplink in a new window, because it will not work, the link will be opened in the page WAITING_WALLET
+        if (!isIOS) {
+            window.open(deeplink, "_blank");
+        }
         setSelectedWalletDeepLink(deeplink);
         setRoute(ROUTES.WAITING_WALLET, {
             amountUsd,
@@ -2862,41 +2907,6 @@ const Portal = (props) => {
     return mounted ? createPortal(children, ref.current) : null;
 };
 
-const detectBrowser = () => {
-    const browser = detect();
-    return browser?.name ?? "";
-};
-const detectOS = () => {
-    const browser = detect();
-    return browser?.os ?? "";
-};
-const isIOS = () => {
-    const os = detectOS();
-    return os.toLowerCase().includes("ios");
-};
-const isAndroid = () => {
-    const os = detectOS();
-    return os.toLowerCase().includes("android");
-};
-const isMobile = () => {
-    const os = detectOS().toLowerCase();
-    return os.includes("android") || os.includes("ios");
-};
-function flattenChildren(children) {
-    const childrenArray = React.Children.toArray(children);
-    return childrenArray.reduce((flatChildren, child) => {
-        if (child.type === React.Fragment) {
-            return flatChildren.concat(flattenChildren(child.props.children));
-        }
-        flatChildren.push(child);
-        return flatChildren;
-    }, []);
-}
-const isWalletConnectConnector = (connectorId) => connectorId === "walletConnect";
-const isCoinbaseWalletConnector = (connectorId) => connectorId === "coinbaseWalletSDK";
-const isSafeConnector = (connectorId) => connectorId === "safe";
-const isInjectedConnector = (connectorId) => connectorId === "injected";
-
 var defaultTheme = {
     mobileWidth: 560,
 };
@@ -6663,12 +6673,6 @@ styled(motion.div) `
   }
 `;
 
-function useIsMobile() {
-    const isI = useMemo(isIOS, []);
-    const isA = useMemo(isAndroid, []);
-    return { isMobile: isI || isA, isIOS: isI, isAndroid: isA };
-}
-
 /**
  * This is a wrapper around wagmi's useConnect hook that adds some
  * additional functionality.
@@ -8446,6 +8450,9 @@ const MobileConnectors = () => {
             return false;
         if (!wallet.showInMobileConnectors)
             return false;
+        // If the mobile wallet supports solana only, don't show it if we are not supporting solana has a payment method
+        if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)
+            return false;
         return true;
     }) ?? [];
     const goToWallet = (wallet) => {
@@ -10139,6 +10146,7 @@ const Container$2 = styled.button `
   gap: 4px;
   cursor: pointer;
   width: fit-content;
+  background: transparent;
 `;
 const IconWrapper = styled.div `
   opacity: ${({ $isFlipped }) => ($isFlipped ? 1 : 1)};
@@ -10169,6 +10177,7 @@ const Container$1 = styled.button `
   align-items: center;
   justify-content: center;
   gap: 4px;
+  background: transparent;
 `;
 const InputField = styled.input `
   margin: 0;
@@ -10816,7 +10825,7 @@ function SelectMethod() {
     const { connected: isSolanaConnected, wallet: solanaWallet, wallets: solanaWallets, disconnect: disconnectSolana, publicKey, } = useWallet$1();
     const { setRoute, paymentState, wcWallet, log } = usePayContext();
     const { disconnectAsync } = useDisconnect();
-    const { daimoPayOrder, setSelectedExternalOption, externalPaymentOptions, showSolanaPaymentMethod, depositAddressOptions, senderEnsName, } = paymentState;
+    const { setSelectedExternalOption, externalPaymentOptions, showSolanaPaymentMethod, depositAddressOptions, senderEnsName, } = paymentState;
     // Decide whether to show the connected eth account, solana account, or both.
     const showConnectedEth = isEthConnected;
     const showConnectedSolana = isSolanaConnected && showSolanaPaymentMethod;
@@ -11037,7 +11046,6 @@ function SelectToken() {
     const { isDepositFlow, walletPaymentOptions, setSelectedTokenOption } = paymentState;
     const { connector } = useAccount();
     const { connected: isSolanaConnected } = useWallet$1();
-    console.log("connector", connector);
     const optionsList = walletPaymentOptions.options?.map((option) => {
         const chainName = getChainName(option.balance.token.chainId);
         const titlePrice = isDepositFlow
@@ -11083,10 +11091,11 @@ function SelectToken() {
             disabled,
         };
     }) ?? [];
-    // IsAnotherMethodButtonVisible is true when there are token options and we are in desktop mode or in mobile mode using a wallet connect connector
-    const isAnotherMethodButtonVisible = (optionsList.length != 0 &&
-        (!isMobileFormat || isWalletConnectConnector(connector?.id))) ||
-        (optionsList.length == 0 && isSolanaConnected);
+    // IsAnotherMethodButtonVisible is true when there are token options and we are in desktop mode or in mobile mode using a wallet connect connector or if we are connected to solana and evm in mobile mode
+    const isAnotherMethodButtonVisible = optionsList.length > 0 &&
+        (!isMobileFormat ||
+            isWalletConnectConnector(connector?.id) ||
+            isSolanaConnected);
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true, showEth: true }), !walletPaymentOptions.isLoading && optionsList.length === 0 && (jsxs(ModalContent, { style: {
                     display: "flex",
                     alignItems: "center",
@@ -11352,7 +11361,9 @@ function getDaimoSolanaTokenKey(token) {
 const SelectSolanaToken = () => {
     const { paymentState, setRoute } = usePayContext();
     const { isDepositFlow, solanaPaymentOptions, setSelectedSolanaTokenOption } = paymentState;
-    const isMobileFormat = useIsMobile() || window?.innerWidth < defaultTheme.mobileWidth;
+    const { isMobile } = useIsMobile();
+    const isMobileFormat = isMobile || window?.innerWidth < defaultTheme.mobileWidth;
+    const { isConnected: isEvmConnected } = useAccount();
     const optionsList = solanaPaymentOptions.options?.map((option) => {
         const titlePrice = isDepositFlow
             ? formatUsd(option.balance.usd)
@@ -11386,13 +11397,15 @@ const SelectSolanaToken = () => {
             disabled,
         };
     }) ?? [];
+    // IsAnotherMethodButtonVisible is true when there are token options and we are in desktop mode or in mobile mode using a wallet connect connector or if we are connected to solana and evm in mobile mode
+    const isAnotherMethodButtonVisible = optionsList.length > 0 && (!isMobileFormat || isEvmConnected);
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true, showSolana: true }), !solanaPaymentOptions.isLoading && optionsList.length === 0 && (jsxs(ModalContent, { style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: optionsList, scrollHeight: isMobileFormat ? 225 : 300, orDivider: optionsList.length != 0 }), optionsList.length != 0 && jsx(SelectAnotherMethodButton, {})] }));
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: optionsList, scrollHeight: isAnotherMethodButtonVisible && isMobileFormat ? 225 : 300, orDivider: isAnotherMethodButtonVisible }), isAnotherMethodButtonVisible && jsx(SelectAnotherMethodButton, {})] }));
 };
 
 const WaitingDepositAddress = () => {
@@ -11548,7 +11561,7 @@ const DaimoPayModal = ({ mode, theme, customTheme, lang, }) => {
     const paymentState = context.paymentState;
     const { payParams, generatePreviewOrder, isDepositFlow, showSolanaPaymentMethod, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, setSelectedWallet, } = paymentState;
     const { isConnected: isEthConnected, connector, chain, address, } = useAccount();
-    useWallet$1();
+    const { connected: isSolanaConnected } = useWallet$1();
     const chainIsSupported = useChainIsSupported(chain?.id);
     //if chain is unsupported we enforce a "switch chain" prompt
     const closeable = !(context.options?.enforceSupportedChains &&
@@ -11691,12 +11704,10 @@ const DaimoPayModal = ({ mode, theme, customTheme, lang, }) => {
             return;
         if (context.route !== ROUTES.SELECT_METHOD)
             return;
-        const canPayEth = paymentState.walletPaymentOptions.options?.some((o) => o.disabledReason == null);
-        const canPaySolana = paymentState.solanaPaymentOptions.options?.some((o) => o.disabledReason == null);
         // Skip to token selection if exactly one wallet is connected. If both
         // wallets are connected, stay on the SELECT_METHOD screen to allow the
         // user to select which wallet to use
-        if (canPayEth && !canPaySolana) {
+        if (isEthConnected && !isSolanaConnected) {
             context.setRoute(ROUTES.SELECT_TOKEN, {
                 event: "eth_connected_on_open",
                 walletId: connector?.id,
@@ -11704,7 +11715,7 @@ const DaimoPayModal = ({ mode, theme, customTheme, lang, }) => {
                 address,
             });
         }
-        else if (canPaySolana && !canPayEth) {
+        else if (isSolanaConnected && !isEthConnected) {
             context.setRoute(ROUTES.SOLANA_SELECT_TOKEN, {
                 event: "solana_connected_on_open",
             });