@bosonprotocol/react-kit 0.34.0-alpha.3 → 0.34.0-alpha.30

package/dist/esm/types/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/types/helpers.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAE5B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5C,CAAC;AACF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG;KAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAE1E,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,GAAG,EAAE,CAAC;AAEP,KAAK,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;AAE/C,eAAO,MAAM,QAAQ,6BAAmC,CAAC;AAGzD,KAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC;CACxE,SAAS;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC;CAAE,GACjC,EAAE,SAAS,CAAC,GACV,KAAK,GACL,CAAC,GACH,KAAK,CAAC;AAEV,KAAK,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IACzC,SAAS,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,GACxB,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GACnB,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GACtB,KAAK,GACP,KAAK,CAAC;AACZ,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GACtE,CAAC,MAAM,SAAS,CAAC,GACb,EAAE,GACF,MAAM,SAAS,MAAM,CAAC,GACpB;IAAE,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,GAC5C,EAAE,CAAC,GAAG,0BAA0B;AACtC,CAAC,MAAM,SAAS,CAAC,GACb,EAAE,GACF,MAAM,SAAS,MAAM,CAAC,GACpB;IAAE,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,GAC5C,EAAE,CAAC,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/types/helpers.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAE5B,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5C,CAAC;AACF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG;KAAG,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAE1E,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,GAAG,EAAE,CAAC;AAEP,KAAK,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;AAE/C,eAAO,MAAM,QAAQ,6BAAmC,CAAC;AAEzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;KACpC,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACzC,CAAC"}

package/dist/esm/types/helpers.js

@@ -1,3 +1,2 @@
 export const isTruthy = (x) => !!x;
-//#endregion
 //# sourceMappingURL=helpers.js.map

package/dist/esm/types/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/types/helpers.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAI,CAAY,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AA4BzD,YAAY"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/types/helpers.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAI,CAAY,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.34.0-alpha.3",
+  "version": "0.34.0-alpha.30",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,9 +15,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.41.0-alpha.5",
-    "@bosonprotocol/ethers-sdk": "^1.14.5",
-    "@bosonprotocol/ipfs-storage": "^1.12.0-alpha.3",
+    "@bosonprotocol/core-sdk": "^1.41.0-alpha.32",
+    "@bosonprotocol/ethers-sdk": "^1.15.0-alpha.18",
+    "@bosonprotocol/ipfs-storage": "^1.12.0-alpha.30",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
     "@glidejs/glide": "3.6.0",
@@ -188,5 +188,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "ee02c01474f709f14dbac77307c7351b93972872"
+  "gitHead": "039f8b75abad7bf9b325661c75c6e71e793e789a"
 }

package/src/components/buttons/BaseButton.tsx

@@ -6,23 +6,22 @@ import React, {
 } from "react";
 import styled, { css, CSSProperties } from "styled-components";
 
-import { zIndex } from "../ui/zIndex";
 import { Tooltip } from "../tooltip/Tooltip";
 import * as Styles from "../ui/styles";
-import { Typography } from "../ui/Typography";
 import { theme } from "../../theme";
 import { Loading } from "../ui/loading/Loading";
 import { ButtonSize } from "../ui/buttonSize";
-
+import { AddDollarPrefixToKeys } from "../../types/helpers";
 const colors = theme.colors.light;
 
-const ButtonWithThemeProps = styled.button<{
-  size: ButtonSizeProp;
-  fill: boolean | undefined;
-  theme: BaseButtonTheme;
-}>`
+const ButtonWithThemeProps = styled.button<
+  AddDollarPrefixToKeys<{
+    size: ButtonSizeProp;
+    fill: boolean | undefined;
+  }> & { theme: BaseButtonTheme }
+>`
   ${() => Styles.button};
-  ${(props) => Styles[props.size as keyof typeof Styles]}
+  ${(props) => Styles[props.$size as keyof typeof Styles]}
   border-style: solid;
   border-color: ${(props) => props.theme?.borderColor || "transparent"};
   border-width: ${(props) => props.theme?.borderWidth || 0}px;
