@coin-voyage/paykit 2.2.7-beta.2 → 2.2.7-beta.3

package/dist/providers/paykit-provider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useInWagmiContext } from "@coin-voyage/crypto/evm/provider/provider";
 import { useAccount, useConnectCallback } from "@coin-voyage/crypto/hooks";
+import { getChainMetadata, getToken } from "@coin-voyage/shared/common";
 import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { Buffer } from "buffer";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -10,6 +11,7 @@ import { PayModal } from "../components/pay-modal/index";
 import { useThemeFont } from "../hooks/useGoogleFont";
 import { usePaymentState } from "../hooks/usePaymentState";
 import defaultTheme from "../styles/defaultTheme";
+import { PaymentMethod } from "../types/enums";
 import { ROUTES } from "../types/routes";
 import { ApiProvider } from "./api-provider";
 const defaultOptions = {
@@ -23,6 +25,7 @@ const defaultOptions = {
     disclaimer: null,
     bufferPolyfill: true,
     overlayBlur: undefined,
+    optimisticConfirmation: true,
 };
 export const PayKitProvider = ({ apiKey, environment = "production", ...props }) => {
     const inWagmiContext = useInWagmiContext();
@@ -171,7 +174,7 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
             clearTimeout(timeout);
         };
     }, [payOrder, refreshOrder]);
