Merge pull request #1156 from dm3-org/network-dialog

Network dialog

packages/messenger-demo/src/theme.ts

@@ -45,4 +45,5 @@ export const themeColors = {
     alternateContactBackgroundColor: 'black',
     menuBackgroundColor: 'blue',
     preferencesHighlightedColor: '#8b7ff4',
+    configureProfileModalBackgroundColor: '#D9D9D9',
 };

packages/messenger-widget/README.md

@@ -511,6 +511,7 @@ Example :
       alternateContactBackgroundColor: 'black',
       menuBackgroundColor: 'blue',
       preferencesHighlightedColor: '#8b7ff4',
+      configureProfileModalBackgroundColor: '#D9D9D9',
    }
 ```
 

packages/messenger-widget/declaration.d.ts

@@ -12,3 +12,5 @@ declare module 'localforage' {
     let localforage: LocalForage;
     export = localforage;
 }
+
+declare module '@ensdomains/ensjs';

packages/messenger-widget/package.json

@@ -16,6 +16,7 @@
     "@dm3-org/dm3-lib-test-helper": "workspace:^",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
+    "@ensdomains/ensjs": "^2.1.0",
     "@popperjs/core": "^2.11.8",
     "@rainbow-me/rainbowkit": "^1.0.6",
     "@testing-library/dom": "^9.3.1",

packages/messenger-widget/src/adapters/offchainResolverApi.ts

@@ -76,6 +76,35 @@ export async function claimAddress(
     }
 }
 
+/**
+ * updates profile with new delivery service nodes added
+ * @param address The ethereum address
+ * @param offchainResolverUrl The offchain resolver endpoint url
+ * @param subdomain The addr subdomain of the client .iE addr.dm3.eth
+ * @param signedUserProfile The signed dm3 user profile
+ */
+export async function updateProfile(
+    address: string,
+    offchainResolverUrl: string,
+    addrSubdomainDomain: string,
+    signedUserProfile: SignedUserProfile,
+) {
+    try {
+        const url = `${offchainResolverUrl}/profile/address`;
+        const data = {
+            signedUserProfile,
+            address,
+            subdomain: addrSubdomainDomain,
+        };
+
+        const { status } = await axios.post(url, data);
+        return status === 200;
+    } catch (err) {
+        console.log('update profile failed');
+        return false;
+    }
+}
+
 /**
  * returns the linked ENS name for an eth address
  * @param address The ethereum address

packages/messenger-widget/src/components/AddConversation/AddConversation.css

@@ -49,6 +49,7 @@
     font-style: italic;
     color: var(--error-text);
     margin-left: 1rem;
+    display: inline-table;
 }
 
 .add-name-container {

packages/messenger-widget/src/components/ConfigureProfile/ClaimDM3Name.tsx

@@ -0,0 +1,25 @@
+import { useContext } from 'react';
+import { fetchDM3NameComponent } from './bl';
+import { ConfigureProfileContext } from './context/ConfigureProfileContext';
+import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext';
+
+export function ClaimDM3Name() {
+    const { dm3Configuration } = useContext(DM3ConfigurationContext);
+
+    const { dm3NameServiceSelected } = useContext(ConfigureProfileContext);
+
+    return (
+        <div className="mt-4 ms-4 me-4 dm3-prof-select-container">
+            <div className="dm3-prof-select-type">
+                Add new dm3 profile - claim dm3 profile - claim name
+            </div>
+
+            <div className="p-4">
+                {fetchDM3NameComponent(
+                    dm3NameServiceSelected,
+                    dm3Configuration.chainId,
+                )}
+            </div>
+        </div>
+    );
+}

packages/messenger-widget/src/components/ConfigureProfile/ClaimOwnName.tsx

@@ -0,0 +1,25 @@
+import { useContext } from 'react';
+import { fetchComponent } from './bl';
+import { ConfigureProfileContext } from './context/ConfigureProfileContext';
+import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext';
+
+export function ClaimOwnName() {
+    const { dm3Configuration } = useContext(DM3ConfigurationContext);
+
+    const { namingServiceSelected } = useContext(ConfigureProfileContext);
+
+    return (
+        <div className="mt-4 ms-4 me-4 dm3-prof-select-container">
+            <div className="dm3-prof-select-type">
+                Add new dm3 profile - claim dm3 profile - claim name
+            </div>
+
+            <div className="ens-components-container">
+                {fetchComponent(
+                    namingServiceSelected,
+                    dm3Configuration.chainId,
+                )}
+            </div>
+        </div>
+    );
+}