@coin-voyage/paykit 0.0.2 → 0.1.0

package/dist/components/Pages/Confirmation/index.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import usePayContext from "../../contexts/pay";
+import { ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
+import { getChainExplorerTxUrl, PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/common";
+import { motion } from "framer-motion";
+import { ExternalLinkIcon, LoadingCircleIcon, TickIcon } from "../../../assets/icons";
+import styled from "../../../styles/styled";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+const confirmingState = [PayOrderStatus.AWAITING_CONFIRMATION, PayOrderStatus.EXECUTING_ORDER, PayOrderStatus.COMPLETED];
+export default function Confirmation() {
+    const { paymentState } = usePayContext();
+    const { payOrder } = paymentState;
+    const isDeposit = payOrder?.mode === PayOrderMode.DEPOSIT;
+    const { status, done, txURL } = (() => {
+        if (!payOrder || !confirmingState.includes(payOrder.status)) {
+            return {
+                status: "Awaiting Payment...",
+                done: false,
+                txURL: undefined,
+            };
+        }
+        const sourceTxHash = payOrder.deposit_tx_hash;
+        const chainId = payOrder.source_currency?.chain_id;
+        const sourceTxUrl = sourceTxHash && chainId ? getChainExplorerTxUrl(chainId, sourceTxHash) : undefined;
+        if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
+            return {
+                status: isDeposit ? "Executing order..." : "Payment completed",
+                done: !isDeposit,
+                txURL: sourceTxUrl,
+            };
+        }
+        if (payOrder.status === PayOrderStatus.COMPLETED) {
+            const receivingTxHash = payOrder.receiving_tx_hash;
+            const destChainId = payOrder.destination_currency?.chain_id;
+            const exposedTxHash = isDeposit ? receivingTxHash : sourceTxHash;
+            const exposedTxURL = isDeposit && destChainId && receivingTxHash ? getChainExplorerTxUrl(destChainId, receivingTxHash) : sourceTxUrl;
+            paymentState.onSuccess({ txHash: exposedTxHash ?? "", txURL: exposedTxURL });
+            return {
+                status: isDeposit ? "Deposit completed" : "Payment completed",
+                done: true,
+                txURL: exposedTxURL
+            };
+        }
+        return {
+            status: "Confirming...",
+            done: false,
+            txURL: sourceTxUrl,
+        };
+    })();
+    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 })] }) }), _jsx(ModalH1, { children: status }), txURL &&
+                    _jsxs(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLinkIcon, { width: 14, height: 14 }), " ", done ? "deposit" : "your", " transaction"] }), _jsx(PoweredByFooter, {})] }) }));
+}
+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 Link = styled.a `
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  color: var(--ck-body-color);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--ck-body-color-muted);
+  }
+`;
+const SuccessIcon = styled(TickIcon) `
+  color: var(--ck-body-color-valid);
+
+  transform: scale(0.5);
+  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)};
+  transform: ${(props) => (props.$status ? "scale(0.5)" : "scale(1)")};
+
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+//# sourceMappingURL=index.js.map

package/dist/components/Pages/Confirmation/index.js.map

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

package/dist/components/Pages/Connectors/index.d.ts

@@ -0,0 +1 @@
+export default function Connectors(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Pages/Connectors/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ROUTES } from "../../../types/routes";
+import WalletIcon from "../../../assets/wallet";
+import { Disclaimer, ModalBody, ModalContent, ModalH1, PageContent, } from "../../ui/Modal/styles";
+import { InfoBox, InfoBoxButtons, LearnMoreButton, LearnMoreContainer, } from "./styles";
+import { useIsMobile } from "@coin-voyage/shared/hooks";
+import useLocales from "../../../hooks/useLocales";
+import usePayContext from "../../contexts/pay";
+import Button from "../../ui/Button";
+import ConnectorList from "../../ui/ConnectorList";
+import { OrderHeader } from "../../ui/OrderHeader";
+export default function Connectors() {
+    const context = usePayContext();
+    const locales = useLocales();
+    const isMobile = useIsMobile();
+    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: [!context.options?.hideQuestionMarkCTA && (_jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ABOUT), children: locales.learnMore })), !context.options?.hideNoWalletCTA && (_jsx(Button, { variant: "tertiary", onClick: () => context.setRoute(ROUTES.ONBOARDING), children: locales.getWallet }))] })] }) })) : (_jsx(_Fragment, { children: !context.options?.hideNoWalletCTA && (_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 }) }))] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/Pages/Connectors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pages/Connectors/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAE9C,OAAO,UAAU,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EACL,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,OAAO,EACP,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,UAAU,MAAM,2BAA2B,CAAA;AAClD,OAAO,aAAa,MAAM,oBAAoB,CAAA;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,aAAa,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAElD,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;IAC/B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,OAAO,CACL,MAAC,WAAW,eACV,KAAC,WAAW,IAAC,QAAQ,SAAG,EACxB,KAAC,aAAa,KAAG,EAEhB,QAAQ,CAAC,CAAC,CAAC,CACV,4BACE,MAAC,OAAO,eACN,MAAC,YAAY,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,aACpD,KAAC,OAAO,8BAAS,OAAO,CAAC,mBAAmB,GAAW,EACvD,KAAC,SAAS,cAAE,OAAO,CAAC,kBAAkB,GAAa,IACtC,EACf,MAAC,cAAc,eACZ,CAAC,OAAO,CAAC,OAAO,EAAE,mBAAmB,IAAI,CACxC,KAAC,MAAM,IACL,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,YAE5C,OAAO,CAAC,SAAS,GACX,CACV,EACA,CAAC,OAAO,CAAC,OAAO,EAAE,eAAe,IAAI,CACpC,KAAC,MAAM,IACL,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,YAEjD,OAAO,CAAC,SAAS,GACX,CACV,IACc,IACT,GACT,CACJ,CAAC,CAAC,CAAC,CACF,4BACG,CAAC,OAAO,CAAC,OAAO,EAAE,eAAe,IAAI,CACpC,KAAC,kBAAkB,cACjB,MAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,aAElD,KAAC,UAAU,KAAG,OAAE,OAAO,CAAC,yBAAyB,IACjC,GACC,CACtB,GACA,CACJ,EACA,OAAO,CAAC,OAAO,EAAE,UAAU,IAAI,CAC9B,KAAC,UAAU,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,YAChE,wBAAM,OAAO,CAAC,OAAO,EAAE,UAAU,GAAO,GAC7B,CACd,IACW,CACf,CAAA;AACH,CAAC"}

package/dist/components/Pages/Connectors/styles.js

@@ -0,0 +1,263 @@
+import { keyframes } from "styled-components";
+import styled from "./../../../styles/styled";
+import { motion } from "framer-motion";
+import { ModalBody } from "../../ui/Modal/styles";
+const Shimmer = keyframes `
+  0%{ transform: translate(-100%) rotate(-45deg); }
+  100%{ transform: translate(100%) rotate(-80deg); }
+`;
+export 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;
+  }
+`;
+export const InfoBoxButtons = styled.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin: 5px -8px -12px;
+  button {
+  }
+`;
+export const LearnMoreContainer = styled(motion.div) `
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -6px;
+`;
+export 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);
+  }
+`;
+export const ConnectorsContainer = styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 0 16px;
+  overflow-y: scroll;
+  max-height: 20rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const ConnectorButton = 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));
+    }
+  }
+`;
+export const ConnectorRecentlyUsed = 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;
+  }
+`;
+export const ConnectorLabel = 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;
+`;
+export const ConnectorIcon = styled(motion.div) `
+  position: absolute;
+  right: 21px;
+  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%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/Pages/Connectors/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Pages/Connectors/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,MAAM,OAAO,GAAG,SAAS,CAAA;;;CAGxB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;IAK7B,SAAS;;;CAGZ,CAAA;AACD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOvC,CAAA;AACD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAInD,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDnD,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWpD,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FnD,CAAA;AACD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0CvC,OAAO;;CAEvB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;CAUhD,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;;;CAe9C,CAAA"}

