From 7fe2a143d641933e18dff03eb4898667ce688b02 Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Wed, 25 Sep 2024 19:06:38 +0530 Subject: [PATCH 1/8] added feature flag for network dialog --- packages/messenger-demo/src/App.tsx | 1 + packages/messenger-widget/README.md | 23 +++++- .../src/components/Preferences/MobileView.tsx | 19 +++-- .../Preferences/Network/Network.tsx | 8 +-- .../src/components/Preferences/NormalView.tsx | 19 +++-- .../src/components/Preferences/bl.tsx | 15 ++++ .../src/context/DM3ConfigurationContext.tsx | 1 + .../src/context/ModalContext.tsx | 34 ++++----- .../testHelper/getMockedDm3Configuration.ts | 1 + packages/messenger-widget/src/demo.tsx | 1 + .../configuration/useDM3Configuration.test.ts | 1 + .../configuration/useDM3Configuration.ts | 1 + .../src/hooks/modals/useModal.ts | 71 ++++++++++++++++--- .../messenger-widget/src/interfaces/config.ts | 1 + packages/messenger-widget/src/version.ts | 2 +- .../app/components/DM3Container.tsx | 1 + 16 files changed, 142 insertions(+), 57 deletions(-) diff --git a/packages/messenger-demo/src/App.tsx b/packages/messenger-demo/src/App.tsx index a19bb5b1e..68c7dcc51 100644 --- a/packages/messenger-demo/src/App.tsx +++ b/packages/messenger-demo/src/App.tsx @@ -50,6 +50,7 @@ function App() { theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum + enableNetworkDialog: null, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( diff --git a/packages/messenger-widget/README.md b/packages/messenger-widget/README.md index 7253d2f11..17899eec5 100644 --- a/packages/messenger-widget/README.md +++ b/packages/messenger-widget/README.md @@ -89,7 +89,8 @@ Follow the below given steps :- showContacts: true, theme: undefined, signInImage: undefined, - siwe: undefined + siwe: undefined, + enableNetworkDialog: undefined, }; return ( @@ -246,6 +247,7 @@ Follow the below given steps :- theme: undefined, signInImage: undefined, siwe: undefined, + enableNetworkDialog: undefined, }; return ( @@ -453,11 +455,26 @@ Example : } ``` -7. theme +7. enableNetworkDialog +```js +const props: DM3Configuration = { + ... + enableNetworkDialog: true, +} +``` +This is a optional property of type boolean. To disable network dialog for adding and removing delivery service nodes, its value should be set to false. By default it is true and network dialog is enabled. +```js +Example : + enableNetworkDialog: true + enableNetworkDialog: false + enableNetworkDialog: undefined // its same as this property is not passed in props +``` + +8. theme ```js const props: DM3Configuration = { ... - theme: undefined, + theme: undefined, } ``` This is a optional property of type object. Its used to customize the styling, look & feel of the widget. Colors can be set for different components. diff --git a/packages/messenger-widget/src/components/Preferences/MobileView.tsx b/packages/messenger-widget/src/components/Preferences/MobileView.tsx index 6686d16a6..cce28c476 100644 --- a/packages/messenger-widget/src/components/Preferences/MobileView.tsx +++ b/packages/messenger-widget/src/components/Preferences/MobileView.tsx @@ -1,5 +1,4 @@ import './Preferences.css'; -import { preferencesItems } from './bl'; import { useContext, useEffect } from 'react'; import closeIcon from '../../assets/images/cross.svg'; import { closeConfigurationModal } from '../ConfigureProfile/bl'; @@ -12,18 +11,18 @@ export function MobileView() { setShowProfileConfigurationModal, resetConfigureProfileModal, preferencesOptionSelected, - setPreferencesOptionSelected, + preferencesOptions, + updatePreferenceSelected, } = useContext(ModalContext); - // const [optionChoosen, setOptionChoosen] = useState(null); - /** - * Opens DM3 profile configuration by default if user clicked - * on "Configure Profile" button + * Opens first option by default */ useEffect(() => { if (showProfileConfigurationModal) { - setPreferencesOptionSelected(preferencesItems[1]); + updatePreferenceSelected( + preferencesOptions.length ? preferencesOptions[0].ticker : null, + ); } }, []); @@ -50,7 +49,7 @@ export function MobileView() {
- {preferencesItems.map((item, index) => { + {preferencesOptions.map((item, index) => { return ( item.isEnabled && (
- setPreferencesOptionSelected( - item, + updatePreferenceSelected( + item.ticker, ) } > diff --git a/packages/messenger-widget/src/components/Preferences/Network/Network.tsx b/packages/messenger-widget/src/components/Preferences/Network/Network.tsx index a8013f4f5..2381d92b7 100644 --- a/packages/messenger-widget/src/components/Preferences/Network/Network.tsx +++ b/packages/messenger-widget/src/components/Preferences/Network/Network.tsx @@ -4,7 +4,7 @@ import deleteIcon from '../../../assets/images/delete.svg'; import { useContext, useEffect } from 'react'; import { DM3UserProfileContext } from '../../../context/DM3UserProfileContext'; import { ModalContext } from '../../../context/ModalContext'; -import { preferencesItems } from '../bl'; +import { PREFERENCES_ITEMS } from '../bl'; export function Network() { const heading = 'Network'; @@ -24,7 +24,7 @@ export function Network() { setError, } = useContext(DM3UserProfileContext); - const { setPreferencesOptionSelected } = useContext(ModalContext); + const { updatePreferenceSelected } = useContext(ModalContext); // input field modal should remain close on initial load of network screen useEffect(() => { @@ -80,8 +80,8 @@ export function Network() { - setPreferencesOptionSelected( - preferencesItems[1], + updatePreferenceSelected( + PREFERENCES_ITEMS.DM3_PROFILE, ) } > diff --git a/packages/messenger-widget/src/components/Preferences/NormalView.tsx b/packages/messenger-widget/src/components/Preferences/NormalView.tsx index 726d68f0f..48ff555b2 100644 --- a/packages/messenger-widget/src/components/Preferences/NormalView.tsx +++ b/packages/messenger-widget/src/components/Preferences/NormalView.tsx @@ -1,5 +1,4 @@ import './Preferences.css'; -import { preferencesItems } from './bl'; import infoIcon from './../../assets/images/preferences-info.svg'; import { useContext, useEffect, useState } from 'react'; import closeIcon from '../../assets/images/cross.svg'; @@ -13,18 +12,18 @@ export function NormalView() { setShowProfileConfigurationModal, resetConfigureProfileModal, preferencesOptionSelected, - setPreferencesOptionSelected, + updatePreferenceSelected, + preferencesOptions, } = useContext(ModalContext); - // const [optionChoosen, setOptionChoosen] = useState(null); - /** - * Opens DM3 profile configuration by default if user clicked - * on "Configure Profile" button + * Opens first option by default */ useEffect(() => { if (showProfileConfigurationModal) { - setPreferencesOptionSelected(preferencesItems[1]); + updatePreferenceSelected( + preferencesOptions.length ? preferencesOptions[0].ticker : null, + ); } }, []); @@ -68,7 +67,7 @@ export function NormalView() {
- {preferencesItems.map((item, index) => { + {preferencesOptions.map((item, index) => { return ( item.isEnabled && (
- setPreferencesOptionSelected( - item, + updatePreferenceSelected( + item.ticker, ) } > diff --git a/packages/messenger-widget/src/components/Preferences/bl.tsx b/packages/messenger-widget/src/components/Preferences/bl.tsx index 7ad12578b..9f84bcb8f 100644 --- a/packages/messenger-widget/src/components/Preferences/bl.tsx +++ b/packages/messenger-widget/src/components/Preferences/bl.tsx @@ -11,6 +11,15 @@ import { Network } from './Network/Network'; import { Storage } from './Storage/Storage'; import { DM3Profile } from './DM3Profile/DM3Profile'; +export enum PREFERENCES_ITEMS { + PROPERTIES = 'PROPERTIES', + DM3_PROFILE = 'DM3_PROFILE', + SPAM = 'SPAM', + NOTIFICATION = 'NOTIFICATION', + NETWORK = 'NETWORK', + STORAGE = 'STORAGE', +} + export const preferencesItems = [ { icon: ( @@ -22,18 +31,21 @@ export const preferencesItems = [ ), name: 'Properties', component: , + ticker: PREFERENCES_ITEMS.PROPERTIES, isEnabled: false, }, { icon: dm3, name: 'dm3 Profile', component: , + ticker: PREFERENCES_ITEMS.DM3_PROFILE, isEnabled: true, }, { icon: spam, name: 'Spam Protection', component: , + ticker: PREFERENCES_ITEMS.SPAM, isEnabled: false, }, { @@ -46,6 +58,7 @@ export const preferencesItems = [ ), name: 'Notification', component: , + ticker: PREFERENCES_ITEMS.NOTIFICATION, isEnabled: true, }, { @@ -54,6 +67,7 @@ export const preferencesItems = [ ), name: 'Network', component: , + ticker: PREFERENCES_ITEMS.NETWORK, isEnabled: true, }, { @@ -62,6 +76,7 @@ export const preferencesItems = [ ), name: 'Storage', component: , + ticker: PREFERENCES_ITEMS.STORAGE, isEnabled: false, }, ]; diff --git a/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx b/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx index 350e60402..1f80e1a56 100644 --- a/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx +++ b/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx @@ -32,6 +32,7 @@ export const DM3ConfigurationContext = showContacts: true, publicVapidKey: '', nonce: '', + enableNetworkDialog: true, }, screenWidth: window.innerWidth, setScreenWidth: (width: number) => {}, diff --git a/packages/messenger-widget/src/context/ModalContext.tsx b/packages/messenger-widget/src/context/ModalContext.tsx index 57b143007..db484de91 100644 --- a/packages/messenger-widget/src/context/ModalContext.tsx +++ b/packages/messenger-widget/src/context/ModalContext.tsx @@ -8,9 +8,10 @@ import { import { IConfigureProfileModal, IOpenEmojiPopup, + PreferencesOptionType, useModal, } from '../hooks/modals/useModal'; -import { preferencesItems } from '../components/Preferences/bl'; +import { PREFERENCES_ITEMS } from '../components/Preferences/bl'; export type ModalContextType = { loaderContent: string; @@ -35,18 +36,10 @@ export type ModalContextType = { setConfigureProfileModal: (modal: IConfigureProfileModal) => void; resetConfigureProfileModal: () => void; resetModalStates: () => void; - preferencesOptionSelected: { - icon: JSX.Element; - name: string; - component: JSX.Element; - isEnabled: boolean; - }; - setPreferencesOptionSelected: (item: { - icon: JSX.Element; - name: string; - component: JSX.Element; - isEnabled: boolean; - }) => void; + preferencesOptionSelected: PreferencesOptionType | null; + setPreferencesOptionSelected: (item: PreferencesOptionType | null) => void; + preferencesOptions: PreferencesOptionType[]; + updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => void; }; export const ModalContext = React.createContext({ @@ -79,13 +72,10 @@ export const ModalContext = React.createContext({ setConfigureProfileModal: (modal: IConfigureProfileModal) => {}, resetConfigureProfileModal: () => {}, resetModalStates: () => {}, - preferencesOptionSelected: preferencesItems[1], - setPreferencesOptionSelected: (item: { - icon: JSX.Element; - name: string; - component: JSX.Element; - isEnabled: boolean; - }) => {}, + preferencesOptionSelected: null, + setPreferencesOptionSelected: (item: PreferencesOptionType | null) => {}, + preferencesOptions: [], + updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => {}, }); export const ModalContextProvider = ({ children }: { children?: any }) => { @@ -113,6 +103,8 @@ export const ModalContextProvider = ({ children }: { children?: any }) => { resetConfigureProfileModal, preferencesOptionSelected, setPreferencesOptionSelected, + preferencesOptions, + updatePreferenceSelected, resetModalStates, } = useModal(); @@ -143,6 +135,8 @@ export const ModalContextProvider = ({ children }: { children?: any }) => { resetConfigureProfileModal, preferencesOptionSelected, setPreferencesOptionSelected, + preferencesOptions, + updatePreferenceSelected, }} > {children} diff --git a/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts b/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts index be51fec23..175fe5bae 100644 --- a/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts +++ b/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts @@ -28,4 +28,5 @@ export const DEFAULT_DM3_CONFIGURATION = { showContacts: false, publicVapidKey: '', nonce: '', + enableNetworkDialog: true, }; diff --git a/packages/messenger-widget/src/demo.tsx b/packages/messenger-widget/src/demo.tsx index c458bb1ea..2e363970f 100644 --- a/packages/messenger-widget/src/demo.tsx +++ b/packages/messenger-widget/src/demo.tsx @@ -23,6 +23,7 @@ export function Demo() { theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum + enableNetworkDialog: true, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( diff --git a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts index 94bcaa117..aa209c363 100644 --- a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts +++ b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts @@ -20,6 +20,7 @@ const config: DM3Configuration = { showContacts: true, publicVapidKey: '', nonce: '', + enableNetworkDialog: true, }; describe('useDM3Configuration hook test cases', () => { diff --git a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts index 6edc91965..c46dc9f19 100644 --- a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts +++ b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts @@ -29,6 +29,7 @@ export const useDm3Configuration = () => { showContacts: true, publicVapidKey: '', nonce: '', + enableNetworkDialog: true, }); const validateSiweCredentials = async (data: Siwe) => { diff --git a/packages/messenger-widget/src/hooks/modals/useModal.ts b/packages/messenger-widget/src/hooks/modals/useModal.ts index 0274e715e..014ca37fd 100644 --- a/packages/messenger-widget/src/hooks/modals/useModal.ts +++ b/packages/messenger-widget/src/hooks/modals/useModal.ts @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { NewContact } from '../../interfaces/utils'; import { MessageProps } from '../../interfaces/props'; import { @@ -6,7 +6,11 @@ import { ProfileScreenType, ProfileType, } from '../../utils/enum-type-utils'; -import { preferencesItems } from '../../components/Preferences/bl'; +import { + PREFERENCES_ITEMS, + preferencesItems, +} from '../../components/Preferences/bl'; +import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext'; export interface IOpenEmojiPopup { action: boolean; @@ -18,6 +22,14 @@ export interface IConfigureProfileModal { onScreen: ProfileScreenType; } +export type PreferencesOptionType = { + icon: JSX.Element; + name: string; + component: JSX.Element; + isEnabled: boolean; + ticker: PREFERENCES_ITEMS; +}; + export const useModal = () => { const [loaderContent, setLoaderContent] = useState(''); @@ -56,12 +68,14 @@ export const useModal = () => { onScreen: ProfileScreenType.NONE, }); - const [preferencesOptionSelected, setPreferencesOptionSelected] = useState<{ - icon: JSX.Element; - name: string; - component: JSX.Element; - isEnabled: boolean; - }>(preferencesItems[1]); + const [preferencesOptions, setPreferencesOptions] = useState< + PreferencesOptionType[] + >([]); + + const [preferencesOptionSelected, setPreferencesOptionSelected] = + useState(null); + + const { dm3Configuration } = useContext(DM3ConfigurationContext); const resetConfigureProfileModal = () => { setConfigureProfileModal({ @@ -87,9 +101,46 @@ export const useModal = () => { profileOptionSelected: ProfileType.DM3_NAME, onScreen: ProfileScreenType.NONE, }); - setPreferencesOptionSelected(preferencesItems[1]); + setPreferencesOptions(preferencesItems); + setPreferencesOptionSelected(null); }; + const configureOptionsOfPreferences = () => { + const prefState = [...preferencesItems]; + + // enable or disable network dialog + if ( + dm3Configuration.enableNetworkDialog !== undefined && + dm3Configuration.enableNetworkDialog !== null + ) { + const updatedStates = prefState.map((pref) => { + return { + ...pref, + isEnabled: + pref.ticker === PREFERENCES_ITEMS.NETWORK + ? dm3Configuration.enableNetworkDialog + : pref.isEnabled, + }; + }); + setPreferencesOptions(updatedStates as PreferencesOptionType[]); + } + }; + + const updatePreferenceSelected = (ticker: PREFERENCES_ITEMS | null) => { + setPreferencesOptionSelected( + ticker + ? preferencesOptions.find( + (p) => p.ticker === ticker && p.isEnabled, + ) ?? null + : null, + ); + }; + + // configure dialog to show properties in preferences modal + useEffect(() => { + configureOptionsOfPreferences(); + }, [dm3Configuration]); + return { loaderContent, setLoaderContent, @@ -115,5 +166,7 @@ export const useModal = () => { resetConfigureProfileModal, preferencesOptionSelected, setPreferencesOptionSelected, + preferencesOptions, + updatePreferenceSelected, }; }; diff --git a/packages/messenger-widget/src/interfaces/config.ts b/packages/messenger-widget/src/interfaces/config.ts index edf9d212d..bf958bb32 100644 --- a/packages/messenger-widget/src/interfaces/config.ts +++ b/packages/messenger-widget/src/interfaces/config.ts @@ -18,6 +18,7 @@ export interface DM3Configuration { theme?: any; signInImage?: string; siwe?: Siwe; + enableNetworkDialog?: boolean; } export interface Dm3Props { diff --git a/packages/messenger-widget/src/version.ts b/packages/messenger-widget/src/version.ts index 906d0451a..824005cf5 100644 --- a/packages/messenger-widget/src/version.ts +++ b/packages/messenger-widget/src/version.ts @@ -1 +1 @@ -export const version = '1.6.0'; +export const version = '1.6.1'; diff --git a/packages/next-messenger-demo/app/components/DM3Container.tsx b/packages/next-messenger-demo/app/components/DM3Container.tsx index 5b25db6b2..81f36c3a5 100644 --- a/packages/next-messenger-demo/app/components/DM3Container.tsx +++ b/packages/next-messenger-demo/app/components/DM3Container.tsx @@ -26,6 +26,7 @@ export default function DM3Container() { showContacts: true, // true for all contacts / false for default contact theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image + enableNetworkDialog: null, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( From d3c52235d33d8e4a5f3e8dee9acd7859df29c6cd Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Wed, 25 Sep 2024 19:29:35 +0530 Subject: [PATCH 2/8] fixed type of enable network dialog in reference app --- packages/messenger-demo/src/App.tsx | 2 +- packages/next-messenger-demo/app/components/DM3Container.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/messenger-demo/src/App.tsx b/packages/messenger-demo/src/App.tsx index 68c7dcc51..cf47601a4 100644 --- a/packages/messenger-demo/src/App.tsx +++ b/packages/messenger-demo/src/App.tsx @@ -50,7 +50,7 @@ function App() { theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum - enableNetworkDialog: null, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + enableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( diff --git a/packages/next-messenger-demo/app/components/DM3Container.tsx b/packages/next-messenger-demo/app/components/DM3Container.tsx index 81f36c3a5..8da380ade 100644 --- a/packages/next-messenger-demo/app/components/DM3Container.tsx +++ b/packages/next-messenger-demo/app/components/DM3Container.tsx @@ -26,7 +26,7 @@ export default function DM3Container() { showContacts: true, // true for all contacts / false for default contact theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image - enableNetworkDialog: null, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + enableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( From 41bc9de17624707448b71109a7b3e7b50aa9ae1c Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Thu, 26 Sep 2024 11:30:29 +0530 Subject: [PATCH 3/8] changed network flag property name --- packages/messenger-demo/src/App.tsx | 2 +- packages/messenger-widget/README.md | 16 ++++++++-------- .../src/context/DM3ConfigurationContext.tsx | 2 +- .../testHelper/getMockedDm3Configuration.ts | 2 +- packages/messenger-widget/src/demo.tsx | 2 +- .../configuration/useDM3Configuration.test.ts | 2 +- .../hooks/configuration/useDM3Configuration.ts | 2 +- .../src/hooks/modals/useModal.ts | 6 +++--- .../messenger-widget/src/interfaces/config.ts | 2 +- .../app/components/DM3Container.tsx | 2 +- 10 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/messenger-demo/src/App.tsx b/packages/messenger-demo/src/App.tsx index cf47601a4..f95358d82 100644 --- a/packages/messenger-demo/src/App.tsx +++ b/packages/messenger-demo/src/App.tsx @@ -50,7 +50,7 @@ function App() { theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum - enableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + disableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( diff --git a/packages/messenger-widget/README.md b/packages/messenger-widget/README.md index 17899eec5..d8e2c62da 100644 --- a/packages/messenger-widget/README.md +++ b/packages/messenger-widget/README.md @@ -90,7 +90,7 @@ Follow the below given steps :- theme: undefined, signInImage: undefined, siwe: undefined, - enableNetworkDialog: undefined, + disableNetworkDialog: undefined, }; return ( @@ -247,7 +247,7 @@ Follow the below given steps :- theme: undefined, signInImage: undefined, siwe: undefined, - enableNetworkDialog: undefined, + disableNetworkDialog: undefined, }; return ( @@ -455,19 +455,19 @@ Example : } ``` -7. enableNetworkDialog +7. disableNetworkDialog ```js const props: DM3Configuration = { ... - enableNetworkDialog: true, + disableNetworkDialog: true, } ``` -This is a optional property of type boolean. To disable network dialog for adding and removing delivery service nodes, its value should be set to false. By default it is true and network dialog is enabled. +This is a optional property of type boolean. To disable network dialog for adding and removing delivery service nodes, its value should be set to true. By default it is false and network dialog is enabled. ```js Example : - enableNetworkDialog: true - enableNetworkDialog: false - enableNetworkDialog: undefined // its same as this property is not passed in props + disableNetworkDialog: true + disableNetworkDialog: false + disableNetworkDialog: undefined // its same as this property is not passed in props ``` 8. theme diff --git a/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx b/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx index 1f80e1a56..358252417 100644 --- a/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx +++ b/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx @@ -32,7 +32,7 @@ export const DM3ConfigurationContext = showContacts: true, publicVapidKey: '', nonce: '', - enableNetworkDialog: true, + disableNetworkDialog: false, }, screenWidth: window.innerWidth, setScreenWidth: (width: number) => {}, diff --git a/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts b/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts index 175fe5bae..b7394d106 100644 --- a/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts +++ b/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts @@ -28,5 +28,5 @@ export const DEFAULT_DM3_CONFIGURATION = { showContacts: false, publicVapidKey: '', nonce: '', - enableNetworkDialog: true, + disableNetworkDialog: false, }; diff --git a/packages/messenger-widget/src/demo.tsx b/packages/messenger-widget/src/demo.tsx index 2e363970f..5831a93e7 100644 --- a/packages/messenger-widget/src/demo.tsx +++ b/packages/messenger-widget/src/demo.tsx @@ -23,7 +23,7 @@ export function Demo() { theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum - enableNetworkDialog: true, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + disableNetworkDialog: true, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( diff --git a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts index aa209c363..7a947b51f 100644 --- a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts +++ b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts @@ -20,7 +20,7 @@ const config: DM3Configuration = { showContacts: true, publicVapidKey: '', nonce: '', - enableNetworkDialog: true, + disableNetworkDialog: true, }; describe('useDM3Configuration hook test cases', () => { diff --git a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts index c46dc9f19..6ec772e82 100644 --- a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts +++ b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts @@ -29,7 +29,7 @@ export const useDm3Configuration = () => { showContacts: true, publicVapidKey: '', nonce: '', - enableNetworkDialog: true, + disableNetworkDialog: false, }); const validateSiweCredentials = async (data: Siwe) => { diff --git a/packages/messenger-widget/src/hooks/modals/useModal.ts b/packages/messenger-widget/src/hooks/modals/useModal.ts index 014ca37fd..c05dbf30d 100644 --- a/packages/messenger-widget/src/hooks/modals/useModal.ts +++ b/packages/messenger-widget/src/hooks/modals/useModal.ts @@ -110,15 +110,15 @@ export const useModal = () => { // enable or disable network dialog if ( - dm3Configuration.enableNetworkDialog !== undefined && - dm3Configuration.enableNetworkDialog !== null + dm3Configuration.disableNetworkDialog !== undefined && + dm3Configuration.disableNetworkDialog !== null ) { const updatedStates = prefState.map((pref) => { return { ...pref, isEnabled: pref.ticker === PREFERENCES_ITEMS.NETWORK - ? dm3Configuration.enableNetworkDialog + ? !dm3Configuration.disableNetworkDialog : pref.isEnabled, }; }); diff --git a/packages/messenger-widget/src/interfaces/config.ts b/packages/messenger-widget/src/interfaces/config.ts index bf958bb32..aad43e7d5 100644 --- a/packages/messenger-widget/src/interfaces/config.ts +++ b/packages/messenger-widget/src/interfaces/config.ts @@ -18,7 +18,7 @@ export interface DM3Configuration { theme?: any; signInImage?: string; siwe?: Siwe; - enableNetworkDialog?: boolean; + disableNetworkDialog?: boolean; } export interface Dm3Props { diff --git a/packages/next-messenger-demo/app/components/DM3Container.tsx b/packages/next-messenger-demo/app/components/DM3Container.tsx index 8da380ade..c86f8571f 100644 --- a/packages/next-messenger-demo/app/components/DM3Container.tsx +++ b/packages/next-messenger-demo/app/components/DM3Container.tsx @@ -26,7 +26,7 @@ export default function DM3Container() { showContacts: true, // true for all contacts / false for default contact theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image - enableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + disableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes }; return ( From e8626aea35318f7f94c1d100e000494f9a57fe55 Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Thu, 26 Sep 2024 19:19:25 +0530 Subject: [PATCH 4/8] added flag for notification and network --- packages/messenger-widget/README.md | 39 ++++-- .../Preferences/Notification/Notification.tsx | 125 ++++++++++-------- .../src/context/DM3ConfigurationContext.tsx | 1 - .../src/context/ModalContext.tsx | 8 ++ packages/messenger-widget/src/demo.tsx | 2 +- .../configuration/useDM3Configuration.test.ts | 1 - .../configuration/useDM3Configuration.ts | 1 - .../src/hooks/modals/useModal.ts | 71 +++++++++- .../messenger-widget/src/interfaces/config.ts | 30 ++++- 9 files changed, 201 insertions(+), 77 deletions(-) diff --git a/packages/messenger-widget/README.md b/packages/messenger-widget/README.md index d8e2c62da..da3d62201 100644 --- a/packages/messenger-widget/README.md +++ b/packages/messenger-widget/README.md @@ -90,7 +90,7 @@ Follow the below given steps :- theme: undefined, signInImage: undefined, siwe: undefined, - disableNetworkDialog: undefined, + disableDialogOptions: undefined, }; return ( @@ -247,7 +247,7 @@ Follow the below given steps :- theme: undefined, signInImage: undefined, siwe: undefined, - disableNetworkDialog: undefined, + disableDialogOptions: undefined, }; return ( @@ -455,19 +455,42 @@ Example : } ``` -7. disableNetworkDialog +7. disableDialogOptions ```js const props: DM3Configuration = { ... - disableNetworkDialog: true, + disableDialogOptions: true, } ``` -This is a optional property of type boolean. To disable network dialog for adding and removing delivery service nodes, its value should be set to true. By default it is false and network dialog is enabled. +This is a optional property of type DisableDialogType. To disable all the properties of dialog set it true. By default all properties are active. All the properties of each category is optional. ```js Example : - disableNetworkDialog: true - disableNetworkDialog: false - disableNetworkDialog: undefined // its same as this property is not passed in props + disableDialogOptions: true + disableDialogOptions: false + disableDialogOptions: undefined + disableDialogOptions: { + network: true, + notification: { + email: true, + push: false, + }, + profile: { + dm3: boolean | { + cloud: false, + optimism: true, + }, + self: boolean | { + gnosis: true, + ens: false, + } + } + } + disableDialogOptions: { + notification: { + email: true, + push: false, + }, + } ``` 8. theme diff --git a/packages/messenger-widget/src/components/Preferences/Notification/Notification.tsx b/packages/messenger-widget/src/components/Preferences/Notification/Notification.tsx index 6f56047d8..7bffe938d 100644 --- a/packages/messenger-widget/src/components/Preferences/Notification/Notification.tsx +++ b/packages/messenger-widget/src/components/Preferences/Notification/Notification.tsx @@ -10,6 +10,7 @@ import { getVerficationModalContent } from './hooks/VerificationContent'; import { DM3ConfigurationContext } from '../../../context/DM3ConfigurationContext'; import { NotificationContext } from '../../../context/NotificationContext'; import loader from '../../../assets/images/loader.svg'; +import { ModalContext } from '../../../context/ModalContext'; export function Notification() { const { screenWidth } = useContext(DM3ConfigurationContext); @@ -44,6 +45,8 @@ export function Notification() { loaderData, } = useContext(NotificationContext); + const { disabledNotification } = useContext(ModalContext); + return (
@@ -85,55 +88,59 @@ export function Notification() {
{/* Email notifications enabled/disabled */} -
-
- +
+ + toggleSpecificNotificationChannel( + !isEmailActive, + NotificationChannelType.EMAIL, + setIsEmailActive, + ) + } + heading="Email" + /> + {email && isNotificationsActive ? ( + + ) : ( + { + setActiveVerification( + NotificationChannelType.EMAIL, + ); + setActiveVerificationContent( + getVerficationModalContent( + NotificationChannelType.EMAIL, + setActiveVerification, + setEmail, + ), + ); + }} + /> + )} +
+ - toggleSpecificNotificationChannel( - !isEmailActive, - NotificationChannelType.EMAIL, - setIsEmailActive, - ) + text={ + 'An email is sent to inform you that a message is waiting for you at a delivery service.' } - heading="Email" /> - {email && isNotificationsActive ? ( - - ) : ( - { - setActiveVerification( - NotificationChannelType.EMAIL, - ); - setActiveVerificationContent( - getVerficationModalContent( - NotificationChannelType.EMAIL, - setActiveVerification, - setEmail, - ), - ); - }} - /> - )} + + Experimental function. Do not use in production! +
- - - Experimental function. Do not use in production! - -
+ )} {/* Mobile notifications enabled/disabled */} {/*
@@ -179,22 +186,24 @@ export function Notification() {
*/} {/* Push notifications enabled/disabled */} -
-
- +
+ + pushNotificationAction(!isPushNotifyActive) + } + heading="Push Notifications" + /> +
+ - pushNotificationAction(!isPushNotifyActive) - } - heading="Push Notifications" + text={'Enable push notifications to your browser.'} />
- -
+ )}
); } diff --git a/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx b/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx index 358252417..350e60402 100644 --- a/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx +++ b/packages/messenger-widget/src/context/DM3ConfigurationContext.tsx @@ -32,7 +32,6 @@ export const DM3ConfigurationContext = showContacts: true, publicVapidKey: '', nonce: '', - disableNetworkDialog: false, }, screenWidth: window.innerWidth, setScreenWidth: (width: number) => {}, diff --git a/packages/messenger-widget/src/context/ModalContext.tsx b/packages/messenger-widget/src/context/ModalContext.tsx index db484de91..ebedbce47 100644 --- a/packages/messenger-widget/src/context/ModalContext.tsx +++ b/packages/messenger-widget/src/context/ModalContext.tsx @@ -6,6 +6,7 @@ import { ProfileType, } from '../utils/enum-type-utils'; import { + DisabledNotificationType, IConfigureProfileModal, IOpenEmojiPopup, PreferencesOptionType, @@ -40,6 +41,7 @@ export type ModalContextType = { setPreferencesOptionSelected: (item: PreferencesOptionType | null) => void; preferencesOptions: PreferencesOptionType[]; updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => void; + disabledNotification: DisabledNotificationType; }; export const ModalContext = React.createContext({ @@ -76,6 +78,10 @@ export const ModalContext = React.createContext({ setPreferencesOptionSelected: (item: PreferencesOptionType | null) => {}, preferencesOptions: [], updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => {}, + disabledNotification: { + email: false, + push: false, + }, }); export const ModalContextProvider = ({ children }: { children?: any }) => { @@ -106,6 +112,7 @@ export const ModalContextProvider = ({ children }: { children?: any }) => { preferencesOptions, updatePreferenceSelected, resetModalStates, + disabledNotification, } = useModal(); return ( @@ -137,6 +144,7 @@ export const ModalContextProvider = ({ children }: { children?: any }) => { setPreferencesOptionSelected, preferencesOptions, updatePreferenceSelected, + disabledNotification, }} > {children} diff --git a/packages/messenger-widget/src/demo.tsx b/packages/messenger-widget/src/demo.tsx index 5831a93e7..71d03d241 100644 --- a/packages/messenger-widget/src/demo.tsx +++ b/packages/messenger-widget/src/demo.tsx @@ -23,7 +23,7 @@ export function Demo() { theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum - disableNetworkDialog: true, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties }; return ( diff --git a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts index 7a947b51f..94bcaa117 100644 --- a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts +++ b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts @@ -20,7 +20,6 @@ const config: DM3Configuration = { showContacts: true, publicVapidKey: '', nonce: '', - disableNetworkDialog: true, }; describe('useDM3Configuration hook test cases', () => { diff --git a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts index 6ec772e82..6edc91965 100644 --- a/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts +++ b/packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts @@ -29,7 +29,6 @@ export const useDm3Configuration = () => { showContacts: true, publicVapidKey: '', nonce: '', - disableNetworkDialog: false, }); const validateSiweCredentials = async (data: Siwe) => { diff --git a/packages/messenger-widget/src/hooks/modals/useModal.ts b/packages/messenger-widget/src/hooks/modals/useModal.ts index c05dbf30d..4be2c4fdb 100644 --- a/packages/messenger-widget/src/hooks/modals/useModal.ts +++ b/packages/messenger-widget/src/hooks/modals/useModal.ts @@ -30,6 +30,11 @@ export type PreferencesOptionType = { ticker: PREFERENCES_ITEMS; }; +export type DisabledNotificationType = { + email: boolean; + push: boolean; +}; + export const useModal = () => { const [loaderContent, setLoaderContent] = useState(''); @@ -75,6 +80,12 @@ export const useModal = () => { const [preferencesOptionSelected, setPreferencesOptionSelected] = useState(null); + const [disabledNotification, setDisabledNotification] = + useState({ + email: false, + push: false, + }); + const { dm3Configuration } = useContext(DM3ConfigurationContext); const resetConfigureProfileModal = () => { @@ -107,23 +118,70 @@ export const useModal = () => { const configureOptionsOfPreferences = () => { const prefState = [...preferencesItems]; + const dialogDisabled = dm3Configuration.disableDialogOptions; - // enable or disable network dialog + // disable all properties of preferences config + if (dialogDisabled !== undefined && dialogDisabled === true) { + const disabledOptions = prefState.map((p) => { + return { + ...p, + isEnabled: false, + }; + }); + setPreferencesOptions(disabledOptions); + return; + } + + // disable specific properties of dialog if ( - dm3Configuration.disableNetworkDialog !== undefined && - dm3Configuration.disableNetworkDialog !== null + dialogDisabled !== undefined && + typeof dialogDisabled === 'object' ) { - const updatedStates = prefState.map((pref) => { + // update network dialog + const updatedNetworkOptions = prefState.map((pref) => { return { ...pref, isEnabled: pref.ticker === PREFERENCES_ITEMS.NETWORK - ? !dm3Configuration.disableNetworkDialog + ? !dialogDisabled.network ?? pref.isEnabled : pref.isEnabled, }; }); - setPreferencesOptions(updatedStates as PreferencesOptionType[]); + + // disable notification dialog + const updatedNotificationOptions = + dialogDisabled.notification === true + ? updatedNetworkOptions.map((pref) => { + return { + ...pref, + isEnabled: + pref.ticker === PREFERENCES_ITEMS.NOTIFICATION + ? false + : pref.isEnabled, + }; + }) + : updatedNetworkOptions; + + // disable specific notification type + if (typeof dialogDisabled.notification === 'object') { + const disabledNotifications = { ...disabledNotification }; + disabledNotifications.email = + dialogDisabled.notification.email ?? + disabledNotifications.email; + disabledNotifications.push = + dialogDisabled.notification.push ?? + disabledNotifications.push; + setDisabledNotification(disabledNotifications); + } + + setPreferencesOptions( + updatedNotificationOptions as PreferencesOptionType[], + ); + return; } + + // update the preferences options as per configuration + setPreferencesOptions(prefState); }; const updatePreferenceSelected = (ticker: PREFERENCES_ITEMS | null) => { @@ -168,5 +226,6 @@ export const useModal = () => { setPreferencesOptionSelected, preferencesOptions, updatePreferenceSelected, + disabledNotification, }; }; diff --git a/packages/messenger-widget/src/interfaces/config.ts b/packages/messenger-widget/src/interfaces/config.ts index aad43e7d5..0bc7374a7 100644 --- a/packages/messenger-widget/src/interfaces/config.ts +++ b/packages/messenger-widget/src/interfaces/config.ts @@ -1,3 +1,31 @@ +export type DisableDialogType = + | boolean + | { + network?: boolean; + notification?: + | boolean + | { + email?: boolean; + push?: boolean; + }; + profile?: + | boolean + | { + dm3?: + | boolean + | { + cloud?: boolean; + optimism?: boolean; + }; + self?: + | boolean + | { + gnosis: boolean; + ens: boolean; + }; + }; + }; + export interface DM3Configuration { defaultContact: string; defaultServiceUrl: string; @@ -18,7 +46,7 @@ export interface DM3Configuration { theme?: any; signInImage?: string; siwe?: Siwe; - disableNetworkDialog?: boolean; + disableDialogOptions?: DisableDialogType; } export interface Dm3Props { From c966a1f090a3c0ede5222b1a9496f05b0a264f36 Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Thu, 26 Sep 2024 19:29:53 +0530 Subject: [PATCH 5/8] fixed broken build --- packages/messenger-demo/src/App.tsx | 2 +- packages/next-messenger-demo/app/components/DM3Container.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/messenger-demo/src/App.tsx b/packages/messenger-demo/src/App.tsx index f95358d82..33046485e 100644 --- a/packages/messenger-demo/src/App.tsx +++ b/packages/messenger-demo/src/App.tsx @@ -50,7 +50,7 @@ function App() { theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum - disableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties }; return ( diff --git a/packages/next-messenger-demo/app/components/DM3Container.tsx b/packages/next-messenger-demo/app/components/DM3Container.tsx index c86f8571f..0eb5b78fb 100644 --- a/packages/next-messenger-demo/app/components/DM3Container.tsx +++ b/packages/next-messenger-demo/app/components/DM3Container.tsx @@ -26,7 +26,7 @@ export default function DM3Container() { showContacts: true, // true for all contacts / false for default contact theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors signInImage: undefined, // OPTIONAL PARAMETER : string URL of image - disableNetworkDialog: undefined, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes + disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties }; return ( From ddea9397717dabc5db61dd64a6a97f3cc2a065bc Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Fri, 27 Sep 2024 12:48:36 +0530 Subject: [PATCH 6/8] profile config flag --- .../src/hooks/modals/useModal.ts | 44 ++++++++++++++----- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/messenger-widget/src/hooks/modals/useModal.ts b/packages/messenger-widget/src/hooks/modals/useModal.ts index 4be2c4fdb..5442447e2 100644 --- a/packages/messenger-widget/src/hooks/modals/useModal.ts +++ b/packages/messenger-widget/src/hooks/modals/useModal.ts @@ -35,6 +35,13 @@ export type DisabledNotificationType = { push: boolean; }; +export type DisabledProfileType = { + dm3: boolean; + optimism: boolean; + ens: boolean; + gnosis: boolean; +} + export const useModal = () => { const [loaderContent, setLoaderContent] = useState(''); @@ -152,14 +159,14 @@ export const useModal = () => { const updatedNotificationOptions = dialogDisabled.notification === true ? updatedNetworkOptions.map((pref) => { - return { - ...pref, - isEnabled: - pref.ticker === PREFERENCES_ITEMS.NOTIFICATION - ? false - : pref.isEnabled, - }; - }) + return { + ...pref, + isEnabled: + pref.ticker === PREFERENCES_ITEMS.NOTIFICATION + ? false + : pref.isEnabled, + }; + }) : updatedNetworkOptions; // disable specific notification type @@ -174,8 +181,23 @@ export const useModal = () => { setDisabledNotification(disabledNotifications); } + // disable profile dialog + const updatedProfileOptions = + dialogDisabled.profile === true + ? updatedNetworkOptions.map((pref) => { + return { + ...pref, + isEnabled: + pref.ticker === PREFERENCES_ITEMS.DM3_PROFILE + ? false + : pref.isEnabled, + }; + }) + : updatedNetworkOptions; + + setPreferencesOptions( - updatedNotificationOptions as PreferencesOptionType[], + updatedProfileOptions as PreferencesOptionType[], ); return; } @@ -188,8 +210,8 @@ export const useModal = () => { setPreferencesOptionSelected( ticker ? preferencesOptions.find( - (p) => p.ticker === ticker && p.isEnabled, - ) ?? null + (p) => p.ticker === ticker && p.isEnabled, + ) ?? null : null, ); }; From da554eec8eba01ed7c2fe4afb90f3384b2a1c53b Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Mon, 30 Sep 2024 20:26:36 +0530 Subject: [PATCH 7/8] added feature flag for profile --- .../ConfigureProfile/CloudStorage.tsx | 24 ++- .../ConfigureProfile/MobileView.tsx | 8 +- .../ConfigureProfile/NormalView.tsx | 8 +- .../ConfigureProfile/OwnStorage.tsx | 24 ++- .../ConfigureProfile/ProfileTypeSelector.tsx | 78 +++++---- .../src/components/ConfigureProfile/bl.tsx | 7 + .../context/ConfigureProfileContext.tsx | 26 ++- .../ConfigureProfileBox.tsx | 11 +- .../src/components/Preferences/MobileView.tsx | 2 +- .../src/components/Preferences/NormalView.tsx | 2 +- .../Preferences/Notification/Notification.tsx | 6 +- .../src/components/Profile/Profile.tsx | 8 +- .../src/context/ModalContext.tsx | 30 +++- .../src/hooks/modals/useModal.ts | 154 +++++++++++++----- 14 files changed, 277 insertions(+), 111 deletions(-) diff --git a/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx index e2f5c7093..2549f3cff 100644 --- a/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx +++ b/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx @@ -17,7 +17,7 @@ export function CloudStorage() { const { existingDm3Name } = useContext(ConfigureDM3NameContext); - const { configureProfileModal, setConfigureProfileModal } = + const { configureProfileModal, setConfigureProfileModal, disabledOptions } = useContext(ModalContext); const isNameAlreadyConfigured = (): boolean => { @@ -76,13 +76,21 @@ export function CloudStorage() { }} > {dm3NamingServices && - dm3NamingServices.map((data, index) => { - return ( - - ); - })} + // Filter out disabled options and show only enabled options + dm3NamingServices + .filter( + (d) => + disabledOptions.profile.dm3.filter( + (p) => p.key === d.key && !p.value, + ).length, + ) + .map((data, index) => { + return ( + + ); + })}
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/MobileView.tsx index d9f9943d3..ec38b3a86 100644 --- a/packages/messenger-widget/src/components/ConfigureProfile/MobileView.tsx +++ b/packages/messenger-widget/src/components/ConfigureProfile/MobileView.tsx @@ -27,7 +27,7 @@ export function MobileView() { const { account, ethAddress } = useContext(AuthContext); - const { configureProfileModal, setConfigureProfileModal } = + const { configureProfileModal, setConfigureProfileModal, disabledOptions } = useContext(ModalContext); const { setEnsName, setNamingServiceSelected, existingEnsName } = @@ -71,7 +71,11 @@ export function MobileView() { }, [ethAddress]); useEffect(() => { - if (connectedChainId) { + // set the naming service selected by default based on chain connected if no options are disabled + if ( + connectedChainId && + !disabledOptions.profile.own.filter((p) => p.value).length + ) { setNamingServiceSelected(fetchServiceFromChainId(connectedChainId)); } }, []); diff --git a/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx index 1a40d956f..dd6d0a473 100644 --- a/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx +++ b/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx @@ -27,7 +27,7 @@ export function NormalView() { const { account, ethAddress } = useContext(AuthContext); - const { configureProfileModal, setConfigureProfileModal } = + const { configureProfileModal, setConfigureProfileModal, disabledOptions } = useContext(ModalContext); const { setEnsName, setNamingServiceSelected, existingEnsName } = @@ -71,7 +71,11 @@ export function NormalView() { }, [ethAddress]); useEffect(() => { - if (connectedChainId) { + // set the naming service selected by default based on chain connected if no options are disabled + if ( + connectedChainId && + !disabledOptions.profile.own.filter((p) => p.value).length + ) { setNamingServiceSelected(fetchServiceFromChainId(connectedChainId)); } }, []); diff --git a/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx index 98701e17a..2e8f6f6f6 100644 --- a/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx +++ b/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx @@ -7,7 +7,7 @@ import { ConfigureProfileContext } from './context/ConfigureProfileContext'; export function OwnStorage() { const [errorMsg, setErrorMsg] = useState(null); - const { configureProfileModal, setConfigureProfileModal } = + const { configureProfileModal, setConfigureProfileModal, disabledOptions } = useContext(ModalContext); const { existingEnsName, namingServiceSelected, setNamingServiceSelected } = @@ -70,13 +70,21 @@ export function OwnStorage() { }} > {namingServices && - namingServices.map((data, index) => { - return ( - - ); - })} + // Filter out disabled options and show only enabled options + namingServices + .filter( + (n) => + disabledOptions.profile.own.filter( + (p) => p.key === n.key && !p.value, + ).length, + ) + .map((data, index) => { + return ( + + ); + })}
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx b/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx index 512e3c640..759d7261e 100644 --- a/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx +++ b/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx @@ -1,23 +1,41 @@ -import { useContext } from 'react'; +import { useContext, useEffect } from 'react'; import { ModalContext } from '../../context/ModalContext'; import { ProfileScreenType, ProfileType } from '../../utils/enum-type-utils'; import { BUTTON_CLASS } from './bl'; export function ProfileTypeSelector() { - const { configureProfileModal, setConfigureProfileModal } = + const { configureProfileModal, setConfigureProfileModal, disabledOptions } = useContext(ModalContext); const profileOptions = [ { name: 'Claim a dm3 Name (dm3 cloud, Optimism, ...)', type: ProfileType.DM3_NAME, + isEnabled: disabledOptions.profile.dm3.filter((d) => !d.value) + .length + ? true + : false, }, { name: 'use your own Name (ENS, GENOME, ...)', type: ProfileType.OWN_NAME, + isEnabled: disabledOptions.profile.own.filter((d) => !d.value) + .length + ? true + : false, }, ]; + useEffect(() => { + const filteredOptions = profileOptions.filter((p) => p.isEnabled); + if (filteredOptions.length === 1) { + setConfigureProfileModal({ + ...configureProfileModal, + profileOptionSelected: filteredOptions[0].type, + }); + } + }, []); + return (
@@ -25,34 +43,36 @@ export function ProfileTypeSelector() {
- {profileOptions.map((option, index) => ( -
- setConfigureProfileModal({ - ...configureProfileModal, - profileOptionSelected: option.type, - }) - } - > - p.isEnabled) + .map((option, index) => ( +
+ setConfigureProfileModal({ + ...configureProfileModal, + profileOptionSelected: option.type, + }) } - readOnly - /> - -
- ))} + > + + +
+ ))}