@funkit/connect 0.1.7 → 0.1.8

package/dist/components/FunDivider/FunDivider.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BoxProps } from '../Box/Box';
-export declare function FunDivider({ marginY, transparent, }: {
-    marginY?: BoxProps['margin'];
+export declare function FunDivider({ marginTop, marginBottom, transparent, }: {
+    marginTop?: BoxProps['margin'];
+    marginBottom?: BoxProps['margin'];
     transparent?: boolean;
 }): React.JSX.Element;

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

@@ -29,7 +29,7 @@ export interface FunkitCheckoutConfig {
     /** Title to show in the checkout modal. Defaults to "Checkout" **/
     modalTitle?: string;
     /** Icon to show in the checkout modal (50px x 50px). If not specified, no icon will be shown. **/
-    icon?: null | ReactNode;
+    iconSrc?: null | string;
     /** Title of the item being checked out. e.g. Staked Ether, XYZ Option, Solar Bond ABC **/
     checkoutItemTitle: string;
     /** Description of the item being checked out. If not specified, it will default to blank. **/

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

@@ -1,13 +1,18 @@
 /// <reference types="react" />
-import { GlobalEnvOption } from '@funkit/core';
 interface LoginOptions {
     web2: boolean;
     web3: boolean;
 }
-export interface FunkitConfig extends GlobalEnvOption {
+export interface FunkitConfig {
+    /** Funkit api key **/
+    apiKey: string;
+    /** Privy app id **/
     privyAppId: string;
+    /** Login options toggle **/
     enabledLoginOptions: LoginOptions;
+    /** App name **/
+    appName: string;
 }
-export declare const FunkitConfigContext: import("react").Context<FunkitConfig | null>;
-export declare function useFunkitConfig(): FunkitConfig | null;
+export declare const FunkitConfigContext: import("react").Context<FunkitConfig>;
+export declare function useFunkitConfig(): FunkitConfig;
 export {};

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

@@ -2,10 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import { CreateConfigParameters } from 'wagmi';
 import { ThemeVars } from '../../css/sprinkles.css';
 import { Locale } from '../../locales';
-import { DisclaimerComponent } from './AppContext';
-import { AvatarComponent } from './AvatarContext';
 import { FunkitConfig } from './FunkitConfigContext';
-import { ModalSizes } from './ModalSizeContext';
 import { RainbowKitChain } from './RainbowKitChainContext';
 export declare const useThemeRootProps: () => {
     "data-rk": string;
@@ -15,23 +12,14 @@ export type Theme = ThemeVars | {
     darkMode: ThemeVars;
 };
 export interface FunkitProviderProps {
-    wagmiConfig: CreateConfigParameters;
     chains: RainbowKitChain[];
     initialChain?: RainbowKitChain | number;
+    funkitConfig: FunkitConfig;
+    wagmiConfig: CreateConfigParameters;
     id?: string;
     theme?: Theme | null;
-    showRecentTransactions?: boolean;
-    appInfo?: {
-        appName?: string;
-        learnMoreUrl?: string;
-        disclaimer?: DisclaimerComponent;
-    };
-    coolMode?: boolean;
-    avatar?: AvatarComponent;
-    modalSize?: ModalSizes;
     locale?: Locale;
-    funkitConfig: FunkitConfig;
 }
 export declare const RESERVED_GROUP_NAME = "funkit-web2";
 export declare function FunkitProvider(props: PropsWithChildren<FunkitProviderProps>): React.JSX.Element;
-export declare function FunkitProviderInner({ appInfo, avatar, chains, children, coolMode, id, initialChain, locale, modalSize, showRecentTransactions, theme, funkitConfig, }: PropsWithChildren<FunkitProviderProps>): React.JSX.Element;
+export declare function FunkitProviderInner({ chains, children, id, initialChain, locale, theme, funkitConfig, }: PropsWithChildren<FunkitProviderProps>): React.JSX.Element;

package/dist/components/index.js

@@ -4,7 +4,7 @@ import {
   FunkitProvider,
   NATIVE_TOKEN,
   useFunkitCheckout
-} from "../chunk-X5YTL45L.js";
+} from "../chunk-KQXRSMJW.js";
 import "../chunk-PKSFBURG.js";
 import "../chunk-VP4CAK4A.js";
 export {

package/dist/index.d.ts

@@ -1,18 +1,15 @@
 export { __private__ } from './__private__';
 export * from './components';
-export type { DisclaimerComponent } from './components/FunkitProvider/AppContext';
 export type { AuthenticationConfig, AuthenticationStatus, } from './components/FunkitProvider/AuthenticationContext';
 export { createAuthenticationAdapter, RainbowKitAuthenticationProvider, } from './components/FunkitProvider/AuthenticationContext';
-export type { AvatarComponent } from './components/FunkitProvider/AvatarContext';
 export type { Theme } from './components/FunkitProvider/FunkitProvider';
-export { useAccountModal, useChainModal, useConnectModal, } from './components/FunkitProvider/ModalContext';
+export { useAccountModal, useChainModal, useConnectModal, useFunCheckoutHistoryModal, useFunCheckoutModal, } from './components/FunkitProvider/ModalContext';
 export type { Chain } from './components/FunkitProvider/RainbowKitChainContext';
 export { cssObjectFromTheme } from './css/cssObjectFromTheme';
 export { cssStringFromTheme } from './css/cssStringFromTheme';
 export type { Locale } from './locales/';
 export { darkTheme } from './themes/darkTheme';
 export { lightTheme } from './themes/lightTheme';
-export { useAddRecentTransaction } from './transactions/useAddRecentTransaction';
 export { connectorsForWallets } from './wallets/connectorsForWallets';
 export { getDefaultWallets } from './wallets/getDefaultWallets';
 export { getWalletConnectConnector } from './wallets/getWalletConnectConnector';

package/dist/index.js

@@ -4,7 +4,6 @@ import {
 } from "./chunk-3A7E2IPT.js";
 import {
   ActionButton,
-  AppContext,
   AsyncImage,
   Box,
   CloseButton,
@@ -26,56 +25,31 @@ import {
   setWalletConnectDeepLink,
   touchableStyles,
   useAccountModal,
-  useChainId,
   useChainModal,
   useConnectModal,
   useCoolMode,
+  useFunCheckoutHistoryModal,
+  useFunCheckoutModal,
   useFunkitCheckout,
-  useTransactionStore,
   useWalletConnectors
-} from "./chunk-X5YTL45L.js";
+} from "./chunk-KQXRSMJW.js";
 import {
   darkTheme
 } from "./chunk-PKSFBURG.js";
 import "./chunk-VP4CAK4A.js";
 
 // src/components/ConnectOptions/MobileOptions.tsx
-import React4, { useCallback, useContext, useState } from "react";
-
-// src/components/Disclaimer/DisclaimerLink.tsx
-import React from "react";
-var DisclaimerLink = ({
-  children,
-  href
-}) => {
-  return /* @__PURE__ */ React.createElement(Box, {
-    as: "a",
-    color: "accentColor",
-    href,
-    rel: "noreferrer",
-    target: "_blank"
-  }, children);
-};
-
-// src/components/Disclaimer/DisclaimerText.tsx
-import React2 from "react";
-var DisclaimerText = ({ children }) => {
-  return /* @__PURE__ */ React2.createElement(Text, {
-    color: "modalTextSecondary",
-    size: "12",
-    weight: "medium"
-  }, children);
-};
+import React2, { useCallback, useContext, useState } from "react";
 
 // src/components/Icons/Back.tsx
-import React3 from "react";
-var BackIcon = () => /* @__PURE__ */ React3.createElement("svg", {
+import React from "react";
+var BackIcon = () => /* @__PURE__ */ React.createElement("svg", {
   fill: "none",
   height: "17",
   viewBox: "0 0 11 17",
   width: "11",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React3.createElement("path", {
+}, /* @__PURE__ */ React.createElement("path", {
   d: "M0.99707 8.6543C0.99707 9.08496 1.15527 9.44531 1.51562 9.79688L8.16016 16.3096C8.43262 16.5732 8.74902 16.7051 9.13574 16.7051C9.90918 16.7051 10.5508 16.0811 10.5508 15.3076C10.5508 14.9121 10.3838 14.5605 10.0938 14.2705L4.30176 8.64551L10.0938 3.0293C10.3838 2.74805 10.5508 2.3877 10.5508 2.00098C10.5508 1.23633 9.90918 0.603516 9.13574 0.603516C8.74902 0.603516 8.43262 0.735352 8.16016 0.999023L1.51562 7.51172C1.15527 7.85449 1.00586 8.21484 0.99707 8.6543Z",
   fill: "currentColor"
 }));
@@ -103,7 +77,7 @@ function WalletButton({
   const getMobileUri = mobile?.getUri;
   const coolModeRef = useCoolMode(iconUrl);
   const i18n = useContext(I18nContext);
-  return /* @__PURE__ */ React4.createElement(Box, {
+  return /* @__PURE__ */ React2.createElement(Box, {
     as: "button",
     color: ready ? "modalText" : "modalTextSecondary",
     disabled: !ready,
@@ -142,34 +116,34 @@ function WalletButton({
     testId: `wallet-option-${id}`,
     type: "button",
     width: "full"
-  }, /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(Box, {
     alignItems: "center",
     display: "flex",
     flexDirection: "column",
     justifyContent: "center"
-  }, /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(Box, {
     paddingBottom: "8",
     paddingTop: "10"
-  }, /* @__PURE__ */ React4.createElement(AsyncImage, {
+  }, /* @__PURE__ */ React2.createElement(AsyncImage, {
     background: iconBackground,
     borderRadius: "13",
     boxShadow: "walletLogo",
     height: "60",
     src: iconUrl,
     width: "60"
-  })), /* @__PURE__ */ React4.createElement(Box, {
+  })), /* @__PURE__ */ React2.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     textAlign: "center"
-  }, /* @__PURE__ */ React4.createElement(Text, {
+  }, /* @__PURE__ */ React2.createElement(Text, {
     as: "h2",
     color: wallet.ready ? "modalText" : "modalTextSecondary",
     size: "13",
     weight: "medium"
-  }, /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(Box, {
     as: "span",
     position: "relative"
-  }, shortName ?? name, !wallet.ready && " (unsupported)")), wallet.recent && /* @__PURE__ */ React4.createElement(Text, {
+  }, shortName ?? name, !wallet.ready && " (unsupported)")), wallet.recent && /* @__PURE__ */ React2.createElement(Text, {
     color: "accentColor",
     size: "12",
     weight: "medium"
@@ -178,7 +152,6 @@ function WalletButton({
 function MobileOptions({ onClose }) {
   const titleId = "rk_connect_title";
   const wallets = useWalletConnectors();
-  const { disclaimer: Disclaimer, learnMoreUrl } = useContext(AppContext);
   let headerLabel = null;
   let walletContent = null;
   let headerBackgroundContrast = false;
@@ -192,74 +165,62 @@ function MobileOptions({ onClose }) {
     case "CONNECT" /* Connect */: {
       headerLabel = i18n.t("connect.title");
       headerBackgroundContrast = true;
-      walletContent = /* @__PURE__ */ React4.createElement(Box, null, /* @__PURE__ */ React4.createElement(Box, {
+      walletContent = /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(Box, {
         background: "profileForeground",
         className: scroll,
         display: "flex",
         paddingBottom: "20",
         paddingTop: "6"
-      }, /* @__PURE__ */ React4.createElement(Box, {
+      }, /* @__PURE__ */ React2.createElement(Box, {
         display: "flex",
         style: { margin: "0 auto" }
       }, wallets.filter((wallet) => wallet.ready).map((wallet) => {
-        return /* @__PURE__ */ React4.createElement(Box, {
+        return /* @__PURE__ */ React2.createElement(Box, {
           key: wallet.id,
           paddingX: "20"
-        }, /* @__PURE__ */ React4.createElement(Box, {
+        }, /* @__PURE__ */ React2.createElement(Box, {
           width: "60"
-        }, /* @__PURE__ */ React4.createElement(WalletButton, {
+        }, /* @__PURE__ */ React2.createElement(WalletButton, {
           onClose,
           wallet
         })));
-      }))), /* @__PURE__ */ React4.createElement(Box, {
+      }))), /* @__PURE__ */ React2.createElement(Box, {
         background: "generalBorder",
         height: "1",
         marginBottom: "32",
         marginTop: "-1"
-      }), /* @__PURE__ */ React4.createElement(Box, {
+      }), /* @__PURE__ */ React2.createElement(Box, {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
         gap: "32",
         paddingX: "32",
         style: { textAlign: "center" }
-      }, /* @__PURE__ */ React4.createElement(Box, {
+      }, /* @__PURE__ */ React2.createElement(Box, {
         display: "flex",
         flexDirection: "column",
         gap: "8",
         textAlign: "center"
-      }, /* @__PURE__ */ React4.createElement(Text, {
+      }, /* @__PURE__ */ React2.createElement(Text, {
         color: "modalText",
         size: "16",
         weight: "bold"
-      }, i18n.t("intro.title")), /* @__PURE__ */ React4.createElement(Text, {
+      }, i18n.t("intro.title")), /* @__PURE__ */ React2.createElement(Text, {
         color: "modalTextSecondary",
         size: "16"
-      }, i18n.t("intro.description")))), /* @__PURE__ */ React4.createElement(Box, {
+      }, i18n.t("intro.description")))), /* @__PURE__ */ React2.createElement(Box, {
         paddingTop: "32",
         paddingX: "20"
-      }, /* @__PURE__ */ React4.createElement(Box, {
+      }, /* @__PURE__ */ React2.createElement(Box, {
         display: "flex",
         gap: "14",
         justifyContent: "center"
-      }, /* @__PURE__ */ React4.createElement(ActionButton, {
+      }, /* @__PURE__ */ React2.createElement(ActionButton, {
         label: i18n.t("intro.get.label"),
         onClick: () => setWalletStep("GET" /* Get */),
         size: "large",
         type: "secondary"
-      }), /* @__PURE__ */ React4.createElement(ActionButton, {
-        href: learnMoreUrl,
-        label: i18n.t("intro.learn_more.label"),
-        size: "large",
-        type: "secondary"
-      }))), Disclaimer && /* @__PURE__ */ React4.createElement(Box, {
-        marginTop: "28",
-        marginX: "32",
-        textAlign: "center"
-      }, /* @__PURE__ */ React4.createElement(Disclaimer, {
-        Link: DisclaimerLink,
-        Text: DisclaimerText
-      })));
+      }))));
       break;
     }
     case "GET" /* Get */: {
@@ -268,7 +229,7 @@ function MobileOptions({ onClose }) {
       const mobileWallets = wallets?.filter(
         (wallet) => wallet.downloadUrls?.ios || wallet.downloadUrls?.android || wallet.downloadUrls?.mobile
       )?.splice(0, 3);
-      walletContent = /* @__PURE__ */ React4.createElement(Box, null, /* @__PURE__ */ React4.createElement(Box, {
+      walletContent = /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(Box, {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
@@ -282,88 +243,88 @@ function MobileOptions({ onClose }) {
         if (!downloadUrls?.ios && !downloadUrls?.android && !downloadUrls?.mobile) {
           return null;
         }
-        return /* @__PURE__ */ React4.createElement(Box, {
+        return /* @__PURE__ */ React2.createElement(Box, {
           display: "flex",
           gap: "16",
           key: wallet.id,
           paddingX: "20",
           width: "full"
-        }, /* @__PURE__ */ React4.createElement(Box, {
+        }, /* @__PURE__ */ React2.createElement(Box, {
           style: { minHeight: 48, minWidth: 48 }
-        }, /* @__PURE__ */ React4.createElement(AsyncImage, {
+        }, /* @__PURE__ */ React2.createElement(AsyncImage, {
           background: iconBackground,
           borderColor: "generalBorder",
           borderRadius: "10",
           height: "48",
           src: iconUrl,
           width: "48"
-        })), /* @__PURE__ */ React4.createElement(Box, {
+        })), /* @__PURE__ */ React2.createElement(Box, {
           display: "flex",
           flexDirection: "column",
           width: "full"
-        }, /* @__PURE__ */ React4.createElement(Box, {
+        }, /* @__PURE__ */ React2.createElement(Box, {
           alignItems: "center",
           display: "flex",
           height: "48"
-        }, /* @__PURE__ */ React4.createElement(Box, {
+        }, /* @__PURE__ */ React2.createElement(Box, {
           width: "full"
-        }, /* @__PURE__ */ React4.createElement(Text, {
+        }, /* @__PURE__ */ React2.createElement(Text, {
           color: "modalText",
           size: "18",
           weight: "bold"
-        }, name)), /* @__PURE__ */ React4.createElement(ActionButton, {
+        }, name)), /* @__PURE__ */ React2.createElement(ActionButton, {
           href: (ios ? downloadUrls?.ios : downloadUrls?.android) || downloadUrls?.mobile,
           label: i18n.t("get.action.label"),
           size: "small",
           type: "secondary"
-        })), index < mobileWallets.length - 1 && /* @__PURE__ */ React4.createElement(Box, {
+        })), index < mobileWallets.length - 1 && /* @__PURE__ */ React2.createElement(Box, {
           background: "generalBorderDim",
           height: "1",
           marginY: "10",
           width: "full"
         })));
-      })), /* @__PURE__ */ React4.createElement(Box, {
+      })), /* @__PURE__ */ React2.createElement(Box, {
         style: { marginBottom: "42px" }
-      }), /* @__PURE__ */ React4.createElement(Box, {
+      }), /* @__PURE__ */ React2.createElement(Box, {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
         gap: "36",
         paddingX: "36",
         style: { textAlign: "center" }
-      }, /* @__PURE__ */ React4.createElement(Box, {
+      }, /* @__PURE__ */ React2.createElement(Box, {
         display: "flex",
         flexDirection: "column",
         gap: "12",
         textAlign: "center"
-      }, /* @__PURE__ */ React4.createElement(Text, {
+      }, /* @__PURE__ */ React2.createElement(Text, {
         color: "modalText",
         size: "16",
         weight: "bold"
-      }, i18n.t("get.looking_for.title")), /* @__PURE__ */ React4.createElement(Text, {
+      }, i18n.t("get.looking_for.title")), /* @__PURE__ */ React2.createElement(Text, {
         color: "modalTextSecondary",
         size: "16"
       }, i18n.t("get.looking_for.mobile.description")))));
       break;
     }
   }
-  return /* @__PURE__ */ React4.createElement(Box, {
+  return /* @__PURE__ */ React2.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     paddingBottom: "36"
-  }, /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(Box, {
     background: headerBackgroundContrast ? "profileForeground" : "modalBackground",
     display: "flex",
     flexDirection: "column",
     paddingBottom: "4",
     paddingTop: "14"
-  }, /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     paddingBottom: "6",
     paddingX: "20",
     position: "relative"
-  }, headerBackButtonLink && /* @__PURE__ */ React4.createElement(Box, {
+  }, headerBackButtonLink && /* @__PURE__ */ React2.createElement(Box, {
     display: "flex",
     position: "absolute",
     style: {
@@ -371,7 +332,7 @@ function MobileOptions({ onClose }) {
       marginBottom: -20,
       marginTop: -20
     }
-  }, /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(Box, {
     alignItems: "center",
     as: "button",
     className: touchableStyles({
@@ -387,28 +348,28 @@ function MobileOptions({ onClose }) {
     style: { height: 17, willChange: "transform" },
     transition: "default",
     type: "button"
-  }, /* @__PURE__ */ React4.createElement(BackIcon, null))), /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(BackIcon, null))), /* @__PURE__ */ React2.createElement(Box, {
     marginTop: "4",
     textAlign: "center",
     width: "full"
-  }, /* @__PURE__ */ React4.createElement(Text, {
+  }, /* @__PURE__ */ React2.createElement(Text, {
     as: "h1",
     color: "modalText",
     id: titleId,
     size: "20",
     weight: "bold"
-  }, headerLabel)), /* @__PURE__ */ React4.createElement(Box, {
+  }, headerLabel)), /* @__PURE__ */ React2.createElement(Box, {
     alignItems: "center",
     display: "flex",
     height: "32",
     paddingRight: "14",
     position: "absolute",
     right: "0"
-  }, /* @__PURE__ */ React4.createElement(Box, {
+  }, /* @__PURE__ */ React2.createElement(Box, {
     style: { marginBottom: -20, marginTop: -20 }
-  }, /* @__PURE__ */ React4.createElement(CloseButton, {
+  }, /* @__PURE__ */ React2.createElement(CloseButton, {
     onClose
-  }))))), /* @__PURE__ */ React4.createElement(Box, {
+  }))))), /* @__PURE__ */ React2.createElement(Box, {
     display: "flex",
     flexDirection: "column"
   }, walletContent));
@@ -422,24 +383,6 @@ var __private__ = {
   MobileOptions
 };
 
-// src/transactions/useAddRecentTransaction.ts
-import { useCallback as useCallback2 } from "react";
-import { useAccount } from "wagmi";
-function useAddRecentTransaction() {
-  const store = useTransactionStore();
-  const { address } = useAccount();
-  const chainId = useChainId();
-  return useCallback2(
-    (transaction) => {
-      if (!address || !chainId) {
-        throw new Error("No address or chain ID found");
-      }
-      store.addTransaction(address, chainId, transaction);
-    },
-    [store, address, chainId]
-  );
-}
-
 // src/wallets/walletConnectors/braveWallet/braveWallet.ts
 import { InjectedConnector } from "wagmi/connectors/injected";
 var braveWallet = ({
@@ -927,8 +870,9 @@ export {
   getWalletConnectConnector,
   lightTheme,
   useAccountModal,
-  useAddRecentTransaction,
   useChainModal,
   useConnectModal,
+  useFunCheckoutHistoryModal,
+  useFunCheckoutModal,
   useFunkitCheckout
 };