@@ -35,7 +34,7 @@ const ButtonWithThemeProps = styled.button<{
     stroke: ${(props) => props.theme?.color || "#000000"};
   }
   ${(props) =>
-    props.fill
+    props.$fill
       ? css`
           width: 100%;
         `
@@ -68,7 +67,7 @@ const ButtonWithThemeProps = styled.button<{
       }
     `}
   ${(props) =>
-    props.theme?.padding
+    props.theme?.padding !== undefined
       ? css`
           padding: ${props.theme.padding} !important;
         `
@@ -97,17 +96,6 @@ const ButtonWithThemeProps = styled.button<{
         `};
 `;
 
-const ChildWrapperButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${(props) => props.theme?.gap || "12px"};
-  position: relative;
-  z-index: ${zIndex.Button};
-
-  ${() => Styles.buttonText};
-`;
-
 export type BaseButtonTheme = {
   background?: CSSProperties["backgroundColor"];
   borderColor?: CSSProperties["borderColor"];
@@ -135,7 +123,6 @@ export type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   size?: ButtonSizeProp;
   theme: BaseButtonTheme;
   fill?: boolean;
-  step?: number;
   isLoading?: boolean;
   tooltip?: string;
 };
@@ -148,7 +135,6 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
       size = "regular",
       theme,
       type = "button",
-      step = 0,
       fill = false,
       isLoading = false,
       tooltip = "",
@@ -175,24 +161,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
           <ButtonWithThemeProps
             onClick={onClick}
             type={type}
-            size={size}
-            fill={fill ? fill : undefined}
+            $size={size}
+            $fill={fill ? fill : undefined}
             theme={theme}
             {...rest}
             ref={ref}
           >
-            {isLoading ? (
-              <Loading />
-            ) : (
-              <ChildWrapperButton data-child-wrapper-button theme={theme}>
-                {children}
-                {step !== 0 && (
-                  <Typography>
-                    <small>Step {step}</small>
-                  </Typography>
-                )}
-              </ChildWrapperButton>
-            )}
+            {isLoading ? <Loading /> : children}
           </ButtonWithThemeProps>
         </Wrapper>
       </>

package/src/components/config/ConfigContext.ts

@@ -11,7 +11,7 @@ export type ConfigContextProps = {
     symbol: "$" | string;
   };
   usePendingTransactions?: boolean;
-  magicLinkKey: string;
+  magicLinkKey?: string;
   infuraKey: string;
   supportedChains: number[];
   externalConnectedChainId?: number;
@@ -20,6 +20,7 @@ export type ConfigContextProps = {
   withExternalConnectionProps?: boolean;
   withWeb3React: boolean;
   withCustomReduxContext?: boolean;
+  withMagicLink?: boolean;
 };
 
 export const ConfigContext = createContext<

package/src/components/config/ConfigProvider.tsx

