@funkit/connect 7.1.0-next.11 → 7.1.0-next.12

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @funkit/connect
 
+## 7.1.0-next.12
+
+### Patch Changes
+
+- 49c1537: Fix tooltip closing when hovering over its content
+- 573e04e: feat(connect): update border color on fun powered tagline component
+- d4b06e4: add cutOffTimeMs and jsdoc to useRecentDeposit hook
+- 6f08927: Refactor FunTooltip to use Radix UI primitives for improved accessibility and mobile support
+- 89d00a4: Rename useRecentDirectExecutions hook to useRecentDeposits and add optional batchSize parameter
+- adac1ea: feat(connect): added option to display selected route on confirmation screen
+- Updated dependencies [8a48f13]
+- Updated dependencies [fd2812b]
+  - @funkit/api-base@1.12.22-next.5
+
 ## 7.1.0-next.11
 
 ### Patch Changes

package/dist/components/FunCheckoutHistory/FunDirectExecutionHistoryDetail.d.ts

@@ -1,6 +1,6 @@
 import type { DirectExecution } from '@funkit/api-base';
 import React from 'react';
-import type { MergedMultiStepDirectExecution } from '~/hooks/queries/useRecentDirectExecutions';
+import type { MergedMultiStepDirectExecution } from '~/hooks/queries/useRecentDeposits';
 import type { TextConfigStatus, TextConfigSteps } from '../TransactionStatus/TransactionStatus';
 import type { FunDirectExecutionStatusProps } from './FunDirectExecutionStatus';
 export declare function FunDirectExecutionHistoryDetail({ bottomBarId, directExecution, isActiveCheckout, onClose, onAnimationComplete, showCheckoutStatus, customTextConfigStatus, customTextConfigSteps, dangerousCustomDelayedAutoTriggerCutoff, disableAutoUpdate, hideYouReceive, }: {

package/dist/components/FunTooltip/FunTooltip.css.d.ts

@@ -1,6 +1,2 @@
-export declare const tooltipContainer: string;
-export declare const tooltipStyle: string;
-export declare const tooltipStyleBottom: string;
-export declare const tooltipStyleCenter: string;
-export declare const tooltipStyleRight: string;
-export declare const tooltipStyleLeft: string;
+export declare const tooltipTrigger: string;
+export declare const tooltipContent: string;

package/dist/components/FunTooltip/FunTooltip.d.ts

@@ -3,36 +3,31 @@ import { type BoxProps } from '../Box/Box';
 export interface FunTooltipProps {
     content: ReactNode;
     children?: ReactNode;
+    /**
+     * @deprecated No longer needed. Radix handles collision detection automatically.
+     */
     wrapperElementRef?: React.RefObject<HTMLDivElement>;
-    /** Renders the open tooltip based on available horizontal space, ie. ignoring the `tooltipPosition` prop,
-     * if the tooltip were to overflow beyond the boundaries of the provided `wrapperElementRef` element
-     * it renders either to the left or right side based on available horizontal space */
+    /**
+     * @deprecated No longer needed. Radix handles collision detection automatically.
+     */
     enableDynamicPositioning?: boolean;
     /**
-     * To be expanded as needed, currently supports these positions:
-     * center: above children,center
-     * left: left of children, center
-     * right: above children, right
+     * Tooltip position relative to trigger:
+     * - 'center': above trigger, centered (default)
+     * - 'left': above trigger, aligned to left edge
+     * - 'right': above trigger, aligned to right edge
      */
     tooltipPosition?: 'center' | 'left' | 'right';
     /**
-     * Bottom offset of the tooltip from the children element, by default it is 6px
-     * This is used to adjust the tooltip position when it is rendered in the center
+     * Offset from trigger element in pixels. Defaults to 6px.
      */
-    bottomOffset?: boolean;
+    sideOffset?: number;
     maxWidth?: number;
-    /** Whether to display the tooltip on hover or after clicking */
-    displayType?: 'hover' | 'click';
-    /**
-     * Delay after which the tooltip is hidden. Defaults to 150ms
-     * Based on display type the countdown starts immediately ('click') or after no longer hovering ('hover')
-     */
-    hideDelay?: number;
     /**
-     * Delay before the tooltip is shown. Defaults to 0ms. Primarily used when displayType is set to hover and we want to prevent multiple tooltips from being visible due to rapid mouse movements.
+     * Delay in ms before showing the tooltip. Defaults to 0ms.
      */
     startDelay?: number;
     width?: BoxProps['width'];
 }
 export declare const TooltipAnchorRefContext: React.Context<React.RefObject<HTMLElement> | null>;
-export declare const FunTooltip: ({ content, children, wrapperElementRef, tooltipPosition, enableDynamicPositioning, bottomOffset, maxWidth, displayType, hideDelay, startDelay, width, }: FunTooltipProps) => React.JSX.Element;
+export declare const FunTooltip: ({ content, children, tooltipPosition, sideOffset, maxWidth, startDelay, width, }: FunTooltipProps) => React.JSX.Element;

package/dist/components/Icons/RelayIcon.d.ts

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

package/dist/domains/relay.d.ts

@@ -1,5 +1,5 @@
 import type { FeeBreakdownV2 } from '@funkit/api-base';
-import type { RelayQuote } from '@funkit/fun-relay';
+import type { RelayExecute, RelayQuote } from '@funkit/fun-relay';
 export declare const KATANA_BRIDGE_ALERT_THRESHOLD_PERCENT = 0.5;
 export type RelayQuoteMetadata = {
     relayQuote: RelayQuote['metadata']['relayQuote'];
@@ -8,3 +8,17 @@ export type RelayQuoteMetadata = {
 export declare function extractRelayFeeInfo({ relayQuote, feeBreakdown, }?: {
     [x: string]: unknown;
 }): FeeBreakdownV2;
+type RelayQuoteDetails = NonNullable<RelayExecute['details']>;
+/** Checks if input and output are the same token on the same chain. */
+export declare function isRelayQuoteSameChainAndAsset(details: RelayQuoteDetails): boolean;
+/** Checks if the quote is a native token wrap (e.g., ETH → WETH). */
+export declare function isRelayQuoteWrapOperation(details: RelayQuoteDetails): boolean;
+/** Checks if the quote has a 1:1 exchange rate (no price conversion). */
+export declare function hasRelayQuoteUnitRate(details: RelayQuoteDetails): boolean;
+/**
+ * Checks if Relay is acting as a passthrough (no solver, no fees).
+ * True when the quote has a 1:1 rate AND is either a same-chain/same-asset
+ * transfer or a native token wrap operation.
+ */
+export declare function isRelayPassthrough(details: RelayQuoteDetails): boolean;
+export {};

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

@@ -0,0 +1,46 @@
+import { type DirectExecution } from '@funkit/api-base';
+/**
+ * Query parameters for the useRecentDeposits hook.
+ */
+interface RecentDirectExecutionsQuery {
+    /**
+     * Controls whether the hook should fetch and return data.
+     * When false, the query is disabled and no data will be fetched.
+     */
+    isVisible: boolean;
+    /**
+     * Optional filter function to further refine which deposits are returned.
+     * WARNING: Must be a stable reference (wrap in useMemo), otherwise the hook will constantly re-render.
+     * @param de - The DirectExecution to filter
+     * @returns true to include the deposit, false to exclude it
+     */
+    memoizedFilterFunc?: (de: DirectExecution) => boolean;
+    /**
+     * Maximum number of deposits to fetch from the API.
+     * @default 5
+     */
+    batchSize?: number;
+    /**
+     * Custom cutoff time in milliseconds for determining which deposits are "recent".
+     * Deposits created after this timestamp will be included.
+     * If not provided, uses Fun's default strategy.
+     */
+    cutOffTimeMs?: number;
+}
+export interface MergedMultiStepDirectExecution extends DirectExecution {
+    /**
+     * In a multi-step DE chain, represents the latest **present** DE of the chain.
+     *
+     * Always `undefined` for single-step DEs.
+     */
+    latestStep?: DirectExecution;
+}
+export declare function isTokenTransferDirectExecution(de: DirectExecution): boolean;
+export declare function isWithdrawalDirectExecution(de: DirectExecution): boolean;
+/**
+ * @returns recent direct executions tied to a recipient address used in the token transfer flow
+ */
+export declare const useRecentDeposits: ({ isVisible, memoizedFilterFunc, batchSize, cutOffTimeMs, }: RecentDirectExecutionsQuery) => {
+    data: MergedMultiStepDirectExecution[] | undefined;
+};
+export {};

package/dist/hooks/useCheckoutDirectExecutionHistory.d.ts

@@ -1,5 +1,5 @@
 import { CheckoutRefundState, CheckoutState, type DirectExecution, RelayExecutionStatus } from '@funkit/api-base';
-import type { MergedMultiStepDirectExecution } from './queries/useRecentDirectExecutions';
+import type { MergedMultiStepDirectExecution } from './queries/useRecentDeposits';
 export declare function mapRelayExecutionStatusToCheckoutState(status: RelayExecutionStatus): CheckoutState;
 export declare function mapRelayExecutionStatusToRefundState(status: RelayExecutionStatus): CheckoutRefundState | undefined;
 export declare function useCheckoutDirectExecutionHistory({ initDirectExecution, disabled, }: {

package/dist/hooks/useHasHover.d.ts

@@ -0,0 +1 @@
+export declare function useHasHover(): boolean;

package/dist/index.css

@@ -9826,34 +9826,7 @@
   box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.09) inset;
 }
 
-/* vanilla-extract-css-ns:src/components/FunTooltip/FunTooltip.css.ts.vanilla.css?source=LnoxbDM4aTAgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgei1pbmRleDogMjsKfQouejFsMzhpMiB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGJvdHRvbTogY2FsYygxMDAlICsgNnB4KTsKICB3aWR0aDogbWF4LWNvbnRlbnQ7CiAgd29yZC1icmVhazogYnJlYWstd29yZDsKfQouejFsMzhpMyB7CiAgYm90dG9tOiBjYWxjKDEwMCUpOwp9Ci56MWwzOGk0IHsKICBsZWZ0OiA1MCU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC01MCUpOwp9Ci56MWwzOGk1IHsKICBsZWZ0OiAwOwp9Ci56MWwzOGk2IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZShjYWxjKC0xMDAlIC0gMThweCksIDEwMCUpOwp9 */
-[data-rk] .z1l38i0 {
-  position: relative;
-  display: inline-block;
-  z-index: 2;
-}
-[data-rk] .z1l38i2 {
-  position: absolute;
-  bottom: calc(100% + 6px);
-  width: -moz-max-content;
-  width: max-content;
-  word-break: break-word;
-}
-[data-rk] .z1l38i3 {
-  bottom: calc(100%);
-}
-[data-rk] .z1l38i4 {
-  left: 50%;
-  transform: translateX(-50%);
-}
-[data-rk] .z1l38i5 {
-  left: 0;
-}
-[data-rk] .z1l38i6 {
-  transform: translate(calc(-100% - 18px), 100%);
-}
-
-/* vanilla-extract-css-ns:src/components/FunPoweredTagline/FunPoweredTagline.css.ts.vanilla.css?source=Ll8xd2RnazZpMCB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIG1hcmdpbi10b3A6IDZweDsKICBwYWRkaW5nLXRvcDogdmFyKC0tcmstc3BhY2luZy1tb2RhbFBhZGRpbmdCb3R0b21Mb3dlcik7Cn0KLl8xd2RnazZpMDo6YmVmb3JlIHsKICBjb250ZW50OiAiIjsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1yay1jb2xvcnMtbGlnaHRTdHJva2UpOwogIGhlaWdodDogMXB4OwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICB0b3A6IDA7CiAgbGVmdDogY2FsYygtMSAqICh2YXIoLS1yay1zcGFjaW5nLW1vZGFsQmFzZUhvcml6b250YWxQYWRkaW5nKSArIHZhcigtLXJrLXNwYWNpbmctbW9kYWxCb3R0b21Ib3Jpem9udGFsUGFkZGluZykpKTsKICByaWdodDogY2FsYygtMSAqICh2YXIoLS1yay1zcGFjaW5nLW1vZGFsQmFzZUhvcml6b250YWxQYWRkaW5nKSArIHZhcigtLXJrLXNwYWNpbmctbW9kYWxCb3R0b21Ib3Jpem9udGFsUGFkZGluZykpKTsKfQ== */
+/* vanilla-extract-css-ns:src/components/FunPoweredTagline/FunPoweredTagline.css.ts.vanilla.css?source=Ll8xd2RnazZpMCB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIG1hcmdpbi10b3A6IDZweDsKICBwYWRkaW5nLXRvcDogdmFyKC0tcmstc3BhY2luZy1tb2RhbFBhZGRpbmdCb3R0b21Mb3dlcik7Cn0KLl8xd2RnazZpMDo6YmVmb3JlIHsKICBjb250ZW50OiAiIjsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1yay1jb2xvcnMtbW9kYWxGb290ZXJEaXZpZGVyKTsKICBoZWlnaHQ6IDFweDsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgdG9wOiAwOwogIGxlZnQ6IGNhbGMoLTEgKiAodmFyKC0tcmstc3BhY2luZy1tb2RhbEJhc2VIb3Jpem9udGFsUGFkZGluZykgKyB2YXIoLS1yay1zcGFjaW5nLW1vZGFsQm90dG9tSG9yaXpvbnRhbFBhZGRpbmcpKSk7CiAgcmlnaHQ6IGNhbGMoLTEgKiAodmFyKC0tcmstc3BhY2luZy1tb2RhbEJhc2VIb3Jpem9udGFsUGFkZGluZykgKyB2YXIoLS1yay1zcGFjaW5nLW1vZGFsQm90dG9tSG9yaXpvbnRhbFBhZGRpbmcpKSk7Cn0= */
 [data-rk] ._1wdgk6i0 {
   position: relative;
   margin-top: 6px;
@@ -9861,7 +9834,7 @@
 }
 [data-rk] ._1wdgk6i0::before {
   content: "";
-  background-color: var(--rk-colors-lightStroke);
+  background-color: var(--rk-colors-modalFooterDivider);
   height: 1px;
   position: absolute;
   top: 0;
@@ -9877,6 +9850,94 @@
   flex: 1;
 }
 
+/* vanilla-extract-css-ns:src/components/FunTooltip/FunTooltip.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7WTy27CMBBF93yFlRWVMEp4tFUQEp9BVbEwziRM8SOyB0Go+PcqBkqLlCxCu8rEM3N8cqUstlDlTmjw7Jio8SvG7LPHWO6sDgVjthQSqUpZPAvv5ITxuXU6PZdKELz1R+Xhqe6feoyRvV9N2lbjy+Kpt7iXSbrJ8P+xGXWxWXaPZtkmM+4m0z2aVptJo03SfFl8xQ3PkGkYyNCXSlQpQ6PQAM8VHOpBobAwHAm0T5kEQ+Dq44+dJ8wrLq0hMHRrfWNfAnZvXcbXDsQ2ZeHB65MANqgFoTU827lQpCyZxtr/bhJqNAXPd0aeZ+RujZKv4Yjg+vEweR6wZMDi4XjAkpDUHpXiciNMAekt0sE1gJ+K75kgwT0JgnmUgRIVZNyWYKLVpYUZzCOyZbQKn3PzMkJDev1fOjDXlsjqVmzcAasgp1bouAPUYbFpp44aqWg8CUN/mmoz86FUm7EPpNoMfSRVqayHrHV5MuudvgAzMmc8ZwYAAA== */
+@keyframes z1l38i0 {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes z1l38i1 {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes z1l38i2 {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes z1l38i3 {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes z1l38i4 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+[data-rk] .z1l38i5 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-rk] .z1l38i7 {
+  word-break: break-word;
+  animation-duration: 150ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+[data-rk] .z1l38i7[data-state=delayed-open][data-side=top] {
+  animation-name: z1l38i1;
+}
+[data-rk] .z1l38i7[data-state=delayed-open][data-side=bottom] {
+  animation-name: z1l38i0;
+}
+[data-rk] .z1l38i7[data-state=delayed-open][data-side=left] {
+  animation-name: z1l38i3;
+}
+[data-rk] .z1l38i7[data-state=delayed-open][data-side=right] {
+  animation-name: z1l38i2;
+}
+[data-rk] .z1l38i7[data-state=instant-open][data-side=top] {
+  animation-name: z1l38i1;
+}
+[data-rk] .z1l38i7[data-state=instant-open][data-side=bottom] {
+  animation-name: z1l38i0;
+}
+[data-rk] .z1l38i7[data-state=instant-open][data-side=left] {
+  animation-name: z1l38i3;
+}
+[data-rk] .z1l38i7[data-state=instant-open][data-side=right] {
+  animation-name: z1l38i2;
+}
+[data-rk] .z1l38i7[data-state=closed] {
+  animation-name: z1l38i4;
+}
+
 /* vanilla-extract-css-ns:src/components/FunInput/FunInput.css.ts.vanilla.css?source=#H4sIAAAAAAAAA82TQUsDMRCF7/sr5iJU2CxZbYukeNKf4E08TLJDDc1OltmstRX/u3Rr6UpRxFroMeHlve9NkmLdkfZTDW8ZQBLk1icf2QCGAOVE1y24znqnLK09yUgX1znoHHShpzmUl7PsPSu2HuWBB0emgeDKGLUku/BJxS6RqLbxrGyXUuQcDkWe+auoD6hR5p4N6FkGsJNi0xAKsqPD1Me0auiWu9qSPPUWqo7rn46Me5VFt5hL7LhSLoYoZtutQSFOm3AbpSLZnQaIXQqeab+x9FV6NlBqfTE7erxjY5qAjp5jqEh6wk+sF5SRUrLYYraqJRe5Qlk90GsaWkxP0WvvfjzgzRkNHiA26HxaGdDFZAj5657oNpl3m8W9b9EGqoZt8TRtv8HG/8J2Z3RJe6jjHx+d9HfQ3wE/ALoQWt+kBQAA */
 [data-rk] .zue0i60 {
   transition: all 150ms cubic-bezier(0.3, 0, 0.06, 1);

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export type { FunkitConfig } from './providers/FunkitConfigContext';
 export type { FunkitConnectChain as Chain } from './providers/FunkitConnectChainContext';
 export type { ModalSizes } from './providers/ModalSizeContext';
 export { useCheckoutListenerByCheckoutId, useCheckoutsListenerByUserId, } from './providers/FunkitHistoryContext';
+export { useRecentDeposits } from './hooks/queries/useRecentDeposits';
 export type { FunkitWagmiConfig, FunkitProviderProps, } from './providers/FunkitProvider';
 export { FunkitProvider } from './providers/FunkitProvider';
 export type { Theme, ThemeSet } from './providers/FunkitThemeProvider';