-    const showModal = useCallback((modalOptions) => {
+    const showModal = useCallback(async (modalOptions) => {
         setModalOptions(modalOptions);
         setOpen(true);
         const isConnected = account.isConnected;
@@ -179,17 +182,40 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
             paymentState.setConnectorChainType(account.chainType);
         }
         const payOrder = paymentState.payOrder;
-        if (payOrder?.status === PayOrderStatus.COMPLETED) {
+        const paymentMethod = paymentState.paymentMethod;
+        if (payOrder?.status !== PayOrderStatus.PENDING &&
+            payOrder?.status !== PayOrderStatus.AWAITING_PAYMENT &&
+            payOrder?.status !== PayOrderStatus.EXPIRED) {
             setRoute(ROUTES.CONFIRMATION);
         }
-        else if (payOrder?.status === PayOrderStatus.AWAITING_PAYMENT && payOrder.payment?.src) {
-            paymentState.setSelectedTokenOption(payOrder.payment.src);
+        else if (paymentMethod === PaymentMethod.Wallet &&
+            payOrder?.status === PayOrderStatus.AWAITING_PAYMENT &&
+            payOrder.payment?.src) {
+            paymentState.setSelectedCurrencyOption(payOrder.payment.src);
             setRoute(ROUTES.PAY_WITH_TOKEN);
         }
+        else if (paymentMethod === PaymentMethod.DepositAddress &&
+            payOrder?.status === PayOrderStatus.AWAITING_PAYMENT &&
+            payOrder.payment?.src) {
+            const chainId = payOrder.payment.src.chain_id;
+            const [chainMetadata, token] = await Promise.all([getChainMetadata(chainId), getToken(payOrder.payment.src)]);
+            if (chainMetadata)
+                paymentState.setPayToAddressChain(chainMetadata);
+            if (token)
+                paymentState.setPayToAddressCurrency(token);
+            setRoute(ROUTES.PAY_TO_ADDRESS);
+        }
         else {
             setRoute(isConnected ? ROUTES.SELECT_TOKEN : ROUTES.SELECT_METHOD);
         }
     }, [account.isConnected, account.chainType, paymentState, setOpen]);
+    useEffect(() => {
+        if (payOrder?.status !== PayOrderStatus.PENDING &&
+            payOrder?.status !== PayOrderStatus.AWAITING_PAYMENT &&
+            payOrder?.status !== PayOrderStatus.EXPIRED) {
+            setRoute(ROUTES.CONFIRMATION);
+        }
+    }, [payOrder?.status]);
     const triggerResize = useCallback(() => onResize((prev) => prev + 1), []);
     const value = {
         theme: ckTheme,

package/dist/types/enums.d.ts

@@ -0,0 +1,4 @@
+export declare enum PaymentMethod {
+    Wallet = "payWithWallet",
+    DepositAddress = "payToAddress"
+}

package/dist/types/enums.js

@@ -0,0 +1,5 @@
+export var PaymentMethod;
+(function (PaymentMethod) {
+    PaymentMethod["Wallet"] = "payWithWallet";
+    PaymentMethod["DepositAddress"] = "payToAddress";
+})(PaymentMethod || (PaymentMethod = {}));

package/dist/types/payment-details.d.ts

@@ -0,0 +1,6 @@
+import type { Token } from "@coin-voyage/shared/common";
+export interface PaymentDetails extends Token {
+    depositAddress: string;
+    expirationS?: number;
+    amount?: string;
+}

package/dist/types/payment-details.js

@@ -0,0 +1 @@
+export {};

package/dist/types/route-config.d.ts

@@ -1,5 +1,9 @@
 import type React from "react";
 import type { ROUTES } from "./routes";
+import { Dispatch, SetStateAction } from "react";
+import { ChainType } from "../server";
+import { CurrencyAndQuoteID } from "./state";
+import { ChainMetadata, Token } from "@coin-voyage/shared/common";
 export interface RouteConfig {
     component: React.ReactNode;
     heading: string | ((ctx: HeadingContext) => string | undefined);
@@ -13,14 +17,16 @@ export interface HeadingContext {
     walletName: string | undefined;
     shouldUseQrcode: boolean;
     isWalletConnectConnector: boolean;
-    selectedTokenOption: {
+    selectedCurrencyOption: {
         ticker: string;
         chain_id: number;
     } | undefined;
 }
 export interface BackNavigationActions {
-    setRoute: (route: ROUTES) => void;
-    setConnectorChainType: (type: undefined) => void;
-    setSelectedTokenOption: (option: undefined) => void;
+    setRoute: Dispatch<SetStateAction<ROUTES>>;
+    setConnectorChainType: Dispatch<SetStateAction<ChainType | undefined>>;
+    setPayToAddressChain: Dispatch<SetStateAction<ChainMetadata | undefined>>;
+    setPayToAddressCurrency: Dispatch<SetStateAction<Token | undefined>>;
+    setSelectedCurrencyOption: (option: CurrencyAndQuoteID | undefined) => void;
     clearUserSelection: () => void;
 }

package/dist/types/routes.d.ts

@@ -1,5 +1,9 @@
 export declare enum ROUTES {
     SELECT_METHOD = "paySelectMethod",
+    SELECT_PAY_TO_ADDRESS_CHAIN = "paySelectPayToAddressChain",
+    SELECT_PAY_TO_ADDRESS_TOKEN = "paySelectPayToAddressToken",
+    PAY_TO_ADDRESS = "payToAddress",
+    SELECT_CHAIN = "paySelectChain",
     SELECT_TOKEN = "paySelectToken",
     PAY_WITH_TOKEN = "payPayWithToken",
     CONFIRMATION = "payConfirmation",

package/dist/types/routes.js

@@ -1,6 +1,10 @@
 export var ROUTES;
 (function (ROUTES) {
     ROUTES["SELECT_METHOD"] = "paySelectMethod";
+    ROUTES["SELECT_PAY_TO_ADDRESS_CHAIN"] = "paySelectPayToAddressChain";
+    ROUTES["SELECT_PAY_TO_ADDRESS_TOKEN"] = "paySelectPayToAddressToken";
+    ROUTES["PAY_TO_ADDRESS"] = "payToAddress";
+    ROUTES["SELECT_CHAIN"] = "paySelectChain";
     ROUTES["SELECT_TOKEN"] = "paySelectToken";
     ROUTES["PAY_WITH_TOKEN"] = "payPayWithToken";
     ROUTES["CONFIRMATION"] = "payConfirmation";

package/dist/types/state.d.ts

@@ -1,4 +1,4 @@
-import type { ChainType } from "@coin-voyage/shared/types";
+import type { ChainType, CurrencyWithAmount } from "@coin-voyage/shared/types";
 import { ROUTES } from "./routes";
 export type InitState = {
     payOrderId: string;
@@ -7,3 +7,6 @@ export type InitState = {
     walletId: string;
     route?: ROUTES;
 };
+export type CurrencyAndQuoteID = CurrencyWithAmount & {
+    quoteId?: string;
+};

package/dist/types.d.ts

@@ -119,6 +119,11 @@ export type PayKitOptions = {
     bufferPolyfill?: boolean;
     /** Blur the background when the modal is open */
     overlayBlur?: number;
+    /** Optimistically confirms the Order if the user executed the transaction and the transaction is validated on the blockchain. This
+     * allows for a faster and smoother user experience, but can lead to false positives if the transaction execution fails (e.g. due to a chain reorg, or tx cancellation).
+     * Not allowed for deposits. Defaults to true.
+     **/
+    optimisticConfirmation?: boolean;
 };
 /** Modal UI options, set on the pay button triggering that modal. */
 export type PayModalOptions = {

package/dist/utils/index.d.ts

@@ -8,4 +8,5 @@ export declare const isCoinbaseWalletConnector: (connectorId?: string) => connec
 export declare const isLedgerConnector: (connectorId?: string) => connectorId is "ledger";
 export declare const isSafeConnector: (connectorId?: string) => connectorId is "safe";
 export declare const isInjectedConnector: (connectorId?: string) => connectorId is "injected";
+export declare const formatTime: (sec: number) => string;
 export {};

package/dist/utils/index.js

@@ -20,3 +20,8 @@ export const isCoinbaseWalletConnector = (connectorId) => connectorId === "coinb
 export const isLedgerConnector = (connectorId) => connectorId === "ledger";
 export const isSafeConnector = (connectorId) => connectorId === "safe";
 export const isInjectedConnector = (connectorId) => connectorId === "injected";
+export const formatTime = (sec) => {
+    const m = `${Math.floor(sec / 60)}`.padStart(2, "0");
+    const s = `${sec % 60}`.padStart(2, "0");
+    return `${m}:${s}`;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/paykit",
   "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
-  "version": "2.2.7-beta.2",
+  "version": "2.2.7-beta.3",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -61,8 +61,8 @@
     "react-use-measure": "^2.1.1",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/shared": "2.2.5-beta.3",
-    "@coin-voyage/crypto": "2.2.2"
+    "@coin-voyage/crypto": "2.2.2",
+    "@coin-voyage/shared": "2.2.5-beta.5"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",

package/dist/components/Pages/SelectMethod/styles.d.ts

@@ -1,9 +0,0 @@
-export declare const InfoBox: any;
-export declare const InfoBoxButtons: any;
-export declare const LearnMoreContainer: any;
-export declare const LearnMoreButton: any;
-export declare const ConnectorsContainer: any;
-export declare const ConnectorButton: any;
-export declare const ConnectorRecentlyUsed: any;
-export declare const ConnectorLabel: any;
-export declare const ConnectorIcon: any;

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

@@ -1,237 +0,0 @@
-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;
-  overflow: hidden;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    border-radius: 27.5%;
-    width: 100%;
-    height: 100%;
-  }
-`;