added nice-modal-react

.eslintignore

@@ -5,7 +5,8 @@ stories
 typedoc.js
 test
 src/refactor/ui/components/modals/
-# src/components
+src/components/modal
+src/refactor/masanew.stories.tsx
 src/provider/modules/custom-sbts
 # !src/components/masa-interface/masa-interface/create-soulname/*
 jest.config.js

package.json

@@ -35,6 +35,7 @@
     "@acusti/react-code-input": "^3.11.0",
     "@babel/preset-typescript": "^7.21.5",
     "@celo/rainbowkit-celo": "^1.0.2",
+    "@ebay/nice-modal-react": "^1.2.10",
     "@masa-finance/masa-contracts-identity": "^1.8.0",
     "@masa-finance/masa-sdk": "^3.4.12",
     "@metamask/providers": "^11.0.0",

src/components/modal/modal.tsx

@@ -1,5 +1,6 @@
 import Rodal from 'rodal';
 import React, { useEffect, useMemo, useState } from 'react';
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
 
 import { useMasa } from '../../provider';
 
@@ -42,35 +43,35 @@ const useIsMobile = () => {
 };
 export interface ModalProps {
   children: React.ReactNode;
-  open: boolean;
   setOpen: (val: boolean) => void;
-  close: () => void;
   height?: number;
 }
 
-export const ModalComponent = ({
-  children,
-  open,
-  close,
-  height,
-}: ModalProps): JSX.Element => {
-  const { isMobile, height: screenHeight, width: screenWidth } = useIsMobile();
-  const { modalSize } = useMasa();
+export const ModalComponent = NiceModal.create(
+  ({ children, height }: ModalProps): JSX.Element => {
+    const {
+      isMobile,
+      height: screenHeight,
+      width: screenWidth,
+    } = useIsMobile();
+    const { modalSize } = useMasa();
+    const modal = useModal();
 
-  return (
-    <Rodal
-      data-cy="closeMasaModal"
-      height={
-        isMobile ? screenHeight : modalSize ? modalSize.height : height || 615
-      }
-      width={isMobile ? screenWidth : modalSize ? modalSize.width : 550}
-      visible={open}
-      onClose={(): void => close()}
-      className="masa-rodal-container"
-    >
-      <div className="masa-modal">
-        <div className="masa-modal-container">{children}</div>
-      </div>
-    </Rodal>
-  );
-};
+    return (
+      <Rodal
+        data-cy="closeMasaModal"
+        height={
+          isMobile ? screenHeight : modalSize ? modalSize.height : height || 615
+        }
+        width={isMobile ? screenWidth : modalSize ? modalSize.width : 550}
+        visible={modal.visible}
+        onClose={() => modal.hide()}
+        className="masa-rodal-container"
+      >
+        <div className="masa-modal">
+          <div className="masa-modal-container">{children}</div>
+        </div>
+      </Rodal>
+    );
+  }
+);

src/refactor/config.ts

