@bosonprotocol/react-kit 0.29.0-alpha.8 → 0.29.0

package/src/components/widgets/finance/FinanceWidget.tsx

@@ -7,32 +7,20 @@ import styled from "styled-components";
 import { useAccount } from "../../../hooks/connection/connection";
 import { useDisconnect } from "../../../hooks/connection/useDisconnect";
 import { useCurrentSellers } from "../../../hooks/useCurrentSellers";
-import { CONFIG } from "../../../lib/config/config";
-import {
-  ConfigProvider,
-  ConfigProviderProps
-} from "../../config/ConfigProvider";
-import { MagicProvider } from "../../magicLink/MagicProvider";
-import ModalProvider from "../../modal/ModalProvider";
-import { SignerProvider } from "../../signer/SignerProvider";
-import GlobalStyle from "../../styles/GlobalStyle";
 import { Grid } from "../../ui/Grid";
 import Loading from "../../ui/loading/Loading";
 import ConnectButton from "../../wallet/ConnectButton";
-import WalletConnectionProvider from "../../wallet/WalletConnectionProvider";
-import { getParentWindowOrigin } from "../common";
-import { CommonWidgetTypes } from "../types";
 import Finance, { Props } from "./Finance";
-import ConvertionRateProvider, {
-  ConvertionRateProviderProps
-} from "./convertion-rate/ConvertionRateProvider";
 import { useConvertionRate } from "./convertion-rate/useConvertionRate";
 import { useExchangeTokens } from "./exchange-tokens/useExchangeTokens";
 import useFunds from "./useFunds";
 import { useOffersBacked } from "./useOffersBacked";
 import { useSellerDeposit } from "./useSellerDeposit";
 import { useSellerRoles } from "./useSellerRoles";
