Skip to content

Commit 6ba9fb8

Browse files
AlexNi245AlexNi245
authored
Merge pull request #1194 from dm3-org/1189-feature-flag
1189 feature flag
2 parents a22fd95 + a531752 commit 6ba9fb8

File tree

22 files changed

+564
-172
lines changed

22 files changed

+564
-172
lines changed

‎packages/messenger-demo/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ function App() {
5050
theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors
5151
signInImage: undefined, // OPTIONAL PARAMETER : string URL of image
5252
siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum
53+
disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties
5354
};
5455

5556
return (

‎packages/messenger-widget/README.md‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@ Follow the below given steps :-
8989
showContacts: true,
9090
theme: undefined,
9191
signInImage: undefined,
92-
siwe: undefined
92+
siwe: undefined,
93+
disableDialogOptions: undefined,
9394
};
9495

9596
return (
@@ -246,6 +247,7 @@ Follow the below given steps :-
246247
theme: undefined,
247248
signInImage: undefined,
248249
siwe: undefined,
250+
disableDialogOptions: undefined,
249251
};
250252

251253
return (
@@ -453,11 +455,49 @@ Example :
453455
}
454456
```
455457

456-
7. theme
458+
7. disableDialogOptions
459+
```js
460+
const props: DM3Configuration = {
461+
...
462+
disableDialogOptions: true,
463+
}
464+
```
465+
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.
466+
```js
467+
Example :
468+
disableDialogOptions: true
469+
disableDialogOptions: false
470+
disableDialogOptions: undefined
471+
disableDialogOptions: {
472+
network: true,
473+
notification: {
474+
email: true,
475+
push: false,
476+
},
477+
profile: {
478+
dm3: boolean | {
479+
cloud: false,
480+
optimism: true,
481+
},
482+
self: boolean | {
483+
gnosis: true,
484+
ens: false,
485+
}
486+
}
487+
}
488+
disableDialogOptions: {
489+
notification: {
490+
email: true,
491+
push: false,
492+
},
493+
}
494+
```
495+
496+
8. theme
457497
```js
458498
const props: DM3Configuration = {
459499
...
460-
theme: undefined,
500+
theme: undefined,
461501
}
462502
```
463503
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.

‎packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function CloudStorage() {
1717

1818
const { existingDm3Name } = useContext(ConfigureDM3NameContext);
1919

20-
const { configureProfileModal, setConfigureProfileModal } =
20+
const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
2121
useContext(ModalContext);
2222

2323
const isNameAlreadyConfigured = (): boolean => {
@@ -76,13 +76,21 @@ export function CloudStorage() {
7676
}}
7777
>
7878
{dm3NamingServices &&
79-
dm3NamingServices.map((data, index) => {
80-
return (
81-
<option value={data.name} key={index}>
82-
{data.name}
83-
</option>
84-
);
85-
})}
79+
// Filter out disabled options and show only enabled options
80+
dm3NamingServices
81+
.filter(
82+
(d) =>
83+
disabledOptions.profile.dm3.filter(
84+
(p) => p.key === d.key && !p.value,
85+
).length,
86+
)
87+
.map((data, index) => {
88+
return (
89+
<option value={data.name} key={index}>
90+
{data.name}
91+
</option>
92+
);
93+
})}
8694
</select>
8795
</div>
8896

‎packages/messenger-widget/src/components/ConfigureProfile/MobileView.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function MobileView() {
2727

2828
const { account, ethAddress } = useContext(AuthContext);
2929

30-
const { configureProfileModal, setConfigureProfileModal } =
30+
const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
3131
useContext(ModalContext);
3232

3333
const { setEnsName, setNamingServiceSelected, existingEnsName } =
@@ -71,7 +71,11 @@ export function MobileView() {
7171
}, [ethAddress]);
7272

7373
useEffect(() => {
74-
if (connectedChainId) {
74+
// set the naming service selected by default based on chain connected if no options are disabled
75+
if (
76+
connectedChainId &&
77+
!disabledOptions.profile.own.filter((p) => p.value).length
78+
) {
7579
setNamingServiceSelected(fetchServiceFromChainId(connectedChainId));
7680
}
7781
}, []);

‎packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function NormalView() {
2727

2828
const { account, ethAddress } = useContext(AuthContext);
2929

30-
const { configureProfileModal, setConfigureProfileModal } =
30+
const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
3131
useContext(ModalContext);
3232

3333
const { setEnsName, setNamingServiceSelected, existingEnsName } =
@@ -71,7 +71,11 @@ export function NormalView() {
7171
}, [ethAddress]);
7272

7373
useEffect(() => {
74-
if (connectedChainId) {
74+
// set the naming service selected by default based on chain connected if no options are disabled
75+
if (
76+
connectedChainId &&
77+
!disabledOptions.profile.own.filter((p) => p.value).length
78+
) {
7579
setNamingServiceSelected(fetchServiceFromChainId(connectedChainId));
7680
}
7781
}, []);

‎packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { ConfigureProfileContext } from './context/ConfigureProfileContext';
77
export function OwnStorage() {
88
const [errorMsg, setErrorMsg] = useState<string | null>(null);
99

10-
const { configureProfileModal, setConfigureProfileModal } =
10+
const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
1111
useContext(ModalContext);
1212

1313
const { existingEnsName, namingServiceSelected, setNamingServiceSelected } =
@@ -70,13 +70,21 @@ export function OwnStorage() {
7070
}}
7171
>
7272
{namingServices &&
73-
namingServices.map((data, index) => {
74-
return (
75-
<option value={data.name} key={index}>
76-
{data.name}
77-
</option>
78-
);
79-
})}
73+
// Filter out disabled options and show only enabled options
74+
namingServices
75+
.filter(
76+
(n) =>
77+
disabledOptions.profile.own.filter(
78+
(p) => p.key === n.key && !p.value,
79+
).length,
80+
)
81+
.map((data, index) => {
82+
return (
83+
<option value={data.name} key={index}>
84+
{data.name}
85+
</option>
86+
);
87+
})}
8088
</select>
8189
</div>
8290

‎packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,78 @@
1-
import { useContext } from 'react';
1+
import { useContext, useEffect } from 'react';
22
import { ModalContext } from '../../context/ModalContext';
33
import { ProfileScreenType, ProfileType } from '../../utils/enum-type-utils';
44
import { BUTTON_CLASS } from './bl';
55

66
export function ProfileTypeSelector() {
7-
const { configureProfileModal, setConfigureProfileModal } =
7+
const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
88
useContext(ModalContext);
99

1010
const profileOptions = [
1111
{
1212
name: 'Claim a dm3 Name (dm3 cloud, Optimism, ...)',
1313
type: ProfileType.DM3_NAME,
14+
isEnabled: disabledOptions.profile.dm3.filter((d) => !d.value)
15+
.length
16+
? true
17+
: false,
1418
},
1519
{
1620
name: 'use your own Name (ENS, GENOME, ...)',
1721
type: ProfileType.OWN_NAME,
22+
isEnabled: disabledOptions.profile.own.filter((d) => !d.value)
23+
.length
24+
? true
25+
: false,
1826
},
1927
];
2028

29+
useEffect(() => {
30+
const filteredOptions = profileOptions.filter((p) => p.isEnabled);
31+
if (filteredOptions.length === 1) {
32+
setConfigureProfileModal({
33+
...configureProfileModal,
34+
profileOptionSelected: filteredOptions[0].type,
35+
});
36+
}
37+
}, []);
38+
2139
return (
2240
<div className="mt-4 ms-4 me-4 dm3-prof-select-container">
2341
<div className="dm3-prof-select-type">
2442
Add new dm3 profile - select type
2543
</div>
2644

2745
<div className="prof-option-container">
28-
{profileOptions.map((option, index) => (
29-
<div
30-
key={index}
31-
className="radio d-flex mb-3 width-fit"
32-
onClick={() =>
33-
setConfigureProfileModal({
34-
...configureProfileModal,
35-
profileOptionSelected: option.type,
36-
})
37-
}
38-
>
39-
<input
40-
type="radio"
41-
name="profile_name"
42-
value={option.type}
43-
checked={
44-
option.type ===
45-
configureProfileModal.profileOptionSelected
46-
? true
47-
: false
46+
{profileOptions
47+
.filter((p) => p.isEnabled)
48+
.map((option, index) => (
49+
<div
50+
key={index}
51+
className="radio d-flex mb-3 width-fit"
52+
onClick={() =>
53+
setConfigureProfileModal({
54+
...configureProfileModal,
55+
profileOptionSelected: option.type,
56+
})
4857
}
49-
readOnly
50-
/>
51-
<label className="name-option radio-label">
52-
{option.name}
53-
</label>
54-
</div>
55-
))}
58+
>
59+
<input
60+
type="radio"
61+
name="profile_name"
62+
value={option.type}
63+
checked={
64+
option.type ===
65+
configureProfileModal.profileOptionSelected
66+
? true
67+
: false
68+
}
69+
readOnly
70+
/>
71+
<label className="name-option radio-label">
72+
{option.name}
73+
</label>
74+
</div>
75+
))}
5676
</div>
5777
<div className="d-flex justify-content-end me-3 mb-3">
5878
<button

‎packages/messenger-widget/src/components/ConfigureProfile/bl.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ConfigureCloudNameProfile } from './dm3Names/cloudName/ConfigureCloudNa
1010
import { ConfigureOptimismNameProfile } from './dm3Names/optimismName/ConfigureOptimismNameProfile';
1111
import { supportedChains } from '../../utils/common-utils';
1212
import { removeAlias } from '../../adapters/offchainResolverApi';
13+
import { PREFERENCES_ITEMS } from '../Preferences/bl';
1314

1415
export const PROFILE_INPUT_FIELD_CLASS =
1516
'profile-input font-weight-400 font-size-14 border-radius-6 w-100 line-height-24';
@@ -26,9 +27,11 @@ export enum ACTION_TYPE {
2627
export const openConfigurationModal = (
2728
setShowProfileConfigurationModal: (show: boolean) => void,
2829
setShowPreferencesModal: (show: boolean) => void,
30+
updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => void,
2931
) => {
3032
setShowProfileConfigurationModal(true);
3133
setShowPreferencesModal(true);
34+
updatePreferenceSelected(PREFERENCES_ITEMS.DM3_PROFILE);
3235
};
3336

3437
// method to close the profile configuration modal
@@ -160,10 +163,12 @@ export const enum NAME_SERVICES {
160163
export const namingServices = [
161164
{
162165
name: NAME_SERVICES.ENS,
166+
key: 'ens',
163167
chainId: supportedChains.ethereumMainnet,
164168
},
165169
{
166170
name: NAME_SERVICES.GENOME,
171+
key: 'gnosis',
167172
chainId: supportedChains.gnosisMainnet,
168173
},
169174
];
@@ -220,9 +225,11 @@ export const enum DM3_NAME_SERVICES {
220225
export const dm3NamingServices = [
221226
{
222227
name: DM3_NAME_SERVICES.CLOUD,
228+
key: 'dm3',
223229
},
224230
{
225231
name: DM3_NAME_SERVICES.OPTIMISM,
232+
key: 'optimism',
226233
},
227234
];
228235

‎packages/messenger-widget/src/components/ConfigureProfile/context/ConfigureProfileContext.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { NAME_TYPE } from '../chain/common';
33
import { dm3NamingServices, namingServices } from '../bl';
44
import { AuthContext } from '../../../context/AuthContext';
55
import { DM3ConfigurationContext } from '../../../context/DM3ConfigurationContext';
6+
import { ModalContext } from '../../../context/ModalContext';
67

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

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

47+
const { disabledOptions } = useContext(ModalContext);
48+
4649
// DM3 Name service selected
50+
// By default, first DM3 name is set from the dropdown which is not disabled
4751
const [dm3NameServiceSelected, setDm3NameServiceSelected] =
48-
useState<string>(dm3NamingServices[0].name);
52+
useState<string>(
53+
dm3NamingServices.filter(
54+
(d) =>
55+
disabledOptions.profile.dm3.filter(
56+
(p) => p.key === d.key && !p.value,
57+
).length,
58+
)[0]?.name,
59+
);
4960

5061
// ENS Name service selected
62+
// By default, first ENS name is set from the dropdown which is not disabled
5163
const [namingServiceSelected, setNamingServiceSelected] = useState<string>(
52-
namingServices[0].name,
64+
namingServices.filter(
65+
(n) =>
66+
disabledOptions.profile.own.filter(
67+
(p) => p.key === n.key && !p.value,
68+
).length,
69+
)[0]?.name,
5370
);
5471

5572
const { displayName } = useContext(AuthContext);

0 commit comments

Comments
 (0)