@funkit/connect 4.0.1 → 4.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @funkit/connect
 
+## 4.0.2
+
+### Patch Changes
+
+- 67b7b1e: feat(fits,connect,utils): add search suggestions (history), move safe json parsing to utils package
+- 76ac39b: fix: remove unused showAvailableBalance option
+- e2419b9: fix: pin datadog version
+- df63829: fix: update tsconfig version
+- 3519ae0: feat: new uiCustomization.showPaymentAmountUsd to show source token amount in confirmation page
+- Updated dependencies [67b7b1e]
+- Updated dependencies [df63829]
+  - @funkit/utils@1.0.2
+  - @funkit/api-base@1.4.1
+  - @funkit/core@2.2.8
+  - @funkit/wagmi-tools@3.0.19
+
 ## 4.0.1
 
 ### Patch Changes

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type PaymentMethodInfo } from '../../domains/paymentMethods';
 import type { FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
-import type { FunkitTextCustomizationsConfig, FunkitUiCustomRecipientConfig } from '../../providers/FunkitConfigContext';
+import { type FunkitTextCustomizationsConfig, type FunkitUiCustomRecipientConfig, type FunkitUiCustomizationsConfig } from '../../providers/FunkitConfigContext';
 interface PaymentMethodSummaryProps {
     paymentMethodInfo: PaymentMethodInfo;
     walletAddress: string | undefined;
@@ -16,6 +16,7 @@ interface PaymentAmountSummaryProps {
     targetChainId: string;
     checkoutItem: FunkitActiveCheckoutItem | null;
     textCustomizations: FunkitTextCustomizationsConfig['confirmationScreen'];
+    uiCustomizations: FunkitUiCustomizationsConfig['confirmationScreen'];
 }
-export declare function PaymentAmountSummary({ isLoading, targetChainId, checkoutItem, textCustomizations, }: PaymentAmountSummaryProps): React.JSX.Element;
+export declare function PaymentAmountSummary({ isLoading, targetChainId, checkoutItem, textCustomizations, uiCustomizations, }: PaymentAmountSummaryProps): React.JSX.Element;
 export {};

package/dist/domains/quote.d.ts

@@ -6,6 +6,7 @@ import type { LoginType } from '~/providers/GeneralWalletProvider';
 import { type CheckoutFees } from './checkoutFees';
 import { type PaymentMethodInfo } from './paymentMethods';
 export interface FunkitCheckoutQuoteResult extends Omit<ApiFunkitCheckoutQuoteResult, 'finalFeesBreakdown'> {
+    finalSpreadUsd: string;
     finalFeesBreakdown: CheckoutFees;
 }
 export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, sponsorInitialTransferGasLimit: number, wagmiConfig: Config): Promise<CheckoutQuoteResponse>;

package/dist/index.js

@@ -3209,11 +3209,14 @@ var flagConfig = {
     type: "string",
     default_value: JSON.stringify({
       // mainnet
-      1: ["USDC", "DAI", "ETH"],
+      // 1: ['USDC', 'DAI', 'ETH'],
+      1: ["USDC", "DAI"],
       // base
-      8453: ["USDC", "USDT", "DAI", "ETH", "WETH"],
+      8453: ["USDC", "USDT", "DAI", "WETH"],
+      // 8453: ['USDC', 'USDT', 'DAI', 'ETH', 'WETH'],
       // arbitrum
-      42161: ["USDC", "USDT", "DAI", "ETH", "WETH"],
+      42161: ["USDC", "USDT", "DAI", "WETH"],
+      // 42161: ['USDC', 'USDT', 'DAI', 'ETH', 'WETH'],
       // polygon
       137: ["USDC", "USDC.e", "USDT", "DAI", "WETH"]
     })
@@ -6187,6 +6190,7 @@ async function getQuoteFinalEstimation(baseQuote, checkoutItem, newPaymentMethod
   }
   const finalEstimation = {
     baseQuote,
+    finalSpreadUsd: (baseQuote.estTotalUsd - baseQuote.estSubtotalUsd - (baseQuote.estMarketMakerGasUsd ?? 0) - (baseQuote.lpFeeUsd ?? 0)).toString(),
     finalFeesBreakdown,
     finalPaymentTokenAmount: finalPaymentTokenAmount.toString(),
     finalTimeEstimationMs,
@@ -12117,14 +12121,11 @@ import { getRiskAssessmentForAddress } from "@funkit/api-base";
 import { useQuery as useQuery3 } from "@tanstack/react-query";
 
 // src/utils/safeJSON.ts
+import { safeParseJson } from "@funkit/utils";
 function safeJSONParse(src) {
-  if (!src) return null;
-  try {
-    return JSON.parse(src);
-  } catch (e) {
+  return safeParseJson(src, (e) => {
     logger.error("parseJSON:error", e);
-    return null;
-  }
+  });
 }
 
 // src/hooks/useIsCheckoutRisky.ts
@@ -12677,7 +12678,11 @@ function FeeLineItem({
 
 // src/components/FunTransactionSummary/PaymentMethodSummary.tsx
 import { STABLECOIN_SYMBOLS as STABLECOIN_SYMBOLS2 } from "@funkit/core";
-import { formatAddress as formatAddress5, formatSecondsToReadableForm as formatSecondsToReadableForm2 } from "@funkit/utils";
+import {
+  formatAddress as formatAddress5,
+  formatCurrencyAndStringify as formatCurrencyAndStringify5,
+  formatSecondsToReadableForm as formatSecondsToReadableForm2
+} from "@funkit/utils";
 import { formatCryptoAndStringify as formatCryptoAndStringify3 } from "@funkit/utils";
 import React137, { useMemo as useMemo21, useState as useState33 } from "react";
 
@@ -12746,20 +12751,27 @@ function PaymentAmountSummary({
   isLoading,
   targetChainId,
   checkoutItem,
-  textCustomizations
+  textCustomizations,
+  uiCustomizations
 }) {
+  const { apiKey } = useFunkitConfig();
   const checkoutConfig = checkoutItem?.initSettings.config;
   const sourceSymbol = checkoutItem?.selectedSourceAssetInfo.symbol ?? "";
   const targetSymbol = checkoutConfig?.targetAssetTicker ?? "";
-  const areSameAssets = sourceSymbol === targetSymbol;
-  const areBothStablecoins = STABLECOIN_SYMBOLS2.includes(sourceSymbol) && STABLECOIN_SYMBOLS2.includes(targetSymbol);
-  const sourceTokenAmount = checkoutItem?.latestQuote?.finalPaymentTokenAmount || "0";
+  const isSourceStablecoin = STABLECOIN_SYMBOLS2.includes(sourceSymbol);
+  const areBothStablecoins = isSourceStablecoin && STABLECOIN_SYMBOLS2.includes(targetSymbol);
+  const sourceTokenAmount = Number.parseFloat(
+    checkoutItem?.latestQuote?.finalPaymentTokenAmount || "0"
+  );
   const paymentTokenString = useMemo21(() => {
-    return formatCryptoAndStringify3(
-      Number.parseFloat(sourceTokenAmount || "0"),
-      sourceSymbol
-    );
+    return formatCryptoAndStringify3(sourceTokenAmount, sourceSymbol);
   }, [sourceTokenAmount, sourceSymbol]);
+  const paymentTokenUsdAmount = useMemo21(() => {
+    if (!checkoutItem?.latestQuote) return void 0;
+    return formatCurrencyAndStringify5(
+      checkoutItem.latestQuote.baseQuote.estSubtotalUsd + Number.parseFloat(checkoutItem.latestQuote.finalPaymentFeeUsd) - Number.parseFloat(checkoutItem.latestQuote.finalSpreadUsd)
+    );
+  }, [checkoutItem?.latestQuote]);
   const targetTokenString = useMemo21(() => {
     const targetItemName = checkoutConfig?.targetAssetTicker || checkoutConfig?.checkoutItemTitle;
     const targetTokenAmount = checkoutConfig?.targetAssetAmount ?? 0;
@@ -12768,14 +12780,16 @@ function PaymentAmountSummary({
   const sourceChainId = checkoutItem?.selectedSourceAssetInfo.chainId;
   const areSameChains = sourceChainId === targetChainId;
   const sourceIcon = checkoutItem?.selectedSourceAssetInfo.iconSrc ?? void 0;
-  const showYouWillPaySummary = !areSameAssets && !areBothStablecoins;
+  const areSameAssets = sourceSymbol === targetSymbol;
+  const showYouWillPaySummary = isDydxCustomer(apiKey) || !areSameAssets && !areBothStablecoins;
   return /* @__PURE__ */ React137.createElement(FunTxSummaryBox, null, showYouWillPaySummary && /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(
     PaymentAmountSummaryItem,
     {
       sourceChainId,
       destinationChainId: targetChainId,
       label: "You will pay",
-      paymentTokenString,
+      paymentTokenAmount: paymentTokenString,
+      paymentUsdAmount: uiCustomizations?.showPaymentAmountUsd ? paymentTokenUsdAmount : void 0,
       icon: /* @__PURE__ */ React137.createElement(
         FunAssetAvatar,
         {
@@ -12787,8 +12801,7 @@ function PaymentAmountSummary({
           hideIfUnknown: true
         }
       ),
-      isLoading,
-      enableChainDetailExpand: false
+      isLoading
     }
   ), /* @__PURE__ */ React137.createElement(FunTxSummaryDivider, null)), /* @__PURE__ */ React137.createElement(
     PaymentAmountSummaryItem,
@@ -12796,7 +12809,7 @@ function PaymentAmountSummary({
       sourceChainId,
       destinationChainId: targetChainId,
       label: textCustomizations?.receiveAmountLabel ?? "You will receive",
-      paymentTokenString: targetTokenString,
+      paymentTokenAmount: targetTokenString,
       icon: /* @__PURE__ */ React137.createElement(
         FunAssetAvatar,
         {
@@ -12810,8 +12823,7 @@ function PaymentAmountSummary({
           assetName: "checkout-asset"
         }
       ),
-      isLoading,
-      enableChainDetailExpand: false
+      isLoading
     }
   ));
 }
@@ -12820,9 +12832,10 @@ function PaymentAmountSummaryItem({
   destinationChainId,
   isLoading,
   label,
-  paymentTokenString,
+  paymentTokenAmount,
+  paymentUsdAmount,
   icon,
-  enableChainDetailExpand
+  enableChainDetailExpand = false
 }) {
   const [isExpanded, setIsExpanded] = useState33(false);
   const toggle = () => setIsExpanded(!isExpanded);
@@ -12833,41 +12846,21 @@ function PaymentAmountSummaryItem({
       onClick: toggle
     },
     /* @__PURE__ */ React137.createElement(FunTxSummaryLineItemKeyText, { text: label }),
-    isLoading ? /* @__PURE__ */ React137.createElement(Box, { alignItems: "center", display: "flex", gap: "8" }, /* @__PURE__ */ React137.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React137.createElement(FunSkeletonBlock, { height: "10", width: "93" })) : /* @__PURE__ */ React137.createElement(
+    isLoading ? /* @__PURE__ */ React137.createElement(Box, { alignItems: "center", display: "flex", gap: "8" }, /* @__PURE__ */ React137.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React137.createElement(FunSkeletonBlock, { height: "10", width: "93" })) : /* @__PURE__ */ React137.createElement(Box, { display: "flex", justifyContent: "flex-end", flexDirection: "column" }, /* @__PURE__ */ React137.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, icon, /* @__PURE__ */ React137.createElement(Text, { weight: "medium", size: "12", style: { textAlign: "end" } }, paymentTokenAmount), enableChainDetailExpand && /* @__PURE__ */ React137.createElement(
       Box,
       {
+        color: "secondaryText",
+        width: "8",
+        height: "8",
         display: "flex",
         alignItems: "center",
-        justifyContent: "flex-end",
-        gap: "5"
+        justifyContent: "center",
+        style: {
+          transform: `rotate(${isExpanded ? "0deg" : "-90deg"})`
+        }
       },
-      icon,
-      /* @__PURE__ */ React137.createElement(
-        Text,
-        {
-          weight: "medium",
-          color: "primaryText",
-          size: "12",
-          style: { textAlign: "end" }
-        },
-        paymentTokenString
-      ),
-      enableChainDetailExpand && /* @__PURE__ */ React137.createElement(
-        Box,
-        {
-          color: "secondaryText",
-          width: "8",
-          height: "8",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          style: {
-            transform: `rotate(${isExpanded ? "0deg" : "-90deg"})`
-          }
-        },
-        /* @__PURE__ */ React137.createElement(CaretDownIcon, null)
-      )
-    )
+      /* @__PURE__ */ React137.createElement(CaretDownIcon, null)
+    )), paymentUsdAmount && /* @__PURE__ */ React137.createElement(Text, { size: "10", color: "secondaryText", textAlign: "right" }, paymentUsdAmount))
   ), enableChainDetailExpand && /* @__PURE__ */ React137.createElement(FunTxSummaryCollapsibleBox, { isExpanded }, /* @__PURE__ */ React137.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React137.createElement(FunTxSummaryLineItemKeyText, { text: "Source chain" }), isLoading ? /* @__PURE__ */ React137.createElement(FunSkeletonBlock, { height: "10", width: "54" }) : /* @__PURE__ */ React137.createElement(
     Box,
     {
@@ -12908,7 +12901,7 @@ function PaymentAmountSummaryItem({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/CheckoutPrimaryInfo.tsx
-import { formatCurrencyAndStringify as formatCurrencyAndStringify5 } from "@funkit/utils";
+import { formatCurrencyAndStringify as formatCurrencyAndStringify6 } from "@funkit/utils";
 import React138 from "react";
 function CheckoutPrimaryInfoSnapshot({
   checkoutItem,
@@ -12926,7 +12919,7 @@ function CheckoutPrimaryInfoSnapshot({
       justifyContent: "center",
       gap: "4"
     },
-    isLoading ? /* @__PURE__ */ React138.createElement(FunSkeletonBlock, { height: "48", width: "120" }) : /* @__PURE__ */ React138.createElement(Text, { color: "primaryText", size: "40", weight: "medium", textAlign: "center" }, formatCurrencyAndStringify5(displayDollarValue)),
+    isLoading ? /* @__PURE__ */ React138.createElement(FunSkeletonBlock, { height: "48", width: "120" }) : /* @__PURE__ */ React138.createElement(Text, { color: "primaryText", size: "40", weight: "medium", textAlign: "center" }, formatCurrencyAndStringify6(displayDollarValue)),
     showTokenAmount && /* @__PURE__ */ React138.createElement(Box, { display: "flex", gap: "5", justifyContent: "center" }, checkoutConfig.iconSrc ? /* @__PURE__ */ React138.createElement(
       FunAssetAvatar,
       {
@@ -14296,7 +14289,8 @@ function ConfirmationStep({
       isLoading: isQuoting,
       targetChainId,
       checkoutItem,
-      textCustomizations
+      textCustomizations,
+      uiCustomizations
     }
   ), /* @__PURE__ */ React143.createElement(PaymentFeesSummary, { isLoading: isQuoting, checkoutItem }), /* @__PURE__ */ React143.createElement(
     FunAlert,
@@ -14564,7 +14558,7 @@ import React156 from "react";
 // src/modals/CheckoutModal/InputAmount/InputAmountLoaded.tsx
 import {
   formatCryptoAndStringify as formatCryptoAndStringify4,
-  formatCurrencyAndStringify as formatCurrencyAndStringify7,
+  formatCurrencyAndStringify as formatCurrencyAndStringify8,
   round as round3
 } from "@funkit/utils";
 import React154, { useMemo as useMemo25 } from "react";
@@ -14630,7 +14624,7 @@ var useDynamicFont = (inputValue, max, min = 16) => {
 
 // src/modals/CheckoutModal/InputAmount/AvailableBalance.tsx
 import {
-  formatCurrencyAndStringify as formatCurrencyAndStringify6,
+  formatCurrencyAndStringify as formatCurrencyAndStringify7,
   isMobile as isMobile10,
   isNotNullish as isNotNullish9
 } from "@funkit/utils";
@@ -14650,7 +14644,7 @@ function AvailableBalanceInner({
       assetName: sourceHolding.symbol,
       assetIconSize: "12"
     }
-  ), /* @__PURE__ */ React151.createElement(Text, { size: "10", color: "primaryText" }, formatCurrencyAndStringify6(usdAvailableAmount), " available"));
+  ), /* @__PURE__ */ React151.createElement(Text, { size: "10", color: "primaryText" }, formatCurrencyAndStringify7(usdAvailableAmount), " available"));
 }
 var AvailableBalance = (props) => {
   return /* @__PURE__ */ React151.createElement(
@@ -14682,7 +14676,6 @@ function InputAmountLayout({
   const funkitConfig = useFunkitConfig();
   const uiCustomizations = funkitConfig.uiCustomizations?.inputAmountScreen;
   const allowTokenAmountInput = uiCustomizations?.allowTokenAmountInput ?? true;
-  const showAvailableBalance = uiCustomizations?.showAvailableBalance ?? true;
   const bottomSectionRef = useBottomSectionRef();
   return /* @__PURE__ */ React152.createElement(Box, { display: "flex", flexDirection: "column", width: "full", style: { flex: 1 } }, /* @__PURE__ */ React152.createElement(
     Box,
@@ -14761,7 +14754,7 @@ function InputAmountLayout({
               }
             )
           )
-        ), showAvailableBalance && availableBalance),
+        ), availableBalance),
         actionButtonProps
       }
     ),
@@ -15100,7 +15093,7 @@ function InputAmountLoaded({
     switch (inputError?.type) {
       case "aboveAvailable": {
         return {
-          message: `Insufficient funds to purchase ${formatCurrencyAndStringify7(
+          message: `Insufficient funds to purchase ${formatCurrencyAndStringify8(
             usdAmount
           )} of ${checkoutItemTitle}. Please either lower the checkout amount, select an alternative asset, or another payment method.`,
           type: "error"
@@ -15108,7 +15101,7 @@ function InputAmountLoaded({
       }
       case "aboveMax": {
         return {
-          message: `${formatCurrencyAndStringify7(
+          message: `${formatCurrencyAndStringify8(
             inputError.usdMaxAmount
           )} maximum order`,
           type: "hint"
@@ -15116,7 +15109,7 @@ function InputAmountLoaded({
       }
       case "belowMin": {
         return {
-          message: `${formatCurrencyAndStringify7(
+          message: `${formatCurrencyAndStringify8(
             inputError.usdMinAmount
           )} minimum order`,
           type: "hint"
@@ -15236,7 +15229,7 @@ function InputAmountLoaded({
               color: { base: "actionColor", hover: "actionColorHover" },
               onClick: handleIsAmountInAbsoluteToggle
             },
-            /* @__PURE__ */ React154.createElement(Text, { color: "actionColorDisabled", size: "14" }, isInputInUsd ? formatCryptoAndStringify4(assetAmount, targetAssetTicker) : formatCurrencyAndStringify7(usdAmount))
+            /* @__PURE__ */ React154.createElement(Text, { color: "actionColorDisabled", size: "14" }, isInputInUsd ? formatCryptoAndStringify4(assetAmount, targetAssetTicker) : formatCurrencyAndStringify8(usdAmount))
           )
         )
       ),
@@ -15543,7 +15536,7 @@ import React160 from "react";
 // src/components/FunAsset/FunAssetItem.tsx
 import {
   formatCryptoAndStringify as formatCryptoAndStringify6,
-  formatCurrencyAndStringify as formatCurrencyAndStringify8,
+  formatCurrencyAndStringify as formatCurrencyAndStringify9,
   isNotNullish as isNotNullish10
 } from "@funkit/utils";
 import React159 from "react";
@@ -15731,7 +15724,7 @@ var FunAssetItem = ({
           gap: "12"
         },
         badgeText ? /* @__PURE__ */ React159.createElement(FunAssetBadge, null, badgeText) : null,
-        /* @__PURE__ */ React159.createElement(Box, { fontSize: TEXT_SIZE_MEDIUM2, fontWeight: "medium" }, formatCurrencyAndStringify8(asset.usdAmount || 0))
+        /* @__PURE__ */ React159.createElement(Box, { fontSize: TEXT_SIZE_MEDIUM2, fontWeight: "medium" }, formatCurrencyAndStringify9(asset.usdAmount || 0))
       )
     )
   );
@@ -16412,7 +16405,7 @@ function MoonpaySetup({
 }
 
 // src/modals/CheckoutModal/SelectAsset.tsx
-import { formatCurrencyAndStringify as formatCurrencyAndStringify9 } from "@funkit/utils";
+import { formatCurrencyAndStringify as formatCurrencyAndStringify10 } from "@funkit/utils";
 import React172, { useEffect as useEffect34, useMemo as useMemo33, useState as useState47 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
@@ -16795,7 +16788,7 @@ function SelectWalletAsset({
     {
       isSource: true,
       keyText: getWalletLabel(textCustomizations, walletAddress),
-      disclaimerText: formatCurrencyAndStringify9(totalBalance),
+      disclaimerText: formatCurrencyAndStringify10(totalBalance),
       keyIcon: label.icon,
       onClick: onSelectSource
     }
@@ -16841,7 +16834,7 @@ function SelectMeshAsset({
     {
       isSource: true,
       keyText: label.text,
-      disclaimerText: formatCurrencyAndStringify9(totalBalance),
+      disclaimerText: formatCurrencyAndStringify10(totalBalance),
       keyIcon: label.icon,
       onClick: onSelectSource
     }
@@ -17015,7 +17008,7 @@ import { isNotNullish as isNotNullish11 } from "@funkit/utils";
 import React176, { useEffect as useEffect35, useState as useState50 } from "react";
 
 // src/components/FunPayments/FunPaymentMethods.tsx
-import { formatCurrencyAndStringify as formatCurrencyAndStringify10 } from "@funkit/utils";
+import { formatCurrencyAndStringify as formatCurrencyAndStringify11 } from "@funkit/utils";
 import React175, { Fragment as Fragment4 } from "react";
 
 // src/hooks/useEnabledTokenTransferChainTokens.ts
@@ -17859,7 +17852,7 @@ var ConnectedMeshPaymentMethodItem = ({
   } = useMeshAccountHoldings(targetChainId, paymentMethodInfo.meta);
   const sourceBalance = meshAssets ? getTotalAssetBalance(meshAssets) : 0;
   const label = usePaymentMethodInfoLabel(paymentMethodInfo);
-  const disclaimerText = isPending ? "Fetching balance..." : balanceError ? "Couldn't fetch balance" : `${formatCurrencyAndStringify10(sourceBalance)} \u2022 3 mins`;
+  const disclaimerText = isPending ? "Fetching balance..." : balanceError ? "Couldn't fetch balance" : `${formatCurrencyAndStringify11(sourceBalance)} \u2022 3 mins`;
   const isDisabled = !!balanceError || sourceBalance < 0.01;
   return /* @__PURE__ */ React175.createElement(
     FunPaymentMethodItem,
@@ -17894,7 +17887,7 @@ var AccountBalancePaymentMethodItem = ({
     );
     return /* @__PURE__ */ React175.createElement(SupportedChainList, { chainIdList: uniqueChainIds });
   };
-  const dynamicLimit = formatCurrencyAndStringify10(sourceBalance);
+  const dynamicLimit = formatCurrencyAndStringify11(sourceBalance);
   const disclaimerText = `${dynamicLimit ?? "No limit"} \u2022 Instant`;
   const isClickable = sourceBalance !== void 0 && sourceBalance > 0.01;
   const isDisabled = !isClickable || isLoadingAssets;
@@ -18339,7 +18332,7 @@ function SourceChange({
 }
 
 // src/modals/CheckoutModal/TransferToken.tsx
-import { formatCurrencyAndStringify as formatCurrencyAndStringify11 } from "@funkit/utils";
+import { formatCurrencyAndStringify as formatCurrencyAndStringify12 } from "@funkit/utils";
 import React182, { useCallback as useCallback37, useState as useState54 } from "react";
 import { mainnet as mainnet7, polygon as polygon4 } from "viem/chains";
 
@@ -18935,7 +18928,7 @@ function TransferToken({
           justifyContent: "space-between"
         },
         /* @__PURE__ */ React182.createElement(Text, { size: "12", color: "secondaryText", weight: "medium" }, "Min. transfer amount"),
-        /* @__PURE__ */ React182.createElement(Text, { size: "12", color: "primaryText", weight: "medium" }, minTransferUsd === 0 ? "No minimum" : formatCurrencyAndStringify11(minTransferUsd))
+        /* @__PURE__ */ React182.createElement(Text, { size: "12", color: "primaryText", weight: "medium" }, minTransferUsd === 0 ? "No minimum" : formatCurrencyAndStringify12(minTransferUsd))
       )
     ),
     showOriginalRecipient ? null : /* @__PURE__ */ React182.createElement(Box, { display: "flex", flexDirection: "column", gap: "14", width: "full" }, /* @__PURE__ */ React182.createElement(Text, { size: "12", color: "secondaryText", weight: "medium" }, "Transfer ", selectedToken, " (", selectedChainInfo.name, ") to the deposit address above. The equivalent USD value (minus", " ", /* @__PURE__ */ React182.createElement(
@@ -20223,7 +20216,7 @@ function ShowBalanceProvider({ children }) {
 var useShowBalance = () => useContext20(ShowBalanceContext);
 
 // src/components/ConnectButton/ConnectButtonRenderer.tsx
-import { formatCurrencyAndStringify as formatCurrencyAndStringify12, isMobile as isMobile14, noop as noop6 } from "@funkit/utils";
+import { formatCurrencyAndStringify as formatCurrencyAndStringify13, isMobile as isMobile14, noop as noop6 } from "@funkit/utils";
 import React190 from "react";
 import { useAccount as useAccount12, useBalance, useConfig as useConfig6 } from "wagmi";
 
@@ -20308,7 +20301,7 @@ function ConnectButtonRenderer({
     query: { structuralSharing: false }
   });
   const balanceNativeAmount = balanceData ? `${abbreviateETHBalance(Number.parseFloat(balanceData.formatted))} ${balanceData.symbol}` : void 0;
-  const displayBalance = formatCurrencyAndStringify12(
+  const displayBalance = formatCurrencyAndStringify13(
     Number.parseFloat(totalWalletAssetsUsd.toString())
   );
   const { openConnectModal } = useConnectModal();
@@ -21111,7 +21104,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "4.0.1";
+  return "4.0.2";
 }
 function useFingerprint() {
   const fingerprint = useCallback42(() => {

package/dist/providers/FunkitConfigContext.d.ts

@@ -22,14 +22,14 @@ export interface FunkitUiCustomizationsConfig {
     confirmationScreen?: {
         /** Whether to show the amount of tokens below the USD equivalent - defaults to true */
         showTokenAmount?: boolean;
+        /** Whether to show the total payment amount in USD below the token amount equivalent. Defaults to false */
+        showPaymentAmountUsd?: 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 */
         allowTokenAmountInput?: boolean;
-        /** Whether to show available balance in Input Amount screen (wallet/brokerage only) - defaults to true */
-        showAvailableBalance?: boolean;
     };
     paymentMethods?: {
         /** Whether paying by card is a payment method the users can use - defaults to true */

package/dist/utils/safeJSON.d.ts

@@ -1 +1,4 @@
+/**
+ * This function is a wrapper around `safeParseJson()` from our `@funkit/utils` package with logging errors to our logger.
+ */
 export declare function safeJSONParse<T>(src?: string): T | null;

package/dist/wallets/walletConnectors/bifrostWallet/bifrostWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   bifrostWallet
-} from "../chunk-W6N74MS3.js";
-import "../chunk-23WIEY36.js";
+} from "../chunk-545L7Y4M.js";
 import "../chunk-WRA2DVJ7.js";
+import "../chunk-23WIEY36.js";
 export {
   bifrostWallet
 };

package/dist/wallets/walletConnectors/bitgetWallet/bitgetWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   bitgetWallet
-} from "../chunk-A5APNTGL.js";
-import "../chunk-23WIEY36.js";
+} from "../chunk-7GSNBOD3.js";
 import "../chunk-WRA2DVJ7.js";
+import "../chunk-23WIEY36.js";
 export {
   bitgetWallet
 };

package/dist/wallets/walletConnectors/bybitWallet/bybitWallet.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   bybitWallet
-} from "../chunk-6ONTSPEY.js";
-import "../chunk-23WIEY36.js";
+} from "../chunk-W5O4YSZN.js";
 import "../chunk-WRA2DVJ7.js";
+import "../chunk-23WIEY36.js";
 export {
   bybitWallet
 };

package/dist/wallets/walletConnectors/chunk-25VW5TZP.js

@@ -0,0 +1,92 @@
+"use client";
+import {
+  getInjectedConnector,
+  hasInjectedProvider
+} from "./chunk-WRA2DVJ7.js";
+import {
+  getWalletConnectConnector
+} from "./chunk-23WIEY36.js";
+
+// src/wallets/walletConnectors/roninWallet/roninWallet.ts
+var roninWallet = ({
+  projectId,
+  walletConnectParameters
+}) => {
+  const isRoninInjected = hasInjectedProvider({
+    namespace: "ronin.provider"
+  });
+  return {
+    id: "ronin",
+    name: "Ronin Wallet",
+    iconUrl: async () => (await import("./roninWallet-SAB5ESVK.js")).default,
+    iconBackground: "#ffffff",
+    rdns: "com.roninchain.wallet",
+    installed: isRoninInjected || void 0,
+    downloadUrls: {
+      android: "https://play.google.com/store/apps/details?id=com.skymavis.genesis",
+      ios: "https://apps.apple.com/us/app/ronin-wallet/id1592675001",
+      mobile: "https://wallet.roninchain.com",
+      chrome: "https://chrome.google.com/webstore/detail/ronin-wallet/fnjhmkhhmkbjkkabndcnnogagogbneec",
+      edge: "https://microsoftedge.microsoft.com/addons/detail/ronin-wallet/kjmoohlgokccodicjjfebfomlbljgfhk",
+      firefox: "https://addons.mozilla.org/firefox/addon/ronin-wallet",
+      browserExtension: "https://wallet.roninchain.com/",
+      qrCode: "https://wallet.roninchain.com/"
+    },
+    mobile: {
+      getUri: (uri) => `roninwallet://wc?uri=${encodeURIComponent(uri)}`
+    },
+    qrCode: {
+      getUri: (uri) => uri,
+      instructions: {
+        learnMoreUrl: "https://wallet.roninchain.com/",
+        steps: [
+          {
+            description: "wallet_connectors.ronin.qr_code.step1.description",
+            step: "install",
+            title: "wallet_connectors.ronin.qr_code.step1.title"
+          },
+          {
+            description: "wallet_connectors.ronin.qr_code.step2.description",
+            step: "create",
+            title: "wallet_connectors.ronin.qr_code.step2.title"
+          },
+          {
+            description: "wallet_connectors.ronin.qr_code.step3.description",
+            step: "scan",
+            title: "wallet_connectors.ronin.qr_code.step3.title"
+          }
+        ]
+      }
+    },
+    extension: {
+      instructions: {
+        learnMoreUrl: "https://wallet.roninchain.com/",
+        steps: [
+          {
+            description: "wallet_connectors.ronin.extension.step1.description",
+            step: "install",
+            title: "wallet_connectors.ronin.extension.step1.title"
+          },
+          {
+            description: "wallet_connectors.ronin.extension.step2.description",
+            step: "create",
+            title: "wallet_connectors.ronin.extension.step2.title"
+          },
+          {
+            description: "wallet_connectors.ronin.extension.step3.description",
+            step: "refresh",
+            title: "wallet_connectors.ronin.extension.step3.title"
+          }
+        ]
+      }
+    },
+    createConnector: isRoninInjected ? getInjectedConnector({ namespace: "ronin.provider" }) : getWalletConnectConnector({
+      projectId,
+      walletConnectParameters
+    })
+  };
+};
+
+export {
+  roninWallet
+};