@bosonprotocol/react-kit 0.33.0-alpha.2 → 0.33.0-alpha.20

package/src/components/ui/CardCTA.tsx

@@ -0,0 +1,77 @@
+import React, { ReactElement } from "react";
+import styled, { CSSProperties, css } from "styled-components";
+import { Grid, GridProps } from "./Grid";
+import { Typography, TypographyProps } from "./Typography";
+
+export type CardCTAProps = GridProps & {
+  title: string;
+  text: string;
+  icon: ReactElement;
+  cta: ReactElement;
+  titleProps?: TypographyProps;
+  textProps?: TypographyProps;
+  theme: {
+    background: CSSProperties["background"];
+    color: CSSProperties["color"];
+    padding: CSSProperties["padding"];
+    border: CSSProperties["border"];
+    borderRadius: CSSProperties["borderRadius"];
+  };
+};
+
+const StyledGrid = styled(Grid)<{ theme: CardCTAProps["theme"] }>`
+  ${(props) => {
+    return css`
+      background: ${props.theme.background};
+      color: ${props.theme.color};
+      padding: ${props.theme.padding};
+      border: ${props.theme.border};
+      border-radius: ${props.theme.borderRadius};
+    `;
+  }}
+`;
+
+const IconContainer = styled(Grid)`
+  top: 0.5rem;
+  right: 0;
+  margin-bottom: 1rem;
+  svg {
+    > * {
+      stroke-width: 14px;
+    }
+  }
+`;
+
+export const CardCTA: React.FC<CardCTAProps> = ({
+  title,
+  text,
+  icon,
+  cta,
+  theme,
+  titleProps,
+  textProps,
+  ...rest
+}) => {
+  return (
+    <StyledGrid
+      flexDirection="column"
+      alignItems="flex-start"
+      padding="1.5rem"
+      theme={theme}
+      {...rest}
+    >
+      <>
+        <div>
+          <IconContainer>{icon}</IconContainer>
+          <Typography fontWeight="600" fontSize="1.25rem" {...titleProps}>
+            {title}
+          </Typography>
+        </div>
+        <Typography tag="p" {...textProps}>
+          {text}
+        </Typography>
+        {cta}
+      </>
+    </StyledGrid>
+  );
+};

package/src/components/ui/Grid.tsx

@@ -1,6 +1,7 @@
 import React, { ElementRef, HTMLAttributes, forwardRef } from "react";
 import styled, { CSSProperties } from "styled-components";
 import { getTransientCustomProps } from "./getTransientCustomProps";
