@bosonprotocol/react-kit 0.31.1 → 0.32.0-alpha.1

package/src/components/ui/ThemedButton.tsx

@@ -1,104 +1,11 @@
-import React, { ButtonHTMLAttributes, forwardRef, Fragment } from "react";
-import styled, { css, ThemeProvider } from "styled-components";
+import React, { ButtonHTMLAttributes, forwardRef } from "react";
 
-import { zIndex } from "./zIndex";
-import { Tooltip } from "../tooltip/Tooltip";
-import * as Styles from "./styles";
-import { Typography } from "./Typography";
 import { theme } from "../../theme";
-import { Loading } from "../Loading";
+import { BaseButton } from "../buttons/BaseButton";
 import { ButtonSize } from "./buttonSize";
 
 const colors = theme.colors.light;
 
-const BaseButton = styled.button<{
-  size: IButton["size"];
-  fill: IButton["fill"];
-}>`
-  ${() => Styles.button};
-  ${(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;
-  color: ${(props) => props.theme.color || "#000000"};
-  background-color: ${(props) => props.theme.background || "transparent"};
-  svg {
-    stroke: ${(props) => props.theme.color || "#000000"};
-  }
-  ${(props) =>
-    props.fill
-      ? css`
-          width: 100%;
-        `
-      : ""};
-  ${(props) =>
-    props.theme.hover &&
-    css`
-      &:hover:not(:disabled) {
-        background-color: ${props.theme.hover.background};
-        ${props.theme.hover.color &&
-        css`
-          color: ${props.theme.hover.color} !important;
-          svg {
-            fill: ${props.theme.hover.color} !important;
-            line {
-              stroke: ${props.theme.hover.color} !important;
-            }
-            polyline {
-              stroke: ${props.theme.hover.color} !important;
-            }
-            path {
-              stroke: ${props.theme.hover.color} !important;
-            }
-          }
-        `};
-        ${props.theme.hover.borderColor &&
-        css`
-          border-color: ${props.theme.hover.borderColor};
-        `};
-      }
-    `}
-  ${(props) =>
-    props.theme.padding
-      ? css`
-          padding: ${props.theme.padding} !important;
-        `
-      : ""}
-
-  ${(props) =>
-    props.theme.disabled
-      ? css`
-          &:disabled {
-            background-color: ${props.theme.disabled.background ||
-            "transparent"};
-            color: ${props.theme.disabled.color || colors.darkGrey};
-            border-color: transparent;
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
-        `
-      : css`
-          &:disabled {
-            background-color: ${colors.lightGrey};
-            color: ${colors.darkGrey};
-            border-color: transparent;
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
-        `};
-`;
-
-const ChildWrapperButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  position: relative;
-  z-index: ${zIndex.Button};
-
-  ${() => Styles.buttonText};
-`;
-
 const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
   return {
     primary: {
@@ -325,57 +232,13 @@ export type IButton = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 
 const ThemedButton = forwardRef<HTMLButtonElement, IButton>(
-  (
-    {
-      children,
-      onClick,
-      size = "regular",
-      themeVal = "primary",
-      type = "button",
-      step = 0,
-      fill = false,
-      isLoading = false,
-      tooltip = "",
-      withBosonStyle = false,
-      ...rest
-    },
-    ref
-  ) => {
-    const Wrapper = tooltip !== "" && rest?.disabled ? Tooltip : Fragment;
-    const wrapperParams =
-      tooltip !== "" && rest?.disabled ? { wrap: false, content: tooltip } : {};
+  ({ themeVal = "primary", withBosonStyle = false, ...rest }, ref) => {
     return (
-      <>
-        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-        {/* @ts-ignore */}
-        <ThemeProvider theme={allThemes({ withBosonStyle })[themeVal]}>
-          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          {/* @ts-ignore */}
-          <Wrapper {...wrapperParams}>
-            <BaseButton
-              onClick={onClick}
-              type={type}
-              size={size}
-              fill={fill ? fill : undefined}
-              {...rest}
-              ref={ref}
-            >
-              {isLoading ? (
-                <Loading />
-              ) : (
-                <ChildWrapperButton data-child-wrapper-button>
-                  {children}
-                  {step !== 0 && (
-                    <Typography>
-                      <small>Step {step}</small>
-                    </Typography>
-                  )}
-                </ChildWrapperButton>
-              )}
-            </BaseButton>
-          </Wrapper>
-        </ThemeProvider>
-      </>
+      <BaseButton
+        {...rest}
+        ref={ref}
+        theme={allThemes({ withBosonStyle })[themeVal]}
+      />
     );
   }
 );

package/src/components/ui/styles.ts

@@ -33,8 +33,11 @@ export const clamp = css`
   -webkit-box-orient: vertical;
 `;
 export const boxShadow = css`
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 0px 8px rgba(0, 0, 0, 0.05),
-    0px 0px 16px rgba(0, 0, 0, 0.05), 0px 0px 32px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0px 0px 4px rgba(0, 0, 0, 0.05),
+    0px 0px 8px rgba(0, 0, 0, 0.05),
+    0px 0px 16px rgba(0, 0, 0, 0.05),
+    0px 0px 32px rgba(0, 0, 0, 0.05);
 `;
 
 export const text = css`

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

@@ -36,7 +36,9 @@ export const initalState: ConvertionRateContextType = {
     type: null,
     tokens: null,
     rates:
-      process.env.NODE_ENV === "development"
+      process.env.NODE_ENV === "development" ||
+      // @ts-expect-error import.meta.env only exists in vite environments
+      import.meta?.env?.DEV
         ? MOCK_RATES
         : getItemFromStorage("convertionRates", null),
     fixed: 20,

package/src/components/widgets/finance/convertion-rate/useUniswapPools.ts

@@ -100,7 +100,10 @@ export interface IPool {
 
 export function useUniswapPools({ tokens }: Props) {
   const tokensWithoutBoson = tokens?.filter((t) => t.symbol !== "BOSON") || [];
-  const isDev = process.env.NODE_ENV === "development";
+  const isDev =
+    process.env.NODE_ENV === "development" ||
+    // @ts-expect-error import.meta.env only exists in vite environments
+    import.meta?.env?.DEV;
   const queries = generateQuery(tokensWithoutBoson, false);
   const swapQueries = generateQuery(tokensWithoutBoson, true);
 

package/src/hooks/tokenGated/useCheckTokenGatedOffer.ts

@@ -3,8 +3,9 @@ import { utils } from "ethers";
 import { useEffect, useState } from "react";
 import { Offer } from "../../types/offer";
 import { useCoreSDKWithContext } from "../core-sdk/useCoreSdkWithContext";
-import { BosonSnapshotGate__factory } from "./BosonSnapshotGate/typechain";
+// import { BosonSnapshotGate__factory } from "./BosonSnapshotGate/typechain";
 import { useAccount, useSigner } from "../connection/connection";
+const importedTypechain = import("./BosonSnapshotGate/typechain");
 
 interface Props {
   commitProxyAddress?: string | undefined;
@@ -32,10 +33,9 @@ export default function useCheckTokenGatedOffer({
         }
 
         try {
-          const proxyContract = BosonSnapshotGate__factory.connect(
-            commitProxyAddress,
-            signer
-          );
+          const proxyContract = (
+            await importedTypechain
+          ).BosonSnapshotGate__factory.connect(commitProxyAddress, signer);
           const [owned, used] = await proxyContract.checkSnapshot(
             condition.minTokenId,
             utils.getAddress(address)

package/src/hooks/useCurrentSellers.ts

@@ -259,15 +259,15 @@ export function useCurrentSellers(
   const sellerType: string[] | string[][] = resultById?.data
     ? resultById.data.map((d) => Object.keys(d))
     : resultByLensId?.data
-    ? Object.keys(resultByLensId.data)
-    : resultByAddress?.data?.sellerType || [];
+      ? Object.keys(resultByLensId.data)
+      : resultByAddress?.data?.sellerType || [];
 
   const sellerIdsToQuery: string[] =
     sellerAddressType === "SELLER_IDS"
       ? (sellerAddress as string[])
       : sellerAddressType === "LENS_TOKEN_ID" && resultByLensId?.data?.sellerId
-      ? [resultByLensId?.data.sellerId]
-      : [];
+        ? [resultByLensId?.data.sellerId]
+        : [];
   const enableSellerById = !!sellerIdsToQuery?.length;
   const { data: sellers2, refetch: refetchFetchSellers } = fetchSellers(
     sellerIdsToQuery,
@@ -360,10 +360,10 @@ export function useCurrentSellers(
       resultByAddress.data
         ? resultByAddress.data.sellers.map((seller) => seller.id)
         : sellerAddressType === "SELLER_IDS"
-        ? Array.isArray(sellerAddress)
-          ? sellerAddress
-          : [sellerAddress]
-        : []
+          ? Array.isArray(sellerAddress)
+            ? sellerAddress
+            : [sellerAddress]
+          : []
     ).filter((sellerId) => !!sellerId) as string[];
   }, [resultByAddress.data, sellerAddress, sellerAddressType]);
   return {

package/src/index.tsx

@@ -6,6 +6,7 @@ export { default as ThemedButton, IButton } from "./components/ui/ThemedButton";
 export * from "./components/ui/zIndex";
 export * from "./components/ui/buttonSize";
 export * from "./components/buttons/Button";
+export * from "./components/buttons/BaseButton";
 export * from "./components/buttons/CommitButtonView";
 export * from "./components/cta/exchange/BatchCompleteButton";
 export * from "./components/cta/exchange/CancelButton";
@@ -58,6 +59,7 @@ export * from "./components/ui/Grid";
 export * from "./components/ui/GridContainer";
 export * from "./components/ui/Typography";
 export * from "./components/ui/MuteButton";
+export * from "./components/form";
 export * from "./lib/magicLink/logout";
 export * from "./lib/magicLink/provider";
 export * from "./lib/const/networks";

package/src/lib/config/config.ts

@@ -2,7 +2,11 @@ import { getRpcUrls } from "../const/networks";
 
 const magicLinkKey =
   process.env.STORYBOOK_REACT_APP_MAGIC_API_KEY ||
-  process.env.REACT_APP_MAGIC_API_KEY;
+  process.env.REACT_APP_MAGIC_API_KEY ||
+  // @ts-expect-error import.meta.env only exists in vite environments
+  import.meta?.env.STORYBOOK_REACT_APP_MAGIC_API_KEY ||
+  // @ts-expect-error import.meta.env only exists in vite environments
+  import.meta?.env.REACT_APP_MAGIC_API_KEY;
 if (!magicLinkKey) {
   throw new Error(
     "STORYBOOK_REACT_APP_MAGIC_API_KEY/REACT_APP_MAGIC_API_KEY is not defined"
@@ -10,7 +14,11 @@ if (!magicLinkKey) {
 }
 const infuraKey =
   process.env.STORYBOOK_REACT_APP_INFURA_KEY ||
-  process.env.REACT_APP_INFURA_KEY;
+  process.env.REACT_APP_INFURA_KEY ||
+  // @ts-expect-error import.meta.env only exists in vite environments
+  import.meta?.env.STORYBOOK_REACT_APP_INFURA_KEY ||
+  // @ts-expect-error import.meta.env only exists in vite environments
+  import.meta?.env.REACT_APP_INFURA_KEY;
 if (!infuraKey) {
   throw new Error(
     "STORYBOOK_REACT_APP_INFURA_KEY/REACT_APP_INFURA_KEY is not defined"

package/src/lib/const/networks.ts

@@ -179,7 +179,8 @@ export const getRpcUrls = (infuraKey: string) => ({
     `https://polygon-mumbai.infura.io/v3/${infuraKey}`,
     ...FALLBACK_URLS[ChainId.POLYGON_MUMBAI]
   ],
-  80002: [ // AMOY
+  80002: [
+    // AMOY
     `https://polygon-amoy.infura.io/v3/${infuraKey}`,
     ...FALLBACK_URLS[80002]
   ],

package/src/lib/uniswap/validateTokenList.ts

@@ -1,7 +1,9 @@
 import type { TokenList } from "@uniswap/token-lists";
 import type { ValidateFunction } from "ajv";
-import validatorImportList from "./__generated__/validateTokenList";
-import validateTokens from "./__generated__/validateTokens";
+// import validateTokens from "./__generated__/validateTokens";
+const importValidateTokens = import("./__generated__/validateTokens");
+// import validatorImportList from "./__generated__/validateTokenList";
+const importValidatorImportList = import("./__generated__/validateTokenList");
 
 enum ValidationSchema {
   LIST = "list",
@@ -30,13 +32,15 @@ async function validate(
       // validatorImport = await import(
       //   "lib/uniswap/__generated__/validateTokenList"
       // );
-      validatorImport = validatorImportList;
+      // validatorImport = validatorImportList;
+      validatorImport = await importValidatorImportList;
       break;
     case ValidationSchema.TOKENS:
       // validatorImport = await import(
       //   "lib/uniswap/__generated__/validateTokens"
       // );
-      validatorImport = validateTokens;
+      // validatorImport = validateTokens;
+      validatorImport = await importValidateTokens;
       break;
     default:
       throw new Error("No validation function specified for token list schema");
@@ -45,8 +49,8 @@ async function validate(
     import("ajv")
     // validatorImport
   ]);
-  // const validator = validatorModule.default as ValidateFunction;
-  const validator = validatorImport as ValidateFunction;
+  const validator = validatorImport.default as ValidateFunction;
+  // const validator = validatorImport as ValidateFunction;
   if (validator?.(data)) {
     return data;
   }

package/src/stories/buttons/button.stories.tsx

@@ -1,88 +1,110 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
+import { fn } from "@storybook/test";
 import { Button } from "../../components/buttons/Button";
+import React from "react";
+import { Meta } from "@storybook/react";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: "Visual Components/Buttons/Button",
-  component: Button
-} as ComponentMeta<typeof Button>;
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+  argTypes: {
+    disabled: { control: "boolean" },
+    size: {
+      control: "select",
+      options: ["small", "regular", "large"]
+    },
+    children: { control: "text" },
+    tooltip: { control: "text" }
+  },
+  decorators: [
+    (Story) => {
+      return <Story />;
+    }
+  ]
+} satisfies Meta<typeof Button>;
 
 const BASE_ARGS = {
   children: "Button Text",
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClick: () => {},
-  size: "regular"
+  size: "regular",
+  tooltip: "tooltip shown when disabled only"
 } as const;
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => (
-  <Button {...BASE_ARGS} {...args} />
-);
-
-export const PrimaryFill: ComponentStory<typeof Button> = Template.bind({});
-
-export const PrimaryInverted: ComponentStory<typeof Button> = Template.bind({});
-
-export const SecondaryFill: ComponentStory<typeof Button> = Template.bind({});
-
-export const SecondaryInverted: ComponentStory<typeof Button> = Template.bind(
-  {}
-);
-
-export const AccentFill: ComponentStory<typeof Button> = Template.bind({});
-
-export const AccentInverted: ComponentStory<typeof Button> = Template.bind({});
-
-export const Disabled: ComponentStory<typeof Button> = Template.bind({});
-
-export const Loading: ComponentStory<typeof Button> = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
-PrimaryFill.args = {
-  disabled: false,
-  loading: false,
-  variant: "primaryFill"
+export const PrimaryFill = {
+  args: {
+    ...BASE_ARGS,
+    disabled: false,
+    loading: false,
+    variant: "primaryFill"
+  }
 };
 
-PrimaryInverted.args = {
-  disabled: false,
-  loading: false,
-  variant: "primaryInverted"
+export const PrimaryInverted = {
+  args: {
+    ...BASE_ARGS,
+    disabled: false,
+    loading: false,
+    variant: "primaryInverted"
+  }
 };
 
-SecondaryFill.args = {
-  disabled: false,
-  loading: false,
-  variant: "secondaryFill"
+export const SecondaryFill = {
+  args: {
+    ...BASE_ARGS,
+    disabled: false,
+    loading: false,
+    variant: "secondaryFill"
+  }
 };
 
-SecondaryInverted.args = {
-  disabled: false,
-  loading: false,
-  variant: "secondaryInverted"
+export const SecondaryInverted = {
+  args: {
+    ...BASE_ARGS,
+    disabled: false,
+    loading: false,
+    variant: "secondaryInverted"
+  }
 };
 
-AccentFill.args = {
-  disabled: false,
-  loading: false,
-  variant: "accentFill"
+export const AccentFill = {
+  args: {
+    ...BASE_ARGS,
+    disabled: false,
+    loading: false,
+    variant: "accentFill"
+  }
 };
 
-AccentInverted.args = {
-  disabled: false,
-  loading: false,
-  variant: "accentInverted"
+export const AccentInverted = {
+  args: {
+    ...BASE_ARGS,
+    disabled: false,
+    loading: false,
+    variant: "accentInverted"
+  }
 };
 
-Disabled.args = {
-  disabled: true,
-  loading: false,
-  variant: "primaryFill"
+export const Disabled = {
+  args: {
+    ...BASE_ARGS,
+    disabled: true,
+    loading: false,
+    variant: "primaryFill"
+  }
 };
 
-Loading.args = {
-  disabled: false,
-  loading: true,
-  variant: "primaryFill"
+export const Loading = {
+  args: {
+    ...BASE_ARGS,
+    disabled: false,
+    loading: true,
+    variant: "primaryFill"
+  }
 };

package/src/stories/form/Input.stories.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Input } from "../../components/form";
+import { Formik } from "formik";
+import type { Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
+const inputWithErrors = "With error";
+const defaultHeightSize = "regular";
+const inputName = "test";
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Inputs/Input",
+  component: Input,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    disabled: { control: "boolean" },
+    heightSize: {
+      control: "select",
+      options: ["small", "regular", "large"]
+    },
+    isClearable: { control: "boolean" }
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  decorators: [
+    (Story, { name }) => {
+      return (
+        <Formik<{ [inputName]: unknown }>
+          onSubmit={() => {
+            //
+          }}
+          initialErrors={
+            name === inputWithErrors
+              ? { [inputName]: "Input error before typing!" }
+              : {}
+          }
+          initialValues={{ [inputName]: "" }}
+          initialTouched={{ [inputName]: true }}
+        >
+          <Story />
+        </Formik>
+      );
+    }
+  ] satisfies Meta<typeof Input>["decorators"]
+} satisfies Meta<typeof Input>;
+
+export const Simple = {
+  args: {
+    name: inputName,
+    placeholder: "this is a placeholder",
+    heightSize: defaultHeightSize
+  }
+};
+
+export const InputWithError = {
+  name: "With error",
+  args: {
+    name: inputName,
+    placeholder: "this is a placeholder",
+    heightSize: defaultHeightSize
+  }
+};