@bosonprotocol/react-kit 0.29.0-alpha.2 → 0.29.0-alpha.21

package/src/lib/signer/externalSigner.ts

@@ -53,6 +53,7 @@ const getExternalWeb3LibAdapterListener = ({
   parentOrigin: string;
 }): Web3LibAdapter => {
   return {
+    uuid: crypto.randomUUID(),
     getSignerAddress: (): Promise<string> => {
       return getDefaultHandleSignerFunction<string>({
         parentOrigin,

package/src/lib/signer/useCallSignerFromIframe.ts

@@ -90,7 +90,7 @@ export const useCallSignerFromIframe = ({
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
               result = await signer[signerFn]?.(args[0], args[1]);
-            } else {
+            } else if (fn !== "uuid") {
               result = await ethersSigner?.[fn]?.(args[0], args[1]);
             }
             if (

package/src/state/hooks.ts

@@ -1,8 +1,15 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import {
+  createDispatchHook,
+  createSelectorHook,
+  TypedUseSelectorHook
+} from "react-redux";
 
 import store from "./index";
+import { ReduxCCDummyContext } from "./reduxContext";
 
-export const useAppDispatch = () => useDispatch<typeof store.dispatch>();
+const useDappDispatch = createDispatchHook(ReduxCCDummyContext as any);
+export const useAppDispatch = () => useDappDispatch<typeof store.dispatch>();
+const useDappSelector = createSelectorHook(ReduxCCDummyContext as any);
 export const useAppSelector: TypedUseSelectorHook<
   ReturnType<typeof store.getState>
-> = useSelector;
+> = useDappSelector;

package/src/state/lists/updater.ts

@@ -10,15 +10,19 @@ import { useAllLists } from "../../state/lists/hooks";
 
 import { acceptListUpdate } from "./actions";
 import { shouldAcceptVersionUpdate } from "./utils";
-import { useProvider } from "../../hooks/connection/connection";
-import useIsWindowVisible from "../../hooks/uniswap/useIsWindowVisible";
 import { useInterval } from "../../hooks/uniswap/useInterval";
 import { useFetchListCallback } from "../../hooks/uniswap/useFetchListCallback";
+import { providers } from "ethers";
 
-export function ListsUpdater(): null {
-  const provider = useProvider();
+export type ListsUpdaterProps = {
+  isWindowVisible: boolean;
+  provider: providers.FallbackProvider | providers.JsonRpcProvider;
+};
+export function ListsUpdater({
+  isWindowVisible,
+  provider
+}: ListsUpdaterProps): null {
   const dispatch = useAppDispatch();
-  const isWindowVisible = useIsWindowVisible();
 
   // get all loaded lists, and the active urls
   const lists = useAllLists();

package/src/state/reducer.ts

@@ -16,10 +16,10 @@ const appReducer = combineReducers({
 export type AppState = ReturnType<typeof appReducer>;
 
 const persistConfig: PersistConfig<AppState> = {
-  key: "interface",
+  key: "CC",
   version: 0, // see migrations.ts for more details about this version
   storage: localForage.createInstance({
-    name: "redux"
+    name: "redux-cc"
   }),
   migrate: customCreateMigrate(migrations, { debug: false }),
   whitelist: Object.keys(persistedReducers),

package/src/state/reduxContext.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ReduxCCDummyContext = React.createContext(null);

package/src/state/updaters.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode } from "react";
-import { ListsUpdater } from "./lists/updater";
+import { ListsUpdater, ListsUpdaterProps } from "./lists/updater";
 
-export const Updaters = ({ children }: { children: ReactNode }) => {
+export type UpdatersProps = ListsUpdaterProps & { children?: ReactNode };
+export const Updaters = ({ children, ...rest }: UpdatersProps) => {
   return (
     <>
-      <ListsUpdater />
+      <ListsUpdater {...rest} />
       {children}
     </>
   );

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

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

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

package/src/stories/cta/seller/CreateSellerButton.stories.tsx

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