@daimo/pay 1.15.0 → 1.16.1

package/build/src/components/Common/PoweredByFooter/index.js

@@ -7,34 +7,52 @@ import useLocales from '../../../hooks/useLocales.js';
 import styled from '../../../styles/styled/index.js';
 import { daimoPayVersion } from '../../../utils/exports.js';
 
-const PoweredByFooter = ({ supportUrl, showNeedHelpImmediately, } = {}) => {
-    const [supportVisible, setSupportVisible] = useState(showNeedHelpImmediately);
-    const locales = useLocales();
-    useEffect(() => {
-        if (supportUrl == null)
-            return;
-        // Show the support link after delay
-        const timer = setTimeout(() => {
-            setSupportVisible(true);
-        }, 2500);
-        return () => clearTimeout(timer);
-    }, [supportUrl]);
-    return (jsx(Container, { children: jsxs(TextButton, { onClick: () => {
-                window.open(supportVisible
-                    ? supportUrl
-                    : `https://pay.daimo.com?ref=sdk-v${daimoPayVersion}`, "_blank");
-            }, className: supportVisible ? "support" : "", children: [!supportVisible && jsx(CrepeIcon, {}), jsx("span", { children: supportVisible ? (jsxs(Fragment, { children: ["Need help? ", jsx(Underline, { children: "Contact support" })] })) : (jsxs(Fragment, { children: [locales.poweredBy, " Daimo Pay"] })) })] }) }));
+const PoweredByFooter = ({
+  supportUrl,
+  showNeedHelpImmediately
+} = {}) => {
+  const [supportVisible, setSupportVisible] = useState(showNeedHelpImmediately);
+  const locales = useLocales();
+  useEffect(() => {
+    if (supportUrl == null) return;
+    const timer = setTimeout(() => {
+      setSupportVisible(true);
+    }, 2500);
+    return () => clearTimeout(timer);
+  }, [supportUrl]);
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(
+    TextButton,
+    {
+      onClick: () => {
+        window.open(
+          supportVisible ? supportUrl : `https://pay.daimo.com?ref=sdk-v${daimoPayVersion}`,
+          "_blank"
+        );
+      },
+      className: supportVisible ? "support" : "",
+      children: [
+        !supportVisible && /* @__PURE__ */ jsx(CrepeIcon, {}),
+        /* @__PURE__ */ jsx("span", { children: supportVisible ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Need help? ",
+          /* @__PURE__ */ jsx(Underline, { children: "Contact support" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          locales.poweredBy,
+          " Daimo Pay"
+        ] }) })
+      ]
+    }
+  ) });
 };
-const Container = styled(motion.div) `
+const Container = styled(motion.div)`
   text-align: center;
   margin-top: 16px;
   margin-bottom: -4px;
 `;
-const fadeIn = keyframes `
+const fadeIn = keyframes`
 0%{ opacity:0; }
 100%{ opacity:1; }
 `;
-const TextButton = styled(motion.button) `
+const TextButton = styled(motion.button)`
   appearance: none;
   user-select: none;
   cursor: pointer;
@@ -72,7 +90,7 @@ const TextButton = styled(motion.button) `
     animation: ${fadeIn} 300ms ease both;
   }
 `;
