chore: upgrade react-kit and chat-sdk (replace PR #1142)

package.json

@@ -47,8 +47,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.1",
-    "@bosonprotocol/chat-sdk": "^1.3.1-alpha.16",
-    "@bosonprotocol/react-kit": "^0.39.2-alpha.3",
+    "@bosonprotocol/chat-sdk": "^1.4.1-alpha.7",
+    "@bosonprotocol/react-kit": "^0.41.0-alpha.4",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",
@@ -93,7 +93,7 @@
     "@web3-react/network": "^8.2.3",
     "@web3-react/walletconnect": "^8.2.3",
     "@web3-react/walletconnect-v2": "^8.5.1",
-    "@xmtp/browser-sdk": "^2.0.3",
+    "@xmtp/browser-sdk": "^4.3.0",
     "ajv": "^8.12.0",
     "array-move": "^4.0.0",
     "assert": "^2.0.0",
@@ -185,6 +185,7 @@
     "@types/ua-parser-js": "^0.7.36",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-legacy": "^6.1.1",
     "@vitejs/plugin-react": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
     "commander": "^9.4.1",
@@ -210,6 +211,7 @@
     "typescript-coverage-report": "^0.8.0",
     "vite": "^6.3.6",
     "vite-plugin-svgr": "^4.5.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
     "webpack-bundle-analyzer": "^4.6.1"
   },
@@ -232,6 +234,7 @@
     "npm": "10.2.4"
   },
   "overrides": {
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "protobufjs": "^7.5.0"
   }
 }

src/components/animatedDropdown/index.tsx

