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

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/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,9 @@ export function BaseCheckbox({
   text,
   theme,
   hideError,
+  className,
+  iconProps,
+  children,
   ...props
 }: BaseCheckboxProps) {
   const [field, meta, helpers] = useField(name);
@@ -30,19 +33,28 @@ 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>
+        {children || <b>{text}</b>}
       </CheckboxWrapper>
       <Error display={!hideError && displayError} message={errorMessage} />
     </>

package/src/components/form/CountrySelect.tsx

@@ -13,7 +13,7 @@ import Select, {
 import styled, { CSSProperties } from "styled-components";
 import { zIndex } from "../ui/zIndex";
 import Error from "./Error";
-import type { InputProps } from "./types";
+import type { BaseProps, SupportedReactSelectProps } from "./types";
 import { SelectDataProps } from "./types";
 import { theme as importedTheme } from "../../theme";
 import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
@@ -160,31 +160,32 @@ const PhoneWrapper = styled.div`
   }
 `;
 
-export type CountrySelectProps = InputProps & {
-  countries?: CountryCode[];
-  fieldValueIsCountryCode?: boolean; // if true, the field.value will be the countryCodeOrName, otherwise the country name
-  theme?: Partial<{
-    control: Partial<CSSProperties> &
-      Partial<{
-        hover: Partial<CSSProperties>;
-        focus: Partial<CSSProperties>;
-        error: Partial<CSSProperties>;
-      }>;
-    option: Partial<CSSProperties> &
-      Partial<{
-        selected: Partial<CSSProperties>;
-        disabled: Partial<CSSProperties>;
-        focus: Partial<CSSProperties>;
-        error: CSSProperties;
-      }>;
-    placeholder: Partial<CSSProperties> &
-      Partial<{ error: CSSObjectWithLabel }>;
-    input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
-    singleValue: Partial<CSSProperties> &
-      Partial<{ error: CSSObjectWithLabel }>;
-    menu: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
-  }>;
-};
+export type CountrySelectProps = BaseProps &
+  SupportedReactSelectProps & {
+    countries?: CountryCode[];
+    fieldValueIsCountryCode?: boolean; // if true, the field.value will be the countryCodeOrName, otherwise the country name
+    theme?: Partial<{
+      control: Partial<CSSProperties> &
+        Partial<{
+          hover: Partial<CSSProperties>;
+          focus: Partial<CSSProperties>;
+          error: Partial<CSSProperties>;
+        }>;
+      option: Partial<CSSProperties> &
+        Partial<{
+          selected: Partial<CSSProperties>;
+          disabled: Partial<CSSProperties>;
+          focus: Partial<CSSProperties>;
+          error: CSSProperties;
+        }>;
+      placeholder: Partial<CSSProperties> &
+        Partial<{ error: CSSObjectWithLabel }>;
+      input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+      singleValue: Partial<CSSProperties> &
+        Partial<{ error: CSSObjectWithLabel }>;
+      menu: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+    }>;
+  };
 type CountryName = string;
 export function CountrySelect({
   name,

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

@@ -125,23 +125,32 @@ export type FileUploadWrapperTheme = Partial<{
   error: Partial<{
     borderColor: CSSProperties["borderColor"];
   }>;
+  overrides: Partial<CSSProperties>;
 }>;
 export const FileUploadWrapper = styled.div<{
   $error: unknown;
+  $isPdfOnly?: boolean;
   theme: FileUploadWrapperTheme | undefined;
 }>`
   position: relative;
   overflow: hidden;
   display: flex;
-
-  align-items: center;
   justify-content: center;
-  flex-direction: column;
-
   padding: 0.5rem;
+  align-items: center;
 
-  width: 8rem;
-  height: 8rem;
+  ${({ $isPdfOnly }) =>
+    $isPdfOnly
+      ? css`
+          width: 100%;
+          flex-direction: row;
+          cursor: default;
+        `
+      : css`
+          width: 8rem;
+          height: 8rem;
+          flex-direction: column;
+        `}
 
   img {
     position: absolute;
@@ -194,7 +203,30 @@ export const FieldFileUpload = styled(FieldInput)`
   display: none;
 `;
 
-export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
+export const PdfOnlyLabel = styled.label<{ $disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1rem;
+  gap: 0.25rem;
+  border-radius: 32px;
+  padding: 0.656rem 1.25rem;
+  background: ${colors.lightGrey};
+  font-size: 0.875rem;
+  ${({ $disabled }) =>
+    $disabled
+      ? css`
+          cursor: not-allowed;
+        `
+      : css`
+          cursor: pointer;
+        `}
+`;
+
+export const FieldFileUploadWrapper = styled.div<{
+  $disabled: boolean;
+  $isPdfOnly?: boolean;
+}>`
   position: relative;
   display: inline-block;
   ${({ $disabled }) =>
@@ -206,7 +238,11 @@ export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
           cursor: pointer;
         `}
 
-  width: 8rem;
+  ${({ $isPdfOnly }) =>
+    !$isPdfOnly &&
+    css`
+      width: 8rem;
+    `}
 
   &:hover {
     [data-remove] {
@@ -367,6 +403,7 @@ export const CheckboxWrapper = styled.label<{
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
+  gap: 0.5rem;
 
   > input {
     &:disabled {
@@ -399,11 +436,11 @@ export const CheckboxWrapper = styled.label<{
     }
   }
 
-  > div,
-  > div svg {
+  > div:first-of-type,
+  > div:first-of-type svg {
     ${transition}
   }
-  > div {
+  > div:first-of-type {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -423,7 +460,6 @@ export const CheckboxWrapper = styled.label<{
       css`
         border-radius: ${theme?.borderRadius};
       `};
-    margin-right: 0.5rem;
   }
 
   > input {
@@ -459,7 +495,7 @@ export const CheckboxWrapper = styled.label<{
   ${({ $error, theme }) =>
     !checkIfValueIsEmpty($error) &&
     css`
-      > div {
+      > div:first-of-type {
         border: 1px solid ${theme?.error?.borderColor || colors.orange}};
         ${
           theme?.error?.backgroundColor &&

package/src/components/form/Select.tsx

@@ -11,14 +11,10 @@ import type { SelectDataProps, SelectProps } from "./types";
 export type { SelectProps } from "./types";
 const colors = theme.colors.light;
 
-const customStyles = (
+const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
   error: unknown,
   customTheme: SelectProps["theme"]
-): StylesConfig<
-  SelectDataProps<string>,
-  boolean,
-  GroupBase<SelectDataProps<string>>
-> => ({
+): StylesConfig<Option, boolean, GroupBase<Option>> => ({
   control: (provided, state: any) => {
     const before = state.selectProps.label
       ? {
@@ -101,7 +97,10 @@ const customStyles = (
   }
 });
 
-export default function SelectComponent<M extends boolean>({
+export default function SelectComponent<
+  M extends boolean,
+  Option extends Record<string, unknown> = SelectDataProps
+>({
   name,
   options,
   placeholder = "Choose...",
@@ -113,7 +112,7 @@ export default function SelectComponent<M extends boolean>({
   theme,
   isMulti,
   ...props
-}: SelectProps<M>) {
+}: SelectProps<M, Option>) {
   const [field, meta, helpers] = useField(name);
   const displayErrorMessage =
     meta.error && meta.touched && !errorMessage
@@ -126,13 +125,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) {
@@ -143,7 +143,7 @@ export default function SelectComponent<M extends boolean>({
   return (
     <>
       <Select
-        styles={customStyles(displayErrorMessage, theme)}
+        styles={customStyles<Option>(displayErrorMessage, theme)}
         {...field}
         {...props}
         isMulti={isMulti}