@bosonprotocol/react-kit 0.40.0-alpha.9 → 0.40.1-alpha.0

package/src/components/buttons/BaseButton.tsx

@@ -40,7 +40,7 @@ const ButtonWithThemeProps = styled.button<ButtonWithThemePropsType>`
     ${(props) =>
       props.theme.svg &&
       css`
-        stroke: ${(props) => props.theme?.svg.stroke};
+        stroke: ${() => props.theme?.svg?.stroke};
         ${props.theme.svg.fill &&
         css`
           fill: ${props.theme.svg.fill};

package/src/components/chat/ChatProvider/ChatContext.ts

@@ -1,15 +1,16 @@
 import { BosonXmtpClient } from "@bosonprotocol/chat-sdk";
 import { createContext, Dispatch, SetStateAction, useContext } from "react";
+import { AuthorityIdEnvName } from "./const";
 
 export const Context = createContext<{
   bosonXmtp: BosonXmtpClient | undefined;
   initialize: Dispatch<SetStateAction<void>>;
-  chatEnvName: string;
+  chatEnvName: AuthorityIdEnvName;
   isInitializing: boolean;
 }>({
   bosonXmtp: undefined,
   initialize: () => console.log("initialize has not been defined"),
-  chatEnvName: "",
+  chatEnvName: "" as AuthorityIdEnvName,
   isInitializing: false
 });
 

package/src/components/chat/ChatProvider/ChatProvider.tsx

@@ -4,7 +4,7 @@ import { useCoreSDKWithContext } from "../../../hooks/core-sdk/useCoreSdkWithCon
 import { useEnvContext } from "../../environment/EnvironmentContext";
 
 import { Context } from "./ChatContext";
-import { getChatEnvName } from "./const";
+import { AuthorityIdEnvName, getChatEnvName } from "./const";
 import { useSigner } from "../../../hooks/connection/connection";
 
 interface Props {
@@ -16,7 +16,9 @@ export default function ChatProvider({ children }: Props) {
   const [initialize, setInitialized] = useState<number>(0);
   const [isLoading, setLoading] = useState<boolean>(false);
   const [bosonXmtp, setBosonXmtp] = useState<BosonXmtpClient>();
-  const [chatEnvName, setChatEnvName] = useState<string>("undefined");
+  const [chatEnvName, setChatEnvName] = useState<AuthorityIdEnvName>(
+    "undefined" as AuthorityIdEnvName
+  );
   const coreSDK = useCoreSDKWithContext();
   const { envName } = useEnvContext();
   useEffect(() => {

package/src/components/chat/ChatProvider/const.ts

@@ -1,7 +1,10 @@
 import { ContractAddresses } from "@bosonprotocol/common";
 import { EnvironmentType } from "@bosonprotocol/core-sdk";
+import { BosonXmtpClient } from "@bosonprotocol/chat-sdk";
+
+export type AuthorityIdEnvName = ConstructorParameters<typeof BosonXmtpClient>[2];
 
 export const getChatEnvName = (
   envName: EnvironmentType,
   contracts: ContractAddresses
-) => `${envName}-${contracts.protocolDiamond}`;
+) => `${envName}-${contracts.protocolDiamond}` as AuthorityIdEnvName;

package/src/components/cta/funds/DepositFundsButton.tsx

@@ -64,7 +64,7 @@ export const DepositFundsButton = withQueryClientProvider(
           coreSdk.depositFunds(accountId, amountToDeposit, exchangeToken),
         signMetaTxFn: () =>
           coreSdk.signMetaTxDepositFunds({
-            sellerId: accountId,
+            entityId: accountId,
             fundsTokenAddress: exchangeToken,
             fundsAmount: amountToDeposit,
             nonce: Date.now()

package/src/components/form/ClearButton.tsx

@@ -28,12 +28,14 @@ export const ClearButton = styled(CrossIcon)`
   margin: 0 5px;
   cursor: pointer;
   display: inline-block;
-  fill: ${(props) => props.theme?.fill || "#cccccc"};
+  fill: ${(props) => (props.theme as ClearButtonTheme)?.fill || "#cccccc"};
   line-height: 1;
-  stroke: ${(props) => props.theme?.stroke || "#cccccc"};
+  stroke: ${(props) => (props.theme as ClearButtonTheme)?.stroke || "#cccccc"};
   stroke-width: 0;
   &:hover * {
-    stroke: ${(props) => props.theme?.hover?.stroke || "#999999"};
-    fill: ${(props) => props.theme?.hover?.fill || "#999999"};
+    stroke: ${(props) =>
+      (props.theme as ClearButtonTheme)?.hover?.stroke || "#999999"};
+    fill: ${(props) =>
+      (props.theme as ClearButtonTheme)?.hover?.fill || "#999999"};
   }
 `;

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

@@ -96,35 +96,35 @@ export const FieldInput = styled.input<{
     !checkIfValueIsEmpty($error) &&
     css`
       border: 1px solid
-        ${(props) => props.theme?.error?.borderColor || colors.orange};
+        ${(props) => (props.theme as InputTheme)?.error?.borderColor || colors.orange};
       &:not(:disabled) {
         &:hover {
           border: 1px solid
             ${(props) =>
-              props.theme?.error?.hover?.borderColor || colors.orange};
+              (props.theme as InputTheme)?.error?.hover?.borderColor || colors.orange};
         }
       }
       &:not(:disabled) {
         &:focus {
           border: 1px solid
             ${(props) =>
-              props.theme?.error?.focus?.borderColor || colors.greyLight};
+              (props.theme as InputTheme)?.error?.focus?.borderColor || colors.greyLight};
           caret-color: ${(props) =>
-            props.theme?.error?.focus?.caretColor || colors.orange};
+            (props.theme as InputTheme)?.error?.focus?.caretColor || colors.orange};
         }
       }
       &::placeholder {
         color: ${(props) =>
-          props.theme?.error?.placeholder?.color || colors.orange};
+          (props.theme as InputTheme)?.error?.placeholder?.color || colors.orange};
         opacity: 1;
       }
       &:-ms-input-placeholder {
         color: ${(props) =>
-          props.theme?.error?.placeholder?.color || colors.orange};
+          (props.theme as InputTheme)?.error?.placeholder?.color || colors.orange};
       }
       &::-ms-input-placeholder {
         color: ${(props) =>
-          props.theme?.error?.placeholder?.color || colors.orange};
+          (props.theme as InputTheme)?.error?.placeholder?.color || colors.orange};
       }
     `};
 `;
