update message button in profile

src/components/Profile/Header/Account.module.css

@@ -2,6 +2,13 @@
   text-align: center;
 }
 
+.sendMessage {
+  display: flex;
+  position: justify-end;
+  background-color: white;
+  cursor: pointer;
+}
+
 .account p {
   margin: 0;
 }

src/components/Profile/Header/Account.tsx

@@ -32,7 +32,7 @@ export default function Account({
           <Jellyfish className={styles.image} />
         )}
       </figure>
-
+      {/* <div>aaa</div> */}
       <div>
         <h3 className={styles.name}>{profile?.name}</h3>
         {accountId && (

src/components/Profile/Header/index.tsx

@@ -1,10 +1,11 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import PublisherLinks from './PublisherLinks'
 import Markdown from '@shared/Markdown'
 import Stats from './Stats'
 import Account from './Account'
 import styles from './index.module.css'
 import { useProfile } from '@context/Profile'
+import { useOrbis } from '@context/Orbis'
 
 const isDescriptionTextClamped = () => {
   const el = document.getElementById('description')
@@ -25,12 +26,49 @@ export default function AccountHeader({
   accountId: string
 }): ReactElement {
   const { profile } = useProfile()
+  const { orbis, account } = useOrbis()
   const [isShowMore, setIsShowMore] = useState(false)
+  const [userDid, setUserDid] = useState<string>()
 
   const toogleShowMore = () => {
     setIsShowMore(!isShowMore)
   }
 
+  const getDid = async () => {
+    const { data, error } = await orbis.getDids(accountId)
+    if (data) {
+      if (data.length > 0) {
+        setUserDid(data[0])
+      } else {
+        setUserDid('did:pkh:eip155:1:' + accountId.toLocaleLowerCase())
+      }
+    }
+
+    if (error) {
+      console.log(error)
+    }
+  }
+
+  const createConversation = async () => {
+    const res = await orbis.createConversation({
+      recipients: [userDid]
+    })
+    if (res.status === 200) {
+      console.log(res)
+    }
+  }
+
+  useEffect(() => {
+    console.log(userDid)
+  }, [userDid])
+
+  const clickHandler = () => {
+    console.log(accountId)
+    console.log(account)
+    getDid()
+    createConversation()
+  }
+
   return (
     <div className={styles.grid}>
       <div>
@@ -53,6 +91,9 @@ export default function AccountHeader({
         {profile?.links?.length > 0 && (
           <PublisherLinks className={styles.publisherLinks} />
         )}
+        <button className="sendMessage" onClick={clickHandler}>
+          Send Messages
+        </button>
       </div>
       <div className={styles.meta}>
         Profile data from{' '}