refactor: make chain selector component config agnostic (#795)

bosonprotocol · Sep 23, 2024 · d8b537b · d8b537b
1 parent c2b0d3f
commit d8b537b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/packages/common/src/types/configs.ts b/packages/common/src/types/configs.ts
@@ -75,3 +75,8 @@ export type ProtocolConfig = {
  metaTx?: Partial<MetaTxConfig>;
  lens: Lens | undefined;
 };
+
+export type CoreProtocolConfig = Pick<
+ ProtocolConfig,
+ "envName" | "chainId" | "configId"
+>;
diff --git a/packages/core-sdk/src/index.ts b/packages/core-sdk/src/index.ts
@@ -24,6 +24,7 @@ export {
  ConfigId,
  MetaTxConfig,
  ProtocolConfig,
+ CoreProtocolConfig,
  abis
 } from "@bosonprotocol/common";
 

diff --git a/packages/react-kit/src/components/wallet2/selector/ChainSelector.tsx b/packages/react-kit/src/components/wallet2/selector/ChainSelector.tsx
@@ -28,10 +28,13 @@ import {
  UniWalletSupportedChains,
  getChainPriority
 } from "../../../lib/const/chains";
-import { useConfigContext } from "../../config/ConfigContext";
-import { getEnvConfigsFilteredByEnv } from "../../../lib/config/getConfigsByChainId";
+import { getEnvConfigsFilteredByEnv as importedGetEnvConfigsFilteredByEnv } from "../../../lib/config/getConfigsByChainId";
 import { useSelectChain } from "../../../hooks/connection/useSelectChain";
-import { ConfigId, ProtocolConfig } from "@bosonprotocol/core-sdk";
+import {
+ ConfigId,
+ EnvironmentType,
+ CoreProtocolConfig
+} from "@bosonprotocol/core-sdk";
 import { SvgImage } from "../../ui/SvgImage";
 
 const IconAndChevron = styled.div<{
@@ -57,11 +60,6 @@ const IconAndChevron = styled.div<{
  }
 `;
 
-export interface ChainSelectorProps {
- leftAlign?: boolean;
- backgroundColor: CSSProperties["backgroundColor"];
-}
-
 function useWalletSupportedChains({
  NETWORK_SELECTOR_CHAINS_IDS
 }: {
@@ -88,14 +86,25 @@ const chevronProps = {
  height: 20,
  width: 20
 };
+
+export interface ChainSelectorProps {
+ leftAlign?: boolean;
+ backgroundColor: CSSProperties["backgroundColor"];
+ config: CoreProtocolConfig;
+ getEnvConfigsFilteredByEnv?: (
+ envName: EnvironmentType
+ ) => CoreProtocolConfig[];
+}
+
 export const ChainSelector = ({
  leftAlign,
- backgroundColor
+ backgroundColor,
+ config,
+ getEnvConfigsFilteredByEnv = importedGetEnvConfigsFilteredByEnv
 }: ChainSelectorProps) => {
- const { config } = useConfigContext();
  const NETWORK_SELECTOR_CHAINS = useMemo(
  () => getEnvConfigsFilteredByEnv(config.envName),
- [config.envName]
+ [config.envName, getEnvConfigsFilteredByEnv]
  );
  const NETWORK_SELECTOR_CHAINS_IDS = NETWORK_SELECTOR_CHAINS.map(
  (config) => config.chainId as ChainId
@@ -128,7 +137,10 @@ export const ChainSelector = ({
  }
  return acc;
  },
- { supported: [], unsupported: [] } as Record<string, ProtocolConfig[]>
+ { supported: [], unsupported: [] } as Record<
+ string,
+ CoreProtocolConfig[]
+ >
  );
  return [supported, unsupported];
  }, [NETWORK_SELECTOR_CHAINS, walletSupportsChain]);
@@ -148,7 +160,7 @@ export const ChainSelector = ({
 
  const [pendingConfigId, setPendingConfigId] = useState<ConfigId>();
  const onSelectChain = useCallback(
- async (config: ProtocolConfig) => {
+ async (config: CoreProtocolConfig) => {
  try {
  setPendingConfigId(config.configId);
  await selectChain(config.configId);

diff --git a/packages/react-kit/src/stories/ConnectWallet.stories.tsx b/packages/react-kit/src/stories/ConnectWallet.stories.tsx
@@ -30,7 +30,8 @@ const errorButtonTheme = bosonButtonThemes({ withBosonStyle: false })[
 const envName =
  (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
 const envConfig = getEnvConfigs(envName);
-const configId = envConfig[0].configId;
+const config = envConfig[0];
+const configId = config.configId;
 const ColorGlobalStyle = createGlobalStyle<{ color: CSSProperties["color"] }>`
  html, body{
  color: ${({ color }) => color};
@@ -114,6 +115,7 @@ const Component = ({
  <ChainSelector
  leftAlign={true}
  backgroundColor={chainSelectorBackgroundColor}
+ config={config}
  />
  <ConnectWallet
  successButtonTheme={{