@bosonprotocol/react-kit 0.32.0-alpha.9 → 0.33.0-alpha.0

package/dist/esm/hooks/images/useIpfsImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIpfsImage.js","sourceRoot":"","sources":["../../../../src/hooks/images/useIpfsImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM3D,MAAM,UAAU,YAAY,CAC1B,EAAE,GAAG,EAAqB,EAC1B,OAA6B;IAE7B,OAAO,QAAQ,CACb,CAAC,cAAc,EAAE,GAAG,CAAC,EACrB,KAAK,IAAI,EAAE;QACT,MAAM,MAAM,GAAG,MAAM,kBAAkB,CAAC,GAAG,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACvD,OAAO;YACL,GAAG,MAAM;YACT,GAAG,QAAQ;SACZ,CAAC;IACJ,CAAC,EACD;QACE,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CACF,CAAC;AACJ,CAAC"}

package/dist/esm/index.d.ts

@@ -81,4 +81,5 @@ export * from "./components/error/ErrorMessage";
 export * from "./components/error/SimpleError";
 export * from "./components/step/MultiSteps";
 export * from "./components/ipfs/IpfsProvider";
+export * from "./types/helpers";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,OAAO,EACP,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,qEAAqE,CAAC;AACpF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iBAAiB,CAAC"}

package/dist/esm/index.js

@@ -81,4 +81,5 @@ export * from "./components/error/ErrorMessage";
 export * from "./components/error/SimpleError";
 export * from "./components/step/MultiSteps";
 export * from "./components/ipfs/IpfsProvider";
+export * from "./types/helpers";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/lib/base64/base64.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="node" />
 import { IpfsMetadataStorage } from "@bosonprotocol/ipfs-storage";
-export declare function fetchImageAsBase64(imageUrl: string): Promise<string>;
+export declare function fetchImageAsBase64(imageUrl: string): Promise<{
+    base64: string;
+    blob: Blob;
+}>;
 export declare function fromBase64ToBinary(base64: string): Buffer;
 export declare function blobToBase64(blob: Blob): Promise<string>;
 export declare const loadAndSetMedia: (fileOrBlob: File | Blob, callback: (base64Uri: string) => void, errorCallback?: ((...errorArgs: unknown[]) => void) | undefined) => void;

