@daimo/pay 1.19.5 → 1.19.6

package/build/pay/packages/connectkit/src/components/Common/OptionsList/index.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { useEffect } from 'react';
+import { keyframes } from 'styled-components';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import styled from '../../../styles/styled/index.js';
+import { OrDivider } from '../Modal/index.js';
+import { ScrollArea } from '../ScrollArea/index.js';
+import { OptionsContainer, OptionButton, OptionLabel, OptionTitle, OptionSubtitle } from './styles.js';
+
+const OptionsList = ({
+  options,
+  isLoading,
+  requiredSkeletons,
+  scrollHeight = 300,
+  orDivider = false,
+  hideBottomLine = false
+}) => {
+  const { triggerResize, log } = usePayContext();
+  const optionsLength = options.length;
+  useEffect(() => {
+    log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);
+    if (optionsLength > 0) triggerResize();
+  }, [optionsLength]);
+  if (isLoading) {
+    const skeletonCount = requiredSkeletons ? Math.max(requiredSkeletons - optionsLength, 0) : 0;
+    return /* @__PURE__ */ jsxs(OptionsContainer, { $totalResults: options.length, children: [
+      options.map((option) => /* @__PURE__ */ jsx(OptionItem, { option }, option.id)),
+      isLoading && Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonOptionItem, {}, index))
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScrollArea,
+      {
+        mobileDirection: "vertical",
+        height: scrollHeight,
+        hideBottomLine: orDivider || hideBottomLine,
+        totalItems: options.length,
+        children: /* @__PURE__ */ jsx(OptionsContainer, { $totalResults: options.length, children: options.map((option) => /* @__PURE__ */ jsx(OptionItem, { option }, option.id)) })
+      }
+    ),
+    orDivider && /* @__PURE__ */ jsx(OrDivider, {})
+  ] });
+};
+const SkeletonOptionItem = () => {
+  return /* @__PURE__ */ jsxs(OptionButton, { type: "button", children: [
+    /* @__PURE__ */ jsx(SkeletonIcon, {}),
+    /* @__PURE__ */ jsx(SkeletonLabel, {})
+  ] });
+};
+const pulse = keyframes`
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+`;
+const SkeletonIcon = styled.div`
+  position: absolute;
+  right: 20px;
+  width: 32px;
+  height: 32px;
+  border-radius: 22.5%;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${pulse} 1.5s ease-in-out infinite;
+`;
+const SkeletonLabel = styled.div`
+  width: 100px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${pulse} 1.5s ease-in-out infinite;
+`;
+const OptionItem = ({ option }) => {
+  const hydratedIcons = option.icons.map((icon) => {
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsx("img", { src: icon, alt: "" }, option.id);
+    }
+    return icon;
+  });
+  const iconContent = (() => {
+    return /* @__PURE__ */ jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => /* @__PURE__ */ jsx(
+      IconStackItem,
+      {
+        $marginRight: index !== hydratedIcons.length - 1 ? -12 : 0,
+        $zIndex: hydratedIcons.length - index,
+        children: icon
+      },
+      index
+    )) });
+  })();
+  return /* @__PURE__ */ jsxs(
+    OptionButton,
+    {
+      type: "button",
+      onClick: option.onClick,
+      disabled: option.disabled,
+      children: [
+        iconContent,
+        /* @__PURE__ */ jsxs(OptionLabel, { children: [
+          /* @__PURE__ */ jsx(OptionTitle, { children: option.title }),
+          option.subtitle && /* @__PURE__ */ jsx(OptionSubtitle, { children: option.subtitle })
+        ] })
+      ]
+    }
+  );
+};
+const IconStackContainer = styled(motion.div)`
+  position: absolute;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const IconStackItem = styled(motion.div)`
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${(props) => props.$marginRight || 0}px;
+  z-index: ${(props) => props.$zIndex || 2};
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+  border-radius: 22.5%;
+`;
+
+export { OptionsList };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Common/OptionsList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Common/OptionsList/index.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { useEffect } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { OrDivider } from \"../Modal\";\nimport { ScrollArea } from \"../ScrollArea\";\nimport {\n  OptionButton,\n  OptionLabel,\n  OptionSubtitle,\n  OptionTitle,\n  OptionsContainer,\n} from \"./styles\";\n\nexport interface Option {\n  id: string;\n  sortValue?: number;\n  title: string;\n  subtitle?: string;\n  icons: (React.ReactNode | string)[];\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport const OptionsList = ({\n  options,\n  isLoading,\n  requiredSkeletons,\n  scrollHeight = 300,\n  orDivider = false,\n  hideBottomLine = false,\n}: {\n  options: Option[];\n  isLoading?: boolean;\n  requiredSkeletons?: number;\n  scrollHeight?: number;\n  orDivider?: boolean;\n  hideBottomLine?: boolean;\n}) => {\n  const { triggerResize, log } = usePayContext();\n  const optionsLength = options.length;\n\n  useEffect(() => {\n    log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);\n    if (optionsLength > 0) triggerResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [optionsLength]);\n\n  if (isLoading) {\n    const skeletonCount = requiredSkeletons\n      ? Math.max(requiredSkeletons - optionsLength, 0)\n      : 0;\n\n    return (\n      <OptionsContainer $totalResults={options.length}>\n        {options.map((option) => (\n          <OptionItem key={option.id} option={option} />\n        ))}\n        {isLoading &&\n          Array.from({ length: skeletonCount }).map((_, index) => (\n            <SkeletonOptionItem key={index} />\n          ))}\n      </OptionsContainer>\n    );\n  }\n\n  return (\n    <>\n      <ScrollArea\n        mobileDirection={\"vertical\"}\n        height={scrollHeight}\n        hideBottomLine={orDivider || hideBottomLine}\n        totalItems={options.length}\n      >\n        <OptionsContainer $totalResults={options.length}>\n          {options.map((option) => (\n            <OptionItem key={option.id} option={option} />\n          ))}\n        </OptionsContainer>\n      </ScrollArea>\n      {orDivider && <OrDivider />}\n    </>\n  );\n};\n\nconst SkeletonOptionItem = () => {\n  return (\n    <OptionButton type=\"button\">\n      <SkeletonIcon />\n      <SkeletonLabel />\n    </OptionButton>\n  );\n};\n\nconst pulse = keyframes`\n  0% {\n    opacity: 0.6;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.6;\n  }\n`;\n\nconst SkeletonIcon = styled.div`\n  position: absolute;\n  right: 20px;\n  width: 32px;\n  height: 32px;\n  border-radius: 22.5%;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${pulse} 1.5s ease-in-out infinite;\n`;\n\nconst SkeletonLabel = styled.div`\n  width: 100px;\n  height: 16px;\n  border-radius: 8px;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${pulse} 1.5s ease-in-out infinite;\n`;\n\nconst OptionItem = ({ option }: { option: Option }) => {\n  const hydratedIcons = option.icons.map((icon) => {\n    if (typeof icon === \"string\") {\n      return <img key={option.id} src={icon} alt=\"\" />;\n    }\n    return icon;\n  });\n\n  const iconContent = (() => {\n    return (\n      <IconStackContainer>\n        {hydratedIcons.map((icon, index) => (\n          <IconStackItem\n            key={index}\n            $marginRight={index !== hydratedIcons.length - 1 ? -12 : 0}\n            $zIndex={hydratedIcons.length - index}\n          >\n            {icon}\n          </IconStackItem>\n        ))}\n      </IconStackContainer>\n    );\n  })();\n\n  return (\n    <OptionButton\n      type=\"button\"\n      onClick={option.onClick}\n      disabled={option.disabled}\n    >\n      {iconContent}\n      <OptionLabel>\n        <OptionTitle>{option.title}</OptionTitle>\n        {option.subtitle && <OptionSubtitle>{option.subtitle}</OptionSubtitle>}\n      </OptionLabel>\n    </OptionButton>\n  );\n};\n\nconst IconStackContainer = styled(motion.div)`\n  position: absolute;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst IconStackItem = styled(motion.div)<{\n  $marginRight?: number;\n  $zIndex?: 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-right: ${(props) => props.$marginRight || 0}px;\n  z-index: ${(props) => props.$zIndex || 2};\n  width: 32px;\n  height: 32px;\n  overflow: hidden;\n  svg,\n  img {\n    display: block;\n    position: relative;\n    pointer-events: none;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n  border-radius: 22.5%;\n`;\n"],"names":[],"mappings":"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"}

package/build/pay/packages/connectkit/src/components/Common/OptionsList/styles.js

@@ -0,0 +1,138 @@
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { motion } from 'framer-motion';
+
+const OptionButton = styled(motion.button)`
+  display: block;
+  text-decoration: none;
+  cursor: ${(props) => props.disabled ? "default" : "pointer"};
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 64px;
+  font-size: 17px;
+  font-weight: var(--ck-primary-button-font-weight, 500);
+  line-height: 20px;
+  text-align: var(--ck-body-button-text-align, left);
+  transition: 180ms ease;
+  transition-property: background, color, box-shadow, transform, opacity;
+  will-change: transform, box-shadow, background-color, color, opacity;
+
+  --fallback-color: var(--ck-primary-button-color);
+  --fallback-background: var(--ck-primary-button-background);
+  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
+  --fallback-border-radius: var(--ck-primary-button-border-radius);
+
+  --color: var(--ck-primary-button-color, var(--fallback-color));
+  --background: var(--ck-primary-button-background, var(--fallback-background));
+  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
+  --border-radius: var(
+    --ck-primary-button-border-radius,
+    var(--fallback-border-radius)
+  );
+
+  --hover-color: var(--ck-primary-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-primary-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-primary-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+  --hover-border-radius: var(
+    --ck-primary-button-hover-border-radius,
+    var(--border-radius)
+  );
+
+  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-primary-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-primary-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+  --active-border-radius: var(
+    --ck-primary-button-active-border-radius,
+    var(--hover-border-radius)
+  );
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  &:disabled {
+    transition: 180ms ease;
+    opacity: 0.4;
+  }
+
+  --bg: var(--background);
+  &:not(:disabled) {
+    &:hover {
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:focus-visible {
+      transition-duration: 100ms;
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:active {
+      color: var(--active-color);
+      background: var(--active-background);
+      box-shadow: var(--active-box-shadow);
+      border-radius: var(--active-border-radius);
+      --bg: var(--active-background, var(--background));
+    }
+  }
+`;
+const OptionLabel = styled(motion.span)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  overflow: hidden;
+  padding: 2px 0;
+  padding-right: 38px;
+`;
+const OptionTitle = styled(motion.span)`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+`;
+const OptionSubtitle = styled(motion.span)`
+  font-size: 14px;
+  opacity: 0.6;
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+`;
+const OptionsContainer = styled.div`
+  transition: opacity 300ms ease;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  ${(props) => props.$disabled && css`
+      pointer-events: none;
+      opacity: 0.4;
+    `}
+`;
+
+export { OptionButton, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer };
+//# sourceMappingURL=styles.js.map

package/build/pay/packages/connectkit/src/components/Common/OptionsList/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Common/OptionsList/styles.ts"],"sourcesContent":["import { css } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\n\nimport { motion } from \"framer-motion\";\n\nexport const OptionButton = styled(motion.button)`\n  display: block;\n  text-decoration: none;\n  cursor: ${(props) => (props.disabled ? \"default\" : \"pointer\")};\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 20px;\n  height: 64px;\n  font-size: 17px;\n  font-weight: var(--ck-primary-button-font-weight, 500);\n  line-height: 20px;\n  text-align: var(--ck-body-button-text-align, left);\n  transition: 180ms ease;\n  transition-property: background, color, box-shadow, transform, opacity;\n  will-change: transform, box-shadow, background-color, color, opacity;\n\n  --fallback-color: var(--ck-primary-button-color);\n  --fallback-background: var(--ck-primary-button-background);\n  --fallback-box-shadow: var(--ck-primary-button-box-shadow);\n  --fallback-border-radius: var(--ck-primary-button-border-radius);\n\n  --color: var(--ck-primary-button-color, var(--fallback-color));\n  --background: var(--ck-primary-button-background, var(--fallback-background));\n  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));\n  --border-radius: var(\n    --ck-primary-button-border-radius,\n    var(--fallback-border-radius)\n  );\n\n  --hover-color: var(--ck-primary-button-hover-color, var(--color));\n  --hover-background: var(\n    --ck-primary-button-hover-background,\n    var(--background)\n  );\n  --hover-box-shadow: var(\n    --ck-primary-button-hover-box-shadow,\n    var(--box-shadow)\n  );\n  --hover-border-radius: var(\n    --ck-primary-button-hover-border-radius,\n    var(--border-radius)\n  );\n\n  --active-color: var(--ck-primary-button-active-color, var(--hover-color));\n  --active-background: var(\n    --ck-primary-button-active-background,\n    var(--hover-background)\n  );\n  --active-box-shadow: var(\n    --ck-primary-button-active-box-shadow,\n    var(--hover-box-shadow)\n  );\n  --active-border-radius: var(\n    --ck-primary-button-active-border-radius,\n    var(--hover-border-radius)\n  );\n\n  color: var(--color);\n  background: var(--background);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n\n  &:disabled {\n    transition: 180ms ease;\n    opacity: 0.4;\n  }\n\n  --bg: var(--background);\n  &:not(:disabled) {\n    &:hover {\n      color: var(--hover-color);\n      background: var(--hover-background);\n      box-shadow: var(--hover-box-shadow);\n      border-radius: var(--hover-border-radius);\n      --bg: var(--hover-background, var(--background));\n    }\n    &:focus-visible {\n      transition-duration: 100ms;\n      color: var(--hover-color);\n      background: var(--hover-background);\n      box-shadow: var(--hover-box-shadow);\n      border-radius: var(--hover-border-radius);\n      --bg: var(--hover-background, var(--background));\n    }\n    &:active {\n      color: var(--active-color);\n      background: var(--active-background);\n      box-shadow: var(--active-box-shadow);\n      border-radius: var(--active-border-radius);\n      --bg: var(--active-background, var(--background));\n    }\n  }\n`;\n\nexport const OptionLabel = styled(motion.span)`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  width: 100%;\n  overflow: hidden;\n  padding: 2px 0;\n  padding-right: 38px;\n`;\n\nexport const OptionTitle = styled(motion.span)`\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\n\nexport const OptionSubtitle = styled(motion.span)`\n  font-size: 14px;\n  opacity: 0.6;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\n\nexport const OptionsContainer = styled.div<{\n  $disabled?: boolean;\n}>`\n  transition: opacity 300ms ease;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n    `}\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,YAAA,GAAe,MAAO,CAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAAA;AAAA;AAAA,UAAA,EAGpC,CAAC,KAAA,KAAW,KAAM,CAAA,QAAA,GAAW,YAAY,SAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AA6FlD,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAWhC,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOhC,MAAA,cAAA,GAAiB,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUzC,MAAM,mBAAmB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQnC,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,SACN,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,IAGC,CAAA,CAAA;AAAA;;;;"}

package/build/pay/packages/connectkit/src/components/Common/OrderHeader/index.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getAddressContraction } from '@daimo/pay-common';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { motion } from 'framer-motion';
+import { useAccount } from 'wagmi';
+import { Solana } from '../../../assets/chains.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import { ROUTES } from '../../../constants/routes.js';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import styled from '../../../styles/styled/index.js';
+import { formatUsd } from '../../../utils/format.js';
+
+const OrderHeader = ({
+  minified = false,
+  show = "all"
+}) => {
+  const { paymentState, route } = usePayContext();
+  const { isConnected: isEthConnected, address, connector } = useAccount();
+  const {
+    connected: isSolanaConnected,
+    publicKey,
+    wallet: solanaWallet
+  } = useWallet();
+  const { senderEnsName } = paymentState;
+  const { order } = useDaimoPay();
+  const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
+  const solWalletDisplayName = getAddressContraction(
+    publicKey?.toBase58() ?? ""
+  );
+  const orderUsd = order?.destFinalCallTokenAmount.usd;
+  const locales = useLocales();
+  const titleAmountContent = (() => {
+    if (paymentState.isDepositFlow) {
+      return route === ROUTES.SELECT_TOKEN ? (
+        // TODO: make this match `ModalH1` font size for mobile
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "19px", lineHeight: "22px" }, children: locales.yourBalances })
+      ) : null;
+    } else {
+      return orderUsd != null ? /* @__PURE__ */ jsx("span", { children: formatUsd(orderUsd, "nearest") }) : null;
+    }
+  })();
+  const renderIcon = (icon, name, size = 32) => {
+    if (!icon) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(LogoContainer, { $size: size, $zIndex: 1, style: { borderRadius: "22.5%" }, children: typeof icon === "string" ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: icon,
+        alt: name || "wallet",
+        style: { maxWidth: "100%", maxHeight: "100%" }
+      }
+    ) : icon });
+  };
+  let walletIcon = renderIcon(connector?.icon);
+  let solanaIcon = renderIcon(
+    solanaWallet?.adapter.icon || /* @__PURE__ */ jsx(Solana, {}),
+    solanaWallet?.adapter.name
+  );
+  if (minified) {
+    if (titleAmountContent != null) {
+      return /* @__PURE__ */ jsxs(MinifiedContainer, { children: [
+        /* @__PURE__ */ jsx(MinifiedTitleAmount, { children: titleAmountContent }),
+        show === "evm" && isEthConnected && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(SubtitleContainer, { children: [
+          /* @__PURE__ */ jsx(Subtitle, { children: ethWalletDisplayName }),
+          walletIcon
+        ] }) }),
+        show === "solana" && isSolanaConnected && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(SubtitleContainer, { children: [
+          /* @__PURE__ */ jsx(Subtitle, { children: solWalletDisplayName }),
+          solanaIcon
+        ] }) })
+      ] });
+    }
+  } else {
+    return /* @__PURE__ */ jsx(Fragment, { children: titleAmountContent && /* @__PURE__ */ jsx(TitleAmount, { children: titleAmountContent }) });
+  }
+};
+const TitleAmount = styled(motion.h1)`
+  margin-bottom: 24px;
+  padding: 0;
+  line-height: 66px;
+  font-size: 64px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
+  color: ${(props) => {
+  if (props.$error) return "var(--ck-body-color-danger)";
+  if (props.$valid) return "var(--ck-body-color-valid)";
+  return "var(--ck-body-color)";
+}};
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    font-size: 64px;
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`;
+const Subtitle = styled(motion.div)`
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 21px;
+  color: var(--ck-body-color-muted);
+`;
+const MinifiedTitleAmount = styled(motion.div)`
+  font-size: 32px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
+  line-height: 36px;
+  color: var(--ck-body-color);
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 8px;
+`;
+const MinifiedContainer = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 24px;
+`;
+const LogoContainer = styled(motion.div)`
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${(props) => props.$marginLeft || 0}px;
+  z-index: ${(props) => props.$zIndex || 2};
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  border-radius: 9999px;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`;
+const SubtitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+`;
+
+export { OrderHeader };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Common/OrderHeader/index.js.map