@@ -15,7 +15,7 @@ export default function AnimatedDropdown({
     // On initial render, `height` will be undefined as ref has not been set yet.
     // If the dropdown should be open, we fallback to `auto` to avoid flickering.
     // Otherwise, we just animate between actual height (when open) and 0 (when closed).
-    height: open ? height ?? "auto" : 0,
+    height: open ? (height ?? "auto") : 0,
     config: {
       mass: 1.2,
       tension: 300,

src/components/detail/DetailWidget/CommitDetailWidget.tsx

@@ -195,7 +195,8 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
               offer.exchangeToken.address,
               constants.MaxInt256,
               {
-                spender: commitProxyAddress
+                spender: commitProxyAddress,
+                returnTxInfo: false
               }
             );
             await tx.wait();

src/components/header/AnnouncementBanner.tsx

@@ -8,9 +8,9 @@ const Wrapper = styled.a`
   justify-content: center;
   align-items: center;
   text-align: center;
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-    backdrop-filter;
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.2s;
   padding: 0.5rem;

src/components/modal/components/Chat/MakeProposal/steps/MakeAProposalStep/RefundRequest.tsx

@@ -146,12 +146,12 @@ export default function RefundRequest({ exchange, iAmTheBuyer }: Props) {
                 if (isNaN(valueAsNumber)) {
                   return;
                 }
-                const valueInDecimals: string = formatIntValueToDecimals(
-                  BigNumber.from(inEscrow)
-                    .mul(valueAsNumber * 1000)
-                    .div(100 * 1000)
-                    .toString()
-                );
+                const valueAsString = BigNumber.from(inEscrow)
+                  .mul(valueAsNumber * 1000)
+                  .div(100 * 1000)
+                  .toString();
+                const valueInDecimals: string =
+                  formatIntValueToDecimals(valueAsString);
                 setFieldValue(
                   FormModel.formFields.refundAmount.name,
                   valueInDecimals,

src/components/modal/components/Chat/ResolveDisputeModal.tsx

@@ -4,7 +4,7 @@ import {
   MessageType,
   ThreadId,
   version
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+} from "@bosonprotocol/chat-sdk";
 import { TransactionResponse } from "@bosonprotocol/common";
 import { CoreSDK, hooks, Provider, subgraph } from "@bosonprotocol/react-kit";
 import {

src/components/modal/components/Chat/components/EscalateModal/steps/EscalateStepTwo.tsx

@@ -3,7 +3,7 @@ import {
   MessageType,
   ThreadId,
   version
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+} from "@bosonprotocol/chat-sdk";
 import { TransactionResponse } from "@bosonprotocol/common";
 import { CoreSDK, hooks, Provider, subgraph } from "@bosonprotocol/react-kit";
 import {

src/components/modal/components/Chat/components/InitializeChat.tsx

@@ -58,8 +58,8 @@ export default function InitializeChat({ isError = false, message }: Props) {
         >
           {isError
             ? `Chat initialization failed, please try again`
-            : message ??
-              `To proceed you must first initialize your chat client`}
+            : (message ??
+              `To proceed you must first initialize your chat client`)}
         </Typography>
       </Grid>
       <div>

src/components/modal/components/Profile/utils.ts

@@ -62,10 +62,10 @@ export function buildProfileFromMetadata(
     ? getLensEmail(lensProfile) || getMetadataEmail(metadata) || ""
     : getMetadataEmail(metadata) || "";
   const profileDataFromMetadata: CreateProfile = {
-    name: isLens ? getLensName(lensProfile) ?? "" : metadata?.name ?? "",
+    name: isLens ? (getLensName(lensProfile) ?? "") : (metadata?.name ?? ""),
     description: isLens
-      ? getLensDescription(lensProfile) ?? ""
-      : metadata?.description ?? "",
+      ? (getLensDescription(lensProfile) ?? "")
+      : (metadata?.description ?? ""),
     email,
     legalTradingName: metadata?.legalTradingName ?? undefined,
     website: metadata?.website ?? "",

src/components/modal/components/RetractDisputeModal.tsx

@@ -3,7 +3,7 @@ import {
   MessageType,
   ThreadId,
   version
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+} from "@bosonprotocol/chat-sdk";
 import { TransactionResponse } from "@bosonprotocol/common";
 import { CoreSDK, hooks, Provider, subgraph } from "@bosonprotocol/react-kit";
 import {

src/components/product/ProductImages.tsx

@@ -121,7 +121,7 @@ export default function ProductImages({ onChangeOneSetOfImages }: Props) {
             }
           ) || []),
       ...(isPhygital
-        ? values.productDigital?.bundleItems
+        ? (values.productDigital?.bundleItems
             ?.map((bi, index) => {
               const isNewNft = getIsBundleItem<NewNFT>(bi, "newNftName");
               const isNotNFT =
@@ -158,7 +158,7 @@ export default function ProductImages({ onChangeOneSetOfImages }: Props) {
               }
               return null;
             })
-            .filter(isTruthy) ?? []
+            .filter(isTruthy) ?? [])
         : [])
     ];
   }, [

src/components/product/utils/useInitialValues.ts

@@ -728,7 +728,7 @@ function loadExistingProduct<T extends CreateProductForm>(
               }
             };
           })
-      : cloneBaseValues.productVariantsImages ?? [],
+      : (cloneBaseValues.productVariantsImages ?? []),
     imagesSpecificOrAll:
       IMAGE_SPECIFIC_OR_ALL_OPTIONS.find((option) =>
         hasVariantSpecificImages
@@ -808,15 +808,15 @@ function loadExistingProduct<T extends CreateProductForm>(
       weight:
         product?.packaging_weight_value ?? cloneBaseValues.shippingInfo.weight,
       weightUnit: product?.packaging_weight_unit
-        ? OPTIONS_WEIGHT.find(
+        ? (OPTIONS_WEIGHT.find(
             (weightOption) =>
               weightOption.value === product.packaging_weight_unit
-          ) ?? cloneBaseValues.shippingInfo.weightUnit
+          ) ?? cloneBaseValues.shippingInfo.weightUnit)
         : cloneBaseValues.shippingInfo.weightUnit,
       measurementUnit: product?.packaging_dimensions_unit
-        ? OPTIONS_LENGTH.find(
+        ? (OPTIONS_LENGTH.find(
             (option) => option.value === product.packaging_dimensions_unit
-          ) ?? cloneBaseValues.shippingInfo.measurementUnit
+          ) ?? cloneBaseValues.shippingInfo.measurementUnit)
         : cloneBaseValues.shippingInfo.measurementUnit,
       height:
         product?.packaging_dimensions_height ??

src/components/searchModal/CommonBases.tsx

@@ -45,7 +45,7 @@ export default function CommonBases({
   selectedCurrency?: Currency | null;
   onSelect: (currency: Currency) => void;
 }) {
-  const bases = chainId !== undefined ? COMMON_BASES[chainId] ?? [] : [];
+  const bases = chainId !== undefined ? (COMMON_BASES[chainId] ?? []) : [];
 
   return bases.length > 0 ? (
     <MobileWrapper $gap="md">

src/components/seller/exchanges/SellerExchanges.tsx

@@ -1,5 +1,4 @@
-import { ThreadId } from "@bosonprotocol/chat-sdk/dist/cjs/util/v0.0.1/definitions";
-import { ThreadObject } from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+import { ThreadId, ThreadObject } from "@bosonprotocol/chat-sdk";
 import { exchanges as ExchangesKit, subgraph } from "@bosonprotocol/react-kit";
 import * as Sentry from "@sentry/browser";
 import { createWorkerFactory, useWorker } from "@shopify/react-web-worker";

src/components/toggle/index.tsx

@@ -61,7 +61,7 @@ const ToggleElement = styled.span<{
     ease-in;
   background: ${({ bgColor, isActive }) =>
     isActive
-      ? bgColor ?? lighten(0.09, colors.violet)
+      ? (bgColor ?? lighten(0.09, colors.violet))
       : bgColor
         ? colors.greyLight
         : colors.greyDark};

src/lib/utils/hooks/chat/common.ts

@@ -1,8 +1,8 @@
 import {
+  matchThreadIds,
   MessageData,
   ThreadObject
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
-import { matchThreadIds } from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/functions";
+} from "@bosonprotocol/chat-sdk";
 import dayjs from "dayjs";
 
 export type DateStep =

src/lib/utils/hooks/chat/getThreadWorker.ts

@@ -1,8 +1,5 @@
-import { BosonXmtpClient } from "@bosonprotocol/chat-sdk";
-import {
-  ThreadId,
-  ThreadObject
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+import { BosonXmtpBrowserClient as BosonXmtpClient } from "@bosonprotocol/chat-sdk";
+import { ThreadId, ThreadObject } from "@bosonprotocol/chat-sdk";
 import dayjs from "dayjs";
 import { MutableRefObject } from "react";
 

src/lib/utils/hooks/chat/useChatStatus.ts

@@ -1,4 +1,4 @@
-import { BosonXmtpClient } from "@bosonprotocol/chat-sdk";
+import { BosonXmtpBrowserClient as BosonXmtpClient } from "@bosonprotocol/chat-sdk";
 import { useConfigContext } from "components/config/ConfigContext";
 import { useEffect, useState } from "react";
 

src/lib/utils/hooks/chat/useInfiniteThread.ts

@@ -1,8 +1,5 @@
-import {
-  ThreadId,
-  ThreadObject
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
-import { validateMessage } from "@bosonprotocol/chat-sdk/dist/esm/util/validators";
+import { ThreadId, ThreadObject } from "@bosonprotocol/chat-sdk";
+import { validateMessage } from "@bosonprotocol/chat-sdk";
 import { createWorkerFactory, useWorker } from "@shopify/react-web-worker";
 import { utils } from "ethers";
 import { useCallback, useEffect, useRef, useState } from "react";

src/lib/utils/hooks/connection/connection.ts

@@ -12,8 +12,8 @@ export function useProvider() {
   const isMagicLoggedIn = hooks.useIsMagicLoggedIn();
   return useMemo(() => {
     return isMagicLoggedIn
-      ? magicProvider ?? provider
-      : provider ?? magicProvider;
+      ? (magicProvider ?? provider)
+      : (provider ?? magicProvider);
   }, [provider, magicProvider, isMagicLoggedIn]);
 }
 

src/lib/utils/hooks/offer/useCreateOffers.tsx

@@ -203,11 +203,22 @@ export function useCreateOffers() {
             const decimals = await onBeforeBuildCondition();
             const condition = buildCondition(tokenGatedInfo, decimals);
 
+            const sellerAddress = sellerToCreate?.assistant;
+            if (!sellerAddress) {
+              throw new Error(`sellerAddress is falsy "${sellerAddress}"`);
+            }
+            const seller = await coreSDK.getSellerByAssistant(sellerAddress);
+            if (!seller) {
+              throw new Error(
+                `seller could not be found with this address="${sellerAddress}"`
+              );
+            }
+            const sellerId = seller.id;
             if (isMetaTx) {
               const nonce = Date.now();
               const { r, s, v, functionName, functionSignature } =
                 await coreSDK.signMetaTxCreateGroup({
-                  createGroupArgs: { offerIds, ...condition },
+                  createGroupArgs: { offerIds, sellerId, ...condition },
                   nonce
                 });
               txResponse = await coreSDK.relayMetaTransaction({
@@ -221,6 +232,7 @@ export function useCreateOffers() {
             } else {
               txResponse = await coreSDK.createGroup({
                 offerIds,
+                sellerId,
                 ...condition
               });
             }

src/lib/utils/hooks/seller/useUpdateSellerMetadata.ts

@@ -125,7 +125,7 @@ async function updateSellerMedatata(
             : [])
         ]
       : kindUsed === ProfileType.REGULAR
-        ? metadataImages ?? undefined
+        ? (metadataImages ?? undefined)
         : undefined;
 
   const meta: Parameters<typeof storeSellerMetadata>[0] = {
@@ -173,8 +173,8 @@ async function updateSellerMedatata(
     ...seller,
     admin: address,
     authTokenId: values.authTokenId // it's assumed to be in hexadecimal
-      ? values.authTokenId ?? "0"
-      : decimalToHex(+seller.authTokenId) ?? "0",
+      ? (values.authTokenId ?? "0")
+      : (decimalToHex(+seller.authTokenId) ?? "0"),
     authTokenType:
       kindUsed === ProfileType.LENS ? AuthTokenType.LENS : AuthTokenType.NONE,
     sellerId: seller.id,

src/lib/utils/hooks/useCurrency.ts

@@ -191,7 +191,7 @@ export function useCurrencyFromMap(
 
   const token = useTokenFromMapOrNetwork(
     tokens,
-    isNative ? undefined : shorthandMatchAddress ?? currencyId
+    isNative ? undefined : (shorthandMatchAddress ?? currencyId)
   );
 
   if (

src/lib/utils/hooks/useENSAddress.ts

@@ -44,7 +44,7 @@ export default function useENSAddress(ensName?: string | null): {
   const changed = debouncedName !== ensName;
   return useMemo(
     () => ({
-      address: changed ? null : addr.result?.[0] ?? null,
+      address: changed ? null : (addr.result?.[0] ?? null),
       loading: changed || resolverAddress.loading || addr.loading
     }),
     [addr.loading, addr.result, changed, resolverAddress.loading]

src/lib/utils/hooks/useENSAvatar.ts

@@ -50,7 +50,7 @@ export default function useENSAvatar(
   const changed = debouncedAddress !== address;
   return useMemo(
     () => ({
-      avatar: changed ? null : http ?? null,
+      avatar: changed ? null : (http ?? null),
       loading:
         changed ||
         addressAvatar.loading ||

src/lib/utils/hooks/useSellerBlacklist.ts

@@ -100,7 +100,8 @@ export function useSellerBlacklist(
       lastSellerIdFetched: allSellers.data?.at(-1)
     };
   }, [
-    allSellers,
+    allSellers.data,
+    allSellers.isSuccess,
     currentSeller.isSuccess,
     currentSeller.sellerIds,
     blacklist.isSuccess,

src/pages/chat/ChatProvider/ChatContext.ts

@@ -1,4 +1,4 @@
-import { BosonXmtpClient } from "@bosonprotocol/chat-sdk";
+import { BosonXmtpBrowserClient as BosonXmtpClient } from "@bosonprotocol/chat-sdk";
 import { createContext, Dispatch, SetStateAction, useContext } from "react";
 
 import { getChatEnvName } from "./const";

src/pages/chat/ChatProvider/ChatProvider.tsx

@@ -1,4 +1,4 @@
-import { BosonXmtpClient } from "@bosonprotocol/chat-sdk";
+import { BosonXmtpBrowserClient as BosonXmtpClient } from "@bosonprotocol/chat-sdk";
 import * as Sentry from "@sentry/browser";
 import { useConfigContext } from "components/config/ConfigContext";
 import { ReactNode, useEffect, useState } from "react";

src/pages/chat/components/ExchangeSidePreview.tsx

@@ -1,7 +1,4 @@
-import {
-  MessageData,
-  ThreadId
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+import { MessageData, ThreadId } from "@bosonprotocol/chat-sdk";
 import { offers, subgraph } from "@bosonprotocol/react-kit";
 import {
   buyerAndSellerAgreementIncluding,

src/pages/chat/components/ExchangeTimeline.tsx

@@ -1,8 +1,5 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
-import {
-  MessageData,
-  MessageType
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+import { MessageData, MessageType } from "@bosonprotocol/chat-sdk";
 import { subgraph } from "@bosonprotocol/react-kit";
 import dayjs from "dayjs";
 import { ReactNode, useMemo } from "react";

src/pages/chat/components/Message.tsx

@@ -7,7 +7,7 @@ import {
   ProposalContent,
   StringContent,
   StringIconContent
-} from "@bosonprotocol/chat-sdk/dist/esm/util/v0.0.1/definitions";
+} from "@bosonprotocol/chat-sdk";
 import { subgraph } from "@bosonprotocol/react-kit";
 import { Check, Clock } from "phosphor-react";
 import React, {