@bosonprotocol/react-kit 0.29.0-alpha.1 → 0.29.0-alpha.3

package/src/components/widgets/commit/CommitWidgetProviders.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useCallback } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { CONFIG } from "../../../lib/config/config";
 import ChatProvider from "../../chat/ChatProvider/ChatProvider";
@@ -15,15 +15,19 @@ import WalletConnectionProvider, {
 import ConvertionRateProvider, {
   ConvertionRateProviderProps
 } from "../finance/convertion-rate/ConvertionRateProvider";
-import { Updaters } from "../../../state/updaters";
+import { Updaters, UpdatersProps } from "../../../state/updaters";
 import { Provider } from "react-redux";
 import store from "../../../state";
+import { ReduxCCDummyContext } from "../../../state/reduxContext";
+import { useIsWindowVisible } from "../../../hooks/uniswap/useIsWindowVisible";
+import { useProvider } from "../../../hooks/connection/connection";
 
 export type CommitWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
   ConvertionRateProviderProps &
   Omit<WalletConnectionProviderProps, "children" | "envName"> & {
     children: ReactNode;
+    withReduxProvider: boolean;
   };
 
 const queryClient = new QueryClient({
@@ -34,13 +38,60 @@ const queryClient = new QueryClient({
   }
 });
 const { infuraKey, magicLinkKey } = CONFIG;
+export const CommitWidgetReduxProvider = ({
+  children
+}: {
+  children: ReactNode;
+}) => {
+  return (
+    // it doesnt matter what the initial value of the context is, hence the any cast
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Provider store={store} context={ReduxCCDummyContext as any}>
+      {children}
+    </Provider>
+  );
+};
+export const CommitWidgetReduxUpdaters = ({
+  children,
+  ...rest
+}: UpdatersProps) => {
+  return <Updaters {...rest}>{children}</Updaters>;
+};
 
 export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> = ({
   children,
+  withReduxProvider,
   ...props
 }) => {
+  const isWindowVisible = useIsWindowVisible();
+  const WithReduxProvider = useCallback(
+    ({ children: providersChildren }: { children: ReactNode }) => {
+      return withReduxProvider ? (
+        <CommitWidgetReduxProvider>
+          {providersChildren}
+        </CommitWidgetReduxProvider>
+      ) : (
+        <>{providersChildren}</>
+      );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    [withReduxProvider]
+  );
+  const WithUpdaters = useCallback(
+    ({ children: updatersChildren }: { children: ReactNode }) => {
+      return withReduxProvider ? (
+        <UpdatersWrapper isWindowVisible={isWindowVisible}>
+          {updatersChildren}
+        </UpdatersWrapper>
+      ) : (
+        <>{updatersChildren}</>
+      );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    [withReduxProvider, isWindowVisible]
+  );
   return (
-    <Provider store={store}>
+    <WithReduxProvider>
       <ConfigProvider
         magicLinkKey={magicLinkKey}
         infuraKey={infuraKey}
@@ -51,7 +102,7 @@ export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> = ({
             <WalletConnectionProvider
               walletConnectProjectId={props.walletConnectProjectId}
             >
-              <Updaters>
+              <WithUpdaters>
                 <ChatProvider>
                   <IpfsProvider {...props}>
                     <ConvertionRateProvider>
@@ -59,11 +110,26 @@ export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> = ({
                     </ConvertionRateProvider>
                   </IpfsProvider>
                 </ChatProvider>
-              </Updaters>
+              </WithUpdaters>
             </WalletConnectionProvider>
           </QueryClientProvider>
         </MagicProvider>
       </ConfigProvider>
-    </Provider>
+    </WithReduxProvider>
   );
 };
+
+function UpdatersWrapper({
+  children,
+  isWindowVisible
+}: {
+  children: ReactNode;
+  isWindowVisible: boolean;
+}) {
+  const provider = useProvider();
+  return (
+    <Updaters isWindowVisible={isWindowVisible} provider={provider}>
+      {children}
+    </Updaters>
+  );
+}

package/src/hooks/index.ts

@@ -16,3 +16,4 @@ export * from "./contracts/erc721/useErc721Name";
 export * from "./contracts/erc721/useErc721OwnerOf";
 export * from "./contracts/erc1155/useErc1155Name";
 export * from "./contracts/erc1155/useErc1155Uri";
+export * from "./uniswap/useIsWindowVisible";

package/src/hooks/uniswap/useIsWindowVisible.ts

@@ -11,7 +11,7 @@ function isWindowVisible() {
 /**
  * Returns whether the window is currently visible to the user.
  */
-export default function useIsWindowVisible(): boolean {
+export function useIsWindowVisible(): boolean {
   const [focused, setFocused] = useState<boolean>(false);
   const listener = useCallback(() => {
     setFocused(isWindowVisible());

package/src/lib/config/config.ts

@@ -9,12 +9,11 @@ if (!magicLinkKey) {
   );
 }
 const infuraKey =
-  process.env.STORYBOOK_INFURA_PROJECT_SECRET ||
-  process.env.INFURA_PROJECT_SECRET ||
-  process.env.REACT_APP_INFURA_IPFS_PROJECT_SECRET;
+  process.env.STORYBOOK_REACT_APP_INFURA_KEY ||
+  process.env.REACT_APP_INFURA_KEY;
 if (!infuraKey) {
   throw new Error(
-    "STORYBOOK_INFURA_PROJECT_SECRET/INFURA_PROJECT_SECRET/REACT_APP_INFURA_IPFS_PROJECT_SECRET is not defined"
+    "STORYBOOK_REACT_APP_INFURA_KEY/REACT_APP_INFURA_KEY is not defined"
   );
 }
 

package/src/state/hooks.ts

@@ -1,8 +1,15 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import {
+  createDispatchHook,
+  createSelectorHook,
+  TypedUseSelectorHook
+} from "react-redux";
 
 import store from "./index";
+import { ReduxCCDummyContext } from "./reduxContext";
 
-export const useAppDispatch = () => useDispatch<typeof store.dispatch>();
+const useDappDispatch = createDispatchHook(ReduxCCDummyContext as any);
+export const useAppDispatch = () => useDappDispatch<typeof store.dispatch>();
+const useDappSelector = createSelectorHook(ReduxCCDummyContext as any);
 export const useAppSelector: TypedUseSelectorHook<
   ReturnType<typeof store.getState>
-> = useSelector;
+> = useDappSelector;

package/src/state/lists/updater.ts

@@ -10,15 +10,19 @@ import { useAllLists } from "../../state/lists/hooks";
 
 import { acceptListUpdate } from "./actions";
 import { shouldAcceptVersionUpdate } from "./utils";
-import { useProvider } from "../../hooks/connection/connection";
-import useIsWindowVisible from "../../hooks/uniswap/useIsWindowVisible";
 import { useInterval } from "../../hooks/uniswap/useInterval";
 import { useFetchListCallback } from "../../hooks/uniswap/useFetchListCallback";
+import { providers } from "ethers";
 
-export function ListsUpdater(): null {
-  const provider = useProvider();
+export type ListsUpdaterProps = {
+  isWindowVisible: boolean;
+  provider: providers.FallbackProvider | providers.JsonRpcProvider;
+};
+export function ListsUpdater({
+  isWindowVisible,
+  provider
+}: ListsUpdaterProps): null {
   const dispatch = useAppDispatch();
-  const isWindowVisible = useIsWindowVisible();
 
   // get all loaded lists, and the active urls
   const lists = useAllLists();

package/src/state/reducer.ts

@@ -16,10 +16,10 @@ const appReducer = combineReducers({
 export type AppState = ReturnType<typeof appReducer>;
 
 const persistConfig: PersistConfig<AppState> = {
-  key: "interface",
+  key: "CC",
   version: 0, // see migrations.ts for more details about this version
   storage: localForage.createInstance({
-    name: "redux"
+    name: "redux-cc"
   }),
   migrate: customCreateMigrate(migrations, { debug: false }),
   whitelist: Object.keys(persistedReducers),

package/src/state/reduxContext.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ReduxCCDummyContext = React.createContext(null);

package/src/state/updaters.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode } from "react";
-import { ListsUpdater } from "./lists/updater";
+import { ListsUpdater, ListsUpdaterProps } from "./lists/updater";
 
-export const Updaters = ({ children }: { children: ReactNode }) => {
+export type UpdatersProps = ListsUpdaterProps & { children?: ReactNode };
+export const Updaters = ({ children, ...rest }: UpdatersProps) => {
   return (
     <>
-      <ListsUpdater />
+      <ListsUpdater {...rest} />
       {children}
     </>
   );