+import { isDefined } from "./common";
 const pickedProps = {
   alignItems: true,
   flexBasis: true,
@@ -29,31 +30,42 @@ type IGrid = Pick<CSSProperties, keyof typeof pickedProps>;
 type InnerGridProps = Record<`$${keyof IGrid}`, IGrid[keyof IGrid]>;
 
 const Container = styled.div<InnerGridProps>`
-  width: ${({ $width }) => $width || "100%"};
-  height: ${({ $height }) => $height || "initial"};
+  ${({ $width }) => (isDefined($width) ? `width:${$width};` : "width: 100%;")}
+  height: ${({ $height }) => (isDefined($height) ? $height : "initial")};
   display: flex;
-  align-items: ${({ $alignItems }) => $alignItems || "center"};
-  flex-basis: ${({ $flexBasis }) => $flexBasis || "auto"};
-  flex-direction: ${({ $flexDirection }) => $flexDirection || "row"};
-  flex-grow: ${({ $flexGrow }) => $flexGrow || "initial"};
-  flex-shrink: ${({ $flexShrink }) => $flexShrink || "initial"};
+  align-items: ${({ $alignItems }) =>
+    isDefined($alignItems) ? $alignItems : "center"};
+  flex-basis: ${({ $flexBasis }) =>
+    isDefined($flexBasis) ? $flexBasis : "auto"};
+  flex-direction: ${({ $flexDirection }) =>
+    isDefined($flexDirection) ? $flexDirection : "row"};
+  flex-grow: ${({ $flexGrow }) =>
+    isDefined($flexGrow) ? $flexGrow : "initial"};
+  flex-shrink: ${({ $flexShrink }) =>
+    isDefined($flexShrink) ? $flexShrink : "initial"};
   justify-content: ${({ $justifyContent }) =>
-    $justifyContent || "space-between"};
+    isDefined($justifyContent) ? $justifyContent : "space-between"};
 
-  ${({ $flexWrap }) => ($flexWrap ? `flex-wrap:${$flexWrap};` : "")}
-  ${({ $rowGap }) => ($rowGap ? `row-gap:${$rowGap};` : "")}
-  ${({ $columnGap }) => ($columnGap ? `column-gap:${$columnGap};` : "")}
-  ${({ $gap }) => ($gap ? `gap:${$gap};` : "")}
-  ${({ $flex }) => ($flex ? `> * { flex: ${$flex}; }` : "")}
-  ${({ $padding }) => ($padding ? `padding:${$padding};` : "")}
-  ${({ $margin }) => ($margin ? `margin:${$margin};` : "")}
-  ${({ $marginTop }) => ($marginTop ? `margin-top:${$marginTop};` : "")}
-  ${({ $marginRight }) => ($marginRight ? `margin-right:${$marginRight};` : "")}
+  ${({ $flexWrap }) => (isDefined($flexWrap) ? `flex-wrap:${$flexWrap};` : "")}
+  ${({ $rowGap }) => (isDefined($rowGap) ? `row-gap:${$rowGap};` : "")}
+  ${({ $columnGap }) =>
+    isDefined($columnGap) ? `column-gap:${$columnGap};` : ""}
+  ${({ $gap }) => (isDefined($gap) ? `gap:${$gap};` : "")}
+  ${({ $flex }) => (isDefined($flex) ? `> * { flex: ${$flex}; }` : "")}
+  ${({ $padding }) => (isDefined($padding) ? `padding:${$padding};` : "")}
+  ${({ $margin }) => (isDefined($margin) ? `margin:${$margin};` : "")}
+  ${({ $marginTop }) =>
+    isDefined($marginTop) ? `margin-top:${$marginTop};` : ""}
+  ${({ $marginRight }) =>
+    isDefined($marginRight) ? `margin-right:${$marginRight};` : ""}
   ${({ $marginBottom }) =>
-    $marginBottom ? `margin-bottom:${$marginBottom};` : ""}
-  ${({ $marginLeft }) => ($marginLeft ? `margin-left:${$marginLeft};` : "")}
-  ${({ $alignSelf }) => ($alignSelf ? `align-self:${$alignSelf};` : "")}
-  ${({ $justifySelf }) => ($justifySelf ? `justify-self:${$justifySelf};` : "")}
+    isDefined($marginBottom) ? `margin-bottom:${$marginBottom};` : ""}
+  ${({ $marginLeft }) =>
+    isDefined($marginLeft) ? `margin-left:${$marginLeft};` : ""}
+  ${({ $alignSelf }) =>
+    isDefined($alignSelf) ? `align-self:${$alignSelf};` : ""}
+  ${({ $justifySelf }) =>
+    isDefined($justifySelf) ? `justify-self:${$justifySelf};` : ""}
 `;
 export type GridProps = {
   children?: React.ReactNode;

package/src/components/ui/IpfsImage.tsx

@@ -73,7 +73,7 @@ const ImagePlaceholder = styled.div`
   }
 `;
 
-interface IImage {
+export type IpfsImageProps = React.HTMLAttributes<HTMLDivElement> & {
   src: string;
   children?: React.ReactNode;
   dataTestId?: string;
@@ -85,8 +85,9 @@ interface IImage {
   overrides?: {
     ipfsGateway?: string;
   };
-}
-const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
+  className?: string;
+};
+export const IpfsImage: React.FC<IpfsImageProps> = ({
   src,
   children,
   dataTestId = "image",
@@ -128,7 +129,11 @@ const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
 
   return (
     <>
-      <ImageWrapper {...rest} $hide={!isLoading} className="loading-container">
+      <ImageWrapper
+        {...rest}
+        $hide={!isLoading}
+        className={"loading-container " + rest.className}
+      >
         <ImagePlaceholder>
           <Typography tag="div">
             <Loading />
@@ -147,7 +152,11 @@ const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
           )}
         </ImagePlaceholder>
       </ImageWrapper>
-      <ImageWrapper {...rest} $hide={!isSuccess} className="image-container">
+      <ImageWrapper
+        {...rest}
+        $hide={!isSuccess}
+        className={"image-container " + rest.className}
+      >
         {children || ""}
         <ImageContainer
           data-testid={dataTestId}
@@ -179,5 +188,3 @@ const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
     </>
   );
 };
-
-export default IpfsImage;

package/src/components/ui/Typography.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import styled, { CSSProperties } from "styled-components";
 import { getTransientCustomProps } from "./getTransientCustomProps";
+import { isDefined } from "./common";
 
 const pickedProps = {
   alignItems: true,
@@ -38,43 +39,52 @@ type InnerTypographyProps = Record<
   `$${keyof WrapperProps}`,
   WrapperProps[keyof WrapperProps]
 >;
-
 const Wrapper = styled.div<InnerTypographyProps>`
   display: flex;
-  ${({ $display }) => ($display ? `display:${$display};` : "")}
-  ${({ $alignItems }) => $alignItems && `align-items: ${$alignItems}`};
-  ${({ $flexBasis }) => $flexBasis && `flex-basis: ${$flexBasis}`};
+  ${({ $display }) => (isDefined($display) ? `display:${$display};` : "")}
+  ${({ $alignItems }) =>
+    isDefined($alignItems) && `align-items: ${$alignItems}`};
+  ${({ $flexBasis }) => isDefined($flexBasis) && `flex-basis: ${$flexBasis}`};
   ${({ $flexDirection }) =>
-    $flexDirection && `flex-direction: ${$flexDirection}`};
-  ${({ $flexGrow }) => $flexGrow && `flex-grow: ${$flexGrow}`};
-  ${({ $flexShrink }) => $flexShrink && `flex-shrink: ${$flexShrink}`};
+    isDefined($flexDirection) && `flex-direction: ${$flexDirection}`};
+  ${({ $flexGrow }) => isDefined($flexGrow) && `flex-grow: ${$flexGrow}`};
+  ${({ $flexShrink }) =>
+    isDefined($flexShrink) && `flex-shrink: ${$flexShrink}`};
   ${({ $justifyContent }) =>
-    $justifyContent && `justify-content: ${$justifyContent}`};
-  ${({ $flexWrap }) => ($flexWrap ? `flex-wrap:${$flexWrap};` : "")}
-  ${({ $rowGap }) => ($rowGap ? `row-gap:${$rowGap};` : "")}
-  ${({ $columnGap }) => ($columnGap ? `column-gap:${$columnGap};` : "")}
-  ${({ $gap }) => ($gap ? `gap:${$gap};` : "")}
-  ${({ $flex }) => ($flex ? `> * { flex: ${$flex}; }` : "")}
-  ${({ $padding }) => ($padding ? `padding:${$padding};` : "")}
-  ${({ $margin }) => ($margin ? `margin:${$margin};` : "")}
-  ${({ $marginTop }) => ($marginTop ? `margin-top:${$marginTop};` : "")}
-  ${({ $marginRight }) => ($marginRight ? `margin-right:${$marginRight};` : "")}
+    isDefined($justifyContent) && `justify-content: ${$justifyContent}`};
+  ${({ $flexWrap }) => (isDefined($flexWrap) ? `flex-wrap:${$flexWrap};` : "")}
+  ${({ $rowGap }) => (isDefined($rowGap) ? `row-gap:${$rowGap};` : "")}
+  ${({ $columnGap }) =>
+    isDefined($columnGap) ? `column-gap:${$columnGap};` : ""}
+  ${({ $gap }) => (isDefined($gap) ? `gap:${$gap};` : "")}
+  ${({ $flex }) => (isDefined($flex) ? `> * { flex: ${$flex}; }` : "")}
+  ${({ $padding }) => (isDefined($padding) ? `padding:${$padding};` : "")}
+  ${({ $margin }) => (isDefined($margin) ? `margin:${$margin};` : "")}
+  ${({ $marginTop }) =>
+    isDefined($marginTop) ? `margin-top:${$marginTop};` : ""}
+  ${({ $marginRight }) =>
+    isDefined($marginRight) ? `margin-right:${$marginRight};` : ""}
   ${({ $marginBottom }) =>
-    $marginBottom ? `margin-bottom:${$marginBottom};` : ""}
-  ${({ $marginLeft }) => ($marginLeft ? `margin-left:${$marginLeft};` : "")}
+    isDefined($marginBottom) ? `margin-bottom:${$marginBottom};` : ""}
+  ${({ $marginLeft }) =>
+    isDefined($marginLeft) ? `margin-left:${$marginLeft};` : ""}
 
 
-  ${({ $fontSize }) => ($fontSize ? `font-size:${$fontSize};` : "")}
-  ${({ $fontWeight }) => ($fontWeight ? `font-weight:${$fontWeight};` : "")}
-  ${({ $lineHeight }) => ($lineHeight ? `line-height:${$lineHeight};` : "")}
-  ${({ $color }) => ($color ? `color:${$color};` : "")}
-  ${({ $background }) => ($background ? `background:${$background};` : "")}
-  ${({ $cursor }) => ($cursor ? `cursor:${$cursor};` : "")}
+  ${({ $fontSize }) => (isDefined($fontSize) ? `font-size:${$fontSize};` : "")}
+  ${({ $fontWeight }) =>
+    isDefined($fontWeight) ? `font-weight:${$fontWeight};` : ""}
+  ${({ $lineHeight }) =>
+    isDefined($lineHeight) ? `line-height:${$lineHeight};` : ""}
+  ${({ $color }) => (isDefined($color) ? `color:${$color};` : "")}
+  ${({ $background }) =>
+    isDefined($background) ? `background:${$background};` : ""}
+  ${({ $cursor }) => (isDefined($cursor) ? `cursor:${$cursor};` : "")}
   ${({ $letterSpacing }) =>
-    $letterSpacing ? `letter-spacing:${$letterSpacing};` : ""}
-    ${({ $textAlign }) => ($textAlign ? `text-align:${$textAlign};` : "")}
-    ${({ $opacity }) => ($opacity ? `opacity:${$opacity};` : "")}
-    ${({ $width }) => ($width ? `width:${$width};` : "")}
+    isDefined($letterSpacing) ? `letter-spacing:${$letterSpacing};` : ""}
+    ${({ $textAlign }) =>
+    isDefined($textAlign) ? `text-align:${$textAlign};` : ""}
+    ${({ $opacity }) => (isDefined($opacity) ? `opacity:${$opacity};` : "")}
+    ${({ $width }) => (isDefined($width) ? `width:${$width};` : "")}
 `;
 
 export type TypographyProps = WrapperProps &

package/src/components/ui/Video.tsx

@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState
 } from "react";
-import styled, { css } from "styled-components";
+import styled, { CSSProperties, css } from "styled-components";
 import { useIpfsStorage } from "../../hooks/useIpfsStorage";
 import { fetchIpfsBase64Media } from "../../lib/base64/base64";
 import { theme } from "../../theme";
@@ -24,6 +24,7 @@ const StyledMuteButton = styled(MuteButton)`
   position: absolute;
   top: 1rem;
   right: 1rem;
+  z-index: 1;
 `;
 const VideoWrapper = styled.div<{ $hasOnClick?: boolean }>`
   overflow: hidden;
@@ -68,8 +69,15 @@ const VideoHtml = styled.video`
   object-fit: contain;
 `;
 
-const VideoPlaceholder = styled.div`
-  position: absolute;
+const VideoPlaceholder = styled.div<{ $position?: CSSProperties["position"] }>`
+  ${({ $position }) =>
+    $position
+      ? css`
+          position: ${$position};
+        `
+      : css`
+          position: absolute;
+        `}
   top: 0;
   height: 100%;
   width: 100%;
@@ -89,7 +97,7 @@ const VideoPlaceholder = styled.div`
   }
 `;
 
-interface IVideo {
+export type VideoProps = React.HTMLAttributes<HTMLDivElement> & {
   src: string;
   children?: ReactNode;
   dataTestId?: string;
@@ -98,8 +106,8 @@ interface IVideo {
   videoProps?: VideoHTMLAttributes<HTMLElement>;
   withMuteButton?: boolean;
   componentWhileLoading?: () => ReactElement;
-}
-const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
+};
+export const Video: React.FC<VideoProps> = ({
   src,
   children,
   dataTestId = "video",
@@ -125,6 +133,8 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
             ipfsMetadataStorage
           );
           setVideoSrc(base64str as string);
+          setIsLoaded(true);
+          setIsError(false);
         } catch (error) {
           console.error("error in Video", error);
           setIsLoaded(true);
@@ -136,9 +146,14 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
       }
     }
     if (!isLoaded && videoSrc === null) {
-      if (src?.includes("ipfs://")) {
-        const newString = src.split("//");
-        const CID = newString[newString.length - 1];
+      if (
+        src?.startsWith("ipfs://") ||
+        src?.startsWith("https://bosonprotocol.infura-ipfs.io/ipfs/")
+      ) {
+        const split = src?.startsWith("ipfs://")
+          ? src.split("//")
+          : src.split("https://bosonprotocol.infura-ipfs.io/ipfs/");
+        const CID = split[split.length - 1];
         fetchData(`ipfs://${CID}`);
       } else if (src?.startsWith("undefined") && src?.length > 9) {
         const CID = src.replace("undefined", "");
@@ -149,12 +164,6 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
     }
   }, []); // eslint-disable-line
 
