@bosonprotocol/react-kit 0.29.0-alpha.9 → 0.29.1-alpha.0

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,6 +50,7 @@ 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";

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 }}

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

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

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

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

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

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

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

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

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

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

package/src/stories/cta/funds/WithdrawAllFunds.stories.tsx

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

package/src/stories/cta/funds/WithdrawFundsButton.stories.tsx

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

package/src/stories/cta/offer/BatchVoidButton.stories.tsx

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

package/src/stories/cta/offer/CommitButton.stories.tsx

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

package/src/stories/cta/offer/CreateOfferButton.stories.tsx

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