@coin-voyage/paykit 0.0.2 → 0.1.0

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

@@ -0,0 +1,226 @@
+import { motion } from "framer-motion";
+import { keyframes } from "styled-components";
+import defaultTheme from "../../../lib/config/default-theme";
+import styled from "./../../../styles/styled";
+export const Graphic = styled(motion.div) `
+  position: relative;
+  margin: 16px auto 20px;
+  height: 190px;
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
+  }
+`;
+export const LogoGroup = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+const graphicIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+export const GraphicBackground = styled(motion.div) `
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+  //   animation: none;
+  // }
+`;
+const logoIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+export const LogoPosition = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-delay: inherit;
+`;
+export const LogoInner = styled(motion.div) `
+  position: absolute;
+`;
+export const LogoGraphic = styled(motion.div) `
+  position: relative;
+  overflow: hidden;
+  height: 58px;
+  width: 58px;
+  border-radius: 13.84px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 2px 20px 0 rgba(0, 0, 0, 0.03);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const float = keyframes `
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
+`;
+export const FloatWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${float};
+  animation-duration: 3600ms;
+`;
+const rotate = keyframes `
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+export const RotateWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${rotate};
+  animation-duration: 3200ms;
+`;
+export const Logo = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+
+  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
+  &:nth-child(1) {
+    z-index: 2;
+    animation-delay: 0ms;
+  }
+  &:nth-child(2) {
+    z-index: 1;
+    animation-delay: 60ms;
+  }
+  &:nth-child(3) {
+    z-index: 1;
+    animation-delay: 30ms;
+  }
+  &:nth-child(4) {
+    z-index: 1;
+    animation-delay: 90ms;
+  }
+  &:nth-child(5) {
+    z-index: 1;
+    animation-delay: 120ms;
+  }
+
+  &:nth-child(1) {
+    ${RotateWrapper} {
+      animation-delay: 0ms;
+    }
+  }
+  &:nth-child(2) {
+    ${RotateWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${RotateWrapper} {
+      animation-delay: -1200ms;
+    }
+  }
+  &:nth-child(4) {
+    ${RotateWrapper} {
+      animation-delay: -1800ms;
+    }
+  }
+  &:nth-child(5) {
+    ${RotateWrapper} {
+      animation-delay: -2400ms;
+    }
+  }
+
+  &:nth-child(1) {
+    ${FloatWrapper} {
+      animation-delay: -200ms;
+    }
+  }
+  &:nth-child(2) {
+    ${FloatWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${FloatWrapper} {
+      animation-delay: -800ms;
+    }
+  }
+  &:nth-child(4) {
+    ${FloatWrapper} {
+      animation-delay: -300ms;
+    }
+  }
+  &:nth-child(5) {
+    ${FloatWrapper} {
+      animation-delay: -3200ms;
+    }
+  }
+
+  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+  //   animation: none !important;
+  //   ${RotateWrapper},${FloatWrapper} {
+  //     animation: none !important;
+  //   }
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Pages/Onboarding/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,YAAY,MAAM,mCAAmC,CAAA;AAC5D,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAE7C,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;uCAOF,YAAY,CAAC,WAAW;;;;;CAK9D,CAAA;AACD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI1C,CAAA;AACD,MAAM,SAAS,GAAG,SAAS,CAAA;;;;;;;;;CAS1B,CAAA;AACD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;eAuBpC,SAAS;0CACkB,YAAY,CAAC,WAAW;;;CAGjE,CAAA;AAED,MAAM,MAAM,GAAG,SAAS,CAAA;;;;;;;;;CASvB,CAAA;AACD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAK7C,CAAA;AACD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1C,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;;;;;CAe5C,CAAA;AACD,MAAM,KAAK,GAAG,SAAS,CAAA;;;CAGtB,CAAA;AACD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;oBAG1B,KAAK;;CAExB,CAAA;AACD,MAAM,MAAM,GAAG,SAAS,CAAA;;;CAGvB,CAAA;AACD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;oBAG3B,MAAM;;CAEzB,CAAA;AACD,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;eAIvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;MAuBf,aAAa;;;;;MAKb,aAAa;;;;;MAKb,aAAa;;;;;MAKb,aAAa;;;;;MAKb,aAAa;;;;;;MAMb,YAAY;;;;;MAKZ,YAAY;;;;;MAKZ,YAAY;;;;;MAKZ,YAAY;;;;;MAKZ,YAAY;;;;;0CAKwB,YAAY,CAAC,WAAW;;SAEzD,aAAa,IAAI,YAAY;;;;;IAKlC,SAAS;;;;mBAIM,YAAY;;MAEzB,WAAW;;;;;;mBAME,YAAY;;;mBAGZ,YAAY;;;mBAGZ,YAAY;;;mBAGZ,YAAY;;;CAG9B,CAAA"}

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

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ROUTES } from "../../../types/routes";
+import { ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
+import { ChainType, getChainTypeByChainId } from "@coin-voyage/shared/common";
+import { AnimatePresence, motion } from "framer-motion";
+import { css } from "styled-components";
+import { useChainId, useSwitchChain } from "wagmi";
+import { chainToLogo } from "../../../assets/chains";
+import styled from "../../../styles/styled";
+import usePayContext from "../../contexts/pay";
+import CircleSpinner from "../../spinners/CircleSpinner";
+import Button from "../../ui/Button";
+var PayState;
+(function (PayState) {
+    PayState["RequestingPayment"] = "Requesting Payment";
+    PayState["SwitchingChain"] = "Switching Chain";
+    PayState["RequestCancelled"] = "Payment Cancelled";
+    PayState["RequestSuccessful"] = "Payment Successful";
+})(PayState || (PayState = {}));
+export default function PayWithToken() {
+    const { triggerResize, paymentState, setRoute, log } = usePayContext();
+    const { selectedTokenOption, payWithToken } = paymentState;
+    const [payState, setPayState] = useState(PayState.RequestingPayment);
+    const chainType = getChainTypeByChainId(paymentState.selectedTokenOption?.chain_id);
+    const walletChainId = useChainId();
+    const { switchChainAsync } = useSwitchChain();
+    const trySwitchingChain = async (option, forceSwitch = false) => {
+        if (walletChainId !== option.chain_id || forceSwitch) {
+            const resultChain = await (async () => {
+                try {
+                    return await switchChainAsync({
+                        chainId: option.chain_id,
+                    });
+                }
+                catch (e) {
+                    console.error("Failed to switch chain", e);
+                    return null;
+                }
+            })();
+            if (resultChain?.id !== option.chain_id) {
+                return false;
+            }
+        }
+        return true;
+    };
+    const handleTransfer = async (token) => {
+        // Switch chain if necessary
+        if (chainType === ChainType.EVM) {
+            setPayState(PayState.SwitchingChain);
+            const switchChain = await trySwitchingChain(token);
+            if (!switchChain) {
+                setPayState(PayState.RequestCancelled);
+                return;
+            }
+        }
+        setPayState(PayState.RequestingPayment);
+        try {
+            const txHash = await payWithToken(token);
+            if (!txHash) {
+                setPayState(PayState.RequestCancelled);
+                return;
+            }
+            setPayState(PayState.RequestSuccessful);
+            setTimeout(() => {
+                setRoute(ROUTES.CONFIRMATION);
+            }, 200);
+        }
+        catch (e) {
+            if (e?.name === "ConnectorChainMismatchError") {
+                // Workaround for Rainbow wallet bug -- user is able to switch chain without
+                // the wallet updating the chain ID for wagmi.
+                log("Chain mismatch detected, attempting to switch and retry");
+                const switchSuccessful = await trySwitchingChain(token, true);
+                if (switchSuccessful) {
+                    try {
+                        await payWithToken(token);
+                        return; // Payment successful after switching chain
+                    }
+                    catch (retryError) {
+                        console.error("Failed to pay with token after switching chain", retryError);
+                        throw retryError;
+                    }
+                }
+            }
+            setPayState(PayState.RequestCancelled);
+            console.error("Failed to pay with token", e);
+        }
+    };
+    let transferTimeout; // Prevent double-triggering in React dev strict mode.
+    useEffect(() => {
+        if (!selectedTokenOption) {
+            return;
+        }
+        // Give user time to see the UI before opening
+        transferTimeout = setTimeout(() => {
+            handleTransfer(selectedTokenOption);
+        }, 100);
+        return () => {
+            clearTimeout(transferTimeout);
+        };
+    }, []);
+    useEffect(() => {
+        triggerResize();
+    }, [payState]);
+    return (_jsxs(PageContent, { children: [_jsx(LoadingContainer, { children: _jsx(AnimationContainer, { "$circle": true, children: _jsxs(AnimatePresence, { children: [_jsx(ChainLogoContainer, { children: selectedTokenOption &&
+                                    chainToLogo[selectedTokenOption.chain_id] }, "ChainLogoContainer"), _jsx(CircleSpinner, { logo: _jsx("img", { src: selectedTokenOption?.image_uri, alt: selectedTokenOption?.ticker }, selectedTokenOption?.image_uri), loading: true, unavailable: false }, "CircleSpinner")] }) }) }), _jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [_jsx(ModalH1, { children: payState }), payState === PayState.RequestCancelled && (_jsx(Button, { onClick: () => selectedTokenOption ? handleTransfer(selectedTokenOption) : null, children: "Retry Payment" }))] })] }));
+}
+const LoadingContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+`;
+const AnimationContainer = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${(props) => props.$circle &&
+    css `
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
+  }
+`;
+const ChainLogoContainer = styled(motion.div) `
+  z-index: 10;
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  overflow: hidden;
+
+  color: var(--ck-body-background);
+  transition: color 200ms ease;
+
+  &:before {
+    z-index: 5;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    background: var(--ck-body-color);
+  }
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+`;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig as useBigmiConfig } from "@bigmi/react";
+import { useAccount, useAccountDisconnect } from "@coin-voyage/crypto/hooks";
+import { ChainType, PayOrderMode } from "@coin-voyage/shared/common";
+import { useIsMobile } from "@coin-voyage/shared/hooks";
+import { shortenAddress } from "@coin-voyage/shared/utils";
+import { useWallets } from "@mysten/dapp-kit";
+import { useWallet } from "@solana/wallet-adapter-react";
+import { useConfig as useWagmiConfig } from "wagmi";
+import Logos from "../../../assets/chains";
+import { MetaMask } from "../../../assets/logos";
+import { ROUTES } from "../../../types/routes";
+import usePayContext from "../../contexts/pay";
+import { SquircleIcon } from "../../ui/Icon";
+import { PageContent } from "../../ui/Modal/styles";
+import OptionsList from "../../ui/OptionsList";
+import { OrderHeader } from "../../ui/OrderHeader";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+function getTitle(subject, isDeposit) {
+    return `${isDeposit ? "Deposit from" : "Pay on"} ${subject}`;
+}
+export default function SelectMethod() {
+    const isMobile = useIsMobile();
+    const suiWallets = useWallets();
+    const evmConfig = useWagmiConfig();
+    const utxoConfig = useBigmiConfig();
+    const { wallets: solanaWallets } = useWallet();
+    const { setRoute, paymentState } = usePayContext();
+    const disconnect = useAccountDisconnect();
+    const isDeposit = paymentState.payOrder?.mode === PayOrderMode.DEPOSIT;
+    const { account } = useAccount({
+        selectedWallet: paymentState.selectedWallet,
+        chainType: paymentState.connectorChainType,
+    });
+    const { senderEnsName } = paymentState;
+    const displayName = senderEnsName ??
+        (account?.address ? shortenAddress(account.address) : "wallet");
+    const handleClick = (chainType, doDisconnect) => {
+        if (doDisconnect && account)
+            disconnect(account);
+        paymentState.setConnectorChainType(chainType);
+        setRoute(ROUTES.CONNECTORS);
+    };
+    const isConnected = account?.isConnected;
+    const options = [
+        ...(isConnected ? [{
+                id: "connectedWallet",
+                title: `Pay with ${displayName}`,
+                icons: [
+                    account?.connector?.icon ? (_jsx(SquircleIcon, { icon: account.connector.icon, alt: account.connector.name })) : (_jsx(MetaMask, {})),
+                ],
+                onClick: () => {
+                    paymentState.setConnectorChainType(account.chainType);
+                    setRoute(ROUTES.SELECT_TOKEN);
+                },
+            }] : []),
+        ...(evmConfig.connectors.length > 0 ? [{
+                id: "evm",
+                title: getTitle("Ethereum", isDeposit),
+                subtitle: "Ethereum Mainnet, Base, BSC ...",
+                iconShape: "circle",
+                icons: [_jsx(Logos.Ethereum, {}), _jsx(Logos.Base, {}), _jsx(Logos.BinanceSmartChain, {})],
+                onClick: () => {
+                    handleClick(ChainType.EVM, true);
+                },
+            }] : []),
+        ...(solanaWallets ? [{
+                id: "solana",
+                title: getTitle("Solana", isDeposit),
+                icons: [_jsx(Logos.Solana, {})],
+                onClick: () => {
+                    handleClick(ChainType.SOL, true);
+                },
+            }] : []),
+        ...(suiWallets ? [{
+                id: "sui",
+                title: getTitle("Sui", isDeposit),
+                icons: [_jsx(Logos.Sui, {})],
+                onClick: () => {
+                    handleClick(ChainType.SUI, true);
+                },
+            }] : []),
+        ...(utxoConfig.connectors.length > 0 ? [{
+                id: "bitcoin",
+                title: getTitle("Bitcoin", isDeposit),
+                icons: [_jsx(Logos.Bitcoin, {})],
+                onClick: () => {
+                    handleClick(ChainType.UTXO, true);
+                },
+            }] : []),
+    ];
+    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, {}), _jsx(OptionsList, { requiredSkeletons: isMobile ? 4 : 3, options: options }), _jsx(PoweredByFooter, {})] }));
+}
+//# sourceMappingURL=index.js.map

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

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