@funkit/connect 9.8.0 → 9.10.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @funkit/connect
 
+## 9.10.0
+
+### Minor Changes
+
+- b902702: Render live Lighter Secure-withdrawal delay and consolidate Lighter setup behind one hook.
+
+  - `useLighterWithdrawalConfig(config | null)` is now the single React entry — it resolves the account index, balances, locale, and live `/api/v1/withdrawalDelay` internally and returns `null` until ready.
+  - `LighterWithdrawalConfig` no longer requires `accountIndex`.
+  - Removed the static `createLighterWithdrawalConfig` factory; use the hook.
+  - Secure-withdrawal disclaimer now reads "All tokens · Ethereum chain only · 1 h 50 min" (live, localized) instead of the static "60+ minutes".
+  - `getSecureMinWithdrawalAmount` is fully optional and may now return `undefined` to defer to the new exported `LIGHTER_DEFAULT_SECURE_MIN_WITHDRAWAL_AMOUNTS` dictionary, which is also used as the fallback when the callback is omitted.
+
+### Patch Changes
+
+- ab32d56: Render Lighter withdrawal receive amount and USD label with fractional digits instead of scientific notation
+- d3769c2: Block Polymarket withdrawals to the user's own source (proxy) wallet address
+
+## 9.9.0
+
+### Minor Changes
+
+- cb719cf: Add source-side authorization toggle ("Sign message" vs "Approve transaction") to the checkout confirmation screen for Wallet/direct-execution flows, behind the `enable-permit-toggle` Statsig gate.
+
+### Patch Changes
+
+- 82368fd: api-base: thread client `checkoutId` through POST /checkout
+- cb719cf: Add labelSize, labelStyle, dropdownWidth, and dropdownAlign override props to BaseDropdown components
+- 82368fd: fix: regenerate checkoutItem.id on SWAPPED_NEW_DEPOSIT so repeat fiat deposits in one modal session produce distinct client metadata ids
+- cb719cf: Address review feedback on permit toggle: move usePermit derivation to FunkitQuoteContext, add missing translations, useCallback on handleSelect, clean up test mocks.
+- Updated dependencies [82368fd]
+- Updated dependencies [9684ac0]
+- Updated dependencies [cb719cf]
+- Updated dependencies [9684ac0]
+  - @funkit/api-base@4.2.0
+  - @funkit/fun-relay@2.7.0
+
 ## 9.8.0
 
 ### Minor Changes

package/dist/__generated__/default_feature_gates.d.ts