-const Underline = styled(motion.span) `
+const Underline = styled(motion.span)`
   text-underline-offset: 2px;
   text-decoration: underline;
 `;

package/build/src/components/Common/PoweredByFooter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/PoweredByFooter/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;AAQM,MAAA,eAAe,GAAG,CAAC,EACvB,UAAU,EACV,uBAAuB,GAAA,GACuC,EAAE,KAAI;IACpE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;AAC9E,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,SAAS,CAAC,MAAK;QACb,IAAI,UAAU,IAAI,IAAI;YAAE,OAAO;;AAE/B,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;YAC5B,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB,EAAE,IAAI,CAAC,CAAC;AACT,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC,CAAC;AACnC,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,QACEA,GAAC,CAAA,SAAS,EACR,EAAA,QAAA,EAAAC,IAAA,CAAC,UAAU,EACT,EAAA,OAAO,EAAE,MAAK;gBACZ,MAAM,CAAC,IAAI,CACT,cAAc;AACZ,sBAAE,UAAU;AACZ,sBAAE,CAAkC,+BAAA,EAAA,eAAe,EAAE,EACvD,QAAQ,CACT,CAAC;aACH,EACD,SAAS,EAAE,cAAc,GAAG,SAAS,GAAG,EAAE,EAAA,QAAA,EAAA,CAEzC,CAAC,cAAc,IAAID,IAAC,SAAS,EAAA,EAAA,CAAG,EACjCA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACG,cAAc,IACbC,2CACaD,GAAC,CAAA,SAAS,kCAA4B,CAChD,EAAA,CAAA,KAEHC,IAAG,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,OAAO,CAAC,SAAS,EAAA,YAAA,CAAA,EAAA,CAAc,CACnC,EACI,CAAA,CAAA,EAAA,CACI,EACH,CAAA,EACZ;AACJ,EAAE;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;CAInC,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;CAGvB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmCvB,MAAM,CAAA;;CAEtB,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;CAGpC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/PoweredByFooter/index.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport CrepeIcon from \"../../../assets/crepe\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport styled from \"../../../styles/styled\";\nimport { daimoPayVersion } from \"../../../utils/exports\";\n\nconst PoweredByFooter = ({\n  supportUrl,\n  showNeedHelpImmediately,\n}: { supportUrl?: string; showNeedHelpImmediately?: boolean } = {}) => {\n  const [supportVisible, setSupportVisible] = useState(showNeedHelpImmediately);\n  const locales = useLocales();\n  useEffect(() => {\n    if (supportUrl == null) return;\n    // Show the support link after delay\n    const timer = setTimeout(() => {\n      setSupportVisible(true);\n    }, 2500);\n    return () => clearTimeout(timer);\n  }, [supportUrl]);\n\n  return (\n    <Container>\n      <TextButton\n        onClick={() => {\n          window.open(\n            supportVisible\n              ? supportUrl\n              : `https://pay.daimo.com?ref=sdk-v${daimoPayVersion}`,\n            \"_blank\",\n          );\n        }}\n        className={supportVisible ? \"support\" : \"\"}\n      >\n        {!supportVisible && <CrepeIcon />}\n        <span>\n          {supportVisible ? (\n            <>\n              Need help? <Underline>Contact support</Underline>\n            </>\n          ) : (\n            <>{locales.poweredBy} Daimo Pay</>\n          )}\n        </span>\n      </TextButton>\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 fadeIn = keyframes`\n0%{ opacity:0; }\n100%{ opacity:1; }\n`;\n\nconst TextButton = styled(motion.button)`\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  height: 42px;\n  padding: 0 16px;\n  border-radius: 6px;\n  background: none;\n  color: var(--ck-body-color-muted);\n  text-decoration-color: var(--ck-body-color-muted);\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 500;\n\n  transition:\n    color 200ms ease,\n    transform 100ms ease;\n  &:hover {\n    color: var(--ck-body-color-muted-hover);\n    text-decoration-color: var(--ck-body-color-muted-hover);\n  }\n  &:active {\n    transform: scale(0.96);\n  }\n\n  span {\n    opacity: 1;\n    transition: opacity 300ms ease;\n  }\n\n  &.support span {\n    animation: ${fadeIn} 300ms ease both;\n  }\n`;\n\nconst Underline = styled(motion.span)`\n  text-underline-offset: 2px;\n  text-decoration: underline;\n`;\n\nexport default PoweredByFooter;\n"],"names":[],"mappings":";;;;;;;;;AAQA,MAAM,kBAAkB,CAAC;AAAA,EACvB,UAAA;AAAA,EACA,uBAAA;AACF,CAAA,GAAgE,EAAO,KAAA;AACrE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,uBAAuB,CAAA,CAAA;AAC5E,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,IAAM,EAAA,OAAA;AAExB,IAAM,MAAA,KAAA,GAAQ,WAAW,MAAM;AAC7B,MAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AAAA,OACrB,IAAI,CAAA,CAAA;AACP,IAAO,OAAA,MAAM,aAAa,KAAK,CAAA,CAAA;AAAA,GACjC,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,2BACG,SACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAS,MAAM;AACb,QAAO,MAAA,CAAA,IAAA;AAAA,UACL,cAAA,GACI,UACA,GAAA,CAAA,+BAAA,EAAkC,eAAe,CAAA,CAAA;AAAA,UACrD,QAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,MACA,SAAA,EAAW,iBAAiB,SAAY,GAAA,EAAA;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAC,CAAA,cAAA,wBAAmB,SAAU,EAAA,EAAA,CAAA;AAAA,wBAC/B,GAAA,CAAC,MACE,EAAA,EAAA,QAAA,EAAA,cAAA,mBACG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,aAAA;AAAA,0BACW,GAAA,CAAC,aAAU,QAAe,EAAA,iBAAA,EAAA,CAAA;AAAA,SAAA,EACvC,oBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAQ,OAAA,CAAA,SAAA;AAAA,UAAU,YAAA;AAAA,SAAA,EAAU,CAEnC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMnC,MAAM,MAAS,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAKf,MAAM,UAAA,GAAa,MAAO,CAAA,MAAA,CAAO,MAAM,CAAA,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,eAAA,EAmCtB,MAAM,CAAA;AAAA;AAAA,CAAA,CAAA;AAIvB,MAAM,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/build/src/components/Common/ScrollArea/index.js

