@daimo/pay 1.17.3 → 1.17.5

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

@@ -14,13 +14,30 @@ function CustomQRCode({
   contentPadding = 13
 }) {
   const windowSize = useWindowSize();
+  const isLong = (value?.length ?? 0) > 200;
   const Logo = windowSize.width > 920 && tooltipMessage ? /* @__PURE__ */ jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image }) : image;
+  const qrEmbeddedImage = isLong ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "75%",
+        height: "75%",
+        margin: "12.5%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: image
+    }
+  ) : image;
   return /* @__PURE__ */ jsx(QRCodeContainer, { children: /* @__PURE__ */ jsxs(QRCodeContent, { style: { inset: contentPadding }, children: [
     image && /* @__PURE__ */ jsx(LogoContainer, { children: /* @__PURE__ */ jsx(
       LogoIcon,
       {
         style: {
-          background: imagePosition === "center" ? imageBackground : void 0
+          background: imagePosition === "center" ? imageBackground : void 0,
+          width: imagePosition === "center" && isLong ? "21%" : void 0,
+          height: imagePosition === "center" && isLong ? "21%" : void 0
         },
         children: Logo
       }
@@ -38,10 +55,10 @@ function CustomQRCode({
           QRCode,
           {
             uri: value,
-            size: 576,
-            ecl: value?.length > 200 ? "L" : "H",
+            size: isLong ? 860 : 576,
+            ecl: isLong ? "L" : "H",
             clearArea: !!(imagePosition === "center" && image),
-            image: imagePosition === "bottom right" ? image : void 0,
+            image: imagePosition === "bottom right" ? qrEmbeddedImage : void 0,
             imageBackground
           }
         )

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/CustomQRCode/index.tsx"],"sourcesContent":["import {\n  LogoContainer,\n  LogoIcon,\n  QRCodeContainer,\n  QRCodeContent,\n  QRPlaceholder,\n} from \"./styles\";\nimport { CustomQRCodeProps } from \"./types\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport Tooltip from \"../Tooltip\";\n\nimport useWindowSize from \"../../../hooks/useWindowSize\";\nimport { QRCode } from \"./QRCode\";\n\nfunction CustomQRCode({\n  value,\n  image,\n  imageBackground,\n  imagePosition = \"center\",\n  tooltipMessage,\n  contentPadding = 13,\n}: CustomQRCodeProps) {\n  const windowSize = useWindowSize();\n\n  const Logo =\n    windowSize.width > 920 && tooltipMessage ? (\n      <Tooltip xOffset={139} yOffset={5} delay={0.1} message={tooltipMessage}>\n        {image}\n      </Tooltip>\n    ) : (\n      image\n    );\n\n  return (\n    <QRCodeContainer>\n      <QRCodeContent style={{ inset: contentPadding }}>\n        {image && (\n          <LogoContainer>\n            <LogoIcon\n              style={{\n                background:\n                  imagePosition === \"center\" ? imageBackground : undefined,\n              }}\n            >\n              {Logo}\n            </LogoIcon>\n          </LogoContainer>\n        )}\n\n        <AnimatePresence initial={false}>\n          {value ? (\n            <motion.div\n              key={value}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0, position: \"absolute\", inset: [0, 0] }}\n              transition={{\n                duration: 0.2,\n              }}\n            >\n              <QRCode\n                uri={value}\n                size={576}\n                ecl={value?.length > 200 ? \"L\" : \"H\"}\n                clearArea={!!(imagePosition === \"center\" && image)}\n                image={imagePosition === \"bottom right\" ? image : undefined}\n                imageBackground={imageBackground}\n              />\n            </motion.div>\n          ) : (\n            <QRPlaceholder\n              initial={{ opacity: 0.1 }}\n              animate={{ opacity: 0.1 }}\n              exit={{ opacity: 0, position: \"absolute\", inset: [0, 0] }}\n              transition={{\n                duration: 0.2,\n              }}\n            >\n              <span />\n              <span />\n              <span />\n              <div />\n            </QRPlaceholder>\n          )}\n        </AnimatePresence>\n      </QRCodeContent>\n    </QRCodeContainer>\n  );\n}\nCustomQRCode.displayName = \"CustomQRCode\";\n\nexport default CustomQRCode;\n"],"names":[],"mappings":";;;;;;;AAeA,SAAS,YAAa,CAAA;AAAA,EACpB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAgB,GAAA,QAAA;AAAA,EAChB,cAAA;AAAA,EACA,cAAiB,GAAA,EAAA;AACnB,CAAsB,EAAA;AACpB,EAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,EAAA,MAAM,OACJ,UAAW,CAAA,KAAA,GAAQ,GAAO,IAAA,cAAA,uBACvB,OAAQ,EAAA,EAAA,OAAA,EAAS,GAAK,EAAA,OAAA,EAAS,GAAG,KAAO,EAAA,GAAA,EAAK,OAAS,EAAA,cAAA,EACrD,iBACH,CAEA,GAAA,KAAA,CAAA;AAGJ,EACE,uBAAA,GAAA,CAAC,mBACC,QAAC,kBAAA,IAAA,CAAA,aAAA,EAAA,EAAc,OAAO,EAAE,KAAA,EAAO,gBAC5B,EAAA,QAAA,EAAA;AAAA,IAAA,KAAA,wBACE,aACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,UAAA,EACE,aAAkB,KAAA,QAAA,GAAW,eAAkB,GAAA,KAAA,CAAA;AAAA,SACnD;AAAA,QAEC,QAAA,EAAA,IAAA;AAAA,OAAA;AAAA,KAEL,EAAA,CAAA;AAAA,oBAGD,GAAA,CAAA,eAAA,EAAA,EAAgB,OAAS,EAAA,KAAA,EACvB,QACC,EAAA,KAAA,mBAAA,GAAA;AAAA,MAAC,MAAO,CAAA,GAAA;AAAA,MAAP;AAAA,QAEC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,QACtB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,QACtB,IAAA,EAAM,EAAE,OAAA,EAAS,CAAG,EAAA,QAAA,EAAU,YAAY,KAAO,EAAA,CAAC,CAAG,EAAA,CAAC,CAAE,EAAA;AAAA,QACxD,UAAY,EAAA;AAAA,UACV,QAAU,EAAA,GAAA;AAAA,SACZ;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,GAAK,EAAA,KAAA;AAAA,YACL,IAAM,EAAA,GAAA;AAAA,YACN,GAAK,EAAA,KAAA,EAAO,MAAS,GAAA,GAAA,GAAM,GAAM,GAAA,GAAA;AAAA,YACjC,SAAW,EAAA,CAAC,EAAE,aAAA,KAAkB,QAAY,IAAA,KAAA,CAAA;AAAA,YAC5C,KAAA,EAAO,aAAkB,KAAA,cAAA,GAAiB,KAAQ,GAAA,KAAA,CAAA;AAAA,YAClD,eAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,MAfK,KAAA;AAAA,KAkBP,mBAAA,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,EAAE,OAAA,EAAS,GAAI,EAAA;AAAA,QACxB,OAAA,EAAS,EAAE,OAAA,EAAS,GAAI,EAAA;AAAA,QACxB,IAAA,EAAM,EAAE,OAAA,EAAS,CAAG,EAAA,QAAA,EAAU,YAAY,KAAO,EAAA,CAAC,CAAG,EAAA,CAAC,CAAE,EAAA;AAAA,QACxD,UAAY,EAAA;AAAA,UACV,QAAU,EAAA,GAAA;AAAA,SACZ;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAK,EAAA,EAAA,CAAA;AAAA,8BACL,MAAK,EAAA,EAAA,CAAA;AAAA,8BACL,MAAK,EAAA,EAAA,CAAA;AAAA,8BACL,KAAI,EAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAGX,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/CustomQRCode/index.tsx"],"sourcesContent":["import {\n  LogoContainer,\n  LogoIcon,\n  QRCodeContainer,\n  QRCodeContent,\n  QRPlaceholder,\n} from \"./styles\";\nimport { CustomQRCodeProps } from \"./types\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport Tooltip from \"../Tooltip\";\n\nimport useWindowSize from \"../../../hooks/useWindowSize\";\nimport { QRCode } from \"./QRCode\";\n\nfunction CustomQRCode({\n  value,\n  image,\n  imageBackground,\n  imagePosition = \"center\",\n  tooltipMessage,\n  contentPadding = 13,\n}: CustomQRCodeProps) {\n  const windowSize = useWindowSize();\n  const isLong = (value?.length ?? 0) > 200;\n\n  const Logo =\n    windowSize.width > 920 && tooltipMessage ? (\n      <Tooltip xOffset={139} yOffset={5} delay={0.1} message={tooltipMessage}>\n        {image}\n      </Tooltip>\n    ) : (\n      image\n    );\n\n  // For bottom-right embedded image inside the QR SVG, shrink when content is long\n  const qrEmbeddedImage = isLong ? (\n    <div\n      style={{\n        width: \"75%\",\n        height: \"75%\",\n        margin: \"12.5%\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      {image}\n    </div>\n  ) : (\n    image\n  );\n\n  return (\n    <QRCodeContainer>\n      <QRCodeContent style={{ inset: contentPadding }}>\n        {image && (\n          <LogoContainer>\n            <LogoIcon\n              style={{\n                background:\n                  imagePosition === \"center\" ? imageBackground : undefined,\n                width: imagePosition === \"center\" && isLong ? \"21%\" : undefined,\n                height:\n                  imagePosition === \"center\" && isLong ? \"21%\" : undefined,\n              }}\n            >\n              {Logo}\n            </LogoIcon>\n          </LogoContainer>\n        )}\n\n        <AnimatePresence initial={false}>\n          {value ? (\n            <motion.div\n              key={value}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0, position: \"absolute\", inset: [0, 0] }}\n              transition={{\n                duration: 0.2,\n              }}\n            >\n              <QRCode\n                uri={value}\n                size={isLong ? 860 : 576}\n                ecl={isLong ? \"L\" : \"H\"}\n                clearArea={!!(imagePosition === \"center\" && image)}\n                image={\n                  imagePosition === \"bottom right\" ? qrEmbeddedImage : undefined\n                }\n                imageBackground={imageBackground}\n              />\n            </motion.div>\n          ) : (\n            <QRPlaceholder\n              initial={{ opacity: 0.1 }}\n              animate={{ opacity: 0.1 }}\n              exit={{ opacity: 0, position: \"absolute\", inset: [0, 0] }}\n              transition={{\n                duration: 0.2,\n              }}\n            >\n              <span />\n              <span />\n              <span />\n              <div />\n            </QRPlaceholder>\n          )}\n        </AnimatePresence>\n      </QRCodeContent>\n    </QRCodeContainer>\n  );\n}\nCustomQRCode.displayName = \"CustomQRCode\";\n\nexport default CustomQRCode;\n"],"names":[],"mappings":"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"}

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

@@ -41,6 +41,7 @@ const QRPlaceholder = styled(motion.div)`
 
   position: absolute;
   inset: 0;
+  border-radius: var(--ck-qr-border-radius, 10px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -87,6 +88,7 @@ const QRPlaceholder = styled(motion.div)`
     content: "";
     position: absolute;
     inset: 0;
+    border-radius: inherit;
     background: repeat;
     background-size: 1.888% 1.888%;
     background-image: radial-gradient(var(--color) 41%, transparent 41%);
@@ -96,6 +98,7 @@ const QRPlaceholder = styled(motion.div)`
     content: "";
     position: absolute;
     inset: 0;
+    border-radius: inherit;
     transform: scale(1.7) rotate(45deg);
     background-image: linear-gradient(
       90deg,

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/CustomQRCode/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nexport const QRCodeContainer = styled(motion.div)`\n  z-index: 3;\n  position: relative;\n  overflow: hidden;\n  height: 0;\n  padding-bottom: 100% !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 1px 0 2px;\n  border-radius: var(--ck-qr-border-radius, 24px);\n  background: var(--ck-qr-background, transparent);\n  box-shadow: 0 0 0 1px var(--ck-qr-border-color);\n  backface-visibility: hidden;\n  svg {\n    display: block;\n    max-width: 100%;\n    width: 100%;\n    height: auto;\n  }\n`;\nexport const QRCodeContent = styled(motion.div)`\n  position: absolute;\n  inset: 13px;\n  svg {\n    width: 100% !important;\n    height: auto !important;\n  }\n`;\nexport const PlaceholderKeyframes = keyframes`\n  0%{ background-position: 100% 0; }\n  100%{ background-position: -100% 0; }\n`;\nexport const QRPlaceholder = styled(motion.div)`\n  --color: var(--ck-qr-dot-color);\n  --bg: var(--ck-qr-background, var(--ck-body-background));\n\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  > div {\n    z-index: 4;\n    position: relative;\n    width: 28%;\n    height: 28%;\n    border-radius: 20px;\n    background: var(--bg);\n    box-shadow: 0 0 0 7px var(--bg);\n  }\n  > span {\n    z-index: 4;\n    position: absolute;\n    background: var(--color);\n    border-radius: 12px;\n    width: 13.25%;\n    height: 13.25%;\n    box-shadow: 0 0 0 4px var(--bg);\n    &:before {\n      content: \"\";\n      position: absolute;\n      inset: 9px;\n      border-radius: 3px;\n      box-shadow: 0 0 0 4px var(--bg);\n    }\n    &:nth-child(1) {\n      top: 0;\n      left: 0;\n    }\n    &:nth-child(2) {\n      top: 0;\n      right: 0;\n    }\n    &:nth-child(3) {\n      bottom: 0;\n      left: 0;\n    }\n  }\n  &:before {\n    z-index: 3;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: repeat;\n    background-size: 1.888% 1.888%;\n    background-image: radial-gradient(var(--color) 41%, transparent 41%);\n  }\n  &:after {\n    z-index: 5;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    transform: scale(1.7) rotate(45deg);\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 50%,\n      rgba(255, 255, 255, 1),\n      rgba(255, 255, 255, 0)\n    );\n    background-size: 200% 100%;\n    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;\n  }\n`;\n\nexport const LogoContainer = styled(motion.div)`\n  z-index: 6;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translateY(50%) scale(0.9999); // Shifting fix\n`;\nexport const LogoIcon = styled(motion.div)`\n  z-index: 6;\n  position: absolute;\n  left: 50%;\n  overflow: hidden;\n\n  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix\n\n  svg {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  width: 28%;\n  height: 28%;\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,eAAA,GAAkB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAqBnC,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQvC,MAAM,oBAAuB,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAIvB,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,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;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,EAqE7B,oBAAoB,CAAA;AAAA;AAAA,EAAA;AAIxB,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AASjC,MAAA,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/CustomQRCode/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nexport const QRCodeContainer = styled(motion.div)`\n  z-index: 3;\n  position: relative;\n  overflow: hidden;\n  height: 0;\n  padding-bottom: 100% !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 1px 0 2px;\n  border-radius: var(--ck-qr-border-radius, 24px);\n  background: var(--ck-qr-background, transparent);\n  box-shadow: 0 0 0 1px var(--ck-qr-border-color);\n  backface-visibility: hidden;\n  svg {\n    display: block;\n    max-width: 100%;\n    width: 100%;\n    height: auto;\n  }\n`;\nexport const QRCodeContent = styled(motion.div)`\n  position: absolute;\n  inset: 13px;\n  svg {\n    width: 100% !important;\n    height: auto !important;\n  }\n`;\nexport const PlaceholderKeyframes = keyframes`\n  0%{ background-position: 100% 0; }\n  100%{ background-position: -100% 0; }\n`;\nexport const QRPlaceholder = styled(motion.div)`\n  --color: var(--ck-qr-dot-color);\n  --bg: var(--ck-qr-background, var(--ck-body-background));\n\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ck-qr-border-radius, 10px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  > div {\n    z-index: 4;\n    position: relative;\n    width: 28%;\n    height: 28%;\n    border-radius: 20px;\n    background: var(--bg);\n    box-shadow: 0 0 0 7px var(--bg);\n  }\n  > span {\n    z-index: 4;\n    position: absolute;\n    background: var(--color);\n    border-radius: 12px;\n    width: 13.25%;\n    height: 13.25%;\n    box-shadow: 0 0 0 4px var(--bg);\n    &:before {\n      content: \"\";\n      position: absolute;\n      inset: 9px;\n      border-radius: 3px;\n      box-shadow: 0 0 0 4px var(--bg);\n    }\n    &:nth-child(1) {\n      top: 0;\n      left: 0;\n    }\n    &:nth-child(2) {\n      top: 0;\n      right: 0;\n    }\n    &:nth-child(3) {\n      bottom: 0;\n      left: 0;\n    }\n  }\n  &:before {\n    z-index: 3;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background: repeat;\n    background-size: 1.888% 1.888%;\n    background-image: radial-gradient(var(--color) 41%, transparent 41%);\n  }\n  &:after {\n    z-index: 5;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    transform: scale(1.7) rotate(45deg);\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 50%,\n      rgba(255, 255, 255, 1),\n      rgba(255, 255, 255, 0)\n    );\n    background-size: 200% 100%;\n    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;\n  }\n`;\n\nexport const LogoContainer = styled(motion.div)`\n  z-index: 6;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translateY(50%) scale(0.9999); // Shifting fix\n`;\nexport const LogoIcon = styled(motion.div)`\n  z-index: 6;\n  position: absolute;\n  left: 50%;\n  overflow: hidden;\n\n  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix\n\n  svg {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  width: 28%;\n  height: 28%;\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,eAAA,GAAkB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAqBnC,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQvC,MAAM,oBAAuB,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAIvB,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,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;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,EAwE7B,oBAAoB,CAAA;AAAA;AAAA,EAAA;AAIxB,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AASjC,MAAA,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -130,7 +130,7 @@ const Modal = ({
     selectedSolanaTokenOption,
     selectedDepositAddressOption
   } = context.paymentState;
-  const { order } = useDaimoPay();
+  const { order, paymentState } = useDaimoPay();
   const { connector } = useAccount();
   const wallet = useWallet(connector?.id ?? "");
   const walletInfo = {
@@ -253,6 +253,7 @@ const Modal = ({
       case ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN:
         return locales.selectChain;
       case ROUTES.WAITING_DEPOSIT_ADDRESS:
+        if (paymentState === "warning") return locales.leaveSession;
         if (!selectedDepositAddressOption) return void 0;
         return `${payWithString} ${selectedDepositAddressOption.id}`;
       case ROUTES.SELECT_ZKP2P:

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

@@ -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 {\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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"}
+{"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  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, paymentState } = 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 (paymentState === \"warning\") return locales.leaveSession;\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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"}

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

@@ -3,8 +3,7 @@ import { getAddressContraction } from '@daimo/pay-common';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { motion } from 'framer-motion';
 import { useAccount } from 'wagmi';
-import { Solana, Ethereum, Optimism, Arbitrum, Base, Polygon } from '../../../assets/chains.js';
-import { USDC } from '../../../assets/coins.js';
+import { Solana } from '../../../assets/chains.js';
 import defaultTheme from '../../../constants/defaultTheme.js';
 import { ROUTES } from '../../../constants/routes.js';
 import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
@@ -75,38 +74,9 @@ const OrderHeader = ({
       ] });
     }
   } else {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      titleAmountContent && /* @__PURE__ */ jsx(TitleAmount, { children: titleAmountContent }),
-      /* @__PURE__ */ jsxs(AnyChainAnyCoinContainer, { children: [
-        /* @__PURE__ */ jsx(CoinLogos, {}),
-        /* @__PURE__ */ jsx(Subtitle, { children: locales.tokensAccepted })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(Fragment, { children: titleAmountContent && /* @__PURE__ */ jsx(TitleAmount, { children: titleAmountContent }) });
   }
 };
-function CoinLogos({ $size = 24 }) {
-  const logos = [
-    /* @__PURE__ */ jsx(Ethereum, {}, "eth"),
-    /* @__PURE__ */ jsx(USDC, {}, "usdc"),
-    /* @__PURE__ */ jsx(Optimism, {}, "optimism"),
-    /* @__PURE__ */ jsx(Arbitrum, {}, "arbitrum"),
-    /* @__PURE__ */ jsx(Base, {}, "base"),
-    /* @__PURE__ */ jsx(Polygon, {}, "polygon"),
-    /* @__PURE__ */ jsx(Solana, {}, "solana")
-  ];
-  const logoBlock = (element, index) => /* @__PURE__ */ jsx(
-    LogoContainer,
-    {
-      $marginLeft: index !== 0 ? -($size / 3) : 0,
-      $zIndex: logos.length - index,
-      $size,
-      transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] },
-      children: element
-    },
-    index
-  );
-  return /* @__PURE__ */ jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) });
-}
 const TitleAmount = styled(motion.h1)`
   margin-bottom: 24px;
   padding: 0;
@@ -149,15 +119,6 @@ const MinifiedContainer = styled(motion.div)`
   width: 100%;
   margin-bottom: 24px;
 `;
-const AnyChainAnyCoinContainer = styled(motion.div)`
-  display: flex;
-  vertical-align: middle;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 8px;
-  margin-bottom: 24px;
-`;
 const LogoContainer = styled(motion.div)`
   display: block;
   overflow: hidden;
@@ -176,11 +137,6 @@ const LogoContainer = styled(motion.div)`
     height: auto;
   }
 `;
-const Logos = styled(motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
 const SubtitleContainer = styled.div`
   display: flex;
   align-items: center;

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

@@ -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 = \"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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"}
+{"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/src/components/DaimoPayModal/ConnectWithQRCode.js

@@ -1,13 +1,11 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ROUTES } from '../../constants/routes.js';
 import { usePayContext } from '../../hooks/usePayContext.js';
-import { OrDivider } from '../Common/Modal/index.js';
 import { PageContent, ModalContent } from '../Common/Modal/styles.js';
 import ScanIconWithLogos from '../../assets/ScanIconWithLogos.js';
 import { useDaimoPay } from '../../hooks/useDaimoPay.js';
 import useLocales from '../../hooks/useLocales.js';
 import Button from '../Common/Button/index.js';
-import '../Common/CopyToClipboard/index.js';
 import CustomQRCode from '../Common/CustomQRCode/index.js';
 import { writeDaimoPayOrderID } from '@daimo/pay-common';
 import Logos, { SquircleIcon } from '../../assets/logos.js';
@@ -29,7 +27,6 @@ const ConnectWithQRCode = ({
     return /* @__PURE__ */ jsx(Fragment, { children: " No wallet or external option found " });
   const downloads = wallet?.downloadUrls;
   const hasApps = downloads && Object.keys(downloads).length !== 0;
-  const showAdditionalOptions = false;
   const payId = pay.order ? writeDaimoPayOrderID(pay.order.id) : "";
   const isDesktopLinkToMobileWallets = wallet?.id === WALLET_ID_MOBILE_WALLETS;
   const mode = isDesktopLinkToMobileWallets ? "browser" : "wallet";
@@ -38,50 +35,46 @@ const ConnectWithQRCode = ({
   worldDeeplink ?? // open in World App
   `https://pay.daimo.com/pay?id=${payId}&mode=${mode}`;
   return /* @__PURE__ */ jsxs(PageContent, { children: [
-    /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [
-      /* @__PURE__ */ jsx(
-        CustomQRCode,
-        {
-          value: url,
-          image: wallet?.id === "world" ? /* @__PURE__ */ jsx(SquircleIcon, { icon: Logos.World, alt: "World" }) : externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : /* @__PURE__ */ jsx(
-            "div",
+    /* @__PURE__ */ jsx(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: /* @__PURE__ */ jsx(
+      CustomQRCode,
+      {
+        value: url,
+        image: wallet?.id === "world" ? /* @__PURE__ */ jsx(SquircleIcon, { icon: Logos.World, alt: "World" }) : externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              borderRadius: "22.5%",
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "var(--ck-body-background)",
+              transform: "scale(1.3) translateY(5%)",
+              transformOrigin: "center center"
+            },
+            children: /* @__PURE__ */ jsx(MobileWithLogos, {})
+          }
+        ),
+        tooltipMessage: isDesktopLinkToMobileWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ScanIconWithLogos, {}),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Finish the payment ",
+            /* @__PURE__ */ jsx("br", {}),
+            "on your mobile phone"
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ScanIconWithLogos,
             {
-              style: {
-                width: "100%",
-                height: "100%",
-                borderRadius: "22.5%",
-                overflow: "hidden",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: "var(--ck-body-background)",
-                transform: "scale(1.3) translateY(5%)",
-                transformOrigin: "center center"
-              },
-              children: /* @__PURE__ */ jsx(MobileWithLogos, {})
+              logo: externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : wallet?.icon
             }
           ),
-          tooltipMessage: isDesktopLinkToMobileWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ScanIconWithLogos, {}),
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Finish the payment ",
-              /* @__PURE__ */ jsx("br", {}),
-              "on your mobile phone"
-            ] })
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              ScanIconWithLogos,
-              {
-                logo: externalOption?.logoURI ? /* @__PURE__ */ jsx(SquircleIcon, { icon: externalOption.logoURI, alt: "Logo" }) : wallet?.icon
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { children: locales.scanScreen_tooltip_default })
-          ] })
-        }
-      ),
-      hasApps && /* @__PURE__ */ jsx(OrDivider, { children: locales.dontHaveTheApp })
-    ] }),
-    showAdditionalOptions ,
+          /* @__PURE__ */ jsx("span", { children: locales.scanScreen_tooltip_default })
+        ] })
+      }
+    ) }),
     hasApps && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       Button,
       {

package/build/src/components/DaimoPayModal/ConnectWithQRCode.js.map

@@ -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<{ 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 ?? externalOption?.id,\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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"}
+{"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 { 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 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 ?? externalOption?.id,\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 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      </ModalContent>\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":";;;;;;;;;;;;;;AA4BA,MAAM,oBAAuD,CAAC;AAAA,EAC5D,WAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAM,MAAA,EAAE,kBAAoB,EAAA,YAAA,EAAiB,GAAA,OAAA,CAAA;AAC7C,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,kBAAA,IAAsB,EAAE,CAAA,CAAA;AACjD,EAAA,MAAM,iBAAiB,YAAa,CAAA,sBAAA,CAAA;AACpC,EAAA,MAAM,MAAM,WAAY,EAAA,CAAA;AAExB,EAAA,MAAM,UAAU,UAAW,CAAA;AAAA,IACzB,aAAA,EAAe,MAAQ,EAAA,IAAA,IAAQ,cAAgB,EAAA,EAAA;AAAA,GAChD,CAAA,CAAA;AAED,EAAI,IAAA,CAAC,UAAU,CAAC,cAAA;AACd,IAAA,uCAAS,QAAoC,EAAA,sCAAA,EAAA,CAAA,CAAA;AAE/C,EAAA,MAAM,YAAY,MAAQ,EAAA,YAAA,CAAA;AAC1B,EAAA,MAAM,UAAU,SAAa,IAAA,MAAA,CAAO,IAAK,CAAA,SAAS,EAAE,MAAW,KAAA,CAAA,CAAA;AAC/D,EAAA,MAAM,QAAQ,GAAI,CAAA,KAAA,GAAQ,qBAAqB,GAAI,CAAA,KAAA,CAAM,EAAE,CAAI,GAAA,EAAA,CAAA;AAE/D,EAAM,MAAA,4BAAA,GAA+B,QAAQ,EAAO,KAAA,wBAAA,CAAA;AACpD,EAAM,MAAA,IAAA,GAAO,+BAA+B,SAAY,GAAA,QAAA,CAAA;AACxD,EAAM,MAAA,aAAA,GACJ,QAAQ,EAAO,KAAA,OAAA,IAAW,QAAQ,mBAC9B,GAAA,MAAA,CAAO,mBAAoB,CAAA,KAAK,CAChC,GAAA,IAAA,CAAA;AACN,EAAA,MAAM,GACJ,GAAA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,CAAA,6BAAA,EAAgC,KAAK,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,CAAA;AAEpD,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,gBAAa,KAAO,EAAA,EAAE,eAAe,CAAG,EAAA,GAAA,EAAK,IAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,GAAA;AAAA,QACP,KAAA,EACE,QAAQ,EAAO,KAAA,OAAA,uBACZ,YAAa,EAAA,EAAA,IAAA,EAAM,MAAM,KAAO,EAAA,GAAA,EAAI,SAAQ,CAC3C,GAAA,cAAA,EAAgB,0BACjB,GAAA,CAAA,YAAA,EAAA,EAAa,MAAM,cAAe,CAAA,OAAA,EAAS,GAAI,EAAA,MAAA,EAAO,CAEvD,mBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA;AAAA,cACL,KAAO,EAAA,MAAA;AAAA,cACP,MAAQ,EAAA,MAAA;AAAA,cACR,YAAc,EAAA,OAAA;AAAA,cACd,QAAU,EAAA,QAAA;AAAA,cACV,OAAS,EAAA,MAAA;AAAA,cACT,UAAY,EAAA,QAAA;AAAA,cACZ,cAAgB,EAAA,QAAA;AAAA,cAChB,eAAiB,EAAA,2BAAA;AAAA,cACjB,SAAW,EAAA,2BAAA;AAAA,cACX,eAAiB,EAAA,eAAA;AAAA,aACnB;AAAA,YAEA,8BAAC,eAAgB,EAAA,EAAA,CAAA;AAAA,WAAA;AAAA,SACnB;AAAA,QAGJ,cAAA,EACE,+CAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,CAAA;AAAA,+BAClB,MAAK,EAAA,EAAA,QAAA,EAAA;AAAA,YAAA,qBAAA;AAAA,gCACgB,IAAG,EAAA,EAAA,CAAA;AAAA,YAAE,sBAAA;AAAA,WAE3B,EAAA,CAAA;AAAA,SAAA,EACF,oBAGE,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,iBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EACE,cAAgB,EAAA,OAAA,mBACb,GAAA,CAAA,YAAA,EAAA,EAAa,IAAM,EAAA,cAAA,CAAe,OAAS,EAAA,GAAA,EAAI,MAAO,EAAA,CAAA,GAEvD,MAAQ,EAAA,IAAA;AAAA,aAAA;AAAA,WAGd;AAAA,0BACA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,0BAA2B,EAAA,CAAA;AAAA,SAC5C,EAAA,CAAA;AAAA,OAAA;AAAA,KAIR,EAAA,CAAA;AAAA,IAEC,2BAEG,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAS,MAAM;AACb,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,QAAQ,CAAA,CAAA;AAAA,SAClC;AAAA,QACA,QAAQ,EAAA,IAAA;AAAA,QAEP,QAAQ,EAAA,OAAA,CAAA,aAAA;AAAA,OAAA;AAAA,KAEb,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}