package/dist/components/Pages/DownloadApp/index.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalBody, ModalContent, PageContent } from "../../ui/Modal/styles";
+import CustomQRCode from "../../ui/CustomQRCode";
+import useLocales from "../../../hooks/useLocales";
+import usePayContext from "../../contexts/pay";
+const DownloadApp = () => {
+    const context = usePayContext();
+    const wallet = context.paymentState.selectedWallet;
+    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 && "No download link available", _jsx(ModalBody, { style: { fontSize: 15, lineHeight: "20px", padding: "0 12px" }, children: bodycopy })] }) }));
+};
+export default DownloadApp;
+//# sourceMappingURL=index.js.map

package/dist/components/Pages/DownloadApp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pages/DownloadApp/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAE5E,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAEhD,OAAO,UAAU,MAAM,2BAA2B,CAAA;AAClD,OAAO,aAAa,MAAM,oBAAoB,CAAA;AAE9C,MAAM,WAAW,GAAG,GAAG,EAAE;IACvB,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;IAC/B,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,cAAc,CAAA;IAElD,MAAM,OAAO,GAAG,UAAU,CAAC;QACzB,aAAa,EAAE,MAAM,EAAE,IAAI;KAC5B,CAAC,CAAA;IAEF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,iDAAqB,CAAA;IAC9B,CAAC;IAED,MAAM,SAAS,GAAG;QAChB,GAAG,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG;QAC7B,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO;QACrC,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ;KACxC,CAAA;IAED,MAAM,QAAQ,GACZ,SAAS,CAAC,GAAG,IAAI,SAAS,CAAC,OAAO;QAChC,CAAC,CAAC,OAAO,CAAC,4BAA4B;QACtC,CAAC,CAAC,SAAS,CAAC,GAAG;YACb,CAAC,CAAC,OAAO,CAAC,qBAAqB;YAC/B,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAA;IAEzC,OAAO,CACL,KAAC,WAAW,cACV,MAAC,YAAY,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,aAC/C,SAAS,CAAC,QAAQ,IAAI,KAAC,YAAY,IAAC,KAAK,EAAE,SAAS,CAAC,QAAQ,GAAI,EACjE,CAAC,SAAS,CAAC,QAAQ,IAAI,4BAA4B,EACpD,KAAC,SAAS,IACR,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,YAE7D,QAAQ,GACC,IACC,GACH,CACf,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/Pages/MobileConnectors/index.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, WalletIcon, WalletItem, WalletLabel, WalletList, } from "./styles";
+import { ModalContent, PageContent } from "../../ui/Modal/styles";
+import useLocales from "../../../hooks/useLocales";
+import { useWalletConnectModal } from "../../../hooks/useWalletConnectModal";
+import { useWallets } from "../../../hooks/useWallets";
+import { walletConfigs } from "../../../lib/config/wallet";
+import usePayContext from "../../contexts/pay";
+import { useWeb3 } from "../../contexts/web3";
+import CopyToClipboard from "../../ui/CopyToClipboard";
+import { ScrollArea } from "../../ui/ScrollArea";
+import { Spinner } from "../../ui/Spinner";
+const MoreIcon = (_jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
+export default function MobileConnectors() {
+    const context = usePayContext();
+    const locales = useLocales();
+    const { connect: { getUri }, } = useWeb3();
+    const wcUri = getUri();
+    const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
+    const wallets = useWallets();
+    // filter out installed wallets
+    const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
+        const wallet = walletConfigs[walletId];
+        if (wallets.find((w) => w.connectors.find((c) => c.connector.id === walletId))) {
+            return false;
+        }
+        if (!wallet.getWalletConnectDeeplink) {
+            return false;
+        }
+        return true;
+    }) ?? [];
+    const connectWallet = (wallet) => {
+        const uri = wallet.getWalletConnectDeeplink?.(wcUri);
+        if (uri) {
+            window.location.href = uri;
+        }
+        //if (uri) window.open(uri, '_blank');
+    };
+    return (_jsx(PageContent, { style: { width: 312 }, children: _jsxs(Container, { children: [_jsx(ModalContent, { style: { paddingBottom: 0 }, children: _jsx(ScrollArea, { height: 340, children: _jsxs(WalletList, { "$disabled": !wcUri, 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: () => connectWallet(wallet), style: {
+                                            animationDelay: `${i * 50}ms`,
+                                        }, children: [_jsx(WalletIcon, { "$outline": true, children: iconConnector ?? icon }), _jsx(WalletLabel, { children: shortName ?? name })] }, i));
+                                }), _jsxs(WalletItem, { onClick: openW3M, "$waiting": isOpenW3M, children: [_jsx(WalletIcon, { style: { background: "var(--ck-body-background-secondary)" }, children: isOpenW3M ? (_jsx("div", { style: {
+                                                    position: "absolute",
+                                                    inset: 0,
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                }, children: _jsx("div", { style: {
+                                                        width: "50%",
+                                                    }, children: _jsx(Spinner, {}) }) })) : (MoreIcon) }), _jsx(WalletLabel, { children: locales.more })] })] }) }) }), context.options?.walletConnectCTA !== "modal" && (_jsx("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: 14,
+                        paddingTop: 8,
+                    }, children: _jsx(CopyToClipboard, { variant: "button", string: wcUri, children: locales.copyToClipboard }) }))] }) }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/Pages/MobileConnectors/index.js.map

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