-  useEffect(() => {
-    if (videoSrc !== null) {
-      setTimeout(() => setIsLoaded(true), 100);
-    }
-  }, [videoSrc]);
-
   const mp4Src = useMemo(() => {
     const octetSrc =
       videoSrc?.startsWith("data:application/octet-stream;base64,") || false;
@@ -183,13 +192,14 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
       videoRef.current.play();
     }
   }, [muted]);
+
   if (!isLoaded && !isError) {
     if (ComponentWhileLoading) {
       return <ComponentWhileLoading />;
     }
     return (
       <VideoWrapper {...rest}>
-        <VideoPlaceholder>
+        <VideoPlaceholder $position="static">
           <Typography tag="div">
             <Loading />
           </Typography>
@@ -200,8 +210,8 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
 
   if (isLoaded && isError) {
     return (
-      <VideoWrapper {...rest}>
-        <VideoPlaceholder data-video-placeholder>
+      <VideoWrapper {...rest} className="video-container">
+        <VideoPlaceholder data-video-placeholder $position="static">
           {showPlaceholderText ? (
             <VideoIcon size={50} color={colors.white} />
           ) : (
@@ -235,6 +245,10 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
             data-testid={dataTestId}
             {...videoProps}
             src={mp4Src || ""}
+            onError={() => {
+              setIsLoaded(true);
+              setIsError(true);
+            }}
           />
         </>
       )}

package/src/components/ui/common.ts

@@ -0,0 +1,2 @@
+export const isDefined = (value: unknown) =>
+  value !== null && value !== undefined;

package/src/components/wallet/ConnectButton.tsx

@@ -8,7 +8,7 @@ import FallbackAvatar from "../avatar/fallback-avatar";
 import { Button } from "../buttons/Button";
 import ThemedButton, { bosonButtonThemes } from "../ui/ThemedButton";
 import { useBreakpoints } from "../../hooks/useBreakpoints";
-import { saveItemInStorage } from "../widgets/finance/storage/useLocalStorage";
+import { saveItemInStorage } from "../../hooks/storage/useBosonLocalStorage";
 import { SignOut, Wallet } from "phosphor-react";
 import { useIsMagicLoggedIn } from "../../hooks";
 import { useAccount, useChainId } from "../../hooks/connection/connection";

package/src/components/widgets/finance/convertion-rate/ConvertionRateContext.tsx

@@ -1,7 +1,7 @@
 /* eslint @typescript-eslint/no-empty-function: "off" */
 /* eslint @typescript-eslint/no-explicit-any: "off" */
 import { createContext } from "react";
-import { getItemFromStorage } from "../storage/useLocalStorage";
+import { getItemFromStorage } from "../../../../hooks/storage/useBosonLocalStorage";
 
 export type Token = {
   symbol: string;

package/src/components/widgets/finance/convertion-rate/ConvertionRateProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useTokens } from "../exchange-tokens/useTokens";
-import { saveItemInStorage } from "../storage/useLocalStorage";
+import { saveItemInStorage } from "../../../../hooks/storage/useBosonLocalStorage";
 import ConvertionRateContext, {
   ConvertionRateContextType,
   initalState,

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

@@ -5,7 +5,7 @@ import groupBy from "lodash/groupBy";
 import { useCallback, useMemo } from "react";
 
 import { Props } from "./Finance";
-import { saveItemInStorage } from "./storage/useLocalStorage";
+import { saveItemInStorage } from "../../../hooks/storage/useLocalStorage";
 import { SellerExchangeProps } from "./useSellerDeposit";
 import { subgraph } from "@bosonprotocol/core-sdk";
 import { Offer } from "../../../types/offer";

package/src/hooks/core-sdk/useCoreSdk.tsx

@@ -4,7 +4,8 @@ import {
   getEnvConfigById,
   ConfigId,
   EnvironmentType,
-  MetaTxConfig
+  MetaTxConfig,
+  validateMetadata
 } from "@bosonprotocol/core-sdk";
 import { EthersAdapter, Provider } from "@bosonprotocol/ethers-sdk";
 import { IpfsMetadataStorage } from "@bosonprotocol/ipfs-storage";
@@ -108,7 +109,7 @@ function initCoreSdk(config: CoreSdkConfig, overrides?: CoreSdkOverrides) {
     protocolDiamond:
       config.protocolDiamond || defaultConfig.contracts.protocolDiamond,
     subgraphUrl: config.subgraphUrl || defaultConfig.subgraphUrl,
-    theGraphStorage: new IpfsMetadataStorage({
+    theGraphStorage: new IpfsMetadataStorage(validateMetadata, {
       url: theGraphStorageUrl,
       headers:
         config.theGraphIpfsStorageHeaders ||
@@ -116,7 +117,7 @@ function initCoreSdk(config: CoreSdkConfig, overrides?: CoreSdkOverrides) {
           ? config.ipfsMetadataStorageHeaders
           : undefined
     }),
-    metadataStorage: new IpfsMetadataStorage({
+    metadataStorage: new IpfsMetadataStorage(validateMetadata, {
       url: metadataStorageUrl,
       headers: config.ipfsMetadataStorageHeaders
     }),

package/src/hooks/form/useForm.ts

@@ -0,0 +1,12 @@
+import { useFormikContext } from "formik";
+
+export function useForm<T>() {
+  const context = useFormikContext<T>();
+
+  const nextIsDisabled = !context.isValid && context.submitCount > 0;
+
+  return {
+    ...context,
+    nextIsDisabled
+  };
+}

package/src/hooks/index.ts

@@ -20,3 +20,8 @@ export * from "./contracts/erc1155/useErc1155Uris";
 export * from "./uniswap/useIsWindowVisible";
 export * from "./connection/connection";
 export { useConfigContext } from "../components/config/ConfigContext";
+export * from "./storage/useLocalStorage";
+export * from "./ipfs/useIpfsStorage";
+export * from "./location/buildUseSearchParams";
+export * from "./form/useForm";
+export * from "./useBreakpoints";

package/src/hooks/ipfs/useIpfsStorage.ts

@@ -0,0 +1,16 @@
+import { useConfigContext } from "../../components/config/ConfigContext";
+import { useIpfsContext } from "../../components/ipfs/IpfsContext";
+import { useIpfsMetadataStorage } from "../useIpfsMetadataStorage";
+
+export function useIpfsStorage() {
+  const { config } = useConfigContext();
+  const { ipfsMetadataStorageHeaders, ipfsMetadataStorageUrl } =
+    useIpfsContext();
+  const storage = useIpfsMetadataStorage(
+    config.envName,
+    config.configId,
+    ipfsMetadataStorageUrl,
+    ipfsMetadataStorageHeaders
+  );
+  return storage;
+}

package/src/hooks/location/buildUseSearchParams.tsx

@@ -0,0 +1,45 @@
+import qs from "query-string";
+import { useCallback, useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+export type BuildUseSearchParamsProps = {
+  useNavigate: () => (arg0: { pathname: string; search: string }) => unknown;
+};
+export function buildUseSearchParams({
+  useNavigate
+}: BuildUseSearchParamsProps) {
+  return () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [params, setParams] = useState(qs.parse(location.search));
+
+    const handleChange = useCallback(
+      (name: string, value: string) => {
+        const oldParams = qs.parse(location.search);
+
+        const newParams = {
+          ...oldParams,
+          [name]: value
+        };
+        setParams(newParams);
+      },
+      [location.search]
+    );
+
+    useEffect(() => {
+      navigate({
+        pathname: location.pathname,
+        search: qs.stringify(params)
+      });
+    }, [params]); // eslint-disable-line
+
+    useEffect(() => {
+      setParams(qs.parse(location.search));
+    }, [location.search]); // eslint-disable-line
+
+    return {
+      params,
+      handleChange
+    };
+  };
+}

package/src/hooks/storage/useBosonLocalStorage.ts

@@ -0,0 +1,40 @@
+import {
+  getItemFromStorage as baseGetItemFromStorage,
+  saveItemInStorage as baseSaveItemInStorage,
+  removeItemInStorage as baseRemoveItemInStorage,
+  clearLocalStorage as baseClearLocalStorage,
+  useLocalStorage as useBaseLocalStorage
+} from "./useLocalStorage";
+
+export type GetItemFromStorageKey =
+  | "wagmi.store"
+  | "isChainUnsupported"
+  | "tracing-url"
+  | "isConnectWalletFromCommit"
+  | "convertionRates"
+  | "google-jwt"
+  | "showCookies";
+
+export function getItemFromStorage<T>(
+  key: GetItemFromStorageKey,
+  initialValue: T
+) {
+  return baseGetItemFromStorage(key, initialValue);
+}
+
+export function saveItemInStorage<T>(key: GetItemFromStorageKey, value: T) {
+  return baseSaveItemInStorage(key, value);
+}
+
+export function removeItemInStorage(key: GetItemFromStorageKey) {
+  return baseRemoveItemInStorage(key);
+}
+
+export const clearLocalStorage = baseClearLocalStorage;
+
+export function useLocalStorage<T>(
+  key: GetItemFromStorageKey,
+  initialValue: T
+) {
+  return useBaseLocalStorage(key, initialValue);
+}