@funkit/connect 3.4.0 → 3.4.2

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @funkit/connect
 
+## 3.4.2
+
+### Patch Changes
+
+- b58a523: refactor: switch bitfinex to bitfinex direct
+- 590eb3a: fix: fix token transfer back to previous screen
+- b8869b2: feat: basic mesh heuristics
+- 823bb83: fix: change hardcoded time estimate to reflect latest change
+- e95c917: fix: always display scrollbar
+- 57d55e1: fix: bitfinex direct name
+- af95548: refactor: improve quote error copy
+- Updated dependencies [b6b4e79]
+  - @funkit/core@2.2.2
+  - @funkit/wagmi-tools@3.0.13
+
+## 3.4.1
+
+### Patch Changes
+
+- 1c95f84: fix(connect): fix modal padding in safari
+- 203adf3: fix: remove search option in token dropdown
+- 4599072: feat: move getDecimals to connect package under new getTokenDecimals name
+- 6675c41: feat(connect): remove amount update from SelectPayment step
+- 9238b4f: refactor: error message vocab
+- 04354d0: fix(connect): apply no visual styles on hover / focus for FunIconButton
+- 482a0f3: feat(connect): update quote errors in input step
+- ecdec07: fix: checkout confirmation source asset icon
+- b76b0dd: fix: POL token fallback icon
+- 09da691: feat: enable more tokens for token transfer
+- 6343d89: fix: tweak qr code size for encoding
+- 09da691: refactor: show original recipient for USDC (Polygon) as well
+- 0caea74: fix: source arrow misalignment
+- 9238b4f: fix: log error object
+- f64b299: feat: use modalBackground color variable for dropdown options
+- 7315888: chore: remove OKX from SupportedExchanges flag
+- fa7c565: feat: change bottom dialog padding from 12 to 18 pixels
+- 63a571f: feat: show token transfer screen for polymarket when there is no balance
+- 415ed27: feat(connect): do not show % for fill gas cost
+- e367a3e: feat: moonpay early manual redirect button
+- 0ac89a7: feat: show supported chains on direct deposit option
+- d2b11d2: fix: tweak token transfer disclaimer
+- Updated dependencies [4599072]
+  - @funkit/core@2.2.1
+  - @funkit/wagmi-tools@3.0.12
+
 ## 3.4.0
 
 ### Minor Changes