@@ -6,59 +6,114 @@ import { isMobile } from '../../../utils/index.js';
 import defaultTheme from '../../../constants/defaultTheme.js';
 import { ScrollContainer, ScrollAreaContainer, MoreIndicator } from './styles.js';
 
-const ArrowDown = () => (jsx("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const ScrollArea = ({ children, height, backgroundColor, mobileDirection, hideBottomLine = false, totalItems, }) => {
-    const locales = useLocales();
-    const { log } = usePayContext();
-    const ref = useRef(null);
-    const moreRef = useRef(null);
-    const isMobileFormat = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
-    useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        // if ref is not scrollable, hide the more indicator
-        if (el.scrollHeight > el.clientHeight) {
-            if (moreRef.current) {
-                moreRef.current.classList.remove("hide");
-            }
+const ArrowDown = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "11",
+    height: "12",
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+const ScrollArea = ({
+  children,
+  height,
+  backgroundColor,
+  mobileDirection,
+  hideBottomLine = false,
+  totalItems
+}) => {
+  const locales = useLocales();
+  const { log } = usePayContext();
+  const ref = useRef(null);
+  const moreRef = useRef(null);
+  const isMobileFormat = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (el.scrollHeight > el.clientHeight) {
+      if (moreRef.current) {
+        moreRef.current.classList.remove("hide");
+      }
+    }
+    log(`[SCROLL AREA]: ${el.scrollHeight}, ${el.clientHeight}`);
+    const handleScroll = (e) => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = e.target;
+      if (moreRef.current) {
+        if (scrollTop > 0) {
+          moreRef.current.classList.add("hide");
         }
-        log(`[SCROLL AREA]: ${el.scrollHeight}, ${el.clientHeight}`);
-        const handleScroll = (e) => {
-            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth, } = e.target;
-            if (moreRef.current) {
-                if (scrollTop > 0) {
-                    moreRef.current.classList.add("hide");
-                }
-            }
-            if (scrollTop === 0 && scrollLeft === 0) {
-                el.classList.add("scroll-start");
-            }
-            else {
-                el.classList.remove("scroll-start");
-            }
-            if (scrollHeight - scrollTop === clientHeight &&
-                scrollWidth - scrollLeft === clientWidth) {
-                el.classList.add("scroll-end");
-            }
-            else {
-                el.classList.remove("scroll-end");
-            }
-        };
-        el.addEventListener("scroll", handleScroll);
-        handleScroll({ target: el });
-        return () => {
-            el.removeEventListener("scroll", handleScroll);
-        };
-    }, [ref.current]); // eslint-disable-line react-hooks/exhaustive-deps
-    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobileFormat, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, "$hideBottomLine": hideBottomLine, "$totalItems": totalItems, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
-                    if (ref.current) {
-                        ref.current.scrollTo({
-                            top: ref.current.scrollHeight,
-                            behavior: "smooth",
-                        });
-                    }
-                }, children: jsxs("span", { children: [jsx(ArrowDown, {}), " ", locales.moreAvailable] }) })] }));
+      }
+      if (scrollTop === 0 && scrollLeft === 0) {
+        el.classList.add("scroll-start");
+      } else {
+        el.classList.remove("scroll-start");
+      }
+      if (scrollHeight - scrollTop === clientHeight && scrollWidth - scrollLeft === clientWidth) {
+        el.classList.add("scroll-end");
+      } else {
+        el.classList.remove("scroll-end");
+      }
+    };
+    el.addEventListener("scroll", handleScroll);
+    handleScroll({ target: el });
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref.current]);
+  return /* @__PURE__ */ jsxs(ScrollContainer, { children: [
+    /* @__PURE__ */ jsx(
+      ScrollAreaContainer,
+      {
+        ref,
+        $mobile: isMobileFormat,
+        $height: height,
+        $backgroundColor: backgroundColor,
+        $mobileDirection: mobileDirection,
+        $hideBottomLine: hideBottomLine,
+        $totalItems: totalItems,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MoreIndicator,
+      {
+        ref: moreRef,
+        className: "hide",
+        onClick: () => {
+          if (ref.current) {
+            ref.current.scrollTo({
+              top: ref.current.scrollHeight,
+              behavior: "smooth"
+            });
+          }
+        },
+        children: /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx(ArrowDown, {}),
+          " ",
+          locales.moreAvailable
+        ] })
+      }
+    )
+  ] });
 };
 
 export { ScrollArea };

