diff --git a/.eslintignore b/.eslintignore
index 1bc4ae51..7e9798dd 100644
--- a/.eslintignore
+++ b/.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
diff --git a/package.json b/package.json
index 8e63b645..f0d3f618 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 25885869..196f27c0 100644
--- a/src/components/modal/modal.tsx
+++ b/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 (
- close()}
- className="masa-rodal-container"
- >
-
-
- );
-};
+ return (
+ modal.hide()}
+ className="masa-rodal-container"
+ >
+
+
+ );
+ }
+);
diff --git a/src/refactor/config.ts b/src/refactor/config.ts
index 1a8cc494..e64d64bf 100644
--- a/src/refactor/config.ts
+++ b/src/refactor/config.ts
@@ -42,7 +42,7 @@ export const defaultConfig: Partial = {
],
allowedWallets: ['metamask', 'valora', 'walletconnect'],
masaConfig: {
- environment: 'dev' as EnvironmentName,
+ environment: 'local' as EnvironmentName,
networkName: 'ethereum' as NetworkName,
verbose: false,
arweave: {
diff --git a/src/refactor/masanew.stories.tsx b/src/refactor/masanew.stories.tsx
index b95d6a21..d1d03403 100644
--- a/src/refactor/masanew.stories.tsx
+++ b/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 = () => {
);
};
+
+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: ,
+ },
+ { condition: needsSoulnameCreation, page: 'createSoulname' },
+ { condition: needsIdentityCreation, page: 'createIdentity' },
+ { condition: needsCreditScoreCreation, page: 'createCreditScore' },
+ { condition: isConnectedState, page: },
+ { 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 (
+ <>
+
+ >
+ );
+};
+
const Component = (): JSX.Element => {
const config = useConfig();
return (
@@ -481,6 +566,8 @@ const Component = (): JSX.Element => {
+
+
);
};
@@ -507,7 +594,9 @@ const TemplateNewMasaState = (props: Args) => (
},
}}
>
-
+
+
+
);
diff --git a/src/refactor/ui/components/modals/authenticate/authenticate.tsx b/src/refactor/ui/components/modals/authenticate/authenticate.tsx
index 49d088f0..9a14aced 100644
--- a/src/refactor/ui/components/modals/authenticate/authenticate.tsx
+++ b/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 (
-
+
Wallet connected!
{message}
@@ -108,6 +109,6 @@ export const InterfaceAuthenticate = (): JSX.Element => {
)}
-
+
);
};
diff --git a/yarn.lock b/yarn.lock
index fafa70e0..e83c0f3b 100644
--- a/yarn.lock
+++ b/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"