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

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

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

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

package/src/stories/helpers/CtaButtonWrapper.tsx

@@ -1,25 +1,52 @@
 import React, { ReactNode } from "react";
 
-import { connectWallet, hooks, metaMask } from "./connect-wallet";
+import { connectWallet, connectors, hooks, metaMask } from "./connect-wallet";
+import { Web3ReactProvider } from "@web3-react/core";
+import { ConfigId } from "@bosonprotocol/core-sdk";
 
 type Props = {
   children: ReactNode;
+  chainId: string;
 };
 
-export function CtaButtonWrapper(props: Props) {
-  const account = hooks.useAccount();
+function WithWeb3ReactProvider({ children }: { children: ReactNode }) {
+  return (
+    <Web3ReactProvider connectors={connectors}>{children}</Web3ReactProvider>
+  );
+}
 
+function WithMetamask(props: Props) {
+  const account = hooks.useAccount();
   return (
     <>
       {account ? (
         <>
           <div>Connected: {account}</div>
-          <button onClick={() => metaMask.deactivate()}>Disconnect MM</button>
+          <button onClick={() => metaMask?.deactivate?.()}>
+            Disconnect MetaMask
+          </button>
         </>
       ) : (
-        <button onClick={() => connectWallet()}>Connect MM</button>
+        <button onClick={async () => await connectWallet(props.chainId)}>
+          Connect MetaMask
+        </button>
       )}
       {props.children}
     </>
   );
 }
+
+export const CtaButtonWrapper = ({
+  children,
+  configId
+}: {
+  children: ReactNode;
+  configId: ConfigId;
+}) => {
+  const chainId = configId?.split("-")[1] || "80001";
+  return (
+    <WithWeb3ReactProvider>
+      <WithMetamask chainId={chainId}>{children}</WithMetamask>
+    </WithWeb3ReactProvider>
+  );
+};

package/src/stories/helpers/connect-wallet.ts

@@ -1,19 +1,49 @@
 import { initializeConnector } from "@web3-react/core";
 import { MetaMask } from "@web3-react/metamask";
+import { utils } from "ethers";
 
-export const [metaMask, hooks] = initializeConnector<MetaMask>(
-  (actions) => new MetaMask(actions)
-);
+import { Web3ReactHooks } from "@web3-react/core";
 
-export function connectWallet(chainId?: number) {
-  metaMask.provider
-    ?.request({
-      method: "wallet_requestPermissions",
-      params: [
-        {
-          eth_accounts: {}
-        }
-      ]
-    })
-    .then(() => metaMask.activate(chainId));
-}
+export const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => {
+  return new MetaMask({ actions });
+});
+
+export const connectWallet = async (chainId?: string) => {
+  try {
+    const currentChainId = window.ethereum
+      ? Number(
+          await (window.ethereum as any)?.request({ method: "eth_chainId" })
+        )
+      : undefined;
+    if (
+      chainId &&
+      window.ethereum &&
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      currentChainId !== Number(chainId)
+    ) {
+      try {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        await window.ethereum.request({
+          method: "wallet_switchEthereumChain",
+          params: [
+            { chainId: utils.hexStripZeros(utils.hexlify(Number(chainId))) }
+          ]
+        });
+      } catch (err) {
+        console.error("Network changed rejected", err);
+      }
+    } else {
+      try {
+        await metaMask.activate(Number(chainId));
+      } catch (err) {
+        console.error("User rejected the request", err);
+      }
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const connectors: [MetaMask, Web3ReactHooks][] = [[metaMask, hooks]];

package/src/stories/widgets/Finance.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
 
-import FinanceWidget from "../../components/widgets/finance/FinanceWidget";
+import { FinanceWidget } from "../../components/widgets/finance/FinanceWidget";
 import { EnvironmentType, getEnvConfigs } from "@bosonprotocol/core-sdk";
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {