@daimo/pay 0.3.21 → 1.0.1

package/build/src/components/Pages/Onboarding/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/PayWithToken/index.js

@@ -0,0 +1,204 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { ModalBody, PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { css } from 'styled-components';
+import { useChainId, useSwitchChain } from 'wagmi';
+import { chainToLogo } from '../../../assets/chains.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+import Button from '../../Common/Button/index.js';
+import CircleSpinner from '../../Spinners/CircleSpinner/index.js';
+
+var PayState;
+(function (PayState) {
+    PayState["RequestingPayment"] = "Requesting Payment";
+    PayState["SwitchingChain"] = "Switching Chain";
+    PayState["RequestCancelled"] = "Payment Cancelled";
+    PayState["RequestSuccessful"] = "Payment Successful";
+})(PayState || (PayState = {}));
+const PayWithToken = () => {
+    const { triggerResize, paymentState, setRoute, log } = usePayContext();
+    const { selectedTokenOption, payWithToken } = paymentState;
+    const [payState, setPayState] = useState(PayState.RequestingPayment);
+    const walletChainId = useChainId();
+    const { switchChainAsync } = useSwitchChain();
+    const trySwitchingChain = async (option, forceSwitch = false) => {
+        if (walletChainId !== option.required.token.chainId || forceSwitch) {
+            const resultChain = await (async () => {
+                try {
+                    return await switchChainAsync({
+                        chainId: option.required.token.chainId,
+                    });
+                }
+                catch (e) {
+                    console.error("Failed to switch chain", e);
+                    return null;
+                }
+            })();
+            if (resultChain?.id !== option.required.token.chainId) {
+                return false;
+            }
+        }
+        return true;
+    };
+    const handleTransfer = async (option) => {
+        // Switch chain if necessary
+        setPayState(PayState.SwitchingChain);
+        const switchChain = await trySwitchingChain(option);
+        if (!switchChain) {
+            console.error("Switching chain failed");
+            setPayState(PayState.RequestCancelled);
+            return;
+        }
+        setPayState(PayState.RequestingPayment);
+        try {
+            await payWithToken(option.required);
+            setPayState(PayState.RequestSuccessful);
+            setTimeout(() => {
+                setRoute(ROUTES.CONFIRMATION);
+            }, 200);
+        }
+        catch (e) {
+            if (e?.name === "ConnectorChainMismatchError") {
+                // Workaround for Rainbow wallet bug -- user is able to switch chain without
+                // the wallet updating the chain ID for wagmi.
+                log("Chain mismatch detected, attempting to switch and retry");
+                const switchSuccessful = await trySwitchingChain(option, true);
+                if (switchSuccessful) {
+                    try {
+                        await payWithToken(option.required);
+                        return; // Payment successful after switching chain
+                    }
+                    catch (retryError) {
+                        console.error("Failed to pay with token after switching chain", retryError);
+                        throw retryError;
+                    }
+                }
+            }
+            setPayState(PayState.RequestCancelled);
+            console.error("Failed to pay with token", e);
+        }
+    };
+    let transferTimeout; // Prevent double-triggering in React dev strict mode.
+    useEffect(() => {
+        if (!selectedTokenOption)
+            return;
+        // Give user time to see the UI before opening
+        transferTimeout = setTimeout(() => {
+            handleTransfer(selectedTokenOption);
+        }, 100);
+        return () => {
+            clearTimeout(transferTimeout);
+        };
+    }, []);
+    useEffect(() => {
+        triggerResize();
+    }, [payState]);
+    return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": true, children: jsxs(AnimatePresence, { children: [jsx(ChainLogoContainer, { children: selectedTokenOption &&
+                                    chainToLogo[selectedTokenOption.required.token.chainId] }, "ChainLogoContainer"), jsx(CircleSpinner, { logo: jsx("img", { src: selectedTokenOption?.required.token.logoURI, alt: selectedTokenOption?.required.token.symbol }, selectedTokenOption?.required.token.logoURI), loading: true, unavailable: false }, "CircleSpinner")] }) }) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), selectedTokenOption && (jsx(PaymentDetails, { selectedTokenOption: selectedTokenOption })), payState === PayState.RequestCancelled && (jsx(Button, { onClick: () => selectedTokenOption ? handleTransfer(selectedTokenOption) : null, children: "Retry Payment" }))] })] }));
+};
+const PaymentDetails = ({ selectedTokenOption, }) => {
+    const totalUsd = selectedTokenOption.required.usd;
+    const feesUsd = selectedTokenOption.fees.usd;
+    const subtotalUsd = totalUsd - feesUsd;
+    return (jsxs(FeesContainer, { children: [feesUsd > 0 && (jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Subtotal" }), jsxs(ModalBody, { children: ["$", subtotalUsd.toFixed(2)] })] })), jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Fees" }), feesUsd === 0 ? (jsx(Badge, { children: "Free" })) : (jsxs(ModalBody, { children: ["$", feesUsd.toFixed(2)] }))] }), jsxs(FeeRow, { style: { marginTop: 8 }, children: [jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }), jsxs(ModalBody, { style: { fontWeight: 600 }, children: ["$", totalUsd.toFixed(2)] })] })] }));
+};
+const LoadingContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+`;
+const AnimationContainer = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${(props) => props.$circle &&
+    css `
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
+  }
+`;
+const ChainLogoContainer = styled(motion.div) `
+  z-index: 10;
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  overflow: hidden;
+
+  color: var(--ck-body-background);
+  transition: color 200ms ease;
+
+  &:before {
+    z-index: 5;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    background: var(--ck-body-color);
+  }
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const FeesContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 4px;
+  margin: 16px 0;
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    & ${ModalBody} {
+      margin: 0 !important;
+      max-width: 100% !important;
+      text-align: left !important;
+    }
+  }
+`;
+const FeeRow = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 50%;
+`;
+const Badge = styled.span `
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: var(--ck-primary-button-border-radius);
+  font-size: 14px;
+  font-weight: 400;
+  background: var(
+    --ck-secondary-button-background,
+    var(--ck-body-background-secondary)
+  );
+  color: var(--ck-body-color-muted);
+`;
+
+export { PayWithToken as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/PayWithToken/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/SelectDepositAddressChain/index.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
+import Button from '../../Common/Button/index.js';
+import OptionsList from '../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+
+const SelectDepositAddressChain = () => {
+    const { setRoute, paymentState } = usePayContext();
+    const { setSelectedDepositAddressOption, depositAddressOptions } = paymentState;
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !depositAddressOptions.loading &&
+                depositAddressOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                }, children: [jsx(ModalH1, { children: "Chains unavailable." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: depositAddressOptions.loading, options: depositAddressOptions.options?.map((option) => {
+                    return {
+                        id: option.id,
+                        title: option.id,
+                        icons: [option.logoURI],
+                        onClick: () => {
+                            setSelectedDepositAddressOption(option);
+                            setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+                        },
+                    };
+                }) ?? [] })] }));
+};
+
+export { SelectDepositAddressChain as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/SelectDepositAddressChain/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/SelectMethod/index.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { PageContent } from '../../Common/Modal/styles.js';
+import { getAddressContraction } from '@daimo/common';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useAccount, useDisconnect } from 'wagmi';
+import { Solana, Bitcoin, Tron, Zcash } from '../../../assets/chains.js';
+import { MetaMask, Rainbow, Coinbase, Rabby } from '../../../assets/logos.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import OptionsList from '../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+
+// Get 3 icons, skipping the one that is already connected
+function getBestUnconnectedWalletIcons(connector) {
+    const icons = [];
+    const strippedId = connector?.id.toLowerCase(); // some connector ids can have weird casing and or suffixes and prefixes
+    const [isMetaMask, isRainbow, isCoinbase] = [
+        strippedId?.includes("metamask"),
+        strippedId?.includes("rainbow"),
+        strippedId?.includes("coinbase"),
+    ];
+    if (!isMetaMask)
+        icons.push(jsx(MetaMask, {}));
+    if (!isRainbow)
+        icons.push(jsx(Rainbow, {}));
+    if (!isCoinbase)
+        icons.push(jsx(Coinbase, {}));
+    if (icons.length < 3)
+        icons.push(jsx(Rabby, {}));
+    return icons;
+}
+function getSolanaOption() {
+    const { wallets } = useWallet();
+    const { setRoute } = usePayContext();
+    if (wallets.length === 0)
+        return null;
+    return {
+        id: "solana",
+        title: "Pay on Solana",
+        icons: [jsx(Solana, {})],
+        onClick: () => {
+            setRoute(ROUTES.SOLANA_CONNECT);
+        },
+    };
+}
+function getDepositAddressOption(depositAddressOptions) {
+    const { setRoute } = usePayContext();
+    if (!depositAddressOptions.loading &&
+        depositAddressOptions.options.length === 0) {
+        return null;
+    }
+    return {
+        id: "depositAddress",
+        title: "Pay on another chain",
+        subtitle: "Bitcoin, Tron, Zcash...",
+        icons: [jsx(Bitcoin, {}), jsx(Tron, {}), jsx(Zcash, {})],
+        onClick: () => {
+            setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+        },
+    };
+}
+const SelectMethod = () => {
+    const isMobile = useIsMobile();
+    const { address, isConnected, connector } = useAccount();
+    const { disconnectAsync } = useDisconnect();
+    const { setRoute, paymentState, log } = usePayContext();
+    const { setSelectedExternalOption, externalPaymentOptions, depositAddressOptions, senderEnsName, } = paymentState;
+    const displayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
+    const connectedWalletOption = isConnected
+        ? {
+            id: "connectedWallet",
+            title: `Pay with ${displayName}`,
+            icons: connector && connector.icon ? [connector.icon] : [jsx(MetaMask, {})],
+            onClick: () => {
+                setRoute(ROUTES.SELECT_TOKEN);
+            },
+        }
+        : null;
+    const unconnectedWalletOption = {
+        id: "unconnectedWallet",
+        title: isConnected ? `Pay with another wallet` : `Pay with wallet`,
+        icons: getBestUnconnectedWalletIcons(connector),
+        onClick: async () => {
+            await disconnectAsync();
+            setRoute(ROUTES.CONNECTORS);
+        },
+    };
+    const walletOptions = connectedWalletOption
+        ? [connectedWalletOption, unconnectedWalletOption]
+        : [unconnectedWalletOption];
+    log(`[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(externalPaymentOptions.options)}`);
+    const solanaOption = getSolanaOption();
+    const depositAddressOption = getDepositAddressOption(depositAddressOptions);
+    const options = [
+        ...walletOptions,
+        ...(solanaOption ? [solanaOption] : []),
+        ...(externalPaymentOptions.options ?? []).map((option) => ({
+            id: option.id,
+            title: option.cta,
+            icons: [option.logoURI],
+            onClick: () => {
+                setSelectedExternalOption(option);
+                setRoute(ROUTES.WAITING_OTHER);
+            },
+        })),
+        ...(depositAddressOption ? [depositAddressOption] : []),
+    ];
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, {}), jsx(OptionsList, { requiredSkeletons: isMobile ? 4 : 3, isLoading: externalPaymentOptions.loading, options: externalPaymentOptions.loading ? [] : options }), jsx(PoweredByFooter, {})] }));
+};
+
+export { SelectMethod as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/SelectMethod/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/SelectToken/index.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
+import { capitalize, getDisplayPrice } from '@daimo/common';
+import { getChainName } from '@daimo/contract';
+import { motion } from 'framer-motion';
+import { chainToLogo } from '../../../assets/chains.js';
+import styled from '../../../styles/styled/index.js';
+import Button from '../../Common/Button/index.js';
+import OptionsList from '../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+
+function getDaimoTokenKey(token) {
+    return `${token.chainId}-${token.token}`;
+}
+const TokenChainLogo = ({ token }) => {
+    return (jsxs(TokenChainContainer, { children: [jsx("img", { src: token.logoURI, alt: token.symbol, style: { borderRadius: 9999 } }), jsx(ChainContainer, { children: chainToLogo[token.chainId] })] }));
+};
+const TokenChainContainer = styled(motion.div) `
+  width: 100%;
+  height: 100%;
+`;
+const ChainContainer = styled(motion.div) `
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  overflow: hidden;
+  bottom: 0px;
+  right: 0px;
+`;
+const SelectToken = () => {
+    const { setRoute, paymentState } = usePayContext();
+    const { setSelectedTokenOption, walletPaymentOptions } = paymentState;
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !walletPaymentOptions.isLoading &&
+                walletPaymentOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: walletPaymentOptions.options?.map((option) => {
+                    const capitalizedChainName = capitalize(getChainName(option.required.token.chainId));
+                    const title = `${getDisplayPrice(option.required)} ${option.required.token.symbol} on ${capitalizedChainName}`;
+                    const subtitle = `Balance: ${getDisplayPrice(option.balance)} ${option.balance.token.symbol}`;
+                    return {
+                        id: getDaimoTokenKey(option.required.token),
+                        title,
+                        subtitle,
+                        icons: [
+                            jsx(TokenChainLogo, { token: option.required.token }, getDaimoTokenKey(option.required.token)),
+                        ],
+                        onClick: () => {
+                            setSelectedTokenOption(option);
+                            setRoute(ROUTES.PAY_WITH_TOKEN);
+                        },
+                    };
+                }) ?? [] })] }));
+};
+
+export { SelectToken as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/SelectToken/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/Solana/ConnectSolana/index.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PageContent, ModalContent, ModalH1 } from '../../../Common/Modal/styles.js';
+import { useWallet } from '@solana/wallet-adapter-react';
+import Button from '../../../Common/Button/index.js';
+import OptionsList from '../../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../../Common/OrderHeader/index.js';
+import { usePayContext, ROUTES } from '../../../DaimoPay.js';
+
+const ConnectSolana = () => {
+    const { setSolanaConnector, setRoute } = usePayContext();
+    const solanaWallets = useWallet();
+    const options = solanaWallets.wallets.map((wallet) => ({
+        id: wallet.adapter.name,
+        title: `${wallet.adapter.name}`,
+        icons: [
+            jsx(SquircleIcon, { icon: wallet.adapter.icon, alt: wallet.adapter.name }),
+        ],
+        onClick: async () => {
+            setSolanaConnector(wallet.adapter.name);
+            if (solanaWallets.connected) {
+                await solanaWallets.disconnect();
+            }
+            setRoute(ROUTES.SOLANA_CONNECTOR);
+        },
+    }));
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), solanaWallets.wallets.length === 0 && (jsxs(ModalContent, { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                }, children: [jsx(ModalH1, { children: "No Solana wallets detected." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { options: options })] }));
+};
+const SquircleIcon = ({ icon, alt }) => (jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: jsx("img", { src: icon, alt: alt }) }));
+
+export { ConnectSolana as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/Solana/ConnectSolana/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/Solana/ConnectorSolana/index.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../../Common/Modal/styles.js';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import styled from '../../../../styles/styled/index.js';
+import { usePayContext, ROUTES } from '../../../DaimoPay.js';
+import SquircleSpinner from '../../../Spinners/SquircleSpinner/index.js';
+import { LoadingContainer } from '../../WaitingOther/index.js';
+
+const ConnectSolana = () => {
+    const solanaWallets = useWallet();
+    const isConnected = solanaWallets.connected;
+    const { solanaConnector, setRoute } = usePayContext();
+    const selectedWallet = solanaWallets.wallets.find((wallet) => wallet.adapter.name === solanaConnector);
+    useEffect(() => {
+        if (!solanaConnector)
+            return;
+        solanaWallets.select(solanaConnector);
+    }, [solanaConnector]);
+    useEffect(() => {
+        if (isConnected) {
+            // Wait so user can see it's connected
+            setTimeout(() => setRoute(ROUTES.SOLANA_SELECT_TOKEN), 500);
+        }
+    }, [isConnected]);
+    if (!solanaConnector)
+        return null;
+    return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { children: jsx(AnimatePresence, { children: jsx(SquircleSpinner, { logo: jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: jsx("img", { src: selectedWallet?.adapter.icon, alt: selectedWallet?.adapter.name }) }), loading: true }) }) }) }), jsx(ModalContent, { style: { paddingBottom: 0 }, children: isConnected ? (jsx(ModalH1, { children: "Connected" })) : (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Requesting Connection" }), jsxs(ModalBody, { children: ["Open ", selectedWallet?.adapter.name, " to continue."] })] })) })] }));
+};
+const AnimationContainer = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+  }
+`;
+
+export { ConnectSolana as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/Solana/ConnectorSolana/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/Solana/PayWithSolanaToken/index.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext, ROUTES } from '../../../DaimoPay.js';
+import { WalletSignTransactionError } from '@solana/wallet-adapter-base';
+import { PageContent, ModalContent, ModalH1 } from '../../../Common/Modal/styles.js';
+import { assert } from '@daimo/common';
+import { motion, AnimatePresence } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../../styles/styled/index.js';
+import Button from '../../../Common/Button/index.js';
+import CircleSpinner from '../../../Spinners/CircleSpinner/index.js';
+
+var PayState;
+(function (PayState) {
+    PayState["RequestingPayment"] = "Requesting Payment";
+    PayState["RequestCancelled"] = "Payment Cancelled";
+    PayState["RequestFailed"] = "Payment Failed";
+    PayState["RequestSuccessful"] = "Payment Successful";
+})(PayState || (PayState = {}));
+const PayWithSolanaToken = () => {
+    const { triggerResize, paymentState, setRoute } = usePayContext();
+    const { selectedSolanaTokenOption, payWithSolanaToken } = paymentState;
+    const [payState, setPayState] = useState(PayState.RequestingPayment);
+    const handleTransfer = async () => {
+        try {
+            setPayState(PayState.RequestingPayment);
+            assert(!!selectedSolanaTokenOption, "No token option selected");
+            await payWithSolanaToken(selectedSolanaTokenOption.required.token.token);
+            setPayState(PayState.RequestSuccessful);
+            setTimeout(() => {
+                setRoute(ROUTES.CONFIRMATION);
+            }, 200);
+        }
+        catch (error) {
+            console.error(error);
+            if (error instanceof WalletSignTransactionError) {
+                setPayState(PayState.RequestCancelled);
+            }
+            else {
+                setPayState(PayState.RequestFailed);
+            }
+        }
+    };
+    let transferTimeout; // Prevent double-triggering in React dev strict mode.
+    useEffect(() => {
+        if (!selectedSolanaTokenOption)
+            return;
+        // Give user time to see the UI before opening
+        transferTimeout = setTimeout(handleTransfer, 100);
+        return () => clearTimeout(transferTimeout);
+    }, []);
+    useEffect(() => {
+        triggerResize();
+    }, [payState]);
+    return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": true, children: jsx(AnimatePresence, { children: jsx(CircleSpinner, { logo: jsx("img", { src: selectedSolanaTokenOption?.required.token.logoURI, alt: selectedSolanaTokenOption?.required.token.symbol }, selectedSolanaTokenOption?.required.token.logoURI), loading: true, unavailable: false }, "CircleSpinner") }) }) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), payState === PayState.RequestCancelled && (jsx(Button, { onClick: handleTransfer, children: "Retry Payment" })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" }))] })] }));
+};
+const LoadingContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+`;
+const AnimationContainer = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${(props) => props.$circle &&
+    css `
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
+  }
+`;
+
+export { PayWithSolanaToken as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/Solana/PayWithSolanaToken/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/Solana/SelectSolanaToken/index.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { usePayContext, ROUTES } from '../../../DaimoPay.js';
+import { PageContent, ModalContent, ModalH1 } from '../../../Common/Modal/styles.js';
+import { getDisplayPrice } from '@daimo/common';
+import Button from '../../../Common/Button/index.js';
+import OptionsList from '../../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../../Common/OrderHeader/index.js';
+
+const SelectSolanaToken = () => {
+    const { paymentState, setRoute } = usePayContext();
+    const { solanaPaymentOptions, setSelectedSolanaTokenOption } = paymentState;
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !solanaPaymentOptions.isLoading &&
+                solanaPaymentOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: solanaPaymentOptions.options?.map((option) => {
+                    const title = `${getDisplayPrice(option.required)} ${option.required.token.symbol}`;
+                    const subtitle = `Balance: ${getDisplayPrice(option.balance)} ${option.balance.token.symbol}`;
+                    return {
+                        id: `${option.required.token.token}-${option.required.token.symbol}`,
+                        title,
+                        subtitle,
+                        icons: [
+                            jsx("img", { src: option.required.token.logoURI, alt: option.required.token.symbol, style: { borderRadius: 9999 } }),
+                        ],
+                        onClick: () => {
+                            setSelectedSolanaTokenOption(option);
+                            setRoute(ROUTES.SOLANA_PAY_WITH_TOKEN);
+                        },
+                    };
+                }) ?? [] })] }));
+};
+
+export { SelectSolanaToken as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/Solana/SelectSolanaToken/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}