From 5ae7e63fda7b73c0f551a0e307f672728ba3b666 Mon Sep 17 00:00:00 2001
From: Bhupesh-MS <mfsi.bhupeshd@gmail.com>
Date: Wed, 18 Sep 2024 19:28:55 +0530
Subject: [PATCH] fixed UI issues for Network & Profile modal

---
 .../ConfigureProfile/CloudStorage.tsx         | 32 +++++--
 .../ConfigureProfile/ConfigureProfile.css     | 11 ++-
 .../ConfigureProfile/NormalView.tsx           |  6 +-
 .../ConfigureProfile/OwnStorage.tsx           | 32 +++++--
 .../ConfigureProfile/ProfileTypeSelector.tsx  | 14 +++
 .../ConfigureProfile/chain/MobileView.tsx     | 26 +++++
 .../ConfigureProfile/chain/NormalView.tsx     | 26 +++++
 .../ConfigureProfile/dm3Names/MobileView.tsx  | 34 ++++++-
 .../ConfigureProfile/dm3Names/NormalView.tsx  | 34 ++++++-
 .../Preferences/Network/Network.css           |  8 +-
 .../Preferences/Network/Network.tsx           | 95 ++++++++++++-------
 .../src/context/DM3UserProfileContext.tsx     |  6 +-
 12 files changed, 258 insertions(+), 66 deletions(-)

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx
index b9f0674a8..e2f5c7093 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { ModalContext } from '../../context/ModalContext';
-import { ProfileScreenType } from '../../utils/enum-type-utils';
+import { ProfileScreenType, ProfileType } from '../../utils/enum-type-utils';
 import { BUTTON_CLASS, DM3_NAME_SERVICES, dm3NamingServices } from './bl';
 import { ConfigureProfileContext } from './context/ConfigureProfileContext';
 import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext';
