@daimo/pay 0.3.16 → 0.3.18

package/build/index.es.js

@@ -10,8 +10,8 @@ import styled$1, { css, keyframes, ThemeProvider } from 'styled-components';
 import { ethereum, erc20Abi, getChainName, arbitrum as arbitrum$1, base as base$2, optimism as optimism$1, polygon as polygon$1, ethereumSepolia, baseSepolia as baseSepolia$1, linea as linea$1, bsc as bsc$1, getChainExplorerTxUrl } from '@daimo/contract';
 import { hexToBytes, zeroAddress, getAddress, parseUnits } from 'viem';
 import { useConnection, useWallet as useWallet$1, ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
-import { createTRPCClient, httpBatchLink } from '@trpc/client';
 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 { useTransition } from 'react-transition-state';
@@ -75,6 +75,7 @@ const REQUIRED_CHAINS = [
     sepolia,
     baseSepolia,
 ];
+/** A utility for use with wagmi's createConfig(). */
 const defaultConfig = ({ appName = "Daimo Pay", appIcon, appDescription, appUrl, walletConnectProjectId, coinbaseWalletPreference, chains = REQUIRED_CHAINS, client, ...props }) => {
     globalAppName = appName;
     const paddedChains = [...chains];
@@ -767,6 +768,7 @@ const defaultTheme$1 = {
     },
 };
 
+/** Determines whether the current wagmi configuration supports a given chain. */
 function useChainIsSupported(chainId) {
     const { chains } = useConfig();
     if (!chainId)
@@ -774,6 +776,7 @@ function useChainIsSupported(chainId) {
     return chains.some((x) => x.id === chainId);
 }
 
+/** Returns currently configured wagmi chains. */
 function useChains() {
     const wagmi = useConfig();
     const chains = wagmi?.chains ?? [];
@@ -843,18 +846,7 @@ function detectPlatform(ua) {
     return "other";
 }
 
-// TODO: re-enable for dev only in rollup.
-// TODO: env var in build
-const apiUrl = "http://localhost:4000";
-const trpc = createTRPCClient({
-    links: [
-        httpBatchLink({
-            url: apiUrl,
-        }),
-    ],
-});
-
-function useDepositAddressOptions({ usdRequired, }) {
+function useDepositAddressOptions({ trpc, usdRequired, }) {
     const [options, setOptions] = useState([]);
     const [loading, setLoading] = useState(false);
     useEffect(() => {
@@ -884,7 +876,7 @@ const DEFAULT_EXTERNAL_PAYMENT_OPTIONS = [
     ExternalPaymentOptions.Daimo,
     ExternalPaymentOptions.RampNetwork,
 ];
-function useExternalPaymentOptions({ filterIds, usdRequired, platform, }) {
+function useExternalPaymentOptions({ trpc, filterIds, usdRequired, platform, }) {
     const [options, setOptions] = useState([]);
     const [loading, setLoading] = useState(false);
     useEffect(() => {
@@ -919,7 +911,7 @@ function useExternalPaymentOptions({ filterIds, usdRequired, platform, }) {
     };
 }
 
-function usePayWithSolanaToken(orderId, setDaimoPayOrder, chosenFinalTokenAmount, platform) {
+function usePayWithSolanaToken({ trpc, orderId, setDaimoPayOrder, chosenFinalTokenAmount, platform, }) {
     const { connection } = useConnection();
     const wallet = useWallet$1();
     const payWithSolanaToken = async (inputToken) => {
@@ -962,7 +954,7 @@ function usePayWithSolanaToken(orderId, setDaimoPayOrder, chosenFinalTokenAmount
     return { payWithSolanaToken };
 }
 
-function useSolanaPaymentOptions({ address, usdRequired, }) {
+function useSolanaPaymentOptions({ trpc, address, usdRequired, }) {
     const [options, setOptions] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
@@ -995,7 +987,7 @@ function useSolanaPaymentOptions({ address, usdRequired, }) {
     };
 }
 
-function useWalletPaymentOptions({ address, usdRequired, destChainId, }) {
+function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, }) {
     const [options, setOptions] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
@@ -1029,7 +1021,7 @@ function useWalletPaymentOptions({ address, usdRequired, destChainId, }) {
     };
 }
 
-function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
+function usePaymentInfo({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
     // Browser state.
     const [platform, setPlatform] = useState();
     useEffect(() => {
@@ -1052,23 +1044,33 @@ function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
     const [modalOptions, setModalOptions] = useState({});
     // UI state. Selection for external payment (Binance, etc) vs wallet payment.
     const externalPaymentOptions = useExternalPaymentOptions({
+        trpc,
         filterIds: daimoPayOrder?.metadata.payer?.paymentOptions,
         usdRequired: daimoPayOrder?.destFinalCallTokenAmount.usd,
         platform,
     });
     const walletPaymentOptions = useWalletPaymentOptions({
+        trpc,
         address: senderAddr,
         usdRequired: daimoPayOrder?.destFinalCallTokenAmount.usd,
         destChainId: daimoPayOrder?.destFinalCallTokenAmount.token.chainId,
     });
     const solanaPaymentOptions = useSolanaPaymentOptions({
+        trpc,
         address: solanaPubKey,
         usdRequired: daimoPayOrder?.destFinalCallTokenAmount.usd,
     });
     const depositAddressOptions = useDepositAddressOptions({
+        trpc,
         usdRequired: daimoPayOrder?.destFinalCallTokenAmount.usd ?? 0,
     });
-    const { payWithSolanaToken } = usePayWithSolanaToken(daimoPayOrder?.id ?? undefined, setDaimoPayOrder, daimoPayOrder?.destFinalCallTokenAmount.amount ?? undefined, platform);
+    const { payWithSolanaToken } = usePayWithSolanaToken({
+        trpc,
+        orderId: daimoPayOrder?.id ?? undefined,
+        setDaimoPayOrder,
+        chosenFinalTokenAmount: daimoPayOrder?.destFinalCallTokenAmount.amount ?? undefined,
+        platform,
+    });
     const [selectedExternalOption, setSelectedExternalOption] = useState();
     const [selectedTokenOption, setSelectedTokenOption] = useState();
     const [selectedSolanaTokenOption, setSelectedSolanaTokenOption] = useState();
@@ -1222,6 +1224,16 @@ function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
     };
 }
 
+function createTrpcClient(apiUrl) {
+    return createTRPCClient({
+        links: [
+            httpBatchLink({
+                url: apiUrl,
+            }),
+        ],
+    });
+}
+
 const hexToP3 = (hex) => {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     if (result == null)
@@ -2363,7 +2375,7 @@ const ResetContainer = styled(motion.div) `
 `;
 
 var name = "@daimo/pay";
-var version = "0.3.16";
+var version = "0.3.18";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -2372,9 +2384,9 @@ var main = "./src/index.ts";
 var type = "module";
 var exports = {
 	"import": "./build/index.es.js",
-	types: "./build/packages/paykit/packages/connectkit/src/index.d.ts"
+	types: "./build/index.d.ts"
 };
-var types = "./build/packages/paykit/packages/connectkit/src/index.d.ts";
+var types = "./build/index.d.ts";
 var engines = {
 	node: ">=12.4"
 };
@@ -2385,7 +2397,7 @@ var files = [
 var scripts = {
 	start: "rollup --config rollup.config.dev.js -w",
 	dev: "rollup --config rollup.config.dev.js -w",
-	build: "rollup --config rollup.config.prod.js",
+	build: "rollup --config rollup.config.prod.js && rm -rf build/packages",
 	lint: "eslint --max-warnings=0"
 };
 var keywords = [
@@ -2435,7 +2447,8 @@ var devDependencies = {
 	"@types/react": "^18.2.47",
 	"@types/react-dom": "^18.2.18",
 	"@types/styled-components": "^5.1.25",
-	rollup: "^2.67.1",
+	rollup: "^3.29.5",
+	"rollup-plugin-dts": "^6.1.1",
 	"rollup-plugin-peer-deps-external": "^2.2.4",
 	"rollup-plugin-typescript2": "^0.34.0",
 	"rollup-plugin-visualizer": "^5.5.4",
@@ -3147,7 +3160,7 @@ styled(motion.div) `
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useLockBodyScroll(initialLocked) {
     const [locked, setLocked] = useState(initialLocked);
-    const context = useContext();
+    const context = usePayContext();
     useIsomorphicLayoutEffect(() => {
         if (!locked)
             return;
@@ -4524,7 +4537,7 @@ export const keys = {
 */
 
 function useLocales(replacements) {
-    const context = useContext();
+    const context = usePayContext();
     const language = context.options?.language ?? "en-US";
     const translations = useMemo(() => {
         return getLocale(language);
@@ -4626,7 +4639,7 @@ const useWallet = (id) => {
 };
 const useWallets = () => {
     const connectors = useConnectors();
-    const context = useContext();
+    const context = usePayContext();
     const wallets = connectors.map((connector) => {
         // use overrides
         const walletId = Object.keys(walletConfigs).find(
@@ -4908,7 +4921,7 @@ const contentVariants$2 = {
     },
 };
 const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onBack, onInfo, }) => {
-    const context = useContext();
+    const context = usePayContext();
     const themeContext = useThemeContext();
     const mobile = isMobile();
     const { daimoPayOrder, selectedExternalOption, selectedTokenOption, selectedSolanaTokenOption, selectedDepositAddressOption, } = context.paymentInfo;
@@ -5826,7 +5839,7 @@ const About = () => {
     const locales = useLocales({
     //CONNECTORNAME: connector.name,
     });
-    const context = useContext();
+    const context = usePayContext();
     const ctaUrl = context.options?.ethereumOnboardingUrl ?? locales.aboutScreen_ctaUrl;
     const [ready, setReady] = useState(true);
     const [slider, setSlider] = useState(0);
@@ -6528,7 +6541,7 @@ const ConnectorsContainer = styled.div `
  * additional functionality.
  */
 function useConnect({ ...props } = {}) {
-    const context = useContext();
+    const context = usePayContext();
     const { connect, connectAsync, connectors, ...rest } = useConnect$1({
         ...props,
         mutation: {
@@ -6566,7 +6579,7 @@ function useConnect({ ...props } = {}) {
 function useWalletConnectUri({ enabled } = {
     enabled: true,
 }) {
-    const { log } = useContext();
+    const { log } = usePayContext();
     const [uri, setUri] = useState(undefined);
     const connector = useWalletConnectConnector();
     const { isConnected } = useAccount();
@@ -6850,7 +6863,7 @@ const ScrollAreaContainer = styled.div `
 
 const ArrowDown = () => (jsx("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) => {
-    const { log } = useContext();
+    const { log } = usePayContext();
     const ref = useRef(null);
     const moreRef = useRef(null);
     const isMobile = useIsMobile();
@@ -6975,7 +6988,7 @@ const useLastConnector = () => {
 };
 
 const ConnectorList = () => {
-    const context = useContext();
+    const context = usePayContext();
     const isMobile = useIsMobile();
     const wallets = useWallets();
     const { lastConnectorId } = useLastConnector();
@@ -6993,7 +7006,7 @@ const ConnectorItem = ({ wallet, isRecent, }) => {
     const { connect: { getUri }, } = useWeb3();
     const uri = getUri();
     const isMobile = useIsMobile();
-    const context = useContext();
+    const context = usePayContext();
     const { connect } = useConnect();
     /*
     const [ready, setReady] = useState(false);
@@ -7227,7 +7240,7 @@ const Underline = styled(motion.div) `
   background-color: var(--ck-body-color-muted);
 `;
 const OrderHeader = ({ minified = false }) => {
-    const { paymentInfo } = useContext();
+    const { paymentInfo } = usePayContext();
     const amount = paymentInfo.daimoPayOrder?.destFinalCallTokenAmount.usd.toFixed(2);
     const isEditable = paymentInfo.daimoPayOrder?.mode === DaimoPayOrderMode.CHOOSE_AMOUNT;
     const [editableAmount, setEditableAmount] = useState(amount ?? "");
@@ -7381,7 +7394,7 @@ const Logos = styled(motion.div) `
 `;
 
 const Wallets = () => {
-    const context = useContext();
+    const context = usePayContext();
     const locales = useLocales({});
     const isMobile = useIsMobile();
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), jsx(ConnectorList, {}), isMobile ? (jsx(Fragment, { children: jsxs(InfoBox, { children: [jsxs(ModalContent, { style: { padding: 0, textAlign: "left" }, children: [jsx(ModalH1, { "$small": true, children: locales.connectorsScreen_h1 }), jsx(ModalBody, { children: locales.connectorsScreen_p })] }), jsxs(InfoBoxButtons, { children: [!context.options?.hideQuestionMarkCTA && (jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ABOUT), children: locales.learnMore })), !context.options?.hideNoWalletCTA && (jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ONBOARDING), children: locales.getWallet }))] })] }) })) : (jsx(Fragment, { children: !context.options?.hideNoWalletCTA && (jsx(LearnMoreContainer, { children: jsxs(LearnMoreButton, { onClick: () => context.setRoute(ROUTES.ONBOARDING), children: [jsx(WalletIcon$1, {}), " ", locales.connectorsScreen_newcomer] }) })) })), context.options?.disclaimer && (jsx(Disclaimer, { style: { visibility: "hidden", pointerEvents: "none" }, children: jsx("div", { children: context.options?.disclaimer }) }))] }));
@@ -7613,7 +7626,7 @@ const TooltipTail = styled(motion.div) `
 `;
 
 const Tooltip = ({ children, message, open, xOffset = 0, yOffset = 0, delay, }) => {
-    const context = useContext();
+    const context = usePayContext();
     const themeContext = useThemeContext();
     if (context.options?.hideTooltips)
         return jsx(Fragment, { children: children });
@@ -7793,7 +7806,7 @@ function CustomQRCode({ value, image, imageBackground, imagePosition = "center",
 CustomQRCode.displayName = "CustomQRCode";
 
 const DownloadApp = () => {
-    const context = useContext();
+    const context = usePayContext();
     const wallet = useWallet(context.connector.id);
     const locales = useLocales({
         CONNECTORNAME: wallet?.name,
@@ -7874,7 +7887,7 @@ const WalletList = styled.div `
 const Container$4 = styled.div ``;
 
 function useWalletConnectModal() {
-    const { log } = useContext();
+    const { log } = usePayContext();
     const { connectAsync, connectors } = useConnect();
     const [isOpen, setIsOpen] = useState(false);
     return {
@@ -8022,7 +8035,7 @@ const CopyToClipboard = ({ string, children, variant }) => {
 
 const MoreIcon = (jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
 const MobileConnectors = () => {
-    const context = useContext();
+    const context = usePayContext();
     const locales = useLocales();
     const { connect: { getUri }, } = useWeb3();
     const wcUri = getUri();
@@ -8303,7 +8316,7 @@ const Logo$2 = styled(motion.div) `
 var wave = (jsxs("svg", { "aria-hidden": "true", width: "298", height: "188", viewBox: "0 0 298 188", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 55.2757L21.6438 46.0285C55.5896 30.8228 94.4104 30.8228 128.356 46.0286L169.644 64.5229C203.59 79.7287 242.41 79.7286 276.356 64.5229L297 55.2757M1 44.2118L21.6438 34.9646C55.5896 19.7589 94.4104 19.7589 128.356 34.9646L169.644 53.459C203.59 68.6647 242.41 68.6647 276.356 53.459L297 44.2118M1 33.1477L21.6438 23.9005C55.5896 8.69479 94.4104 8.69479 128.356 23.9005L169.644 42.3949C203.59 57.6006 242.41 57.6006 276.356 42.3949L297 33.1477M1 22.1477L21.6438 12.9005C55.5896 -2.30521 94.4104 -2.30521 128.356 12.9005L169.644 31.3949C203.59 46.6006 242.41 46.6006 276.356 31.3949L297 22.1477M1 66.3398L21.6438 57.0926C55.5896 41.8869 94.4104 41.8869 128.356 57.0926L169.644 75.587C203.59 90.7927 242.41 90.7927 276.356 75.587L297 66.3398M1 77.404L21.6438 68.1568C55.5896 52.9511 94.4104 52.9511 128.356 68.1569L169.644 86.6512C203.59 101.857 242.41 101.857 276.356 86.6512L297 77.404M1 88.4681L21.6438 79.2209C55.5896 64.0152 94.4104 64.0152 128.356 79.2209L169.644 97.7153C203.59 112.921 242.41 112.921 276.356 97.7153L297 88.4681M1 121.66L21.6438 112.413C55.5896 97.2075 94.4104 97.2075 128.356 112.413L169.644 130.908C203.59 146.113 242.41 146.113 276.356 130.908L297 121.66M1 110.596L21.6438 101.349C55.5896 86.1433 94.4104 86.1433 128.356 101.349L169.644 119.843C203.59 135.049 242.41 135.049 276.356 119.843L297 110.596M1 99.5321L21.6438 90.2849C55.5896 75.0792 94.4104 75.0792 128.356 90.2849L169.644 108.779C203.59 123.985 242.41 123.985 276.356 108.779L297 99.5321M1 132.724L21.6438 123.477C55.5896 108.271 94.4104 108.271 128.356 123.477L169.644 141.971C203.59 157.177 242.41 157.177 276.356 141.971L297 132.724M1 143.788L21.6438 134.541C55.5896 119.336 94.4104 119.336 128.356 134.541L169.644 153.036C203.59 168.241 242.41 168.241 276.356 153.036L297 143.788M1 154.853L21.6438 145.605C55.5896 130.4 94.4104 130.4 128.356 145.605L169.644 164.1C203.59 179.305 242.41 179.305 276.356 164.1L297 154.853M1 165.853L21.6438 156.605C55.5896 141.4 94.4104 141.4 128.356 156.605L169.644 175.1C203.59 190.305 242.41 190.305 276.356 175.1L297 165.853", stroke: "url(#paint0_linear_1094_2077)", strokeOpacity: "0.9", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1094_2077", x1: "1", y1: "112.587", x2: "297.034", y2: "79.6111", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-01)" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-02)", offset: "0.239583" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-03)", offset: "0.515625" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-04)", offset: "0.739583" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-05)", offset: "1" })] }) })] }));
 
 const Introduction = () => {
-    const context = useContext();
+    const context = usePayContext();
     const locales = useLocales({});
     const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
     return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.Trust, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.Argent, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
@@ -8846,7 +8859,7 @@ const ChainSelectList = ({ variant, }) => {
             switchChain({ chainId });
         }
     };
-    const { triggerResize } = useContext();
+    const { triggerResize } = usePayContext();
     return (jsxs(SwitchNetworksContainer, { style: { marginBottom: switchChain !== undefined ? -8 : 0 }, children: [jsx(ChainButtonContainer, { children: jsx(ChainButtons, { children: chains.map((x) => {
                         const c = chainConfigs.find((ch) => ch.id === x.id);
                         const ch = { ...c, ...x };
@@ -9385,7 +9398,7 @@ const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
             },
         },
     });
-    const { triggerResize, connector: c } = useContext();
+    const { triggerResize, connector: c } = usePayContext();
     const id = c.id;
     const wallet = useWallet(id);
     const walletInfo = {
@@ -9508,7 +9521,7 @@ const ScanIconWithLogos = ({ logo }) => {
 };
 
 const ConnectWithQRCode = ({ switchConnectMethod }) => {
-    const context = useContext();
+    const context = usePayContext();
     const id = context.connector.id;
     const wallet = useWallet(context.connector.id);
     const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
@@ -9570,7 +9583,7 @@ const states = {
     INJECTOR: "injector",
 };
 const ConnectUsing = () => {
-    const context = useContext();
+    const context = usePayContext();
     const wallet = useWallet(context.connector.id);
     // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it
     const isQrCode = !wallet?.isInstalled && wallet?.getWalletConnectDeeplink;
@@ -9640,7 +9653,7 @@ const TextButton = styled(motion.button) `
 `;
 
 const Confirmation = () => {
-    const { paymentInfo } = useContext();
+    const { paymentInfo } = usePayContext();
     const { daimoPayOrder } = paymentInfo;
     const { done, txURL } = (() => {
         if (daimoPayOrder && daimoPayOrder.mode === DaimoPayOrderMode.HYDRATED) {
@@ -9740,7 +9753,7 @@ var PayState$1;
     PayState["RequestSuccessful"] = "Payment Successful";
 })(PayState$1 || (PayState$1 = {}));
 const PayWithToken = () => {
-    const { triggerResize, paymentInfo, setRoute, log } = useContext();
+    const { triggerResize, paymentInfo, setRoute, log } = usePayContext();
     const { selectedTokenOption, payWithToken } = paymentInfo;
     const [payState, setPayState] = useState(PayState$1.RequestingPayment);
     const walletChainId = useChainId();
@@ -10041,7 +10054,7 @@ const OptionsContainer = styled.div `
 `;
 
 const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
-    const { triggerResize, log } = useContext();
+    const { triggerResize, log } = usePayContext();
     const optionsLength = options.length;
     useEffect(() => {
         log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);
@@ -10136,7 +10149,7 @@ const IconStackItem = styled(motion.div) `
 `;
 
 const SelectDepositAddressChain = () => {
-    const { setRoute, paymentInfo } = useContext();
+    const { setRoute, paymentInfo } = usePayContext();
     const { setSelectedDepositAddressOption, depositAddressOptions } = paymentInfo;
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !depositAddressOptions.loading &&
                 depositAddressOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
@@ -10179,7 +10192,7 @@ function getBestUnconnectedWalletIcons(connector) {
 }
 function getSolanaOption() {
     const { wallets } = useWallet$1();
-    const { setRoute } = useContext();
+    const { setRoute } = usePayContext();
     if (wallets.length === 0)
         return null;
     return {
@@ -10192,7 +10205,7 @@ function getSolanaOption() {
     };
 }
 function getDepositAddressOption(depositAddressOptions) {
-    const { setRoute } = useContext();
+    const { setRoute } = usePayContext();
     console.log(`[SELECT_METHOD] depositAddressOptions: ${JSON.stringify(depositAddressOptions)}`);
     if (!depositAddressOptions.loading &&
         depositAddressOptions.options.length === 0)
@@ -10211,7 +10224,7 @@ const SelectMethod = () => {
     const isMobile = useIsMobile();
     const { address, isConnected, connector } = useAccount();
     const { disconnectAsync } = useDisconnect();
-    const { setRoute, paymentInfo, log } = useContext();
+    const { setRoute, paymentInfo, log } = usePayContext();
     const { setSelectedExternalOption, externalPaymentOptions, depositAddressOptions, senderEnsName, } = paymentInfo;
     const displayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
     const connectedWalletOption = isConnected
@@ -10276,7 +10289,7 @@ const ChainContainer$1 = styled(motion.div) `
   right: 0px;
 `;
 const SelectToken = () => {
-    const { setRoute, paymentInfo } = useContext();
+    const { setRoute, paymentInfo } = usePayContext();
     const { setSelectedTokenOption, walletPaymentOptions } = paymentInfo;
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !walletPaymentOptions.isLoading &&
                 walletPaymentOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
@@ -10305,7 +10318,9 @@ const SelectToken = () => {
 };
 
 const WaitingOther = () => {
-    const { triggerResize, paymentInfo, setRoute } = useContext();
+    const context = usePayContext();
+    const { triggerResize, paymentInfo, setRoute } = context;
+    const trpc = context.trpc;
     const { selectedExternalOption, payWithExternal, paymentWaitingMessage, daimoPayOrder, } = paymentInfo;
     const [externalURL, setExternalURL] = useState(null);
     useEffect(() => {
@@ -10382,7 +10397,7 @@ const AnimationContainer$2 = styled(motion.div) `
 const ConnectSolana$1 = () => {
     const solanaWallets = useWallet$1();
     const isConnected = solanaWallets.connected;
-    const { solanaConnector, setRoute } = useContext();
+    const { solanaConnector, setRoute } = usePayContext();
     const selectedWallet = solanaWallets.wallets.find((wallet) => wallet.adapter.name === solanaConnector);
     useEffect(() => {
         if (!solanaConnector)
@@ -10413,7 +10428,7 @@ const AnimationContainer$1 = styled(motion.div) `
 `;
 
 const ConnectSolana = () => {
-    const { setSolanaConnector, setRoute } = useContext();
+    const { setSolanaConnector, setRoute } = usePayContext();
     const solanaWallets = useWallet$1();
     const options = solanaWallets.wallets.map((wallet) => ({
         id: wallet.adapter.name,
@@ -10447,7 +10462,7 @@ var PayState;
     PayState["RequestSuccessful"] = "Payment Successful";
 })(PayState || (PayState = {}));
 const PayWithSolanaToken = () => {
-    const { triggerResize, paymentInfo, setRoute } = useContext();
+    const { triggerResize, paymentInfo, setRoute } = usePayContext();
     const { selectedSolanaTokenOption, payWithSolanaToken } = paymentInfo;
     const [payState, setPayState] = useState(PayState.RequestingPayment);
     const handleTransfer = async () => {
@@ -10511,7 +10526,7 @@ const AnimationContainer = styled(motion.div) `
 `;
 
 const SelectSolanaToken = () => {
-    const { paymentInfo, setRoute } = useContext();
+    const { paymentInfo, setRoute } = usePayContext();
     const { solanaPaymentOptions, setSelectedSolanaTokenOption } = paymentInfo;
     return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !solanaPaymentOptions.isLoading &&
                 solanaPaymentOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
@@ -10539,7 +10554,9 @@ const SelectSolanaToken = () => {
 };
 
 const WaitingDepositAddress = () => {
-    const { triggerResize, paymentInfo, setRoute } = useContext();
+    const context = usePayContext();
+    const { triggerResize, paymentInfo, setRoute } = context;
+    const trpc = context.trpc;
     const { daimoPayOrder, payWithDepositAddress, selectedDepositAddressOption } = paymentInfo;
     useEffect(() => {
         const checkForSourcePayment = async () => {
@@ -10576,7 +10593,7 @@ const WaitingDepositAddress = () => {
 
 const customThemeDefault = {};
 const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThemeDefault, lang = "en-US", }) => {
-    const context = useContext();
+    const context = usePayContext();
     const { setSelectedExternalOption, setSelectedTokenOption, setSelectedDepositAddressOption, setSelectedSolanaTokenOption, } = context.paymentInfo;
     const { isConnected, chain } = useAccount();
     const chainIsSupported = useChainIsSupported(chain?.id);
@@ -10709,8 +10726,9 @@ var ROUTES;
     ROUTES["DOWNLOAD"] = "download";
     ROUTES["SWITCHNETWORKS"] = "switchNetworks";
 })(ROUTES || (ROUTES = {}));
+/** Meant for internal use. This will be non-exported in a future SDK version. */
 const Context = createContext(null);
-const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto", customTheme, options, onConnect, onDisconnect, debugMode = false, }) => {
+const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto", customTheme, options, onConnect, onDisconnect, debugMode = false, payApiUrl = "https://pay-api.daimo.xyz", }) => {
     // DaimoPayProvider must be within a WagmiProvider
     if (!React.useContext(WagmiContext)) {
         throw Error("DaimoPayProvider must be within a WagmiProvider");
@@ -10794,12 +10812,15 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         }
     }, [isConnected, isChainSupported, chain, route, open]);
     const log = debugMode ? console.log : () => { };
+    // Connect to the Daimo Pay TRPC API
+    const trpc = useMemo(() => createTrpcClient(payApiUrl), [payApiUrl]);
     // PaymentInfo is a second, inner context object containing a DaimoPayOrder
     // plus all associated status and callbacks. In order for useContext() and
     // downstream hooks like useDaimoPayStatus() to work correctly, we must set
     // set refresh context when payment status changes; done via setDaimoPayOrder.
     const [daimoPayOrder, setDaimoPayOrder] = useState();
     const paymentInfo = usePaymentInfo({
+        trpc,
         daimoPayOrder,
         setDaimoPayOrder,
         setOpen,
@@ -10877,19 +10898,26 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         // Below: Daimo Pay context
         loadAndShowPayment,
         paymentInfo,
+        trpc,
     };
     return createElement(Context.Provider, { value }, jsx(Web3ContextProvider, { enabled: open, children: jsxs(ThemeProvider, { theme: defaultTheme$1, children: [children, jsx(DaimoPayModal, { lang: ckLang, theme: ckTheme, mode: mode, customTheme: ckCustomTheme })] }) }));
 };
+/** Provides context for DaimoPayButton and hooks. Place in app root, layout, or
+ * similar.
+ */
 const DaimoPayProvider = (props) => {
     return (jsx(SolanaContextProvider, { solanaRpcUrl: props.solanaRpcUrl, children: jsx(DaimoPayProviderWithoutSolana, { ...props }) }));
 };
-const useContext = () => {
+/** Meant for internal use. This will be non-exported in a future SDK version. */
+const usePayContext = () => {
     const context = React.useContext(Context);
     if (!context)
         throw Error("DaimoPay Hook must be inside a Provider.");
     return context;
 };
 
+/** Utility. Returns false on first render, true after.
+ * Useful for apps with SSR, for example. */
 function useIsMounted() {
     const [mounted, setMounted] = useState(false);
     useEffect(() => setMounted(true), []);
@@ -11132,9 +11160,10 @@ const contentVariants = {
         },
     },
 };
+/** Like DaimoPayButton, but with custom styling. */
 const DaimoPayButtonRenderer = ({ payId, closeOnSuccess, children, }) => {
     const isMounted = useIsMounted();
-    const context = useContext();
+    const context = usePayContext();
     const { address, chain } = useAccount();
     const isChainSupported = useChainIsSupported(chain?.id);
     const { data: ensName } = useEnsName({
@@ -11168,15 +11197,18 @@ const DaimoPayButtonRenderer = ({ payId, closeOnSuccess, children, }) => {
 };
 DaimoPayButtonRenderer.displayName = "DaimoPayButton.Custom";
 function DaimoPayButtonInner() {
-    const { paymentInfo } = useContext();
+    const { paymentInfo } = usePayContext();
     const label = paymentInfo?.daimoPayOrder?.metadata?.intent ?? "Pay";
     return (jsx(AnimatePresence, { initial: false, children: jsx(TextContainer, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, style: {
                 height: 40,
             }, children: label }, "connectWalletText") }));
 }
+/** A button that shows the Daimo Pay checkout. Replaces the traditional
+ * Connect Wallet » approve » execute sequence with a single action.
+ */
 function DaimoPayButton({ payId, theme, mode, customTheme, closeOnSuccess, onClick, }) {
     const isMounted = useIsMounted();
-    const context = useContext();
+    const context = usePayContext();
     // Pre-load payment info in background.
     const { setPayId } = context.paymentInfo;
     useEffect(() => {
@@ -11198,7 +11230,7 @@ function DaimoPayButton({ payId, theme, mode, customTheme, closeOnSuccess, onCli
 DaimoPayButton.Custom = DaimoPayButtonRenderer;
 
 const useModal = ({ onConnect, onDisconnect } = {}) => {
-    const context = useContext();
+    const context = usePayContext();
     useConnectCallback({
         onConnect,
         onDisconnect,
@@ -11295,7 +11327,7 @@ function useEnsFallbackConfig() {
 
 const Avatar = ({ address, name, size = 96, radius = 96 }) => {
     const isMounted = useIsMounted();
-    const context = useContext();
+    const context = usePayContext();
     const imageRef = useRef(null);
     const [loaded, setLoaded] = useState(true);
     const ensFallbackConfig = useEnsFallbackConfig();
@@ -11448,36 +11480,37 @@ const Chain = ({ id, unsupported: controlledUnsupported, radius = "50%", size =
     return (jsx(ChainContainer, { size: size, radius: radius, children: jsxs(AnimatePresence, { initial: false, children: [unsupported && (jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) })), id ? (jsx(LogoContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: chain?.logo ?? jsx(Chains.UnknownChain, {}) }, `${chain?.id}-${chain?.name}-${id}`)) : (jsx(LoadingContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: Spinner }, "loading"))] }) }));
 };
 
+/** Returns the current payment, or undefined if there is none.
+ *
+ * Status values:
+ * - `payment_pending` - the user has not paid yet
+ * - `payment_started` - the user has paid & payment is in progress. This status
+ *    typically lasts a few seconds.
+ * - `payment_completed` - the final call or transfer succeeded
+ * - `payment_bounced` - the final call or transfer reverted. Funds were sent
+ *    to the payment's configured refund address on the destination chain.
+ */
 function useDaimoPayStatus() {
-    const { paymentInfo } = useContext();
-    const status = (() => {
-        if (!paymentInfo || !paymentInfo.daimoPayOrder)
-            return undefined;
-        const order = paymentInfo.daimoPayOrder;
-        const paymentId = writeDaimoPayOrderID(order.id);
-        if (order.mode === DaimoPayOrderMode.HYDRATED) {
-            if (order.intentStatus != DaimoPayIntentStatus.PENDING) {
-                return {
-                    status: order.intentStatus === DaimoPayIntentStatus.SUCCESSFUL
-                        ? "payment_completed"
-                        : "payment_bounced",
-                    paymentId,
-                };
+    const { paymentInfo } = usePayContext();
+    if (!paymentInfo || !paymentInfo.daimoPayOrder)
+        return undefined;
+    const order = paymentInfo.daimoPayOrder;
+    const paymentId = writeDaimoPayOrderID(order.id);
+    if (order.mode === DaimoPayOrderMode.HYDRATED) {
+        if (order.intentStatus !== DaimoPayIntentStatus.PENDING) {
+            if (order.intentStatus === DaimoPayIntentStatus.SUCCESSFUL) {
+                return { paymentId, status: "payment_completed" };
             }
-            else if (order.sourceStatus != DaimoPayOrderStatusSource.WAITING_PAYMENT) {
-                return {
-                    status: "payment_started",
-                    paymentId,
-                };
+            else {
+                return { paymentId, status: "payment_bounced" };
             }
         }
-        return {
-            status: "payment_pending",
-            paymentId,
-        };
-    })();
-    return status;
+        else if (order.sourceStatus !== DaimoPayOrderStatusSource.WAITING_PAYMENT) {
+            return { paymentId, status: "payment_started" };
+        }
+    }
+    return { paymentId, status: "payment_pending" };
 }
 
-export { Avatar, Chain as ChainIcon, Context, DaimoPayButton, DaimoPayProvider, types$1 as Types, defaultConfig as getDefaultConfig, useChainIsSupported, useChains, useDaimoPayStatus, useIsMounted, useModal, wallets };
+export { Avatar, Chain as ChainIcon, Context, DaimoPayButton, DaimoPayProvider, types$1 as Types, defaultConfig as getDefaultConfig, useChainIsSupported, useChains, useDaimoPayStatus, useIsMounted, useModal, usePayContext, wallets };
 //# sourceMappingURL=index.es.js.map