@bosonprotocol/react-kit 0.36.0-alpha.9 → 0.36.1-alpha.0

package/src/components/ui/IpfsImage.tsx

@@ -17,8 +17,7 @@ import { zIndex } from "./zIndex";
 
 type LoadingStatus = "loading" | "success" | "error";
 
-const ImageWrapper = styled.div<{ $hide?: boolean }>`
-  display: ${({ $hide }) => ($hide ? "none !important" : undefined)};
+const ImageWrapper = styled.div`
   overflow: hidden;
   position: relative;
   z-index: ${zIndex.OfferCard};
@@ -52,17 +51,25 @@ const ImageContainer = styled.img`
   object-fit: cover;
 `;
 
-const ImagePlaceholder = styled.div`
+const Overlay = styled.div<{ $visible: boolean }>`
+  display: ${({ $visible }) => ($visible ? "flex" : "none")};
   position: absolute;
   top: 0;
-  height: 100%;
+  left: 0;
   width: 100%;
+  height: 100%;
   background-color: ${colors.greyDark};
-  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  z-index: 1;
+`;
 
+const ImagePlaceholder = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   span {
     ${buttonText}
     font-size: inherit;
@@ -115,33 +122,64 @@ export const IpfsImage: React.FC<IpfsImageProps> = ({
     if (src === currentSrc) {
       return;
     }
-    // reset all if src changes
-    setStatus(withLoading ? "loading" : "success");
+    setStatus((status) =>
+      status === "success" ? "success" : withLoading ? "loading" : "success"
+    );
     setCurrentSrc(
       getImageUrl(src, overrides?.ipfsGateway || ipfsGateway, optimizationOpts)
     );
     setDidOriginalSrcFail(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [src]);
+  }, [
+    src,
+    overrides?.ipfsGateway,
+    ipfsGateway,
+    optimizationOpts,
+    currentSrc,
+    withLoading
+  ]);
+
   const isError = status === "error";
   const isLoading = status === "loading";
   const isSuccess = status === "success";
 
   return (
-    <>
-      <ImageWrapper
-        {...rest}
-        $hide={!isLoading}
-        className={"loading-container " + rest.className}
-      >
+    <ImageWrapper {...rest} className={rest.className}>
+      <ImageContainer
+        data-testid={dataTestId}
+        src={currentSrc}
+        alt={alt}
+        onLoad={() => handleSetStatus("success")}
+        onError={() => {
+          if (didOriginalSrcFail) {
+            handleSetStatus("error");
+          } else {
+            setDidOriginalSrcFail(true);
+            const fallbackUrl = getFallbackImageUrl(
+              src,
+              ipfsGateway,
+              optimizationOpts
+            );
+            if (
+              fallbackUrl.startsWith("unsafe:") ||
+              fallbackUrl === currentSrc
+            ) {
+              handleSetStatus("error");
+            } else {
+              setCurrentSrc(fallbackUrl);
+            }
+          }
+        }}
+      />
+      {children}
+      <Overlay $visible={isLoading}>
         <ImagePlaceholder>
           <Typography tag="div">
             <Loading />
           </Typography>
         </ImagePlaceholder>
-      </ImageWrapper>
-      <ImageWrapper {...rest} $hide={!isError}>
-        <ImagePlaceholder data-image-placeholder>
+      </Overlay>
+      <Overlay $visible={!isLoading && (isError || !isSuccess)}>
+        <ImagePlaceholder>
           {showPlaceholderText ? (
             <ImageIcon size={50} color={colors.white} />
           ) : (
@@ -151,40 +189,7 @@ export const IpfsImage: React.FC<IpfsImageProps> = ({
             <Typography tag="span">IMAGE NOT AVAILABLE</Typography>
           )}
         </ImagePlaceholder>
-      </ImageWrapper>
-      <ImageWrapper
-        {...rest}
-        $hide={!isSuccess}
-        className={"image-container " + rest.className}
-      >
-        {children || ""}
-        <ImageContainer
-          data-testid={dataTestId}
-          src={currentSrc}
-          alt={alt}
-          onLoad={() => handleSetStatus("success")}
-          onError={() => {
-            if (didOriginalSrcFail) {
-              handleSetStatus("error");
-            } else {
-              setDidOriginalSrcFail(true);
-              const fallbackUrl = getFallbackImageUrl(
-                src,
-                ipfsGateway,
-                optimizationOpts
-              );
-              if (
-                fallbackUrl.startsWith("unsafe:") ||
-                fallbackUrl === currentSrc
-              ) {
-                handleSetStatus("error");
-              } else {
-                setCurrentSrc(fallbackUrl);
-              }
-            }
-          }}
-        />
-      </ImageWrapper>
-    </>
+      </Overlay>
+    </ImageWrapper>
   );
 };

package/src/components/ui/SvgImage.tsx

@@ -21,6 +21,8 @@ const SvgWrapper = styled.div`
 
 export const SvgImage: React.FC<SvgImageProps> = withQueryClientProvider(
   ({ src, ...rest }) => {
+    const isStringWithSvg =
+      !!src && typeof src === "string" && src.toLowerCase().startsWith("<svg");
     const { data: svgHtml, isLoading } = useQuery(
       [src],
       async () => {
@@ -37,7 +39,7 @@ export const SvgImage: React.FC<SvgImageProps> = withQueryClientProvider(
         return svgText;
       },
       {
-        enabled: typeof src === "string",
+        enabled: isStringWithSvg,
         staleTime: Infinity
       }
     );

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

@@ -20,7 +20,7 @@ import ConvertionRateProvider, {
   ConvertionRateProviderProps
 } from "../finance/convertion-rate/ConvertionRateProvider";
 import { Web3Provider, Web3ProviderProps } from "../../wallet2/web3Provider";
-import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
+import { BlockNumberProvider } from "../../../hooks/contracts/BlockNumberProvider";
 import {
   RedemptionProvider,
   RedemptionProviderProps
@@ -35,14 +35,14 @@ import { RobloxProvider } from "../../../hooks/roblox/context/RobloxProvider";
 
 export type CommitWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
-  BosonThemeProviderProps &
+  Partial<BosonThemeProviderProps> &
   RedemptionProviderProps &
   ConvertionRateProviderProps &
   Omit<Web3ProviderProps, "infuraKey"> &
   BosonProviderProps &
   WithReduxProviderProps & {
     children: ReactNode;
-    withGlobalStyle: boolean;
+    withGlobalStyle?: boolean;
   };
 
 const { infuraKey, magicLinkKey } = CONFIG;
@@ -78,8 +78,8 @@ export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> =
 
       return (
         <BosonThemeProvider
-          theme={props.theme || storyBookThemeKey}
-          roundness={props.roundness}
+          theme={props.theme || storyBookThemeKey || "light"}
+          roundness={props.roundness || "min"}
         >
           {withGlobalStyle && <GlobalStyledThemed />}
           <WithReduxProvider

package/src/components/widgets/finance/FinanceWidgetProviders.tsx

@@ -8,7 +8,6 @@ import {
 import { ModalProvider } from "../../modal/ModalProvider";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 import { SignerProvider } from "../../signer/SignerProvider";
-import GlobalStyle from "../../styles/GlobalStyle";
 import { WithReduxProvider, WithReduxProviderProps } from "../ReduxProvider";
 import { getParentWindowOrigin } from "../common";
 import { CommonWidgetTypes } from "../types";
@@ -17,51 +16,68 @@ import ConvertionRateProvider, {
 } from "./convertion-rate/ConvertionRateProvider";
 import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
 import { Web3Provider, Web3ProviderProps } from "../../wallet2/web3Provider";
-import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
+import { BlockNumberProvider } from "../../../hooks/contracts/BlockNumberProvider";
+import {
+  BosonThemeProvider,
+  BosonThemeProviderProps,
+  useBosonTheme
+} from "../BosonThemeProvider";
+import { GlobalStyledThemed } from "../../styles/GlobalStyledThemed";
 
 export type FinanceWidgetProvidersProps = Omit<
   ConfigProviderProps,
   "magicLinkKey" | "infuraKey"
 > &
   Omit<Web3ProviderProps, "infuraKey"> &
+  Partial<BosonThemeProviderProps> &
   CommonWidgetTypes &
   ConvertionRateProviderProps &
   BosonProviderProps &
   WithReduxProviderProps & {
     children: ReactNode;
+    withGlobalStyle?: boolean;
   };
 
 const { infuraKey, magicLinkKey } = CONFIG;
 
 export const FinanceWidgetProviders: React.FC<FinanceWidgetProvidersProps> =
-  withQueryClientProvider(({ children, ...props }) => {
+  withQueryClientProvider(({ children, withGlobalStyle, ...props }) => {
     const parentOrigin = getParentWindowOrigin();
+    const { themeKey: storyBookThemeKey } =
+      useBosonTheme({
+        throwOnError: false
+      }) || {};
     return (
-      <WithReduxProvider
-        withCustomReduxContext={props.withCustomReduxContext}
-        withReduxProvider={props.withReduxProvider}
+      <BosonThemeProvider
+        theme={props.theme || storyBookThemeKey || "light"}
+        roundness={props.roundness || "min"}
       >
-        <Web3Provider {...props} infuraKey={infuraKey}>
-          <ConfigProvider
-            magicLinkKey={magicLinkKey}
-            infuraKey={infuraKey}
-            {...props}
-          >
-            <BlockNumberProvider>
-              <BosonProvider {...props}>
-                <GlobalStyle />
-                <SignerProvider
-                  parentOrigin={parentOrigin}
-                  withExternalSigner={props.withExternalSigner}
-                >
-                  <ConvertionRateProvider>
-                    <ModalProvider>{children}</ModalProvider>
-                  </ConvertionRateProvider>
-                </SignerProvider>
-              </BosonProvider>
-            </BlockNumberProvider>
-          </ConfigProvider>
-        </Web3Provider>
-      </WithReduxProvider>
+        {withGlobalStyle && <GlobalStyledThemed />}
+        <WithReduxProvider
+          withCustomReduxContext={props.withCustomReduxContext}
+          withReduxProvider={props.withReduxProvider}
+        >
+          <Web3Provider {...props} infuraKey={infuraKey}>
+            <ConfigProvider
+              magicLinkKey={magicLinkKey}
+              infuraKey={infuraKey}
+              {...props}
+            >
+              <BlockNumberProvider>
+                <BosonProvider {...props}>
+                  <SignerProvider
+                    parentOrigin={parentOrigin}
+                    withExternalSigner={props.withExternalSigner}
+                  >
+                    <ConvertionRateProvider>
+                      <ModalProvider>{children}</ModalProvider>
+                    </ConvertionRateProvider>
+                  </SignerProvider>
+                </BosonProvider>
+              </BlockNumberProvider>
+            </ConfigProvider>
+          </Web3Provider>
+        </WithReduxProvider>
+      </BosonThemeProvider>
     );
   });

package/src/components/widgets/finance/useSellerRoles.ts

@@ -1,8 +1,6 @@
-import { gql } from "graphql-request";
 import { useMemo } from "react";
 import { useQuery } from "react-query";
 import { useCoreSDKWithContext } from "../../../hooks/core-sdk/useCoreSdkWithContext";
-import { fetchSubgraph } from "../../../lib/subgraph/subgraph";
 import { useAccount } from "../../../hooks/connection/connection";
 
 function lowerCase(str: string | undefined) {
@@ -19,44 +17,12 @@ export interface SellerRolesProps {
 export function useSellerRoles(id: string) {
   const { address } = useAccount();
   const coreSDK = useCoreSDKWithContext();
-
   const { data } = useQuery(
-    ["seller-roles", { id }],
+    ["seller-roles", id, coreSDK.uuid],
     async () => {
-      const result = await fetchSubgraph<{
-        sellers: {
-          id: string;
-          admin: string;
-          clerk: string;
-          assistant: string;
-          treasury: string;
-          active: boolean;
-        }[];
-      }>(
-        coreSDK.subgraphUrl,
-        gql`
-          query GetSellerByID(
-            $id: String
-          ) {
-            sellers(
-              where: {
-                ${id ? `id: "${id}"` : ""}
-              }
-            ) {
-              id
-              admin
-              active
-              clerk
-              assistant
-              treasury
-            }
-          }
-        `,
-        {
-          id
-        }
-      );
-      return result?.sellers[0] ?? null;
+      const seller = await coreSDK.getSellerById(id);
+
+      return seller ?? null;
     },
     {
       enabled: !!id

package/src/components/widgets/index.tsx

@@ -1,4 +1,6 @@
 export * from "./BosonThemeProvider";
+export * from "./ReduxProvider";
+export { BlockNumberProvider } from "../../hooks/contracts/BlockNumberProvider";
 export { RedemptionWidgetAction } from "./redemption/provider/RedemptionWidgetContext";
 
 export * from "./finance/FinanceWidget";

package/src/components/widgets/redemption/RedemptionWidgetProviders.tsx

@@ -9,7 +9,6 @@ import { IpfsProvider, IpfsProviderProps } from "../../ipfs/IpfsProvider";
 import { ModalProvider } from "../../modal/ModalProvider";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 import { SignerProvider } from "../../signer/SignerProvider";
-import GlobalStyle from "../../styles/GlobalStyle";
 import { WithReduxProvider, WithReduxProviderProps } from "../ReduxProvider";
 import { getParentWindowOrigin } from "../common";
 import ConvertionRateProvider, {
@@ -26,12 +25,19 @@ import {
 } from "./provider/RedemptionWidgetProvider";
 import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
 import { Web3Provider, Web3ProviderProps } from "../../wallet2/web3Provider";
-import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
+import { BlockNumberProvider } from "../../../hooks/contracts/BlockNumberProvider";
 import { RobloxProvider } from "../../../hooks/roblox/context/RobloxProvider";
+import {
+  BosonThemeProvider,
+  BosonThemeProviderProps,
+  useBosonTheme
+} from "../BosonThemeProvider";
+import { GlobalStyledThemed } from "../../styles/GlobalStyledThemed";
 
 export type RedemptionWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
   RedemptionProviderProps &
+  Partial<BosonThemeProviderProps> &
   Omit<RedemptionWidgetProviderProps, "setWidgetAction"> &
   ConvertionRateProviderProps &
   CommonWidgetTypes &
@@ -41,51 +47,61 @@ export type RedemptionWidgetProvidersProps = IpfsProviderProps &
     signatures?: string[] | undefined | null;
   } & {
     children: ReactNode;
+    withGlobalStyle?: boolean;
   };
 
 const { infuraKey, magicLinkKey } = CONFIG;
 
 export const RedemptionWidgetProviders: React.FC<RedemptionWidgetProvidersProps> =
-  withQueryClientProvider(({ children, ...props }) => {
+  withQueryClientProvider(({ children, withGlobalStyle, ...props }) => {
     const parentOrigin = getParentWindowOrigin();
+    const { themeKey: storyBookThemeKey } =
+      useBosonTheme({
+        throwOnError: false
+      }) || {};
     return (
-      <WithReduxProvider
-        withCustomReduxContext={props.withCustomReduxContext}
-        withReduxProvider={props.withReduxProvider}
+      <BosonThemeProvider
+        theme={props.theme || storyBookThemeKey || "light"}
+        roundness={props.roundness || "min"}
       >
-        <Web3Provider {...props} infuraKey={infuraKey}>
-          <ConfigProvider
-            magicLinkKey={magicLinkKey}
-            {...props}
-            infuraKey={infuraKey}
-          >
-            <RobloxProvider>
-              <BlockNumberProvider>
-                <BosonProvider {...props}>
-                  <GlobalStyle />
-                  <SignerProvider
-                    parentOrigin={parentOrigin}
-                    withExternalSigner={props.withExternalSigner}
-                  >
-                    <ChatProvider>
-                      <IpfsProvider {...props}>
-                        <ConvertionRateProvider>
-                          <ModalProvider>
-                            <RedemptionProvider {...props}>
-                              <RedemptionWidgetProvider {...props}>
-                                {children}
-                              </RedemptionWidgetProvider>
-                            </RedemptionProvider>
-                          </ModalProvider>
-                        </ConvertionRateProvider>
-                      </IpfsProvider>
-                    </ChatProvider>
-                  </SignerProvider>
-                </BosonProvider>
-              </BlockNumberProvider>
-            </RobloxProvider>
-          </ConfigProvider>
-        </Web3Provider>
-      </WithReduxProvider>
+        {withGlobalStyle && <GlobalStyledThemed />}
+        <WithReduxProvider
+          withCustomReduxContext={props.withCustomReduxContext}
+          withReduxProvider={props.withReduxProvider}
+        >
+          <Web3Provider {...props} infuraKey={infuraKey}>
+            <ConfigProvider
+              magicLinkKey={magicLinkKey}
+              {...props}
+              infuraKey={infuraKey}
+            >
+              <RobloxProvider>
+                <BlockNumberProvider>
+                  <BosonProvider {...props}>
+                    <SignerProvider
+                      parentOrigin={parentOrigin}
+                      withExternalSigner={props.withExternalSigner}
+                    >
+                      <ChatProvider>
+                        <IpfsProvider {...props}>
+                          <ConvertionRateProvider>
+                            <ModalProvider>
+                              <RedemptionProvider {...props}>
+                                <RedemptionWidgetProvider {...props}>
+                                  {children}
+                                </RedemptionWidgetProvider>
+                              </RedemptionProvider>
+                            </ModalProvider>
+                          </ConvertionRateProvider>
+                        </IpfsProvider>
+                      </ChatProvider>
+                    </SignerProvider>
+                  </BosonProvider>
+                </BlockNumberProvider>
+              </RobloxProvider>
+            </ConfigProvider>
+          </Web3Provider>
+        </WithReduxProvider>
+      </BosonThemeProvider>
     );
   });

package/src/hooks/connection/useSwitchChain.ts

@@ -5,7 +5,12 @@ import { useCallback } from "react";
 import { FALLBACK_URLS, getRpcUrls } from "../../lib/const/networks";
 import { useChainId } from "./connection";
 import { useAppDispatch } from "../../state/hooks";
-import { SupportedChainsType, isSupportedChain } from "../../lib/const/chains";
+import {
+  ChainId_BASE_SEPOLIA,
+  ChainId_POLYGON_AMOY,
+  SupportedChainsType,
+  isSupportedChain
+} from "../../lib/const/chains";
 import {
   endSwitchingChain,
   startSwitchingChain
@@ -27,9 +32,9 @@ function getRpcUrl(
     case ChainId.GOERLI:
     case ChainId.SEPOLIA:
     case ChainId.POLYGON:
-    case 80002: // POLYGON AMOY
+    case ChainId_POLYGON_AMOY:
     case ChainId.BASE:
-    case 84532: // BASE SEPOLIA
+    case ChainId_BASE_SEPOLIA: // BASE SEPOLIA
       return RPC_URLS[chainId][0];
     case localChainId: {
       if (localRpcUrl) {

package/src/hooks/contracts/BlockNumberProvider.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { ChainId } from "@uniswap/sdk-core";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { useIsWindowVisible } from "../uniswap/useIsWindowVisible";
+import { RPC_PROVIDERS } from "../../lib/const/providers";
+import { useChainId, useProvider } from "../connection/connection";
+
+export const MISSING_PROVIDER = Symbol();
+export const BlockNumberContext = createContext<
+  | {
+      fastForward(block: number): void;
+      block?: number;
+      mainnetBlock?: number;
+    }
+  | typeof MISSING_PROVIDER
+>(MISSING_PROVIDER);
+
+export function BlockNumberProvider({ children }: { children: ReactNode }) {
+  const activeChainId = useChainId();
+  const provider = useProvider();
+
+  const [{ chainId, block, mainnetBlock }, setChainBlock] = useState<{
+    chainId?: number;
+    block?: number;
+    mainnetBlock?: number;
+  }>({
+    chainId: activeChainId
+  });
+
+  const onChainBlock = useCallback((chainId: number, block: number) => {
+    setChainBlock((chainBlock) => {
+      if (chainBlock.chainId === chainId) {
+        if (!chainBlock.block || chainBlock.block < block) {
+          return {
+            chainId,
+            block,
+            mainnetBlock:
+              chainId === ChainId.MAINNET ? block : chainBlock.mainnetBlock
+          };
+        }
+      } else if (chainId === ChainId.MAINNET) {
+        if (!chainBlock.mainnetBlock || chainBlock.mainnetBlock < block) {
+          return { ...chainBlock, mainnetBlock: block };
+        }
+      }
+      return chainBlock;
+    });
+  }, []);
+
+  const windowVisible = useIsWindowVisible();
+  useEffect(() => {
+    let stale = false;
+
+    if (provider && activeChainId && windowVisible) {
+      // If chainId hasn't changed, don't clear the block. This prevents re-fetching still valid data.
+      setChainBlock((chainBlock) =>
+        chainBlock.chainId === activeChainId
+          ? chainBlock
+          : { chainId: activeChainId, mainnetBlock: chainBlock.mainnetBlock }
+      );
+
+      provider
+        .getBlockNumber()
+        .then((block) => {
+          if (!stale) onChainBlock(activeChainId, block);
+        })
+        .catch((error) => {
+          console.error(
+            `Failed to get block number for chainId ${activeChainId}`,
+            error
+          );
+        });
+
+      const onBlock = (block: number) => onChainBlock(activeChainId, block);
+      provider.on("block", onBlock);
+      return () => {
+        stale = true;
+        provider.removeListener("block", onBlock);
+      };
+    }
+
+    return void 0;
+  }, [activeChainId, provider, windowVisible, onChainBlock]);
+
+  useEffect(() => {
+    if (mainnetBlock === undefined) {
+      RPC_PROVIDERS[ChainId.MAINNET]
+        .getBlockNumber()
+        .then((block) => {
+          onChainBlock(ChainId.MAINNET, block);
+        })
+        // swallow errors - it's ok if this fails, as we'll try again if we activate mainnet
+        .catch(() => undefined);
+    }
+  }, [mainnetBlock, onChainBlock]);
+
+  const value = useMemo(
+    () => ({
+      fastForward: (update: number) => {
+        if (block && update > block) {
+          setChainBlock({
+            chainId: activeChainId,
+            block: update,
+            mainnetBlock:
+              activeChainId === ChainId.MAINNET ? update : mainnetBlock
+          });
+        }
+      },
+      block: chainId === activeChainId ? block : undefined,
+      mainnetBlock
+    }),
+    [activeChainId, block, chainId, mainnetBlock]
+  );
+  return (
+    <BlockNumberContext.Provider value={value}>
+      {children}
+    </BlockNumberContext.Provider>
+  );
+}