Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1189 feature flag #1194

Merged
merged 10 commits into from
Oct 1, 2024
1 change: 1 addition & 0 deletions packages/messenger-demo/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
46 changes: 43 additions & 3 deletions packages/messenger-widget/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,8 @@ Follow the below given steps :-
showContacts: true,
theme: undefined,
signInImage: undefined,
siwe: undefined
siwe: undefined,
disableDialogOptions: undefined,
};

return (
Expand Down Expand Up @@ -246,6 +247,7 @@ Follow the below given steps :-
theme: undefined,
signInImage: undefined,
siwe: undefined,
disableDialogOptions: undefined,
};

return (
Expand Down Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function CloudStorage() {

const { existingDm3Name } = useContext(ConfigureDM3NameContext);

const { configureProfileModal, setConfigureProfileModal } =
const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
useContext(ModalContext);

const isNameAlreadyConfigured = (): boolean => {
Expand Down Expand Up @@ -76,13 +76,21 @@ export function CloudStorage() {
}}
>
{dm3NamingServices &&
dm3NamingServices.map((data, index) => {
return (
<option value={data.name} key={index}>
{data.name}
</option>
);
})}
// 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 (
<option value={data.name} key={index}>
{data.name}
</option>
);
})}
</select>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 } =
Expand Down Expand Up @@ -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));
}
}, []);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 } =
Expand Down Expand Up @@ -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));
}
}, []);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ConfigureProfileContext } from './context/ConfigureProfileContext';
export function OwnStorage() {
const [errorMsg, setErrorMsg] = useState<string | null>(null);

const { configureProfileModal, setConfigureProfileModal } =
const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
useContext(ModalContext);

const { existingEnsName, namingServiceSelected, setNamingServiceSelected } =
Expand Down Expand Up @@ -70,13 +70,21 @@ export function OwnStorage() {
}}
>
{namingServices &&
namingServices.map((data, index) => {
return (
<option value={data.name} key={index}>
{data.name}
</option>
);
})}
// 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 (
<option value={data.name} key={index}>
{data.name}
</option>
);
})}
</select>
</div>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,58 +1,78 @@
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 (
<div className="mt-4 ms-4 me-4 dm3-prof-select-container">
<div className="dm3-prof-select-type">
Add new dm3 profile - select type
</div>

<div className="prof-option-container">
{profileOptions.map((option, index) => (
<div
key={index}
className="radio d-flex mb-3 width-fit"
onClick={() =>
setConfigureProfileModal({
...configureProfileModal,
profileOptionSelected: option.type,
})
}
>
<input
type="radio"
name="profile_name"
value={option.type}
checked={
option.type ===
configureProfileModal.profileOptionSelected
? true
: false
{profileOptions
.filter((p) => p.isEnabled)
.map((option, index) => (
<div
key={index}
className="radio d-flex mb-3 width-fit"
onClick={() =>
setConfigureProfileModal({
...configureProfileModal,
profileOptionSelected: option.type,
})
}
readOnly
/>
<label className="name-option radio-label">
{option.name}
</label>
</div>
))}
>
<input
type="radio"
name="profile_name"
value={option.type}
checked={
option.type ===
configureProfileModal.profileOptionSelected
? true
: false
}
readOnly
/>
<label className="name-option radio-label">
{option.name}
</label>
</div>
))}
</div>
<div className="d-flex justify-content-end me-3 mb-3">
<button
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { ConfigureCloudNameProfile } from './dm3Names/cloudName/ConfigureCloudNa
import { ConfigureOptimismNameProfile } from './dm3Names/optimismName/ConfigureOptimismNameProfile';
import { supportedChains } from '../../utils/common-utils';
import { removeAlias } from '../../adapters/offchainResolverApi';
import { PREFERENCES_ITEMS } from '../Preferences/bl';

export const PROFILE_INPUT_FIELD_CLASS =
'profile-input font-weight-400 font-size-14 border-radius-6 w-100 line-height-24';
Expand All @@ -26,9 +27,11 @@ export enum ACTION_TYPE {
export const openConfigurationModal = (
setShowProfileConfigurationModal: (show: boolean) => void,
setShowPreferencesModal: (show: boolean) => void,
updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => void,
) => {
setShowProfileConfigurationModal(true);
setShowPreferencesModal(true);
updatePreferenceSelected(PREFERENCES_ITEMS.DM3_PROFILE);
};

// method to close the profile configuration modal
Expand Down Expand Up @@ -160,10 +163,12 @@ export const enum NAME_SERVICES {
export const namingServices = [
{
name: NAME_SERVICES.ENS,
key: 'ens',
chainId: supportedChains.ethereumMainnet,
},
{
name: NAME_SERVICES.GENOME,
key: 'gnosis',
chainId: supportedChains.gnosisMainnet,
},
];
Expand Down Expand Up @@ -220,9 +225,11 @@ export const enum DM3_NAME_SERVICES {
export const dm3NamingServices = [
{
name: DM3_NAME_SERVICES.CLOUD,
key: 'dm3',
},
{
name: DM3_NAME_SERVICES.OPTIMISM,
key: 'optimism',
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { NAME_TYPE } from '../chain/common';
import { dm3NamingServices, namingServices } from '../bl';
import { AuthContext } from '../../../context/AuthContext';
import { DM3ConfigurationContext } from '../../../context/DM3ConfigurationContext';
import { ModalContext } from '../../../context/ModalContext';

export interface ConfigureProfileContextType {
existingEnsName: string | null;
Expand Down Expand Up @@ -43,13 +44,29 @@ export const ConfigureProfileContextProvider = (props: { children?: any }) => {

const [errorMsg, setErrorMsg] = useState<string>('');

const { disabledOptions } = useContext(ModalContext);

// DM3 Name service selected
// By default, first DM3 name is set from the dropdown which is not disabled
const [dm3NameServiceSelected, setDm3NameServiceSelected] =
useState<string>(dm3NamingServices[0].name);
useState<string>(
dm3NamingServices.filter(
(d) =>
Bhupesh-mfsi marked this conversation as resolved.
Show resolved Hide resolved
disabledOptions.profile.dm3.filter(
(p) => p.key === d.key && !p.value,
).length,
)[0]?.name,
);

// ENS Name service selected
// By default, first ENS name is set from the dropdown which is not disabled
const [namingServiceSelected, setNamingServiceSelected] = useState<string>(
namingServices[0].name,
namingServices.filter(
(n) =>
disabledOptions.profile.own.filter(
(p) => p.key === n.key && !p.value,
).length,
)[0]?.name,
);

const { displayName } = useContext(AuthContext);
Expand Down
Loading
Loading