@bosonprotocol/react-kit 0.34.0-alpha.4 → 0.34.0-alpha.41

package/src/hooks/connection/connection.ts

@@ -67,26 +67,36 @@ export function useChainId(): number | undefined {
   const {
     withExternalConnectionProps,
     externalConnectedChainId,
-    withWeb3React
+    withWeb3React,
+    withMagicLink
   } = useConfigContext();
   const externalSigner = useExternalSigner();
   const { data: externalSignerChainId } = useExternalSignerChainId();
-  const magicChainId = useMagicChainId();
   const isMagicLoggedIn = useIsMagicLoggedIn();
   let networkChainId: number | undefined;
+  let magicChainId: number | undefined;
   let error: unknown;
+  let magicError: unknown;
   try {
     networkChainId = useNetwork().chain?.id;
   } catch (wagmiError) {
     error = wagmiError; // error if the provider is not there
   }
+  try {
+    magicChainId = useMagicChainId();
+  } catch (error) {
+    magicError = error; // error if the provider is not there
+  }
+  if (!withExternalConnectionProps && magicError && withMagicLink) {
+    throw magicError;
+  }
   if (externalConnectedChainId) {
     return externalConnectedChainId;
   }
   if (externalSigner) {
     return externalSignerChainId;
   }
-  if (isMagicLoggedIn) {
+  if (isMagicLoggedIn && withMagicLink) {
     return magicChainId;
   }
   if (web3ReactChainId) {
@@ -108,32 +118,43 @@ export function useIsConnectedToWrongChain(): boolean {
 export function useProvider():
   | providers.JsonRpcProvider
   | providers.FallbackProvider {
-  const { withExternalConnectionProps, withWeb3React } = useConfigContext();
+  const { withExternalConnectionProps, withWeb3React, withMagicLink } =
+    useConfigContext();
   const { provider: web3Provider } = useWeb3ReactWrapper() || {};
-  let provider;
+  let provider, magicProvider;
   let error: unknown;
   try {
     provider = useEthersProvider();
   } catch (wagmiError) {
     error = wagmiError; // error if the provider is not there
   }
-  const magicProvider = useMagicProvider();
-  const isMagicLoggedIn = useIsMagicLoggedIn();
   if (!withExternalConnectionProps && error && !withWeb3React) {
     throw error;
   }
+  try {
+    magicProvider = useMagicProvider();
+  } catch (magicError) {
+    error = magicError; // error if the provider is not there
+  }
+  if (!withExternalConnectionProps && error && withMagicLink) {
+    throw error;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const magicLinkProvider = magicProvider!; // it should always be not null at this point
+  const isMagicLoggedIn = useIsMagicLoggedIn();
   return isMagicLoggedIn
-    ? magicProvider ?? web3Provider ?? provider
+    ? magicLinkProvider ?? web3Provider ?? provider
     : withWeb3React
-      ? web3Provider ?? magicProvider ?? provider
-      : provider ?? magicProvider ?? web3Provider;
+      ? web3Provider ?? magicLinkProvider ?? provider
+      : provider ?? magicLinkProvider ?? web3Provider;
 }
 
 export function useSigner(): Signer | undefined {
   const {
     withExternalConnectionProps,
     externalConnectedSigner,
-    withWeb3React
+    withWeb3React,
+    withMagicLink
   } = useConfigContext();
   let wagmiSigner: ReturnType<typeof useEthersSigner>, error: unknown;
   try {
@@ -142,8 +163,14 @@ export function useSigner(): Signer | undefined {
   } catch (wagmiError) {
     error = wagmiError; // error if the provider is not there
   }
+  let magicProvider: providers.Web3Provider | undefined, magicError: unknown;
+
+  try {
+    magicProvider = useMagicProvider();
+  } catch (err) {
+    magicError = err; // error if the provider is not there
+  }
   const { externalSigner } = useExternalSigner() ?? {};
-  const magicProvider = useMagicProvider();
   const isMagicLoggedIn = useIsMagicLoggedIn();
   const { provider: web3Provider } = useWeb3ReactWrapper() || {};
 
@@ -169,6 +196,9 @@ export function useSigner(): Signer | undefined {
   if (!withExternalConnectionProps && error && !withWeb3React) {
     throw error;
   }
+  if (!withExternalConnectionProps && magicError && withMagicLink) {
+    throw magicError;
+  }
   return signer;
 }
 

package/src/hooks/connection/useSyncChainQuery.ts

@@ -35,7 +35,7 @@ export default function useSyncChainQuery() {
   const parsedQs = useParsedQueryString();
   const configIdRef = useRef(currentConfigId);
   const accountRef = useRef(account);
-  const accountAlreadyConnected = useRef(account);
+  const accountAlreadyConnected = useRef<string | undefined>(account);
   const disconnect = useCallback(() => {
     accountAlreadyConnected.current = undefined;
     _disconnect({ isUserDisconnecting: false });

package/src/hooks/index.ts

@@ -25,3 +25,13 @@ export * from "./ipfs/useIpfsStorage";
 export * from "./location/buildUseSearchParams";
 export * from "./form/useForm";
 export * from "./useBreakpoints";
+export * from "./useSignerAddress";
+export * from "./useMetaTx";
+export { useCtaClickHandler } from "./useCtaClickHandler";
+export {
+  useToggleAccountDrawer,
+  useAccountDrawer,
+  useCloseAccountDrawer,
+  useOpenAccountDrawer
+} from "../components/wallet2/accountDrawer/index";
+export * from "./usePrevious";

package/src/hooks/magic.ts

@@ -2,13 +2,15 @@ import { useContext } from "react";
 import { useQuery } from "react-query";
 import { MagicContext } from "../components/magicLink/MagicContext";
 import { useUser } from "../components/magicLink/UserContext";
+import { useConfigContext } from "../components/config/ConfigContext";
 
 export const useMagic = () => {
+  const { withMagicLink } = useConfigContext();
   const context = useContext(MagicContext);
-  if (!context) {
+  if (!context && withMagicLink) {
     throw new Error("useMagic must be used within MagicContext");
   }
-  return context.magic;
+  return context?.magic;
 };
 
 export const useWalletInfo = () => {
@@ -23,11 +25,12 @@ export const useWalletInfo = () => {
 };
 
 export function useMagicProvider() {
+  const { withMagicLink } = useConfigContext();
   const context = useContext(MagicContext);
-  if (!context) {
+  if (!context && withMagicLink) {
     throw new Error("useMagic must be used within MagicContext");
   }
-  return context.magicProvider;
+  return context?.magicProvider;
 }
 
 export function useMagicChainId() {
@@ -36,7 +39,7 @@ export function useMagicChainId() {
 }
 
 export function useIsMagicLoggedIn() {
-  const { user } = useUser();
-  const isMagicLoggedIn = !!user;
+  const userContext = useUser();
+  const isMagicLoggedIn = !!userContext?.user;
   return isMagicLoggedIn;
 }

package/src/hooks/useCtaClickHandler.ts

@@ -20,7 +20,10 @@ export function useCtaClickHandler<T>({
   successPayload
 }: {
   waitBlocks: number;
-  coreSdk: CoreSDK;
+  coreSdk: Pick<
+    CoreSDK,
+    "relayNativeMetaTransaction" | "relayMetaTransaction" | "parseError"
+  >;
   useMetaTx: boolean;
   actions: Action[];
   successPayload: T | ((receipt: providers.TransactionReceipt) => T);

package/src/hooks/useMetaTx.ts

@@ -1,7 +1,9 @@
 import { CoreSDK } from "@bosonprotocol/core-sdk";
 import { useSignerAddress } from "./useSignerAddress";
 
-export function useMetaTx(coreSdk: CoreSDK | undefined) {
+export function useMetaTx(
+  coreSdk: Pick<CoreSDK, "isMetaTxConfigSet" | "web3Lib"> | undefined
+) {
   const { signerAddress, signerContract } = useSignerAddress(coreSdk?.web3Lib);
   const isMetaTx = coreSdk
     ? Boolean(coreSdk.isMetaTxConfigSet && signerAddress && !signerContract)

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from "./components/buttons/BurgerButton";
 export * from "./components/buttons/Button";
 export * from "./components/buttons/CommitButtonView";
 export * from "./components/config/ConfigProvider";
+export * from "./components/cta/common/types";
 export * from "./components/cta/dispute/DecideDisputeButton";
 export * from "./components/cta/dispute/EscalateDisputeButton";
 export * from "./components/cta/dispute/ExpireDisputeButton";
@@ -45,6 +46,8 @@ export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeD
 export * from "./components/portal/Portal";
 export * from "./components/productCard/const";
 export * from "./components/productCard/ProductCard";
+export * from "./components/queryClient/withQueryClientProvider";
+export * from "./components/queryClient/QueryClientProviderCustom";
 export * from "./components/scroll/ScrollToID";
 export * from "./components/scroll/ScrollToTop";
 export * from "./components/searchBar/SearchBar";
@@ -85,6 +88,7 @@ export * from "./lib/magicLink/logout";
 export * from "./lib/magicLink/provider";
 export * from "./lib/offer/filter";
 export * from "./lib/offer/getIsOfferExpired";
+export * from "./lib/opensea/getOpenSeaUrl";
 export * from "./lib/promises/promises";
 export * from "./lib/url/url";
 export * from "./theme";

package/src/lib/config/config.ts

@@ -7,11 +7,6 @@ const magicLinkKey =
   import.meta?.env.STORYBOOK_REACT_APP_MAGIC_API_KEY ||
   // @ts-expect-error import.meta.env only exists in vite environments
   import.meta?.env.REACT_APP_MAGIC_API_KEY;
-if (!magicLinkKey) {
-  throw new Error(
-    "STORYBOOK_REACT_APP_MAGIC_API_KEY/REACT_APP_MAGIC_API_KEY is not defined"
-  );
-}
 const infuraKey =
   process.env.STORYBOOK_REACT_APP_INFURA_KEY ||
   process.env.REACT_APP_INFURA_KEY ||

package/src/lib/signer/externalSigner.ts

@@ -152,6 +152,13 @@ const getExternalWeb3LibAdapterListener = ({
         );
       });
     },
+    estimateGas: async (...args: any[]): Promise<BigNumberish> => {
+      return getDefaultHandleSignerFunction<BigNumberish>({
+        parentOrigin,
+        functionName: "estimateGas",
+        args
+      });
+    },
     call: async (...args: any[]): Promise<string> => {
       return getDefaultHandleSignerFunction<string>({
         parentOrigin,

package/src/stories/ConnectWallet.stories.tsx

@@ -1,5 +1,5 @@
 import { fn } from "@storybook/test";
-import React from "react";
+import React, { ReactNode } from "react";
 import { Meta } from "@storybook/react";
 import {
   ChainSelector,
@@ -17,8 +17,9 @@ import {
 import { HashRouter, Route, Routes } from "react-router-dom";
 import { bosonButtonThemeKeys } from "../components/ui/ThemedButton";
 import { CSSProperties, createGlobalStyle } from "styled-components";
+import { Wallet } from "phosphor-react";
 const colors = theme.colors.light;
-const successButtonTheme: ConnectWalletProps["successButtonTheme"] = {
+const successButtonTheme: ConnectWalletProps["connectWalletButtonTheme"] = {
   ...bosonButtonThemes({ withBosonStyle: false })["primary"],
   color: "inherit",
   background: "var(--buttonBgColor)"
@@ -30,13 +31,17 @@ const errorButtonTheme = bosonButtonThemes({ withBosonStyle: false })[
 const envName =
   (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
 const envConfig = getEnvConfigs(envName);
-const configId = envConfig[0].configId;
+const config = envConfig[0];
+const configId = config.configId;
 const ColorGlobalStyle = createGlobalStyle<{ color: CSSProperties["color"] }>`
   html, body{
     color: ${({ color }) => color};
   }
 `;
 const Component = ({
+  showStatusIcon,
+  rightConnectedChild,
+  connectWalletChild,
   textColor,
   chainSelectorBackgroundColor,
   connectWalletBorderRadius,
@@ -55,10 +60,16 @@ const Component = ({
   walletHoverFocusBackgroundColor,
   walletHoverColor,
   magicLoginButtonThemeKey,
+  connectionErrorTryAgainButtonThemeKey,
+  connectionErrorBackToWalletSelectionButtonThemeKey,
   magicLoginButtonBorderRadiusPx,
+  withMagicLogin,
   onUserDisconnect
 }: {
+  showStatusIcon: boolean;
+  rightConnectedChild?: ReactNode;
   textColor: string;
+  connectWalletChild: string;
   chainSelectorBackgroundColor: string | undefined;
   connectWalletBorderRadius: string | undefined;
   connectWalletSuccessButtonThemeKey: string | undefined;
@@ -76,7 +87,10 @@ const Component = ({
   walletHoverFocusBackgroundColor: string | undefined;
   walletHoverColor: string | undefined;
   magicLoginButtonThemeKey: string | undefined;
+  connectionErrorTryAgainButtonThemeKey: string;
+  connectionErrorBackToWalletSelectionButtonThemeKey: string;
   magicLoginButtonBorderRadiusPx: string | undefined;
+  withMagicLogin: boolean | undefined;
   onUserDisconnect: () => unknown;
 }) => {
   return (
@@ -114,9 +128,22 @@ const Component = ({
                   <ChainSelector
                     leftAlign={true}
                     backgroundColor={chainSelectorBackgroundColor}
+                    config={config}
                   />
                   <ConnectWallet
-                    successButtonTheme={{
+                    showStatusIcon={showStatusIcon}
+                    connectWalletChild={connectWalletChild}
+                    rightConnectedChild={rightConnectedChild}
+                    connectWalletButtonTheme={{
+                      ...(connectWalletSuccessButtonThemeKey
+                        ? bosonButtonThemes({ withBosonStyle: false })[
+                            connectWalletSuccessButtonThemeKey
+                          ]
+                        : successButtonTheme),
+                      borderRadius: connectWalletBorderRadius,
+                      gap: "2px"
+                    }}
+                    connectedButtonTheme={{
                       ...(connectWalletSuccessButtonThemeKey
                         ? bosonButtonThemes({ withBosonStyle: false })[
                             connectWalletSuccessButtonThemeKey
@@ -154,6 +181,7 @@ const Component = ({
                     disconnectColor={accountDrawerDisconnectColor}
                     onUserDisconnect={onUserDisconnect}
                     walletModalProps={{
+                      withMagicLogin,
                       optionProps: {
                         backgroundColor: walletBackgroundColor,
                         color: walletColor,
@@ -175,6 +203,19 @@ const Component = ({
                           }
                         }
                       },
+                      connectionErrorProps: {
+                        tryAgainTheme: connectionErrorTryAgainButtonThemeKey
+                          ? bosonButtonThemes({ withBosonStyle: false })[
+                              connectionErrorTryAgainButtonThemeKey
+                            ]
+                          : successButtonTheme,
+                        backToWalletSelectionTheme:
+                          connectionErrorBackToWalletSelectionButtonThemeKey
+                            ? bosonButtonThemes({ withBosonStyle: false })[
+                                connectionErrorBackToWalletSelectionButtonThemeKey
+                              ]
+                            : successButtonTheme
+                      },
                       PrivacyPolicy: () => <div>privacy policy</div>
                     }}
                   />
@@ -224,6 +265,14 @@ export default {
     magicLoginButtonThemeKey: {
       control: "select",
       options: bosonButtonThemeKeys
+    },
+    connectionErrorTryAgainButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
+    },
+    connectionErrorBackToWalletSelectionButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
     }
   },
   decorators: [
@@ -258,7 +307,9 @@ export const BosonTheme = {
     walletColor: colors.white,
     walletHoverFocusBackgroundColor: colors.black,
     walletHoverColor: colors.white,
-    magicLoginButtonThemeKey: undefined
+    magicLoginButtonThemeKey: undefined,
+    connectionErrorTryAgainButtonThemeKey: "orangeInverse",
+    connectionErrorBackToWalletSelectionButtonThemeKey: "orangeInverse"
   }
 };
 
@@ -283,6 +334,12 @@ export const CustomTheme = {
     walletHoverFocusBackgroundColor: "#e89f0e",
     walletHoverColor: "#ff0000",
     magicLoginButtonThemeKey: "orangeInverse",
-    magicLoginButtonBorderRadiusPx: "50"
+    connectionErrorTryAgainButtonThemeKey: "orangeInverse",
+    connectionErrorBackToWalletSelectionButtonThemeKey: "orangeInverse",
+    magicLoginButtonBorderRadiusPx: "50",
+    withMagicLogin: true,
+    showStatusIcon: false,
+    connectWalletChild: <>Connect</>,
+    rightConnectedChild: <Wallet />
   }
 };

package/src/stories/ProductCard.stories.tsx

@@ -39,13 +39,7 @@ ProductCardPrimary.args = {
     "https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
   avatarName: (
     <>
-      <span
-        style={{
-          color: "green"
-        }}
-      >
-        JSON Doe
-      </span>
+      <span>JSON Doe</span>
     </>
   ),
   asterisk: true,

package/src/stories/buttons/Upload.stories.tsx

@@ -1,11 +1,9 @@
-import { fn } from "@storybook/test";
 import React from "react";
 import { Meta } from "@storybook/react";
-import { Upload } from "../..";
+import { BaseUploadProps, QueryClientProviderCustom, Upload } from "../..";
 import { EnvironmentProvider } from "../../components/environment/EnvironmentProvider";
 import { IpfsProvider } from "../../components/ipfs/IpfsProvider";
 import { Formik } from "formik";
-import { QueryClientProviderCustom } from "../../components/queryClient/withQueryClientProvider";
 import {
   bosonButtonThemeKeys,
   bosonButtonThemes
@@ -22,7 +20,6 @@ export default {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
-  // args: { onClick: fn() },
   argTypes: {
     name: {
       table: {
@@ -71,20 +68,31 @@ export default {
 } satisfies Meta<typeof Upload>;
 
 const BASE_ARGS = {
-  name
-} as const;
+  name,
+  placeholder: "",
+  withEditor: false,
+  saveButtonTheme: undefined
+} as const satisfies BaseUploadProps;
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 export const Base = {
   args: {
     ...BASE_ARGS
-  }
+  } satisfies BaseUploadProps
 };
 
 export const VideoOnly = {
   args: {
     ...BASE_ARGS,
     accept: "video/mp4",
-    withUpload: true
-  }
+    withUpload: false
+  } satisfies BaseUploadProps
+};
+
+export const PdfOnly = {
+  args: {
+    ...BASE_ARGS,
+    accept: "application/pdf",
+    placeholder: "Upload pdf"
+  } satisfies BaseUploadProps
 };

package/src/stories/form/BaseCheckbox.stories.tsx

@@ -111,3 +111,11 @@ export const CustomThemeWithError = {
     } satisfies BaseCheckboxProps["theme"]
   }
 };
+
+export const SimpleWithChildren = {
+  name: "With error with children",
+  args: {
+    ...BASE_ARGS,
+    children: <div>text in paragraph</div>
+  }
+};

package/src/stories/widgets/Commit.stories.tsx

@@ -28,7 +28,8 @@ const BASE_ARGS = {
   envName,
   configId: envConfig[0].configId,
   walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
-  withCustomReduxContext: false
+  withCustomReduxContext: false,
+  withMagicLink: true
 } as const;
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Commit.args = {

package/src/theme.ts

@@ -6,6 +6,7 @@ export const theme = {
       primary: "#02F3A2",
       secondary: "#7829F9",
       accent: "#7829F9",
+      darkNavy: "#1E1E1E",
       black: "#09182C",
       lightGrey: "#F1F3F9",
       darkGrey: "#556072",
@@ -30,7 +31,8 @@ export const theme = {
       cyan: "#00FFFF",
       lightArrowColor: "#dedfe3",
       darkGreyTimeStamp: "#E8EAF1",
-      lightGrey2: "#eff0f7"
+      lightGrey2: "#eff0f7",
+      greyText: "rgba(28, 13, 24, 0.75)"
     }
   },
   mobile: "768px",

package/src/types/helpers.ts

@@ -13,30 +13,6 @@ type Falsy = false | 0 | "" | null | undefined;
 
 export const isTruthy = <T>(x: T | Falsy): x is T => !!x;
 
-//#region Omit doesnt work well when using it with a type that has [x:string]: any, in that case there is no autocomplete: https://github.com/microsoft/TypeScript/issues/31153
-type KnownKeys<T> = {
-  [K in keyof T]: string extends K ? never : number extends K ? never : K;
-} extends { [_ in keyof T]: infer U }
-  ? {} extends U
-    ? never
-    : U
-  : never; // I don't know why not just U work here, but ({} extends U ? never : U) work
-
-type OmitFromKnownKeys<T, K extends keyof T> =
-  KnownKeys<T> extends infer U
-    ? [U] extends [keyof T]
-      ? Pick<T, Exclude<U, K>>
-      : never
-    : never;
-export type ExtendedOmit<T, K extends keyof T> = OmitFromKnownKeys<T, K> &
-  (string extends K
-    ? {}
-    : string extends keyof T
-      ? { [n: string]: T[Exclude<keyof T, number>] }
-      : {}) & // support number property
-  (number extends K
-    ? {}
-    : number extends keyof T
-      ? { [n: number]: T[Exclude<keyof T, string>] }
-      : {}); // support number property
-//#endregion
+export type AddDollarPrefixToKeys<T> = {
+  [K in keyof T as `$${string & K}`]: T[K];
+};