@bosonprotocol/react-kit 0.29.0-alpha.11 → 0.29.0-alpha.13

package/src/components/modal/components/common/StepsOverview/PurchaseOverviewView.tsx

@@ -7,7 +7,7 @@ import { Grid } from "../../../../ui/Grid";
 
 const colors = theme.colors.light;
 type Props = {
-  onBackClick: () => void;
+  onBackClick?: () => void;
 };
 export function PurchaseOverviewView({ onBackClick }: Props) {
   const dispatch = useNonModalContext();
@@ -16,11 +16,15 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
       payload: {
         headerComponent: (
           <Grid style={{ flex: "1" }}>
-            <ArrowLeft
-              onClick={onBackClick}
-              size={32}
-              style={{ cursor: "pointer" }}
-            />
+            {onBackClick && (
+              <ArrowLeft
+                onClick={() => {
+                  onBackClick();
+                }}
+                size={32}
+                style={{ cursor: "pointer" }}
+              />
+            )}
           </Grid>
         ),
         contentStyle: {
@@ -28,7 +32,6 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
         }
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, onBackClick]);
   return <PurchaseOverview />;
 }

package/src/components/modal/nonModal/Header.tsx

@@ -9,6 +9,7 @@ import { useBreakpoints } from "../../../hooks/useBreakpoints";
 
 const colors = theme.colors.light;
 const Wrapper = styled.div<{ $flexWrap: string }>`
+  box-sizing: border-box;
   container-type: inline-size;
   position: relative;
   width: 100%;

package/src/components/ui/ThemedButton.tsx

@@ -207,7 +207,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     outline: {
       color: colors.black,
       borderColor: colors.border,
-      borderWidth: 1,
+      borderWidth: 2,
       hover: {
         background: colors.border,
         color: "var(--accent)"
@@ -222,7 +222,6 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blank: {
       color: `${colors.black}4d`,
-      padding: "0.75rem 0.5rem",
       hover: {
         color: colors.black
       },
@@ -233,7 +232,6 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankSecondary: {
       color: "var(--accent)",
-      padding: "0.75rem 0.5rem",
       hover: {
         borderColor: colors.secondary,
         background: colors.border,
@@ -242,7 +240,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankSecondaryOutline: {
       color: "var(--accent)",
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.secondary,
       hover: {
         borderColor: colors.secondary,
@@ -252,8 +250,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankOutline: {
       color: colors.black,
-      padding: "1rem 2rem",
-      borderWidth: 1,
+      borderWidth: 2,
       hover: {
         borderColor: colors.secondary,
         background: colors.border,
@@ -263,14 +260,23 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     white: {
       color: colors.black,
       background: colors.white,
-      padding: "1rem",
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.border,
       hover: {
         color: colors.white,
         background: colors.black
       }
     },
+    black: {
+      color: colors.white,
+      background: colors.black,
+      borderWidth: 2,
+      borderColor: colors.black,
+      hover: {
+        color: colors.black,
+        background: colors.white
+      }
+    },
     warning: {
       color: colors.black,
       borderColor: colors.orange,

package/src/components/ui/styles.ts

@@ -14,7 +14,7 @@ export const button = css`
   align-items: center;
   padding: 1rem 1.5px;
   gap: 0.5rem;
-  margin: 1px;
+  margin: 0;
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;

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/stories/PurchaseOverview.stories.tsx

@@ -0,0 +1,28 @@
+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"
+};

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