package/build/src/components/Common/ScrollArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ScrollArea/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ScrollArea/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport { isMobile } from \"../../../utils\";\nimport defaultTheme from \"./../../../constants/defaultTheme\";\nimport { MoreIndicator, ScrollAreaContainer, ScrollContainer } from \"./styles\";\n\nconst ArrowDown = () => (\n  <svg\n    width=\"11\"\n    height=\"12\"\n    viewBox=\"0 0 11 12\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\nexport const ScrollArea = ({\n  children,\n  height,\n  backgroundColor,\n  mobileDirection,\n  hideBottomLine = false,\n  totalItems,\n}: {\n  children: React.ReactNode;\n  height?: number;\n  backgroundColor?: string;\n  mobileDirection?: \"horizontal\" | \"vertical\";\n  hideBottomLine?: boolean;\n  totalItems?: number;\n}) => {\n  const locales = useLocales();\n  const { log } = usePayContext();\n  const ref = useRef<HTMLDivElement>(null);\n  const moreRef = useRef<HTMLDivElement>(null);\n\n  const isMobileFormat =\n    isMobile() || window?.innerWidth < defaultTheme.mobileWidth;\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    // if ref is not scrollable, hide the more indicator\n    if (el.scrollHeight > el.clientHeight) {\n      if (moreRef.current) {\n        moreRef.current.classList.remove(\"hide\");\n      }\n    }\n    log(`[SCROLL AREA]: ${el.scrollHeight}, ${el.clientHeight}`);\n\n    const handleScroll = (e: any) => {\n      const {\n        scrollTop,\n        scrollHeight,\n        clientHeight,\n        scrollLeft,\n        scrollWidth,\n        clientWidth,\n      } = e.target;\n\n      if (moreRef.current) {\n        if (scrollTop > 0) {\n          moreRef.current.classList.add(\"hide\");\n        }\n      }\n\n      if (scrollTop === 0 && scrollLeft === 0) {\n        el.classList.add(\"scroll-start\");\n      } else {\n        el.classList.remove(\"scroll-start\");\n      }\n\n      if (\n        scrollHeight - scrollTop === clientHeight &&\n        scrollWidth - scrollLeft === clientWidth\n      ) {\n        el.classList.add(\"scroll-end\");\n      } else {\n        el.classList.remove(\"scroll-end\");\n      }\n    };\n\n    el.addEventListener(\"scroll\", handleScroll);\n    handleScroll({ target: el });\n\n    return () => {\n      el.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, [ref.current]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <ScrollContainer>\n      <ScrollAreaContainer\n        ref={ref}\n        $mobile={isMobileFormat}\n        $height={height}\n        $backgroundColor={backgroundColor}\n        $mobileDirection={mobileDirection}\n        $hideBottomLine={hideBottomLine}\n        $totalItems={totalItems}\n      >\n        {children}\n      </ScrollAreaContainer>\n      <MoreIndicator\n        ref={moreRef}\n        className=\"hide\"\n        onClick={() => {\n          if (ref.current) {\n            ref.current.scrollTo({\n              top: ref.current.scrollHeight,\n              behavior: \"smooth\",\n            });\n          }\n        }}\n      >\n        <span>\n          <ArrowDown /> {locales.moreAvailable}\n        </span>\n      </MoreIndicator>\n    </ScrollContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/src/components/Common/ScrollArea/styles.js

@@ -1,14 +1,14 @@
 import { keyframes, css } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 
-const ScrollContainer = styled.div `
+const ScrollContainer = styled.div`
   position: relative;
 `;
-const fadeIn = keyframes `
+const fadeIn = keyframes`
 0%{ opacity:0; }
 100%{ opacity:1; }
 `;
-const MoreIndicator = styled.div `
+const MoreIndicator = styled.div`
   z-index: 9;
   position: absolute;
   left: 0;
@@ -54,15 +54,14 @@ const MoreIndicator = styled.div `
     pointer-events: none;
   }
 `;
