@bosonprotocol/react-kit 0.34.0-alpha.20 → 0.34.0-alpha.22

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/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/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/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 = {