-import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import {
+  FinanceWidgetProviders,
+  FinanceWidgetProvidersProps
+} from "./FinanceWidgetProviders";
 dayjs.extend(isBetween);
 
 const StyledConnectButton = styled(ConnectButton)`
@@ -146,49 +134,20 @@ function WithSellerData(WrappedComponent: React.ComponentType<Props>) {
 }
 
 const Component = WithSellerData(Finance);
-type FinanceWidgetProps = {
-  walletConnectProjectId: string;
-} & Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
-  CommonWidgetTypes &
-  ConvertionRateProviderProps & {
-    sellerId: string | null | undefined;
-  };
-
-const { infuraKey, magicLinkKey } = CONFIG;
+type FinanceWidgetProps = FinanceWidgetProvidersProps & {
+  sellerId: string | null | undefined;
+};
 
 export function FinanceWidget(props: FinanceWidgetProps) {
-  const parentOrigin = getParentWindowOrigin();
-  const { walletConnectProjectId, sellerId, withExternalSigner } = props;
+  const { sellerId, withExternalSigner } = props;
   return (
-    <ConfigProvider
-      magicLinkKey={magicLinkKey}
-      infuraKey={infuraKey}
-      {...props}
-    >
-      <GlobalStyle />
-      <SignerProvider
-        parentOrigin={parentOrigin}
-        withExternalSigner={withExternalSigner}
-      >
-        <MagicProvider>
-          <WalletConnectionProvider
-            walletConnectProjectId={walletConnectProjectId}
-          >
-            <ConvertionRateProvider>
-              <ModalProvider>
-                {!withExternalSigner && (
-                  <Grid justifyContent="flex-end">
-                    <StyledConnectButton showChangeWallet />
-                  </Grid>
-                )}
-                <Component sellerId={sellerId ?? undefined} />
-              </ModalProvider>
-            </ConvertionRateProvider>
-          </WalletConnectionProvider>
-        </MagicProvider>
-      </SignerProvider>
-    </ConfigProvider>
+    <FinanceWidgetProviders {...props}>
+      {!withExternalSigner && (
+        <Grid justifyContent="flex-end">
+          <StyledConnectButton showChangeWallet />
+        </Grid>
+      )}
+      <Component sellerId={sellerId ?? undefined} />
+    </FinanceWidgetProviders>
   );
 }
-
-export default withQueryClientProvider(FinanceWidget);

package/src/components/widgets/finance/FinanceWidgetProviders.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import { CONFIG } from "../../../lib/config/config";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import { Omit } from "utility-types";
+import { CommonWidgetTypes } from "../types";
+import { SignerProvider } from "../../signer/SignerProvider";
+import GlobalStyle from "../../styles/GlobalStyle";
+import {
+  ConfigProvider,
+  ConfigProviderProps
+} from "../../config/ConfigProvider";
+import ConvertionRateProvider, {
+  ConvertionRateProviderProps
+} from "./convertion-rate/ConvertionRateProvider";
+import WalletConnectionProvider, {
+  WalletConnectionProviderProps
+} from "../../wallet/WalletConnectionProvider";
+import ModalProvider from "../../modal/ModalProvider";
+import { MagicProvider } from "../../magicLink/MagicProvider";
+import { getParentWindowOrigin } from "../common";
+
+export type FinanceWidgetProvidersProps = Omit<
+  WalletConnectionProviderProps,
+  "children" | "envName"
+> &
+  Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
+  CommonWidgetTypes &
+  ConvertionRateProviderProps & {
+    children: ReactNode;
+  };
+
+const { infuraKey, magicLinkKey } = CONFIG;
+
+export const FinanceWidgetProviders: React.FC<FinanceWidgetProvidersProps> =
+  withQueryClientProvider(({ children, ...props }) => {
+    const parentOrigin = getParentWindowOrigin();
+    return (
+      <ConfigProvider
+        magicLinkKey={magicLinkKey}
+        infuraKey={infuraKey}
+        {...props}
+      >
+        <GlobalStyle />
+        <SignerProvider
+          parentOrigin={parentOrigin}
+          withExternalSigner={props.withExternalSigner}
+        >
+          <MagicProvider>
+            <WalletConnectionProvider
+              walletConnectProjectId={props.walletConnectProjectId}
+            >
+              <ConvertionRateProvider>
+                <ModalProvider>{children}</ModalProvider>
+              </ConvertionRateProvider>
+            </WalletConnectionProvider>
+          </MagicProvider>
+        </SignerProvider>
+      </ConfigProvider>
+    );
+  });

package/src/hooks/useCtaClickHandler.ts

@@ -135,9 +135,14 @@ export function useCtaClickHandler<T>({
         onSuccess?.(receipt as providers.TransactionReceipt, payload);
       }
     } catch (error) {
-      onError?.(error as Error, {
-        txResponse: txResponse as providers.TransactionResponse
-      });
+      onError?.(
+        typeof error === "object"
+          ? (coreSdk.parseError(error as object) as Error)
+          : (error as Error),
+        {
+          txResponse: txResponse as providers.TransactionResponse
+        }
+      );
     } finally {
       setIsLoading(false);
     }

package/src/hooks/useCurrentSellers.ts

@@ -360,7 +360,9 @@ export function useCurrentSellers(
       resultByAddress.data
         ? resultByAddress.data.sellers.map((seller) => seller.id)
         : sellerAddressType === "SELLER_IDS"
-        ? [sellerAddress]
+        ? Array.isArray(sellerAddress)
+          ? sellerAddress
+          : [sellerAddress]
         : []
     ).filter((sellerId) => !!sellerId) as string[];
   }, [resultByAddress.data, sellerAddress, sellerAddressType]);

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/CommitButtonView";
 export * from "./components/cta/exchange/BatchCompleteButton";
 export * from "./components/cta/exchange/CancelButton";
 export * from "./components/cta/exchange/CompleteButton";
@@ -49,11 +50,13 @@ export * from "./components/magicLink/MagicProvider";
 export * from "./components/magicLink/UserContext";
 export * from "./components/modal/components/common/OfferFullDescription/ExternalOfferFullDescription";
 export * from "./components/modal/components/common/detail/useGetOfferDetailData";
+export * from "./components/modal/components/PurchaseOverview/PurchaseOverview";
 export * from "./components/modal/components/Commit/DetailView/ExternalCommitDetailView";
 export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeDetailView";
 export * from "./components/ui/Grid";
 export * from "./components/ui/GridContainer";
 export * from "./components/ui/Typography";
+export * from "./components/ui/MuteButton";
 export * from "./lib/magicLink/logout";
 export * from "./lib/magicLink/provider";
 export * from "./lib/const/networks";

package/src/lib/const/chainInfo.ts

@@ -62,15 +62,6 @@ const CHAIN_INFO: ChainInfoMap = {
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 }
   },
-  [ChainId.GOERLI]: {
-    networkType: NetworkType.L1,
-    docs: "https://docs.uniswap.org/",
-    explorer: "https://goerli.etherscan.io/",
-    infoLink: "https://info.uniswap.org/#/",
-    label: "Görli",
-    logoUrl: ethereumLogoUrl,
-    nativeCurrency: { name: "Görli Ether", symbol: "görETH", decimals: 18 }
-  },
   [ChainId.SEPOLIA]: {
     networkType: NetworkType.L1,
     docs: "https://docs.uniswap.org/",

package/src/lib/const/chains.ts

@@ -22,8 +22,8 @@ export const CHAIN_IDS_TO_NAMES = {
  */
 export const L1_CHAIN_IDS = [
   ChainId.MAINNET,
-  ChainId.GOERLI,
-  // ChainId.SEPOLIA,
+  // ChainId.GOERLI,
+  ChainId.SEPOLIA,
   ChainId.POLYGON,
   ChainId.POLYGON_MUMBAI
   // LocalChainId

package/src/lib/errors/eth-revert-reason.ts

@@ -45,7 +45,7 @@ async function validateInputPreProvider(txHash: string, network: string) {
   ) {
     throw new Error("Invalid transaction hash");
   }
-  const networks = ["mainnet", "kovan", "goerli", "ropsten", "rinkeby"];
+  const networks = ["mainnet", "sepolia"];
   if (!networks.includes(network)) {
     throw new Error("Not a valid network");
   }

package/src/lib/numbers/numbers.ts

@@ -1,23 +1,17 @@
-import { BigNumber } from "ethers";
+import { utils } from "ethers";
 
 export const getNumberWithoutDecimals = (
   value: string,
   decimals: string
 ): string => {
-  const valueAsNumber = Number(value);
-  if (!Number.isInteger(valueAsNumber)) {
-    return Math.floor(valueAsNumber * 10 ** Number(decimals)).toString();
-  }
-  return BigNumber.from(valueAsNumber + "")
-    .mul(BigNumber.from(10).pow(BigNumber.from(decimals)))
-    .toString();
+  return utils.parseUnits(value, decimals).toString();
 };
 
 export const getNumberWithDecimals = (
   value: string,
   decimals: string
 ): number => {
-  return Number(value) * 10 ** -Number(decimals);
+  return Number(utils.formatUnits(value, decimals));
 };
 
 /**

package/src/lib/opensea/getOpenSeaUrl.ts

@@ -11,11 +11,6 @@ const openSeaUrlMap = new Map([
         (tokenId: string, contractAddress: string) =>
           `https://testnets.opensea.io/assets/mumbai/${contractAddress}/${tokenId}`
       ],
