@funkit/connect 5.5.11 → 5.5.13-next.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @funkit/connect
 
+## 5.5.13-next.0
+
+### Patch Changes
+
+- d1133df: support withdrawal
+- Updated dependencies [d1133df]
+  - @funkit/api-base@1.9.5-next.0
+  - @funkit/chains@0.3.2-next.0
+  - @funkit/core@2.3.27-next.0
+  - @funkit/fun-relay@0.1.9-next.0
+  - @funkit/utils@1.1.4-next.0
+  - @funkit/wagmi-tools@3.0.49-next.0
+
+## 5.5.12
+
+### Patch Changes
+
+- d6d4de5: feat: katana custom bridge alert
+- c4907c2: feat(connect): gracefully handle empty Meld quotes
+
 ## 5.5.11
 
 ### Patch Changes

package/dist/components/Dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type BoxProps } from '../Box/Box';
-export { CHECKOUT_MODAL_BOTTOM_BAR_ID, CHECKOUT_MODAL_TITLE_COUNTDOWN_ID, useBottomSectionRef, useTitleCountdownRef, } from './hooks';
+export { CHECKOUT_MODAL_TITLE_COUNTDOWN_ID, MODAL_BOTTOM_BAR_IDS, useBottomSectionRef, useTitleCountdownRef, } from './hooks';
 interface DialogProps {
     open: boolean;
     onClose: () => void;

package/dist/components/Dialog/hooks.d.ts

@@ -1,4 +1,9 @@
-export declare const CHECKOUT_MODAL_BOTTOM_BAR_ID = "checkout-modal-bottom-bar";
-export declare function useBottomSectionRef(): HTMLElement | null;
+export declare const MODAL_BOTTOM_BAR_IDS: {
+    readonly checkout: "checkout-modal-bottom-bar";
+    readonly withdrawal: "withdrawal-modal-bottom-bar";
+};
+type ModalBottomBarIdType = keyof typeof MODAL_BOTTOM_BAR_IDS;
+export declare function useBottomSectionRef(modalBottomBarIdType?: ModalBottomBarIdType): HTMLElement | null;
 export declare const CHECKOUT_MODAL_TITLE_COUNTDOWN_ID = "checkout-modal-title-countdown";
 export declare function useTitleCountdownRef(): HTMLElement | null;
+export {};

package/dist/components/Dropdown/BaseDropdown.css.d.ts

@@ -1,2 +1,3 @@
 export declare const BORDER_RADIUS = "dropdown";
+export declare const scrollableDropdownStyles: string;
 export declare const baseDropdownItemWrapperStyles: string;

package/dist/components/Dropdown/BaseDropdown.d.ts

@@ -29,6 +29,12 @@ export interface BaseDropdownProps {
     size?: BaseActiveDropdownItemProps['size'];
     isLoading?: boolean;
     label?: string;
+    /**
+     * If provided, the dropdown will be scrollable and the max height will be set to the provided value.
+     * This is useful for dropdowns that have a lot of options and normally would be too tall to fit in the modal and overflow beyond the modal is not supported right now.
+     * This values should be set so that the last dropdown item is partially visible to indicate that there are more options.
+     */
+    maxDropdownHeight?: number;
 }
-declare function BaseDropdown({ activeItemProps, value, options, onOptionSelected, onOpen, renderDropdownOption, searchableOptions, searchPlaceholder, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, openDropdownFullWidth, isLoading, preloadIconUrls, horizontalIconGap, openDropdownBackgroundColor, size, label, }: BaseDropdownProps): React.JSX.Element;
+declare function BaseDropdown({ activeItemProps, value, options, onOptionSelected, onOpen, renderDropdownOption, searchableOptions, searchPlaceholder, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, openDropdownFullWidth, isLoading, preloadIconUrls, horizontalIconGap, openDropdownBackgroundColor, size, label, maxDropdownHeight, }: BaseDropdownProps): React.JSX.Element;
 export default BaseDropdown;

package/dist/components/Dropdown/ChainDropdown.d.ts

@@ -17,6 +17,8 @@ interface ChainDropdownProps {
     openDropdownBackgroundColor?: BaseDropdownProps['openDropdownBackgroundColor'];
     size?: BaseActiveDropdownItemProps['size'];
     isLoading?: BaseDropdownProps['isLoading'];
+    alwaysOpenToTop?: BaseDropdownProps['alwaysOpenToTop'];
+    maxDropdownHeight?: BaseDropdownProps['maxDropdownHeight'];
 }
-export declare const ChainDropdown: ({ assets, chainIds: chains, selectedChainId: propSelectedChainId, allowUnselect, onChainSelected, activeItemProps, size, openDropdownBackgroundColor, isLoading, }: ChainDropdownProps) => React.JSX.Element;
+export declare const ChainDropdown: ({ assets, chainIds: chains, selectedChainId: propSelectedChainId, allowUnselect, onChainSelected, activeItemProps, size, openDropdownBackgroundColor, isLoading, alwaysOpenToTop, maxDropdownHeight, }: ChainDropdownProps) => React.JSX.Element;
 export {};

package/dist/components/Dropdown/TokenAndChainDropdown.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { TokenTransferSourceChainsAndAssets } from '~/modals/CheckoutModal/TransferToken/TransferToken';
+import type { BaseDropdownProps } from './BaseDropdown';
+interface TokenAndChainDropdownProps {
+    isLoading: boolean;
+    selectedToken: string;
+    selectedChainId: number;
+    assets: TokenTransferSourceChainsAndAssets;
+    /**
+     * Callback fired after token selection
+     */
+    onTokenSelected: (token: string, chainId?: number, autoUpdate?: boolean) => void;
+    /**
+     * Callback fired after chain selection
+     */
+    onChainSelected: (chainId?: number, autoUpdate?: boolean) => void;
+    tokenLabel?: string;
+    chainLabel?: string;
+    alwaysOpenToTop?: boolean;
+    maxTokenDropdownHeight?: BaseDropdownProps['maxDropdownHeight'];
+    maxChainDropdownHeight?: BaseDropdownProps['maxDropdownHeight'];
+}
+/** Combines together chain and token dropdowns */
+export declare const TokenAndChainDropdown: ({ isLoading, selectedToken, selectedChainId, assets, onTokenSelected, onChainSelected, tokenLabel, chainLabel, alwaysOpenToTop, maxTokenDropdownHeight, maxChainDropdownHeight, }: TokenAndChainDropdownProps) => React.JSX.Element;
+export {};

package/dist/components/Dropdown/TokenDropdown.d.ts

@@ -11,6 +11,8 @@ interface TokenDropdownProps {
     autoUpdate?: boolean) => void;
     selectedToken?: string;
     isLoading?: BaseDropdownProps['isLoading'];
+    alwaysOpenToTop?: BaseDropdownProps['alwaysOpenToTop'];
+    maxDropdownHeight?: BaseDropdownProps['maxDropdownHeight'];
 }