@@ -59,6 +59,14 @@ export function CloudStorage() {
             </div>
 
             <div className="p-4">
+                <div
+                    className={
+                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
+                    }
+                >
+                    {errorMsg ?? ''}
+                </div>
+
                 <div className="name-select-container">
                     <select
                         className="name-service-selector"
@@ -78,14 +86,6 @@ export function CloudStorage() {
                     </select>
                 </div>
 
-                <div
-                    className={
-                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
-                    }
-                >
-                    {errorMsg ?? ''}
-                </div>
-
                 <div className="mt-4 dm3-name-content">
                     <div className="small-text font-weight-300">
                         You can get a DM3 name for free. Please check if your
@@ -100,6 +100,20 @@ export function CloudStorage() {
                 </div>
             </div>
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     className={BUTTON_CLASS.concat(' ', 'add-prof-btn-active')}
                     onClick={() => navigateToNextTab()}
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css b/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css
index b143a2f18..0dd59bceb 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css
+++ b/packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css
@@ -93,7 +93,6 @@ input::placeholder {
     padding: 2px 7px 2px 7px;
     border-radius: 13px;
     font-size: 10px;
-    font-weight: bold;
     cursor: pointer;
     position: relative;
 }
@@ -108,7 +107,7 @@ input::placeholder {
     margin: 22px 9px 10px 0px;
     background-color: var(--text-secondary-color);
     font-size: 0.7rem;
-    font-weight: 100;
+    font-weight: 600;
     line-height: 1rem;
     cursor: text;
 }
@@ -155,7 +154,7 @@ input::placeholder {
 }
 
 .prof-option-container{
-    padding: 1rem;
+    padding: 3rem 1rem 1rem 1rem;
 }
 
 .update-btn {
@@ -209,6 +208,12 @@ input::placeholder {
     padding: 1.25rem;
   }
 
+  .config-profile-cancel-btn {
+    background-color: transparent;
+    border: 2px solid var(--preferences-highlighted-color);
+    color: var(--text-primary-color);
+}
+
 /* =================== Mobile Responsive CSS =================== */
 
 @media only screen and (min-width: 800px) and (max-width: 1150px) {
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx
index 36ff215a1..1a40d956f 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx
@@ -77,7 +77,7 @@ export function NormalView() {
     }, []);
 
     return (
-        <div className="mt-2">
+        <div className="mt-2 ms-2">
             {/* Delete DM3 name confirmation popup modal */}
             {showDeleteConfirmation && (
                 <DeleteDM3Name
@@ -86,8 +86,8 @@ export function NormalView() {
                 />
             )}
 
-            <div className="d-flex pt-4 ps-4">
-                <div className="profile-config-container ps-2">
+            <div className="d-flex pt-4 ms-4">
+                <div className="profile-config-container">
                     {/* Wallet Address */}
                     <div className="d-flex">
                         <p
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx
index 7e8aa642d..98701e17a 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { ModalContext } from '../../context/ModalContext';
-import { ProfileScreenType } from '../../utils/enum-type-utils';
+import { ProfileScreenType, ProfileType } from '../../utils/enum-type-utils';
 import { BUTTON_CLASS, NAME_SERVICES, namingServices } from './bl';
 import { ConfigureProfileContext } from './context/ConfigureProfileContext';
 
@@ -53,6 +53,14 @@ export function OwnStorage() {
             </div>
 
             <div className="p-4">
+                <div
+                    className={
+                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
+                    }
+                >
+                    {errorMsg ?? ''}
+                </div>
+
                 <div className="name-select-container">
                     <select
                         className="name-service-selector"
@@ -72,14 +80,6 @@ export function OwnStorage() {
                     </select>
                 </div>
 
-                <div
-                    className={
-                        'conversation-error ms-0 mb-2 font-weight-400 show-error'
-                    }
-                >
-                    {errorMsg ?? ''}
-                </div>
-
                 <div className="mt-4 dm3-name-content">
                     <div className="small-text font-weight-300">
                         To publish your dm3 profile, a transaction is sent to
@@ -94,6 +94,20 @@ export function OwnStorage() {
                 </div>
             </div>
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     className={BUTTON_CLASS.concat(' ', 'add-prof-btn-active')}
                     onClick={() => navigateToNextTab()}
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx b/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx
index 8cf095a91..512e3c640 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx
@@ -55,6 +55,20 @@ export function ProfileTypeSelector() {
                 ))}
             </div>
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     className={BUTTON_CLASS.concat(' add-prof-btn-active')}
                     onClick={() => {
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx
index 6903c0ab9..184ca6d24 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/chain/MobileView.tsx
@@ -6,6 +6,9 @@ import {
     PROFILE_INPUT_FIELD_CLASS,
     BUTTON_CLASS,
 } from './common';
+import { ModalContext } from '../../../context/ModalContext';
+import { ConfigureDM3NameContext } from '../context/ConfigureDM3NameContext';
+import { ProfileScreenType, ProfileType } from '../../../utils/enum-type-utils';
 
 export const MobileView = ({
     propertyName,
@@ -29,8 +32,14 @@ export const MobileView = ({
         errorMsg,
         existingEnsName,
         setExistingEnsName,
+        setEnsName,
     } = useContext(ConfigureProfileContext);
 
+    const { setDm3Name } = useContext(ConfigureDM3NameContext);
+
+    const { configureProfileModal, setConfigureProfileModal } =
+        useContext(ModalContext);
+
     // handles configure or remove ENS name
     const handlePublishOrRemoveProfile = async (type: ACTION_TYPE) => {
         if (type === ACTION_TYPE.CONFIGURE) {
@@ -90,6 +99,23 @@ export const MobileView = ({
                         </form>
                     </div>
                     <div className="mt-2">
+                        <button
+                            className={BUTTON_CLASS.concat(
+                                ' ',
+                                'config-profile-cancel-btn me-3',
+                            )}
+                            onClick={() => {
+                                setDm3Name('');
+                                setEnsName('');
+                                onShowError(NAME_TYPE.DM3_NAME, '');
+                                setConfigureProfileModal({
+                                    profileOptionSelected: ProfileType.DM3_NAME,
+                                    onScreen: ProfileScreenType.NONE,
+                                });
+                            }}
+                        >
+                            Cancel
+                        </button>
                         <button
                             data-testid="publish-profile"
                             disabled={!ensName || !ensName.length}
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx
index 567737463..13f7ac671 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/chain/NormalView.tsx
@@ -6,6 +6,9 @@ import {
     PROFILE_INPUT_FIELD_CLASS,
     BUTTON_CLASS,
 } from './common';
+import { ModalContext } from '../../../context/ModalContext';
+import { ProfileScreenType, ProfileType } from '../../../utils/enum-type-utils';
+import { ConfigureDM3NameContext } from '../context/ConfigureDM3NameContext';
 
 export const NormalView = ({
     propertyName,
@@ -29,8 +32,14 @@ export const NormalView = ({
         errorMsg,
         existingEnsName,
         setExistingEnsName,
+        setEnsName,
     } = useContext(ConfigureProfileContext);
 
+    const { setDm3Name } = useContext(ConfigureDM3NameContext);
+
+    const { configureProfileModal, setConfigureProfileModal } =
+        useContext(ModalContext);
+
     // handles configure or remove ENS name
     const handlePublishOrRemoveProfile = async (type: ACTION_TYPE) => {
         if (type === ACTION_TYPE.CONFIGURE) {
@@ -100,6 +109,23 @@ export const NormalView = ({
             </div>
 
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setDm3Name('');
+                        setEnsName('');
+                        onShowError(NAME_TYPE.DM3_NAME, '');
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     data-testid="publish-profile"
                     disabled={!existingEnsName && (!ensName || !ensName.length)}
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx
index 15418e2a8..b2c27ef17 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/MobileView.tsx
@@ -8,6 +8,8 @@ import {
     NAME_TYPE,
     PROFILE_INPUT_FIELD_CLASS,
 } from '../chain/common';
+import { ModalContext } from '../../../context/ModalContext';
+import { ProfileScreenType, ProfileType } from '../../../utils/enum-type-utils';
 
 export const MobileView = ({
     nameExtension,
@@ -20,10 +22,19 @@ export const MobileView = ({
 }) => {
     const { setDisplayName } = useContext(AuthContext);
 
-    const { errorMsg, showError } = useContext(ConfigureProfileContext);
+    const { errorMsg, showError, setEnsName, onShowError } = useContext(
+        ConfigureProfileContext,
+    );
+
+    const {
+        dm3Name,
+        handleNameChange,
+        handleClaimOrRemoveDm3Name,
+        setDm3Name,
+    } = useContext(ConfigureDM3NameContext);
 
-    const { dm3Name, handleNameChange, handleClaimOrRemoveDm3Name } =
-        useContext(ConfigureDM3NameContext);
+    const { configureProfileModal, setConfigureProfileModal } =
+        useContext(ModalContext);
 
     return (
         <div className="d-flex ps-2 align-items-baseline">
@@ -78,6 +89,23 @@ export const MobileView = ({
                     </form>
                 </div>
                 <div className="mt-2">
+                    <button
+                        className={BUTTON_CLASS.concat(
+                            ' ',
+                            'config-profile-cancel-btn me-3',
+                        )}
+                        onClick={() => {
+                            setDm3Name('');
+                            setEnsName('');
+                            onShowError(NAME_TYPE.DM3_NAME, '');
+                            setConfigureProfileModal({
+                                profileOptionSelected: ProfileType.DM3_NAME,
+                                onScreen: ProfileScreenType.NONE,
+                            });
+                        }}
+                    >
+                        Cancel
+                    </button>
                     <button
                         data-testid="claim-publish"
                         disabled={!dm3Name || !dm3Name.length}
diff --git a/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/NormalView.tsx
index a39d312ca..58c623e89 100644
--- a/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/NormalView.tsx
+++ b/packages/messenger-widget/src/components/ConfigureProfile/dm3Names/NormalView.tsx
@@ -8,6 +8,8 @@ import {
     NAME_TYPE,
     PROFILE_INPUT_FIELD_CLASS,
 } from '../chain/common';
+import { ProfileScreenType, ProfileType } from '../../../utils/enum-type-utils';
+import { ModalContext } from '../../../context/ModalContext';
 
 export const NormalView = ({
     nameExtension,
@@ -20,10 +22,19 @@ export const NormalView = ({
 }) => {
     const { setDisplayName } = useContext(AuthContext);
 
-    const { errorMsg, showError } = useContext(ConfigureProfileContext);
+    const { errorMsg, showError, onShowError, setEnsName } = useContext(
+        ConfigureProfileContext,
+    );
+
+    const {
+        dm3Name,
+        handleNameChange,
+        handleClaimOrRemoveDm3Name,
+        setDm3Name,
+    } = useContext(ConfigureDM3NameContext);
 
-    const { dm3Name, handleNameChange, handleClaimOrRemoveDm3Name } =
-        useContext(ConfigureDM3NameContext);
+    const { configureProfileModal, setConfigureProfileModal } =
+        useContext(ModalContext);
 
     return (
         <>
@@ -95,6 +106,23 @@ export const NormalView = ({
             </div>
 
             <div className="d-flex justify-content-end me-3 mb-3">
+                <button
+                    className={BUTTON_CLASS.concat(
+                        ' ',
+                        'config-profile-cancel-btn me-3',
+                    )}
+                    onClick={() => {
+                        setDm3Name('');
+                        setEnsName('');
+                        onShowError(NAME_TYPE.DM3_NAME, '');
+                        setConfigureProfileModal({
+                            profileOptionSelected: ProfileType.DM3_NAME,
+                            onScreen: ProfileScreenType.NONE,
+                        });
+                    }}
+                >
+                    Cancel
+                </button>
                 <button
                     data-testid="claim-publish"
                     disabled={!dm3Name || !dm3Name.length}
diff --git a/packages/messenger-widget/src/components/Preferences/Network/Network.css b/packages/messenger-widget/src/components/Preferences/Network/Network.css
index 93e201d19..6921e58c5 100644
--- a/packages/messenger-widget/src/components/Preferences/Network/Network.css
+++ b/packages/messenger-widget/src/components/Preferences/Network/Network.css
@@ -54,7 +54,7 @@
 }
 
 .node-name-inner-container{
-    padding: 2rem 3rem 1rem 3rem;
+    padding: 2rem 3rem 1rem 2rem;
     align-items: center;
     justify-content: space-between;
 }
@@ -95,6 +95,12 @@
     width: 80%;
 }
 
+.cancel-btn {
+    background-color: transparent;
+    border: 2px solid var(--preferences-highlighted-color);
+    color: var(--text-primary-color);
+}
+
 @media only screen and (min-width: 800px) and (max-width: 1150px) {
     .add-name-error {
         font-size: 0.7rem !important;
diff --git a/packages/messenger-widget/src/components/Preferences/Network/Network.tsx b/packages/messenger-widget/src/components/Preferences/Network/Network.tsx
index d555b9571..a8013f4f5 100644
--- a/packages/messenger-widget/src/components/Preferences/Network/Network.tsx
+++ b/packages/messenger-widget/src/components/Preferences/Network/Network.tsx
@@ -20,6 +20,8 @@ export function Network() {
         addNode,
         handleNodeNameChange,
         isProfileUpdated,
+        setNodeName,
+        setError,
     } = useContext(DM3UserProfileContext);
 
     const { setPreferencesOptionSelected } = useContext(ModalContext);
@@ -110,51 +112,76 @@ export function Network() {
 
                 {/* Modal to add new NODE */}
                 {isModalOpenToAddNode && (
-                    <div className="add-node-name-container mt-5">
+                    <div className="add-node-name-container mt-4 ms-4">
                         <div className="dm3-prof-select-type">
                             Add dm3 delivery service node
                         </div>
 
-                        <div className="node-name-inner-container d-flex">
-                            <p
-                                className="m-0 
+                        {/* Error msg container for invalid DS name */}
+                        <div className="row ps-5 mt-3 mb-2 pe-5">
+                            <div className="col-xl-4 col-md-4 col-sm-12 invisible">
+                                <p
+                                    className="m-0 
                     font-size-14 font-weight-500 line-height-24 title-content"
-                            >
-                                DM3 delivery service node’s name:
-                            </p>
-                            <form
-                                className="d-flex width-fill align-items-center node-name-form"
-                                onSubmit={(e) => {
-                                    e.preventDefault();
-                                    addNode();
-                                }}
-                            >
-                                <input
-                                    className={'node-name-input-field'.concat(
-                                        ' ',
-                                        error ? 'err-background' : '',
-                                    )}
-                                    type="text"
-                                    value={nodeName}
-                                    placeholder="Enter the ENS name of the node"
-                                    onChange={(
-                                        e: React.ChangeEvent<HTMLInputElement>,
-                                    ) => handleNodeNameChange(e)}
-                                />
-                            </form>
+                                ></p>
+                            </div>
+                            {/* Error msg */}
+                            <div className="col-xl-8 col-md-8 col-sm-12">
+                                <div
+                                    className={
+                                        'add-name-error ms-0 font-weight-400 d-flex justify-content-start'
+                                    }
+                                >
+                                    {error ?? ''}
+                                </div>
+                            </div>
                         </div>
 
-                        {/* Validation error */}
-                        <div
-                            className={
-                                'add-name-error ms-0 mb-2 font-weight-400'
-                            }
-                        >
-                            {error ?? ''}
+                        <div className="row ps-5 pt-2 pe-5 pb-5">
+                            <div className="col-xl-4 col-md-4 col-sm-12">
+                                <p
+                                    className="m-0 
+                    font-size-14 font-weight-500 line-height-24 title-content"
+                                >
+                                    DM3 delivery service node’s name:
+                                </p>
+                            </div>
+                            <div className="col-xl-8 col-md-8 col-sm-12">
+                                <form
+                                    className="d-flex width-fill align-items-center node-name-form"
+                                    onSubmit={(e) => {
+                                        e.preventDefault();
+                                        addNode();
+                                    }}
+                                >
+                                    <input
+                                        className={'node-name-input-field'.concat(
+                                            ' ',
+                                            error ? 'err-background' : '',
+                                        )}
+                                        type="text"
+                                        value={nodeName}
+                                        placeholder="Enter the ENS name of the node"
+                                        onChange={(
+                                            e: React.ChangeEvent<HTMLInputElement>,
+                                        ) => handleNodeNameChange(e)}
+                                    />
+                                </form>
+                            </div>
                         </div>
 
                         {/* Button to submit node name */}
                         <div className="d-flex justify-content-end add-name-btn-container">
+                            <button
+                                className="node-btn cancel-btn me-3"
+                                onClick={() => {
+                                    setNodeName('');
+                                    setError(null);
+                                    setIsModalOpenToAddNode(false);
+                                }}
+                            >
+                                Cancel
+                            </button>
                             <button
                                 className={'node-btn'.concat(
                                     ' ',
diff --git a/packages/messenger-widget/src/context/DM3UserProfileContext.tsx b/packages/messenger-widget/src/context/DM3UserProfileContext.tsx
index 708a03e9e..dcb9ca6e5 100644
--- a/packages/messenger-widget/src/context/DM3UserProfileContext.tsx
+++ b/packages/messenger-widget/src/context/DM3UserProfileContext.tsx
@@ -14,9 +14,10 @@ export type DM3UserProfileContextType = {
     isModalOpenToAddNode: boolean;
     setIsModalOpenToAddNode: (action: boolean) => void;
     error: string | null;
-    setError: (msg: string) => void;
+    setError: (msg: string | null) => void;
     nodeName: string;
     handleNodeNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    setNodeName: (name: string) => void;
     isProfileUpdated: boolean;
     isProfileUpdatedForAddrName: boolean;
     isProfileUpdatedForDm3Name: boolean;
@@ -39,6 +40,7 @@ export const DM3UserProfileContext =
         setError: (msg: string) => {},
         nodeName: '',
         handleNodeNameChange: (e: React.ChangeEvent<HTMLInputElement>) => {},
+        setNodeName: (name: string) => {},
         isProfileUpdated: true,
         isProfileUpdatedForAddrName: true,
         isProfileUpdatedForDm3Name: true,
@@ -67,6 +69,7 @@ export const DM3UserProfileContextProvider = ({
         isProfileUpdatedForAddrName,
         isProfileUpdatedForDm3Name,
         isProfileUpdatedForEnsName,
+        setNodeName,
     } = useDm3UserProfile();
 
     return (
@@ -88,6 +91,7 @@ export const DM3UserProfileContextProvider = ({
                 isProfileUpdatedForAddrName,
                 isProfileUpdatedForDm3Name,
                 isProfileUpdatedForEnsName,
+                setNodeName,
             }}
         >
             {children}