@@ -1,6 +1,8 @@
 declare const _default: {
     readonly 'compliance-review-blocker': false;
     readonly 'enable-across-wallet-flow': false;
+    readonly 'enable-permit-toggle': false;
+    readonly 'enable-swapped-exchanges': false;
     readonly 'exact-in': false;
     readonly 'faster-notifications': false;
     readonly 'new-token-transfer-config': false;

package/dist/clients/lighter.d.ts

@@ -14,6 +14,7 @@
  * caller provides the actual on-chain implementation.
  */
 import type { LighterAccountIndex } from '@funkit/api-base';
+import type { Address } from 'viem';
 import type { CustomWithdrawalConfig, MultiMethodWithdrawalConfig } from '../providers/FunkitCheckoutContext/types';
 export type LighterTransferParams = {
     toAccountIndex: number;
@@ -38,13 +39,18 @@ export type LighterSigner = {
     transfer: (params: LighterTransferParams) => Promise<[unknown, string, string | null]>;
 };
 export interface LighterWithdrawalConfig {
-    accountIndex: string;
+    /**
+     * The connected user's L1 address. The hook resolves the Lighter account
+     * index from this internally — get it from `useFunkitUserInfo` (or your
+     * own wallet hook) in the caller and pass it through.
+     */
+    l1Address: Address;
     /** Title shown on the selection screen. Defaults to "Withdraw". */
     modalTitle?: string;
     disableConnectedWallet?: boolean;
     fastIconSrc?: string;
     secureIconSrc?: string;
-    /** Pre-built Lighter signer. l1Address and accountIndex are resolved internally. */
+    /** Pre-built Lighter signer. */
     signerClient: LighterSigner;
     sendLighterSecureWithdrawal: LighterSecureWithdrawalExec;
     /**
@@ -54,8 +60,14 @@ export interface LighterWithdrawalConfig {
      * getSecureMinWithdrawalAmount: (symbol) => ({ USDC: 1, ETH: 0.001 }[symbol] ?? 0)
      * ```
      */
-    getSecureMinWithdrawalAmount?: (symbol: string) => number;
+    getSecureMinWithdrawalAmount?: (symbol: string) => number | undefined;
 }
+/**
+ * Default minimum Secure-withdrawal amounts (token units) for known Lighter
+ * assets. Used as a fallback when `LighterWithdrawalConfig.getSecureMinWithdrawalAmount`
+ * is omitted or returns `undefined` for a symbol.
+ */
+export declare const LIGHTER_DEFAULT_SECURE_MIN_WITHDRAWAL_AMOUNTS: Record<string, number>;
 export interface LighterSecureWithdrawalCallbackParams {
     /** Withdrawal amount in token units (e.g. "1.5" for 1.5 ETH). */
     amountTokenUnits: string;
@@ -100,35 +112,30 @@ export declare function useLighterWithdrawalBalances({ accountIndex, }: {
 /** Single-method config for Lighter's Secure withdrawal (bridge to Ethereum). */
 export declare function createLighterSecureWithdrawalConfig(config: LighterSecureWithdrawalConfig): CustomWithdrawalConfig;
 /**
- * Hook version of {@link createLighterWithdrawalConfig}.
+ * The single React entry point for Lighter withdrawals. Returns a
+ * `MultiMethodWithdrawalConfig` ready to hand to the withdrawal modal, or
+ * `null` while the inputs aren't ready yet.
  *
- * Fetches all Lighter asset balances for `config.accountIndex` and injects them as
- * `withdrawalSourceTokenBalance` into each method's config so the withdrawal
- * form displays and validates against the real Lighter account balance.
+ * The hook owns every Lighter-specific concern that requires React context:
+ *   - the user's Lighter account index (resolved from `config.l1Address`)
+ *   - all Lighter asset balances (so the form validates against the real
+ *     account)
+ *   - the live Secure-withdrawal delay (`/api/v1/withdrawalDelay`)
+ *   - the active locale (so the disclaimer renders correctly)
  *
- * Drop-in replacement for `createLighterWithdrawalConfig` — call it in any
- * React component/hook and pass the result directly to the withdrawal modal:
+ * Pass `null` while prerequisites (wallet, signer, etc.) aren't ready — the
+ * hook always invokes its inner hooks (Rules of Hooks) and returns `null`
+ * until you supply a real config and the account resolves:
  *
  * ```tsx
- * const withdrawalConfig = useLighterWithdrawalConfig({
- *   accountIndex,
- *   sendLighterSecureWithdrawal: ...,
- * })
- * <WithdrawalModal config={withdrawalConfig} ... />
- * ```
- */
-export declare function useLighterWithdrawalConfig(config: LighterWithdrawalConfig): MultiMethodWithdrawalConfig;
-/**
- * Creates a full {@link MultiMethodWithdrawalConfig} for Lighter that renders
- * the Fast vs Secure selection screen before the standard withdrawal flow.
- *
- * Usage:
- * ```ts
- * const withdrawalConfig = createLighterWithdrawalConfig({
- *   accountIndex: '0',
- *   sendLighterSecureWithdrawal: async ({ amountTokenUnits, assetIndex }) => { ... },
- * })
+ * const { address: l1Address } = useFunkitUserInfo()
+ * const lighter = useLighterWithdrawalConfig(
+ *   userId && walletClient
+ *     ? { l1Address, signerClient, sendLighterSecureWithdrawal, ... }
+ *     : null,
+ * )
+ * if (!lighter) return { ready: false, disabledReason: '...' }
  * ```
  */
-export declare function createLighterWithdrawalConfig(config: LighterWithdrawalConfig): MultiMethodWithdrawalConfig;
+export declare function useLighterWithdrawalConfig(config: LighterWithdrawalConfig | null): MultiMethodWithdrawalConfig | null;
 export {};

package/dist/clients/lighter.js

@@ -12,6 +12,7 @@ import {
 import { SOLANA_MAINNET_CHAIN_ID } from "@funkit/chains";
 import { RELAY_LIGHTER_CHAIN_ID } from "@funkit/fun-relay";
 import { retry } from "@lifeomic/attempt";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
 import i18next from "i18next";
 import React2, { useEffect, useMemo as useMemo2 } from "react";
 import { arbitrum, base, bsc, mainnet as mainnet2, optimism } from "viem/chains";
@@ -238,6 +239,16 @@ function useFunkitConfig() {
 }
 
 // src/utils/customer.ts
+async function getLighterAccountsByL1Address(address) {
+  const response = await fetch(
+    `https://mainnet.zklighter.elliot.ai/api/v1/accountsByL1Address?l1_address=${address}`
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to fetch lighter accounts: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return data;
+}
 async function getLighterAccount(lookup, activeOnly) {
   const params = new URLSearchParams({
     by: lookup.by,
@@ -274,11 +285,75 @@ function useLighterAccount(lookup, options) {
     account: query.data?.accounts?.[0]
   };
 }
+function useLighterAccounts({
+  address
+}) {
+  const { apiKey } = useFunkitConfig();
+  const isLighter = isLighterxyzCustomer(apiKey);
+  const enabled = !!address && address !== "0x" && isLighter;
+  const query = useQuery({
+    queryKey: ["lighterAccounts", address],
+    queryFn: () => getLighterAccountsByL1Address(address),
+    enabled,
+    staleTime: Number.POSITIVE_INFINITY,
+    gcTime: Number.POSITIVE_INFINITY,
+    retry: false,
+    // allows us to always refetch the data but return the previous data until the new data is fetched
+    refetchOnMount: "always"
+  });
+  return {
+    ...query,
+    mainAccountIndex: query.data?.sub_accounts?.[0]?.index?.toString(),
+    subAccounts: query.data?.sub_accounts
+  };
+}
+
+// src/utils/timeFormat.ts
+import { formatSecondsToReadableForm } from "@funkit/utils";
+function formatSecondsTranslated(seconds, t, specifyUnderMinute = false, omitSeconds = false) {
+  return formatSecondsToReadableForm(seconds, specifyUnderMinute, omitSeconds, {
+    lessThanOneMin: t("time.lessThanOneMin"),
+    seconds: (count) => t("time.seconds", { count }),
+    minutes: (count) => t("time.minutes", { count }),
+    hours: (count) => t("time.hours", { count }),
+    secondsShort: (count) => t("time.secondsShort", { count })
+  });
+}
 
 // src/clients/lighter.tsx
 var LIGHTER_USDC_PERPS_ADDRESS = "0x0000000000000000000000000000000000000000";
 var MAINNET_USDC = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
 var LIGHTER_API_BASE = "https://mainnet.zklighter.elliot.ai";
+async function getLighterWithdrawalDelay() {
+  const response = await fetch(`${LIGHTER_API_BASE}/api/v1/withdrawalDelay`);
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch Lighter withdrawal delay: ${response.statusText}`
+    );
+  }
+  return response.json();
+}
+function useLighterSecureDelayText() {
+  const { t } = useFunkitTranslation();
+  const query = useQuery2({
+    queryKey: ["lighterWithdrawalDelay"],
+    queryFn: getLighterWithdrawalDelay,
+    staleTime: 6e4,
+    retry: 2
+  });
+  const seconds = query.data?.seconds;
+  if (seconds === void 0 || !Number.isFinite(seconds) || seconds <= 0) {
+    return void 0;
+  }
+  return formatSecondsTranslated(
+    seconds,
+    t,
+    /*specifyUnderMinutes*/
+    false,
+    /*omitSeconds*/
+    true
+  );
+}
 var LIGHTER_TX_STATUS = {
   PENDING: 0,
   QUEUED: 1,
@@ -402,15 +477,20 @@ function createLighterAdaptedWallet({
     }
   };
 }
+var LIGHTER_DEFAULT_SECURE_MIN_WITHDRAWAL_AMOUNTS = {
+  USDC: 1,
+  ETH: 1e-3,
+  LIT: 1,
+  LINK: 0.1,
+  UNI: 0.2,
+  AAVE: 0.01,
+  SKY: 20,
+  LDO: 2,
+  AZTEC: 100
+};
 function freeBalance(balance, lockedBalance) {
   return String(Math.max(0, Number(balance) - Number(lockedBalance)));
 }
-function asLighterAccountIndex(s) {
-  if (!/^\d+$/.test(s)) {
-    throw new Error(`Invalid LighterAccountIndex: ${s}`);
-  }
-  return s;
-}
 function useLighterWithdrawalBalances({
   accountIndex
 }) {
@@ -578,23 +658,31 @@ var LIGHTER_FAST_PREVIEW_CHAIN_IDS = [
 var LIGHTER_SECURE_PREVIEW_CHAIN_IDS = [mainnet2.id];
 function buildLighterMultiMethodConfig({
   config,
+  accountIndex,
   t,
-  withBalance
+  withBalance,
+  secureDelayText
 }) {
   const fastConfig = buildLighterFastWalletWithdrawalConfig({
     signerClient: config.signerClient,
-    accountIndex: Number(config.accountIndex),
+    accountIndex: Number(accountIndex),
     modalTitle: config.modalTitle,
     disableConnectedWallet: config.disableConnectedWallet,
     iconSrc: config.fastIconSrc
   });
   const secureConfig = createLighterSecureWithdrawalConfig({
-    accountIndex: config.accountIndex,
+    accountIndex,
     modalTitle: config.modalTitle,
     disableConnectedWallet: config.disableConnectedWallet,
     iconSrc: config.secureIconSrc,
     sendLighterSecureWithdrawal: config.sendLighterSecureWithdrawal,
-    getMinWithdrawalAmount: config.getSecureMinWithdrawalAmount
+    getMinWithdrawalAmount: (symbol) => {
+      const userMin = config.getSecureMinWithdrawalAmount?.(symbol);
+      if (userMin !== void 0) {
+        return userMin;
+      }
+      return LIGHTER_DEFAULT_SECURE_MIN_WITHDRAWAL_AMOUNTS[symbol.toUpperCase()] ?? 0;
+    }
   });
   const fast = {
     id: "lighter-fast",
@@ -612,7 +700,12 @@ function buildLighterMultiMethodConfig({
   const secure = {
     id: "lighter-secure",
     keyText: t("withdrawal.methodSecure"),
-    subtitleText: t("withdrawal.secureDisclaimer"),
+    subtitleText: t("withdrawal.secureDisclaimer", {
+      // Until the live value loads, show the localized "60+ minutes"
+      // historical estimate. The "+" lives in the per-locale fallback string
+      // so it doesn't bleed into live values, which are exact.
+      delay: secureDelayText ?? t("withdrawal.secureFallbackDelay")
+    }),
     icon: /* @__PURE__ */ React2.createElement(EvmWallet, { size: 20 }),
     valueIcon: /* @__PURE__ */ React2.createElement(ChainIconStack, { chainIds: LIGHTER_SECURE_PREVIEW_CHAIN_IDS }),
     config: withBalance ? {
@@ -630,27 +723,30 @@ function buildLighterMultiMethodConfig({
 }
 function useLighterWithdrawalConfig(config) {
   const { t } = useFunkitTranslation();
+  const { mainAccountIndex } = useLighterAccounts({
+    address: config?.l1Address
+  });
+  const accountIndex = mainAccountIndex && /^\d+$/.test(mainAccountIndex) ? mainAccountIndex : void 0;
   const { balances } = useLighterWithdrawalBalances({
-    accountIndex: asLighterAccountIndex(config.accountIndex)
+    accountIndex
   });
-  return useMemo2(
-    () => buildLighterMultiMethodConfig({
+  const secureDelayText = useLighterSecureDelayText();
+  return useMemo2(() => {
+    if (!config || !accountIndex) {
+      return null;
+    }
+    return buildLighterMultiMethodConfig({
       config,
+      accountIndex,
       t,
-      withBalance: (symbol) => () => balances[symbol.toUpperCase()] ?? "0"
-    }),
-    [config, balances, t]
-  );
-}
-function createLighterWithdrawalConfig(config) {
-  return buildLighterMultiMethodConfig({
-    config,
-    t: i18next.t.bind(i18next)
-  });
+      withBalance: (symbol) => () => balances[symbol.toUpperCase()] ?? "0",
+      secureDelayText
+    });
+  }, [config, accountIndex, balances, t, secureDelayText]);
 }
 export {
+  LIGHTER_DEFAULT_SECURE_MIN_WITHDRAWAL_AMOUNTS,
   createLighterSecureWithdrawalConfig,
-  createLighterWithdrawalConfig,
   freeBalance,
   useLighterWithdrawalBalances,
   useLighterWithdrawalConfig

package/dist/components/ApprovalMethodToggle/ApprovalMethodToggle.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ApprovalMethod } from '../../providers/FunkitQuoteContext';
+interface ApprovalMethodToggleProps {
+    value: ApprovalMethod;
+    onChange: (next: ApprovalMethod) => void;
+    disabled?: boolean;
+    testId?: string;
+}
+/**
+ * A small dropdown selector for the user's preferred source-side
+ * authorization method ("Approve transaction" vs "Signed message").
+ *
+ * Pure presentation: state lives in `useApprovalMethodSelection`. The
+ * component is screen-agnostic so it can be mounted on either
+ * `ConfirmationStep` (non-native flow) or `InputAmount` (native flow,
+ * future) without changes.
+ */
+export declare function ApprovalMethodToggle({ value, onChange, disabled, testId, }: ApprovalMethodToggleProps): React.JSX.Element;
+export {};

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

@@ -14,9 +14,10 @@ export interface BaseActiveDropdownItemProps {
     color?: BoxProps['color'];
     arrowColor?: BoxProps['color'];
     background?: BoxProps['background'];
+    labelStyle?: React.CSSProperties;
 }
 /**
  * Represents the component used to open the dropdown, usually displayed all the time.
  */
-declare function BaseActiveDropdownItem({ iconComponent, label, isOpened, onClick, horizontalIconGap, alwaysVisibleLabel, tagComponent, tagPosition, size, color, arrowColor, background, }: BaseActiveDropdownItemProps): React.JSX.Element;
+declare function BaseActiveDropdownItem({ iconComponent, label, isOpened, onClick, horizontalIconGap, alwaysVisibleLabel, tagComponent, tagPosition, size, color, arrowColor, background, labelStyle, }: BaseActiveDropdownItemProps): React.JSX.Element;
 export default BaseActiveDropdownItem;

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

@@ -11,7 +11,7 @@ export declare const HORIZONTAL_ICON_GAP = "4";
 export declare const HORIZONTAL_OUTER_PADDING_X = "12";
 export interface BaseDropdownProps<T = string, G extends string = never> {
     value: string;
-    activeItemProps?: Partial<Pick<BaseActiveDropdownItemProps, 'iconComponent' | 'label' | 'color' | 'alwaysVisibleLabel' | 'tagComponent' | 'tagPosition' | 'background'>>;
+    activeItemProps?: Partial<Pick<BaseActiveDropdownItemProps, 'iconComponent' | 'label' | 'color' | 'alwaysVisibleLabel' | 'tagComponent' | 'tagPosition' | 'background' | 'labelStyle'>>;
     /**
      * List of groups to show and the corresponding labels, in the expected order.
      *
@@ -65,7 +65,9 @@ export interface BaseDropdownProps<T = string, G extends string = never> {
      * This values should be set so that the last dropdown item is partially visible to indicate that there are more options.
      */
     maxDropdownHeight?: number;
+    dropdownWidth?: number;
+    dropdownAlign?: 'start' | 'center' | 'end';
     testId?: string;
 }
-declare function BaseDropdown<T extends string = string, G extends string = never>({ activeItemProps, value, options, groups, additionalGroup, additionalGroupLabel, allowUnselect, unselectLabel, onOptionSelected, onOpen, renderDropdownOption, searchableOptions, searchPlaceholder, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, openDropdownFullWidth, isLoading, preloadIconUrls, horizontalIconGap, openDropdownBackgroundColor, size, label, maxDropdownHeight, testId, }: BaseDropdownProps<T, G>): React.JSX.Element;
+declare function BaseDropdown<T extends string = string, G extends string = never>({ activeItemProps, value, options, groups, additionalGroup, additionalGroupLabel, allowUnselect, unselectLabel, onOptionSelected, onOpen, renderDropdownOption, searchableOptions, searchPlaceholder, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, openDropdownFullWidth, isLoading, preloadIconUrls, horizontalIconGap, openDropdownBackgroundColor, size, label, maxDropdownHeight, dropdownWidth, dropdownAlign, testId, }: BaseDropdownProps<T, G>): React.JSX.Element;
 export default BaseDropdown;

package/dist/domains/quote.d.ts

@@ -13,7 +13,15 @@ export interface FunkitCheckoutQuoteResult extends Omit<ApiFunkitCheckoutQuoteRe
     finalSpreadUsd: string;
     finalFeesBreakdown: CheckoutFees;
 }
-export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, wagmiConfig: Config, directExecutionInfo: FunkitDirectExecutionInfo, senderAddress?: Address, isWithdrawal?: boolean, quoteBuilder?: QuoteBuilder): Promise<CheckoutQuoteResponse>;
+export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, wagmiConfig: Config, directExecutionInfo: FunkitDirectExecutionInfo, senderAddress?: Address, isWithdrawal?: boolean, quoteBuilder?: QuoteBuilder, 
+/**
+ * User-driven preference for the source-side authorization step. Forwarded
+ * to the direct-execution branch (`getDirectExecutionQuote` →
+ * `getCheckoutQuoteV2`) where Relay's `usePermit` flag actually flows. The
+ * legacy `getApiCheckoutQuote` branch ignores this; the permit toggle is
+ * scoped to Wallet (Relay direct-execution) only.
+ */
+usePermit?: boolean): Promise<CheckoutQuoteResponse>;
 export declare function getQuoteFinalEstimation(baseQuote: CheckoutQuoteResponse, checkoutItem: FunkitActiveCheckoutItem, newPaymentMethodInfo: PaymentMethodInfo, wagmiConfig: Config, apiKey: string, loginType: LoginType, isWithdrawal?: boolean, brokerageQuote?: BluvoBrokerageQuote): Promise<{
     finalEstimation: FunkitCheckoutQuoteResult;
     brokerage?: BrokerageDetails;

package/dist/hooks/useCheckoutDirectExecution.d.ts

@@ -15,6 +15,13 @@ interface DirectExecutionQuoteRequestParamsBase {
     toTokenAddress: Address;
     recipientAddress: Address;
     senderAddress?: Address;
+    /**
+     * Explicit permit preference for the source-side authorization step.
+     * Forwarded as `usePermit` on the v2 quote request body. When defined,
+     * takes priority over the legacy auto-gasless-fallback (see frog's
+     * getUsePermit for the full resolution order).
+     */
+    usePermit?: boolean;
 }
 interface RegularDEQuoteRequest extends DirectExecutionQuoteRequestParamsBase {
     toTokenAmount: number;