-export declare const TokenDropdown: ({ assets, selectedChainId, selectedToken, onTokenSelected, isLoading, }: TokenDropdownProps) => React.JSX.Element;
+export declare const TokenDropdown: ({ assets, selectedChainId, selectedToken, onTokenSelected, isLoading, alwaysOpenToTop, maxDropdownHeight, }: TokenDropdownProps) => React.JSX.Element;
 export {};

package/dist/components/FunButton/FunButton.d.ts

@@ -1,6 +1,6 @@
 import React, { type MouseEventHandler } from 'react';
 import { type BoxProps } from '../Box/Box';
-export type FunButtonTypes = 'primary' | 'secondary' | 'tertiary';
+export type FunButtonTypes = 'primary' | 'secondary' | 'tertiary' | 'tertiary-small';
 export interface FunButtonProps {
     id?: string;
     title: string;

package/dist/components/FunInput/FunInput.d.ts

@@ -1,6 +1,6 @@
-import React, { type HTMLInputTypeAttribute, type ReactNode } from 'react';
+import React, { type ChangeEvent, type HTMLInputTypeAttribute, type ReactNode } from 'react';
 import { type BoxProps } from '../Box/Box';
-export interface FunInputProps<T = HTMLInputElement> {
+export interface FunInputProps<T = HTMLInputElement | HTMLTextAreaElement> {
     prefix?: ReactNode;
     suffix?: ReactNode;
     prefixIcon?: 'SearchIcon' | '$';
@@ -8,10 +8,12 @@ export interface FunInputProps<T = HTMLInputElement> {
     value: string | number | readonly string[] | undefined;
     label?: string;
     onChange: (value: React.ChangeEvent<T>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<T>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onKeySubmit?: () => void;
     onPaste?: (e: React.ClipboardEvent<T>) => void;
     onMouseDown?: (e: React.MouseEvent<T>) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
     inputStyle?: React.CSSProperties;
     inputProps?: React.HTMLProps<T> & {
         type?: HTMLInputTypeAttribute;
@@ -25,5 +27,8 @@ export interface FunInputProps<T = HTMLInputElement> {
     overrideBackground?: BoxProps['background'];
     borderRadius?: BoxProps['borderRadius'];
     isLoading?: boolean;
+    /** Allow multiline input. Defaults to false. This option replaces the internal `input` element with a `textarea` element. */
+    allowMultiline?: boolean;
 }
-export declare const FunInput: React.ForwardRefExoticComponent<FunInputProps<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export type FunInputChangeEvent = ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
+export declare const FunInput: React.ForwardRefExoticComponent<FunInputProps<HTMLTextAreaElement | HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/FunTransactionSummary/PaymentFeesSummary.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
+import type { CheckoutFees } from '~/domains/fees';
 import type { FunkitCheckoutQuoteResult } from '~/domains/quote';
 interface PaymentFeesSummaryProps {
     isLoading: boolean;
     quote: FunkitCheckoutQuoteResult | null | undefined;
+    /** If set and quote is missing, display fees based on this data  */
+    fallbackFees?: CheckoutFees;
+    showWithdrawalBreakdown?: boolean;
 }
-export declare function PaymentFeesSummary({ isLoading, quote, }: PaymentFeesSummaryProps): React.JSX.Element;
+export declare function PaymentFeesSummary({ isLoading, quote, fallbackFees, showWithdrawalBreakdown, }: PaymentFeesSummaryProps): React.JSX.Element;
 export {};

package/dist/components/Icons/New/BlueCircularWalletIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const BlueCircularWalletIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/NewTokenDepositAlert/NewTokenDepositAlert.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TransferTokenDefault } from '~/modals/CheckoutModal/TransferToken/TransferToken';
+import type { TransferTokenDefault } from '~/hooks/useTokenChain';
 interface NewTokenDepositAlertProps {
     onClick: (value: TransferTokenDefault) => void;
 }

package/dist/components/Withdraw/WithdrawContent.d.ts

@@ -0,0 +1,17 @@
+import { type CheckoutQuoteResponse } from '@funkit/utils';
+import React from 'react';
+import type { Address } from 'viem';
+import type { FunkitWithdrawalConfig } from '~/providers/FunkitCheckoutContext';
+export type WithdrawalFormData = {
+    destinationAddress: Address;
+    amount: string;
+    token: string;
+    chainId: number;
+    quote: CheckoutQuoteResponse;
+};
+interface WithdrawContentProps {
+    onContinue: (withdrawal: WithdrawalFormData) => void;
+    config: FunkitWithdrawalConfig;
+}
+export declare const WithdrawContent: ({ onContinue, config, }: WithdrawContentProps) => React.JSX.Element;
+export {};

package/dist/components/Withdraw/WithdrawSuccess.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface WithdrawSuccessProps {
+    amount: number;
+    token: string;
+    tokenIconSrc: string;
+    chainId: string;
+    txHash: string;
+    bottomBarId: string;
+    onNewWithdrawal: () => void;
+    onClose: () => void;
+}
+export declare const WithdrawSuccess: ({ amount, token, tokenIconSrc, chainId, txHash, bottomBarId, onNewWithdrawal, onClose, }: WithdrawSuccessProps) => React.JSX.Element;
+export {};

package/dist/domains/quote.d.ts

@@ -10,7 +10,7 @@ export interface FunkitCheckoutQuoteResult extends Omit<ApiFunkitCheckoutQuoteRe
     finalSpreadUsd: string;
     finalFeesBreakdown: CheckoutFees;
 }
-export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, sponsorInitialTransferGasLimit: number, wagmiConfig: Config, directExecutionInfo: FunkitDirectExecutionInfo): Promise<CheckoutQuoteResponse>;
+export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, sponsorInitialTransferGasLimit: number, wagmiConfig: Config, directExecutionInfo: FunkitDirectExecutionInfo, senderAddress?: Address): Promise<CheckoutQuoteResponse>;
 export declare function getQuoteFinalEstimation(baseQuote: CheckoutQuoteResponse, checkoutItem: FunkitActiveCheckoutItem, newPaymentMethodInfo: PaymentMethodInfo, wagmiConfig: Config, apiKey: string, loginType: LoginType, enableFrogProxyServer?: boolean): Promise<{
     finalEstimation: FunkitCheckoutQuoteResult;
     brokerage?: BrokerageDetails;
@@ -33,8 +33,12 @@ export interface CheckoutQuoteParams {
     loginType: LoginType;
     enableFrogProxyServer?: boolean;
     directExecutionInfo: FunkitDirectExecutionInfo;
+    /** when sender address is different from wallet address
+     *  this happens when withdrawing from a different wallet
+     **/
+    senderAddress?: Address;
 }
-export declare function getQuoteAndEstimation({ checkoutItem, userId, walletAddress, apiKey, sponsorInitialTransferGasLimit, newPaymentMethodInfo, wagmiConfig, loginType, enableFrogProxyServer, directExecutionInfo, }: CheckoutQuoteParams): Promise<{
+export declare function getQuoteAndEstimation({ checkoutItem, userId, walletAddress, apiKey, sponsorInitialTransferGasLimit, newPaymentMethodInfo, wagmiConfig, loginType, enableFrogProxyServer, directExecutionInfo, senderAddress, }: CheckoutQuoteParams): Promise<{
     baseQuote: CheckoutQuoteResponse;
     checkedAssetAmount: CheckedAssetAmount;
     finalEstimation: FunkitCheckoutQuoteResult;

package/dist/domains/relay.d.ts

@@ -0,0 +1,12 @@
+import type { RelayQuote } from '@funkit/fun-relay';
+export declare const KATANA_BRIDGE_ALERT_THRESHOLD_PERCENT = 0.5;
+export declare function extractRelayFeeInfo(relayQuote: RelayQuote['metadata']['relayQuote']): {
+    gasUsd: number;
+    chainName: string | undefined;
+    totalImpact: number;
+    swapImpact: number;
+    relayGas: number;
+    appFeePercent: number;
+    maxSlippage: number;
+    minReceived: number;
+};

package/dist/hooks/queries/useErc20Asset.d.ts

@@ -0,0 +1,4 @@
+export declare const useErc20Asset: ({ chainId, symbol, }: {
+    chainId: string | undefined;
+    symbol: string | undefined;
+}) => import("@tanstack/react-query").UseQueryResult<import("@funkit/api-base").Erc20AssetInfo | null, Error>;

package/dist/hooks/queries/useWithdrawalQuote.d.ts

@@ -0,0 +1,20 @@
+import { type Address } from 'viem';
+import type { WithdrawalClient } from '~/wallets/Wallet';
+interface CheckoutQuoteParams {
+    recipientAddress: Address;
+    sourceAmount: number;
+    chainId: string;
+    symbol: string;
+    targetAsset: Address | undefined;
+    targetAssetAmount: number | undefined;
+    withdrawalClient: WithdrawalClient;
+}
+/**
+ * Simplified quoting logic used for withdrawal UI only.
+ */
+export declare function useWithdrawalQuote({ recipientAddress, sourceAmount, chainId, symbol, targetAsset, targetAssetAmount, withdrawalClient, }: CheckoutQuoteParams): import("@tanstack/react-query").UseQueryResult<{
+    baseQuote: import("@funkit/utils").CheckoutQuoteResponse;
+    checkedAssetAmount: import("~/domains/quote").CheckedAssetAmount;
+    finalEstimation: import("~/domains/quote").FunkitCheckoutQuoteResult;
+} | null, Error>;
+export {};

package/dist/hooks/useCheckoutDirectExecution.d.ts

@@ -13,6 +13,7 @@ interface DirectExecutionQuoteRequestParams {
     fromChainId: string;
     fromTokenAddress: Address;
     recipientAddress: Address;
+    senderAddress?: Address;
 }
 interface DirectExecutionStartParams {
     checkoutItem: FunkitActiveCheckoutItem;
@@ -28,6 +29,7 @@ export interface FunkitDirectExecutionInfo {
 }
 interface UseCheckoutDirectExecutionReturn {
     getDirectExecutionInfo: (checkoutItem: FunkitActiveCheckoutItem | null) => FunkitDirectExecutionInfo;
+    getWithdrawalDirectExecution: () => FunkitDirectExecutionInfo;
 }
 export declare function isVertexDirectExecution({ apiKey, config, paymentMethod, sourceAsset, sourceChain, targetAsset, targetChain, }: {
     apiKey: string;

package/dist/hooks/useTokenChain.d.ts

@@ -0,0 +1,18 @@
+import type { TokenTransferSourceChainsAndAssets } from '~/modals/CheckoutModal/TransferToken/TransferToken';
+export type TransferTokenDefault = {
+    token: string;
+    chainId: number;
+};
+interface UseTokenChainResult {
+    assets: TokenTransferSourceChainsAndAssets;
+    selectedChainId: number;
+    handleChainChange: (chainId?: number, autoUpdate?: boolean) => void;
+    selectedToken: string;
+    handleTokenChange: (token: string, chainId?: number, autoUpdate?: boolean) => void;
+}
+/**
+ * Semi reusable hook (tied into token transfer configuration)
+ * ensures token&chain dropdown preselection logic is reusable
+ */
+export declare const useTokenAndChainSelection: (defaultValues?: TransferTokenDefault) => UseTokenChainResult;
+export {};