@rozoai/intent-pay 0.0.7 → 0.0.9

package/build/src/components/Pages/About/styles.js

@@ -0,0 +1,144 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const imageHeight = 208;
+const ImageContainer = styled.div `
+  pointer-events: none;
+  user-select: none;
+  height: ${imageHeight}px;
+  padding: 0 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    display: none;
+  }
+`;
+const ImageContainerInner = styled(motion.div) ``;
+const MobileImageContainer = styled.div `
+  pointer-events: none;
+  user-select: none;
+  height: ${imageHeight}px;
+  padding: 0 0 12px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    display: flex;
+  }
+`;
+const Slides = styled.div `
+  position: relative;
+`;
+const Slide = styled(motion.div) `
+  scroll-snap-type: x mandatory;
+  position: relative;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: 0 4px 8px;
+  /* will-change: transform, opacity; */
+  transition: 400ms 50ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition-property: transform, opacity;
+  ${(props) => !props.$active &&
+    css `
+      pointer-events: none;
+      position: absolute;
+      opacity: 0;
+      transform: scale(0.95);
+      transition-duration: 300ms;
+      transition-delay: 0ms;
+    `}
+`;
+const Slider = styled.div `
+  --background: var(--ck-body-background-secondary);
+  --background-transparent: var(--ck-body-background-transparent, transparent);
+  position: relative;
+  padding: 0 0 4px;
+  border-radius: 16px;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    margin: 0 -24px;
+    ${Slides} {
+      position: relative;
+      z-index: 3;
+      display: flex;
+      overflow: auto;
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+      margin-top: -${imageHeight}px;
+      padding-top: ${imageHeight}px;
+      -ms-overflow-style: none; /* Internet Explorer 10+ */
+      scrollbar-width: none; /* Firefox */
+      &::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
+    }
+    ${Slide} {
+      position: relative;
+      opacity: 1;
+      transform: none;
+      flex-shrink: 0;
+      scroll-snap-align: start;
+    }
+  }
+`;
+const Dots = styled.div `
+  position: relative;
+  top: -1px;
+  display: flex;
+  justify-content: center;
+  pointer-events: auto;
+`;
+const Dot = styled.button `
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 2px;
+  background: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 4px;
+    &:before {
+      transform: none !important;
+    }
+  }
+  &:before {
+    content: "";
+    display: block;
+    width: 16px;
+    height: 3px;
+    opacity: 0.12;
+    border-radius: 4px;
+    background: var(--ck-accent-color, var(--ck-body-color));
+    transition:
+      transform 200ms ease,
+      opacity 180ms ease;
+  }
+  ${(props) => props.$active
+    ? css `
+          cursor: default;
+          &:before {
+            opacity: 1;
+          }
+        `
+    : !props.disabled &&
+        css `
+          cursor: pointer;
+          &:hover:before {
+            transform: scaleY(3.5);
+          }
+          &:active:before {
+          }
+        `}
+`;
+
+export { Dot, Dots, ImageContainer, ImageContainerInner, MobileImageContainer, Slide, Slider, Slides };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/About/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAKA,MAAM,WAAW,GAAG,GAAG,CAAC;AAEX,MAAA,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;YAG5B,WAAW,CAAA;;;;;;;;AAQgB,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;EAG7D;AACK,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA,EAAG;AAE3C,MAAA,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;YAGlC,WAAW,CAAA;;;;;;;;AAQgB,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;EAG7D;AAEW,MAAA,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;EAE9B;AAEW,MAAA,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAuB,CAAA;;;;;;;;;;;AAW1D,EAAA,EAAA,CAAC,KAAK,KACN,CAAC,KAAK,CAAC,OAAO;AACd,IAAA,GAAG,CAAA,CAAA;;;;;;;AAOF,IAAA,CAAA,CAAA;EACH;AACW,MAAA,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;AAMO,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;MAEzD,MAAM,CAAA;;;;;;;qBAOS,WAAW,CAAA;qBACX,WAAW,CAAA;;;;;;;MAO1B,KAAK,CAAA;;;;;;;;EAQT;AAEW,MAAA,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;EAM5B;AACW,MAAA,GAAG,GAAG,MAAM,CAAC,MAAM,CAAsB,CAAA;;;;;;AAMf,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;;;;;;;;;;;;;;AAkB3D,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,OAAO;MACT,GAAG,CAAA,CAAA;;;;;AAKF,QAAA,CAAA;AACH,MAAE,CAAC,KAAK,CAAC,QAAQ;AACf,QAAA,GAAG,CAAA,CAAA;;;;;;;AAOF,QAAA,CAAA,CAAA;;;;;"}

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalH1, Link, ModalBody } from '../../Common/Modal/styles.js';
+import { getOrderDestChainId, assert, getChainExplorerTxUrl } from '@rozoai/intent-common';
+import { motion } from 'framer-motion';
+import { TickIcon, LoadingCircleIcon } from '../../../assets/icons.js';
+import { useRozoPay } from '../../../hooks/useRozoPay.js';
+import styled from '../../../styles/styled/index.js';
+import { getSupportUrl } from '../../../utils/supportUrl.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+
+const Confirmation = () => {
+    const { confirmationMessage, onSuccess } = usePayContext();
+    const { order, paymentState } = useRozoPay();
+    const { done, txURL } = useMemo(() => {
+        if (paymentState === "payment_completed" ||
+            paymentState === "payment_bounced") {
+            const txHash = order.destFastFinishTxHash ?? order.destClaimTxHash;
+            const destChainId = getOrderDestChainId(order);
+            assert(txHash != null, `[CONFIRMATION] paymentState: ${paymentState}, but missing txHash`);
+            const txURL = getChainExplorerTxUrl(destChainId, txHash);
+            return { done: true, txURL };
+        }
+        return { done: false, txURL: undefined };
+    }, [paymentState, order]);
+    useEffect(() => {
+        if (done) {
+            onSuccess();
+        }
+    }, [done, onSuccess]);
+    return (jsx(PageContent, { style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        }, children: jsxs(ModalContent, { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                paddingBottom: 0,
+            }, children: [jsx(AnimationContainer, { children: jsxs(InsetContainer, { children: [jsx(Spinner, { "$status": done }), jsx(SuccessIcon, { "$status": done })] }) }), !done ? (jsx(ModalH1, { children: "Confirming..." })) : (jsxs(Fragment, { children: [jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment Completed" }) }), confirmationMessage && (jsx(ModalBody, { children: confirmationMessage }))] })), jsx(PoweredByFooter, { supportUrl: getSupportUrl(order?.id?.toString() ?? "", done ? "Confirmed" : "Confirming") })] }) }));
+};
+const AnimationContainer = styled(motion.div) `
+  position: relative;
+  width: 100px;
+  height: 100px;
+  transition: transform 0.5s ease-in-out;
+  margin-bottom: 16px;
+`;
+const InsetContainer = styled(motion.div) `
+  position: absolute;
+  overflow: hidden;
+  inset: 6px;
+  border-radius: 50px;
+  background: var(--ck-body-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const SuccessIcon = styled(TickIcon) `
+  color: var(--ck-body-color-valid);
+  transition: all 0.2s ease-in-out;
+  position: absolute;
+  opacity: ${(props) => (props.$status ? 1 : 0)};
+  transform: ${(props) => (props.$status ? "scale(1)" : "scale(0.5)")};
+`;
+const Spinner = styled(LoadingCircleIcon) `
+  position: absolute;
+  transition: all 0.2s ease-in-out;
+  animation: rotateSpinner 400ms linear infinite;
+  opacity: ${(props) => (props.$status ? 0 : 1)};
+
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export { Confirmation as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Confirmation/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import WalletIcon from '../../../assets/wallet.js';
+import { PageContent, ModalContent, ModalH1, ModalBody, Disclaimer } from '../../Common/Modal/styles.js';
+import { InfoBox, InfoBoxButtons, LearnMoreContainer, LearnMoreButton } from './styles.js';
+import { RozoPayOrderMode } from '@rozoai/intent-common';
+import { useRozoPay } from '../../../hooks/useRozoPay.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import useLocales from '../../../hooks/useLocales.js';
+import Button from '../../Common/Button/index.js';
+import ConnectorList from '../../Common/ConnectorList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+
+const Wallets = () => {
+    const context = usePayContext();
+    const locales = useLocales({});
+    const { isMobile } = useIsMobile();
+    const { hydrateOrder, order } = useRozoPay();
+    // If we're on mobile & not in deposit mode, hydrate immediately.
+    useEffect(() => {
+        if (isMobile &&
+            !context.paymentState.isDepositFlow &&
+            order != null &&
+            order.mode !== RozoPayOrderMode.HYDRATED) {
+            hydrateOrder();
+        }
+    }, [isMobile, context.paymentState.isDepositFlow, hydrateOrder, order]);
+    // Show new-user education buttons
+    const showLearnMore = !context.options?.hideQuestionMarkCTA;
+    const showGetWallet = !context.options?.hideNoWalletCTA;
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), jsx(ConnectorList, {}), isMobile ? (jsx(Fragment, { children: jsxs(InfoBox, { children: [jsxs(ModalContent, { style: { padding: 0, textAlign: "left" }, children: [jsx(ModalH1, { "$small": true, children: locales.connectorsScreen_h1 }), jsx(ModalBody, { children: locales.connectorsScreen_p })] }), jsxs(InfoBoxButtons, { children: [showLearnMore && (jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ABOUT), children: locales.learnMore })), showGetWallet && (jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ONBOARDING), children: locales.getWallet }))] })] }) })) : (jsx(Fragment, { children: showGetWallet && (jsx(LearnMoreContainer, { children: jsxs(LearnMoreButton, { onClick: () => context.setRoute(ROUTES.ONBOARDING), children: [jsx(WalletIcon, {}), " ", locales.connectorsScreen_newcomer] }) })) })), context.options?.disclaimer && (jsx(Disclaimer, { style: { visibility: "hidden", pointerEvents: "none" }, children: jsx("div", { children: context.options?.disclaimer }) }))] }));
+};
+
+export { Wallets as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/Connectors/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;AA2BM,MAAA,OAAO,GAAa,MAAK;AAC7B,IAAA,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;AAChC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;AAE/B,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IACnC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,CAAC;;IAG7C,SAAS,CAAC,MAAK;AACb,QAAA,IACE,QAAQ;AACR,YAAA,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa;AACnC,YAAA,KAAK,IAAI,IAAI;AACb,YAAA,KAAK,CAAC,IAAI,KAAK,gBAAgB,CAAC,QAAQ,EACxC;AACA,YAAA,YAAY,EAAE,CAAC;SAChB;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;;IAGxE,MAAM,aAAa,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,mBAAmB,CAAC;IAC5D,MAAM,aAAa,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC;IAExD,QACEA,KAAC,WAAW,EAAA,EAAA,QAAA,EAAA,CACVC,IAAC,WAAW,EAAA,EAAC,QAAQ,EAAG,IAAA,EAAA,CAAA,EACxBA,IAAC,aAAa,EAAA,EAAA,CAAG,EAEhB,QAAQ,IACPA,0BACED,IAAC,CAAA,OAAO,eACNA,IAAC,CAAA,YAAY,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,aACpDC,GAAC,CAAA,OAAO,8BAAS,OAAO,CAAC,mBAAmB,EAAA,CAAW,EACvDA,GAAA,CAAC,SAAS,EAAE,EAAA,QAAA,EAAA,OAAO,CAAC,kBAAkB,EAAA,CAAa,IACtC,EACfD,IAAA,CAAC,cAAc,EACZ,EAAA,QAAA,EAAA,CAAA,aAAa,KACZC,GAAA,CAAC,MAAM,EACL,EAAA,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,YAE5C,OAAO,CAAC,SAAS,EACX,CAAA,CACV,EACA,aAAa,KACZA,GAAC,CAAA,MAAM,EACL,EAAA,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,EAAA,QAAA,EAEjD,OAAO,CAAC,SAAS,GACX,CACV,CAAA,EAAA,CACc,CACT,EAAA,CAAA,EAAA,CACT,KAEHA,0BACG,aAAa,KACZA,GAAC,CAAA,kBAAkB,cACjBD,IAAC,CAAA,eAAe,IACd,OAAO,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,EAElD,QAAA,EAAA,CAAAC,GAAA,CAAC,UAAU,EAAG,EAAA,CAAA,EAAA,GAAA,EAAE,OAAO,CAAC,yBAAyB,IACjC,EACC,CAAA,CACtB,GACA,CACJ,EACA,OAAO,CAAC,OAAO,EAAE,UAAU,KAC1BA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,EAAA,QAAA,EAChEA,uBAAM,OAAO,CAAC,OAAO,EAAE,UAAU,GAAO,EAC7B,CAAA,CACd,CACW,EAAA,CAAA,EACd;AACJ;;;;"}

package/build/src/components/Pages/Connectors/styles.js

@@ -0,0 +1,267 @@
+import { keyframes } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { motion } from 'framer-motion';
+import { ModalBody } from '../../Common/Modal/styles.js';
+
+const Shimmer = keyframes `
+  0%{ transform: translate(-100%) rotate(-45deg); }
+  100%{ transform: translate(100%) rotate(-80deg); }
+`;
+const InfoBox = styled.div `
+  padding: 24px 24px 28px;
+  border-radius: var(--ck-tertiary-border-radius, 24px);
+  box-shadow: var(--ck-tertiary-box-shadow, none);
+  background: var(--ck-body-background-tertiary);
+  ${ModalBody} {
+    max-width: none;
+  }
+`;
+const InfoBoxButtons = styled.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin: 5px -8px -12px;
+  button {
+  }
+`;
+const LearnMoreContainer = styled(motion.div) `
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -6px;
+`;
+const LearnMoreButton = styled(motion.button) `
+  appearance: none;
+  user-select: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 6px;
+  background: none;
+  color: var(--ck-body-color-muted);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  /* will-change: transform; */
+  transition:
+    color 200ms ease,
+    transform 100ms ease;
+  svg {
+    transition: all 100ms ease-out;
+    display: block;
+    position: relative;
+    top: 2px;
+    left: 2px;
+    transform: translateZ(0px);
+    path,
+    circle {
+      transition: all 100ms ease-out;
+    }
+    path:last-of-type {
+      transform-origin: 0 0;
+      transform: scaleX(1.3) skewY(-12deg);
+      opacity: 0;
+    }
+    circle {
+      transform: translate(20%, -15%);
+    }
+  }
+  &:hover {
+    color: var(--ck-body-color-muted-hover);
+    svg {
+      path,
+      circle {
+        opacity: 1;
+        transform: none;
+      }
+    }
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+`;
+styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 0 16px;
+  overflow-y: scroll;
+  max-height: 20rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+styled(motion.button) `
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  width: 100%;
+  height: 64px;
+  font-size: 17px;
+  font-weight: var(--ck-primary-button-font-weight, 500);
+  line-height: 20px;
+  text-align: var(--ck-body-button-text-align, left);
+  transition: 180ms ease;
+  transition-property: background, color, box-shadow, transform, opacity;
+  will-change: transform, box-shadow, background-color, color, opacity;
+
+  --fallback-color: var(--ck-primary-button-color);
+  --fallback-background: var(--ck-primary-button-background);
+  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
+  --fallback-border-radius: var(--ck-primary-button-border-radius);
+
+  --color: var(--ck-primary-button-color, var(--fallback-color));
+  --background: var(--ck-primary-button-background, var(--fallback-background));
+  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
+  --border-radius: var(
+    --ck-primary-button-border-radius,
+    var(--fallback-border-radius)
+  );
+
+  --hover-color: var(--ck-primary-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-primary-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-primary-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+  --hover-border-radius: var(
+    --ck-primary-button-hover-border-radius,
+    var(--border-radius)
+  );
+
+  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-primary-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-primary-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+  --active-border-radius: var(
+    --ck-primary-button-active-border-radius,
+    var(--hover-border-radius)
+  );
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  &:disabled {
+    transition: 180ms ease;
+    opacity: 0.4;
+  }
+
+  --bg: var(--background);
+  &:not(:disabled) {
+    &:hover {
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:focus-visible {
+      transition-duration: 100ms;
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:active {
+      color: var(--active-color);
+      background: var(--active-background);
+      box-shadow: var(--active-box-shadow);
+      border-radius: var(--active-border-radius);
+      --bg: var(--active-background, var(--background));
+    }
+  }
+`;
+styled(motion.span) `
+  position: relative;
+  top: var(--ck-recent-badge-top-offset, 0.5px);
+  display: inline-block;
+  padding: 10px 7px;
+  line-height: 0;
+  font-size: 13px;
+  font-weight: 400;
+  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
+  color: var(
+    --ck-recent-badge-color,
+    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
+  );
+  background: var(--ck-recent-badge-background, transparent);
+  overflow: hidden;
+  span {
+    display: inline-block;
+    position: relative;
+  }
+  &:before {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.4;
+    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
+    border-radius: inherit;
+  }
+  &:after {
+    z-index: 2;
+    content: "";
+    position: absolute;
+    inset: -10%;
+    top: -110%;
+    aspect-ratio: 1/1;
+    opacity: 0.7;
+    background: linear-gradient(
+      170deg,
+      transparent 10%,
+      var(--ck-recent-badge-background, var(--bg)) 50%,
+      transparent 90%
+    );
+    animation: ${Shimmer} 2s linear infinite;
+  }
+`;
+styled(motion.span) `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 0;
+  padding-right: 38px;
+`;
+styled(motion.div) `
+  position: absolute;
+  right: 20px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 27.5%;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export { InfoBox, InfoBoxButtons, LearnMoreButton, LearnMoreContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/Connectors/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA,MAAM,OAAO,GAAG,SAAS,CAAA,CAAA;;;CAGxB,CAAC;AAEW,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;IAK7B,SAAS,CAAA;;;EAGX;AACW,MAAA,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;EAOtC;AACW,MAAA,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;EAIlD;AACW,MAAA,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDlD;AAEiC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;EAWnD;AAE6B,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FlD;AACmC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0CvC,OAAO,CAAA;;EAEtB;AAE4B,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;;;;;;EAU/C;AAE2B,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,30 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { PageContent, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import CustomQRCode from '../../Common/CustomQRCode/index.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { useWallet } from '../../../wallets/useWallets.js';
+
+const DownloadApp = () => {
+    const { pendingConnectorId } = usePayContext();
+    const wallet = useWallet(pendingConnectorId ?? "");
+    const locales = useLocales({
+        CONNECTORNAME: wallet?.name,
+    });
+    if (!wallet)
+        return jsx(Fragment, { children: "Wallet not found" });
+    const downloads = {
+        ios: wallet.downloadUrls?.ios,
+        android: wallet.downloadUrls?.android,
+        redirect: wallet.downloadUrls?.download,
+    };
+    const bodycopy = downloads.ios && downloads.android
+        ? locales.downloadAppScreen_iosAndroid
+        : downloads.ios
+            ? locales.downloadAppScreen_ios
+            : locales.downloadAppScreen_android;
+    return (jsx(PageContent, { children: jsxs(ModalContent, { style: { paddingBottom: 4, gap: 14 }, children: [downloads.redirect && jsx(CustomQRCode, { value: downloads.redirect }), !downloads.redirect && jsx(Fragment, { children: "No download link available" }), jsx(ModalBody, { style: { fontSize: 15, lineHeight: "20px", padding: "0 12px" }, children: bodycopy })] }) }));
+};
+
+export { DownloadApp as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/DownloadApp/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAYM,MAAA,WAAW,GAAG,MAAK;AACvB,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,aAAa,EAAE,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,UAAU,CAAC;QACzB,aAAa,EAAE,MAAM,EAAE,IAAI;AAC5B,KAAA,CAAC,CAAC;AAEH,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAOA,+CAAqB,CAAC;AAE1C,IAAA,MAAM,SAAS,GAAG;AAChB,QAAA,GAAG,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG;AAC7B,QAAA,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO;AACrC,QAAA,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ;KACxC,CAAC;IAEF,MAAM,QAAQ,GACZ,SAAS,CAAC,GAAG,IAAI,SAAS,CAAC,OAAO;UAC9B,OAAO,CAAC,4BAA4B;UACpC,SAAS,CAAC,GAAG;cACX,OAAO,CAAC,qBAAqB;AAC/B,cAAE,OAAO,CAAC,yBAAyB,CAAC;AAE1C,IAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVC,IAAC,CAAA,YAAY,EAAC,EAAA,KAAK,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CAC/C,SAAS,CAAC,QAAQ,IAAID,GAAC,CAAA,YAAY,EAAC,EAAA,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAA,CAAI,EACjE,CAAC,SAAS,CAAC,QAAQ,IAAIA,GAA+B,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,CAAA,EACvDF,GAAC,CAAA,SAAS,EACR,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAA,QAAA,EAE7D,QAAQ,EAAA,CACC,CACC,EAAA,CAAA,EAAA,CACH,EACd;AACJ;;;;"}

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

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { walletConfigs } from '../../../wallets/walletConfigs.js';
+import { PageContent, ModalContent } from '../../Common/Modal/styles.js';
+import { ScrollArea } from '../../Common/ScrollArea/index.js';
+import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from './styles.js';
+
+const MobileConnectors = () => {
+    const context = usePayContext();
+    const { paymentState, setRoute } = context;
+    // filter out installed wallets
+    const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
+        const wallet = walletConfigs[walletId];
+        if (!wallet.showInMobileConnectors)
+            return false;
+        // If the mobile wallet supports solana only, don't show it if we are not supporting solana has a payment method
+        if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)
+            return false;
+        return true;
+    }) ?? [];
+    const goToWallet = (wallet) => {
+        if (wallet.getRozoPayDeeplink == null) {
+            console.error(`wallet ${wallet.name} has no deeplink`);
+            return;
+        }
+        if (paymentState.isDepositFlow) {
+            context.paymentState.setSelectedWallet(wallet);
+            setRoute(ROUTES.SELECT_WALLET_AMOUNT);
+        }
+        else {
+            paymentState.openInWalletBrowser(wallet);
+        }
+    };
+    return (jsx(PageContent, { style: { width: 312 }, children: jsx(Container, { children: jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsx(WalletList, { children: walletsIdsToDisplay
+                            .sort(
+                        // sort by name
+                        (a, b) => {
+                            const walletA = walletConfigs[a];
+                            const walletB = walletConfigs[b];
+                            const nameA = walletA.name ?? walletA.shortName ?? a;
+                            const nameB = walletB.name ?? walletB.shortName ?? b;
+                            return nameA.localeCompare(nameB);
+                        })
+                            .filter((walletId) => !(walletId === "coinbaseWallet" ||
+                            walletId === "com.coinbase.wallet"))
+                            .map((walletId, i) => {
+                            const wallet = walletConfigs[walletId];
+                            const { name, shortName, iconConnector, icon } = wallet;
+                            return (jsxs(WalletItem, { onClick: () => goToWallet(wallet), style: {
+                                    animationDelay: `${i * 50}ms`,
+                                }, children: [jsx(WalletIcon, { children: iconConnector ?? icon }), jsx(WalletLabel, { children: shortName ?? name })] }, i));
+                        }) }) }) }) }) }));
+};
+
+export { MobileConnectors as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/MobileConnectors/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}