package/dist/components/Pages/MobileConnectors/styles.js

@@ -0,0 +1,62 @@
+import { css, keyframes } from "styled-components";
+import styled from "./../../../styles/styled";
+export const WalletItem = styled.div `
+  text-align: center;
+  transition: opacity 100ms ease;
+  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
+`;
+export const WalletIcon = styled.div `
+  z-index: 9;
+  position: relative;
+  margin: 0 auto 10px;
+  border-radius: 16px;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.04);
+  ${(props) => props.$outline &&
+    `
+  &:before {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+  }`}
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+`;
+export const WalletLabel = styled.div `
+  color: var(--ck-body-color);
+  font-size: 13px;
+  line-height: 15px;
+  font-weight: 500;
+  opacity: 0.75;
+`;
+const PulseKeyframes = keyframes `
+  0%,100% { opacity:1; }
+  50% { opacity:0.5; }
+`;
+export const WalletList = styled.div `
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 22px 8px;
+  margin: 0 -10px;
+  padding: 4px 0 0;
+  transition: opacity 300ms ease;
+  ${(props) => props.$disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+      ${WalletItem} {
+        animation: ${PulseKeyframes} 1s infinite ease-in-out;
+      }
+    `}
+`;
+export const Container = styled.div ``;
+//# sourceMappingURL=styles.js.map

package/dist/components/Pages/MobileConnectors/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Pages/MobileConnectors/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAE7C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAwB;;;aAG/C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;CACjD,CAAA;AACD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;;;;IASxD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,QAAQ;IACd;;;;;;;;IAQA;;;;;;;CAOH,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMpC,CAAA;AAED,MAAM,cAAc,GAAG,SAAS,CAAA;;;CAG/B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAyB;;;;;;;IAOzD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,SAAS;IACf,GAAG,CAAA;;;QAGC,UAAU;qBACG,cAAc;;KAE9B;CACJ,CAAA;AACD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAA"}

package/dist/components/Pages/Onboarding/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatWrapper, Graphic, GraphicBackground, Logo, LogoGraphic, LogoGroup, LogoInner, LogoPosition, RotateWrapper, } from "./styles";
+import Logos from "../../../assets/logos";
+import wave from "../../../assets/wave";
+import { ModalBody, ModalContent, ModalH1, PageContent, } from "../../ui/Modal/styles";
+import useLocales from "../../../hooks/useLocales";
+import usePayContext from "../../contexts/pay";
+import Button from "../../ui/Button";
+const Introduction = () => {
+    const context = usePayContext();
+    const locales = useLocales({});
+    const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
+    return (_jsxs(PageContent, { children: [_jsxs(Graphic, { children: [_jsxs(LogoGroup, { children: [_jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Trust, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Argent, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), _jsx(GraphicBackground, { children: wave })] }), _jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [_jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), _jsx(ModalBody, { children: locales.onboardingScreen_p })] }), _jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+};
+export default Introduction;
+//# sourceMappingURL=index.js.map

package/dist/components/Pages/Onboarding/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pages/Onboarding/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,YAAY,EACZ,OAAO,EACP,iBAAiB,EACjB,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,YAAY,EACZ,aAAa,GACd,MAAM,UAAU,CAAA;AAEjB,OAAO,KAAK,MAAM,uBAAuB,CAAA;AACzC,OAAO,IAAI,MAAM,sBAAsB,CAAA;AACvC,OAAO,EACL,SAAS,EACT,YAAY,EACZ,OAAO,EACP,WAAW,GACZ,MAAM,uBAAuB,CAAA;AAE9B,OAAO,UAAU,MAAM,2BAA2B,CAAA;AAClD,OAAO,aAAa,MAAM,oBAAoB,CAAA;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,YAAY,GAAa,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;IAC/B,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,CAAA;IAE9B,MAAM,MAAM,GACV,OAAO,CAAC,OAAO,EAAE,mBAAmB,IAAI,OAAO,CAAC,uBAAuB,CAAA;IACzE,OAAO,CACL,MAAC,WAAW,eACV,MAAC,OAAO,eACN,MAAC,SAAS,eACR,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,QAAQ,IAAC,UAAU,SAAG,GACjB,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,QAAQ,IAAC,UAAU,SAAG,GACjB,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,KAAK,KAAG,GACH,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,MAAM,KAAG,GACJ,GACA,GACH,GACL,GACC,GACV,EACP,KAAC,IAAI,cACH,KAAC,YAAY,cACX,KAAC,SAAS,cACR,KAAC,YAAY,cACX,KAAC,aAAa,cACZ,KAAC,WAAW,cACV,KAAC,KAAK,CAAC,OAAO,KAAG,GACL,GACA,GACH,GACL,GACC,GACV,IACG,EACZ,KAAC,iBAAiB,cAAE,IAAI,GAAqB,IACrC,EACV,MAAC,YAAY,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,aACxC,KAAC,OAAO,8BAAS,OAAO,CAAC,mBAAmB,GAAW,EACvD,KAAC,SAAS,cAAE,OAAO,CAAC,kBAAkB,GAAa,IACtC,EACf,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,KAAK,kBACxB,OAAO,CAAC,wBAAwB,GAC1B,IACG,CACf,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}