package/dist/esm/lib/base64/base64.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base64.d.ts","sourceRoot":"","sources":["../../../../src/lib/base64/base64.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,wBAAsB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,mBAIxD;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,wBAAsB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAI9D;AAED,eAAO,MAAM,eAAe,eACd,IAAI,GAAG,IAAI,wBACD,MAAM,KAAK,IAAI,kCACN,OAAO,EAAE,KAAK,IAAI,sBAWlD,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,IAAI,oBAMjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,cACpB,MAAM,EAAE,uBACE,mBAAmB,KACvC,QAAQ,MAAM,EAAE,CAgBlB,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAsB5C"}
+{"version":3,"file":"base64.d.ts","sourceRoot":"","sources":["../../../../src/lib/base64/base64.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,wBAAsB,kBAAkB,CAAC,QAAQ,EAAE,MAAM;;;GAIxD;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,wBAAsB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAI9D;AAED,eAAO,MAAM,eAAe,eACd,IAAI,GAAG,IAAI,wBACD,MAAM,KAAK,IAAI,kCACN,OAAO,EAAE,KAAK,IAAI,sBAWlD,CAAC;AAEF,eAAO,MAAM,sBAAsB,UAAW,IAAI,oBAMjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,cACpB,MAAM,EAAE,uBACE,mBAAmB,KACvC,QAAQ,MAAM,EAAE,CAgBlB,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAsB5C"}

package/dist/esm/lib/base64/base64.js

@@ -1,7 +1,7 @@
 export async function fetchImageAsBase64(imageUrl) {
     const response = await fetch(imageUrl);
     const blob = await response.blob();
-    return blobToBase64(blob);
+    return { base64: await blobToBase64(blob), blob };
 }
 export function fromBase64ToBinary(base64) {
     return Buffer.from(base64.replace(/data:image\/.*;base64,/, ""), "base64");

package/dist/esm/lib/base64/base64.js.map

@@ -1 +1 @@
-{"version":3,"file":"base64.js","sourceRoot":"","sources":["../../../../src/lib/base64/base64.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base64.js","sourceRoot":"","sources":["../../../../src/lib/base64/base64.ts"],"names":[],"mappings":"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"}

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.32.0-alpha.9",
+  "version": "0.33.0-alpha.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,8 +15,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.40.4-alpha.7",
-    "@bosonprotocol/ethers-sdk": "^1.14.4-alpha.7",
+    "@bosonprotocol/core-sdk": "^1.40.4",
+    "@bosonprotocol/ethers-sdk": "^1.14.4",
     "@bosonprotocol/ipfs-storage": "^1.11.3",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
@@ -54,7 +54,9 @@
     "multihashes": "^4.0.3",
     "phosphor-react": "^1.4.1",
     "polished": "^4.2.2",
+    "react-avatar-editor": "^13.0.2",
     "react-chartjs-2": "^5.2.0",
+    "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-hot-toast": "2.4.0",
     "react-markdown": "8.0.6",
@@ -155,6 +157,7 @@
     "@types/lodash.uniqby": "^4.7.7",
     "@types/node": "^16.11.25",
     "@types/react": "^18.0.3",
+    "@types/react-avatar-editor": "^13.0.2",
     "@types/react-slick": "^0.23.13",
     "@types/react-table": "^7.7.14",
     "@types/storybook__react": "^5.2.1",
@@ -185,5 +188,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "bbc2d285de7252d51efa9007980be0ba83e8fd5e"
+  "gitHead": "5bb2c1b3cd162e43194e001ae46b41688c0a285a"
 }

package/src/components/error/SimpleError.tsx

@@ -1,33 +1,42 @@
 import { Warning } from "phosphor-react";
 import React, { ReactNode } from "react";
-import styled from "styled-components";
+import styled, { CSSProperties } from "styled-components";
 
 import { theme } from "../../theme";
-import { Grid } from "../ui/Grid";
+import { Grid, GridProps } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 const colors = theme.colors.light;
 
-const StyledGrid = styled(Grid)`
-  background-color: ${colors.lightGrey};
+const StyledGrid = styled(Grid)<{
+  $background: CSSProperties["backgroundColor"];
+}>`
+  background-color: ${({ $background }) => $background};
 `;
 
-interface Props {
+export type SimpleProps = GridProps & {
   errorMessage?: string;
   children?: ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [x: string]: any;
-}
+  backgroundColor?: CSSProperties["backgroundColor"];
+  warningColor?: CSSProperties["backgroundColor"];
+};
 
-export function SimpleError({ errorMessage, children, ...rest }: Props) {
+export function SimpleError({
+  errorMessage,
+  children,
+  backgroundColor = colors.lightGrey,
+  warningColor = colors.darkOrange,
+  ...rest
+}: SimpleProps) {
   return (
     <StyledGrid
       justifyContent="flex-start"
       gap="0.5rem"
       margin="1.5rem 0 0 0"
       padding="1.5rem"
+      $background={backgroundColor}
       {...rest}
     >
-      <Warning color={colors.darkOrange} size={16} />
+      <Warning color={warningColor} size={16} />
       {children ? (
         children
       ) : (

package/src/components/form/BaseInput.tsx

@@ -32,7 +32,7 @@ export const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
     const errorText = meta.error || status?.[name];
     const errorMessage = errorText && meta.touched ? errorText : "";
     const displayError =
-      typeof errorMessage === typeof "string" && errorMessage !== "";
+      typeof errorMessage === "string" && errorMessage !== "";
     const InputComponent = useMemo(() => {
       const displayClearButton = isClearable && !props.disabled;
       const inputProps = {

package/src/components/form/BaseTagsInput.tsx

@@ -35,8 +35,7 @@ export const BaseTagsInput = ({
   const tags = field.value || [];
 
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   const handleBlur = () => {
     if (!meta.touched) {

package/src/components/form/BaseTextArea.tsx

@@ -8,8 +8,7 @@ export type BaseTextAreaProps = TextareaProps;
 export function BaseTextArea({ name, theme, ...props }: TextareaProps) {
   const [field, meta] = useField(name);
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
   return (
     <>
       <FieldTextArea

package/src/components/form/Checkbox.tsx

@@ -10,8 +10,7 @@ export default function Checkbox({ name, text, ...props }: CheckboxProps) {
   const [field, meta, helpers] = useField(name);
   const ref = useRef(field.value);
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
   const checkboxId = `checkbox-${name}`;
 
   useEffect(() => {

package/src/components/form/CountrySelect.tsx

@@ -4,15 +4,16 @@ import { GlobeHemisphereWest } from "phosphor-react";
 import React, { forwardRef, useState, useEffect } from "react";
 import type { Country as CountryCode } from "react-phone-number-input";
 import PhoneInput from "react-phone-number-input";
-import Select, { components } from "react-select";
-import styled from "styled-components";
+import Select, { GroupBase, StylesConfig, components } from "react-select";
+import styled, { CSSProperties } from "styled-components";
 import { zIndex } from "../ui/zIndex";
 import Error from "./Error";
 import type { InputProps } from "./types";
 import { SelectDataProps } from "./types";
-import { theme } from "../../theme";
+import { theme as importedTheme } from "../../theme";
+export type { Country as CountryCode } from "react-phone-number-input";
 
-const colors = theme.colors.light;
+const colors = importedTheme.colors.light;
 const customStyles = {
   control: (provided: any, state: any) => {
     const before = state.selectProps.label
@@ -24,45 +25,61 @@ const customStyles = {
           }
         }
       : null;
+    const { theme } = state;
     return {
       ...provided,
-      borderRadius: 0,
-      padding: "0.4rem 0.25rem",
+      borderRadius: theme.borderRadius,
+      height: theme.controlHeight,
+      alignContent: "center",
+      padding: "0.4rem 1rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: theme.colors.controlHoverBorderColor,
         borderWidth: "1px"
       },
-      background: colors.lightGrey,
+      background: theme.colors.controlBackground,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
-        : `1px solid ${colors.border}`,
+        ? `1px solid ${theme.colors.controlFocusBorderColor}`
+        : `1px solid ${theme.colors.controlUnfocusedBorderColor}`,
       ...before
     };
   },
-  container: (provided: any, state: any) => ({
-    ...provided,
-    zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
-    position: "relative",
-    width: "100%"
-  }),
-  option: (provided: any, state: any) => ({
+  container: (provided: any, state: any) => {
+    return {
+      ...provided,
+      zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
+      position: "relative",
+      width: "100%"
+    };
+  },
+  option: (provided: any, state: any) => {
+    const { theme } = state;
+    return {
+      ...provided,
+      cursor: state.isDisabled ? "not-allowed" : "pointer",
+      opacity: state.isDisabled ? "0.5" : "1",
+      background:
+        state.isOptionSelected || state.isSelected || state.isFocused
+          ? theme.colors.selectedOptionBackground
+          : theme.colors.unselectedOptionBackground,
+      color:
+        state.isOptionSelected || state.isSelected
+          ? theme.colors.selectedOptionColor
+          : theme.colors.unselectedOptionColor
+    };
+  },
+  menu: (provided) => ({
     ...provided,
-    cursor: state.isDisabled ? "not-allowed" : "pointer",
-    opacity: state.isDisabled ? "0.5" : "1",
-    background:
-      state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
-        : colors.white,
-    color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+    overflow: "hidden"
   }),
   indicatorSeparator: () => ({
     display: "none"
   })
-};
+} satisfies StylesConfig<
+  SelectDataProps<string>,
+  false,
+  GroupBase<SelectDataProps<string>>
+>;
 
 const ControlGrid = styled.div`
   display: flex;
@@ -92,13 +109,10 @@ const OptionGrid = styled.div`
 
 const PhoneWrapper = styled.div`
   width: 100%;
-  padding-bottom: 0.5rem;
   input {
     width: 100%;
     padding: 1rem;
     gap: 0.5rem;
-    background: ${colors.lightGrey};
-    border: 1px solid ${colors.border};
     border-radius: 0;
     outline: none;
     font-family: "Plus Jakarta Sans";
@@ -106,18 +120,34 @@ const PhoneWrapper = styled.div`
   }
 `;
 
-type Props = InputProps & {
+export type CountrySelectProps = InputProps & {
   countries?: CountryCode[];
+  theme?: Partial<{
+    controlHeight: CSSProperties["height"];
+    borderRadius: CSSProperties["borderRadius"];
+    controlHoverBorderColor: CSSProperties["borderColor"];
+    controlBackground: CSSProperties["background"];
+    controlFocusBorderColor: CSSProperties["borderColor"];
+    controlUnfocusedBorderColor: CSSProperties["borderColor"];
+    selectedOptionBackground: CSSProperties["background"];
+    unselectedOptionBackground: CSSProperties["background"];
+    selectedOptionColor: CSSProperties["color"];
+    unselectedOptionColor: CSSProperties["color"];
+  }>;
 };
 
-export function CountrySelect({ name, countries, ...props }: Props) {
+export function CountrySelect({
+  name,
+  countries,
+  theme: selectTheme,
+  ...rest
+}: CountrySelectProps) {
   const { status } = useFormikContext();
   const [initialized, setInitialized] = useState<boolean>(false);
   const [field, meta, helpers] = useField(name);
   const errorText = meta.error || status?.[name];
   const errorMessage = errorText && meta.touched ? errorText : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
   const [phone, setPhone] = useState<string | undefined>(undefined);
   const [countryCode, setCountryCode] = useState<CountryCode | undefined>();
 
@@ -131,10 +161,6 @@ export function CountrySelect({ name, countries, ...props }: Props) {
   return (
     <>
       <PhoneWrapper>
-        {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment, prettier/prettier
-          /* @ts-ignore */
-        }
         <PhoneInput
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           inputComponent={forwardRef((props, ref) => (
@@ -149,7 +175,37 @@ export function CountrySelect({ name, countries, ...props }: Props) {
             <>
               <div>
                 <Select
+                  {...rest}
                   {...props}
+                  isDisabled={rest.disabled}
+                  theme={(theme) => ({
+                    ...theme,
+                    controlHeight: selectTheme?.controlHeight,
+                    borderRadius: selectTheme?.borderRadius || 0,
+                    colors: {
+                      ...theme.colors,
+                      controlHoverBorderColor:
+                        selectTheme?.controlHoverBorderColor ||
+                        colors.secondary,
+                      controlBackground:
+                        selectTheme?.controlBackground || colors.lightGrey,
+                      controlFocusBorderColor:
+                        selectTheme?.controlFocusBorderColor ||
+                        colors.secondary,
+                      controlUnfocusedBorderColor:
+                        selectTheme?.controlUnfocusedBorderColor ||
+                        colors.border,
+                      selectedOptionBackground:
+                        selectTheme?.selectedOptionBackground ||
+                        colors.lightGrey,
+                      unselectedOptionBackground:
+                        selectTheme?.unselectedOptionBackground || colors.white,
+                      selectedOptionColor:
+                        selectTheme?.selectedOptionColor || colors.secondary,
+                      unselectedOptionColor:
+                        selectTheme?.unselectedOptionColor || colors.black
+                    }
+                  })}
                   styles={customStyles}
                   name="countrySelect"
                   value={(props?.options || []).find(
@@ -201,10 +257,7 @@ export function CountrySelect({ name, countries, ...props }: Props) {
           )}
         />
       </PhoneWrapper>
-      <Error
-        display={!props.hideError && displayError}
-        message={errorMessage}
-      />
+      <Error display={!rest.hideError && displayError} message={errorMessage} />
     </>
   );
 }

package/src/components/form/Datepicker.tsx

@@ -15,8 +15,7 @@ export default function DatepickerComponent({
   const [field, meta, helpers] = useField(name);
 
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   const handleChange = (date: Dayjs | Array<Dayjs | null>) => {
     if (!meta.touched) {

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

@@ -115,7 +115,7 @@ export const FieldInput = styled.input<{
     `};
 `;
 
-export const FileUploadWrapper = styled.div<{ choosen: any; error: any }>`
+export const FileUploadWrapper = styled.div<{ error: any }>`
   position: relative;
   overflow: hidden;
   display: flex;

package/src/components/form/FormField.tsx

@@ -13,15 +13,16 @@ import type { FormFieldProps } from "./types";
 
 const colors = theme.colors.light;
 
-export default function FormField({
+export function FormField({
   title,
+  titleIcon,
   subTitle = false,
   required = false,
   tooltip,
   children,
   style = {},
-  theme = "",
-  valueToCopy
+  valueToCopy,
+  copyIconColor = colors.secondary
 }: FormFieldProps) {
   return (
     <FormFieldWrapper
@@ -59,10 +60,11 @@ export default function FormField({
                   }
                 }}
               >
-                <Copy size={24} color={colors.secondary} weight="light" />
+                <Copy size={24} color={copyIconColor} weight="light" />
               </CopyButton>
             )}
           </Typography>
+          {titleIcon}
           {tooltip && <Tooltip content={tooltip} size={16} />}
         </Grid>
         {subTitle && (

package/src/components/form/InputColor.tsx

@@ -39,8 +39,7 @@ const ColorPicker = styled(Input).attrs({
 export default function InputColor({ name, ...props }: InputColorProps) {
   const [field, meta] = useField<string>(name);
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   return (
     <>

package/src/components/form/Phone.tsx

@@ -138,8 +138,7 @@ export default function Phone({ name, ...props }: InputProps) {
   const [field, meta, helpers] = useField(name);
   const errorText = meta.error || status?.[name];
   const errorMessage = errorText && meta.touched ? errorText : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   const handlePhoneChange = useCallback(
     (value: string) => {

package/src/components/form/Select.tsx

@@ -91,8 +91,7 @@ export default function SelectComponent({
         : "";
 
   const displayError =
-    typeof displayErrorMessage === typeof "string" &&
-    displayErrorMessage !== "";
+    typeof displayErrorMessage === "string" && displayErrorMessage !== "";
 
   const handleChange = (option: SelectDataProps<string>) => {
     if (!meta.touched) {

package/src/components/form/Upload/ImageEditorModal/ImageEditor.tsx

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, forwardRef, useState } from "react";
+import AvatarEditor, { AvatarEditorProps } from "react-avatar-editor";
+import Dropzone from "react-dropzone";
+import styled from "styled-components";
+import { Grid } from "../../../ui/Grid";
+import { useIpfsImage } from "../../../../hooks/images/useIpfsImage";
+
+const StyledCanvasWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  > :first-child {
+    max-width: 100%;
+    object-fit: contain;
+    width: auto !important;
+    height: auto !important;
+  }
+`;
+
+export type ImageEditorProps = Pick<
+  AvatarEditorProps,
+  "borderRadius" | "width" | "height"
+> & {
+  url?: string;
+};
+
+export const ImageEditor = forwardRef<AvatarEditor, ImageEditorProps>(
+  ({ url, borderRadius, width, height }, editorRef) => {
+    const [scale, setScale] = useState<number>();
+    const handleScale = (e: ChangeEvent<HTMLInputElement>) => {
+      const scale = parseFloat(e.target.value);
+      setScale(scale);
+    };
+    const { data } = useIpfsImage({ url: url ?? "" }, { enabled: !!url });
+    const image = data?.base64;
+    const { width: imageWidth, height: imageHeight } = data || {};
+    const w = borderRadius ? width : width || imageWidth;
+    const h = borderRadius ? height : height || imageHeight;
+    return (
+      <>
+        {image && (
+          <div style={{ margin: "2rem 0", maxWidth: "100%" }}>
+            <Dropzone noClick noKeyboard>
+              {({ getRootProps, getInputProps }) => (
+                <StyledCanvasWrapper {...getRootProps()}>
+                  <AvatarEditor
+                    image={image}
+                    ref={editorRef}
+                    width={w}
+                    height={h}
+                    scale={scale}
+                    borderRadius={borderRadius}
+                  />
+                  <input {...getInputProps()} />
+                </StyledCanvasWrapper>
+              )}
+            </Dropzone>
+            <Grid alignItems="center" justifyContent="center">
+              Zoom:
+              <input
+                name="scale"
+                type="range"
+                onChange={handleScale}
+                min={"0.1"}
+                max="2"
+                step="0.01"
+                defaultValue="1"
+              />
+            </Grid>
+          </div>
+        )}
+      </>
+    );
+  }
+);