feat: add feature toggle, add back old way to use metamask

masa-finance · May 5, 2023 · 39dd7b3 · 39dd7b3
1 parent befeb92
commit 39dd7b3
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 43 deletions.
diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo } from 'react';
-import { useMasa } from '../../provider';
+import { useMasa, useMetamask } from '../../provider';
 import { ModalComponent } from '../modal';
 import {
   InterfaceAuthenticate,
   InterfaceConnected,
+  InterfaceConnector,
   InterfaceCreateCreditScore,
   InterfaceCreateIdentity,
 } from './pages';
@@ -13,11 +14,11 @@ import { InterfaceSuccessCreateIdentity } from './pages/success-create-identity'
 import { InterfaceSwitchChain } from './pages/switch-chain';
 
 const pages = {
-  // connector: ({
-  //   disableMetamask,
-  // }: {
-  //   disableMetamask?: boolean;
-  // }): JSX.Element => <InterfaceConnector disableMetamask={disableMetamask} />,
+  connector: ({
+    disableMetamask,
+  }: {
+    disableMetamask?: boolean;
+  }): JSX.Element => <InterfaceConnector disableMetamask={disableMetamask} />,
   createIdentity: <InterfaceCreateIdentity />,
   successIdentityCreate: <InterfaceSuccessCreateIdentity />,
   createSoulname: <InterfaceCreateSoulname />,
@@ -28,14 +29,12 @@ const pages = {
   masaGreen: <InterfaceMasaGreen />,
 };
 
-// {
-// disableMetamask,
-// }: {
-// disableMetamask?: boolean;
-// }
-
-export const MasaInterface = (): JSX.Element => {
-  // useMetamask({ disabled: disableMetamask });
+export const MasaInterface = ({
+  disableMetamask,
+}: {
+  disableMetamask?: boolean;
+}): JSX.Element => {
+  useMetamask({ disabled: disableMetamask });
 
   const {
     isModalOpen,
@@ -55,14 +54,16 @@ export const MasaInterface = (): JSX.Element => {
     // setRainbowkitModalCallback,
 
     openConnectModal,
+    useRainbowKit,
   } = useMasa();
 
   const page = useMemo(() => {
     if (forcedPage) return forcedPage;
+
     if (!hasWalletAddress) {
-      // openConnectModal?.();
-      return null;
-      // return 'connector';
+      // * feature toggle
+      if (useRainbowKit) return null;
+      return 'connector';
     }
 
     if (verbose) {
@@ -94,8 +95,9 @@ export const MasaInterface = (): JSX.Element => {
 
     if (hasWalletAddress && isLoggedIn) return 'connectedState';
 
-    // openConnectModal?.();
-    return null;
+    // * feature toggle
+    if (useRainbowKit) return null;
+
     return 'connector';
   }, [
     hasWalletAddress,
@@ -109,22 +111,24 @@ export const MasaInterface = (): JSX.Element => {
     forcedPage,
     forceNetwork,
     currentNetwork,
-    // openConnectModal,
+    useRainbowKit,
   ]);
 
   const isModal = useMemo(() => {
     return ['createIdentity', 'successIdentityCreate'].includes(String(page));
   }, [page]);
 
   useEffect(() => {
+    if (!useRainbowKit) return; // feature toggle
+
     // * when user closes connection during login process,
     // * we want to reopen rainbowkit modal not our old connection modal
     if (isModalOpen && !signer && page === 'connector') {
       closeModal?.();
       console.log('opening connect modal');
       openConnectModal?.();
     }
-  }, [isModalOpen, closeModal, signer, page, openConnectModal]);
+  }, [isModalOpen, closeModal, signer, page, openConnectModal, useRainbowKit]);
 
   return (
     <>
@@ -134,8 +138,10 @@ export const MasaInterface = (): JSX.Element => {
         setOpen={setModalOpen as (val: boolean) => void}
         height={isModal ? 340 : undefined}
       >
-        {/* {page === 'connector' ? pages[page]({ disableMetamask }) :  */}
-        {page ? pages[page] : null}
+        {!useRainbowKit && page === 'connector'
+          ? pages[page]({ disableMetamask })
+          : pages[page as string]}
+        {useRainbowKit && page ? pages[page] : null}
       </ModalComponent>
     </>
   );

diff --git a/src/components/masa-interface/pages/connector/connector.tsx b/src/components/masa-interface/pages/connector/connector.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
-// import { useMetamask } from '../../../../provider';
-import {
-  coinbase,
-  // metamask,
-  walletconnect,
-} from '../../../../assets';
+import { useMetamask } from '../../../../provider';
+import { coinbase, metamask, walletconnect } from '../../../../assets';
 
-// {}: {
-// disableMetamask?: boolean;
-// }
-export const InterfaceConnector = (): JSX.Element => {
-  // const { connectMetamask } = useMetamask({ disabled: disableMetamask });
+export const InterfaceConnector = ({
+  disableMetamask,
+}: {
+  disableMetamask?: boolean;
+}): JSX.Element => {
+  const { connectMetamask } = useMetamask({ disabled: disableMetamask });
 
   return (
     <div className="interface-connect">
@@ -36,10 +33,10 @@ export const InterfaceConnector = (): JSX.Element => {
         </p>
       </div>
       <div className="masa-connectors">
-        {/* <div data-cy="metaMask" className="connector" onClick={connectMetamask}>
+        <div data-cy="metaMask" className="connector" onClick={connectMetamask}>
           <p>MetaMask</p>
           <img alt="metamask" src={metamask} className="connector-image" />
-        </div> */}
+        </div>
         <div data-cy="walletConnect" className="connector disabled">
           <p>WalletConnect</p>
           <img

diff --git a/src/provider/modules/wagmi/use-wagmi.tsx b/src/provider/modules/wagmi/use-wagmi.tsx
@@ -1,4 +1,11 @@
-import { Chain, useAccount, useNetwork, useProvider, useSigner } from 'wagmi';
+import {
+  Chain,
+  useAccount,
+  useDisconnect,
+  useNetwork,
+  useProvider,
+  useSigner,
+} from 'wagmi';
 import { Signer } from 'ethers';
 import { useEffect } from 'react';
 
@@ -16,6 +23,7 @@ export const useWagmi = ({
   } = useSigner();
 
   const { isConnecting, isDisconnected } = useAccount();
+  const { disconnect } = useDisconnect();
 
   useEffect(() => {
     setSigner(signer as Signer);
@@ -30,5 +38,6 @@ export const useWagmi = ({
     signer,
     chain: chain as Chain,
     chains,
+    disconnect,
   };
 };
diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx
@@ -22,7 +22,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Component = (): JSX.Element => {
+const Component = ({ name }: { name?: string }): JSX.Element => {
   const {
     connect,
     isLoggedIn,
@@ -93,7 +93,7 @@ const Component = (): JSX.Element => {
           width: '50%',
         }}
       >
-        <h1>SDK Tester!</h1>
+        <h1>SDK Tester for {name}!</h1>
 
         <button onClick={handleConnect}>Use Masa!</button>
         <button
@@ -195,27 +195,45 @@ const Component = (): JSX.Element => {
   );
 };
 
-const Template: Story = (props: Args) => {
+const TemplateNoRainbowkit: Story = (props: Args) => {
+  return (
+    <>
+      <MasaProvider
+        company="Masa"
+        useRainbowKitWalletConnect={false}
+        forceNetwork={'goerli'}
+      >
+        <Component name="Old Connection" {...props} />
+      </MasaProvider>
+    </>
+  );
+};
+
+const TemplateWithRainbowKit: Story = (props: Args) => {
   return (
     <>
       <MasaProvider
         company="Masa"
         useRainbowKitWalletConnect={true}
         forceNetwork={'goerli'}
       >
-        <Component {...props} />
+        <Component name="Rainbow Kit" {...props} />
       </MasaProvider>
     </>
   );
 };
 
+export const RainbowkitInterface = TemplateWithRainbowKit.bind({
+  options: { scope: [] },
+});
+
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({
+export const NoRainbowkitInterface = TemplateNoRainbowkit.bind({
   options: { scope: [] },
 });
 
-Default.args = {};
+NoRainbowkitInterface.args = {};
 
 const MasaGreenTemplate: Story = (props: Args) => {
   return (