@@ -0,0 +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 { Solana } from \"../../../assets/chains\";\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      </>\n    );\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 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 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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"}

package/build/pay/packages/connectkit/src/components/Common/PaymentBreakdown/index.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+import { ModalBody } from '../Modal/styles.js';
+
+const PaymentBreakdown = ({ paymentOption }) => {
+  const subtotalUsd = paymentOption.required.usd;
+  const feesUsd = paymentOption.fees.usd;
+  const totalUsd = subtotalUsd + feesUsd;
+  return /* @__PURE__ */ jsxs(FeesContainer, { children: [
+    feesUsd > 0 && /* @__PURE__ */ jsxs(FeeRow, { children: [
+      /* @__PURE__ */ jsx(ModalBody, { children: "Subtotal" }),
+      /* @__PURE__ */ jsxs(ModalBody, { children: [
+        "$",
+        subtotalUsd.toFixed(2)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FeeRow, { children: [
+      /* @__PURE__ */ jsx(ModalBody, { children: "Fees" }),
+      feesUsd === 0 ? /* @__PURE__ */ jsx(Badge, { children: "Free" }) : /* @__PURE__ */ jsxs(ModalBody, { children: [
+        "$",
+        feesUsd.toFixed(2)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FeeRow, { style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }),
+      /* @__PURE__ */ jsxs(ModalBody, { style: { fontWeight: 600 }, children: [
+        "$",
+        totalUsd.toFixed(2)
+      ] })
+    ] })
+  ] });
+};
+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 { PaymentBreakdown as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Common/PaymentBreakdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Common/PaymentBreakdown/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { WalletPaymentOption } from \"@daimo/pay-common\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"../../../styles/styled\";\nimport { ModalBody } from \"../../Common/Modal/styles\";\n\nconst PaymentBreakdown: React.FC<{\n  paymentOption: WalletPaymentOption;\n}> = ({ paymentOption }) => {\n  const subtotalUsd = paymentOption.required.usd;\n  const feesUsd = paymentOption.fees.usd;\n  const totalUsd = subtotalUsd + feesUsd;\n\n  return (\n    <FeesContainer>\n      {feesUsd > 0 && (\n        <FeeRow>\n          <ModalBody>Subtotal</ModalBody>\n          <ModalBody>${subtotalUsd.toFixed(2)}</ModalBody>\n        </FeeRow>\n      )}\n      <FeeRow>\n        <ModalBody>Fees</ModalBody>\n        {feesUsd === 0 ? (\n          <Badge>Free</Badge>\n        ) : (\n          <ModalBody>${feesUsd.toFixed(2)}</ModalBody>\n        )}\n      </FeeRow>\n      <FeeRow style={{ marginTop: 8 }}>\n        <ModalBody style={{ fontWeight: 600 }}>Total</ModalBody>\n        <ModalBody style={{ fontWeight: 600 }}>\n          ${totalUsd.toFixed(2)}\n        </ModalBody>\n      </FeeRow>\n    </FeesContainer>\n  );\n};\n\nconst FeesContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  gap: 4px;\n  margin: 16px 0;\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    & ${ModalBody} {\n      margin: 0 !important;\n      max-width: 100% !important;\n      text-align: left !important;\n    }\n  }\n`;\nconst FeeRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 50%;\n`;\nconst Badge = styled.span`\n  display: inline-block;\n  padding: 3px 8px;\n  border-radius: var(--ck-primary-button-border-radius);\n  font-size: 14px;\n  font-weight: 400;\n  background: var(\n    --ck-secondary-button-background,\n    var(--ck-body-background-secondary)\n  );\n  color: var(--ck-body-color-muted);\n`;\n\nexport default PaymentBreakdown;\n"],"names":[],"mappings":";;;;;AAOA,MAAM,gBAED,GAAA,CAAC,EAAE,aAAA,EAAoB,KAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,cAAc,QAAS,CAAA,GAAA,CAAA;AAC3C,EAAM,MAAA,OAAA,GAAU,cAAc,IAAK,CAAA,GAAA,CAAA;AACnC,EAAA,MAAM,WAAW,WAAc,GAAA,OAAA,CAAA;AAE/B,EAAA,4BACG,aACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAU,OAAA,GAAA,CAAA,yBACR,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,2BAClB,SAAU,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,WAAA,CAAY,QAAQ,CAAC,CAAA;AAAA,OAAE,EAAA,CAAA;AAAA,KACtC,EAAA,CAAA;AAAA,yBAED,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,MACd,YAAY,CACX,mBAAA,GAAA,CAAC,SAAM,QAAI,EAAA,MAAA,EAAA,CAAA,wBAEV,SAAU,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,OAAE,EAAA,CAAA;AAAA,KAEpC,EAAA,CAAA;AAAA,yBACC,MAAO,EAAA,EAAA,KAAA,EAAO,EAAE,SAAA,EAAW,GAC1B,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,KAAO,EAAA,EAAE,UAAY,EAAA,GAAA,IAAO,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,2BAC3C,SAAU,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,KAAO,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QACnC,QAAA,CAAS,QAAQ,CAAC,CAAA;AAAA,OACtB,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,gBAAgB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAQU,aAAa,WAAW,CAAA;AAAA,MAAA,EACvD,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAOjB,MAAM,SAAS,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMtB,MAAM,QAAQ,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/build/pay/packages/connectkit/src/components/Common/Portal/index.js

@@ -0,0 +1,30 @@
+import { useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import packageJson from '../../../../package.json.js';
+
+const Portal = (props) => {
+  props = {
+    selector: "__DAIMOPAY__",
+    ...props
+  };
+  const { selector, children } = props;
+  const ref = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const selectorPrefixed = "#" + selector.replace(/^#/, "");
+    ref.current = document.querySelector(selectorPrefixed);
+    if (!ref.current) {
+      const div = document.createElement("div");
+      div.setAttribute("id", selector);
+      div.setAttribute("data-daimopay", `${packageJson.version}`);
+      document.body.appendChild(div);
+      ref.current = div;
+    }
+    setMounted(true);
+  }, [selector]);
+  if (!ref.current) return null;
+  return mounted ? createPortal(children, ref.current) : null;
+};
+
+export { Portal as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Common/Portal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Common/Portal/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport packageJson from \"../../../../package.json\";\n\nconst Portal = (props: any) => {\n  props = {\n    selector: \"__DAIMOPAY__\",\n    ...props,\n  };\n\n  const { selector, children } = props;\n\n  const ref = useRef<Element | null>(null);\n  const [mounted, setMounted] = useState<boolean>(false);\n\n  useEffect(() => {\n    const selectorPrefixed = \"#\" + selector.replace(/^#/, \"\");\n    ref.current = document.querySelector(selectorPrefixed);\n\n    if (!ref.current) {\n      const div = document.createElement(\"div\");\n      div.setAttribute(\"id\", selector);\n      div.setAttribute(\"data-daimopay\", `${packageJson.version}`);\n      document.body.appendChild(div);\n      ref.current = div;\n    }\n\n    setMounted(true);\n  }, [selector]);\n\n  if (!ref.current) return null;\n  return mounted ? createPortal(children, ref.current) : null;\n};\n\nexport default Portal;\n"],"names":[],"mappings":";;;;AAIM,MAAA,MAAA,GAAS,CAAC,KAAe,KAAA;AAC7B,EAAQ,KAAA,GAAA;AAAA,IACN,QAAU,EAAA,cAAA;AAAA,IACV,GAAG,KAAA;AAAA,GACL,CAAA;AAEA,EAAM,MAAA,EAAE,QAAU,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAE/B,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,KAAK,CAAA,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAmB,GAAA,GAAA,GAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,EAAE,CAAA,CAAA;AACxD,IAAI,GAAA,CAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,gBAAgB,CAAA,CAAA;AAErD,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAM,MAAA,GAAA,GAAM,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACxC,MAAI,GAAA,CAAA,YAAA,CAAa,MAAM,QAAQ,CAAA,CAAA;AAC/B,MAAA,GAAA,CAAI,YAAa,CAAA,eAAA,EAAiB,CAAG,EAAA,WAAA,CAAY,OAAO,CAAE,CAAA,CAAA,CAAA;AAC1D,MAAS,QAAA,CAAA,IAAA,CAAK,YAAY,GAAG,CAAA,CAAA;AAC7B,MAAA,GAAA,CAAI,OAAU,GAAA,GAAA,CAAA;AAAA,KAChB;AAEA,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAI,IAAA,CAAC,GAAI,CAAA,OAAA,EAAgB,OAAA,IAAA,CAAA;AACzB,EAAA,OAAO,OAAU,GAAA,YAAA,CAAa,QAAU,EAAA,GAAA,CAAI,OAAO,CAAI,GAAA,IAAA,CAAA;AACzD;;;;"}

package/build/pay/packages/connectkit/src/components/Common/PoweredByFooter/index.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import useLocales from '../../../hooks/useLocales.js';
+import styled from '../../../styles/styled/index.js';
+
+const PoweredByFooter = ({
+  receiptUrl
+} = {}) => {
+  const locales = useLocales();
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    receiptUrl ? /* @__PURE__ */ jsx(TextLink, { href: receiptUrl, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(Underline, { children: "Show receipt" }) }) : /* @__PURE__ */ jsxs(TextLink, { children: [
+      locales.poweredBy,
+      " Daimo Pay"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-4" })
+  ] });
+};
+const Container = styled(motion.div)`
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -4px;
+`;
+const TextLink = styled.a`
+  appearance: none;
+  user-select: none;
+  color: var(--ck-body-color-muted);
+  text-decoration-color: var(--ck-body-color-muted);
+  text-decoration: none;
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 400;
+`;
+const Underline = styled(motion.span)`
+  text-underline-offset: 2px;
+  text-decoration: underline;
+`;
+
+export { PoweredByFooter as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Common/PoweredByFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Common/PoweredByFooter/index.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport styled from \"../../../styles/styled\";\n\nconst PoweredByFooter = ({\n  receiptUrl,\n}: {\n  receiptUrl?: string;\n} = {}) => {\n  const locales = useLocales();\n  return (\n    <Container>\n      {receiptUrl ? (\n        <TextLink href={receiptUrl} target=\"_blank\" rel=\"noreferrer\">\n          <Underline>Show receipt</Underline>\n        </TextLink>\n      ) : (\n        <TextLink>{locales.poweredBy} Daimo Pay</TextLink>\n      )}\n      <div className=\"h-4\" />\n    </Container>\n  );\n};\n\nconst Container = styled(motion.div)`\n  text-align: center;\n  margin-top: 16px;\n  margin-bottom: -4px;\n`;\n\nconst TextLink = styled.a`\n  appearance: none;\n  user-select: none;\n  color: var(--ck-body-color-muted);\n  text-decoration-color: var(--ck-body-color-muted);\n  text-decoration: none;\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 400;\n`;\n\nconst Underline = styled(motion.span)`\n  text-underline-offset: 2px;\n  text-decoration: underline;\n`;\n\nexport default PoweredByFooter;\n"],"names":[],"mappings":";;;;;AAIA,MAAM,kBAAkB,CAAC;AAAA,EACvB,UAAA;AACF,CAAA,GAEI,EAAO,KAAA;AACT,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAA,4BACG,SACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA,mBACE,GAAA,CAAA,QAAA,EAAA,EAAS,IAAM,EAAA,UAAA,EAAY,QAAO,QAAS,EAAA,GAAA,EAAI,YAC9C,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,QAAA,EAAA,cAAA,EAAY,CACzB,EAAA,CAAA,wBAEC,QAAU,EAAA,EAAA,QAAA,EAAA;AAAA,MAAQ,OAAA,CAAA,SAAA;AAAA,MAAU,YAAA;AAAA,KAAU,EAAA,CAAA;AAAA,oBAEzC,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,KAAM,EAAA,CAAA;AAAA,GACvB,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMnC,MAAM,WAAW,MAAO,CAAA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAWxB,MAAM,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA,CAAA;;;;"}