@bosonprotocol/react-kit 0.36.0-alpha.17 → 0.36.0-alpha.2

package/src/components/ui/IpfsImage.tsx

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

package/src/components/ui/SvgImage.tsx

@@ -21,8 +21,6 @@ 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 () => {
@@ -39,7 +37,7 @@ export const SvgImage: React.FC<SvgImageProps> = withQueryClientProvider(
         return svgText;
       },
       {
-        enabled: isStringWithSvg,
+        enabled: typeof src === "string",
         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/BlockNumberProvider";
+import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
 import {
   RedemptionProvider,
   RedemptionProviderProps
@@ -35,14 +35,14 @@ import { RobloxProvider } from "../../../hooks/roblox/context/RobloxProvider";
 
 export type CommitWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
-  Partial<BosonThemeProviderProps> &
+  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 || "light"}
-          roundness={props.roundness || "min"}
+          theme={props.theme || storyBookThemeKey}
+          roundness={props.roundness}
         >
           {withGlobalStyle && <GlobalStyledThemed />}
           <WithReduxProvider

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

@@ -8,6 +8,7 @@ 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";
@@ -16,68 +17,51 @@ import ConvertionRateProvider, {
 } from "./convertion-rate/ConvertionRateProvider";
 import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
 import { Web3Provider, Web3ProviderProps } from "../../wallet2/web3Provider";
-import { BlockNumberProvider } from "../../../hooks/contracts/BlockNumberProvider";
-import {
-  BosonThemeProvider,
-  BosonThemeProviderProps,
-  useBosonTheme
-} from "../BosonThemeProvider";
-import { GlobalStyledThemed } from "../../styles/GlobalStyledThemed";
+import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
 
 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, withGlobalStyle, ...props }) => {
+  withQueryClientProvider(({ children, ...props }) => {
     const parentOrigin = getParentWindowOrigin();
-    const { themeKey: storyBookThemeKey } =
-      useBosonTheme({
-        throwOnError: false
-      }) || {};
     return (
-      <BosonThemeProvider
-        theme={props.theme || storyBookThemeKey || "light"}
-        roundness={props.roundness || "min"}
+      <WithReduxProvider
+        withCustomReduxContext={props.withCustomReduxContext}
+        withReduxProvider={props.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>
+        <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>
     );
   });

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

@@ -1,6 +1,8 @@
+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) {
@@ -17,12 +19,44 @@ export interface SellerRolesProps {
 export function useSellerRoles(id: string) {
   const { address } = useAccount();
   const coreSDK = useCoreSDKWithContext();
+
   const { data } = useQuery(
-    ["seller-roles", id, coreSDK.uuid],
+    ["seller-roles", { id }],
     async () => {
-      const seller = await coreSDK.getSellerById(id);
-
-      return seller ?? null;
+      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;
     },
     {
       enabled: !!id

package/src/components/widgets/index.tsx

@@ -1,6 +1,4 @@
 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,6 +9,7 @@ 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, {
@@ -25,19 +26,12 @@ import {
 } from "./provider/RedemptionWidgetProvider";
 import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
 import { Web3Provider, Web3ProviderProps } from "../../wallet2/web3Provider";
-import { BlockNumberProvider } from "../../../hooks/contracts/BlockNumberProvider";
+import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
 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 &
@@ -47,61 +41,51 @@ export type RedemptionWidgetProvidersProps = IpfsProviderProps &
     signatures?: string[] | undefined | null;
   } & {
     children: ReactNode;
-    withGlobalStyle?: boolean;
   };
 
 const { infuraKey, magicLinkKey } = CONFIG;
 
 export const RedemptionWidgetProviders: React.FC<RedemptionWidgetProvidersProps> =
-  withQueryClientProvider(({ children, withGlobalStyle, ...props }) => {
+  withQueryClientProvider(({ children, ...props }) => {
     const parentOrigin = getParentWindowOrigin();
-    const { themeKey: storyBookThemeKey } =
-      useBosonTheme({
-        throwOnError: false
-      }) || {};
     return (
-      <BosonThemeProvider
-        theme={props.theme || storyBookThemeKey || "light"}
-        roundness={props.roundness || "min"}
+      <WithReduxProvider
+        withCustomReduxContext={props.withCustomReduxContext}
+        withReduxProvider={props.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>
+        <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>
     );
   });

package/src/components/widgets/roblox/components/ConnectRoblox.tsx

@@ -88,20 +88,12 @@ const stepToIcon = {
 } as const;
 
 const breakpointHorizontal = breakpoint.xs;
-const breakpointForHook = "isXXS" satisfies keyof ReturnType<
-  typeof useBreakpoints
->;
 
-const StepsOverview = styled(Grid)<{ $hide: boolean }>`
+const StepsOverview = styled(Grid)`
   padding: 1rem;
-  ${({ $hide }) => {
-    return (
-      $hide &&
-      css`
-        display: none;
-      `
-    );
-  }}
+  ${breakpointHorizontal} {
+    display: none;
+  }
 `;
 const Wrapper = styled(Grid).attrs({
   flexDirection: "column"
@@ -469,20 +461,15 @@ export const ConnectRoblox = forwardRef<HTMLDivElement, ConnectRobloxProps>(
       icon: stepToIcon[2]
     } satisfies Partial<SmallStepProps>;
     const [showFullSteps, setShowFullSteps] = useState<boolean>(false);
-    const { [breakpointForHook]: breakpointToHideSmallSteps } =
-      useBreakpoints();
+    const { isXS } = useBreakpoints();
     useEffect(() => {
-      if (!breakpointToHideSmallSteps) {
+      if (!isXS) {
         setShowFullSteps(true);
       }
-    }, [breakpointToHideSmallSteps]);
-
+    }, [isXS]);
     return (
       <Wrapper>
-        <StepsOverview
-          $hide={!breakpointToHideSmallSteps}
-          className={`steps-overview ${breakpointToHideSmallSteps ? "" : "hidden"}`} // this is so that it can be targeted from widgets
-        >
+        <StepsOverview>
           <SmallStep {...step0Props} title="Roblox" />
           <SmallStep {...step1Props} title="Account" />
           <SmallStep {...step2Props} title={step3.titleForMobile} />

package/src/components/widgets/roblox/components/LoginWithRoblox.tsx

@@ -35,8 +35,7 @@ export const LoginWithRoblox = ({
     <BaseButton
       theme={primaryButtonTheme}
       onClick={() => {
-        const windowToUse = window.top || window.parent;
-        windowToUse.open(`${backendOrigin}/login`, "_blank");
+        window.open(`${backendOrigin}/login`, "_blank");
         const id = setInterval(async () => {
           try {
             const { data } = await getIsRobloxLoggedInAsync();

package/src/components/widgets/roblox/components/RobloxExchangesGrid.tsx

@@ -216,8 +216,7 @@ export const RobloxExchangesGrid = ({
                                 )
                                   ? raiseDisputeForExchangeUrlWithId
                                   : `https://${raiseDisputeForExchangeUrlWithId}`;
-                              const windowToUse = window.top || window.parent;
-                              windowToUse.open(urlWithHttpPrefix, "_blank");
+                              window.open(urlWithHttpPrefix, "_blank");
                             }
                           },
                           type: "button"

package/src/hooks/connection/useSwitchChain.ts

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