@daimo/pay 1.16.8 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/build/index.d.ts +2 -2
- package/build/package.json.js +2 -2
- package/build/src/components/Common/Modal/index.js +6 -2
- package/build/src/components/Common/Modal/index.js.map +1 -1
- package/build/src/components/Common/OrderHeader/index.js +2 -10
- package/build/src/components/Common/OrderHeader/index.js.map +1 -1
- package/build/src/components/DaimoPayModal/ConnectWithQRCode.js +19 -10
- package/build/src/components/DaimoPayModal/ConnectWithQRCode.js.map +1 -1
- package/build/src/components/Pages/Connectors/index.js +1 -1
- package/build/src/components/Pages/Connectors/index.js.map +1 -1
- package/build/src/components/Pages/Error/index.js +1 -1
- package/build/src/components/Pages/Error/index.js.map +1 -1
- package/build/src/components/Pages/SelectDepositAddressAmount/index.js +2 -2
- package/build/src/components/Pages/SelectDepositAddressAmount/index.js.map +1 -1
- package/build/src/components/Pages/SelectDepositAddressChain/index.js +1 -1
- package/build/src/components/Pages/SelectDepositAddressChain/index.js.map +1 -1
- package/build/src/components/Pages/SelectExchange/index.js +2 -2
- package/build/src/components/Pages/SelectExchange/index.js.map +1 -1
- package/build/src/components/Pages/SelectToken/index.js +2 -2
- package/build/src/components/Pages/SelectToken/index.js.map +1 -1
- package/build/src/components/Pages/SelectZKP/index.js +2 -2
- package/build/src/components/Pages/SelectZKP/index.js.map +1 -1
- package/build/src/components/Pages/WaitingExternal/index.js +9 -6
- package/build/src/components/Pages/WaitingExternal/index.js.map +1 -1
- package/build/src/hooks/usePaymentState.js +4 -8
- package/build/src/hooks/usePaymentState.js.map +1 -1
- package/build/src/hooks/useTokenOptions.js +2 -2
- package/build/src/hooks/useTokenOptions.js.map +1 -1
- package/build/src/hooks/useWalletPaymentOptions.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -58,6 +58,7 @@ Daimo Pay is noncustodial and runs on open-source, audited contracts. See `/pack
|
|
|
58
58
|
|
|
59
59
|
Audits:
|
|
60
60
|
|
|
61
|
+
- [Nethermind, 2025 Aug](https://github.com/user-attachments/files/22227674/NM-0585-Daimo.pdf)
|
|
61
62
|
- [Nethermind, 2025 Apr](https://github.com/user-attachments/files/20544714/NM-0500-Daimo-Pay-final-report.pdf)
|
|
62
63
|
|
|
63
64
|
## Support
|
|
@@ -70,4 +71,4 @@ See [LICENSE](https://github.com/daimo-eth/pay/blob/master/packages/connectkit/L
|
|
|
70
71
|
|
|
71
72
|
## Credits
|
|
72
73
|
|
|
73
|
-
Daimo Pay SDK
|
|
74
|
+
Daimo Pay SDK uses a fork of [ConnectKit](https://github.com/family/connectkit), developed by [Family](https://family.co). We're grateful to them for making ConnectKit open-source.
|
package/build/index.d.ts
CHANGED
|
@@ -535,8 +535,8 @@ interface PaymentState {
|
|
|
535
535
|
selectedDepositAddressOption: DepositAddressPaymentOptionMetadata | undefined;
|
|
536
536
|
getOrderUsdLimit: () => number;
|
|
537
537
|
setPaymentWaitingMessage: (message: string | undefined) => void;
|
|
538
|
-
tokenMode: "evm" | "solana" | "
|
|
539
|
-
setTokenMode: (mode: "evm" | "solana" | "
|
|
538
|
+
tokenMode: "evm" | "solana" | "all";
|
|
539
|
+
setTokenMode: (mode: "evm" | "solana" | "all") => void;
|
|
540
540
|
setSelectedWallet: (wallet: WalletConfigProps | undefined) => void;
|
|
541
541
|
setSelectedWalletDeepLink: (deepLink: string | undefined) => void;
|
|
542
542
|
setSelectedExternalOption: (option: ExternalPaymentOptionMetadata | undefined) => void;
|
package/build/package.json.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var name = "@daimo/pay";
|
|
2
|
-
var version = "1.
|
|
2
|
+
var version = "1.17.0";
|
|
3
3
|
var author = "Daimo";
|
|
4
4
|
var homepage = "https://pay.daimo.com";
|
|
5
5
|
var license = "BSD-2-Clause license";
|
|
@@ -31,7 +31,7 @@ var scripts = {
|
|
|
31
31
|
lint: "eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings=0"
|
|
32
32
|
};
|
|
33
33
|
var dependencies = {
|
|
34
|
-
"@daimo/pay-common": "1.
|
|
34
|
+
"@daimo/pay-common": "1.17.0",
|
|
35
35
|
"@solana/wallet-adapter-base": "^0.9.23",
|
|
36
36
|
"@solana/wallet-adapter-react": "^0.15.35",
|
|
37
37
|
"@solana/web3.js": "^1.95.4",
|
|
@@ -7,7 +7,7 @@ import { isMobile, flattenChildren } from '../../../utils/index.js';
|
|
|
7
7
|
import { ModalContainer, BackgroundOverlay, Container, BoxContainer, DisclaimerBackground, Disclaimer, ErrorMessage, ControllerContainer, CloseButton, BackButton, InfoButton, ModalHeading, InnerContainer, PageContents, PageContainer, TextWithHr } from './styles.js';
|
|
8
8
|
import useLockBodyScroll from '../../../hooks/useLockBodyScroll.js';
|
|
9
9
|
import { usePayContext } from '../../../hooks/usePayContext.js';
|
|
10
|
-
import { getChainName } from '@daimo/pay-common';
|
|
10
|
+
import { getChainName, shouldShowExternalQRCodeOnDesktop } from '@daimo/pay-common';
|
|
11
11
|
import { useTransition } from 'react-transition-state';
|
|
12
12
|
import { useAccount, useSwitchChain } from 'wagmi';
|
|
13
13
|
import { ROUTES } from '../../../constants/routes.js';
|
|
@@ -213,13 +213,14 @@ const Modal = ({
|
|
|
213
213
|
"--height": dimensions.height,
|
|
214
214
|
"--width": dimensions.width
|
|
215
215
|
};
|
|
216
|
+
const shouldShowWalletQRCodeOnDesktop = context.pendingConnectorId === WALLET_ID_MOBILE_WALLETS || context.pendingConnectorId === "world";
|
|
216
217
|
function getHeading() {
|
|
217
218
|
const payWithString = flattenChildren(locales.payWith).join("");
|
|
218
219
|
switch (context.route) {
|
|
219
220
|
case ROUTES.ABOUT:
|
|
220
221
|
return locales.aboutScreen_heading;
|
|
221
222
|
case ROUTES.CONNECT:
|
|
222
|
-
if (
|
|
223
|
+
if (shouldShowWalletQRCodeOnDesktop) {
|
|
223
224
|
return locales.scanWithPhone;
|
|
224
225
|
} else {
|
|
225
226
|
return walletInfo?.name;
|
|
@@ -245,6 +246,9 @@ const Modal = ({
|
|
|
245
246
|
if (!selectedSolanaTokenOption) return void 0;
|
|
246
247
|
return `${payWithString} ${selectedSolanaTokenOption.required.token.symbol}`;
|
|
247
248
|
case ROUTES.WAITING_EXTERNAL:
|
|
249
|
+
if (selectedExternalOption && shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) && !mobile) {
|
|
250
|
+
return locales.scanWithPhone;
|
|
251
|
+
}
|
|
248
252
|
return selectedExternalOption?.cta;
|
|
249
253
|
case ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN:
|
|
250
254
|
return locales.selectChain;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Modal/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { AnimatePresence, motion, Variants } from \"framer-motion\";\n\nimport { ResetContainer } from \"../../../styles\";\nimport Portal from \"../Portal\";\n\nimport { flattenChildren, isMobile } from \"../../../utils\";\n\nimport {\n BackButton,\n BackgroundOverlay,\n BoxContainer,\n CloseButton,\n Container,\n ControllerContainer,\n Disclaimer,\n DisclaimerBackground,\n ErrorMessage,\n InfoButton,\n InnerContainer,\n ModalContainer,\n ModalHeading,\n PageContainer,\n PageContents,\n TextWithHr,\n} from \"./styles\";\n\nimport useLockBodyScroll from \"../../../hooks/useLockBodyScroll\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { getChainName } from \"@daimo/pay-common\";\nimport { useTransition } from \"react-transition-state\";\nimport { useAccount, useSwitchChain } from \"wagmi\";\nimport { AuthIcon } from \"../../../assets/icons\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport FocusTrap from \"../../../hooks/useFocusTrap\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport { CustomTheme } from \"../../../types\";\nimport {\n useWallet,\n WALLET_ID_MOBILE_WALLETS,\n} from \"../../../wallets/useWallets\";\nimport { useThemeContext } from \"../../DaimoPayThemeProvider/DaimoPayThemeProvider\";\nimport FitText from \"../FitText\";\n\nconst ProfileIcon = ({ isSignedIn }: { isSignedIn?: boolean }) => (\n <div style={{ position: \"relative\" }}>\n {isSignedIn ? (\n <AuthIcon\n style={{\n bottom: -1,\n right: -1,\n }}\n />\n ) : (\n <div\n style={{\n zIndex: 2,\n position: \"absolute\",\n top: -2,\n right: -2,\n background: \"#1A88F8\",\n borderRadius: 8,\n boxShadow: \"0 0 0 2px var(--ck-body-background)\",\n width: 8,\n height: 8,\n }}\n />\n )}\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ overflow: \"visible\" }}\n >\n <circle cx=\"10\" cy=\"10\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path\n d=\"M16.5 16.775C14.8618 15.0649 12.5552 14 10 14C7.44477 14 5.13825 15.0649 3.5 16.775\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"10\" cy=\"8\" r=\"3\" stroke=\"currentColor\" strokeWidth=\"2\" />\n </svg>\n </div>\n);\nconst InfoIcon = ({ ...props }) => (\n <svg\n aria-hidden=\"true\"\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M20 11C20 15.9706 15.9706 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2C15.9706 2 20 6.02944 20 11ZM22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11ZM11.6445 12.7051C11.6445 13.1348 11.3223 13.4678 10.7744 13.4678C10.2266 13.4678 9.92578 13.1885 9.92578 12.6191V12.4795C9.92578 11.4268 10.4951 10.8574 11.2686 10.3203C12.2031 9.67578 12.665 9.32129 12.665 8.59082C12.665 7.76367 12.0205 7.21582 11.043 7.21582C10.3232 7.21582 9.80762 7.57031 9.45312 8.16113C9.38282 8.24242 9.32286 8.32101 9.2667 8.39461C9.04826 8.68087 8.88747 8.8916 8.40039 8.8916C8.0459 8.8916 7.66992 8.62305 7.66992 8.15039C7.66992 7.96777 7.70215 7.7959 7.75586 7.61328C8.05664 6.625 9.27051 5.75488 11.1182 5.75488C12.9336 5.75488 14.5234 6.71094 14.5234 8.50488C14.5234 9.7832 13.7822 10.417 12.7402 11.1045C11.999 11.5986 11.6445 11.9746 11.6445 12.5762V12.7051ZM11.9131 15.5625C11.9131 16.1855 11.376 16.6797 10.7529 16.6797C10.1299 16.6797 9.59277 16.1748 9.59277 15.5625C9.59277 14.9395 10.1191 14.4453 10.7529 14.4453C11.3867 14.4453 11.9131 14.9287 11.9131 15.5625Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\nconst CloseIcon = ({ ...props }) => (\n <motion.svg\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M1 13L13 1M1 1L13 13\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </motion.svg>\n);\nconst BackIcon = ({ ...props }) => (\n <motion.svg\n width={9}\n height={16}\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M8 1L1 8L8 15\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </motion.svg>\n);\n\nconst contentTransitionDuration = 0.22;\n\nexport const contentVariants: Variants = {\n initial: {\n //willChange: 'transform,opacity',\n zIndex: 2,\n opacity: 0,\n },\n animate: {\n opacity: 1,\n scale: 1,\n transition: {\n duration: contentTransitionDuration * 0.75,\n delay: contentTransitionDuration * 0.25,\n ease: [0.26, 0.08, 0.25, 1],\n },\n },\n exit: {\n zIndex: 1,\n opacity: 0,\n pointerEvents: \"none\",\n position: \"absolute\",\n left: [\"50%\", \"50%\"],\n x: [\"-50%\", \"-50%\"],\n transition: {\n duration: contentTransitionDuration,\n ease: [0.26, 0.08, 0.25, 1],\n },\n },\n};\n\ntype ModalProps = {\n open?: boolean;\n pages: Record<ROUTES, React.ReactNode>;\n pageId: string;\n positionInside?: boolean;\n inline?: boolean;\n onClose?: () => void;\n onBack?: () => void;\n onInfo?: () => void;\n\n demo?: {\n theme: string;\n mode?: string;\n customTheme: CustomTheme;\n };\n};\nconst Modal: React.FC<ModalProps> = ({\n open,\n pages,\n pageId,\n positionInside,\n inline,\n demo,\n onClose,\n onBack,\n onInfo,\n}) => {\n const context = usePayContext();\n const themeContext = useThemeContext();\n const mobile = isMobile();\n const {\n selectedExternalOption,\n selectedTokenOption,\n selectedSolanaTokenOption,\n selectedDepositAddressOption,\n } = context.paymentState;\n const { order } = useDaimoPay();\n\n const { connector } = useAccount();\n const wallet = useWallet(connector?.id ?? \"\");\n\n const walletInfo = {\n name: wallet?.name,\n shortName: wallet?.shortName ?? wallet?.name,\n icon: wallet?.iconConnector ?? wallet?.icon,\n iconShape: wallet?.iconShape ?? \"circle\",\n iconShouldShrink: wallet?.iconShouldShrink,\n };\n\n const locales = useLocales({\n CONNECTORNAME: walletInfo?.name,\n });\n\n const [state, setOpen] = useTransition({\n timeout: 160,\n preEnter: true,\n mountOnEnter: true,\n unmountOnExit: true,\n });\n const mounted = !(state === \"exited\" || state === \"unmounted\");\n const rendered = state === \"preEnter\" || state !== \"exiting\";\n const currentDepth =\n context.route === ROUTES.CONNECTORS\n ? 0\n : context.route === ROUTES.DOWNLOAD\n ? 2\n : 1;\n const prevDepth = usePrevious(currentDepth, currentDepth);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (!positionInside) useLockBodyScroll(mounted);\n\n useEffect(() => {\n setOpen(open);\n if (open) setInTransition(undefined);\n }, [open]);\n\n const [dimensions, setDimensions] = useState<{\n width: string | undefined;\n height: string | undefined;\n }>({\n width: undefined,\n height: undefined,\n });\n const [inTransition, setInTransition] = useState<boolean | undefined>(\n undefined,\n );\n\n // Calculate new content bounds\n const updateBounds = (node: any) => {\n const bounds = {\n width: node?.offsetWidth,\n height: node?.offsetHeight,\n };\n setDimensions({\n width: `${bounds?.width}px`,\n height: `${bounds?.height}px`,\n });\n };\n\n let blockTimeout: ReturnType<typeof setTimeout>;\n const contentRef = useCallback(\n (node: any) => {\n if (!node) return;\n ref.current = node;\n\n // Avoid transition mixups\n setInTransition(inTransition === undefined ? false : true);\n clearTimeout(blockTimeout);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n blockTimeout = setTimeout(() => setInTransition(false), 360);\n\n // Calculate new content bounds\n updateBounds(node);\n },\n [open, inTransition],\n );\n\n // Update layout on chain/network switch to avoid clipping\n const { chain } = useAccount();\n const { switchChain } = useSwitchChain();\n\n const ref = useRef<any>(null);\n useEffect(() => {\n if (ref.current) updateBounds(ref.current);\n }, [chain, switchChain, mobile, context.options, context.resize]);\n\n useEffect(() => {\n if (!mounted) {\n setDimensions({\n width: undefined,\n height: undefined,\n });\n return;\n }\n\n const listener = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && onClose) onClose();\n };\n document.addEventListener(\"keydown\", listener);\n return () => {\n document.removeEventListener(\"keydown\", listener);\n };\n }, [mounted, onClose]);\n\n const dimensionsCSS = {\n \"--height\": dimensions.height,\n \"--width\": dimensions.width,\n } as React.CSSProperties;\n\n function shouldUseQrcode() {\n if (!wallet) return false; // Fail states are shown in the injector flow\n\n const useInjector = wallet.isInstalled;\n return !useInjector;\n }\n\n function getHeading() {\n const payWithString = flattenChildren(locales.payWith).join(\"\");\n switch (context.route) {\n case ROUTES.ABOUT:\n return locales.aboutScreen_heading;\n case ROUTES.CONNECT:\n if (\n context.pendingConnectorId === WALLET_ID_MOBILE_WALLETS ||\n context.pendingConnectorId === \"world\"\n ) {\n return locales.scanWithPhone;\n } else {\n return walletInfo?.name;\n }\n case ROUTES.SELECT_EXCHANGE:\n return locales.selectExchange;\n case ROUTES.SOLANA_CONNECTOR:\n return context.solanaConnector ?? locales.solanaWallet;\n case ROUTES.CONNECTORS:\n return locales.connectorsScreen_heading;\n case ROUTES.MOBILECONNECTORS:\n return locales.mobileConnectorsScreen_heading;\n case ROUTES.DOWNLOAD:\n return locales.downloadAppScreen_heading;\n case ROUTES.ONBOARDING:\n return locales.onboardingScreen_heading;\n case ROUTES.SWITCHNETWORKS:\n return locales.switchNetworkScreen_heading;\n case ROUTES.SELECT_METHOD:\n case ROUTES.SELECT_TOKEN:\n return order?.metadata.intent;\n case ROUTES.SOLANA_PAY_WITH_TOKEN:\n if (!selectedSolanaTokenOption) return undefined;\n return `${payWithString} ${selectedSolanaTokenOption.required.token.symbol}`;\n case ROUTES.WAITING_EXTERNAL:\n return selectedExternalOption?.cta;\n case ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN:\n return locales.selectChain;\n case ROUTES.WAITING_DEPOSIT_ADDRESS:\n if (!selectedDepositAddressOption) return undefined;\n return `${payWithString} ${selectedDepositAddressOption.id}`;\n case ROUTES.SELECT_ZKP2P:\n return locales.selectApp;\n case ROUTES.SELECT_AMOUNT:\n case ROUTES.SELECT_EXTERNAL_AMOUNT:\n case ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT:\n case ROUTES.SOLANA_SELECT_AMOUNT:\n case ROUTES.SELECT_WALLET_AMOUNT:\n return locales.selectAmount;\n case ROUTES.PAY_WITH_TOKEN:\n if (selectedTokenOption == null) return undefined;\n\n const chainName = getChainName(\n selectedTokenOption.balance.token.chainId,\n );\n return `${payWithString} ${chainName} ${selectedTokenOption.balance.token.symbol}`;\n case ROUTES.CONFIRMATION:\n return locales.paymentSuccessful;\n case ROUTES.ERROR:\n return locales.error;\n case ROUTES.SELECT_WALLET_CHAIN:\n return locales.selectChain;\n }\n }\n\n const Content = (\n <ResetContainer\n $useTheme={demo?.theme ?? themeContext.theme}\n $useMode={demo?.mode ?? themeContext.mode}\n $customTheme={demo?.customTheme ?? themeContext.customTheme}\n >\n <ModalContainer\n role=\"dialog\"\n style={{\n pointerEvents: rendered ? \"auto\" : \"none\",\n position: positionInside ? \"absolute\" : undefined,\n }}\n >\n {!inline && (\n <BackgroundOverlay\n $active={rendered}\n onClick={onClose}\n $blur={context.options?.overlayBlur}\n />\n )}\n <Container\n style={dimensionsCSS}\n initial={false}\n // transition={{\n // ease: [0.2555, 0.1111, 0.2555, 1.0001],\n // duration: !positionInside && state !== 'entered' ? 0 : 0.24,\n // }}\n >\n <div\n style={{\n pointerEvents: inTransition ? \"all\" : \"none\", // Block interaction while transitioning\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"var(--width)\",\n zIndex: 9,\n transition: \"width 200ms ease\",\n }}\n />\n <BoxContainer className={`${rendered && \"active\"}`}>\n <AnimatePresence initial={false}>\n {context.options?.disclaimer &&\n context.route === ROUTES.CONNECTORS && (\n <DisclaimerBackground\n initial={{\n opacity: 0,\n }}\n animate={{\n opacity: 1,\n }}\n exit={{ opacity: 0 }}\n transition={{\n delay: 0,\n duration: 0.2,\n ease: [0.25, 0.1, 0.25, 1.0],\n }}\n >\n <Disclaimer>\n <div>{context.options?.disclaimer}</div>\n </Disclaimer>\n </DisclaimerBackground>\n )}\n </AnimatePresence>\n <AnimatePresence initial={false}>\n {context.errorMessage && (\n <ErrorMessage\n initial={{ y: \"10%\", x: \"-50%\" }}\n animate={{ y: \"-100%\" }}\n exit={{ y: \"100%\" }}\n transition={{ duration: 0.2, ease: \"easeInOut\" }}\n >\n <span>{context.errorMessage}</span>\n <div\n onClick={() => context.displayError(null)}\n style={{\n position: \"absolute\",\n right: 24,\n top: 24,\n cursor: \"pointer\",\n }}\n >\n <CloseIcon />\n </div>\n </ErrorMessage>\n )}\n </AnimatePresence>\n <ControllerContainer>\n {onClose && (\n <CloseButton\n aria-label={flattenChildren(locales.close).toString()}\n onClick={onClose}\n >\n <CloseIcon />\n </CloseButton>\n )}\n <div\n style={{\n position: \"absolute\",\n top: 23,\n left: 20,\n width: 32,\n height: 32,\n }}\n >\n <AnimatePresence>\n {onBack ? (\n <BackButton\n disabled={inTransition}\n aria-label={flattenChildren(locales.back).toString()}\n key=\"backButton\"\n onClick={onBack}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{\n duration: mobile ? 0 : 0.1,\n delay: mobile ? 0.01 : 0,\n }}\n >\n <BackIcon />\n </BackButton>\n ) : (\n onInfo &&\n !context.options?.hideQuestionMarkCTA && (\n <InfoButton\n disabled={inTransition}\n aria-label={flattenChildren(\n locales.moreInformation,\n ).toString()}\n key=\"infoButton\"\n onClick={onInfo}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{\n duration: mobile ? 0 : 0.1,\n delay: mobile ? 0.01 : 0,\n }}\n >\n <InfoIcon />\n </InfoButton>\n )\n )}\n </AnimatePresence>\n </div>\n </ControllerContainer>\n\n <ModalHeading>\n <AnimatePresence>\n <motion.div\n style={{\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: 52,\n right: 52,\n display: \"flex\",\n //alignItems: 'center',\n justifyContent: \"center\",\n }}\n key={`${context.route}`}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{\n duration: mobile ? 0 : 0.17,\n delay: mobile ? 0.01 : 0,\n }}\n >\n <FitText>{getHeading()}</FitText>\n </motion.div>\n </AnimatePresence>\n </ModalHeading>\n\n <InnerContainer>\n {Object.keys(pages).map((key) => (\n <Page\n key={key}\n open={key === pageId}\n initial={!positionInside && state !== \"entered\"}\n enterAnim={\n key === pageId\n ? currentDepth > prevDepth\n ? \"active-scale-up\"\n : \"active\"\n : \"\"\n }\n exitAnim={\n key !== pageId\n ? currentDepth < prevDepth\n ? \"exit-scale-down\"\n : \"exit\"\n : \"\"\n }\n >\n <PageContents\n key={`inner-${key}`}\n ref={contentRef}\n style={{\n pointerEvents:\n key === pageId && rendered ? \"auto\" : \"none\",\n }}\n >\n {pages[key]}\n </PageContents>\n </Page>\n ))}\n </InnerContainer>\n </BoxContainer>\n </Container>\n </ModalContainer>\n </ResetContainer>\n );\n return (\n <>\n {mounted && (\n <>\n {positionInside ? (\n Content\n ) : (\n <>\n {\n <Portal>\n <FocusTrap>{Content}</FocusTrap>\n </Portal>\n }\n </>\n )}\n </>\n )}\n </>\n );\n};\n\ntype PageProps = {\n children?: React.ReactNode;\n open?: boolean;\n initial: boolean;\n prevDepth?: number;\n currentDepth?: number;\n enterAnim?: string;\n exitAnim?: string;\n};\n\nconst Page: React.FC<PageProps> = ({\n children,\n open,\n initial,\n prevDepth,\n currentDepth,\n enterAnim,\n exitAnim,\n}) => {\n const [state, setOpen] = useTransition({\n timeout: 400,\n preEnter: true,\n initialEntered: open,\n mountOnEnter: true,\n unmountOnExit: true,\n });\n const mounted = !(state === \"exited\" || state === \"unmounted\");\n const rendered = state === \"preEnter\" || state !== \"exiting\";\n\n useEffect(() => {\n setOpen(open);\n }, [open]);\n\n if (!mounted) return null;\n\n return (\n <PageContainer\n className={`${rendered ? enterAnim : exitAnim}`}\n style={{\n animationDuration: initial ? \"0ms\" : undefined,\n animationDelay: initial ? \"0ms\" : undefined,\n }}\n >\n {children}\n </PageContainer>\n );\n};\n\nexport const OrDivider = ({ children }: { children?: React.ReactNode }) => {\n const locales = useLocales();\n return (\n <TextWithHr>\n <span>{children ?? locales.or}</span>\n </TextWithHr>\n );\n};\n\nexport default Modal;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Modal/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { AnimatePresence, motion, Variants } from \"framer-motion\";\n\nimport { ResetContainer } from \"../../../styles\";\nimport Portal from \"../Portal\";\n\nimport { flattenChildren, isMobile } from \"../../../utils\";\n\nimport {\n BackButton,\n BackgroundOverlay,\n BoxContainer,\n CloseButton,\n Container,\n ControllerContainer,\n Disclaimer,\n DisclaimerBackground,\n ErrorMessage,\n InfoButton,\n InnerContainer,\n ModalContainer,\n ModalHeading,\n PageContainer,\n PageContents,\n TextWithHr,\n} from \"./styles\";\n\nimport useLockBodyScroll from \"../../../hooks/useLockBodyScroll\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n getChainName,\n shouldShowExternalQRCodeOnDesktop,\n} from \"@daimo/pay-common\";\nimport { useTransition } from \"react-transition-state\";\nimport { useAccount, useSwitchChain } from \"wagmi\";\nimport { AuthIcon } from \"../../../assets/icons\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport FocusTrap from \"../../../hooks/useFocusTrap\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport { CustomTheme } from \"../../../types\";\nimport {\n useWallet,\n WALLET_ID_MOBILE_WALLETS,\n} from \"../../../wallets/useWallets\";\nimport { useThemeContext } from \"../../DaimoPayThemeProvider/DaimoPayThemeProvider\";\nimport FitText from \"../FitText\";\n\nconst ProfileIcon = ({ isSignedIn }: { isSignedIn?: boolean }) => (\n <div style={{ position: \"relative\" }}>\n {isSignedIn ? (\n <AuthIcon\n style={{\n bottom: -1,\n right: -1,\n }}\n />\n ) : (\n <div\n style={{\n zIndex: 2,\n position: \"absolute\",\n top: -2,\n right: -2,\n background: \"#1A88F8\",\n borderRadius: 8,\n boxShadow: \"0 0 0 2px var(--ck-body-background)\",\n width: 8,\n height: 8,\n }}\n />\n )}\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ overflow: \"visible\" }}\n >\n <circle cx=\"10\" cy=\"10\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path\n d=\"M16.5 16.775C14.8618 15.0649 12.5552 14 10 14C7.44477 14 5.13825 15.0649 3.5 16.775\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"10\" cy=\"8\" r=\"3\" stroke=\"currentColor\" strokeWidth=\"2\" />\n </svg>\n </div>\n);\nconst InfoIcon = ({ ...props }) => (\n <svg\n aria-hidden=\"true\"\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 22 22\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M20 11C20 15.9706 15.9706 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2C15.9706 2 20 6.02944 20 11ZM22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11ZM11.6445 12.7051C11.6445 13.1348 11.3223 13.4678 10.7744 13.4678C10.2266 13.4678 9.92578 13.1885 9.92578 12.6191V12.4795C9.92578 11.4268 10.4951 10.8574 11.2686 10.3203C12.2031 9.67578 12.665 9.32129 12.665 8.59082C12.665 7.76367 12.0205 7.21582 11.043 7.21582C10.3232 7.21582 9.80762 7.57031 9.45312 8.16113C9.38282 8.24242 9.32286 8.32101 9.2667 8.39461C9.04826 8.68087 8.88747 8.8916 8.40039 8.8916C8.0459 8.8916 7.66992 8.62305 7.66992 8.15039C7.66992 7.96777 7.70215 7.7959 7.75586 7.61328C8.05664 6.625 9.27051 5.75488 11.1182 5.75488C12.9336 5.75488 14.5234 6.71094 14.5234 8.50488C14.5234 9.7832 13.7822 10.417 12.7402 11.1045C11.999 11.5986 11.6445 11.9746 11.6445 12.5762V12.7051ZM11.9131 15.5625C11.9131 16.1855 11.376 16.6797 10.7529 16.6797C10.1299 16.6797 9.59277 16.1748 9.59277 15.5625C9.59277 14.9395 10.1191 14.4453 10.7529 14.4453C11.3867 14.4453 11.9131 14.9287 11.9131 15.5625Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\nconst CloseIcon = ({ ...props }) => (\n <motion.svg\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M1 13L13 1M1 1L13 13\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n </motion.svg>\n);\nconst BackIcon = ({ ...props }) => (\n <motion.svg\n width={9}\n height={16}\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M8 1L1 8L8 15\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </motion.svg>\n);\n\nconst contentTransitionDuration = 0.22;\n\nexport const contentVariants: Variants = {\n initial: {\n //willChange: 'transform,opacity',\n zIndex: 2,\n opacity: 0,\n },\n animate: {\n opacity: 1,\n scale: 1,\n transition: {\n duration: contentTransitionDuration * 0.75,\n delay: contentTransitionDuration * 0.25,\n ease: [0.26, 0.08, 0.25, 1],\n },\n },\n exit: {\n zIndex: 1,\n opacity: 0,\n pointerEvents: \"none\",\n position: \"absolute\",\n left: [\"50%\", \"50%\"],\n x: [\"-50%\", \"-50%\"],\n transition: {\n duration: contentTransitionDuration,\n ease: [0.26, 0.08, 0.25, 1],\n },\n },\n};\n\ntype ModalProps = {\n open?: boolean;\n pages: Record<ROUTES, React.ReactNode>;\n pageId: string;\n positionInside?: boolean;\n inline?: boolean;\n onClose?: () => void;\n onBack?: () => void;\n onInfo?: () => void;\n\n demo?: {\n theme: string;\n mode?: string;\n customTheme: CustomTheme;\n };\n};\nconst Modal: React.FC<ModalProps> = ({\n open,\n pages,\n pageId,\n positionInside,\n inline,\n demo,\n onClose,\n onBack,\n onInfo,\n}) => {\n const context = usePayContext();\n const themeContext = useThemeContext();\n const mobile = isMobile();\n const {\n selectedExternalOption,\n selectedTokenOption,\n selectedSolanaTokenOption,\n selectedDepositAddressOption,\n } = context.paymentState;\n const { order } = useDaimoPay();\n\n const { connector } = useAccount();\n const wallet = useWallet(connector?.id ?? \"\");\n\n const walletInfo = {\n name: wallet?.name,\n shortName: wallet?.shortName ?? wallet?.name,\n icon: wallet?.iconConnector ?? wallet?.icon,\n iconShape: wallet?.iconShape ?? \"circle\",\n iconShouldShrink: wallet?.iconShouldShrink,\n };\n\n const locales = useLocales({\n CONNECTORNAME: walletInfo?.name,\n });\n\n const [state, setOpen] = useTransition({\n timeout: 160,\n preEnter: true,\n mountOnEnter: true,\n unmountOnExit: true,\n });\n const mounted = !(state === \"exited\" || state === \"unmounted\");\n const rendered = state === \"preEnter\" || state !== \"exiting\";\n const currentDepth =\n context.route === ROUTES.CONNECTORS\n ? 0\n : context.route === ROUTES.DOWNLOAD\n ? 2\n : 1;\n const prevDepth = usePrevious(currentDepth, currentDepth);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (!positionInside) useLockBodyScroll(mounted);\n\n useEffect(() => {\n setOpen(open);\n if (open) setInTransition(undefined);\n }, [open]);\n\n const [dimensions, setDimensions] = useState<{\n width: string | undefined;\n height: string | undefined;\n }>({\n width: undefined,\n height: undefined,\n });\n const [inTransition, setInTransition] = useState<boolean | undefined>(\n undefined,\n );\n\n // Calculate new content bounds\n const updateBounds = (node: any) => {\n const bounds = {\n width: node?.offsetWidth,\n height: node?.offsetHeight,\n };\n setDimensions({\n width: `${bounds?.width}px`,\n height: `${bounds?.height}px`,\n });\n };\n\n let blockTimeout: ReturnType<typeof setTimeout>;\n const contentRef = useCallback(\n (node: any) => {\n if (!node) return;\n ref.current = node;\n\n // Avoid transition mixups\n setInTransition(inTransition === undefined ? false : true);\n clearTimeout(blockTimeout);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n blockTimeout = setTimeout(() => setInTransition(false), 360);\n\n // Calculate new content bounds\n updateBounds(node);\n },\n [open, inTransition],\n );\n\n // Update layout on chain/network switch to avoid clipping\n const { chain } = useAccount();\n const { switchChain } = useSwitchChain();\n\n const ref = useRef<any>(null);\n useEffect(() => {\n if (ref.current) updateBounds(ref.current);\n }, [chain, switchChain, mobile, context.options, context.resize]);\n\n useEffect(() => {\n if (!mounted) {\n setDimensions({\n width: undefined,\n height: undefined,\n });\n return;\n }\n\n const listener = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && onClose) onClose();\n };\n document.addEventListener(\"keydown\", listener);\n return () => {\n document.removeEventListener(\"keydown\", listener);\n };\n }, [mounted, onClose]);\n\n const dimensionsCSS = {\n \"--height\": dimensions.height,\n \"--width\": dimensions.width,\n } as React.CSSProperties;\n\n function shouldUseQrcode() {\n if (!wallet) return false; // Fail states are shown in the injector flow\n\n const useInjector = wallet.isInstalled;\n return !useInjector;\n }\n\n const shouldShowWalletQRCodeOnDesktop =\n context.pendingConnectorId === WALLET_ID_MOBILE_WALLETS ||\n context.pendingConnectorId === \"world\";\n\n function getHeading() {\n const payWithString = flattenChildren(locales.payWith).join(\"\");\n switch (context.route) {\n case ROUTES.ABOUT:\n return locales.aboutScreen_heading;\n case ROUTES.CONNECT:\n if (shouldShowWalletQRCodeOnDesktop) {\n return locales.scanWithPhone;\n } else {\n return walletInfo?.name;\n }\n case ROUTES.SELECT_EXCHANGE:\n return locales.selectExchange;\n case ROUTES.SOLANA_CONNECTOR:\n return context.solanaConnector ?? locales.solanaWallet;\n case ROUTES.CONNECTORS:\n return locales.connectorsScreen_heading;\n case ROUTES.MOBILECONNECTORS:\n return locales.mobileConnectorsScreen_heading;\n case ROUTES.DOWNLOAD:\n return locales.downloadAppScreen_heading;\n case ROUTES.ONBOARDING:\n return locales.onboardingScreen_heading;\n case ROUTES.SWITCHNETWORKS:\n return locales.switchNetworkScreen_heading;\n case ROUTES.SELECT_METHOD:\n case ROUTES.SELECT_TOKEN:\n return order?.metadata.intent;\n case ROUTES.SOLANA_PAY_WITH_TOKEN:\n if (!selectedSolanaTokenOption) return undefined;\n return `${payWithString} ${selectedSolanaTokenOption.required.token.symbol}`;\n case ROUTES.WAITING_EXTERNAL:\n if (\n selectedExternalOption &&\n shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) &&\n !mobile\n ) {\n return locales.scanWithPhone;\n }\n return selectedExternalOption?.cta;\n case ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN:\n return locales.selectChain;\n case ROUTES.WAITING_DEPOSIT_ADDRESS:\n if (!selectedDepositAddressOption) return undefined;\n return `${payWithString} ${selectedDepositAddressOption.id}`;\n case ROUTES.SELECT_ZKP2P:\n return locales.selectApp;\n case ROUTES.SELECT_AMOUNT:\n case ROUTES.SELECT_EXTERNAL_AMOUNT:\n case ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT:\n case ROUTES.SOLANA_SELECT_AMOUNT:\n case ROUTES.SELECT_WALLET_AMOUNT:\n return locales.selectAmount;\n case ROUTES.PAY_WITH_TOKEN:\n if (selectedTokenOption == null) return undefined;\n\n const chainName = getChainName(\n selectedTokenOption.balance.token.chainId,\n );\n return `${payWithString} ${chainName} ${selectedTokenOption.balance.token.symbol}`;\n case ROUTES.CONFIRMATION:\n return locales.paymentSuccessful;\n case ROUTES.ERROR:\n return locales.error;\n case ROUTES.SELECT_WALLET_CHAIN:\n return locales.selectChain;\n }\n }\n\n const Content = (\n <ResetContainer\n $useTheme={demo?.theme ?? themeContext.theme}\n $useMode={demo?.mode ?? themeContext.mode}\n $customTheme={demo?.customTheme ?? themeContext.customTheme}\n >\n <ModalContainer\n role=\"dialog\"\n style={{\n pointerEvents: rendered ? \"auto\" : \"none\",\n position: positionInside ? \"absolute\" : undefined,\n }}\n >\n {!inline && (\n <BackgroundOverlay\n $active={rendered}\n onClick={onClose}\n $blur={context.options?.overlayBlur}\n />\n )}\n <Container\n style={dimensionsCSS}\n initial={false}\n // transition={{\n // ease: [0.2555, 0.1111, 0.2555, 1.0001],\n // duration: !positionInside && state !== 'entered' ? 0 : 0.24,\n // }}\n >\n <div\n style={{\n pointerEvents: inTransition ? \"all\" : \"none\", // Block interaction while transitioning\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"var(--width)\",\n zIndex: 9,\n transition: \"width 200ms ease\",\n }}\n />\n <BoxContainer className={`${rendered && \"active\"}`}>\n <AnimatePresence initial={false}>\n {context.options?.disclaimer &&\n context.route === ROUTES.CONNECTORS && (\n <DisclaimerBackground\n initial={{\n opacity: 0,\n }}\n animate={{\n opacity: 1,\n }}\n exit={{ opacity: 0 }}\n transition={{\n delay: 0,\n duration: 0.2,\n ease: [0.25, 0.1, 0.25, 1.0],\n }}\n >\n <Disclaimer>\n <div>{context.options?.disclaimer}</div>\n </Disclaimer>\n </DisclaimerBackground>\n )}\n </AnimatePresence>\n <AnimatePresence initial={false}>\n {context.errorMessage && (\n <ErrorMessage\n initial={{ y: \"10%\", x: \"-50%\" }}\n animate={{ y: \"-100%\" }}\n exit={{ y: \"100%\" }}\n transition={{ duration: 0.2, ease: \"easeInOut\" }}\n >\n <span>{context.errorMessage}</span>\n <div\n onClick={() => context.displayError(null)}\n style={{\n position: \"absolute\",\n right: 24,\n top: 24,\n cursor: \"pointer\",\n }}\n >\n <CloseIcon />\n </div>\n </ErrorMessage>\n )}\n </AnimatePresence>\n <ControllerContainer>\n {onClose && (\n <CloseButton\n aria-label={flattenChildren(locales.close).toString()}\n onClick={onClose}\n >\n <CloseIcon />\n </CloseButton>\n )}\n <div\n style={{\n position: \"absolute\",\n top: 23,\n left: 20,\n width: 32,\n height: 32,\n }}\n >\n <AnimatePresence>\n {onBack ? (\n <BackButton\n disabled={inTransition}\n aria-label={flattenChildren(locales.back).toString()}\n key=\"backButton\"\n onClick={onBack}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{\n duration: mobile ? 0 : 0.1,\n delay: mobile ? 0.01 : 0,\n }}\n >\n <BackIcon />\n </BackButton>\n ) : (\n onInfo &&\n !context.options?.hideQuestionMarkCTA && (\n <InfoButton\n disabled={inTransition}\n aria-label={flattenChildren(\n locales.moreInformation,\n ).toString()}\n key=\"infoButton\"\n onClick={onInfo}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{\n duration: mobile ? 0 : 0.1,\n delay: mobile ? 0.01 : 0,\n }}\n >\n <InfoIcon />\n </InfoButton>\n )\n )}\n </AnimatePresence>\n </div>\n </ControllerContainer>\n\n <ModalHeading>\n <AnimatePresence>\n <motion.div\n style={{\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: 52,\n right: 52,\n display: \"flex\",\n //alignItems: 'center',\n justifyContent: \"center\",\n }}\n key={`${context.route}`}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{\n duration: mobile ? 0 : 0.17,\n delay: mobile ? 0.01 : 0,\n }}\n >\n <FitText>{getHeading()}</FitText>\n </motion.div>\n </AnimatePresence>\n </ModalHeading>\n\n <InnerContainer>\n {Object.keys(pages).map((key) => (\n <Page\n key={key}\n open={key === pageId}\n initial={!positionInside && state !== \"entered\"}\n enterAnim={\n key === pageId\n ? currentDepth > prevDepth\n ? \"active-scale-up\"\n : \"active\"\n : \"\"\n }\n exitAnim={\n key !== pageId\n ? currentDepth < prevDepth\n ? \"exit-scale-down\"\n : \"exit\"\n : \"\"\n }\n >\n <PageContents\n key={`inner-${key}`}\n ref={contentRef}\n style={{\n pointerEvents:\n key === pageId && rendered ? \"auto\" : \"none\",\n }}\n >\n {pages[key]}\n </PageContents>\n </Page>\n ))}\n </InnerContainer>\n </BoxContainer>\n </Container>\n </ModalContainer>\n </ResetContainer>\n );\n return (\n <>\n {mounted && (\n <>\n {positionInside ? (\n Content\n ) : (\n <>\n {\n <Portal>\n <FocusTrap>{Content}</FocusTrap>\n </Portal>\n }\n </>\n )}\n </>\n )}\n </>\n );\n};\n\ntype PageProps = {\n children?: React.ReactNode;\n open?: boolean;\n initial: boolean;\n prevDepth?: number;\n currentDepth?: number;\n enterAnim?: string;\n exitAnim?: string;\n};\n\nconst Page: React.FC<PageProps> = ({\n children,\n open,\n initial,\n prevDepth,\n currentDepth,\n enterAnim,\n exitAnim,\n}) => {\n const [state, setOpen] = useTransition({\n timeout: 400,\n preEnter: true,\n initialEntered: open,\n mountOnEnter: true,\n unmountOnExit: true,\n });\n const mounted = !(state === \"exited\" || state === \"unmounted\");\n const rendered = state === \"preEnter\" || state !== \"exiting\";\n\n useEffect(() => {\n setOpen(open);\n }, [open]);\n\n if (!mounted) return null;\n\n return (\n <PageContainer\n className={`${rendered ? enterAnim : exitAnim}`}\n style={{\n animationDuration: initial ? \"0ms\" : undefined,\n animationDelay: initial ? \"0ms\" : undefined,\n }}\n >\n {children}\n </PageContainer>\n );\n};\n\nexport const OrDivider = ({ children }: { children?: React.ReactNode }) => {\n const locales = useLocales();\n return (\n <TextWithHr>\n <span>{children ?? locales.or}</span>\n </TextWithHr>\n );\n};\n\nexport default Modal;\n"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@ import { formatUsd } from '../../../utils/format.js';
|
|
|
15
15
|
|
|
16
16
|
const OrderHeader = ({
|
|
17
17
|
minified = false,
|
|
18
|
-
show = "
|
|
18
|
+
show = "all"
|
|
19
19
|
}) => {
|
|
20
20
|
const { paymentState, route } = usePayContext();
|
|
21
21
|
const { isConnected: isEthConnected, address, connector } = useAccount();
|
|
@@ -71,16 +71,8 @@ const OrderHeader = ({
|
|
|
71
71
|
show === "solana" && isSolanaConnected && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(SubtitleContainer, { children: [
|
|
72
72
|
/* @__PURE__ */ jsx(Subtitle, { children: solWalletDisplayName }),
|
|
73
73
|
solanaIcon
|
|
74
|
-
] }) })
|
|
75
|
-
show === "showCoin" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(CoinLogos, { $size: 32 }) })
|
|
74
|
+
] }) })
|
|
76
75
|
] });
|
|
77
|
-
} else {
|
|
78
|
-
if (show !== "hideCoin") {
|
|
79
|
-
return /* @__PURE__ */ jsxs(MinifiedContainer, { children: [
|
|
80
|
-
/* @__PURE__ */ jsx(CoinLogos, {}),
|
|
81
|
-
/* @__PURE__ */ jsx(Subtitle, { children: locales.tokensAccepted })
|
|
82
|
-
] });
|
|
83
|
-
}
|
|
84
76
|
}
|
|
85
77
|
} else {
|
|
86
78
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OrderHeader/index.tsx"],"sourcesContent":["import { getAddressContraction } from \"@daimo/pay-common\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport { useAccount } from \"wagmi\";\nimport {\n Arbitrum,\n Base,\n Ethereum,\n Optimism,\n Polygon,\n Solana,\n} from \"../../../assets/chains\";\nimport { USDC } from \"../../../assets/coins\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { formatUsd } from \"../../../utils/format\";\n\n/** Shows payment amount. */\nexport const OrderHeader = ({\n minified = false,\n show = \"showCoin\",\n}: {\n minified?: boolean;\n show?: \"evm\" | \"solana\" | \"hideCoin\" | \"showCoin\";\n}) => {\n const { paymentState, route } = usePayContext();\n const { isConnected: isEthConnected, address, connector } = useAccount();\n const {\n connected: isSolanaConnected,\n publicKey,\n wallet: solanaWallet,\n } = useWallet();\n const { senderEnsName } = paymentState;\n const { order } = useDaimoPay();\n\n const ethWalletDisplayName =\n senderEnsName ?? (address ? getAddressContraction(address) : \"wallet\");\n const solWalletDisplayName = getAddressContraction(\n publicKey?.toBase58() ?? \"\",\n );\n const orderUsd = order?.destFinalCallTokenAmount.usd;\n\n const locales = useLocales();\n\n const titleAmountContent = (() => {\n if (paymentState.isDepositFlow) {\n return route === ROUTES.SELECT_TOKEN ? (\n // TODO: make this match `ModalH1` font size for mobile\n <span style={{ fontSize: \"19px\", lineHeight: \"22px\" }}>\n {locales.yourBalances}\n </span>\n ) : null;\n } else {\n return orderUsd != null ? (\n <span>{formatUsd(orderUsd, \"nearest\")}</span>\n ) : null;\n }\n })();\n\n const renderIcon = (\n icon: React.ReactNode | string | undefined,\n name?: string,\n size = 32,\n ): JSX.Element | null => {\n if (!icon) {\n return null;\n }\n\n return (\n <LogoContainer $size={size} $zIndex={1} style={{ borderRadius: \"22.5%\" }}>\n {typeof icon === \"string\" ? (\n <img\n src={icon}\n alt={name || \"wallet\"}\n style={{ maxWidth: \"100%\", maxHeight: \"100%\" }}\n />\n ) : (\n icon\n )}\n </LogoContainer>\n );\n };\n let walletIcon = renderIcon(connector?.icon);\n let solanaIcon = renderIcon(\n solanaWallet?.adapter.icon || <Solana />,\n solanaWallet?.adapter.name,\n );\n\n if (minified) {\n if (titleAmountContent != null) {\n return (\n <MinifiedContainer>\n <MinifiedTitleAmount>{titleAmountContent}</MinifiedTitleAmount>\n {show === \"evm\" && isEthConnected && (\n <>\n <SubtitleContainer>\n <Subtitle>{ethWalletDisplayName}</Subtitle>\n {walletIcon}\n </SubtitleContainer>\n </>\n )}\n {show === \"solana\" && isSolanaConnected && (\n <>\n <SubtitleContainer>\n <Subtitle>{solWalletDisplayName}</Subtitle>\n {solanaIcon}\n </SubtitleContainer>\n </>\n )}\n {show === \"showCoin\" && (\n <>\n <CoinLogos $size={32} />\n </>\n )}\n </MinifiedContainer>\n );\n } else {\n if (show !== \"hideCoin\") {\n return (\n <MinifiedContainer>\n <CoinLogos />\n <Subtitle>{locales.tokensAccepted}</Subtitle>\n </MinifiedContainer>\n );\n }\n }\n } else {\n return (\n <>\n {titleAmountContent && <TitleAmount>{titleAmountContent}</TitleAmount>}\n <AnyChainAnyCoinContainer>\n <CoinLogos />\n <Subtitle>{locales.tokensAccepted}</Subtitle>\n </AnyChainAnyCoinContainer>\n </>\n );\n }\n};\n\nfunction CoinLogos({ $size = 24 }: { $size?: number }) {\n const logos = [\n <Ethereum key=\"eth\" />,\n <USDC key=\"usdc\" />,\n <Optimism key=\"optimism\" />,\n <Arbitrum key=\"arbitrum\" />,\n <Base key=\"base\" />,\n <Polygon key=\"polygon\" />,\n <Solana key=\"solana\" />,\n ];\n\n const logoBlock = (element: React.ReactElement, index: number) => (\n <LogoContainer\n key={index}\n $marginLeft={index !== 0 ? -($size / 3) : 0}\n $zIndex={logos.length - index}\n $size={$size}\n transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}\n >\n {element}\n </LogoContainer>\n );\n\n return (\n <Logos>{logos.map((element, index) => logoBlock(element, index))}</Logos>\n );\n}\n\nconst TitleAmount = styled(motion.h1)<{\n $error?: boolean;\n $valid?: boolean;\n}>`\n margin-bottom: 24px;\n padding: 0;\n line-height: 66px;\n font-size: 64px;\n font-weight: var(--ck-modal-h1-font-weight, 600);\n color: ${(props) => {\n if (props.$error) return \"var(--ck-body-color-danger)\";\n if (props.$valid) return \"var(--ck-body-color-valid)\";\n return \"var(--ck-body-color)\";\n }};\n @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n font-size: 64px;\n }\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n`;\n\nconst Subtitle = styled(motion.div)`\n font-size: 18px;\n font-weight: 500;\n line-height: 21px;\n color: var(--ck-body-color-muted);\n`;\n\nconst MinifiedTitleAmount = styled(motion.div)`\n font-size: 32px;\n font-weight: var(--ck-modal-h1-font-weight, 600);\n line-height: 36px;\n color: var(--ck-body-color);\n display: flex;\n align-items: center;\n justify-content: start;\n gap: 8px;\n`;\n\nconst MinifiedContainer = styled(motion.div)`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-bottom: 24px;\n`;\n\nconst AnyChainAnyCoinContainer = styled(motion.div)`\n display: flex;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n margin-bottom: 24px;\n`;\n\nconst LogoContainer = styled(motion.div)<{\n $marginLeft?: number;\n $zIndex?: number;\n $size: number;\n}>`\n display: block;\n overflow: hidden;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: ${(props) => props.$marginLeft || 0}px;\n z-index: ${(props) => props.$zIndex || 2};\n width: ${(props) => props.$size}px;\n height: ${(props) => props.$size}px;\n border-radius: 9999px;\n svg {\n display: block;\n width: 100%;\n height: auto;\n }\n`;\n\nconst Logos = styled(motion.div)`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst SubtitleContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAW,GAAA,KAAA;AAAA,EACX,IAAO,GAAA,UAAA;AACT,CAGM,KAAA;AACJ,EAAA,MAAM,EAAE,YAAA,EAAc,KAAM,EAAA,GAAI,aAAc,EAAA,CAAA;AAC9C,EAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAgB,OAAS,EAAA,SAAA,KAAc,UAAW,EAAA,CAAA;AACvE,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA,iBAAA;AAAA,IACX,SAAA;AAAA,IACA,MAAQ,EAAA,YAAA;AAAA,MACN,SAAU,EAAA,CAAA;AACd,EAAM,MAAA,EAAE,eAAkB,GAAA,YAAA,CAAA;AAC1B,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,WAAY,EAAA,CAAA;AAE9B,EAAA,MAAM,oBACJ,GAAA,aAAA,KAAkB,OAAU,GAAA,qBAAA,CAAsB,OAAO,CAAI,GAAA,QAAA,CAAA,CAAA;AAC/D,EAAA,MAAM,oBAAuB,GAAA,qBAAA;AAAA,IAC3B,SAAA,EAAW,UAAc,IAAA,EAAA;AAAA,GAC3B,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,OAAO,wBAAyB,CAAA,GAAA,CAAA;AAEjD,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAE3B,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,IAAI,aAAa,aAAe,EAAA;AAC9B,MAAA,OAAO,UAAU,MAAO,CAAA,YAAA;AAAA;AAAA,wBAEtB,GAAA,CAAC,MAAK,EAAA,EAAA,KAAA,EAAO,EAAE,QAAA,EAAU,QAAQ,UAAY,EAAA,MAAA,EAC1C,EAAA,QAAA,EAAA,OAAA,CAAQ,YACX,EAAA,CAAA;AAAA,UACE,IAAA,CAAA;AAAA,KACC,MAAA;AACL,MAAO,OAAA,QAAA,IAAY,uBAChB,GAAA,CAAA,MAAA,EAAA,EAAM,oBAAU,QAAU,EAAA,SAAS,GAAE,CACpC,GAAA,IAAA,CAAA;AAAA,KACN;AAAA,GACC,GAAA,CAAA;AAEH,EAAA,MAAM,UAAa,GAAA,CACjB,IACA,EAAA,IAAA,EACA,OAAO,EACgB,KAAA;AACvB,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA,EAAc,KAAO,EAAA,IAAA,EAAM,OAAS,EAAA,CAAA,EAAG,KAAO,EAAA,EAAE,YAAc,EAAA,OAAA,EAC5D,EAAA,QAAA,EAAA,OAAO,SAAS,QACf,mBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,IAAA;AAAA,QACL,KAAK,IAAQ,IAAA,QAAA;AAAA,QACb,KAAO,EAAA,EAAE,QAAU,EAAA,MAAA,EAAQ,WAAW,MAAO,EAAA;AAAA,OAAA;AAAA,QAG/C,IAEJ,EAAA,CAAA,CAAA;AAAA,GAEJ,CAAA;AACA,EAAI,IAAA,UAAA,GAAa,UAAW,CAAA,SAAA,EAAW,IAAI,CAAA,CAAA;AAC3C,EAAA,IAAI,UAAa,GAAA,UAAA;AAAA,IACf,YAAc,EAAA,OAAA,CAAQ,IAAQ,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,CAAA;AAAA,IACtC,cAAc,OAAQ,CAAA,IAAA;AAAA,GACxB,CAAA;AAEA,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,IAAI,sBAAsB,IAAM,EAAA;AAC9B,MAAA,4BACG,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,uBAAqB,QAAmB,EAAA,kBAAA,EAAA,CAAA;AAAA,QACxC,IAAS,KAAA,KAAA,IAAS,cACjB,oBAAA,GAAA,CAAA,QAAA,EAAA,EACE,+BAAC,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAU,QAAqB,EAAA,oBAAA,EAAA,CAAA;AAAA,UAC/B,UAAA;AAAA,SAAA,EACH,CACF,EAAA,CAAA;AAAA,QAED,IAAS,KAAA,QAAA,IAAY,iBACpB,oBAAA,GAAA,CAAA,QAAA,EAAA,EACE,+BAAC,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAU,QAAqB,EAAA,oBAAA,EAAA,CAAA;AAAA,UAC/B,UAAA;AAAA,SAAA,EACH,CACF,EAAA,CAAA;AAAA,QAED,SAAS,UACR,oBAAA,GAAA,CAAA,QAAA,EAAA,EACE,8BAAC,SAAU,EAAA,EAAA,KAAA,EAAO,IAAI,CACxB,EAAA,CAAA;AAAA,OAEJ,EAAA,CAAA,CAAA;AAAA,KAEG,MAAA;AACL,MAAA,IAAI,SAAS,UAAY,EAAA;AACvB,QAAA,4BACG,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,0BACX,GAAA,CAAC,QAAU,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,cAAe,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA,CAAA;AAAA,OAEJ;AAAA,KACF;AAAA,GACK,MAAA;AACL,IAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAsB,kBAAA,oBAAA,GAAA,CAAC,eAAa,QAAmB,EAAA,kBAAA,EAAA,CAAA;AAAA,2BACvD,wBACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,wBACX,GAAA,CAAC,QAAU,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,cAAe,EAAA,CAAA;AAAA,OACpC,EAAA,CAAA;AAAA,KACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,SAAU,CAAA,EAAE,KAAQ,GAAA,EAAA,EAA0B,EAAA;AACrD,EAAA,MAAM,KAAQ,GAAA;AAAA,oBACZ,GAAA,CAAC,cAAa,KAAM,CAAA;AAAA,oBACpB,GAAA,CAAC,UAAS,MAAO,CAAA;AAAA,oBACjB,GAAA,CAAC,cAAa,UAAW,CAAA;AAAA,oBACzB,GAAA,CAAC,cAAa,UAAW,CAAA;AAAA,oBACzB,GAAA,CAAC,UAAS,MAAO,CAAA;AAAA,oBACjB,GAAA,CAAC,aAAY,SAAU,CAAA;AAAA,oBACvB,GAAA,CAAC,YAAW,QAAS,CAAA;AAAA,GACvB,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,CAAC,OAAA,EAA6B,KAC9C,qBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MAEC,WAAa,EAAA,KAAA,KAAU,CAAI,GAAA,EAAE,QAAQ,CAAK,CAAA,GAAA,CAAA;AAAA,MAC1C,OAAA,EAAS,MAAM,MAAS,GAAA,KAAA;AAAA,MACxB,KAAA;AAAA,MACA,UAAA,EAAY,EAAE,QAAA,EAAU,GAAK,EAAA,IAAA,EAAM,CAAC,KAAO,EAAA,KAAA,EAAO,IAAM,EAAA,IAAI,CAAE,EAAA;AAAA,MAE7D,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,IANI,KAAA;AAAA,GAOP,CAAA;AAGF,EACE,uBAAA,GAAA,CAAC,KAAO,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,OAAS,EAAA,KAAA,KAAU,SAAU,CAAA,OAAA,EAAS,KAAK,CAAC,CAAE,EAAA,CAAA,CAAA;AAErE,CAAA;AAEA,MAAM,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EASzB,CAAC,KAAU,KAAA;AAClB,EAAI,IAAA,KAAA,CAAM,QAAe,OAAA,6BAAA,CAAA;AACzB,EAAI,IAAA,KAAA,CAAM,QAAe,OAAA,4BAAA,CAAA;AACzB,EAAO,OAAA,sBAAA,CAAA;AACT,CAAC,CAAA;AAAA,qCAAA,EACoC,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAS/D,MAAM,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAOlC,MAAM,mBAAA,GAAsB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAW7C,MAAM,iBAAA,GAAoB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAQ3C,MAAM,wBAAA,GAA2B,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAUlD,MAAM,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAWtB,CAAC,KAAA,KAAU,KAAM,CAAA,WAAA,IAAe,CAAC,CAAA;AAAA,WAAA,EACrC,CAAC,KAAA,KAAU,KAAM,CAAA,OAAA,IAAW,CAAC,CAAA;AAAA,SAC/B,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA,UACrB,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AASlC,MAAM,KAAA,GAAQ,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAM/B,MAAM,oBAAoB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OrderHeader/index.tsx"],"sourcesContent":["import { getAddressContraction } from \"@daimo/pay-common\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport { useAccount } from \"wagmi\";\nimport {\n Arbitrum,\n Base,\n Ethereum,\n Optimism,\n Polygon,\n Solana,\n} from \"../../../assets/chains\";\nimport { USDC } from \"../../../assets/coins\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { formatUsd } from \"../../../utils/format\";\n\n/** Shows payment amount. */\nexport const OrderHeader = ({\n minified = false,\n show = \"all\",\n}: {\n minified?: boolean;\n show?: \"evm\" | \"solana\" | \"zkp2p\" | \"all\";\n}) => {\n const { paymentState, route } = usePayContext();\n const { isConnected: isEthConnected, address, connector } = useAccount();\n const {\n connected: isSolanaConnected,\n publicKey,\n wallet: solanaWallet,\n } = useWallet();\n const { senderEnsName } = paymentState;\n const { order } = useDaimoPay();\n\n const ethWalletDisplayName =\n senderEnsName ?? (address ? getAddressContraction(address) : \"wallet\");\n const solWalletDisplayName = getAddressContraction(\n publicKey?.toBase58() ?? \"\",\n );\n const orderUsd = order?.destFinalCallTokenAmount.usd;\n\n const locales = useLocales();\n\n const titleAmountContent = (() => {\n if (paymentState.isDepositFlow) {\n return route === ROUTES.SELECT_TOKEN ? (\n // TODO: make this match `ModalH1` font size for mobile\n <span style={{ fontSize: \"19px\", lineHeight: \"22px\" }}>\n {locales.yourBalances}\n </span>\n ) : null;\n } else {\n return orderUsd != null ? (\n <span>{formatUsd(orderUsd, \"nearest\")}</span>\n ) : null;\n }\n })();\n\n const renderIcon = (\n icon: React.ReactNode | string | undefined,\n name?: string,\n size = 32,\n ): JSX.Element | null => {\n if (!icon) {\n return null;\n }\n\n return (\n <LogoContainer $size={size} $zIndex={1} style={{ borderRadius: \"22.5%\" }}>\n {typeof icon === \"string\" ? (\n <img\n src={icon}\n alt={name || \"wallet\"}\n style={{ maxWidth: \"100%\", maxHeight: \"100%\" }}\n />\n ) : (\n icon\n )}\n </LogoContainer>\n );\n };\n let walletIcon = renderIcon(connector?.icon);\n let solanaIcon = renderIcon(\n solanaWallet?.adapter.icon || <Solana />,\n solanaWallet?.adapter.name,\n );\n\n if (minified) {\n if (titleAmountContent != null) {\n return (\n <MinifiedContainer>\n <MinifiedTitleAmount>{titleAmountContent}</MinifiedTitleAmount>\n {show === \"evm\" && isEthConnected && (\n <>\n <SubtitleContainer>\n <Subtitle>{ethWalletDisplayName}</Subtitle>\n {walletIcon}\n </SubtitleContainer>\n </>\n )}\n {show === \"solana\" && isSolanaConnected && (\n <>\n <SubtitleContainer>\n <Subtitle>{solWalletDisplayName}</Subtitle>\n {solanaIcon}\n </SubtitleContainer>\n </>\n )}\n </MinifiedContainer>\n );\n }\n } else {\n return (\n <>\n {titleAmountContent && <TitleAmount>{titleAmountContent}</TitleAmount>}\n <AnyChainAnyCoinContainer>\n <CoinLogos />\n <Subtitle>{locales.tokensAccepted}</Subtitle>\n </AnyChainAnyCoinContainer>\n </>\n );\n }\n};\n\nfunction CoinLogos({ $size = 24 }: { $size?: number }) {\n const logos = [\n <Ethereum key=\"eth\" />,\n <USDC key=\"usdc\" />,\n <Optimism key=\"optimism\" />,\n <Arbitrum key=\"arbitrum\" />,\n <Base key=\"base\" />,\n <Polygon key=\"polygon\" />,\n <Solana key=\"solana\" />,\n ];\n\n const logoBlock = (element: React.ReactElement, index: number) => (\n <LogoContainer\n key={index}\n $marginLeft={index !== 0 ? -($size / 3) : 0}\n $zIndex={logos.length - index}\n $size={$size}\n transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}\n >\n {element}\n </LogoContainer>\n );\n\n return (\n <Logos>{logos.map((element, index) => logoBlock(element, index))}</Logos>\n );\n}\n\nconst TitleAmount = styled(motion.h1)<{\n $error?: boolean;\n $valid?: boolean;\n}>`\n margin-bottom: 24px;\n padding: 0;\n line-height: 66px;\n font-size: 64px;\n font-weight: var(--ck-modal-h1-font-weight, 600);\n color: ${(props) => {\n if (props.$error) return \"var(--ck-body-color-danger)\";\n if (props.$valid) return \"var(--ck-body-color-valid)\";\n return \"var(--ck-body-color)\";\n }};\n @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n font-size: 64px;\n }\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n`;\n\nconst Subtitle = styled(motion.div)`\n font-size: 18px;\n font-weight: 500;\n line-height: 21px;\n color: var(--ck-body-color-muted);\n`;\n\nconst MinifiedTitleAmount = styled(motion.div)`\n font-size: 32px;\n font-weight: var(--ck-modal-h1-font-weight, 600);\n line-height: 36px;\n color: var(--ck-body-color);\n display: flex;\n align-items: center;\n justify-content: start;\n gap: 8px;\n`;\n\nconst MinifiedContainer = styled(motion.div)`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-bottom: 24px;\n`;\n\nconst AnyChainAnyCoinContainer = styled(motion.div)`\n display: flex;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n margin-bottom: 24px;\n`;\n\nconst LogoContainer = styled(motion.div)<{\n $marginLeft?: number;\n $zIndex?: number;\n $size: number;\n}>`\n display: block;\n overflow: hidden;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: ${(props) => props.$marginLeft || 0}px;\n z-index: ${(props) => props.$zIndex || 2};\n width: ${(props) => props.$size}px;\n height: ${(props) => props.$size}px;\n border-radius: 9999px;\n svg {\n display: block;\n width: 100%;\n height: auto;\n }\n`;\n\nconst Logos = styled(motion.div)`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst SubtitleContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n`;\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { ROUTES } from '../../constants/routes.js';
|
|
3
3
|
import { usePayContext } from '../../hooks/usePayContext.js';
|
|
4
4
|
import { OrDivider } from '../Common/Modal/index.js';
|
|
@@ -14,32 +14,36 @@ import Logos, { SquircleIcon } from '../../assets/logos.js';
|
|
|
14
14
|
import { MobileWithLogos } from '../../assets/MobileWithLogos.js';
|
|
15
15
|
import { useWallet, WALLET_ID_MOBILE_WALLETS } from '../../wallets/useWallets.js';
|
|
16
16
|
|
|
17
|
-
const ConnectWithQRCode = (
|
|
17
|
+
const ConnectWithQRCode = ({
|
|
18
|
+
externalUrl
|
|
19
|
+
}) => {
|
|
18
20
|
const context = usePayContext();
|
|
19
|
-
const { pendingConnectorId } = context;
|
|
21
|
+
const { pendingConnectorId, paymentState } = context;
|
|
20
22
|
const wallet = useWallet(pendingConnectorId ?? "");
|
|
23
|
+
const externalOption = paymentState.selectedExternalOption;
|
|
21
24
|
const pay = useDaimoPay();
|
|
22
25
|
const locales = useLocales({
|
|
23
26
|
CONNECTORNAME: wallet?.name
|
|
24
27
|
});
|
|
25
|
-
if (!wallet
|
|
26
|
-
"
|
|
27
|
-
pendingConnectorId
|
|
28
|
-
] });
|
|
28
|
+
if (!wallet && !externalOption)
|
|
29
|
+
return /* @__PURE__ */ jsx(Fragment, { children: " No wallet or external option found " });
|
|
29
30
|
const downloads = wallet?.downloadUrls;
|
|
30
31
|
const hasApps = downloads && Object.keys(downloads).length !== 0;
|
|
31
32
|
const showAdditionalOptions = false;
|
|
32
33
|
const payId = pay.order ? writeDaimoPayOrderID(pay.order.id) : "";
|
|
33
34
|
const isDesktopLinkToMobileWallets = wallet?.id === WALLET_ID_MOBILE_WALLETS;
|
|
34
35
|
const mode = isDesktopLinkToMobileWallets ? "browser" : "wallet";
|
|
35
|
-
const
|
|
36
|
+
const worldDeeplink = wallet?.id === "world" && wallet?.getDaimoPayDeeplink ? wallet.getDaimoPayDeeplink(payId) : null;
|
|
37
|
+
const url = externalUrl ?? // QR code opens eg. Binance
|
|
38
|
+
worldDeeplink ?? // open in World App
|
|
39
|
+
`https://pay.daimo.com/pay?id=${payId}&mode=${mode}`;
|
|
36
40
|
return /* @__PURE__ */ jsxs(PageContent, { children: [
|
|
37
41
|
/* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [
|
|
38
42
|
/* @__PURE__ */ jsx(
|
|
39
43
|
CustomQRCode,
|
|
40
44
|
{
|
|
41
45
|
value: url,
|
|
42
|
-
image: wallet?.id === "world" ? /* @__PURE__ */ jsx(SquircleIcon, { icon: Logos.World, alt: "World" }) : /* @__PURE__ */ jsx(
|
|
46
|
+
image: wallet?.id === "world" ? /* @__PURE__ */ jsx(SquircleIcon, { icon: Logos.World, alt: "World" }) : externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : /* @__PURE__ */ jsx(
|
|
43
47
|
"div",
|
|
44
48
|
{
|
|
45
49
|
style: {
|
|
@@ -65,7 +69,12 @@ const ConnectWithQRCode = () => {
|
|
|
65
69
|
"on your mobile phone"
|
|
66
70
|
] })
|
|
67
71
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
68
|
-
/* @__PURE__ */ jsx(
|
|
72
|
+
/* @__PURE__ */ jsx(
|
|
73
|
+
ScanIconWithLogos,
|
|
74
|
+
{
|
|
75
|
+
logo: externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : wallet?.icon
|
|
76
|
+
}
|
|
77
|
+
),
|
|
69
78
|
/* @__PURE__ */ jsx("span", { children: locales.scanScreen_tooltip_default })
|
|
70
79
|
] })
|
|
71
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectWithQRCode.js","sources":["../../../../src/components/DaimoPayModal/ConnectWithQRCode.tsx"],"sourcesContent":["import React from \"react\";\nimport { ROUTES } from \"../../constants/routes\";\nimport { usePayContext } from \"../../hooks/usePayContext\";\n\nimport { OrDivider } from \"../Common/Modal\";\nimport { ModalContent, PageContent } from \"../Common/Modal/styles\";\n\nimport ScanIconWithLogos from \"../../assets/ScanIconWithLogos\";\nimport { useDaimoPay } from \"../../hooks/useDaimoPay\";\nimport useLocales from \"../../hooks/useLocales\";\nimport Button from \"../Common/Button\";\nimport CopyToClipboard from \"../Common/CopyToClipboard\";\nimport CustomQRCode from \"../Common/CustomQRCode\";\n\nimport { writeDaimoPayOrderID } from \"@daimo/pay-common\";\nimport Logos, { SquircleIcon } from \"../../assets/logos\";\nimport MobileWithLogos from \"../../assets/MobileWithLogos\";\nimport { useWallet, WALLET_ID_MOBILE_WALLETS } from \"../../wallets/useWallets\";\n\n/**\n * Continues a Daimo Pay flow in another app.\n * - If the pendingConnectorId is a mobile wallet, deeplink directly into that\n * wallet. This opens the flow in eg. the Rainbow in-app browser, letting the\n * user finish the flow in a single app switch instead of multiple.\n * - If the pendingConnectorId is MOBILE_WALLETS_CONNECTOR_ID, then show a QR\n * that the user can scan from their phone. This opens the flow in eg. mobile\n * Safari, letting them pick which app they want to use & finish there.\n * - If the pendingConnectorId is world, then show a QR that the user can scan\n * from their phone. This deeplinks into the World Mini App\n */\nconst ConnectWithQRCode: React.FC<{}> = () => {\n const context = usePayContext();\n const { pendingConnectorId } = context;\n const wallet = useWallet(pendingConnectorId ?? \"\");\n const pay = useDaimoPay();\n\n const locales = useLocales({\n CONNECTORNAME: wallet?.name,\n });\n\n if (!wallet)
|
|
1
|
+
{"version":3,"file":"ConnectWithQRCode.js","sources":["../../../../src/components/DaimoPayModal/ConnectWithQRCode.tsx"],"sourcesContent":["import React from \"react\";\nimport { ROUTES } from \"../../constants/routes\";\nimport { usePayContext } from \"../../hooks/usePayContext\";\n\nimport { OrDivider } from \"../Common/Modal\";\nimport { ModalContent, PageContent } from \"../Common/Modal/styles\";\n\nimport ScanIconWithLogos from \"../../assets/ScanIconWithLogos\";\nimport { useDaimoPay } from \"../../hooks/useDaimoPay\";\nimport useLocales from \"../../hooks/useLocales\";\nimport Button from \"../Common/Button\";\nimport CopyToClipboard from \"../Common/CopyToClipboard\";\nimport CustomQRCode from \"../Common/CustomQRCode\";\n\nimport { writeDaimoPayOrderID } from \"@daimo/pay-common\";\nimport Logos, { SquircleIcon } from \"../../assets/logos\";\nimport MobileWithLogos from \"../../assets/MobileWithLogos\";\nimport { useWallet, WALLET_ID_MOBILE_WALLETS } from \"../../wallets/useWallets\";\n\n/**\n * Continues a Daimo Pay flow in another app.\n * - If the pendingConnectorId is a mobile wallet, deeplink directly into that\n * wallet. This opens the flow in eg. the Rainbow in-app browser, letting the\n * user finish the flow in a single app switch instead of multiple.\n * - If the pendingConnectorId is MOBILE_WALLETS_CONNECTOR_ID, then show a QR\n * that the user can scan from their phone. This opens the flow in eg. mobile\n * Safari, letting them pick which app they want to use & finish there.\n * - If the pendingConnectorId is world, then show a QR that the user can scan\n * from their phone. This deeplinks into the World Mini App\n */\nconst ConnectWithQRCode: React.FC<{ externalUrl: string }> = ({\n externalUrl,\n}) => {\n const context = usePayContext();\n const { pendingConnectorId, paymentState } = context;\n const wallet = useWallet(pendingConnectorId ?? \"\");\n const externalOption = paymentState.selectedExternalOption;\n const pay = useDaimoPay();\n\n const locales = useLocales({\n CONNECTORNAME: wallet?.name,\n });\n\n if (!wallet && !externalOption)\n return <> No wallet or external option found </>;\n\n const downloads = wallet?.downloadUrls;\n const hasApps = downloads && Object.keys(downloads).length !== 0;\n const showAdditionalOptions = false;\n const payId = pay.order ? writeDaimoPayOrderID(pay.order.id) : \"\";\n\n const isDesktopLinkToMobileWallets = wallet?.id === WALLET_ID_MOBILE_WALLETS;\n const mode = isDesktopLinkToMobileWallets ? \"browser\" : \"wallet\";\n const worldDeeplink =\n wallet?.id === \"world\" && wallet?.getDaimoPayDeeplink\n ? wallet.getDaimoPayDeeplink(payId)\n : null;\n const url =\n externalUrl ?? // QR code opens eg. Binance\n worldDeeplink ?? // open in World App\n `https://pay.daimo.com/pay?id=${payId}&mode=${mode}`; // browser\n\n return (\n <PageContent>\n <ModalContent style={{ paddingBottom: 8, gap: 14 }}>\n <CustomQRCode\n value={url}\n image={\n wallet?.id === \"world\" ? (\n <SquircleIcon icon={Logos.World} alt=\"World\" />\n ) : externalOption?.logoURI ? (\n <SquircleIcon icon={externalOption.logoURI} alt=\"Logo\" />\n ) : (\n <div\n style={{\n width: \"100%\",\n height: \"100%\",\n borderRadius: \"22.5%\",\n overflow: \"hidden\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ck-body-background)\",\n transform: \"scale(1.3) translateY(5%)\",\n transformOrigin: \"center center\",\n }}\n >\n <MobileWithLogos />\n </div>\n )\n }\n tooltipMessage={\n isDesktopLinkToMobileWallets ? (\n <>\n <ScanIconWithLogos />\n <span>\n Finish the payment <br />\n on your mobile phone\n </span>\n </>\n ) : (\n <>\n <ScanIconWithLogos\n logo={\n externalOption?.logoURI ? (\n <SquircleIcon icon={externalOption.logoURI} alt=\"Logo\" />\n ) : (\n wallet?.icon\n )\n }\n />\n <span>{locales.scanScreen_tooltip_default}</span>\n </>\n )\n }\n />\n {showAdditionalOptions ? (\n <OrDivider />\n ) : (\n hasApps && <OrDivider>{locales.dontHaveTheApp}</OrDivider>\n )}\n </ModalContent>\n\n {showAdditionalOptions && (\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: 14,\n }}\n >\n <CopyToClipboard variant=\"button\" string={\"\"}>\n {locales.copyToClipboard}\n </CopyToClipboard>\n </div>\n )}\n\n {hasApps && (\n <>\n <Button\n onClick={() => {\n context.setRoute(ROUTES.DOWNLOAD);\n }}\n download\n >\n {locales.getWalletName}\n </Button>\n </>\n )}\n </PageContent>\n );\n};\n\nexport default ConnectWithQRCode;\n"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ const Wallets = () => {
|
|
|
18
18
|
}
|
|
19
19
|
}, [context.paymentState.isDepositFlow, hydrateOrder, order]);
|
|
20
20
|
return /* @__PURE__ */ jsxs(PageContent, { children: [
|
|
21
|
-
/* @__PURE__ */ jsx(OrderHeader, { minified: true
|
|
21
|
+
/* @__PURE__ */ jsx(OrderHeader, { minified: true }),
|
|
22
22
|
/* @__PURE__ */ jsx(ConnectorList, {}),
|
|
23
23
|
context.options?.disclaimer && /* @__PURE__ */ jsx(Disclaimer, { style: { visibility: "hidden", pointerEvents: "none" }, children: /* @__PURE__ */ jsx("div", { children: context.options?.disclaimer }) })
|
|
24
24
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Connectors/index.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { Disclaimer, PageContent } from \"../../Common/Modal/styles\";\n\nimport { DaimoPayOrderMode } from \"@daimo/pay-common\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport ConnectorList from \"../../Common/ConnectorList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\n\nconst Wallets: React.FC = () => {\n const context = usePayContext();\n const locales = useLocales({});\n\n const { hydrateOrder, order } = useDaimoPay();\n\n // If we're not in deposit mode, hydrate immediately.\n useEffect(() => {\n if (\n !context.paymentState.isDepositFlow &&\n order != null &&\n order.mode !== DaimoPayOrderMode.HYDRATED\n ) {\n hydrateOrder();\n }\n }, [context.paymentState.isDepositFlow, hydrateOrder, order]);\n\n return (\n <PageContent>\n <OrderHeader minified
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Connectors/index.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { Disclaimer, PageContent } from \"../../Common/Modal/styles\";\n\nimport { DaimoPayOrderMode } from \"@daimo/pay-common\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport ConnectorList from \"../../Common/ConnectorList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\n\nconst Wallets: React.FC = () => {\n const context = usePayContext();\n const locales = useLocales({});\n\n const { hydrateOrder, order } = useDaimoPay();\n\n // If we're not in deposit mode, hydrate immediately.\n useEffect(() => {\n if (\n !context.paymentState.isDepositFlow &&\n order != null &&\n order.mode !== DaimoPayOrderMode.HYDRATED\n ) {\n hydrateOrder();\n }\n }, [context.paymentState.isDepositFlow, hydrateOrder, order]);\n\n return (\n <PageContent>\n <OrderHeader minified />\n <ConnectorList />\n {context.options?.disclaimer && (\n <Disclaimer style={{ visibility: \"hidden\", pointerEvents: \"none\" }}>\n <div>{context.options?.disclaimer}</div>\n </Disclaimer>\n )}\n </PageContent>\n );\n};\n\nexport default Wallets;\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,UAAoB,MAAM;AAC9B,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAgB,UAAW,CAAA,EAAE,EAAA;AAE7B,EAAA,MAAM,EAAE,YAAA,EAAc,KAAM,EAAA,GAAI,WAAY,EAAA,CAAA;AAG5C,EAAA,SAAA,CAAU,MAAM;AACd,IACE,IAAA,CAAC,QAAQ,YAAa,CAAA,aAAA,IACtB,SAAS,IACT,IAAA,KAAA,CAAM,IAAS,KAAA,iBAAA,CAAkB,QACjC,EAAA;AACA,MAAa,YAAA,EAAA,CAAA;AAAA,KACf;AAAA,KACC,CAAC,OAAA,CAAQ,aAAa,aAAe,EAAA,YAAA,EAAc,KAAK,CAAC,CAAA,CAAA;AAE5D,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,WAAA,EAAA,EAAY,UAAQ,IAAC,EAAA,CAAA;AAAA,wBACrB,aAAc,EAAA,EAAA,CAAA;AAAA,IACd,QAAQ,OAAS,EAAA,UAAA,oBACf,GAAA,CAAA,UAAA,EAAA,EAAW,OAAO,EAAE,UAAA,EAAY,QAAU,EAAA,aAAA,EAAe,QACxD,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAK,QAAQ,EAAA,OAAA,CAAA,OAAA,EAAS,YAAW,CACpC,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -8,11 +8,11 @@ import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
|
|
|
8
8
|
|
|
9
9
|
function ErrorPage() {
|
|
10
10
|
const pay = useDaimoPay();
|
|
11
|
-
const supportUrl = getSupportUrl(pay.order?.id?.toString() ?? "", "Error");
|
|
12
11
|
let errorBody = "Unknown error";
|
|
13
12
|
if (pay.paymentState === "error") {
|
|
14
13
|
errorBody = pay.paymentErrorMessage;
|
|
15
14
|
}
|
|
15
|
+
const supportUrl = getSupportUrl(pay.order?.id?.toString() ?? "", errorBody);
|
|
16
16
|
return /* @__PURE__ */ jsx(PageContent, { children: /* @__PURE__ */ jsxs(
|
|
17
17
|
ModalContent,
|
|
18
18
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Error/index.tsx"],"sourcesContent":["import {\n ModalBody,\n ModalContent,\n PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport { AlertIcon } from \"../../../assets/icons\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport styled from \"../../../styles/styled\";\nimport { getSupportUrl } from \"../../../utils/supportUrl\";\nimport PoweredByFooter from \"../../Common/PoweredByFooter\";\n\nexport default function ErrorPage() {\n const pay = useDaimoPay();\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Error/index.tsx"],"sourcesContent":["import {\n ModalBody,\n ModalContent,\n PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport { AlertIcon } from \"../../../assets/icons\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport styled from \"../../../styles/styled\";\nimport { getSupportUrl } from \"../../../utils/supportUrl\";\nimport PoweredByFooter from \"../../Common/PoweredByFooter\";\n\nexport default function ErrorPage() {\n const pay = useDaimoPay();\n\n let errorBody = \"Unknown error\";\n if (pay.paymentState === \"error\") {\n errorBody = pay.paymentErrorMessage;\n }\n\n const supportUrl = getSupportUrl(pay.order?.id?.toString() ?? \"\", errorBody);\n\n return (\n <PageContent>\n <ModalContent\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n paddingBottom: 0,\n position: \"relative\",\n }}\n >\n <CenterContainer>\n <FailIcon />\n <ErrorBody>\n <strong>{errorBody}</strong>\n </ErrorBody>\n </CenterContainer>\n <PoweredByFooter supportUrl={supportUrl} showNeedHelpImmediately />\n </ModalContent>\n </PageContent>\n );\n}\n\nconst CenterContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 16px;\n max-width: 100%;\n`;\n\nconst ErrorBody = styled(ModalBody)`\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst FailIcon = styled(AlertIcon)`\n color: var(--ck-body-color-alert);\n width: 32px;\n height: 32px;\n margin-top: auto;\n margin-bottom: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;;AAYA,SAAwB,SAAY,GAAA;AAClC,EAAA,MAAM,MAAM,WAAY,EAAA,CAAA;AAExB,EAAA,IAAI,SAAY,GAAA,eAAA,CAAA;AAChB,EAAI,IAAA,GAAA,CAAI,iBAAiB,OAAS,EAAA;AAChC,IAAA,SAAA,GAAY,GAAI,CAAA,mBAAA,CAAA;AAAA,GAClB;AAEA,EAAM,MAAA,UAAA,GAAa,cAAc,GAAI,CAAA,KAAA,EAAO,IAAI,QAAS,EAAA,IAAK,IAAI,SAAS,CAAA,CAAA;AAE3E,EAAA,2BACG,WACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,QAAA;AAAA,QAChB,UAAY,EAAA,QAAA;AAAA,QACZ,aAAe,EAAA,CAAA;AAAA,QACf,QAAU,EAAA,UAAA;AAAA,OACZ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,eACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,0BACT,GAAA,CAAA,SAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAQ,qBAAU,CACrB,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA,EAAgB,UAAwB,EAAA,uBAAA,EAAuB,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAErE,EAAA,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,kBAAkB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAQ/B,MAAM,SAAA,GAAY,OAAO,SAAS,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMlC,MAAM,QAAA,GAAW,OAAO,SAAS,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}
|
|
@@ -29,12 +29,12 @@ const SelectDepositAddressAmount = () => {
|
|
|
29
29
|
const value = e.target.value;
|
|
30
30
|
if (value !== "" && !isValidNumber(value, USD_DECIMALS)) return;
|
|
31
31
|
setUsdInput(value);
|
|
32
|
-
|
|
32
|
+
const usd = Number(sanitizeNumber(value));
|
|
33
|
+
if (usd > maxUsdLimit) {
|
|
33
34
|
setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
|
|
34
35
|
} else {
|
|
35
36
|
setMessage(minimumMessage);
|
|
36
37
|
}
|
|
37
|
-
const usd = Number(sanitizeNumber(value));
|
|
38
38
|
setContinueDisabled(usd <= 0 || usd > maxUsdLimit || usd < minUsd);
|
|
39
39
|
};
|
|
40
40
|
const handleKeyDown = (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/SelectDepositAddressAmount/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n ModalBody,\n ModalContent,\n PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport styled from \"../../../styles/styled\";\nimport { formatUsd, USD_DECIMALS } from \"../../../utils/format\";\nimport { isValidNumber, sanitizeNumber } from \"../../../utils/validateInput\";\nimport AmountInputField from \"../../Common/AmountInput/AmountInputField\";\nimport Button from \"../../Common/Button\";\nimport ExternalPaymentSpinner from \"../../Spinners/ExternalPaymentSpinner\";\n\nconst SelectDepositAddressAmount: React.FC = () => {\n const { paymentState, setRoute, triggerResize } = usePayContext();\n const { selectedDepositAddressOption } = paymentState;\n\n const maxUsdLimit = paymentState.getOrderUsdLimit();\n const minUsd = selectedDepositAddressOption?.minimumUsd ?? 0;\n const minimumMessage =\n minUsd > 0 ? `Minimum ${formatUsd(minUsd, \"up\")}` : null;\n\n const [usdInput, setUsdInput] = useState<string>(\"\");\n const [message, setMessage] = useState<string | null>(minimumMessage);\n const [continueDisabled, setContinueDisabled] = useState(true);\n\n useEffect(() => {\n triggerResize();\n }, [message]); // eslint-disable-line react-hooks/exhaustive-deps\n\n if (selectedDepositAddressOption == null) {\n return <PageContent></PageContent>;\n }\n\n const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value;\n if (value !== \"\" && !isValidNumber(value, USD_DECIMALS)) return;\n\n setUsdInput(value);\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/SelectDepositAddressAmount/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n ModalBody,\n ModalContent,\n PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport styled from \"../../../styles/styled\";\nimport { formatUsd, USD_DECIMALS } from \"../../../utils/format\";\nimport { isValidNumber, sanitizeNumber } from \"../../../utils/validateInput\";\nimport AmountInputField from \"../../Common/AmountInput/AmountInputField\";\nimport Button from \"../../Common/Button\";\nimport ExternalPaymentSpinner from \"../../Spinners/ExternalPaymentSpinner\";\n\nconst SelectDepositAddressAmount: React.FC = () => {\n const { paymentState, setRoute, triggerResize } = usePayContext();\n const { selectedDepositAddressOption } = paymentState;\n\n const maxUsdLimit = paymentState.getOrderUsdLimit();\n const minUsd = selectedDepositAddressOption?.minimumUsd ?? 0;\n const minimumMessage =\n minUsd > 0 ? `Minimum ${formatUsd(minUsd, \"up\")}` : null;\n\n const [usdInput, setUsdInput] = useState<string>(\"\");\n const [message, setMessage] = useState<string | null>(minimumMessage);\n const [continueDisabled, setContinueDisabled] = useState(true);\n\n useEffect(() => {\n triggerResize();\n }, [message]); // eslint-disable-line react-hooks/exhaustive-deps\n\n if (selectedDepositAddressOption == null) {\n return <PageContent></PageContent>;\n }\n\n const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value;\n if (value !== \"\" && !isValidNumber(value, USD_DECIMALS)) return;\n\n setUsdInput(value);\n const usd = Number(sanitizeNumber(value));\n\n if (usd > maxUsdLimit) {\n setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);\n } else {\n setMessage(minimumMessage);\n }\n\n setContinueDisabled(usd <= 0 || usd > maxUsdLimit || usd < minUsd);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\" && !continueDisabled) {\n handleContinue();\n }\n };\n\n const handleContinue = () => {\n const amountUsd = Number(sanitizeNumber(usdInput));\n paymentState.setChosenUsd(amountUsd);\n setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, { amountUsd });\n };\n\n return (\n <PageContent>\n <ExternalPaymentSpinner\n logoURI={selectedDepositAddressOption.logoURI}\n logoShape=\"circle\"\n />\n <ModalContent $preserveDisplay={true}>\n <AmountInputContainer>\n <AmountInputField\n value={usdInput}\n onChange={handleAmountChange}\n onKeyDown={handleKeyDown}\n />\n </AmountInputContainer>\n {message && <ModalBody>{message}</ModalBody>}\n <Button onClick={handleContinue} disabled={continueDisabled}>\n Continue\n </Button>\n </ModalContent>\n </PageContent>\n );\n};\n\nconst AmountInputContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport default SelectDepositAddressAmount;\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBA,MAAM,6BAAuC,MAAM;AACjD,EAAA,MAAM,EAAE,YAAA,EAAc,QAAU,EAAA,aAAA,KAAkB,aAAc,EAAA,CAAA;AAChE,EAAM,MAAA,EAAE,8BAAiC,GAAA,YAAA,CAAA;AAEzC,EAAM,MAAA,WAAA,GAAc,aAAa,gBAAiB,EAAA,CAAA;AAClD,EAAM,MAAA,MAAA,GAAS,8BAA8B,UAAc,IAAA,CAAA,CAAA;AAC3D,EAAM,MAAA,cAAA,GACJ,SAAS,CAAI,GAAA,CAAA,QAAA,EAAW,UAAU,MAAQ,EAAA,IAAI,CAAC,CAAK,CAAA,GAAA,IAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,EAAE,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAwB,cAAc,CAAA,CAAA;AACpE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAc,aAAA,EAAA,CAAA;AAAA,GAChB,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAA,IAAI,gCAAgC,IAAM,EAAA;AACxC,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA,CAAA;AAAA,GACtB;AAEA,EAAM,MAAA,kBAAA,GAAqB,CAAC,CAA2C,KAAA;AACrE,IAAM,MAAA,KAAA,GAAQ,EAAE,MAAO,CAAA,KAAA,CAAA;AACvB,IAAA,IAAI,UAAU,EAAM,IAAA,CAAC,aAAc,CAAA,KAAA,EAAO,YAAY,CAAG,EAAA,OAAA;AAEzD,IAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,IAAA,MAAM,GAAM,GAAA,MAAA,CAAO,cAAe,CAAA,KAAK,CAAC,CAAA,CAAA;AAExC,IAAA,IAAI,MAAM,WAAa,EAAA;AACrB,MAAA,UAAA,CAAW,CAAW,QAAA,EAAA,SAAA,CAAU,WAAW,CAAC,CAAE,CAAA,CAAA,CAAA;AAAA,KACzC,MAAA;AACL,MAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AAAA,KAC3B;AAEA,IAAA,mBAAA,CAAoB,GAAO,IAAA,CAAA,IAAK,GAAM,GAAA,WAAA,IAAe,MAAM,MAAM,CAAA,CAAA;AAAA,GACnE,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAA6C,KAAA;AAClE,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAC,gBAAkB,EAAA;AAC1C,MAAe,cAAA,EAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,MAAM,SAAY,GAAA,MAAA,CAAO,cAAe,CAAA,QAAQ,CAAC,CAAA,CAAA;AACjD,IAAA,YAAA,CAAa,aAAa,SAAS,CAAA,CAAA;AACnC,IAAA,QAAA,CAAS,MAAO,CAAA,uBAAA,EAAyB,EAAE,SAAA,EAAW,CAAA,CAAA;AAAA,GACxD,CAAA;AAEA,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,sBAAA;AAAA,MAAA;AAAA,QACC,SAAS,4BAA6B,CAAA,OAAA;AAAA,QACtC,SAAU,EAAA,QAAA;AAAA,OAAA;AAAA,KACZ;AAAA,oBACA,IAAA,CAAC,YAAa,EAAA,EAAA,gBAAA,EAAkB,IAC9B,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,oBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,QAAA;AAAA,UACP,QAAU,EAAA,kBAAA;AAAA,UACV,SAAW,EAAA,aAAA;AAAA,SAAA;AAAA,OAEf,EAAA,CAAA;AAAA,MACC,OAAA,oBAAY,GAAA,CAAA,SAAA,EAAA,EAAW,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,0BAC/B,MAAO,EAAA,EAAA,OAAA,EAAS,cAAgB,EAAA,QAAA,EAAU,kBAAkB,QAE7D,EAAA,UAAA,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,uBAAuB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}
|
|
@@ -19,7 +19,7 @@ const SelectDepositAddressChain = () => {
|
|
|
19
19
|
untronAvailable
|
|
20
20
|
} = paymentState;
|
|
21
21
|
return /* @__PURE__ */ jsxs(PageContent, { children: [
|
|
22
|
-
/* @__PURE__ */ jsx(OrderHeader, { minified: true
|
|
22
|
+
/* @__PURE__ */ jsx(OrderHeader, { minified: true }),
|
|
23
23
|
!depositAddressOptions.loading && depositAddressOptions.options?.length === 0 && /* @__PURE__ */ jsxs(
|
|
24
24
|
ModalContent,
|
|
25
25
|
{
|