@funkit/connect 6.0.7 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @funkit/connect
 
+## 6.1.0
+
+### Minor Changes
+
+- 0804213: Add configurable transaction digest display for fee breakdown summary with chain-dependent formatting
+
+### Patch Changes
+
+- f25fb68: feat(connect): transaction flow updates
+- 2a960b7: do not fetch userip if apikey is not available
+
 ## 6.0.7
 
 ### Patch Changes

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
-import {
-  darkTheme
-} from "./chunk-WDHT73AM.js";
 import {
   lightTheme
 } from "./chunk-ZDHRMKMT.js";
+import {
+  darkTheme
+} from "./chunk-WDHT73AM.js";
 import {
   systemFontStack
 } from "./chunk-7HKC2KCK.js";
@@ -3290,6 +3290,7 @@ function useFunkitUserIp() {
         throw error;
       }
     },
+    enabled: !!moonpayApiKey,
     // no need to refetch as aggressively
     refetchOnMount: false,
     refetchOnReconnect: true,
@@ -5872,7 +5873,8 @@ function StatusIcon({
     {
       animate: { height: backgroundSize, width: backgroundSize },
       className: slots.container,
-      initial: animateEntrance ? { height: iconSize, width: iconSize } : false
+      initial: animateEntrance ? { height: iconSize, width: iconSize } : false,
+      transition: { duration: 0.2 }
     },
     /* @__PURE__ */ React44.createElement("div", { className: slots.background[variant] }),
     /* @__PURE__ */ React44.createElement(
@@ -5998,7 +6000,7 @@ var DEPOSIT_TEXT_CONFIG_STEPS = {
   },
   2: {
     title: "Depositing into your account...",
-    description: "It will take around one minute to finalize."
+    description: "It will take a few seconds to finalize."
   }
 };
 var WITHDRAWAL_TEXT_CONFIG_STEPS = {
@@ -6013,7 +6015,7 @@ var STEP_SPINNER_SIZE_BIG_SCALE = 1;
 var STEP_SPINNER_SIZE_SMALL_SCALE = 28 / 30;
 var STEP_SPINNER_STROKE_WIDTH = 2;
 var STEP_SPINNER_GROWTH_MARGIN = 5;
-var STEP_SPINNER_SPIN_DURATION_MS = 1e3;
+var STEP_SPINNER_SPIN_DURATION_MS = 700;
 var STEP_SPINNER_ARC_SPAN_DEGREES = 60;
 var STEP_SPINNER_MORPH_DEGREES = 45;
 var STEP_SPINNER_MORPH_MAX_OFFSET = 4;
@@ -6178,6 +6180,46 @@ function TransactionStatus({
     },
     [animate, stopSpinning]
   );
+  const animateCircleToSuccess = useCallback10(
+    async (step2) => {
+      const durationMs = 300;
+      const checkmarkDelayMs = 50;
+      const duration = durationMs / 1e3;
+      const checkmarkDelay = checkmarkDelayMs / 1e3;
+      await Promise.all([
+        // Change the spinner outline to solid green
+        animate(
+          `.framer-step-circle-${step2}-spinner-circle`,
+          { opacity: 1, stroke: SUCCESS_COLOR, strokeDasharray: 0 },
+          { duration }
+        ),
+        // Hide the spinner arc
+        animate(
+          `.framer-step-circle-${step2}-spinner-arc`,
+          { opacity: 0 },
+          { duration }
+        ),
+        // Hide the step number
+        animate(
+          `.framer-step-circle-${step2}-label`,
+          { opacity: 0, filter: "blur(4px)" },
+          { duration }
+        ),
+        // Draw the checkmark (after a short delay)
+        animate(
+          `.framer-step-circle-${step2}-checkmark`,
+          { opacity: 1, pathLength: 1 },
+          { delay: checkmarkDelay, duration: duration - checkmarkDelay }
+        )
+      ]);
+      animate(
+        `.framer-step-circle-${step2}-spinner`,
+        { rotate: [0, 0] },
+        { duration: 0.1 }
+      );
+    },
+    [animate]
+  );
   useEffect9(() => {
     if (initialStatus === "progress") {
       startSpinning(initialStep);
@@ -6192,46 +6234,18 @@ function TransactionStatus({
         setCurrentStatus(status);
       } else if (status === "success") {
         async function doFancySuccessAnimation() {
-          await Promise.all(
-            // For all steps...
-            STEPS.flatMap((step2) => [
-              // Change the spinner outline to solid green
-              animate(
-                `.framer-step-circle-${step2}-spinner-circle`,
-                { opacity: 1, stroke: SUCCESS_COLOR, strokeDasharray: 0 },
-                { duration: 0.3 }
-              ),
-              // Hide the spinner arc
-              animate(
-                `.framer-step-circle-${step2}-spinner-arc`,
-                { opacity: 0 },
-                { duration: 0.3 }
-              ),
-              // Hide the step number
-              animate(
-                `.framer-step-circle-${step2}-label`,
-                { opacity: 0 },
-                { duration: 0.3 }
-              ),
-              // Draw the checkmark
-              animate(
-                `.framer-step-circle-${step2}-checkmark`,
-                { opacity: 1, pathLength: 1 },
-                { duration: 0.3 }
-              )
-            ])
-          );
+          await Promise.all(STEPS.map(animateCircleToSuccess));
           stopSpinning();
           animate(
             ".framer-step-circle-dots",
             { opacity: 0 },
-            { delay: 0.2, duration: 0.3 }
+            { delay: 0.1, duration: 0.3, ease: "easeIn" }
           );
           for (const step2 of STEPS) {
             animate(
               `.framer-step-circle-${step2}`,
               { filter: "blur(3px)", x: step2 > 1 ? -36 : 36 },
-              { delay: 0.2, duration: 0.3, ease: "easeIn" }
+              { delay: 0.1, duration: 0.3, ease: "easeIn" }
             );
           }
           await Promise.all(
@@ -6241,13 +6255,13 @@ function TransactionStatus({
               animate(
                 `.framer-step-circle-${step2}`,
                 { scale: STEP_SPINNER_SIZE_SMALL_SCALE },
-                { duration: 0.3 }
+                { duration: 0.2 }
               ),
               // Make sure spinner arc really stays hidden
               animate(
                 `.framer-step-circle-${step2}-spinner-arc`,
                 { opacity: 0 },
-                { duration: 0.3 }
+                { duration: 0.2 }
               ),
               // Morph circle towards the center
               animate(
@@ -6266,7 +6280,7 @@ function TransactionStatus({
                     )
                   ]
                 },
-                { duration: 0.3 }
+                { duration: 0.2 }
               )
             ])
           );
@@ -6283,7 +6297,7 @@ function TransactionStatus({
               animate(
                 `.framer-step-circle-${step2}-spinner-circle`,
                 { fill: SUCCESS_COLOR, opacity: 0.5 },
-                { duration: 0.5 }
+                { duration: 0.3 }
               ),
               // Morph back to circle
               animate(
@@ -6295,7 +6309,7 @@ function TransactionStatus({
                     step2 > 1 ? "left" : "right"
                   )
                 },
-                { delay: 0.2, duration: 0.3 }
+                { delay: 0.2, duration: 0.1 }
               )
             ])
           );
@@ -6305,32 +6319,7 @@ function TransactionStatus({
         doFancySuccessAnimation();
       } else if (step > currentStep) {
         async function doFancyNextStepAnimation(nextStep) {
-          await Promise.all([
-            // Change the spinner outline to solid green
-            animate(
-              `.framer-step-circle-${currentStep}-spinner-circle`,
-              { opacity: 1, stroke: SUCCESS_COLOR, strokeDasharray: 0 },
-              { duration: 0.3 }
-            ),
-            // Hide the spinner arc
-            animate(
-              `.framer-step-circle-${currentStep}-spinner-arc`,
-              { opacity: 0 },
-              { duration: 0.3 }
-            ),
-            // Hide the step number
-            animate(
-              `.framer-step-circle-${currentStep}-label`,
-              { opacity: 0 },
-              { duration: 0.3 }
-            ),
-            // Draw the checkmark
-            animate(
-              `.framer-step-circle-${currentStep}-checkmark`,
-              { opacity: 1, pathLength: 1 },
-              { duration: 0.3 }
-            )
-          ]);
+          await animateCircleToSuccess(currentStep);
           stopSpinning();
           animate(
             `.framer-step-circle-${currentStep}-spinner-circle`,
@@ -6436,6 +6425,7 @@ function TransactionStatus({
     }
   }, [
     animate,
+    animateCircleToSuccess,
     currentStatus,
     currentStep,
     isDelayed2,
@@ -6456,6 +6446,7 @@ function TransactionStatus({
       display: "flex",
       flexDirection: "column",
       gap: "24",
+      paddingTop: "4",
       ref: scope
     },
     currentStatus === "success" ? /* @__PURE__ */ React45.createElement(
@@ -10170,6 +10161,7 @@ import React90, { useEffect as useEffect23, useMemo as useMemo11, useState as us
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO6 } from "@funkit/chains";
 import clsx14 from "clsx";
 import { motion as motion6, useAnimationControls } from "motion/react";
+import { mainnet as mainnet5 } from "viem/chains";
 
 // src/domains/relay.ts
 var KATANA_BRIDGE_ALERT_THRESHOLD_PERCENT = 0.5;
@@ -10342,10 +10334,30 @@ function makeRateComponent(exchangeRate, relayQuoteMetadata) {
   };
   return exchangeRateComponent;
 }
-function renderRelayFee(relayQuoteMetadata, fees, totalUsd) {
+function computeDigest(relayQuoteMetadata, uiCustomizations, totalPriceImpactPercent, gasUsd) {
+  const showTransactionDigest = uiCustomizations?.confirmationScreen?.showTransactionDigest ?? "none";
+  if (showTransactionDigest === "none") {
+    return {
+      isMainnet: false,
+      value: void 0
+    };
+  }
+  const details = relayQuoteMetadata.relayQuote.details;
+  const isMainnet = details?.currencyIn?.currency?.chainId === mainnet5.id || details?.currencyOut?.currency?.chainId === mainnet5.id;
+  const percent = formatPercent(totalPriceImpactPercent);
+  return {
+    isMainnet: true,
+    value: isMainnet ? `${formatCurrencyAndStringify2(gasUsd)} \u2022 ${percent}` : percent
+  };
+}
+function renderRelayFee({
+  relayQuoteMetadata,
+  fees,
+  totalUsd,
+  uiCustomizations
+}) {
   const {
     gasUsd,
-    totalImpactUsd,
     swapImpactUsd,
     swapImpact,
     appFeeUsd,
@@ -10363,9 +10375,16 @@ function renderRelayFee(relayQuoteMetadata, fees, totalUsd) {
     exchangeRate,
     relayQuoteMetadata
   );
+  const { isMainnet, value: collapsedValue } = computeDigest(
+    relayQuoteMetadata,
+    uiCustomizations,
+    totalPriceImpactPercent,
+    totalNetworkCostUsd
+  );
   return {
     collapsed: {
-      value: formatCurrencyAndStringify2(totalImpactUsd + gasUsd)
+      value: collapsedValue ?? "",
+      valueIcon: isMainnet ? /* @__PURE__ */ React90.createElement(GasIcon, null) : void 0
     },
     expanded: [
       ...exchangeRateComponent ? [exchangeRateComponent] : [],
@@ -10467,9 +10486,19 @@ function renderRelayFee(relayQuoteMetadata, fees, totalUsd) {
     ]
   };
 }
-var extractFeeItems = (fees, totalUsd, relayQuoteMetadata) => {
+var extractFeeItems = ({
+  fees,
+  totalUsd,
+  relayQuoteMetadata,
+  uiCustomizations
+}) => {
   if (relayQuoteMetadata) {
-    return renderRelayFee(relayQuoteMetadata, fees, totalUsd);
+    return renderRelayFee({
+      relayQuoteMetadata,
+      fees,
+      totalUsd,
+      uiCustomizations
+    });
   }
   const marketMakerFee = {
     label: "Market maker gas costs",
@@ -10550,6 +10579,7 @@ function PaymentFeesSummary({
       setIsExpanded(false);
     }
   }, [valuesNotAvailable, isExpanded]);
+  const { uiCustomizations } = useFunkitConfig();
   const { collapsed: collapsedItem, expanded: expandedItems } = useMemo11(() => {
     const fees = quote?.finalFeesBreakdown ?? fallbackFees;
     if (!fees) {
@@ -10557,8 +10587,13 @@ function PaymentFeesSummary({
     }
     const totalUsd = Number(quote?.finalTotalUsd ?? "0");
     const relayQuoteMetadata = quote?.baseQuote?.metadata;
-    return extractFeeItems(fees, totalUsd, relayQuoteMetadata);
-  }, [quote, fallbackFees]);
+    return extractFeeItems({
+      fees,
+      totalUsd,
+      relayQuoteMetadata,
+      uiCustomizations
+    });
+  }, [quote, fallbackFees, uiCustomizations]);
   const isExpandable = expandedItems.length > 0 && !isLoading && !valuesNotAvailable;
   return /* @__PURE__ */ React90.createElement(Box, null, /* @__PURE__ */ React90.createElement(
     Box,
@@ -17494,14 +17529,14 @@ import { useAccount as useAccount5, useSendTransaction, useWriteContract } from
 
 // src/utils/isMainnetUsdt.ts
 import { isTokenEquivalent as isTokenEquivalent4 } from "@funkit/utils";
-import { mainnet as mainnet5 } from "viem/chains";
+import { mainnet as mainnet6 } from "viem/chains";
 var USDT_MAINNET_ADDRESS = "0xdAC17F958D2ee523a2206206994597C13D831ec7";
 function isMainnetUsdt(chainId, address) {
   return isTokenEquivalent4({
     firstTokenAddress: address,
     firstTokenChainId: chainId.toString(),
     secondTokenAddress: USDT_MAINNET_ADDRESS,
-    secondTokenChainId: mainnet5.id.toString()
+    secondTokenChainId: mainnet6.id.toString()
   });
 }
 
@@ -20999,7 +21034,7 @@ import React167, { useEffect as useEffect38 } from "react";
 // src/domains/wallet.ts
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO15 } from "@funkit/chains";
 import { isNotNullish as isNotNullish7 } from "@funkit/utils";
-import { mainnet as mainnet6, polygon as polygon6 } from "viem/chains";
+import { mainnet as mainnet7, polygon as polygon6 } from "viem/chains";
 var ASSETS_LOW_VALUE_THRESHOLD2 = 0.1;
 
 // src/hooks/usePaymentSources.ts
@@ -22395,7 +22430,7 @@ import {
 } from "@funkit/chains";
 import { getTokenAddressBySymbolAndChainId as getTokenAddressBySymbolAndChainId2 } from "@funkit/core";
 import { useCallback as useCallback31, useState as useState46 } from "react";
-import { mainnet as mainnet7, mantle, zkSync as zkSync2 } from "viem/chains";
+import { mainnet as mainnet8, mantle, zkSync as zkSync2 } from "viem/chains";
 var pickSourceAssetForCard = async (checkoutItem, userIpInfo) => {
   if (!checkoutItem?.initSettings.config.targetChain) {
     throw new Error("pickSourceAssetForCard: Missing targetChain");
@@ -22419,7 +22454,7 @@ var pickSourceAssetForCard = async (checkoutItem, userIpInfo) => {
     sourceTokenAddress = NATIVE_TOKEN;
     sourceTokenChainId = moonpayChainId;
   } else {
-    sourceTokenChainId = isNyOrTxOrVi ? mainnet7.id.toString() : moonpayChainId;
+    sourceTokenChainId = isNyOrTxOrVi ? mainnet8.id.toString() : moonpayChainId;
     if (isTargetAssetEthOrWeth) {
       sourceTokenTicker = "ETH" /* ETH */;
       sourceTokenAddress = NATIVE_TOKEN;
@@ -23440,7 +23475,7 @@ var TransferTokenDetails = ({
 import { solanaChain as solanaChain4 } from "@funkit/chains";
 import { FlagKey as FlagKey25 } from "@funkit/utils";
 import { useMemo as useMemo29 } from "react";
-import { mainnet as mainnet8, polygon as polygon7 } from "viem/chains";
+import { mainnet as mainnet9, polygon as polygon7 } from "viem/chains";
 var useTokenTransfer = (selectedChainId, selectedToken, chainIds) => {
   const { checkoutItem } = useCheckoutContext();
   const enableUniversal = useFlag(
@@ -23491,7 +23526,7 @@ var useMinTransferLimits = () => {
 };
 var useMinTransferValue = (selectedChainId) => {
   const limits = useMinTransferLimits();
-  const limit = selectedChainId === mainnet8.id ? limits.mainnet : limits.nonMainnet;
+  const limit = selectedChainId === mainnet9.id ? limits.mainnet : limits.nonMainnet;
   return Math.ceil(limit);
 };
 var useMinTransferValues = (chainIds) => {
@@ -23499,7 +23534,7 @@ var useMinTransferValues = (chainIds) => {
   return useMemo29(() => {
     return chainIds.reduce(
       (acc, id) => {
-        const limit = id === mainnet8.id ? limits.mainnet : limits.nonMainnet;
+        const limit = id === mainnet9.id ? limits.mainnet : limits.nonMainnet;
         acc[id] = Math.ceil(limit);
         return acc;
       },
@@ -31310,7 +31345,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "6.0.7";
+  return "6.1.0";
 }
 function useFingerprint() {
   const fingerprint = useCallback50(() => {

package/dist/providers/FunkitConfigContext.d.ts

@@ -37,6 +37,11 @@ export interface FunkitUiCustomizationsConfig {
         destinationConfig?: FunkitUiDestinationConfig;
         /** when source and destination are the same address, show destination as payment method instead of source */
         preferDestinationWhenSame?: boolean;
+        /** whether and how to show transaction fee's digest.
+         * 'none': show nothing
+         * 'chainDependent': show price impact and additionally show gas as well for eth-mainnet
+         * */
+        showTransactionDigest?: 'none' | 'chainDependent';
     };
     inputAmountScreen?: {
         /** Whether to allow entering an amount of tokens, rather than only USD - defaults to true */

package/dist/wallets/walletConnectors/chunk-2GJQ4XZQ.js

@@ -0,0 +1,87 @@
+"use client";
+import {
+  getInjectedConnector,
+  hasInjectedProvider
+} from "./chunk-DNSG5Q7V.js";
+import {
+  getWalletConnectConnector
+} from "./chunk-23WIEY36.js";
+
+// src/wallets/walletConnectors/clvWallet/clvWallet.ts
+var clvWallet = ({
+  projectId,
+  walletConnectParameters
+}) => {
+  const isCLVInjected = hasInjectedProvider({ namespace: "clover" });
+  const shouldUseWalletConnect = !isCLVInjected;
+  return {
+    id: "clv",
+    name: "CLV",
+    iconUrl: async () => (await import("./clvWallet-VVMLP7BK.js")).default,
+    iconBackground: "#fff",
+    iconAccent: "#BDFDE2",
+    installed: isCLVInjected,
+    downloadUrls: {
+      chrome: "https://chrome.google.com/webstore/detail/clv-wallet/nhnkbkgjikgcigadomkphalanndcapjk",
+      ios: "https://apps.apple.com/app/clover-wallet/id1570072858",
+      mobile: "https://apps.apple.com/app/clover-wallet/id1570072858",
+      qrCode: "https://clv.org/"
+    },
+    extension: {
+      instructions: {
+        learnMoreUrl: "https://clv.org/",
+        steps: [
+          {
+            description: "wallet_connectors.clv.extension.step1.description",
+            step: "install",
+            title: "wallet_connectors.clv.extension.step1.title"
+          },
+          {
+            description: "wallet_connectors.clv.extension.step2.description",
+            step: "create",
+            title: "wallet_connectors.clv.extension.step2.title"
+          },
+          {
+            description: "wallet_connectors.clv.extension.step3.description",
+            step: "refresh",
+            title: "wallet_connectors.clv.extension.step3.title"
+          }
+        ]
+      }
+    },
+    mobile: {
+      getUri: shouldUseWalletConnect ? (uri) => uri : void 0
+    },
+    qrCode: shouldUseWalletConnect ? {
+      getUri: (uri) => uri,
+      instructions: {
+        learnMoreUrl: "https://clv.org/",
+        steps: [
+          {
+            description: "wallet_connectors.clv.qr_code.step1.description",
+            step: "install",
+            title: "wallet_connectors.clv.qr_code.step1.title"
+          },
+          {
+            description: "wallet_connectors.clv.qr_code.step2.description",
+            step: "create",
+            title: "wallet_connectors.clv.qr_code.step2.title"
+          },
+          {
+            description: "wallet_connectors.clv.qr_code.step3.description",
+            step: "scan",
+            title: "wallet_connectors.clv.qr_code.step3.title"
+          }
+        ]
+      }
+    } : void 0,
+    createConnector: shouldUseWalletConnect ? getWalletConnectConnector({
+      projectId,
+      walletConnectParameters
+    }) : getInjectedConnector({ namespace: "clover" })
+  };
+};
+
+export {
+  clvWallet
+};

package/dist/wallets/walletConnectors/chunk-3CICVJUN.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  getInjectedConnector,
+  hasInjectedProvider
+} from "./chunk-DNSG5Q7V.js";
+import {
+  getWalletConnectConnector
+} from "./chunk-23WIEY36.js";
+
+// src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts
+import { isAndroid, isIOS } from "@funkit/utils";
+var rainbowWallet = ({
+  projectId,
+  walletConnectParameters
+}) => {
+  const isRainbowInjected = hasInjectedProvider({ flag: "isRainbow" });
+  const shouldUseWalletConnect = !isRainbowInjected;
+  const getUri = (uri) => {
+    return isAndroid() ? uri : isIOS() ? `rainbow://wc?uri=${encodeURIComponent(uri)}&connector=rainbowkit` : `https://rnbwapp.com/wc?uri=${encodeURIComponent(
+      uri
+    )}&connector=rainbowkit`;
+  };
+  return {
+    id: "rainbow",
+    name: "Rainbow",
+    rdns: "me.rainbow",
+    iconUrl: async () => (await import("./rainbowWallet-MFJQCICF.js")).default,
+    iconBackground: "#0c2f78",
+    installed: !shouldUseWalletConnect ? isRainbowInjected : void 0,
+    downloadUrls: {
+      android: "https://play.google.com/store/apps/details?id=me.rainbow&referrer=utm_source%3Drainbowkit&utm_source=rainbowkit",
+      ios: "https://apps.apple.com/app/apple-store/id1457119021?pt=119997837&ct=rainbowkit&mt=8",
+      mobile: "https://rainbow.download?utm_source=rainbowkit",
+      qrCode: "https://rainbow.download?utm_source=rainbowkit&utm_medium=qrcode",
+      browserExtension: "https://rainbow.me/extension?utm_source=rainbowkit"
+    },
+    mobile: { getUri: shouldUseWalletConnect ? getUri : void 0 },
+    qrCode: shouldUseWalletConnect ? {
+      getUri,
+      instructions: {
+        learnMoreUrl: "https://learn.rainbow.me/connect-to-a-website-or-app?utm_source=rainbowkit&utm_medium=connector&utm_campaign=learnmore",
+        steps: [
+          {
+            description: "wallet_connectors.rainbow.qr_code.step1.description",
+            step: "install",
+            title: "wallet_connectors.rainbow.qr_code.step1.title"
+          },
+          {
+            description: "wallet_connectors.rainbow.qr_code.step2.description",
+            step: "create",
+            title: "wallet_connectors.rainbow.qr_code.step2.title"
+          },
+          {
+            description: "wallet_connectors.rainbow.qr_code.step3.description",
+            step: "scan",
+            title: "wallet_connectors.rainbow.qr_code.step3.title"
+          }
+        ]
+      }
+    } : void 0,
+    createConnector: shouldUseWalletConnect ? getWalletConnectConnector({
+      projectId,
+      walletConnectParameters
+    }) : getInjectedConnector({ flag: "isRainbow" })
+  };
+};
+
+export {
+  rainbowWallet
+};