@@ -210,7 +210,7 @@ export const FileUploadWrapper = styled.div<{
   &:focus,
   &:hover {
     border: 1px solid
-      ${({ theme }) => theme?.hover?.borderColor || colors.greyLight};
+      ${({ theme }) => (theme as InputTheme)?.hover?.borderColor || colors.greyLight};
   }
 
   /* prettier-ignore */
@@ -320,9 +320,9 @@ export const FieldTextArea = styled.textarea<{ $error: any }>`
   padding: 1rem;
   gap: 0.5rem;
   font-family: inherit;
-  background: ${(props) => props.theme?.background || "transparent"};
-  border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
-  border-radius: ${(props) => props.theme?.borderRadius || 0}px;
+  background: ${(props) => (props.theme as InputTheme)?.background || "transparent"};
+  border: 1px solid ${(props) => (props.theme as InputTheme)?.borderColor || colors.border};
+  border-radius: ${(props) => (props.theme as InputTheme)?.borderRadius || 0}px;
   outline: none;
 
   ${transition}
@@ -331,8 +331,8 @@ export const FieldTextArea = styled.textarea<{ $error: any }>`
     &:focus,
     &:hover {
       border: 1px solid
-        ${(props) => props.theme?.hover?.borderColor || colors.greyLight};
-      caret-color: ${(props) => props.theme?.focus?.caretColor || "initial"};
+        ${(props) => (props.theme as InputTheme)?.hover?.borderColor || colors.greyLight};
+      caret-color: ${(props) => (props.theme as InputTheme)?.focus?.caretColor || "initial"};
     }
   }
 
@@ -345,35 +345,35 @@ export const FieldTextArea = styled.textarea<{ $error: any }>`
     !checkIfValueIsEmpty($error) &&
     css`
       border: 1px solid
-        ${(props) => props.theme?.error?.borderColor || colors.orange};
+        ${(props) => (props.theme as InputTheme)?.error?.borderColor || colors.orange};
       &:not(:disabled) {
         &:hover {
           border: 1px solid
             ${(props) =>
-              props.theme?.error?.hover?.borderColor || colors.orange};
+              (props.theme as InputTheme)?.error?.hover?.borderColor || colors.orange};
         }
       }
       &:not(:disabled) {
         &:focus {
           border: 1px solid
             ${(props) =>
-              props.theme?.error?.focus?.borderColor || colors.greyLight};
+              (props.theme as InputTheme)?.error?.focus?.borderColor || colors.greyLight};
           caret-color: ${(props) =>
-            props.theme?.error?.focus?.caretColor || colors.orange};
+            (props.theme as InputTheme)?.error?.focus?.caretColor || colors.orange};
         }
       }
       &::placeholder {
         color: ${(props) =>
-          props.theme?.error?.placeholder?.color || colors.orange};
+          (props.theme as InputTheme)?.error?.placeholder?.color || colors.orange};
         opacity: 1;
       }
       &:-ms-input-placeholder {
         color: ${(props) =>
-          props.theme?.error?.placeholder?.color || colors.orange};
+          (props.theme as InputTheme)?.error?.placeholder?.color || colors.orange};
       }
       &::-ms-input-placeholder {
         color: ${(props) =>
-          props.theme?.error?.placeholder?.color || colors.orange};
+          (props.theme as InputTheme)?.error?.placeholder?.color || colors.orange};
       }
     `}
 `;

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

