diff --git a/packages/messenger-demo/src/App.tsx b/packages/messenger-demo/src/App.tsx index a19bb5b1e..33046485e 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 + disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties }; return ( diff --git a/packages/messenger-widget/README.md b/packages/messenger-widget/README.md index 7253d2f11..da3d62201 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, + disableDialogOptions: undefined, }; return ( @@ -246,6 +247,7 @@ Follow the below given steps :- theme: undefined, signInImage: undefined, siwe: undefined, + disableDialogOptions: undefined, }; return ( @@ -453,11 +455,49 @@ Example : } ``` -7. theme +7. disableDialogOptions +```js +const props: DM3Configuration = { + ... + disableDialogOptions: true, +} +``` +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 : + 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 ```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/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 - /> - -
- ))} + > + + +
+ ))}