@funkit/connect 3.2.1 → 3.4.0

package/dist/providers/FunkitConfigContext.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FunkitPrioritizedLoginType, FunkitSocialLoginMethod } from '../consts/funkit';
 export interface FunkitTextCustomizationsConfig {
     brokerageOrExchange: string;
@@ -5,11 +6,23 @@ export interface FunkitTextCustomizationsConfig {
     accountBalance: string;
     transferCrypto: string;
     selectAccount: string;
+    transferTokens: string;
+    confirmationScreen: {
+        receiveAmountLabel: string;
+    };
+}
+export interface FunkitUiCustomRecipientConfig {
+    /** What icon (15x15) to show in the `destination` row - defaults to user wallet icon  */
+    destinationIcon?: ReactNode;
+    /** What text to show in the `destination` row - defaults to formatted destination wallet address  */
+    destinationText?: string;
 }
 export interface FunkitUiCustomizationsConfig {
     confirmationScreen?: {
         /** Whether to show the amount of tokens below the USD equivalent - defaults to true */
         showTokenAmount?: boolean;
+        /** Configure UI when `customRecipient` is specified in the config  */
+        customRecipientConfig?: FunkitUiCustomRecipientConfig;
     };
     inputAmountScreen?: {
         /** Whether to allow entering an amount of tokens, rather than only USD - defaults to true */

package/dist/providers/FunkitFlagsProvider.d.ts

@@ -6,7 +6,7 @@ export type FlagValue<K extends FlagKey> = InferFlagType<(typeof offlineConfig)[
 export type FlagValues = {
     [K in FlagKey]?: FlagValue<K>;
 };
-export type GetFlagFunction = <K extends FlagKey>(flagKey: K, fallback: FlagValue<K>) => FlagValue<K>;
+export type GetFlagFunction = <K extends FlagKey>(flagKey: K, fallback?: FlagValue<K>) => FlagValue<K>;
 export interface FunkitFlagsContextValue {
     /** Error fetching flag config from server */
     error: Error | null;
@@ -22,4 +22,4 @@ export declare function FunkitFlagsProvider({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
 export declare function useFlags(): FunkitFlagsContextValue;
-export declare function useFlag<K extends FlagKey>(flagKey: K, fallback: FlagValue<K>): FlagValue<K>;
+export declare function useFlag<K extends FlagKey>(flagKey: K, fallback?: FlagValue<K>): FlagValue<K>;

package/dist/providers/FunkitMoonpayProvider.d.ts

@@ -20,6 +20,6 @@ export interface UserIpInfoFromMoonpay {
 export declare const geoCheckInProgressProps: FunButtonProps;
 export declare function useFunkitUserIp(): {
     isLoadingGeoCheck: boolean;
-    isUserBlockedForCheckout: boolean;
+    isUserGeoblocked: boolean;
     userIpInfo: UserIpInfoFromMoonpay | undefined;
 };

package/dist/providers/FunkitThemeProvider.d.ts

@@ -11,6 +11,8 @@ export declare const defaultTheme: {
         connectButtonTextError: string;
         connectionIndicator: string;
         error: string;
+        errorBackground: string;
+        errorBorder: string;
         generalBorder: string;
         generalBorderDim: string;
         menuItemBackground: string;
@@ -28,6 +30,9 @@ export declare const defaultTheme: {
         offBackground: string;
         hoverState: string;
         offBackgroundInverse: string;
+        lightStroke: string;
+        mediumStroke: string;
+        strokeColor: string;
         dydxSwitchActiveBackground: string;
         primaryText: string;
         secondaryText: string;
@@ -56,7 +61,6 @@ export declare const defaultTheme: {
         buttonBackground: string;
         buttonBackgroundHover: string;
         buttonBackgroundDisabled: string;
-        buttonText: string;
         buttonStroke: string;
         buttonTextSecondaryDisabled: string;
         buttonTextSecondary: string;
@@ -163,6 +167,8 @@ export declare const useActiveTheme: () => {
             connectButtonTextError: string;
             connectionIndicator: string;
             error: string;
+            errorBackground: string;
+            errorBorder: string;
             generalBorder: string;
             generalBorderDim: string;
             menuItemBackground: string;
@@ -180,6 +186,9 @@ export declare const useActiveTheme: () => {
             offBackground: string;
             hoverState: string;
             offBackgroundInverse: string;
+            lightStroke: string;
+            mediumStroke: string;
+            strokeColor: string;
             dydxSwitchActiveBackground: string;
             primaryText: string;
             secondaryText: string;
@@ -208,7 +217,6 @@ export declare const useActiveTheme: () => {
             buttonBackground: string;
             buttonBackgroundHover: string;
             buttonBackgroundDisabled: string;
-            buttonText: string;
             buttonStroke: string;
             buttonTextSecondaryDisabled: string;
             buttonTextSecondary: string;
@@ -303,6 +311,8 @@ export declare const useActiveTheme: () => {
             connectButtonTextError: string;
             connectionIndicator: string;
             error: string;
+            errorBackground: string;
+            errorBorder: string;
             generalBorder: string;
             generalBorderDim: string;
             menuItemBackground: string;
@@ -320,6 +330,9 @@ export declare const useActiveTheme: () => {
             offBackground: string;
             hoverState: string;
             offBackgroundInverse: string;
+            lightStroke: string;
+            mediumStroke: string;
+            strokeColor: string;
             dydxSwitchActiveBackground: string;
             primaryText: string;
             secondaryText: string;
@@ -348,7 +361,6 @@ export declare const useActiveTheme: () => {
             buttonBackground: string;
             buttonBackgroundHover: string;
             buttonBackgroundDisabled: string;
-            buttonText: string;
             buttonStroke: string;
             buttonTextSecondaryDisabled: string;
             buttonTextSecondary: string;
@@ -442,6 +454,8 @@ export declare const useActiveTheme: () => {
             connectButtonTextError: string;
             connectionIndicator: string;
             error: string;
+            errorBackground: string;
+            errorBorder: string;
             generalBorder: string;
             generalBorderDim: string;
             menuItemBackground: string;
@@ -459,6 +473,9 @@ export declare const useActiveTheme: () => {
             offBackground: string;
             hoverState: string;
             offBackgroundInverse: string;
+            lightStroke: string;
+            mediumStroke: string;
+            strokeColor: string;
             dydxSwitchActiveBackground: string;
             primaryText: string;
             secondaryText: string;
@@ -487,7 +504,6 @@ export declare const useActiveTheme: () => {
             buttonBackground: string;
             buttonBackgroundHover: string;
             buttonBackgroundDisabled: string;
-            buttonText: string;
             buttonStroke: string;
             buttonTextSecondaryDisabled: string;
             buttonTextSecondary: string;

package/dist/providers/GeneralWalletProvider.d.ts

@@ -1,15 +1,14 @@
 import { AssetBalanceInfo } from '@funkit/api-base';
 import { Auth, FunWallet } from '@funkit/core';
 import React from 'react';
+import { Address } from 'viem';
 import { FunkitUserInfo } from '../consts/funkit';
-import { PaymentMethodAccountInfo } from '../consts/payment';
 export interface KnownAssetBalanceInfo extends AssetBalanceInfo {
     price: number;
     totalUsdValue: number;
 }
 interface GeneralWalletContextProps {
-    walletAddress: string;
-    accountBalancePaymentDefaultInfo: PaymentMethodAccountInfo | null;
+    walletAddress: Address | '';
     isUserLoggedIn: boolean;
     isWeb2Login: boolean;
     isWeb3Login: boolean;
@@ -25,7 +24,7 @@ export declare const useGeneralWallet: () => GeneralWalletContextProps;
  * Replacement for wagmi's `useAccount`
  */
 export declare const useFunkitAccount: () => {
-    account: string;
+    account: "" | `0x${string}`;
     isConnected: boolean;
     isWeb2Login: boolean;
     isWeb3Login: boolean;
@@ -39,12 +38,12 @@ export declare const useFunkitAccount: () => {
     isDisconnected: true;
     status: "disconnected";
 } | {
-    account: string;
+    account: "" | `0x${string}`;
     isConnected: boolean;
     isWeb2Login: boolean;
     isWeb3Login: boolean;
-    address: import("viem").Address;
-    addresses: readonly [import("viem").Address, ...import("viem").Address[]];
+    address: Address;
+    addresses: readonly [Address, ...Address[]];
     chain: import("viem").Chain | undefined;
     chainId: number;
     connector: import("wagmi").Connector;
@@ -53,12 +52,12 @@ export declare const useFunkitAccount: () => {
     isReconnecting: false;
     status: "connected";
 } | {
-    account: string;
+    account: "" | `0x${string}`;
     isConnected: boolean;
     isWeb2Login: boolean;
     isWeb3Login: boolean;
-    address: import("viem").Address | undefined;
-    addresses: readonly import("viem").Address[] | undefined;
+    address: Address | undefined;
+    addresses: readonly Address[] | undefined;
     chain: import("viem").Chain | undefined;
     chainId: number | undefined;
     connector: import("wagmi").Connector | undefined;
@@ -67,12 +66,12 @@ export declare const useFunkitAccount: () => {
     isReconnecting: true;
     status: "reconnecting";
 } | {
-    account: string;
+    account: "" | `0x${string}`;
     isConnected: boolean;
     isWeb2Login: boolean;
     isWeb3Login: boolean;
-    address: import("viem").Address | undefined;
-    addresses: readonly import("viem").Address[] | undefined;
+    address: Address | undefined;
+    addresses: readonly Address[] | undefined;
     chain: import("viem").Chain | undefined;
     chainId: number | undefined;
     connector: import("wagmi").Connector | undefined;

package/dist/providers/ModalContext.d.ts

@@ -23,7 +23,7 @@ export declare function useWalletConnectOpenState(): {
 };
 export declare function useConnectModal(): {
     connectModalOpen: boolean;
-    openConnectModal: (() => void) | undefined;
+    openConnectModal: ((walletsOnly?: boolean) => void) | undefined;
 };
 export declare function useFunCheckoutModal(): {
     funCheckoutModalOpen: boolean;

package/dist/providers/useAccountBalancePaymentDefaultInfo.d.ts

@@ -0,0 +1,4 @@
+import { PaymentMethodAccountInfo } from '../domains/paymentMethods';
+export declare function useAccountBalancePaymentDefaultInfo(): {
+    accountBalancePaymentDefaultInfo: PaymentMethodAccountInfo;
+};

package/dist/themes/baseTheme.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "../chunk-HFT6OV3T.js";
+} from "../chunk-BY224HGT.js";
 export {
   baseTheme
 };

package/dist/themes/darkTheme.d.ts

@@ -11,6 +11,8 @@ export declare const darkTheme: {
             connectButtonTextError: string;
             connectionIndicator: string;
             error: string;
+            errorBackground: string;
+            errorBorder: string;
             generalBorder: string;
             generalBorderDim: string;
             menuItemBackground: string;
@@ -28,6 +30,9 @@ export declare const darkTheme: {
             offBackground: string;
             hoverState: string;
             offBackgroundInverse: string;
+            lightStroke: string;
+            mediumStroke: string;
+            strokeColor: string;
             dydxSwitchActiveBackground: string;
             primaryText: string;
             secondaryText: string;
@@ -56,7 +61,6 @@ export declare const darkTheme: {
             buttonBackground: string;
             buttonBackgroundHover: string;
             buttonBackgroundDisabled: string;
-            buttonText: string;
             buttonStroke: string;
             buttonTextSecondaryDisabled: string;
             buttonTextSecondary: string;

package/dist/themes/darkTheme.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   darkTheme
-} from "../chunk-EUSK63OY.js";
-import "../chunk-HFT6OV3T.js";
+} from "../chunk-XWW5QOD4.js";
+import "../chunk-BY224HGT.js";
 export {
   darkTheme
 };

package/dist/themes/lightTheme.d.ts

@@ -11,6 +11,8 @@ export declare const lightTheme: {
             connectButtonTextError: string;
             connectionIndicator: string;
             error: string;
+            errorBackground: string;
+            errorBorder: string;
             generalBorder: string;
             generalBorderDim: string;
             menuItemBackground: string;
@@ -28,6 +30,9 @@ export declare const lightTheme: {
             offBackground: string;
             hoverState: string;
             offBackgroundInverse: string;
+            lightStroke: string;
+            mediumStroke: string;
+            strokeColor: string;
             dydxSwitchActiveBackground: string;
             primaryText: string;
             secondaryText: string;
@@ -56,7 +61,6 @@ export declare const lightTheme: {
             buttonBackground: string;
             buttonBackgroundHover: string;
             buttonBackgroundDisabled: string;
-            buttonText: string;
             buttonStroke: string;
             buttonTextSecondaryDisabled: string;
             buttonTextSecondary: string;

package/dist/themes/lightTheme.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   lightTheme
-} from "../chunk-76VEFMWE.js";
-import "../chunk-HFT6OV3T.js";
+} from "../chunk-77C753LI.js";
+import "../chunk-BY224HGT.js";
 export {
   lightTheme
 };

package/dist/utils/assets.d.ts

@@ -1,4 +1,4 @@
-import { PaymentMethod } from '../consts/payment';
+import { PaymentMethod } from '../domains/paymentMethods';
 import { FunkitActiveCheckoutItem, FunkitCheckoutConfig } from '../providers/FunkitCheckoutContext';
 import { FlagValues } from '../providers/FunkitFlagsProvider';
 export declare const getNormalizedTokenBalance: (tokenBalance: bigint | number, decimals: number) => number;

package/dist/utils/checkout.d.ts

@@ -1,8 +1,8 @@
 import { CheckoutHistoryItem, CheckoutState } from '@funkit/api-base';
 import { Address, Hex } from 'viem';
 import { UseConfigReturnType } from 'wagmi';
-import { PaymentMethod } from '../consts/payment';
-import { FunkitActiveCheckoutItem, FunkitCheckoutConfig } from '../providers/FunkitCheckoutContext';
+import { PaymentMethod } from '../domains/paymentMethods';
+import { FunkitActiveCheckoutItem, FunkitCheckoutConfig, FunkitCheckoutQuoteResult, HistoricalCheckoutItem, ServerCheckoutConfig } from '../providers/FunkitCheckoutContext';
 export declare const MOONPAY_TIME_ESTIMATE_MS = 120000;
 export declare const MESH_TIME_ESTIMATE_MS = 300000;
 export declare const DUMMY_TRANSFER_PARAMS: {
@@ -18,10 +18,12 @@ export declare function validateCheckoutConfig(config: Partial<FunkitCheckoutCon
     isValid: boolean;
     message: string;
 };
-export declare const hasSufficientBalance: (wagmiConfig: UseConfigReturnType, walletAddress: string, tokenAddress: string, tokenChainId: string, tokenAddressAmount: number) => Promise<{
+export declare const hasSufficientBalance: (wagmiConfig: UseConfigReturnType, walletAddress: string, tokenAddress: string, tokenChainId: string, requiredAssetAmount: number) => Promise<{
+    balance: number;
     result: boolean;
     tokenTicker: string;
 } | {
+    balance: number;
     result: boolean;
     tokenTicker: null;
 }>;
@@ -29,8 +31,13 @@ export declare const hasSufficientBalance: (wagmiConfig: UseConfigReturnType, wa
  * Checks whether user has sufficient targetAsset + targetAssetAmount in their wallet
  */
 export declare const testAutoExecutionDuringCheckout: (config: FunkitCheckoutConfig, walletAddress: string, wagmiConfig: UseConfigReturnType) => Promise<{
+    balance: number;
     result: boolean;
     tokenTicker: string;
+} | {
+    balance: number;
+    result: boolean;
+    tokenTicker: null;
 } | {
     result: boolean;
     tokenTicker: null;
@@ -109,7 +116,7 @@ export declare function categorizeCheckoutHistories(checkoutHistoryList: Checkou
 export declare function getCheckoutStateStepNumber(state: CheckoutState): 0 | 1 | 3 | 2;
 export declare function formatTokenAmountForMoonpay(amount: number, mpCurrencyCode: string): string;
 export declare function hackTimeEstimationForImportantCustomer(originalTimeEstimation: number, paymentMethod: PaymentMethod, apiKey: string): any;
-export declare function getEstimateEndTimeInfo(createdTimeMs: number, checkoutItem: FunkitActiveCheckoutItem, apiKey: string): {
+export declare function getEstimateEndTimeInfo(createdTimeMs: number, checkoutItem: FunkitActiveCheckoutItem | HistoricalCheckoutItem, apiKey: string): {
     estimatedEndTimeMs: number;
     estimatedEndTimeFromNowMs: number;
     isExceededEstimation: boolean;
@@ -121,4 +128,16 @@ export declare function getEstimateEndTimeInfo(createdTimeMs: number, checkoutIt
  * Basic buy checkouts: Display the targetAssetAmount with the targetAssetTicker.
  * - e.g. "0.12345 ETH"
  */
-export declare function getCheckoutItemDisplay(checkoutConfig: FunkitCheckoutConfig, hideAmount?: boolean): string;
+export declare function getCheckoutItemDisplay(checkoutConfig: FunkitCheckoutConfig | ServerCheckoutConfig, hideAmount?: boolean): string;
+/**
+ * Given the result of a quote, estimate the maximum targetAssetAmount for which the checkout should succeed.
+ * The result is then reduced by 1% to further reduce the risk of insufficient funds.
+ *
+ * NOTE: This assumes fees are (roughly) constant, at least when the target amount does not change much.
+ * Only the API could give us a true number here.
+ *
+ * @param sourceAssetBalance - Total source asset balance
+ * @param config - Checkout config
+ * @param quoteResult - Failed quote results
+ */
+export declare function getMaxTargetAssetAmountEstimate(sourceAssetBalance: number, config: FunkitCheckoutConfig, quoteResult: FunkitCheckoutQuoteResult): number;

package/dist/utils/deposit.d.ts

@@ -1,4 +1,12 @@
 export declare const MINIMUM_MOONPAY_DEPOSIT_AMOUNT_USD = 35;
 export declare const MAXIMUM_MOONPAY_DEPOSIT_AMOUNT_USD = 10000;
-export declare function isAmountInvalidForMoonpay(amountUsd: number): boolean;
-export declare function generateInsufficientAmountForMoonpayError(isShortened: boolean): string;
+export declare function checkAmountForMoonpay(amountUsd: number): {
+    readonly isInvalid: true;
+    readonly message: "$35 minimum required for the selected payment method.";
+} | {
+    readonly isInvalid: true;
+    readonly message: "$10000 maximum exceeded for the selected payment method.";
+} | {
+    readonly isInvalid: false;
+    readonly message?: undefined;
+};

package/dist/utils/flags/config.d.ts

@@ -1,4 +1,4 @@
-import type { BooleanFlagConfig, StringFlagConfig } from './types';
+import { BooleanFlagConfig, StringFlagConfig } from './types';
 /**
  * Remember that these values show up in our logs
  * Make sure the enum values are unique
@@ -7,22 +7,25 @@ import type { BooleanFlagConfig, StringFlagConfig } from './types';
 export declare enum FlagKey {
     /** Whether mantle assets can be used as source asset for payment for any checkout */
     DisableMantleSourceAssets = "disable_mantle_source_assets",
-    /** Whether zksync assets can be used as source asset for payment in a mantle checkout  */
-    DisableZkSyncSourceAssetsForMantleCheckouts = "disable_zksync_source_assets_for_mantle_checkouts",
-    /** Whether zksync assets can be used as source asset for payment in a dydx checkout  */
-    DisableZkSyncSourceAssetsForDydxCheckouts = "disable_zksync_source_assets_for_dydx_checkouts",
+    /** Whether zksync assets can be used as source asset for payment for any checkout */
+    DisableZkSyncSourceAssets = "disable_zksync_source_assets",
     /** Which exchanges to show in the exchange selection screen */
     SupportedExchanges = "supported_exchanges",
     /** Which countries should be blocked for Funkit Checkout. Reference Alpha-2 Code format https://www.iban.com/country-codes. */
     BlockedCountries = "blocked_countries",
     /** Whether to show the [Powered by Fun.xyz] tagline at the bottom of the checkout modal. */
-    ShowPoweredTagline = "show_powered_tagline"
+    ShowPoweredTagline = "show_powered_tagline",
+    /** Whether to enable Token Transfer as a payment method. */
+    EnableTokenTransfer = "enable_token_transfer",
+    /** Token Transfer payment method accepted source chain and assets */
+    TokenTransferSourceChainsAndAssets = "token_transfer_source_chains_and_assets"
 }
 export declare const flagConfig: {
     [FlagKey.DisableMantleSourceAssets]: BooleanFlagConfig;
-    [FlagKey.DisableZkSyncSourceAssetsForMantleCheckouts]: BooleanFlagConfig;
-    [FlagKey.DisableZkSyncSourceAssetsForDydxCheckouts]: BooleanFlagConfig;
+    [FlagKey.DisableZkSyncSourceAssets]: BooleanFlagConfig;
     [FlagKey.SupportedExchanges]: StringFlagConfig;
     [FlagKey.BlockedCountries]: StringFlagConfig;
     [FlagKey.ShowPoweredTagline]: BooleanFlagConfig;
+    [FlagKey.EnableTokenTransfer]: BooleanFlagConfig;
+    [FlagKey.TokenTransferSourceChainsAndAssets]: StringFlagConfig;
 };

package/dist/utils/formatNumber.d.ts

@@ -36,6 +36,7 @@ export declare function formatCurrencyAndStringify(amount: number,
 options?: FormatNumberOptions, 
 /** Options to pass toLocaleString */
 numberFormatOptions?: Intl.NumberFormatOptions): string;
+export declare function formatPercent(percent: number, decimalPlaces?: number): string;
 /**
  * Formats a cryptocurrency amount as a string for display.
  *

package/dist/utils/formatTimestamp.d.ts

@@ -11,14 +11,14 @@ interface FormatTimeOption extends FormatDateOption {
 export declare function formatTimestamp(date: Date, opt?: FormatTimeOption): string;
 /**
  * Formats seconds to mins and seconds string
- * - seconds = 10, output = '10s'
- * - seconds = 20.3, output = '21s'
- * - seconds = 20.3, specifyUnderMinute=true, output = '< 1min'
- * - seconds = 60, output = '1min'
- * - seconds = 61, output = '1min 1s'
- * - seconds = 300, output = '5mins'
- * - seconds = 320, output = '5mins 20s'
- * - seconds = 320, omitSeconds=true, output = '6mins'
+ * - seconds = 10, output = '10 s'
+ * - seconds = 20.3, output = '21 s'
+ * - seconds = 20.3, specifyUnderMinute=true, output = '< 1 min'
+ * - seconds = 60, output = '1 min'
+ * - seconds = 61, output = '1 min 1 s'
+ * - seconds = 300, output = '5 mins'
+ * - seconds = 320, output = '5 mins 20 s'
+ * - seconds = 320, omitSeconds=true, output = '6 mins'
  */
 export declare function formatSecondsToReadableForm(seconds: number, specifyUnderMinute?: boolean, omitSeconds?: boolean): string;
 export declare function formatSecondsToCountdownForm(seconds: number): string;

package/dist/utils/payment.d.ts

@@ -1,4 +1,4 @@
-import { PaymentMethodInfo } from '../consts/payment';
+import { PaymentMethodInfo } from '../domains/paymentMethods';
 /**
  * Generate a string for backend to indicate the source of a checkout funds
  */