-      [
-        "testing-5-0",
-        (tokenId: string, contractAddress: string) =>
-          `https://testnets.opensea.io/assets/goerli/${contractAddress}/${tokenId}`
-      ],
       [
         "testing-11155111-0",
         (tokenId: string, contractAddress: string) =>
@@ -31,11 +26,6 @@ const openSeaUrlMap = new Map([
         (tokenId: string, contractAddress: string) =>
           `https://testnets.opensea.io/assets/mumbai/${contractAddress}/${tokenId}`
       ],
-      [
-        "staging-5-0",
-        (tokenId: string, contractAddress: string) =>
-          `https://testnets.opensea.io/assets/goerli/${contractAddress}/${tokenId}`
-      ],
       [
         "staging-11155111-0",
         (tokenId: string, contractAddress: string) =>

package/src/stories/PurchaseOverview.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { PurchaseOverview } from "../components/modal/components/PurchaseOverview/PurchaseOverview";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/PurchaseOverview",
+  component: PurchaseOverview,
+  argTypes: {
+    lookAndFeel: {
+      options: ["modal", "regular"],
+      control: { type: "radio" }
+    }
+  }
+} as ComponentMeta<typeof PurchaseOverview>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof PurchaseOverview> = (args) => (
+  <PurchaseOverview {...args} />
+);
+
+export const Base: ComponentStory<typeof PurchaseOverview> = Template.bind({});
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Base.args = {
+  hideModal: () => console.log("hideModal"),
+  lookAndFeel: "modal",
+  modalMargin: "2%"
+};

package/src/stories/buttons/CommitButtonView.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { CommitButtonView } from "../../components/buttons/CommitButtonView";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Buttons/CommitButton",
+  component: CommitButtonView,
+  argTypes: {
+    layout: {
+      options: ["horizontal", "vertical"],
+      control: { type: "radio" }
+    },
+    color: {
+      options: ["green", "black", "white"],
+      control: { type: "radio" }
+    },
+    shape: {
+      options: ["sharp", "rounded", "pill"],
+      control: { type: "radio" }
+    }
+  }
+} as ComponentMeta<typeof CommitButtonView>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof CommitButtonView> = (args) => (
+  <CommitButtonView {...args} />
+);
+
+export const Base: ComponentStory<typeof CommitButtonView> = Template.bind({});
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Base.args = {
+  disabled: false,
+  onClick: () => console.log("click"),
+  onTaglineClick: () => console.log("tagline click"),
+  minWidth: "200px",
+  minHeight: "300px",
+  layout: "horizontal",
+  tagline: true,
+  color: "green",
+  shape: "sharp"
+};

package/src/stories/cta/dispute/AddFeesDisputeResolverButton.stories.tsx

@@ -19,12 +19,12 @@ export default {
 } as ComponentMeta<typeof AddFeesDisputeResolverButton>;
 
 const Template: ComponentStory<typeof AddFeesDisputeResolverButton> = (
-  args
+  args: Parameters<typeof AddFeesDisputeResolverButton>[0]
 ) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <AddFeesDisputeResolverButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/AddSellerToDisputeResolverButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof AddSellerToDisputeResolver>;
 
-const Template: ComponentStory<typeof AddSellerToDisputeResolver> = (args) => {
+const Template: ComponentStory<typeof AddSellerToDisputeResolver> = (
+  args: Parameters<typeof AddSellerToDisputeResolver>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <AddSellerToDisputeResolver
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/CreateDisputeResolverButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof CreateDisputeResolverButton>;
 
-const Template: ComponentStory<typeof CreateDisputeResolverButton> = (args) => {
+const Template: ComponentStory<typeof CreateDisputeResolverButton> = (
+  args: Parameters<typeof CreateDisputeResolverButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <CreateDisputeResolverButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/DecideDisputeButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof DecideDisputeButton>;
 
-const Template: ComponentStory<typeof DecideDisputeButton> = (args) => {
+const Template: ComponentStory<typeof DecideDisputeButton> = (
+  args: Parameters<typeof DecideDisputeButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <DecideDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/EscalateDisputeButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof EscalateDisputeButton>;
 
-const Template: ComponentStory<typeof EscalateDisputeButton> = (args) => {
+const Template: ComponentStory<typeof EscalateDisputeButton> = (
+  args: Parameters<typeof EscalateDisputeButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <EscalateDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/ExpireDisputeButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof ExpireDisputeButton>;
 
-const Template: ComponentStory<typeof ExpireDisputeButton> = (args) => {
+const Template: ComponentStory<typeof ExpireDisputeButton> = (
+  args: Parameters<typeof ExpireDisputeButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <ExpireDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/ExpireEscalationDisputeButton.stories.tsx

@@ -19,12 +19,12 @@ export default {
 } as ComponentMeta<typeof ExpireEscalationDisputeButton>;
 
 const Template: ComponentStory<typeof ExpireEscalationDisputeButton> = (
-  args
+  args: Parameters<typeof ExpireEscalationDisputeButton>[0]
 ) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <ExpireEscalationDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/ExtendDisputeTimeoutButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof ExtendDisputeTimeoutButton>;
 
-const Template: ComponentStory<typeof ExtendDisputeTimeoutButton> = (args) => {
+const Template: ComponentStory<typeof ExtendDisputeTimeoutButton> = (
+  args: Parameters<typeof ExtendDisputeTimeoutButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <ExtendDisputeTimeoutButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/RaiseDisputeButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof RaiseDisputeButton>;
 
-const Template: ComponentStory<typeof RaiseDisputeButton> = (args) => {
+const Template: ComponentStory<typeof RaiseDisputeButton> = (
+  args: Parameters<typeof RaiseDisputeButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <RaiseDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/RefuseDisputeButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof RefuseDisputeButton>;
 
-const Template: ComponentStory<typeof RefuseDisputeButton> = (args) => {
+const Template: ComponentStory<typeof RefuseDisputeButton> = (
+  args: Parameters<typeof RefuseDisputeButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <RefuseDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/RemoveFeesDisputeResolverButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof RemoveFeesDisputeResolver>;
 
-const Template: ComponentStory<typeof RemoveFeesDisputeResolver> = (args) => {
+const Template: ComponentStory<typeof RemoveFeesDisputeResolver> = (
+  args: Parameters<typeof RemoveFeesDisputeResolver>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <RemoveFeesDisputeResolver
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/RemoveSellerFromDisputeResolverButton.stories.tsx

@@ -19,12 +19,12 @@ export default {
 } as ComponentMeta<typeof RemoveSellerFromDisputeResolverButton>;
 
 const Template: ComponentStory<typeof RemoveSellerFromDisputeResolverButton> = (
-  args
+  args: Parameters<typeof RemoveSellerFromDisputeResolverButton>[0]
 ) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <RemoveSellerFromDisputeResolverButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/ResolveDisputeButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof ResolveDisputeButton>;
 
-const Template: ComponentStory<typeof ResolveDisputeButton> = (args) => {
+const Template: ComponentStory<typeof ResolveDisputeButton> = (
+  args: Parameters<typeof ResolveDisputeButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <ResolveDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/RetractDisputeButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof RetractDisputeButton>;
 
-const Template: ComponentStory<typeof RetractDisputeButton> = (args) => {
+const Template: ComponentStory<typeof RetractDisputeButton> = (
+  args: Parameters<typeof RetractDisputeButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <RetractDisputeButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/dispute/UpdateDisputeResolverButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof UpdateDisputeResolverButton>;
 
-const Template: ComponentStory<typeof UpdateDisputeResolverButton> = (args) => {
+const Template: ComponentStory<typeof UpdateDisputeResolverButton> = (
+  args: Parameters<typeof UpdateDisputeResolverButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <UpdateDisputeResolverButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}

package/src/stories/cta/exchange/BatchCompleteButton.stories.tsx

@@ -18,11 +18,13 @@ export default {
   }
 } as ComponentMeta<typeof BatchCompleteButton>;
 
-const Template: ComponentStory<typeof BatchCompleteButton> = (args) => {
+const Template: ComponentStory<typeof BatchCompleteButton> = (
+  args: Parameters<typeof BatchCompleteButton>[0]
+) => {
   const provider = hooks.useProvider();
 
   return (
-    <CtaButtonWrapper>
+    <CtaButtonWrapper configId={args.coreSdkConfig.configId}>
       <BatchCompleteButton
         {...args}
         coreSdkConfig={{ ...args.coreSdkConfig, web3Provider: provider }}