mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
fix(views): add CSS effect for useAuthorAddress jank
This commit is contained in:
plebeius.eth
@@ -3,9 +3,9 @@ import { useComment, useAuthorAddress } from '@plebbit/plebbit-react-hooks';
|
||||
|
||||
function VerifiedAuthor({ commentCid, children }) {
|
||||
const comment = useComment({ commentCid });
|
||||
const { authorAddress, shortAuthorAddress } = useAuthorAddress({ comment });
|
||||
const { authorAddress, shortAuthorAddress, authorAddressChanged } = useAuthorAddress({ comment });
|
||||
|
||||
return children({ authorAddress, shortAuthorAddress });
|
||||
return children({ authorAddress, shortAuthorAddress, authorAddressChanged });
|
||||
}
|
||||
|
||||
export default React.memo(VerifiedAuthor);
|
||||
|
||||
@@ -8,9 +8,9 @@ export const GlobalStyle = createGlobalStyle`
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: ${props => props.background};
|
||||
color: ${props => props.color};
|
||||
font-family: ${props => props.fontFamily};
|
||||
background: ${(props) => props.background};
|
||||
color: ${(props) => props.color};
|
||||
font-family: ${(props) => props.fontFamily};
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@@ -42,6 +42,39 @@ export const GlobalStyle = createGlobalStyle`
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.poster-address {
|
||||
display: inline-block;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.author-address-hidden {
|
||||
visibility: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.author-address-visible {
|
||||
float: left;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes authorAddressChangedAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.author-address-changed {
|
||||
animation-name: authorAddressChangedAnimation;
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-delay: 0s;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.enlarged {
|
||||
display: block;
|
||||
@@ -167,4 +200,4 @@ export const GlobalStyle = createGlobalStyle`
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
`;
|
||||
`;
|
||||
|
||||
@@ -922,12 +922,17 @@ const All = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
|
||||
<VerifiedAuthor commentCid={thread.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
<span key={`dt-${index}`} data-tooltip-id='tooltip' data-tooltip-content={getFormattedTime(thread.timestamp)} data-tooltip-place='top'>
|
||||
@@ -1251,6 +1256,11 @@ const All = () => {
|
||||
const replyMediaInfo = getCommentMediaInfo(reply);
|
||||
const fallbackImgUrl = 'assets/filedeleted-res.gif';
|
||||
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
|
||||
let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
|
||||
let signerAddress;
|
||||
if (storedSigners[reply.parentCid]) {
|
||||
signerAddress = storedSigners[reply.parentCid].address;
|
||||
}
|
||||
let replyDisplayWidth, replyDisplayHeight;
|
||||
if (reply.linkWidth && reply.linkHeight) {
|
||||
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
|
||||
@@ -1291,28 +1301,30 @@ const All = () => {
|
||||
Anonymous
|
||||
</span>
|
||||
)}
|
||||
|
||||
(u/
|
||||
<span
|
||||
key={`pa-${index}`}
|
||||
className='poster-address address-desktop'
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`}>{reply.author?.shortAddress}</span>
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`} data-tooltip-id='tooltip' data-tooltip-content={account?.author?.address} data-tooltip-place='top'>
|
||||
{account?.author?.address.slice(0, 10) + '(...)'}
|
||||
</span>
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
|
||||
<span
|
||||
@@ -2097,14 +2109,19 @@ const All = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
|
||||
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
|
||||
<VerifiedAuthor commentCid={thread.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
@@ -2436,6 +2453,11 @@ const All = () => {
|
||||
}
|
||||
const replyMediaInfo = getCommentMediaInfo(reply);
|
||||
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
|
||||
let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
|
||||
let signerAddress;
|
||||
if (storedSigners[selectedThreadCidRef]) {
|
||||
signerAddress = storedSigners[selectedThreadCidRef].address;
|
||||
}
|
||||
return (
|
||||
<div key={`mob-rc-${index}`} className='reply-container'>
|
||||
<div key={`mob-pr-${index}`} className='post-reply post-reply-mobile'>
|
||||
@@ -2580,21 +2602,26 @@ const All = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`} data-tooltip-id='tooltip' data-tooltip-content={account?.author?.address} data-tooltip-place='top'>
|
||||
{account?.author?.address.slice(0, 8) + '(...)'}
|
||||
</span>
|
||||
)}
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
|
||||
{reply.author?.shortAddress ? (
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
|
||||
{shortAuthorAddress}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
<br key={`mob-br-${index}`} />
|
||||
|
||||
@@ -1948,12 +1948,17 @@ const Board = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>
|
||||
<VerifiedAuthor commentCid={thread.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
<span
|
||||
@@ -2341,28 +2346,32 @@ const Board = () => {
|
||||
Anonymous
|
||||
</span>
|
||||
)}
|
||||
|
||||
(u/
|
||||
<span
|
||||
key={`pa-${index}`}
|
||||
className='poster-address address-desktop'
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`}>{reply.author?.shortAddress}</span>
|
||||
) : anonymousMode ? (
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
|
||||
{shortAuthorAddress}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`}>{account?.author?.shortAddress}</span>
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
|
||||
<span
|
||||
@@ -3154,14 +3163,19 @@ const Board = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
|
||||
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
|
||||
<VerifiedAuthor commentCid={thread.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
@@ -3654,21 +3668,26 @@ const Board = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : anonymousMode ? (
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`}>{account?.author?.shortAddress}</span>
|
||||
)}
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
|
||||
{reply.author?.shortAddress ? (
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
|
||||
{shortAuthorAddress}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
<br key={`mob-br-${index}`} />
|
||||
|
||||
@@ -926,12 +926,17 @@ const Subscriptions = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
|
||||
<VerifiedAuthor commentCid={thread.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
<span
|
||||
@@ -1261,6 +1266,11 @@ const Subscriptions = () => {
|
||||
const replyMediaInfo = getCommentMediaInfo(reply);
|
||||
const fallbackImgUrl = 'assets/filedeleted-res.gif';
|
||||
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
|
||||
let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
|
||||
let signerAddress;
|
||||
if (storedSigners[reply.parentCid]) {
|
||||
signerAddress = storedSigners[reply.parentCid].address;
|
||||
}
|
||||
let replyDisplayWidth, replyDisplayHeight;
|
||||
if (reply.linkWidth && reply.linkHeight) {
|
||||
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
|
||||
@@ -1301,28 +1311,30 @@ const Subscriptions = () => {
|
||||
Anonymous
|
||||
</span>
|
||||
)}
|
||||
|
||||
(u/
|
||||
<span
|
||||
key={`pa-${index}`}
|
||||
className='poster-address address-desktop'
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`}>{reply.author?.shortAddress}</span>
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`} data-tooltip-id='tooltip' data-tooltip-content={account?.author?.address} data-tooltip-place='top'>
|
||||
{account?.author?.address.slice(0, 10) + '(...)'}
|
||||
</span>
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
|
||||
<span
|
||||
@@ -2107,14 +2119,19 @@ const Subscriptions = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
|
||||
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
|
||||
<VerifiedAuthor commentCid={thread.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{thread.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
@@ -2446,6 +2463,11 @@ const Subscriptions = () => {
|
||||
}
|
||||
const replyMediaInfo = getCommentMediaInfo(reply);
|
||||
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
|
||||
let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
|
||||
let signerAddress;
|
||||
if (storedSigners[selectedThreadCidRef]) {
|
||||
signerAddress = storedSigners[selectedThreadCidRef].address;
|
||||
}
|
||||
return (
|
||||
<div key={`mob-rc-${index}`} className='reply-container'>
|
||||
<div key={`mob-pr-${index}`} className='post-reply post-reply-mobile'>
|
||||
@@ -2590,21 +2612,26 @@ const Subscriptions = () => {
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
|
||||
}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`} data-tooltip-id='tooltip' data-tooltip-content={account?.author?.address} data-tooltip-place='top'>
|
||||
{account?.author?.address.slice(0, 8) + '(...)'}
|
||||
</span>
|
||||
)}
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
|
||||
{reply.author?.shortAddress ? (
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
|
||||
{shortAuthorAddress}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
<br key={`mob-br-${index}`} />
|
||||
|
||||
@@ -1101,15 +1101,18 @@ const Thread = () => {
|
||||
className='poster-address address-desktop'
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
}
|
||||
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)}
|
||||
>
|
||||
(u/
|
||||
<span key={`pa-${comment.cid}`} className='poster-address'>
|
||||
{<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
|
||||
<VerifiedAuthor commentCid={comment.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{comment.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
@@ -1419,7 +1422,7 @@ const Thread = () => {
|
||||
Anonymous
|
||||
</span>
|
||||
)}
|
||||
|
||||
(u/
|
||||
<span
|
||||
key={`pa-${index}`}
|
||||
className='poster-address address-desktop'
|
||||
@@ -1427,16 +1430,20 @@ const Thread = () => {
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleAddressClick(reply.author?.shortAddress)}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`}>{reply.author?.shortAddress}</span>
|
||||
) : anonymousMode ? (
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`}>{account?.author?.shortAddress}</span>
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
|
||||
<span key={`dt-${index}`} className='date-time'>
|
||||
@@ -2085,15 +2092,18 @@ const Thread = () => {
|
||||
className='poster-address-mobile address-mobile'
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() =>
|
||||
handleAddressClick(
|
||||
<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
|
||||
)
|
||||
}
|
||||
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)}
|
||||
>
|
||||
(u/
|
||||
<span key={`mob-ha-${comment.cid}`} className='highlight-address-mobile'>
|
||||
{<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>}
|
||||
<span key={`mob-ha-${comment.cid}`} className='highlight-address-mobile poster-address'>
|
||||
<VerifiedAuthor commentCid={comment.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{comment.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
@@ -2488,24 +2498,30 @@ const Thread = () => {
|
||||
Anonymous
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span key={`fix1-ha-${index}`} className='poster-address-mobile'>
|
||||
(u/
|
||||
</span>
|
||||
<span
|
||||
key={`mob-pa-${index}`}
|
||||
className='poster-address-mobile address-mobile'
|
||||
className='poster-address-mobile poster-address'
|
||||
id='reply-button'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleAddressClick(reply.author?.shortAddress)}
|
||||
>
|
||||
(u/
|
||||
{reply.author?.shortAddress ? (
|
||||
<span key={`mob-ha-${index}`} className='highlight-address-mobile'>
|
||||
{reply.author?.shortAddress}
|
||||
</span>
|
||||
) : anonymousMode ? (
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
<VerifiedAuthor commentCid={reply.cid}>
|
||||
{({ shortAuthorAddress, authorAddressChanged }) => (
|
||||
<>
|
||||
<span className='author-address-hidden'>{reply.author.shortAddress}</span>
|
||||
<span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>{shortAuthorAddress}</span>
|
||||
</>
|
||||
)}
|
||||
</VerifiedAuthor>
|
||||
) : (
|
||||
<span key={`mob-ha-${index}`}>{account?.author?.shortAddress}</span>
|
||||
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
|
||||
)}
|
||||
</span>
|
||||
<span key={`fix2-ha-${index}`} className='poster-address-mobile'>
|
||||
)
|
||||
</span>
|
||||
<br key={`mob-br-${index}`} />
|
||||
|
||||
Reference in New Issue
Block a user