diff --git a/src/components/@shared/Orbis/DirectMessages/DmButton.module.css b/src/components/@shared/Orbis/DirectMessages/DmButton.module.css new file mode 100644 index 000000000..2688a599e --- /dev/null +++ b/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; +} diff --git a/src/components/@shared/Orbis/DirectMessages/DmButton.tsx b/src/components/@shared/Orbis/DirectMessages/DmButton.tsx new file mode 100644 index 000000000..0779436b6 --- /dev/null +++ b/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() + 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 ( +
+ +
+ ) + } +} diff --git a/src/components/Asset/AssetContent/MetaFull.tsx b/src/components/Asset/AssetContent/MetaFull.tsx index 1e6f2ba1c..7007bbf1a 100644 --- a/src/components/Asset/AssetContent/MetaFull.tsx +++ b/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() @@ -54,6 +55,7 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement { } /> )} {ddo?.id}} /> + ) : null } diff --git a/src/components/Profile/Header/index.module.css b/src/components/Profile/Header/index.module.css index 3835cc716..18056bead 100644 --- a/src/components/Profile/Header/index.module.css +++ b/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; -} diff --git a/src/components/Profile/Header/index.tsx b/src/components/Profile/Header/index.tsx index 1f9e5d59a..b16ef76dd 100644 --- a/src/components/Profile/Header/index.tsx +++ b/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() - 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 ( -
- -
- ) - } -} - export default function AccountHeader({ accountId }: {