-const ScrollAreaContainer = styled.div `
+const ScrollAreaContainer = styled.div`
   --bg: ${({ $backgroundColor }) => $backgroundColor || "var(--ck-body-background)"};
   --fade-height-top: 1px;
   --fade-height-bottom: ${(props) => props.$hideBottomLine && props.$totalItems > 2 ? "32px" : "1px"};
   position: relative;
   z-index: 1;
 
-  ${({ $mobile, $height, $mobileDirection, $hideBottomLine }) => $mobile && $mobileDirection === "horizontal"
-    ? css `
+  ${({ $mobile, $height, $mobileDirection, $hideBottomLine }) => $mobile && $mobileDirection === "horizontal" ? css`
           overflow-x: scroll;
           margin: 0 -24px;
           padding: 0 24px;
@@ -102,8 +101,7 @@ const ScrollAreaContainer = styled.div `
               opacity: 0;
             }
           }
-        `
-    : css `
+        ` : css`
           max-height: ${$height ? `${$height}px` : "310px"};
           overflow-y: scroll;
           padding: 0 10px;
@@ -131,9 +129,7 @@ const ScrollAreaContainer = styled.div `
           &:after {
             bottom: 0;
             height: var(--fade-height-bottom);
-            background: ${$hideBottomLine
-        ? "linear-gradient(to bottom, transparent, var(--bg))"
-        : "var(--ck-body-divider-secondary, var(--ck-body-divider))"};
+            background: ${$hideBottomLine ? "linear-gradient(to bottom, transparent, var(--bg))" : "var(--ck-body-divider-secondary, var(--ck-body-divider))"};
             box-shadow: none;
           }
 

package/build/src/components/Common/ScrollArea/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ScrollArea/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;EAEvC;AACF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;CAGvB,CAAC;AAEW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBtB,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;EAoBrB;AAEW,MAAA,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAM3C,CAAA;UACQ,CAAC,EAAE,gBAAgB,EAAE,KAC3B,gBAAgB,IAAI,2BAA2B,CAAA;;0BAEzB,CAAC,KAAK,KAC5B,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,WAAW,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,CAAA;;;;AAI/D,EAAA,EAAA,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,KACxD,OAAO,IAAI,gBAAgB,KAAK,YAAY;MACxC,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCF,QAAA,CAAA;MACD,GAAG,CAAA,CAAA;wBACa,OAAO,GAAG,CAAA,EAAG,OAAO,CAAI,EAAA,CAAA,GAAG,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA2BhC,eAAe;AAC3B,UAAE,oDAAoD;AACtD,UAAE,0DAA0D,CAAA;;;;;;;;;;;;;;;AAejE,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ScrollArea/styles.ts"],"sourcesContent":["import { css, keyframes } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\n\nexport const ScrollContainer = styled.div`\n  position: relative;\n`;\nconst fadeIn = keyframes`\n0%{ opacity:0; }\n100%{ opacity:1; }\n`;\n\nexport const MoreIndicator = styled.div`\n  z-index: 9;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0.75rem;\n  display: flex;\n  justify-content: center;\n\n  transition: opacity 300ms ease;\n\n  span {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n    padding: 0.3075rem 0.9375rem 0.375rem;\n    border-radius: 6rem;\n    background: var(--ck-tooltip-background);\n    color: var(--ck-tooltip-color);\n    font-weight: 500;\n    font-size: 0.8125rem;\n    letter-spacing: -0.01rem;\n    box-shadow: var(--ck-tooltip-shadow);\n    animation: ${fadeIn} 300ms ease 1000ms both;\n\n    transition: transform 100ms ease;\n\n    &:hover {\n      transform: scale(1.02);\n    }\n    &:active {\n      transform: scale(0.98);\n    }\n    svg {\n      display: block;\n      transform: translateX(-0.1875rem);\n    }\n  }\n\n  &.hide {\n    opacity: 0;\n    pointer-events: none;\n  }\n`;\n\nexport const ScrollAreaContainer = styled.div<{\n  $mobile?: boolean;\n  $height?: number;\n  $backgroundColor?: string;\n  $hideBottomLine?: boolean;\n  $totalItems: number;\n}>`\n  --bg: ${({ $backgroundColor }) =>\n    $backgroundColor || \"var(--ck-body-background)\"};\n  --fade-height-top: 1px;\n  --fade-height-bottom: ${(props) =>\n    props.$hideBottomLine && props.$totalItems > 2 ? \"32px\" : \"1px\"};\n  position: relative;\n  z-index: 1;\n\n  ${({ $mobile, $height, $mobileDirection, $hideBottomLine }) =>\n    $mobile && $mobileDirection === \"horizontal\"\n      ? css`\n          overflow-x: scroll;\n          margin: 0 -24px;\n          padding: 0 24px;\n\n          &:before,\n          &:after {\n            pointer-events: none;\n            z-index: 10;\n            content: \"\";\n            display: block;\n            position: sticky;\n            top: 0;\n            bottom: 0;\n            width: var(--fade-height-bottom);\n            background: var(\n              --ck-body-divider-secondary,\n              var(--ck-body-divider)\n            );\n            box-shadow: var(--ck-body-divider-box-shadow);\n            transition: opacity 300ms ease;\n          }\n          &:before {\n            left: 0;\n          }\n          &:after {\n            right: 0;\n          }\n\n          &.scroll-start {\n            &:before {\n              opacity: 0;\n            }\n          }\n\n          &.scroll-end {\n            &:after {\n              opacity: 0;\n            }\n          }\n        `\n      : css`\n          max-height: ${$height ? `${$height}px` : \"310px\"};\n          overflow-y: scroll;\n          padding: 0 10px;\n          margin: calc(var(--fade-height-top) * -1) -16px 0 -10px;\n\n          &:before,\n          &:after {\n            pointer-events: none;\n            z-index: 10;\n            content: \"\";\n            display: block;\n            position: sticky;\n            left: 0;\n            right: 0;\n          }\n          &:before {\n            top: 0;\n            height: var(--fade-height-top);\n            background: var(\n              --ck-body-divider-secondary,\n              var(--ck-body-divider)\n            );\n            box-shadow: var(--ck-body-divider-box-shadow);\n          }\n          &:after {\n            bottom: 0;\n            height: var(--fade-height-bottom);\n            background: ${$hideBottomLine\n              ? \"linear-gradient(to bottom, transparent, var(--bg))\"\n              : \"var(--ck-body-divider-secondary, var(--ck-body-divider))\"};\n            box-shadow: none;\n          }\n\n          &.scroll-start {\n            &:before {\n              opacity: 0;\n            }\n          }\n\n          &.scroll-end {\n            &:after {\n              opacity: 0;\n            }\n          }\n        `}\n\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0);\n    border-radius: 100px;\n  }\n  &:hover::-webkit-scrollbar-thumb {\n    background: var(--ck-body-color-muted);\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: var(--ck-body-color-muted-hover);\n  }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA,EAAA;AAGtC,MAAM,MAAS,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAKR,MAAM,gBAAgB,MAAO,CAAA,GAAA,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,eAAA,EAyBnB,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAsBhB,MAAM,sBAAsB,MAAO,CAAA,GAAA,CAAA;AAAA,QAAA,EAOhC,CAAC,EAAE,gBAAiB,EAAA,KAC1B,oBAAoB,2BAA2B,CAAA;AAAA;AAAA,wBAEzB,EAAA,CAAC,UACvB,KAAM,CAAA,eAAA,IAAmB,MAAM,WAAc,GAAA,CAAA,GAAI,SAAS,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,EAI/D,EAAA,CAAC,EAAE,OAAS,EAAA,OAAA,EAAS,kBAAkB,eAAgB,EAAA,KACvD,OAAW,IAAA,gBAAA,KAAqB,YAC5B,GAAA,GAAA,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,QAyCA,CAAA,GAAA,GAAA,CAAA;AAAA,sBAAA,EACgB,OAAU,GAAA,CAAA,EAAG,OAAO,CAAA,EAAA,CAAA,GAAO,OAAO,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,wBA2BhC,EAAA,eAAA,GACV,uDACA,0DAA0D,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAejE,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/build/src/components/Common/SelectAnotherMethodButton/index.js

@@ -1,71 +1,83 @@
 import { jsx } from 'react/jsx-runtime';
 import { ExternalPaymentOptions } from '@daimo/pay-common';
 import { useAccount } from 'wagmi';
-import { MetaMask, Rainbow, Rabby, Phantom } from '../../../assets/logos.js';
+import { Phantom, MetaMask, Rainbow, Rabby } from '../../../assets/logos.js';
 import { ROUTES } from '../../../constants/routes.js';
 import useLocales from '../../../hooks/useLocales.js';
 import { usePayContext } from '../../../hooks/usePayContext.js';
 import styled from '../../../styles/styled/index.js';
 import { OptionsList } from '../OptionsList/index.js';
 
-const OptionsContainer = styled.div `
+const OptionsContainer = styled.div`
   width: 100%;
   margin-top: 1rem;
 `;
 function SelectAnotherMethodButton() {
-    const locales = useLocales();
-    const { paymentState, setRoute } = usePayContext();
-    const { externalPaymentOptions } = paymentState;
-    const { connector } = useAccount();
-    const allPaymentOptions = Array.from(externalPaymentOptions.options.values()).flat();
-    const createIconDiv = (content, key) => (jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: content }, key));
-    const getWalletIcons = (connector) => {
-        const connectorId = connector?.id.toLowerCase();
-        const walletTypes = [
-            { component: jsx(MetaMask, {}), id: "metamask" },
-            { component: jsx(Rainbow, {}), id: "rainbow" },
-            { component: jsx(Rabby, {}), id: "rabby" },
-        ];
-        const icons = walletTypes
-            .filter(({ id }) => !connectorId?.includes(id))
-            .map(({ component }) => component);
-        if (icons.length < 3)
-            icons.push(jsx(Phantom, {}));
-        return icons;
-    };
-    const getPaymentMethodIcons = () => {
-        const icons = [];
-        // Add TRON USDT as first priority
-        icons.push(createIconDiv(jsx("img", { src: "https://pay.daimo.com/chain-logos/tronusdt.svg", alt: "TRON USDT" }), "tron-usdt"));
-        // Add external payment options
-        const externalIcons = allPaymentOptions
-            .filter((option) => option.id !== ExternalPaymentOptions.Daimo)
-            .slice(0, 1)
-            .map((option) => createIconDiv(typeof option.logoURI === "string" ? (jsx("img", { src: option.logoURI, alt: option.id })) : (option.logoURI), option.id));
-        icons.push(...externalIcons);
-        // Fill remaining slots with wallet icons
-        if (icons.length < 3) {
-            const walletIcons = getWalletIcons(connector);
-            const remainingSlots = 3 - icons.length;
-            icons.push(...walletIcons.slice(0, remainingSlots));
-        }
-        return icons.slice(0, 3);
-    };
-    const selectMethodOption = {
-        id: "select-method",
-        title: locales.payWithAnotherMethod,
-        icons: getPaymentMethodIcons(),
-        onClick: () => setRoute(ROUTES.SELECT_METHOD),
-    };
-    const selectWalletOption = {
-        id: "select-wallet",
-        title: locales.payWithAnotherWallet,
-        icons: getWalletIcons(connector),
-        onClick: () => setRoute(ROUTES.SELECT_METHOD),
-    };
-    return (jsx(OptionsContainer, { children: jsx(OptionsList, { options: allPaymentOptions.length > 0
-                ? [selectMethodOption]
-                : [selectWalletOption] }) }));
+  const locales = useLocales();
+  const { paymentState, setRoute } = usePayContext();
+  const { externalPaymentOptions } = paymentState;
+  const { connector } = useAccount();
+  const allPaymentOptions = Array.from(
+    externalPaymentOptions.options.values()
+  ).flat();
+  const createIconDiv = (content, key) => /* @__PURE__ */ jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: content }, key);
+  const getWalletIcons = (connector2) => {
+    const connectorId = connector2?.id.toLowerCase();
+    const walletTypes = [
+      { component: /* @__PURE__ */ jsx(MetaMask, {}), id: "metamask" },
+      { component: /* @__PURE__ */ jsx(Rainbow, {}), id: "rainbow" },
+      { component: /* @__PURE__ */ jsx(Rabby, {}), id: "rabby" }
+    ];
+    const icons = walletTypes.filter(({ id }) => !connectorId?.includes(id)).map(({ component }) => component);
+    if (icons.length < 3) icons.push(/* @__PURE__ */ jsx(Phantom, {}));
+    return icons;
+  };
+  const getPaymentMethodIcons = () => {
+    const icons = [];
+    icons.push(
+      createIconDiv(
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "https://pay.daimo.com/chain-logos/tronusdt.svg",
+            alt: "TRON USDT"
+          }
+        ),
+        "tron-usdt"
+      )
+    );
+    const externalIcons = allPaymentOptions.filter((option) => option.id !== ExternalPaymentOptions.Daimo).slice(0, 1).map(
+      (option) => createIconDiv(
+        typeof option.logoURI === "string" ? /* @__PURE__ */ jsx("img", { src: option.logoURI, alt: option.id }) : option.logoURI,
+        option.id
+      )
+    );
+    icons.push(...externalIcons);
+    if (icons.length < 3) {
+      const walletIcons = getWalletIcons(connector);
+      const remainingSlots = 3 - icons.length;
+      icons.push(...walletIcons.slice(0, remainingSlots));
+    }
+    return icons.slice(0, 3);
+  };
+  const selectMethodOption = {
+    id: "select-method",
+    title: locales.payWithAnotherMethod,
+    icons: getPaymentMethodIcons(),
+    onClick: () => setRoute(ROUTES.SELECT_METHOD)
+  };
+  const selectWalletOption = {
+    id: "select-wallet",
+    title: locales.payWithAnotherWallet,
+    icons: getWalletIcons(connector),
+    onClick: () => setRoute(ROUTES.SELECT_METHOD)
+  };
+  return /* @__PURE__ */ jsx(OptionsContainer, { children: /* @__PURE__ */ jsx(
+    OptionsList,
+    {
+      options: allPaymentOptions.length > 0 ? [selectMethodOption] : [selectWalletOption]
+    }
+  ) });
 }
 
 export { SelectAnotherMethodButton as default };

package/build/src/components/Common/SelectAnotherMethodButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/SelectAnotherMethodButton/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/SelectAnotherMethodButton/index.tsx"],"sourcesContent":["import { ExternalPaymentOptions } from \"@daimo/pay-common\";\nimport { Connector, useAccount } from \"wagmi\";\nimport { MetaMask, Phantom, Rabby, Rainbow } from \"../../../assets/logos\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { OptionsList } from \"../OptionsList\";\n\nconst OptionsContainer = styled.div`\n  width: 100%;\n  margin-top: 1rem;\n`;\n\nexport default function SelectAnotherMethodButton() {\n  const locales = useLocales();\n  const { paymentState, setRoute } = usePayContext();\n  const { externalPaymentOptions } = paymentState;\n  const { connector } = useAccount();\n  const allPaymentOptions = Array.from(\n    externalPaymentOptions.options.values(),\n  ).flat();\n\n  const createIconDiv = (content: React.ReactNode, key: string) => (\n    <div key={key} style={{ borderRadius: \"22.5%\", overflow: \"hidden\" }}>\n      {content}\n    </div>\n  );\n\n  const getWalletIcons = (connector: Connector | undefined) => {\n    const connectorId = connector?.id.toLowerCase();\n    const walletTypes = [\n      { component: <MetaMask />, id: \"metamask\" },\n      { component: <Rainbow />, id: \"rainbow\" },\n      { component: <Rabby />, id: \"rabby\" },\n    ];\n\n    const icons = walletTypes\n      .filter(({ id }) => !connectorId?.includes(id))\n      .map(({ component }) => component);\n\n    if (icons.length < 3) icons.push(<Phantom />);\n    return icons;\n  };\n\n  const getPaymentMethodIcons = () => {\n    const icons: JSX.Element[] = [];\n\n    // Add TRON USDT as first priority\n    icons.push(\n      createIconDiv(\n        <img\n          src=\"https://pay.daimo.com/chain-logos/tronusdt.svg\"\n          alt=\"TRON USDT\"\n        />,\n        \"tron-usdt\",\n      ),\n    );\n\n    // Add external payment options\n    const externalIcons = allPaymentOptions\n      .filter((option) => option.id !== ExternalPaymentOptions.Daimo)\n      .slice(0, 1)\n      .map((option) =>\n        createIconDiv(\n          typeof option.logoURI === \"string\" ? (\n            <img src={option.logoURI} alt={option.id} />\n          ) : (\n            option.logoURI\n          ),\n          option.id,\n        ),\n      );\n\n    icons.push(...externalIcons);\n\n    // Fill remaining slots with wallet icons\n    if (icons.length < 3) {\n      const walletIcons = getWalletIcons(connector);\n      const remainingSlots = 3 - icons.length;\n      icons.push(...walletIcons.slice(0, remainingSlots));\n    }\n\n    return icons.slice(0, 3);\n  };\n\n  const selectMethodOption = {\n    id: \"select-method\",\n    title: locales.payWithAnotherMethod,\n    icons: getPaymentMethodIcons(),\n    onClick: () => setRoute(ROUTES.SELECT_METHOD),\n  };\n\n  const selectWalletOption = {\n    id: \"select-wallet\",\n    title: locales.payWithAnotherWallet,\n    icons: getWalletIcons(connector),\n    onClick: () => setRoute(ROUTES.SELECT_METHOD),\n  };\n\n  return (\n    <OptionsContainer>\n      <OptionsList\n        options={\n          allPaymentOptions.length > 0\n            ? [selectMethodOption]\n            : [selectWalletOption]\n        }\n      />\n    </OptionsContainer>\n  );\n}\n"],"names":["connector"],"mappings":"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"}