@coin-voyage/paykit 0.0.2 → 0.1.1

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

@@ -1,21 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ROUTES } from '../../../types/routes.js';
-import WalletIcon from '../../../assets/wallet.js';
-import { PageContent, ModalContent, ModalH1, ModalBody, Disclaimer } from '../../ui/Modal/styles.js';
-import { InfoBox, InfoBoxButtons, LearnMoreContainer, LearnMoreButton } from './styles.js';
-import useLocales from '../../../hooks/useLocales.js';
-import usePayContext from '../../contexts/pay/index.js';
-import Button from '../../ui/Button/index.js';
-import ConnectorList from '../../ui/ConnectorList/index.js';
-import { OrderHeader } from '../../ui/OrderHeader/index.js';
-import useIsMobile from '../../../../../shared/src/hooks/use-is-mobile.js';
-
-function Wallets() {
-    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 }) }))] }));
-}
-
-export { Wallets as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,267 +0,0 @@
-import { keyframes } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import { motion } from 'framer-motion';
-import { ModalBody } from '../../ui/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/dist/paykit/src/components/Pages/Connectors/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,30 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { PageContent, ModalContent, ModalBody } from '../../ui/Modal/styles.js';
-import CustomQRCode from '../../ui/CustomQRCode/index.js';
-import useLocales from '../../../hooks/useLocales.js';
-import usePayContext from '../../contexts/pay/index.js';
-
-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 { DownloadApp as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,76 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from './styles.js';
-import { PageContent, ModalContent } from '../../ui/Modal/styles.js';
-import useLocales from '../../../hooks/useLocales.js';
-import { useWalletConnectModal } from '../../../hooks/useWalletConnectModal.js';
-import { useWallets } from '../../../hooks/useWallets.js';
-import { walletConfigs } from '../../../lib/config/wallet.js';
-import usePayContext from '../../contexts/pay/index.js';
-import { useWeb3 } from '../../contexts/web3/index.js';
-import CopyToClipboard from '../../ui/CopyToClipboard/index.js';
-import { ScrollArea } from '../../ui/ScrollArea/index.js';
-import { Spinner } from '../../ui/Spinner/index.js';
-
-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" }) }));
-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 }) }))] }) }));
-}
-
-export { MobileConnectors as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,65 +0,0 @@
-import { keyframes, css } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-
-const WalletItem = styled.div `
-  text-align: center;
-  transition: opacity 100ms ease;
-  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
-`;
-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;
-  }
-`;
-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; }
-`;
-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;
-      }
-    `}
-`;
-const Container = styled.div ``;
-
-export { Container, WalletIcon, WalletItem, WalletLabel, WalletList };
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,18 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Graphic, LogoGroup, Logo, LogoPosition, LogoInner, FloatWrapper, RotateWrapper, LogoGraphic, GraphicBackground } from './styles.js';
-import Logos from '../../../assets/logos.js';
-import wave from '../../../assets/wave.js';
-import { PageContent, ModalContent, ModalH1, ModalBody } from '../../ui/Modal/styles.js';
-import useLocales from '../../../hooks/useLocales.js';
-import usePayContext from '../../contexts/pay/index.js';
-import Button from '../../ui/Button/index.js';
-
-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 { Introduction as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}