@@ -48,6 +48,9 @@ export function ConfigProvider({
   const Web3ProviderComponent = useMemo(() => {
     return rest.withWeb3React ? InnerWeb3Provider : Fragment;
   }, [rest.withWeb3React]);
+  const MagicLinkProvider = useMemo(() => {
+    return rest.withMagicLink ? MagicProvider : Fragment;
+  }, [rest.withMagicLink]);
   return (
     <EnvironmentProvider
       envName={rest.envName}
@@ -56,13 +59,13 @@ export function ConfigProvider({
     >
       <InnerConfigProvider {...rest}>
         <Web3ProviderComponent>
-          <MagicProvider>
+          <MagicLinkProvider>
             <WalletConnectionProvider
               walletConnectProjectId={walletConnectProjectId}
             >
               <SyncCurrentConfigId>{children}</SyncCurrentConfigId>
             </WalletConnectionProvider>
-          </MagicProvider>
+          </MagicLinkProvider>
         </Web3ProviderComponent>
       </InnerConfigProvider>
     </EnvironmentProvider>

package/src/components/connection/utils.ts

@@ -19,7 +19,6 @@ const InjectedWalletTable: {
   isBraveWallet: { name: "Brave", icon: BRAVE_ICON },
   isRabby: { name: "Rabby", icon: RABBY_ICON },
   isTrust: { name: "Trust Wallet", icon: TRUST_WALLET_ICON },
-  // @ts-expect-error this was like this in the dapp, TODO: check if this can be deleted
   isLedgerConnect: { name: "Ledger", icon: LEDGER_ICON }
 };
 

package/src/components/cta/common/CtaButton.tsx

@@ -29,7 +29,7 @@ export function CtaButton<T>({
   successPayload,
   waitBlocks = 1,
   children,
-  size = ButtonSize.Large,
+  size = ButtonSize.Medium,
   variant = "secondaryFill",
   buttonRef,
   coreSdkConfig,

package/src/components/cta/common/styles.ts

@@ -1,14 +1,16 @@
 import styled from "styled-components";
 
 export const ExtraInfo = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 0.75rem;
-  line-height: 150%;
-  opacity: 0.5;
+  &&& {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 0.75rem;
+    line-height: 150%;
+    opacity: 0.5;
+  }
 `;
 
 export const ButtonTextWrapper = styled.div`

package/src/components/currencyDisplay/CurrencyDisplay.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled, { css, CSSProperties } from "styled-components";
 
 import {
   Bitcoin,
@@ -24,10 +24,14 @@ export enum Currencies {
   USDC = "USDC",
   WETH = "WETH"
 }
+
 interface CurrencyDisplayProps {
-  value?: number | string;
+  value?: string;
   currency: Currencies;
   height?: number;
+  fontSize?: number | string;
+  iconSize?: number;
+  gap?: number | string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [x: string]: any;
 }
@@ -36,6 +40,9 @@ export const CurrencyDisplay = ({
   value,
   currency,
   height = 25,
+  fontSize,
+  iconSize,
+  gap,
   ...rest
 }: CurrencyDisplayProps) => {
   return (
@@ -43,9 +50,11 @@ export const CurrencyDisplay = ({
       style={{ height: `${height}px`, width: "100%" }}
       {...rest}
     >
-      <CurrencyLogo currency={currency} size={height} />
+      <CurrencyLogo currency={currency} size={iconSize || height} />
       {value && (
-        <CurrencyDisplayValue $height={height}>{value}</CurrencyDisplayValue>
+        <CurrencyDisplayValue $height={height} $fontSize={fontSize} $gap={gap}>
+          {value}
+        </CurrencyDisplayValue>
       )}
     </CurrencyDisplayValueWrapper>
   );
@@ -57,17 +66,20 @@ const CurrencyDisplayValueWrapper = styled.div`
   align-items: center;
 `;
 
-const CurrencyDisplayValue = styled.span<{ $height: number }>`
-  ${({ $height }) => css`
+const CurrencyDisplayValue = styled.span<{
+  $height: CSSProperties["height"];
+  $fontSize?: CSSProperties["fontSize"];
+  $gap?: CSSProperties["gap"];
+}>`
+  ${({ $height, $fontSize, $gap }) => css`
     line-height: ${$height}px;
-    font-size: ${($height - 5) / 16}rem;
+    font-size: ${$fontSize ? $fontSize : `${(Number($height) - 5) / 16}rem`};
+    padding-left: ${$gap !== undefined ? $gap : "1rem"};
   `}
-
   color: #09182c;
   display: flex;
   text-align: right;
   align-items: center;
-  padding-left: 1rem;
 `;
 
 export const CurrencyLogo = ({
@@ -80,31 +92,22 @@ export const CurrencyLogo = ({
   switch (currency) {
     case Currencies.ETH:
       return <Ether size={size} />;
-
     case Currencies.BTC:
       return <Bitcoin size={size} />;
-
     case Currencies.POLYGON:
       return <Polygon size={size} />;
-
     case Currencies.SOLANA:
       return <Solana size={size} />;
-
     case Currencies.TETHER:
       return <Tether size={size} />;
-
     case Currencies.DAI:
       return <Dai size={size} />;
-
     case Currencies.WETH:
       return <Weth size={size} />;
-
     case Currencies.BOSON:
       return <Boson size={size} />;
-
     case Currencies.USDC:
       return <Usdc size={size} />;
-
     default:
       return <div>{currency}</div>;
   }

package/src/components/exchangeCard/ExchangeCard.tsx

@@ -34,7 +34,7 @@ export type { ExchangeCardStatus } from "./types";
 interface Base {
   id: string;
   title: string;
-  price: number;
+  price: string;
   currency: Currencies;
   avatar: string;
   avatarName: JSX.Element | string;

package/src/components/form/BaseCheckbox.tsx

@@ -12,6 +12,8 @@ export function BaseCheckbox({
   text,
   theme,
   hideError,
+  className,
+  iconProps,
   ...props
 }: BaseCheckboxProps) {
   const [field, meta, helpers] = useField(name);
@@ -30,17 +32,26 @@ export function BaseCheckbox({
 
   return (
     <>
-      <CheckboxWrapper htmlFor={checkboxId} $error={errorMessage} theme={theme}>
+      <CheckboxWrapper
+        htmlFor={checkboxId}
+        $error={errorMessage}
+        theme={theme}
+        className={className}
+      >
         <input
           hidden
           id={checkboxId}
           type="checkbox"
           {...props}
           {...field}
+          onChange={(event) => {
+            field.onChange(event);
+            props.onChange?.(event);
+          }}
           checked={field.value}
         />
         <div>
-          <Check size={16} />
+          <Check size={16} width="100%" height="100%" {...iconProps} />
         </div>
         <b>{text}</b>
       </CheckboxWrapper>

package/src/components/form/Field.styles.ts

@@ -125,6 +125,7 @@ export type FileUploadWrapperTheme = Partial<{
   error: Partial<{
     borderColor: CSSProperties["borderColor"];
   }>;
+  overrides: Partial<CSSProperties>;
 }>;
 export const FileUploadWrapper = styled.div<{
   $error: unknown;
@@ -194,7 +195,9 @@ export const FieldFileUpload = styled(FieldInput)`
   display: none;
 `;
 
-export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
+export const FieldFileUploadWrapper = styled.div<{
+  $disabled: boolean;
+}>`
   position: relative;
   display: inline-block;
   ${({ $disabled }) =>
@@ -367,6 +370,7 @@ export const CheckboxWrapper = styled.label<{
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
+  gap: 0.5rem;
 
   > input {
     &:disabled {
@@ -423,7 +427,6 @@ export const CheckboxWrapper = styled.label<{
       css`
         border-radius: ${theme?.borderRadius};
       `};
-    margin-right: 0.5rem;
   }
 
   > input {

package/src/components/form/Select.tsx

@@ -126,13 +126,14 @@ export default function SelectComponent<M extends boolean>({
     typeof displayErrorMessage === "string" && displayErrorMessage !== "";
 
   const handleChange = (
-    option: Parameters<NonNullable<typeof onChange>>[0]
+    option: Parameters<NonNullable<typeof onChange>>[0],
+    actionMeta: Parameters<NonNullable<typeof onChange>>[1]
   ) => {
     if (!meta.touched) {
       helpers.setTouched(true);
     }
     helpers.setValue(option);
-    onChange?.(option);
+    onChange?.(option, actionMeta);
   };
   const handleBlur = () => {
     if (!meta.touched) {

package/src/components/form/Upload/BaseUpload.tsx

@@ -9,7 +9,7 @@ import { theme } from "../../../theme";
 import Loading from "../../ui/loading/LoadingWrapper";
 import ThemedButton from "../../ui/ThemedButton";
 import { Typography } from "../../ui/Typography";
-import Error from "../Error";
+import ErrorComponent from "../Error";
 import {
   FieldFileUploadWrapper,
   FieldInput,
@@ -52,6 +52,7 @@ function BaseUpload({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   removeFile,
   saveButtonTheme,
+  errorComponent,
   theme,
   ...props
 }: UploadPropsWithNoIpfs & WithUploadToIpfsProps) {
@@ -60,6 +61,7 @@ function BaseUpload({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [preview, setPreview] = useState<string | null>();
   const [field, meta, helpers] = useField(name);
+  const [errorMesage, setErrorMessage] = useState<string>();
 
   const handleLoading = useCallback(
     (loadingValue: boolean) => {
@@ -123,12 +125,12 @@ function BaseUpload({
     }
     handleLoading(true);
     try {
-      const imagePreview = await loadMedia(fileSrc || "");
-      if (imagePreview) {
-        setPreview(imagePreview);
+      const videoPreview = await loadMedia(fileSrc || "");
+      if (videoPreview) {
+        setPreview(videoPreview);
       } else {
         console.warn(
-          `imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`
+          `videoPreview ${videoPreview} is falsy in loadIpfsImagePreview`
         );
       }
     } catch (error) {
@@ -216,16 +218,26 @@ function BaseUpload({
         helpers.setTouched(true);
       }
       handleLoading(true);
-      const files = await saveToIpfs(efiles);
-      if (files) {
-        setFiles(files);
-      } else {
-        setFiles([]);
-        console.warn(
-          `There has been an error because 'files' ${files} is falsy in handleSave`
-        );
+      try {
+        const files = await saveToIpfs(efiles, { throwOnError: true });
+        setErrorMessage(undefined);
+        if (files) {
+          setFiles(files);
+        } else {
+          setFiles([]);
+          console.warn(
+            `There has been an error because 'files' ${files} is falsy in handleSave`
+          );
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          setErrorMessage(err.message);
+        } else {
+          setErrorMessage("Something went wrong");
+        }
+      } finally {
+        handleLoading(false);
       }
-      handleLoading(false);
     },
     [meta.touched, handleLoading, saveToIpfs, helpers, setFiles]
   );
@@ -234,6 +246,7 @@ function BaseUpload({
     borderRadius: borderRadius ? `${borderRadius}${borderRadiusUnit}` : "",
     width: width ? `100%` : ""
   };
+  const showPreview = field.value && field.value?.length !== 0 && preview;
   return (
     <>
       {withEditor && showEditor && (
@@ -262,6 +275,7 @@ function BaseUpload({
           }}
         />
       )}
+      {errorMesage && errorComponent?.(errorMesage)}
       <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
         <FieldInput
           {...props}
@@ -306,24 +320,28 @@ function BaseUpload({
             data-disabled={disabled}
             onClick={handleChooseFile}
             $error={errorMessage}
-            style={style}
+            style={{ ...style, ...theme?.overrides }}
             theme={theme?.triggerTheme}
           >
             {isLoading ? (
               <Loading size={2} />
             ) : (
               <>
-                {field.value && field.value?.length !== 0 && preview ? (
+                {showPreview ? (
                   <>
                     {isVideoOnly ? (
                       <VideoPreview
                         src={
                           preview?.startsWith("http")
                             ? preview
-                            : "data:video/mp4;base64," +
-                              preview?.substring(
-                                "data:application/octet-stream;base64,".length
-                              )
+                            : preview?.startsWith(
+                                  "data:application/octet-stream;base64,"
+                                )
+                              ? "data:video/mp4;base64," +
+                                preview?.substring(
+                                  "data:application/octet-stream;base64,".length
+                                )
+                              : preview
                         }
                         autoPlay
                         muted
@@ -341,7 +359,7 @@ function BaseUpload({
                 ) : (
                   <Image size={24} />
                 )}
-                {placeholder && (
+                {placeholder && !showPreview && (
                   <Typography tag="p" marginBottom={0} textAlign="center">
                     {placeholder}
                   </Typography>
@@ -359,7 +377,7 @@ function BaseUpload({
           <UploadedFiles files={files} handleRemoveFile={handleRemoveFile} />
         )}
       </FieldFileUploadWrapper>
-      <Error display={displayError} message={errorMessage} />
+      <ErrorComponent display={displayError} message={errorMessage} />
     </>
   );
 }

package/src/components/form/Upload/WithUploadToIpfs.tsx

@@ -22,7 +22,8 @@ export const SUPPORTED_FORMATS = [
 ];
 export interface WithUploadToIpfsProps {
   saveToIpfs: (
-    files: File[] | null
+    files: File[] | null,
+    options?: { throwOnError?: boolean }
   ) => Promise<false | FileProps[] | undefined>;
   loadMedia: (src: string) => Promise<string | undefined>;
   removeFile: (src: string) => Promise<void>;
@@ -39,7 +40,10 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
     const { saveFile, loadMedia, removeFile } = useSaveImageToIpfs();
 
     const saveToIpfs: WithUploadToIpfsProps["saveToIpfs"] = useCallback(
-      async (filesArray: File[] | null) => {
+      async (
+        filesArray: File[] | null,
+        options: { throwOnError?: boolean } = {}
+      ) => {
         if (!filesArray) {
           return;
         }
@@ -53,10 +57,12 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
             const err = `File ${
               file?.name
             } size cannot exceed more than ${bytesToSize(sizeValidation)}!`;
+            if (options?.throwOnError) throw new Error(err);
             filesErrors.push(err);
           }
           if (!formatValidation.includes(file?.type)) {
             const err = `Uploaded file has unsupported format of ${file?.type}!`;
+            if (options?.throwOnError) throw new Error(err);
             filesErrors.push(err);
           }
         }