create new DM button component and add to asset

src/components/@shared/Orbis/DirectMessages/DmButton.module.css

@@ -0,0 +1,13 @@
+.dmButton {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-left: auto;
+  padding: calc(var(--spacer) / 4) 0;
+}
+
+.dmButton span {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  margin-top: 4px;
+}

src/components/@shared/Orbis/DirectMessages/DmButton.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+import Button from '@shared/atoms/Button'
+import styles from './DmButton.module.css'
+import { accountTruncate } from '@utils/web3'
+import { useWeb3 } from '@context/Web3'
+import { useProfile } from '@context/Profile'
+import { useOrbis } from '@context/Orbis'
+
+export default function DmButton({
+  accountId,
+  text = 'Send Direct Message'
+}: {
+  accountId: string
+  text?: string
+}) {
+  const { profile, ownAccount } = useProfile()
+  const { accountId: ownAccountId, connect } = useWeb3()
+  const {
+    checkOrbisConnection,
+    getConversationByDid,
+    setNewConversation,
+    setConversationId,
+    setOpenConversations,
+    getDid
+  } = useOrbis()
+  const [userDid, setUserDid] = useState<string | undefined>()
+  const [isCreatingConversation, setIsCreatingConversation] = useState(false)
+
+  const handleActivation = async () => {
+    const resConnect = await connect()
+    if (resConnect) {
+      await checkOrbisConnection({
+        address: resConnect,
+        autoConnect: true,
+        lit: true
+      })
+    }
+  }
+
+  useEffect(() => {
+    const getUserDid = async () => {
+      const did = await getDid(accountId)
+      setUserDid(did)
+    }
+
+    if (accountId) {
+      getUserDid()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [accountId])
+
+  if (!ownAccount && userDid) {
+    return (
+      <div className={styles.dmButton}>
+        <Button
+          style="primary"
+          size="small"
+          disabled={isCreatingConversation}
+          onClick={async () => {
+            if (!ownAccountId) {
+              handleActivation()
+            } else {
+              setIsCreatingConversation(true)
+              const conversation = await getConversationByDid(userDid)
+              if (conversation) {
+                setConversationId(conversation.stream_id)
+              } else {
+                console.log('need to create new conversation')
+                const suffix =
+                  profile && profile?.name
+                    ? profile?.name
+                    : accountTruncate(accountId.toLowerCase())
+
+                setConversationId(`new-${suffix}`)
+                setNewConversation({
+                  recipients: [userDid]
+                })
+              }
+              setOpenConversations(true)
+              setIsCreatingConversation(false)
+            }
+          }}
+        >
+          {isCreatingConversation ? 'Loading...' : text}
+        </Button>
+      </div>
+    )
+  }
+}

src/components/Asset/AssetContent/MetaFull.tsx

@@ -6,6 +6,7 @@ import { useAsset } from '@context/Asset'
 // import { useWeb3 } from '@context/Web3'
 import { getDummyWeb3 } from '@utils/web3'
 import { Asset, Datatoken, LoggerInstance } from '@oceanprotocol/lib'
+import DmButton from '@shared/Orbis/DirectMessages/DmButton'
 
 export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
   const [paymentCollector, setPaymentCollector] = useState<string>()
@@ -54,6 +55,7 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
         <MetaItem title="Docker Image" content={<DockerImage />} />
       )}
       <MetaItem title="DID" content={<code>{ddo?.id}</code>} />
+      <DmButton accountId={ddo?.nft?.owner} text="Contact Publisher" />
     </div>
   ) : null
 }

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

@@ -52,17 +52,3 @@
   right: calc(var(--spacer) / 3);
   bottom: calc(var(--spacer) / 6);
 }
-
-.dmButton {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  margin-left: auto;
-  padding: calc(var(--spacer) / 4) 0;
-}
-
-.dmButton span {
-  font-size: var(--font-size-small);
-  color: var(--color-secondary);
-  margin-top: 4px;
-}

src/components/Profile/Header/index.tsx

@@ -1,14 +1,11 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import PublisherLinks from './PublisherLinks'
 import Markdown from '@shared/Markdown'
-import Button from '@shared/atoms/Button'
 import Stats from './Stats'
 import Account from './Account'
 import styles from './index.module.css'
-import { accountTruncate } from '@utils/web3'
-import { useWeb3 } from '@context/Web3'
 import { useProfile } from '@context/Profile'
-import { useOrbis } from '@context/Orbis'
+import DmButton from '@shared/Orbis/DirectMessages/DmButton'
 
 const isDescriptionTextClamped = () => {
   const el = document.getElementById('description')
@@ -23,82 +20,6 @@ const LinkExternal = ({ url, text }: { url: string; text: string }) => {
   )
 }
 
-const DmButton = ({ accountId }: { accountId: string }) => {
-  const { profile, ownAccount } = useProfile()
-  const { accountId: ownAccountId, connect } = useWeb3()
-  const {
-    checkOrbisConnection,
-    getConversationByDid,
-    setNewConversation,
-    setConversationId,
-    setOpenConversations,
-    getDid
-  } = useOrbis()
-  const [userDid, setUserDid] = useState<string | undefined>()
-  const [isCreatingConversation, setIsCreatingConversation] = useState(false)
-
-  const handleActivation = async () => {
-    const resConnect = await connect()
-    if (resConnect) {
-      await checkOrbisConnection({
-        address: resConnect,
-        autoConnect: true,
-        lit: true
-      })
-    }
-  }
-
-  useEffect(() => {
-    const getUserDid = async () => {
-      const did = await getDid(accountId)
-      setUserDid(did)
-    }
-
-    if (accountId) {
-      getUserDid()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [accountId])
-
-  if (!ownAccount && userDid) {
-    return (
-      <div className={styles.dmButton}>
-        <Button
-          style="primary"
-          size="small"
-          disabled={isCreatingConversation}
-          onClick={async () => {
-            if (!ownAccountId) {
-              handleActivation()
-            } else {
-              setIsCreatingConversation(true)
-              const conversation = await getConversationByDid(userDid)
-              if (conversation) {
-                setConversationId(conversation.stream_id)
-              } else {
-                console.log('need to create new conversation')
-                const suffix =
-                  profile && profile?.name
-                    ? profile?.name
-                    : accountTruncate(accountId.toLowerCase())
-
-                setConversationId(`new-${suffix}`)
-                setNewConversation({
-                  recipients: [userDid]
-                })
-              }
-              setOpenConversations(true)
-              setIsCreatingConversation(false)
-            }
-          }}
-        >
-          {isCreatingConversation ? 'Loading...' : 'Send Direct Message'}
-        </Button>
-      </div>
-    )
-  }
-}
-
 export default function AccountHeader({
   accountId
 }: {