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

package/src/hooks/useSignerAddress.tsx

@@ -1,35 +1,26 @@
 import { Web3LibAdapter } from "@bosonprotocol/common";
 
-import { useEffect, useState } from "react";
+import { useQuery } from "react-query";
 
 export function useSignerAddress(web3Lib: Web3LibAdapter | undefined) {
-  const [signerAddress, setSignerAddress] = useState<string | undefined>();
-  const [signerContract, setSignerContract] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (web3Lib?.getSignerAddress) {
-      web3Lib
-        .getSignerAddress()
-        .then((address) => {
-          setSignerAddress(address);
-        })
-        .catch((e) => {
-          console.error(e);
-          setSignerAddress(undefined);
-        });
-      web3Lib
-        .isSignerContract()
-        .then((isSignerContract) => {
-          setSignerContract(isSignerContract);
-        })
-        .catch((e) => {
-          console.error(e);
-          setSignerContract(false);
-        });
+  const { data: signerAddress } = useQuery(
+    ["useSignerAddress-signerAddress", web3Lib?.uuid],
+    () => {
+      return web3Lib?.getSignerAddress();
+    },
+    {
+      enabled: !!web3Lib?.getSignerAddress
     }
-
-    return () => setSignerAddress(undefined);
-  }, [web3Lib]);
+  );
+  const { data: signerContract } = useQuery(
+    ["useSignerAddress-signerContract", web3Lib?.uuid],
+    () => {
+      return web3Lib?.isSignerContract();
+    },
+    {
+      enabled: !!web3Lib?.getSignerAddress
+    }
+  );
 
   return { signerAddress, signerContract };
 }

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

@@ -71,6 +71,15 @@ const CHAIN_INFO: ChainInfoMap = {
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: "Görli Ether", symbol: "görETH", decimals: 18 }
   },
+  [ChainId.SEPOLIA]: {
+    networkType: NetworkType.L1,
+    docs: "https://docs.uniswap.org/",
+    explorer: "https://sepolia.etherscan.io/",
+    infoLink: "https://info.uniswap.org/#/",
+    label: "Sepolia",
+    logoUrl: ethereumLogoUrl,
+    nativeCurrency: { name: "Sepolia Ether", symbol: "sETH", decimals: 18 }
+  },
   [ChainId.POLYGON]: {
     networkType: NetworkType.L1,
     blockWaitMsBeforeWarning: ms(`10m`),

package/src/lib/const/lists.ts

@@ -9,16 +9,16 @@ const BA_LIST =
 // TODO(WEB-2282): Re-enable CMC list once we have a better solution for handling large lists.
 // const CMC_ALL_LIST = 'https://s3.coinmarketcap.com/generated/dex/tokens/eth-tokens-all.json'
 const COINGECKO_LIST = "https://tokens.coingecko.com/uniswap/all.json";
-const COINGECKO_BNB_LIST =
-  "https://tokens.coingecko.com/binance-smart-chain/all.json";
-const COINGECKO_ARBITRUM_LIST =
-  "https://tokens.coingecko.com/arbitrum-one/all.json";
-const COINGECKO_OPTIMISM_LIST =
-  "https://tokens.coingecko.com/optimistic-ethereum/all.json";
-const COINGECKO_CELO_LIST = "https://tokens.coingecko.com/celo/all.json";
+// const COINGECKO_BNB_LIST =
+//   "https://tokens.coingecko.com/binance-smart-chain/all.json";
+// const COINGECKO_ARBITRUM_LIST =
+//   "https://tokens.coingecko.com/arbitrum-one/all.json";
+// const COINGECKO_OPTIMISM_LIST =
+//   "https://tokens.coingecko.com/optimistic-ethereum/all.json";
+// const COINGECKO_CELO_LIST = "https://tokens.coingecko.com/celo/all.json";
 const COINGECKO_POLYGON_LIST =
   "https://tokens.coingecko.com/polygon-pos/all.json";
-const COINGECKO_AVAX_LIST = "https://tokens.coingecko.com/avalanche/all.json";
+// const COINGECKO_AVAX_LIST = "https://tokens.coingecko.com/avalanche/all.json";
 const COMPOUND_LIST =
   "https://raw.githubusercontent.com/compound-finance/token-list/master/compound.tokenlist.json";
 const GEMINI_LIST = "https://www.gemini.com/uniswap/manifest.json";
@@ -49,20 +49,20 @@ export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   AAVE_LIST,
   //  CMC_ALL_LIST,
   COINGECKO_LIST,
-  COINGECKO_BNB_LIST,
-  COINGECKO_ARBITRUM_LIST,
-  COINGECKO_OPTIMISM_LIST,
-  COINGECKO_CELO_LIST,
+  // COINGECKO_BNB_LIST,
+  // COINGECKO_ARBITRUM_LIST,
+  // COINGECKO_OPTIMISM_LIST,
+  // COINGECKO_CELO_LIST,
   COINGECKO_POLYGON_LIST,
-  COINGECKO_AVAX_LIST,
+  // COINGECKO_AVAX_LIST,
   KLEROS_LIST,
   GEMINI_LIST,
   WRAPPED_LIST,
   SET_LIST,
   ARBITRUM_LIST,
   OPTIMISM_LIST,
-  CELO_LIST,
-  PLASMA_BNB_LIST,
+  // CELO_LIST,
+  // PLASMA_BNB_LIST,
   AVALANCHE_LIST,
   BASE_LIST,
   ...UNSUPPORTED_LIST_URLS

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

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

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