@funkit/connect 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @funkit/connect
 
+## 1.0.3
+
+### Patch Changes
+
+- fc3ab0d: feat: allow customization of all theme colors
+- 48caeec: refactor: optional checkout config
+- Updated dependencies [6c91a63]
+  - @funkit/core@1.0.1
+  - @funkit/wagmi-tools@1.0.2
+
+## 1.0.2
+
+### Patch Changes
+
+- 27e03bc: feat: readme
+
 ## 1.0.1
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,15 @@
+## FunkitConnect
+
+The `@funkit/connect` package elevates decentralize applications via web2 & web3 sign-ins together with one-click onramps & checkouts.
+
+- 🔗 [v0 Integration guide](https://the-fun-group.notion.site/funkit-connect-integration-guide-90efe96a9f4e40d99cc49e7abecdc437)
+- 🔗 v1 Integration guide (TBD)
+
+### Version Information
+
+- Package versions `< 1.x.x` support wagmi v1 only.
+- Package versions `>= 1.x.x` support wagmi v2 only.
+
+### 📝 Note
+
+This package is currently in closed beta. To learn more, reach out to [developers@fun.xyz](mailto:developers@fun.xyz).

package/dist/{chunk-C2QHNJBG.js → chunk-MQTK22MG.js}

@@ -17,6 +17,7 @@ var defaultAccentColor = accentColors.white;
 var lightTheme = ({
   accentColor = defaultAccentColor.accentColor,
   accentColorForeground = defaultAccentColor.accentColorForeground,
+  customColors,
   ...baseThemeOptions
 } = {}) => ({
   ...baseTheme(baseThemeOptions),
@@ -76,7 +77,8 @@ var lightTheme = ({
     buttonTextPrimary: "#FFFFFF",
     buttonTextSecondary: "#000000",
     buttonTextDisabled: "#FFF",
-    transparent: "transparent"
+    transparent: "transparent",
+    ...customColors || {}
   },
   shadows: {
     connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",

package/dist/{chunk-U4FFX2HZ.js → chunk-SWTU7PBZ.js}

@@ -17,6 +17,7 @@ var defaultAccentColor = accentColors.white;
 var darkTheme = ({
   accentColor = defaultAccentColor.accentColor,
   accentColorForeground = defaultAccentColor.accentColorForeground,
+  customColors,
   ...baseThemeOptions
 } = {}) => ({
   ...baseTheme(baseThemeOptions),
@@ -76,7 +77,8 @@ var darkTheme = ({
     buttonTextDisabled: "#000000",
     buttonWarning: "#C60000",
     buttonTextWarning: "#FFF",
-    transparent: "transparent"
+    transparent: "transparent",
+    ...customColors || {}
   },
   shadows: {
     connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",

package/dist/components/FunkitProvider/FunkitCheckoutContext.d.ts

@@ -66,8 +66,8 @@ export type FunkitCheckoutResult = {
     metadata: object | Error;
 };
 interface useFunkitCheckoutProps {
-    /** @required the checkout config object **/
-    config: FunkitCheckoutConfig;
+    /** @optional the checkout config object **/
+    config?: FunkitCheckoutConfig;
     /** @optional fires when the checkout modal is opened **/
     onOpen?: () => void;
     /** @optional fires when the checkout modal is closed **/
@@ -83,6 +83,9 @@ interface useFunkitCheckoutProps {
     /** @optional fires if the checkout fails at any point **/
     onSuccess?: (result: FunkitCheckoutResult) => void;
 }
+type useFunkitCheckoutPropsFinal = Omit<useFunkitCheckoutProps, 'config'> & {
+    config: FunkitCheckoutConfig;
+};
 /**
  * Checkout Item for frontend use
  */
@@ -103,8 +106,8 @@ export interface FunkitActiveCheckoutItem {
     quoteErrorMessage: string;
     /** The deposit address provided by server after the checkout is confirmed. If `null`, it is not confirmed yet. **/
     depositAddress: null | Address;
-    /** Settings the checkout was init-ed with **/
-    initSettings: useFunkitCheckoutProps;
+    /** Final settings the checkout was init-ed with **/
+    initSettings: useFunkitCheckoutPropsFinal;
     /** User's selected payment method information */
     selectedPaymentMethodInfo: PaymentMethodInfo | null;
     /** User's choice of source asset to fund the checkout operation **/
@@ -155,6 +158,6 @@ export declare const useFunkitAllPostCheckoutsInternal: () => {
  * External hook for user to kickstart a checkout in their app
  */
 export declare const useFunkitCheckout: (props: useFunkitCheckoutProps) => {
-    beginCheckout: (inputConfig?: useFunkitCheckoutProps['config']) => Promise<void>;
+    beginCheckout: (inputConfig?: FunkitCheckoutConfig) => Promise<void>;
 };
 export {};

package/dist/components/FunkitProvider/FunkitThemeProvider.d.ts

@@ -29,10 +29,10 @@ export declare const defaultTheme: {
         profileActionHover: string;
         profileForeground: string;
         selectedOptionBorder: string;
+        standby: string;
         solidLine: string;
-        rightTranslucentLine: string;
         leftTranslucentLine: string;
-        standby: string;
+        rightTranslucentLine: string;
         loadingBase: string;
         loadingAccent: string;
         modalBackdrop: string;
@@ -52,11 +52,11 @@ export declare const defaultTheme: {
         buttonPrimary: string;
         buttonProcessing: string;
         buttonDisabled: string;
+        buttonWarning: string;
+        buttonTextWarning: string;
         buttonTextPrimary: string;
         buttonTextSecondary: string;
         buttonTextDisabled: string;
-        buttonWarning: string;
-        buttonTextWarning: string;
         transparent: string;
     };
     shadows: {

package/dist/index.js

@@ -4,10 +4,10 @@ import {
 } from "./chunk-SW6GAS7K.js";
 import {
   darkTheme
-} from "./chunk-U4FFX2HZ.js";
+} from "./chunk-SWTU7PBZ.js";
 import {
   lightTheme
-} from "./chunk-C2QHNJBG.js";
+} from "./chunk-MQTK22MG.js";
 import "./chunk-VP4CAK4A.js";
 
 // src/components/ConnectButton/ConnectButton.tsx
@@ -1791,6 +1791,12 @@ function validateCheckoutConfig(config) {
       message: "Invalid targetAssetAmount configuration: Has to be a number greater than 0"
     };
   }
+  if (!config.actionsParams) {
+    return {
+      isValid: false,
+      message: "Invalid actionsParams configuration: Has to be an array. If no actions are required, please specify an empty array ([]) instead."
+    };
+  }
   if (!FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[config.targetChain]) {
     return {
       isValid: false,
@@ -2071,7 +2077,6 @@ function FunkitCheckoutProvider({ children }) {
             apiKey: funkitConfig.apiKey
           });
         }
-        logger.log("newCheckoutHistoryList", newCheckoutHistoryList);
         setCheckoutHistoryList(
           newCheckoutHistoryList.sort((a, b) => b.createdTimeMs - a.createdTimeMs)
         );
@@ -2658,7 +2663,8 @@ var useFunkitAllPostCheckoutsInternal = () => {
   };
 };
 var useFunkitCheckout = (props) => {
-  const { config, onValidation, onError } = props;
+  const { onValidation, onError } = props;
+  const propsConfig = useMemo6(() => (props == null ? void 0 : props.config) || {}, [props == null ? void 0 : props.config]);
   const actualWagmiConfig = useConfig2();
   const { _initNewCheckout } = useContext9(FunkitCheckoutContext);
   const { openFunCheckoutModal } = useFunCheckoutModal();
@@ -2681,25 +2687,30 @@ var useFunkitCheckout = (props) => {
     [openFunCheckoutModal, props]
   );
   const beginCheckout = useCallback5(
-    async (inputConfig = config) => {
-      const validationResult = validateCheckoutConfig(inputConfig);
+    async (inputConfig) => {
+      const combinedConfig = {
+        ...propsConfig || {},
+        ...inputConfig || {}
+      };
+      const validationResult = validateCheckoutConfig(combinedConfig);
       onValidation == null ? void 0 : onValidation(validationResult);
       if (validationResult.isValid) {
-        let newId = _initNewCheckout == null ? void 0 : _initNewCheckout({ ...props, config: inputConfig }, false);
-        if (isUserLoggedIn || !!inputConfig.customRecipient) {
+        const finalConfig = combinedConfig;
+        let newId = _initNewCheckout == null ? void 0 : _initNewCheckout({ ...props, config: finalConfig }, false);
+        if (isUserLoggedIn || !!finalConfig.customRecipient) {
           if (isUserLoggedIn) {
             const { result, tokenTicker } = await testAutoExecutionDuringCheckout(
-              inputConfig,
+              finalConfig,
               walletAddress,
               actualWagmiConfig
             );
             if (result) {
               newId = _initNewCheckout == null ? void 0 : _initNewCheckout(
-                { ...props, config: inputConfig },
+                { ...props, config: finalConfig },
                 true,
                 tokenTicker
               );
-            } else if (!FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO3[inputConfig.targetChain].isFiatCheckoutSupported) {
+            } else if (!FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO3[finalConfig.targetChain].isFiatCheckoutSupported) {
               onErrorWrapper == null ? void 0 : onErrorWrapper({
                 type: "error",
                 message: "Unable to begin a new checkout: Insufficient funds on testnet account",
@@ -2711,7 +2722,7 @@ var useFunkitCheckout = (props) => {
           onOpenWrapper == null ? void 0 : onOpenWrapper(newId);
         } else {
           openConnectModal == null ? void 0 : openConnectModal();
-          setWaitingLogin(inputConfig);
+          setWaitingLogin(finalConfig);
         }
       } else {
         onErrorWrapper == null ? void 0 : onErrorWrapper({
@@ -2722,7 +2733,7 @@ var useFunkitCheckout = (props) => {
       }
     },
     [
-      config,
+      propsConfig,
       onValidation,
       _initNewCheckout,
       props,
@@ -14731,7 +14742,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey4, version);
 }
 function getCurrentSdkVersion() {
-  return "1.0.1";
+  return "1.0.3";
 }
 function useFingerprint() {
   const fingerprint = useCallback26(() => {

package/dist/themes/baseTheme.d.ts

@@ -21,5 +21,6 @@ export type AccentColorPreset = 'blue' | 'green' | 'red' | 'purple' | 'pink' | '
 export interface ThemeOptions extends BaseThemeOptions {
     accentColor?: string;
     accentColorForeground?: string;
+    customColors?: Partial<ThemeVars['colors']>;
 }
 export {};

package/dist/themes/darkTheme.d.ts

@@ -1,6 +1,6 @@
 import { AccentColor, AccentColorPreset, ThemeOptions } from './baseTheme';
 export declare const darkTheme: {
-    ({ accentColor, accentColorForeground, ...baseThemeOptions }?: ThemeOptions): {
+    ({ accentColor, accentColorForeground, customColors, ...baseThemeOptions }?: ThemeOptions): {
         colors: {
             accentColor: string;
             accentColorForeground: string;
@@ -29,10 +29,10 @@ export declare const darkTheme: {
             profileActionHover: string;
             profileForeground: string;
             selectedOptionBorder: string;
+            standby: string;
             solidLine: string;
-            rightTranslucentLine: string;
             leftTranslucentLine: string;
-            standby: string;
+            rightTranslucentLine: string;
             loadingBase: string;
             loadingAccent: string;
             modalBackdrop: string;
@@ -52,11 +52,11 @@ export declare const darkTheme: {
             buttonPrimary: string;
             buttonProcessing: string;
             buttonDisabled: string;
+            buttonWarning: string;
+            buttonTextWarning: string;
             buttonTextPrimary: string;
             buttonTextSecondary: string;
             buttonTextDisabled: string;
-            buttonWarning: string;
-            buttonTextWarning: string;
             transparent: string;
         };
         shadows: {

package/dist/themes/darkTheme.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   darkTheme
-} from "../chunk-U4FFX2HZ.js";
+} from "../chunk-SWTU7PBZ.js";
 import "../chunk-VP4CAK4A.js";
 export {
   darkTheme

package/dist/themes/lightTheme.d.ts

@@ -1,6 +1,6 @@
 import { AccentColor, AccentColorPreset, ThemeOptions } from './baseTheme';
 export declare const lightTheme: {
-    ({ accentColor, accentColorForeground, ...baseThemeOptions }?: ThemeOptions): {
+    ({ accentColor, accentColorForeground, customColors, ...baseThemeOptions }?: ThemeOptions): {
         colors: {
             accentColor: string;
             accentColorForeground: string;
@@ -29,10 +29,10 @@ export declare const lightTheme: {
             profileActionHover: string;
             profileForeground: string;
             selectedOptionBorder: string;
+            standby: string;
             solidLine: string;
-            rightTranslucentLine: string;
             leftTranslucentLine: string;
-            standby: string;
+            rightTranslucentLine: string;
             loadingBase: string;
             loadingAccent: string;
             modalBackdrop: string;

package/dist/themes/lightTheme.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   lightTheme
-} from "../chunk-C2QHNJBG.js";
+} from "../chunk-MQTK22MG.js";
 import "../chunk-VP4CAK4A.js";
 export {
   lightTheme

package/dist/utils/checkout.d.ts

@@ -13,7 +13,7 @@ export declare const DUMMY_TRANSFER_PARAMS: {
  * @param config - The checkout configuration to validate.
  * @returns An object indicating whether the configuration is valid and a message if it is not.
  */
-export declare function validateCheckoutConfig(config: FunkitCheckoutConfig): {
+export declare function validateCheckoutConfig(config: Partial<FunkitCheckoutConfig>): {
     isValid: boolean;
     message: string;
 };

package/dist/wallets/walletConnectors/index.js

@@ -1,37 +1,37 @@
 "use client";
-import {
-  zealWallet
-} from "./chunk-DPXMP5KS.js";
-import {
-  zerionWallet
-} from "./chunk-SQGFKNNZ.js";
 import {
   walletConnectWallet
 } from "./chunk-ASPRR7T3.js";
 import {
-  safepalWallet
-} from "./chunk-RTW6PVQI.js";
-import {
-  tokenPocketWallet
-} from "./chunk-OR3PU2W4.js";
-import {
-  talismanWallet
-} from "./chunk-H273OTQA.js";
+  kresusWallet
+} from "./chunk-X6T3CICZ.js";
 import {
-  rainbowWallet
-} from "./chunk-FDIIMYTB.js";
+  metaMaskWallet
+} from "./chunk-X255T3C4.js";
 import {
   tokenaryWallet
 } from "./chunk-ENZLEAG2.js";
+import {
+  subWallet
+} from "./chunk-2GAW2UBU.js";
+import {
+  tokenPocketWallet
+} from "./chunk-OR3PU2W4.js";
+import {
+  trustWallet
+} from "./chunk-OAEJQOAV.js";
 import {
   xdefiWallet
 } from "./chunk-L734HTUS.js";
+import {
+  zealWallet
+} from "./chunk-DPXMP5KS.js";
 import {
   uniswapWallet
 } from "./chunk-XRSY4JVH.js";
 import {
-  trustWallet
-} from "./chunk-OAEJQOAV.js";
+  zerionWallet
+} from "./chunk-SQGFKNNZ.js";
 import {
   phantomWallet
 } from "./chunk-KGBLSE7L.js";
@@ -39,38 +39,35 @@ import {
   roninWallet
 } from "./chunk-GW6EF4G2.js";
 import {
-  rabbyWallet
-} from "./chunk-XPEBP6XV.js";
+  rainbowWallet
+} from "./chunk-FDIIMYTB.js";
 import {
   safeWallet
 } from "./chunk-D3DCQ72J.js";
 import {
-  ramperWallet
-} from "./chunk-ZOL6ZMTJ.js";
-import {
-  subWallet
-} from "./chunk-2GAW2UBU.js";
-import {
-  safeheronWallet
-} from "./chunk-63NPZXAL.js";
+  safepalWallet
+} from "./chunk-RTW6PVQI.js";
 import {
   tahoWallet
 } from "./chunk-H76YCX2M.js";
 import {
-  kresusWallet
-} from "./chunk-X6T3CICZ.js";
-import {
-  mewWallet
-} from "./chunk-PWYTDYBE.js";
+  safeheronWallet
+} from "./chunk-63NPZXAL.js";
 import {
-  metaMaskWallet
-} from "./chunk-X255T3C4.js";
+  talismanWallet
+} from "./chunk-H273OTQA.js";
 import {
   oktoWallet
 } from "./chunk-WKHTUEF5.js";
 import {
   okxWallet
 } from "./chunk-XSSD5ZVD.js";
+import {
+  mewWallet
+} from "./chunk-PWYTDYBE.js";
+import {
+  oneInchWallet
+} from "./chunk-LCPIZUR3.js";
 import {
   omniWallet
 } from "./chunk-SVN7OEQR.js";
@@ -78,75 +75,78 @@ import {
   oneKeyWallet
 } from "./chunk-4WOV4ITL.js";
 import {
-  oneInchWallet
-} from "./chunk-LCPIZUR3.js";
+  rabbyWallet
+} from "./chunk-XPEBP6XV.js";
 import {
-  desigWallet
-} from "./chunk-P4JLZ42R.js";
+  ramperWallet
+} from "./chunk-ZOL6ZMTJ.js";
 import {
-  enkryptWallet
-} from "./chunk-FLY7F4XA.js";
+  foxWallet
+} from "./chunk-OKWOB3DN.js";
 import {
   frontierWallet
 } from "./chunk-N3VZE65M.js";
 import {
-  gateWallet
-} from "./chunk-2PC2XXUH.js";
+  frameWallet
+} from "./chunk-XXFJVY73.js";
 import {
   imTokenWallet
 } from "./chunk-5MVV7OVS.js";
+import {
+  injectedWallet
+} from "./chunk-KIHCNUU3.js";
+import {
+  gateWallet
+} from "./chunk-2PC2XXUH.js";
 import {
   ledgerWallet
 } from "./chunk-Y6VY6E3L.js";
 import {
-  injectedWallet
-} from "./chunk-KIHCNUU3.js";
+  coreWallet
+} from "./chunk-IBWFKX7P.js";
+import {
+  bybitWallet
+} from "./chunk-CUKVUCIP.js";
+import {
+  clvWallet
+} from "./chunk-T6JVHES7.js";
 import {
   coinbaseWallet
 } from "./chunk-YC7XNS7C.js";
 import {
-  braveWallet
-} from "./chunk-ABYQAXUX.js";
+  dawnWallet
+} from "./chunk-VWZEDVW6.js";
 import {
-  clvWallet
-} from "./chunk-T6JVHES7.js";
+  desigWallet
+} from "./chunk-P4JLZ42R.js";
 import {
   coin98Wallet
 } from "./chunk-Z2HIQYVN.js";
 import {
-  coreWallet
-} from "./chunk-IBWFKX7P.js";
+  enkryptWallet
+} from "./chunk-FLY7F4XA.js";
 import {
-  foxWallet
-} from "./chunk-OKWOB3DN.js";
+  bifrostWallet
+} from "./chunk-SL4VH23R.js";
 import {
-  dawnWallet
-} from "./chunk-VWZEDVW6.js";
+  argentWallet
+} from "./chunk-NZ5G23JP.js";
 import {
-  frameWallet
-} from "./chunk-XXFJVY73.js";
+  braveWallet
+} from "./chunk-ABYQAXUX.js";
 import {
   bitverseWallet
 } from "./chunk-NL4I7WOT.js";
-import {
-  bifrostWallet
-} from "./chunk-SL4VH23R.js";
 import {
   bitskiWallet
 } from "./chunk-C67TQJ6W.js";
-import {
-  bitgetWallet
-} from "./chunk-75A2U7T7.js";
 import {
   bloomWallet
 } from "./chunk-NTGZF5BY.js";
 import {
-  bybitWallet
-} from "./chunk-CUKVUCIP.js";
+  bitgetWallet
+} from "./chunk-75A2U7T7.js";
 import "./chunk-QII6PY2D.js";
-import {
-  argentWallet
-} from "./chunk-NZ5G23JP.js";
 import "./chunk-ZOLACFTK.js";
 import "./chunk-ZDU3JFGR.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funkit/connect",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.",
   "files": [
     "dist",
@@ -80,8 +80,8 @@
     "react-remove-scroll": "2.5.7",
     "ua-parser-js": "^1.0.37",
     "@tanstack/react-query": "^5.28.8",
-    "@funkit/wagmi-tools": "^1.0.1",
-    "@funkit/core": "^1.0.0",
+    "@funkit/wagmi-tools": "^1.0.2",
+    "@funkit/core": "^1.0.1",
     "@datadog/browser-logs": "^5.12.0",
     "@privy-io/js-sdk-core": "^0.14.0",
     "@moonpay/moonpay-react": "^1.6.1",