@@ -1,5 +1,6 @@
 import styled, { CSSProperties, css } from "styled-components";
 import { colors } from "../../../theme";
+import { InputTheme } from "..";
 
 export const TagContainer = styled.div<{
   $gap: CSSProperties["gap"];
@@ -37,7 +38,7 @@ export const TagWrapper = styled.div`
   display: inline-block;
   padding: 0.5em 0.75em;
   margin-top: 1rem;
-  border-radius: ${(props) => props.theme.borderRadius || 0}px;
+  border-radius: ${(props) => (props.theme as InputTheme).borderRadius || 0}px;
   .text {
     word-break: break-word;
   }

package/src/components/styles/ResetStylesForNonWidgets.tsx

@@ -12,7 +12,8 @@ export const cssVars = css`
     Object.keys(theme)
       .filter((key) => key.startsWith("--"))
       .map((key) => {
-        const value = theme[key];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value = (theme as any)[key];
         if (!value) {
           return null;
         }

package/src/components/ui/loading/Loading.tsx

@@ -41,7 +41,8 @@ const LoadingStyle = styled.span.attrs({ className: "loading" })<{
   min-width: ${({ $size }) => $size}rem;
   border: ${({ $borderWidthPx }) => $borderWidthPx}px solid
     ${({ theme, $color }) =>
-      theme?.colors?.light?.accent || $color || "#000000"};
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (theme as any)?.colors?.light?.accent || $color || "#000000"};
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;

package/src/lib/signer/externalSigner.ts

@@ -38,13 +38,7 @@ const getDefaultHandleSignerFunction = <R>({
       }
     }
     window.addEventListener("message", onMessageReceived);
-    window.parent.postMessage(
-      {
-        function: functionName,
-        args
-      },
-      parentOrigin
-    );
+    window.parent.postMessage({ function: functionName, args }, parentOrigin);
   });
 };
 
@@ -55,6 +49,7 @@ const getExternalWeb3LibAdapterListener = ({
 }): Web3LibAdapter => {
   return {
     uuid: crypto.randomUUID(),
+    getCurrentTimeMs: () => Promise.resolve(Date.now()),
     getSignerAddress: (): Promise<string> => {
       return getDefaultHandleSignerFunction<string>({
         parentOrigin,
@@ -145,10 +140,7 @@ const getExternalWeb3LibAdapterListener = ({
         }
         window.addEventListener("message", onMessageReceived);
         window.parent.postMessage(
-          {
-            function: functionName,
-            args: [transactionRequest]
-          },
+          { function: functionName, args: [transactionRequest] },
           parentOrigin
         );
       });
@@ -289,10 +281,7 @@ const getExternalSignerListener = ({
         }
         window.addEventListener("message", onMessageReceived);
         window.parent.postMessage(
-          {
-            function: functionName,
-            args: [transactionRequest]
-          },
+          { function: functionName, args: [transactionRequest] },
           parentOrigin
         );
       });
@@ -330,11 +319,7 @@ const getExternalSignerListener = ({
     ): ReturnType<Signer["populateTransaction"]> => {
       return getDefaultHandleSignerFunction<
         ReturnType<Signer["populateTransaction"]>
-      >({
-        parentOrigin,
-        functionName: "populateTransaction",
-        args
-      });
+      >({ parentOrigin, functionName: "populateTransaction", args });
     },
     estimateGas: async (...args: any[]): ReturnType<Signer["estimateGas"]> => {
       return getDefaultHandleSignerFunction<ReturnType<Signer["estimateGas"]>>({
@@ -353,11 +338,7 @@ const getExternalSignerListener = ({
     _checkProvider: async (...args: any[]): Promise<void> => {
       return getDefaultHandleSignerFunction<
         ReturnType<Signer["_checkProvider"]>
-      >({
-        parentOrigin,
-        functionName: "_checkProvider",
-        args
-      });
+      >({ parentOrigin, functionName: "_checkProvider", args });
     },
     connect: (..._args: any[]): ReturnType<Signer["connect"]> => {
       // TODO: how can we implement this?