package/dist/components/FunAssetAvatar/FunAssetAvatar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BoxProps } from '../Box/Box';
 interface FunAssetAvatarProps {
-    assetSrc?: string | undefined;
+    assetSrc?: string;
     assetTicker?: string;
     assetName: string;
     assetIconSize?: BoxProps['height'] & BoxProps['width'];

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

@@ -1,2 +1,2 @@
-export declare const BOTTOM_BAR_TOP_PADDING: 18;
+export declare const BOTTOM_BAR_PADDING_Y: 18;
 export declare const topSectionDynamicPadding: string;

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

@@ -18,6 +18,7 @@ export interface FunIconButtonProps extends Pick<BoxProps, 'as' | 'borderRadius'
     gap?: BoxProps['gap'];
     ariaLabel?: string;
     renderAsSquare?: boolean;
+    /** Disables onClick but also disables focus via tabbing */
     isDisabled?: boolean;
     children?: React.ReactNode;
     /** Defaults to 'quiet' */

package/dist/components/FunPayments/FunPaymentMoonpayType.d.ts

@@ -5,6 +5,8 @@ export interface FunPaymentMoonpayProps {
     depositToken: string;
     depositTokenChainId: string;
     depositTokenAmount: number;
-    redirectToCheckoutHistory?: (depositAddress: Address) => void;
+    onUnsupportedRegion: () => void;
+    onTransactionCreated: () => void;
+    onTransactionCompleted: () => void;
 }
-export declare function FunPaymentMoonpayType({ paymentAddress, depositToken, depositTokenChainId, depositTokenAmount, redirectToCheckoutHistory, }: FunPaymentMoonpayProps): React.JSX.Element;
+export declare function FunPaymentMoonpayType({ paymentAddress, depositToken, depositTokenChainId, depositTokenAmount, onTransactionCompleted, onUnsupportedRegion, onTransactionCreated, }: FunPaymentMoonpayProps): React.JSX.Element;

package/dist/config/getDefaultConfig.d.ts

@@ -19,6 +19,39 @@ export declare const createFunkitWagmiConfig: (rawWagmiConfig: CreateFunkitWagmi
  * Get default funkit-supported checkout chains
  */
 export declare const getDefaultChains: () => ({
+    id: number;
+    name: string;
+    nativeCurrency: {
+        symbol: string;
+        decimals: number;
+        name: string;
+    };
+    rpcUrls: {
+        default: {
+            http: string[];
+        };
+    };
+    blockExplorers: {
+        default: {
+            name: string;
+            url: string;
+            apiUrl: string;
+        };
+    };
+    contracts: {
+        ensRegistry: {
+            address: `0x${string}`;
+        };
+        ensUniversalResolver: {
+            address: `0x${string}`;
+            blockCreated: number;
+        };
+        multicall3: {
+            address: `0x${string}`;
+            blockCreated: number;
+        };
+    };
+} | {
     blockExplorers: {
         readonly default: {
             readonly name: "Etherscan";
@@ -1041,39 +1074,6 @@ export declare const getDefaultChains: () => ({
     fees?: import("viem").ChainFees<undefined> | undefined;
     formatters?: undefined;
     serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
-} | {
-    id: number;
-    name: string;
-    nativeCurrency: {
-        symbol: string;
-        decimals: number;
-        name: string;
-    };
-    rpcUrls: {
-        default: {
-            http: string[];
-        };
-    };
-    blockExplorers: {
-        default: {
-            name: string;
-            url: string;
-            apiUrl: string;
-        };
-    };
-    contracts: {
-        ensRegistry: {
-            address: `0x${string}`;
-        };
-        ensUniversalResolver: {
-            address: `0x${string}`;
-            blockCreated: number;
-        };
-        multicall3: {
-            address: `0x${string}`;
-            blockCreated: number;
-        };
-    };
 } | {
     blockExplorers: {
         readonly default: {

package/dist/consts/assets.d.ts

@@ -1,4 +1,2 @@
-export declare const ASSET_LOGO_SRCS: {
-    [x: string]: string;
-};
+export declare const ASSET_LOGO_SRCS: Record<string, string>;
 export declare const FALLBACK_ASSET = "https://sdk-cdn.fun.xyz/images/dollar_circle.png";

package/dist/consts/mesh.d.ts

@@ -0,0 +1,36 @@
+export declare const FUNKIT_MESH_CLIENT_ID = "8132aff4-56c9-4b1d-85b4-08dbdcc6199d";
+export declare enum MeshExchanges {
+    Robinhood = "Robinhood",
+    ETrade = "ETrade",
+    Alpaca = "Alpaca",
+    WeBull = "WeBull",
+    Stash = "Stash",
+    InteractiveBrokers = "InteractiveBrokers",
+    Public = "Public",
+    Coinbase = "Coinbase",
+    Kraken = "Kraken",
+    CoinbasePro = "CoinbasePro",
+    CryptoCom = "CryptoCom",
+    Binance = "Binance",// BinanceInternationalDirect
+    BinanceUs = "BinanceUs",
+    Gemini = "Gemini",
+    OkCoin = "OkCoin",
+    KuCoin = "KuCoin",
+    Etoro = "Etoro",
+    CexIo = "CexIo",
+    Bitstamp = "Bitstamp",
+    GateIo = "GateIo",
+    Acorns = "Acorns",
+    Okx = "OKX",
+    BitFlyer = "BitFlyer",
+    Coinlist = "Coinlist",
+    Huobi = "Huobi",
+    Bitfinex = "Bitfinex",
+    KrakenDirect = "KrakenDirect",
+    Vanguard = "Vanguard",
+    BitfinexDirect = "Bitfinex (beta)",
+    Bybit = "Bybit"
+}
+export declare const EXCHANGE_NAME_TO_TYPE: {
+    [x: string]: string;
+};

package/dist/domains/paymentMethods.d.ts

@@ -1,5 +1,6 @@
 import { PreviewTransferResult } from '@funkit/api-base';
 import { LinkPayload } from '@meshconnect/web-link-sdk';
+import { MeshExchanges } from '~/consts/mesh';
 /** Supported payment methods in FunkitConnect. **/
 export declare enum PaymentMethod {
     /** Moonpay - Credit / Debit Card **/
@@ -16,29 +17,44 @@ type PaymentMethodInfoMeta = LinkPayload & {
     previewTransferResult?: PreviewTransferResult;
 };
 /** Full payment method information used in frontend during payment flows. **/
-export interface PaymentMethodInfo {
+interface PaymentMethodInfoBase {
     paymentMethod: PaymentMethod;
     title: string;
     description: string;
     meta: PaymentMethodInfoMeta;
 }
-export interface PaymentMethodCardInfo extends PaymentMethodInfo {
+export interface PaymentMethodCardInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.CARD;
 }
-export interface PaymentMethodBrokerageInfo extends PaymentMethodInfo {
+export interface PaymentMethodBrokerageInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.BROKERAGE;
 }
-export interface PaymentMethodAccountInfo extends PaymentMethodInfo {
+export interface PaymentMethodAccountInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.ACCOUNT_BALANCE;
 }
-export interface PaymentMethodTransferTokenInfo extends PaymentMethodInfo {
+export interface PaymentMethodTokenTransferInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.TOKEN_TRANSFER;
 }
-/** Shouldn't be used generally. Will most likely be removed once checkoutItem usage is reduced */
-export declare const getPartialPaymentMethodInfo: <T extends PaymentMethodInfo>(paymentMethod: T["paymentMethod"]) => {
-    paymentMethod: T["paymentMethod"];
-    title: string;
-    description: string;
-    meta: {};
-};
+export type PaymentMethodInfo = PaymentMethodCardInfo | PaymentMethodBrokerageInfo | PaymentMethodAccountInfo | PaymentMethodTokenTransferInfo;
+interface CardPaymentMethodParams {
+    paymentMethod: PaymentMethod.CARD;
+    /** We also store client's customization in our database :( */
+    titleCustomization: string;
+}
+interface AccountPaymentMethodParams {
+    paymentMethod: PaymentMethod.ACCOUNT_BALANCE;
+    walletAddress: string;
+}
+interface BrokeragePaymentMethodParams {
+    paymentMethod: PaymentMethod.BROKERAGE;
+    meshMeta: LinkPayload;
+    brokerage: MeshExchanges;
+}
+interface TokenTransferPaymentMethodParams {
+    paymentMethod: PaymentMethod.TOKEN_TRANSFER;
+}
+export declare function createPaymentMethodInfo(params: CardPaymentMethodParams): PaymentMethodCardInfo;
+export declare function createPaymentMethodInfo(params: AccountPaymentMethodParams): PaymentMethodAccountInfo;
+export declare function createPaymentMethodInfo(params: BrokeragePaymentMethodParams): PaymentMethodBrokerageInfo;
+export declare function createPaymentMethodInfo(params: TokenTransferPaymentMethodParams): PaymentMethodTokenTransferInfo;
 export {};

package/dist/domains/quote.d.ts

@@ -11,6 +11,21 @@ export type FunkitCheckoutQuoteResult = {
     finalTotalUsd: string;
     finalFeesBreakdown: CheckoutFees;
 };
-export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, sponsorInitialTransferGasLimit: number): Promise<CheckoutQuoteResponse>;
+export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, sponsorInitialTransferGasLimit: number, wagmiConfig: Config): Promise<CheckoutQuoteResponse>;
 export declare function getQuoteFinalEstimation(baseQuote: CheckoutQuoteResponse, checkoutItem: FunkitActiveCheckoutItem, newPaymentMethodInfo: PaymentMethodInfo, wagmiConfig: Config, apiKey: string, isWeb3Login: boolean): Promise<FunkitCheckoutQuoteResult>;
 export declare function getAvailableAssetAmount(checkoutItem: FunkitActiveCheckoutItem, newPaymentMethodInfo: PaymentMethodInfo, finalEstimation: FunkitCheckoutQuoteResult, wagmiConfig: Config, walletAddress: Address): Promise<number | undefined>;
+export interface CheckoutQuoteParams {
+    checkoutItem: FunkitActiveCheckoutItem;
+    userId: string;
+    walletAddress: Address;
+    apiKey: string;
+    sponsorInitialTransferGasLimit: number;
+    newPaymentMethodInfo: PaymentMethodInfo;
+    wagmiConfig: Config;
+    isWeb3Login: boolean;
+}
+export declare function getQuoteAndEstimation({ checkoutItem, userId, walletAddress, apiKey, sponsorInitialTransferGasLimit, newPaymentMethodInfo, wagmiConfig, isWeb3Login, }: CheckoutQuoteParams): Promise<{
+    baseQuote: CheckoutQuoteResponse;
+    finalEstimation: FunkitCheckoutQuoteResult;
+    avialableAssetAmount: number | undefined;
+}>;

package/dist/hooks/useEnabledTokenTransferChainTokens.d.ts

@@ -0,0 +1,2 @@
+import { TokenTransferSourceChainsAndAssets } from '~/modals/CheckoutModal/TransferToken';
+export declare function useEnabledTokenTransferChainTokens(): TokenTransferSourceChainsAndAssets;

package/dist/hooks/useMesh.d.ts

@@ -1,41 +1,24 @@
 import { LinkPayload } from '@meshconnect/web-link-sdk';
 import React, { ReactNode } from 'react';
 import { FunSelectOption } from '../components/FunSelect/FunSelect';
-import { PaymentMethodBrokerageInfo } from '../domains/paymentMethods';
 import { MeshExchanges } from '../utils/mesh';
 export declare const MESH_EXCHANGE_ICON_MAP: Partial<Record<MeshExchanges, (size: number) => ReactNode>>;
 export declare function getExchangeIcon(exchange: MeshExchanges, size: number): React.ReactNode;
 export declare const useSupportedExchanges: () => MeshExchanges[];
 export declare function getExchangeName(exchange: MeshExchanges): string;
-export declare const preparePaymentInfo: (meshMeta: LinkPayload, brokerage: MeshExchanges) => PaymentMethodBrokerageInfo;
 export declare const useMeshExchanges: ({ fullInfo, iconSize, }: {
     fullInfo?: boolean;
     iconSize?: number;
 }) => {
     options: FunSelectOption[];
 };
-/**
- * Fetches mesh-related network information across all chains, given an exchange
- * @param exchange The mesh exchange user is currently connected with
- */
-export declare const useMeshNetworkInfo: (exchange: MeshExchanges) => {
-    fetchInfo: () => Promise<import("@funkit/api-base").IntegrationNetworkInfo[]>;
-};
 /**
  * Fetches mesh-related network information based on the active chain user is logged in on, given an exchange
  * @param exchange The mesh exchange user is currently connected with
  */
-export declare const useMeshActiveNetworkInfo: (exchange?: MeshExchanges) => {
-    meshNetworkInfo: {
-        meshSupportedTokens: string[];
-        meshNetworkId: string | null;
-    };
-    fetchInfo: (chainId?: string) => Promise<{
-        meshSupportedTokens: string[];
-        meshNetworkId: string | undefined;
-    } | {
-        meshSupportedTokens: string[];
-        meshNetworkId: string | null;
-    }>;
-};
+export declare const useMeshActiveNetworkInfo: (chainId: string | undefined, exchange: MeshExchanges | undefined) => {
+    meshSupportedTokens: string[];
+    meshNetworkId: string | undefined;
+} | null;
+export declare function useMeshIntegrations(): import("@funkit/api-base").TransferIntegration[] | undefined;
 export declare function useMeshAccountHoldings(targetChain: string, connection: LinkPayload | null): import("@tanstack/react-query").UseQueryResult<import("../utils/assets").AssetHoldingsMap, Error>;

package/dist/index.css

@@ -6166,7 +6166,15 @@
   }
 }
 
-/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VTTW/jIBC991eMtJfkQOR8R+Sy6m/ofYVhGlAwWDCO7V3lv6+wXctOW22lak+IYea9B7y3+rUuf9Nus13DnyeAQjRMo7lo4rDf7MvmPBRro0hzWGfZrU61Yb/bZ6nn/rQacbgWcfFDtaphpWgLdMRibUhqDMt3HIfj/mF+0/cY90a57SlGyu07yl03kvugMIxCJxNSWLnolAODbVY2y/ODjFMWb3qGeegw/Q3Dq/U1azhooxS687TachAV+VSLMnhrcxHYpSLCwCGSyC3OzwZBlYtIczrOWY351RCjIOS1v5GQ10vwlVNMeusDh5sIC8bCtd9HVngl7PPYtvwMc1TQ4Q4qDv2z/gcWRroq8umvBKFMFSfQqWB65OXXVBAGMiK0L9jQXMLxHxK+d8HP0blOTvgiR0TpnfpQ/6mDUCaWVrQcXi12H5NWpkxAScY7DtLbqugM+Gbb5OnOtj8LVEYkoyE6EE7BYpKg4+FUNn32VvO4P+YY4D5t2gxNH6XxMY9p9P4XmWXCCU4EAAA= */
+/* vanilla-extract-css-ns:src/components/FunBottomBar/FunBottomBar.css.ts.vanilla.css?source=Lm41cXdpMCB7CiAgcGFkZGluZy10b3A6IDE4cHg7CiAgJjpub3QoOmVtcHR5KSA+IDpmaXJzdC1jaGlsZCB7CiAgICBtYXJnaW4tdG9wOiAtNnB4OwogIH0KfQ== */
+[data-rk] .n5qwi0 {
+  padding-top: 18px;
+  [data-rk] &:not(:empty) > :first-child {
+    margin-top: -6px;
+  }
+}
+
+/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VUy47jIBC8z1cg7SU5EDnOU+Symm+Y+wpDJyBjsKAd2zvKv4+wPVachzbSaE+IpruqGqpZ/FmWf3Gdrpbk842QgjdUgT4pZGSTbsrmMARrLVExskyScx1jw369SWLO5W0x4jDFw+yXbGVDS94WYJGGWqNQ4Od3HNvd5nE9uhwsRc9tOIKnJT/BffUuva1O+xxtvwWveoGj4NWd4HVXMhwLbsSsa5JQskrKZn644dwn4awmANsOwJ3BH42racOI0lKCPVxHW0Z4hS7GgvDOmIx7eqoQwTMSkGcGpmeDoMoGwCkdY7SGLNcYr0fkHXvGRX7yrrKSCmecZ+TM/YxSn/f7QAsnuXkf0+bPMEcFHa7UoTS8HXWMF7Xtb/U/8FJUVZH1XTkvwVPPpa7CFXQM6B55/poKBI+a+/YDGpxK2P1Dws8afI7OVPTGixwBhLPyof799J2OBrqHiSuV2oNA7Swjwpmq6Cz5beTo8s7IvwuQmkfrAVjCrSSzqwHabfdl04/eYvpX3H4ChFyuk9Ih6dEw3o5jLL18AemffvKLBAAA */
 [data-rk] ._1pzt4231 {
   max-height: 525px;
   max-width: 100vw;
@@ -6175,12 +6183,14 @@
 [data-rk] ._1pzt4231:has(#dydx-payment-switcher) {
   max-height: 675px;
 }
+[data-rk] ._1pzt4231:has(#token-transfer-page) {
+  max-height: 725px;
+}
 [data-rk] ._1pzt4232 {
   min-width: 350px;
   width: 350px;
 }
 [data-rk] ._1pzt4234 {
-  border-width: 1;
   width: calc(100vw - 30px);
   max-height: 80svh;
 }
@@ -6194,6 +6204,7 @@
   background-color: var(--rk-colors-modalBackground);
 }
 [data-rk] ._1pzt4236::-webkit-scrollbar {
+  display: unset;
   width: 6px;
   background-color: var(--rk-colors-modalBackground);
 }
@@ -6441,14 +6452,6 @@
   animation: _1tyx5nu7 1s;
 }
 
-/* vanilla-extract-css-ns:src/components/FunBottomBar/FunBottomBar.css.ts.vanilla.css?source=Lm41cXdpMCB7CiAgcGFkZGluZy10b3A6IDE4cHg7CiAgJjpub3QoOmVtcHR5KSA+IDpmaXJzdC1jaGlsZCB7CiAgICBtYXJnaW4tdG9wOiAtNnB4OwogIH0KfQ== */
-[data-rk] .n5qwi0 {
-  padding-top: 18px;
-  [data-rk] &:not(:empty) > :first-child {
-    margin-top: -6px;
-  }
-}
-
 /* vanilla-extract-css-ns:src/components/FunDivider/FunDivider.css.ts.vanilla.css?source=Ll8zZGtkc2MwIHsKICBib3JkZXItd2lkdGg6IDA7CiAgYm9yZGVyLXRvcC13aWR0aDogMXB4OwogIGZsZXg6IDE7Cn0= */
 [data-rk] ._3dkdsc0 {
   border-width: 0;