@@ -42,7 +42,7 @@ export const defaultConfig: Partial<MasaReactConfig> = {
   ],
   allowedWallets: ['metamask', 'valora', 'walletconnect'],
   masaConfig: {
-    environment: 'dev' as EnvironmentName,
+    environment: 'local' as EnvironmentName,
     networkName: 'ethereum' as NetworkName,
     verbose: false,
     arweave: {

src/refactor/masanew.stories.tsx

@@ -3,9 +3,11 @@ import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'; // esl
 import type { Args, Meta } from '@storybook/react';
 import type { Chain } from 'wagmi';
 import React, { MouseEventHandler, useCallback } from 'react';
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { Button } from './ui';
 import './ui/styles.scss';
 import { useConfig } from './base-provider';
+import { useMasa } from '../provider';
 
 import { useWallet } from './wallet-client/wallet/use-wallet';
 import { useNetwork } from './wallet-client/network/use-network';
@@ -19,6 +21,10 @@ import MasaProvider from './masa-provider';
 import { useSession } from './masa/use-session';
 import { MasaQueryClientContext } from './masa-client/masa-query-client-context';
 
+import { InterfaceAuthenticate } from './ui/components/modals';
+import { InterfaceConnected } from '../components/masa-interface/pages/connected';
+import { ModalComponent } from './../components/modal';
+
 // * nextjs fix
 // * TODO: move this to index.ts file at some point
 if (typeof window !== 'undefined') {
@@ -457,6 +463,85 @@ const GreenInfo = () => {
     </ul>
   );
 };
+
+const ModalTests = () => {
+  const chainingModal = useModal(ModalComponent);
+
+  const {
+    hasAccountAddress,
+    identity,
+    isLoggedIn,
+    scope,
+    creditScores,
+    soulnames,
+    forcedPage,
+    currentNetwork,
+    forceNetwork,
+    // setForcedPage,
+    // switchNetworkNew,
+  } = useMasa();
+
+  const { hasAddress, signer, connector, openConnectModal } = useWallet();
+  const { hasSession } = useSession();
+
+  const showChainingModal = async () => {
+    // Separate complex conditions into smaller functions
+    const isForcedPage = () => forcedPage;
+    const needsWalletConnection = () => openConnectModal;
+    const needsNetworkSwitch = () =>
+      forceNetwork && currentNetwork?.networkName !== forceNetwork;
+    const needsAuthentication = () => !hasSession && signer;
+    const needsSoulnameCreation = () =>
+      isLoggedIn &&
+      (!soulnames || (soulnames && soulnames.length === 0)) &&
+      scope?.includes('soulname');
+    const needsIdentityCreation = () =>
+      scope?.includes('identity') &&
+      isLoggedIn &&
+      (!identity || !identity?.identityId);
+    const needsCreditScoreCreation = () =>
+      identity && !creditScores?.length && scope?.includes('credit-score');
+    const isConnectedState = () => hasSession && hasAddress;
+    const needsRainbowkitConnect = () => hasAccountAddress;
+
+    // Create a conditions and pages mapping
+    const conditionsAndPages = [
+      { condition: isForcedPage, page: forcedPage },
+      { condition: needsWalletConnection, page: connector },
+      { condition: needsNetworkSwitch, page: 'switchNetwork' },
+      {
+        condition: needsAuthentication,
+        page: <InterfaceAuthenticate />,
+      },
+      { condition: needsSoulnameCreation, page: 'createSoulname' },
+      { condition: needsIdentityCreation, page: 'createIdentity' },
+      { condition: needsCreditScoreCreation, page: 'createCreditScore' },
+      { condition: isConnectedState, page: <InterfaceConnected /> },
+      { condition: needsRainbowkitConnect, page: 'rainbowkitConnect' },
+    ];
+
+    const page = () => {
+      for (const { condition, page } of conditionsAndPages) {
+        if (condition()) {
+          return page;
+        }
+      }
+      return null; // default page or error handling
+    };
+    console.log({ page });
+    await chainingModal.show({
+      children: page(),
+    });
+  };
+  return (
+    <>
+      <Button type="button" onClick={showChainingModal}>
+        Show Authentication Modal
+      </Button>
+    </>
+  );
+};
+
 const Component = (): JSX.Element => {
   const config = useConfig();
   return (
@@ -481,6 +566,8 @@ const Component = (): JSX.Element => {
           </code>
         </li>
       </ul>
+
+      <ModalTests />
     </section>
   );
 };
@@ -507,7 +594,9 @@ const TemplateNewMasaState = (props: Args) => (
       },
     }}
   >
-    <Component {...props} />
+    <NiceModal.Provider>
+      <Component {...props} />
+    </NiceModal.Provider>
   </MasaProvider>
 );
 

src/refactor/ui/components/modals/authenticate/authenticate.tsx

@@ -3,10 +3,10 @@ import { useMasa } from '../../../../../provider';
 import { Spinner } from '../../spinner';
 import { useWallet } from '../../../../wallet-client/wallet/use-wallet';
 import { useSession } from '../../../../masa/use-session';
+import { useConfig } from '../../../../base-provider';
 
 export const InterfaceAuthenticate = (): JSX.Element => {
   const {
-    company,
     // setModalOpen,
     // openConnectModal,
     useRainbowKit,
@@ -21,6 +21,7 @@ export const InterfaceAuthenticate = (): JSX.Element => {
     isLoadingSigner,
   } = useWallet();
   const { hasSession, loginSessionAsync } = useSession();
+  const { company } = useConfig();
 
   const [copied, setCopied] = useState(false);
 
@@ -68,7 +69,7 @@ export const InterfaceAuthenticate = (): JSX.Element => {
   }
 
   return (
-    <section className="interface-authenticate">
+    <div className="interface-authenticate">
       <section>
         <h3 className="title">Wallet connected!</h3>
         <p className="connected-wallet">{message}</p>
@@ -108,6 +109,6 @@ export const InterfaceAuthenticate = (): JSX.Element => {
           </div>
         )}
       </section>
-    </section>
+    </div>
   );
 };

yarn.lock

@@ -1468,6 +1468,11 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/natural-compare/-/natural-compare-1.1.0.tgz#75f0642ad64701ffa9d42f1d7ada3b83f4e67cf3"
   integrity sha512-yuctPJs5lRXoI8LkpVZGAV6n+DKOuEsfpfcIDQ8ZjWHwazqk1QjBc4jMlof0UlZHyUqv4dwsOTooMiAmtzvwXA==
 
+"@ebay/nice-modal-react@^1.2.10":
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/@ebay/nice-modal-react/-/nice-modal-react-1.2.10.tgz#6b2406bfce4a5daffc43f5b85f5f238311cdfe93"
+  integrity sha512-qNp8vQo5kPRwB9bHlkh8lcwH/0KFWpp58X/b9KaLB/gNlJ3W24nCT2l/qBBSnWgV7NEIq25uLowaPS2mbfpZiw==
+
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"