@bosonprotocol/react-kit 0.34.0-alpha.9 → 0.34.0

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

@@ -1,6 +1,6 @@
 import * as Sentry from "@sentry/browser";
 import { useField } from "formik";
-import { Image, Trash, VideoCamera } from "phosphor-react";
+import { Image, Trash, VideoCamera, FilePdf, Upload, X } from "phosphor-react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { loadAndSetMedia } from "../../../lib/base64/base64";
 import { bytesToSize } from "../../../lib/bytes/bytesToSize";
@@ -9,10 +9,11 @@ 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,
+  PdfOnlyLabel,
   FileUploadWrapper,
   ImagePreview,
   VideoPreview
@@ -26,6 +27,7 @@ import UploadedFiles from "./UploadedFiles";
 import { WithUploadToIpfs, WithUploadToIpfsProps } from "./WithUploadToIpfs";
 import { useModal } from "../../modal/useModal";
 import { ImageEditorModal } from "./ImageEditorModal/ImageEditorModal";
+import { Grid } from "../../ui/Grid";
 const colors = theme.colors.light;
 export type BaseUploadProps = UploadPropsWithNoIpfs;
 function BaseUpload({
@@ -52,6 +54,7 @@ function BaseUpload({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   removeFile,
   saveButtonTheme,
+  errorComponent,
   theme,
   ...props
 }: UploadPropsWithNoIpfs & WithUploadToIpfsProps) {
@@ -60,6 +63,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) => {
@@ -89,6 +93,9 @@ function BaseUpload({
   const isVideoOnly = mimetypes.every((mimetype) =>
     mimetype.startsWith("video/")
   );
+  const isPdfOnly = mimetypes.every((mimetype) =>
+    mimetype.startsWith("application/pdf")
+  );
 
   useEffect(() => {
     onFilesSelect?.(files);
@@ -112,6 +119,12 @@ function BaseUpload({
             setPreview(base64Uri);
           });
         }
+      } else if (isPdfOnly) {
+        if (withUpload) {
+          loadIpfsFile(files[0] as FileProps);
+        } else {
+          setPreview(files[0]?.name);
+        }
       }
     }
   }, [files]); // eslint-disable-line
@@ -123,12 +136,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) {
@@ -163,6 +176,27 @@ function BaseUpload({
     }
   };
 
+  const loadIpfsFile = async (file: FileProps) => {
+    const fileSrc = file && file?.src ? file?.src : false;
+    if (!fileSrc) {
+      return false;
+    }
+    try {
+      handleLoading(true);
+      const filePreview = await loadMedia(fileSrc || "");
+      if (filePreview) {
+        setPreview(files[0]?.name);
+      } else {
+        console.warn(`filePreview ${filePreview} is falsy in loadIpfsFile`);
+      }
+    } catch (error) {
+      console.error(error);
+      Sentry.captureException(error);
+    } finally {
+      handleLoading(false);
+    }
+  };
+
   const handleChooseFile = () => {
     const input = inputRef.current;
     if (input) {
@@ -216,16 +250,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 +278,7 @@ function BaseUpload({
     borderRadius: borderRadius ? `${borderRadius}${borderRadiusUnit}` : "",
     width: width ? `100%` : ""
   };
+  const showPreview = field.value && field.value?.length !== 0 && preview;
   return (
     <>
       {withEditor && showEditor && (
@@ -262,11 +307,17 @@ function BaseUpload({
           }}
         />
       )}
-      <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
+      {errorMesage && errorComponent?.(errorMesage)}
+      <FieldFileUploadWrapper
+        {...wrapperProps}
+        $isPdfOnly={isPdfOnly}
+        $disabled={!!disabled}
+      >
         <FieldInput
           {...props}
           hidden
           type="file"
+          id={`file-${name}`}
           accept={accept}
           multiple={multiple}
           onChange={async (e) => {
@@ -302,64 +353,129 @@ function BaseUpload({
             <>{trigger}</>
           </ThemedButton>
         ) : (
-          <FileUploadWrapper
-            data-disabled={disabled}
-            onClick={handleChooseFile}
-            $error={errorMessage}
-            style={style}
-            theme={theme?.triggerTheme}
-          >
-            {isLoading ? (
-              <Loading size={2} />
-            ) : (
-              <>
-                {field.value && field.value?.length !== 0 && preview ? (
-                  <>
-                    {isVideoOnly ? (
-                      <VideoPreview
-                        src={
-                          preview?.startsWith("http")
-                            ? preview
-                            : "data:video/mp4;base64," +
-                              preview?.substring(
-                                "data:application/octet-stream;base64,".length
-                              )
-                        }
-                        autoPlay
-                        muted
-                        loop
-                      />
-                    ) : (
-                      <ImagePreview
-                        style={{ ...imgPreviewStyle }}
-                        src={preview}
-                      />
-                    )}
-                  </>
-                ) : isVideoOnly ? (
-                  <VideoCamera size={24} />
-                ) : (
-                  <Image size={24} />
-                )}
-                {placeholder && (
-                  <Typography tag="p" marginBottom={0} textAlign="center">
-                    {placeholder}
-                  </Typography>
-                )}
-              </>
-            )}
-          </FileUploadWrapper>
-        )}
-        {!disabled && field.value && field.value?.length !== 0 && preview && (
-          <div onClick={handleRemoveAllFiles} data-remove style={style}>
-            <Trash size={24} color={colors.white} />
-          </div>
+          (!isPdfOnly || (isPdfOnly && files.length > 0 && !multiple)) && (
+            <FileUploadWrapper
+              $isPdfOnly={isPdfOnly}
+              data-disabled={disabled}
+              onClick={() => {
+                if (!isPdfOnly) {
+                  handleChooseFile();
+                }
+              }}
+              $error={errorMessage}
+              style={{ ...style, ...theme?.overrides }}
+              theme={theme?.triggerTheme}
+            >
+              {isLoading ? (
+                <Loading size={2} />
+              ) : (
+                <>
+                  {showPreview ? (
+                    <>
+                      {isVideoOnly ? (
+                        <VideoPreview
+                          src={
+                            preview?.startsWith("http")
+                              ? preview
+                              : preview?.startsWith(
+                                    "data:application/octet-stream;base64,"
+                                  )
+                                ? "data:video/mp4;base64," +
+                                  preview?.substring(
+                                    "data:application/octet-stream;base64,"
+                                      .length
+                                  )
+                                : preview
+                          }
+                          autoPlay
+                          muted
+                          loop
+                        />
+                      ) : isPdfOnly ? (
+                        <Grid
+                          flexDirection="row"
+                          alignItems="center"
+                          gap="0.25rem"
+                        >
+                          <div>
+                            <FilePdf size={24} />
+                          </div>
+                          <Typography style={{ width: "100%" }}>
+                            {preview}
+                          </Typography>
+                          <button
+                            type="button"
+                            style={{
+                              display: "flex",
+                              justifyContent: "center"
+                            }}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              handleRemoveAllFiles();
+                            }}
+                          >
+                            <X size={12.5} />
+                          </button>
+                        </Grid>
+                      ) : (
+                        <ImagePreview
+                          style={{ ...imgPreviewStyle }}
+                          src={preview}
+                        />
+                      )}
+                    </>
+                  ) : isVideoOnly ? (
+                    <VideoCamera size={24} />
+                  ) : isPdfOnly ? (
+                    <FilePdf size={24} />
+                  ) : (
+                    <Image size={24} />
+                  )}
+                  {placeholder && !showPreview && (
+                    <Typography
+                      tag="p"
+                      marginBottom={0}
+                      textAlign="center"
+                      {...(isPdfOnly && { marginTop: 0 })}
+                    >
+                      {placeholder}
+                    </Typography>
+                  )}
+                </>
+              )}
+            </FileUploadWrapper>
+          )
         )}
+        {!disabled &&
+          field.value &&
+          field.value?.length !== 0 &&
+          preview &&
+          !isPdfOnly && (
+            <div onClick={handleRemoveAllFiles} data-remove style={style}>
+              <Trash size={24} color={colors.white} />
+            </div>
+          )}
         {multiple && (
-          <UploadedFiles files={files} handleRemoveFile={handleRemoveFile} />
+          <UploadedFiles
+            files={files}
+            isPdfOnly={isPdfOnly}
+            handleRemoveFile={handleRemoveFile}
+          />
+        )}
+        {isPdfOnly && (
+          <Grid>
+            <PdfOnlyLabel
+              htmlFor={`file-${name}`}
+              $disabled={disabled}
+              style={{ ...theme?.uploadButton }}
+            >
+              Upload file <Upload size={20} />
+            </PdfOnlyLabel>
+          </Grid>
         )}
       </FieldFileUploadWrapper>
-      <Error display={displayError} message={errorMessage} />
+      <ErrorComponent display={displayError} message={errorMessage} />
     </>
   );
 }

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

@@ -1,4 +1,4 @@
-import { ImageSquare, X } from "phosphor-react";
+import { ImageSquare, X, FilePdf } from "phosphor-react";
 import React, { useCallback } from "react";
 import styled from "styled-components";
 import { bytesToSize } from "../../../lib/bytes/bytesToSize";
@@ -33,6 +33,7 @@ interface Props {
   base64Content?: string;
   showSize: boolean;
   color: "grey" | "white";
+  isPdfOnly?: boolean;
   handleRemoveFile?: () => void;
 }
 export default function UploadedFile({
@@ -41,12 +42,13 @@ export default function UploadedFile({
   color,
   base64Content,
   showSize,
+  isPdfOnly,
   handleRemoveFile
 }: Props) {
   const FileContent = useCallback(() => {
     return (
       <>
-        <ImageSquare size={23} />
+        {isPdfOnly ? <FilePdf size={23} /> : <ImageSquare size={23} />}
         <Typography fontSize="1rem" fontWeight="400">
           &nbsp;&nbsp; {fileName}
         </Typography>
@@ -57,7 +59,7 @@ export default function UploadedFile({
         )}
       </>
     );
-  }, [fileName, fileSize, showSize]);
+  }, [fileName, isPdfOnly, fileSize, showSize]);
   return (
     <Grid>
       <AttachmentContainer $isLeftAligned={color === "white"}>

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

@@ -5,13 +5,19 @@ import { UploadFileType } from "../types";
 interface Props {
   files: UploadFileType[];
   handleRemoveFile: (index: number) => void;
+  isPdfOnly?: boolean;
 }
-export default function UploadedFiles({ files, handleRemoveFile }: Props) {
+export default function UploadedFiles({
+  files,
+  handleRemoveFile,
+  isPdfOnly
+}: Props) {
   return (
     <>
       {files.map((file: UploadFileType, index: number) => {
         return (
           <UploadedFile
+            isPdfOnly={isPdfOnly}
             key={`${file?.name || ""}_${index}`}
             fileName={file?.name || `file_${index}`}
             fileSize={Number(file?.size || 0)}

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);
           }
         }

package/src/components/form/types.ts

@@ -1,5 +1,10 @@
 import { ReactNode } from "react";
-import { CSSObjectWithLabel, MultiValue, SingleValue } from "react-select";
+import {
+  ActionMeta,
+  CSSObjectWithLabel,
+  MultiValue,
+  SingleValue
+} from "react-select";
 import { CSSProperties } from "styled-components";
 import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
 import type {
@@ -8,6 +13,8 @@ import type {
   TextAreaTheme
 } from "./Field.styles";
 import type { GridProps } from "../ui/Grid";
+import { StateManagerProps } from "react-select/dist/declarations/src/useStateManager";
+import { IconProps } from "phosphor-react";
 
 export interface BaseProps {
   name: string;
@@ -23,10 +30,17 @@ export interface DatepickerProps extends BaseProps {
   setIsFormValid?: (isValid: boolean) => void;
 }
 
-export interface CheckboxProps extends BaseProps {
-  text?: string;
-  theme?: CheckboxTheme;
-}
+export type CheckboxProps = BaseProps &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked"> & {
+    text?: string;
+    className?: string;
+    theme?: CheckboxTheme;
+    iconProps?: Parameters<
+      React.ForwardRefExoticComponent<
+        IconProps & React.RefAttributes<SVGSVGElement>
+      >
+    >[0];
+  };
 
 export type TextareaProps = BaseProps &
   React.TextareaHTMLAttributes<HTMLTextAreaElement> & { theme?: TextAreaTheme };
@@ -66,7 +80,7 @@ export type TagsProps = BaseProps &
     transform?: (tag: string) => string;
   };
 
-export interface SelectDataProps<Value extends string = string> {
+export interface SelectDataProps<Value = string> {
   label: string;
   value: Value;
   disabled?: boolean;
@@ -77,27 +91,55 @@ export interface SelectContentProps {
   children: React.ReactNode | JSX.Element;
 }
 
-export type OnChange = (value: SingleValue<SelectDataProps>) => void;
+export type OnChange<Value = string> = (
+  value: SingleValue<SelectDataProps<Value>>
+) => void;
 
-export interface BaseSelectProps {
-  options: Array<SelectDataProps>;
+export interface BaseSelectProps<Value = string> {
+  options: Array<SelectDataProps<Value>>;
   placeholder?: string;
-  defaultValue?: SelectDataProps | null;
-  onChange?: OnChange;
+  defaultValue?: SelectDataProps<Value> | null;
+  onChange?: OnChange<Value>;
 }
-
-export interface SelectProps<M extends boolean | undefined = false>
-  extends BaseProps {
+export type SupportedReactSelectProps<
+  M extends boolean | undefined = false,
+  Option extends Record<string, unknown> = SelectDataProps
+> = Pick<
+  StateManagerProps<Option, M extends undefined ? false : boolean>,
+  | "formatGroupLabel"
+  | "formatOptionLabel"
+  | "menuPlacement"
+  | "menuPosition"
+  | "menuIsOpen"
+  | "menuPortalTarget"
+  | "onMenuClose"
+  | "onMenuOpen"
+  | "onMenuScrollToBottom"
+  | "onMenuScrollToTop"
+  | "maxMenuHeight"
+  | "minMenuHeight"
+  | "menuShouldBlockScroll"
+  | "menuShouldScrollIntoView"
+  | "openMenuOnClick"
+  | "openMenuOnFocus"
+  | "closeMenuOnScroll"
+  | "closeMenuOnSelect"
+  | "captureMenuScroll"
+  | "defaultMenuIsOpen"
+>;
+export type SelectProps<
+  M extends boolean | undefined = false,
+  Option extends Record<string, unknown> = SelectDataProps
+> = BaseProps & {
   isMulti?: M;
   disabled?: boolean;
   isClearable?: boolean;
   isSearchable?: boolean;
-  options: Array<SelectDataProps> | Readonly<Array<SelectDataProps>>;
+  options: Array<Option> | Readonly<Array<Option>>;
   errorMessage?: string;
   onChange?: (
-    option: M extends true
-      ? MultiValue<SelectDataProps<string>>
-      : SingleValue<SelectDataProps<string>>
+    option: M extends true ? MultiValue<Option> : SingleValue<Option>,
+    actionMeta?: ActionMeta<Option>
   ) => void;
   label?: string;
   theme?: Partial<{
@@ -120,7 +162,7 @@ export interface SelectProps<M extends boolean | undefined = false>
     singleValue: Partial<CSSProperties> &
       Partial<{ error: CSSObjectWithLabel }>;
   }>;
-}
+} & SupportedReactSelectProps<M, Option>;
 
 export type UploadProps = BaseProps & {
   accept?: string;
@@ -137,8 +179,13 @@ export type UploadProps = BaseProps & {
   borderRadiusUnit?: "px" | "%";
   width?: number;
   height?: number;
+  errorComponent?: (errorMessage: string) => React.ReactNode;
   imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
-  theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>;
+  theme?: Partial<{
+    triggerTheme: FileUploadWrapperTheme;
+    overrides: React.CSSProperties;
+    uploadButton: React.CSSProperties;
+  }>;
 } & (
     | {
         withEditor: true;

package/src/components/image/Image.styles.ts

@@ -15,8 +15,6 @@ export const ImageContainer = styled.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
-  object-position: top;
-  padding: 1rem;
 `;
 
 const buttonText = css`

package/src/components/magicLink/MagicProvider.tsx

@@ -13,7 +13,7 @@ export const MagicProvider = ({ children }: { children: ReactNode }) => {
   return (
     <InnerMagicProvider
       chainId={chainId}
-      magicLinkKey={magicLinkKey}
+      magicLinkKey={magicLinkKey ?? ""}
       rpcUrls={CONFIG.rpcUrls}
     >
       {children}

package/src/components/magicLink/UserContext.tsx

@@ -1,14 +1,21 @@
 import React, { useContext } from "react";
+import { useConfigContext } from "../config/ConfigContext";
 
 export const UserContext = React.createContext<{
   user: string | undefined;
   setUser: React.Dispatch<React.SetStateAction<string | undefined>>;
 } | null>(null);
-
+const emptyUserContext = {
+  user: "",
+  setUser: () => {
+    //
+  }
+};
 export const useUser = () => {
+  const { withMagicLink } = useConfigContext();
   const value = useContext(UserContext);
-  if (!value) {
+  if (!value && withMagicLink) {
     throw new Error(`useUser must be used under a UserProvider`);
   }
-  return value;
+  return value || emptyUserContext;
 };

package/src/components/modal/components/Redeem/MyItems/Exchange.tsx

@@ -173,7 +173,7 @@ export default function Exchange({
           }
         }}
         onAvatarNameClick={handleOnAvatarClick}
-        price={Number(price)}
+        price={price}
         currency={offer.exchangeToken.symbol as Currencies}
         {...createSpecificCardConfig()}
       />