External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(views): add CSS effect for useAuthorAddress jank

Browse Source
This commit is contained in:
plebeius.eth
2023-09-26 13:40:28 +02:00
parent 322e2f89b3
commit 40a2ff94ea
6 changed files with 250 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/VerifiedAuthor.jsx
+2 -2
View File
@@ -3,9 +3,9 @@ import { useComment, useAuthorAddress } from '@plebbit/plebbit-react-hooks';
function VerifiedAuthor({ commentCid, children }) { function VerifiedAuthor({ commentCid, children }) {
const comment = useComment({ commentCid }); 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); export default React.memo(VerifiedAuthor);
src/components/styled/GlobalStyle.styled.jsx
+36 -3
View File
@@ -8,9 +8,9 @@ export const GlobalStyle = createGlobalStyle`
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: ${props => props.background}; background: ${(props) => props.background};
color: ${props => props.color}; color: ${(props) => props.color};
font-family: ${props => props.fontFamily}; font-family: ${(props) => props.fontFamily};
} }
.tooltip { .tooltip {
@@ -42,6 +42,39 @@ export const GlobalStyle = createGlobalStyle`
display: inline-block; 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) { @media (min-width: 480px) {
.enlarged { .enlarged {
display: block; display: block;
src/components/views/All.jsx
+58 -31
View File
@@ -922,12 +922,17 @@ const All = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</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>
) &nbsp; ) &nbsp;
<span key={`dt-${index}`} data-tooltip-id='tooltip' data-tooltip-content={getFormattedTime(thread.timestamp)} data-tooltip-place='top'> <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 replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = 'assets/filedeleted-res.gif'; const fallbackImgUrl = 'assets/filedeleted-res.gif';
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); 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; let replyDisplayWidth, replyDisplayHeight;
if (reply.linkWidth && reply.linkHeight) { if (reply.linkWidth && reply.linkHeight) {
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight)); const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
@@ -1291,28 +1301,30 @@ const All = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; &nbsp;(u/
<span <span
key={`pa-${index}`} key={`pa-${index}`}
className='poster-address address-desktop' className='poster-address address-desktop'
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/
{reply.author?.shortAddress ? ( {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'> <span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
{account?.author?.address.slice(0, 10) + '(...)'}
</span>
)} )}
)
</span> </span>
)
</span> </span>
&nbsp; &nbsp;
<span <span
@@ -2097,14 +2109,19 @@ const All = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/ (u/
<span key={`mob-ha-${index}`} className='highlight-address-mobile'> <span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
{<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>
)&nbsp; )&nbsp;
</span> </span>
@@ -2436,6 +2453,11 @@ const All = () => {
} }
const replyMediaInfo = getCommentMediaInfo(reply); const replyMediaInfo = getCommentMediaInfo(reply);
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
let signerAddress;
if (storedSigners[selectedThreadCidRef]) {
signerAddress = storedSigners[selectedThreadCidRef].address;
}
return ( return (
<div key={`mob-rc-${index}`} className='reply-container'> <div key={`mob-rc-${index}`} className='reply-container'>
<div key={`mob-pr-${index}`} className='post-reply post-reply-mobile'> <div key={`mob-pr-${index}`} className='post-reply post-reply-mobile'>
@@ -2580,21 +2602,26 @@ const All = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/ (u/
{reply.author?.shortAddress ? ( <span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
<span key={`mob-ha-${index}`} className='highlight-address-mobile'> {reply.author?.shortAddress ? (
{reply.author?.shortAddress} <VerifiedAuthor commentCid={reply.cid}>
</span> {({ shortAuthorAddress, authorAddressChanged }) => (
) : ( <>
<span key={`mob-ha-${index}`} data-tooltip-id='tooltip' data-tooltip-content={account?.author?.address} data-tooltip-place='top'> <span className='author-address-hidden'>{reply.author.shortAddress}</span>
{account?.author?.address.slice(0, 8) + '(...)'} <span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
</span> {shortAuthorAddress}
)} </span>
</>
)}
</VerifiedAuthor>
) : (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
)}
</span>
)&nbsp; )&nbsp;
</span> </span>
<br key={`mob-br-${index}`} /> <br key={`mob-br-${index}`} />
src/components/views/Board.jsx
+50 -31
View File
@@ -1948,12 +1948,17 @@ const Board = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</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>
) &nbsp; ) &nbsp;
<span <span
@@ -2341,28 +2346,32 @@ const Board = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; &nbsp;(u/
<span <span
key={`pa-${index}`} key={`pa-${index}`}
className='poster-address address-desktop' className='poster-address address-desktop'
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/
{reply.author?.shortAddress ? ( {reply.author?.shortAddress ? (
<span key={`mob-ha-${index}`}>{reply.author?.shortAddress}</span> <VerifiedAuthor commentCid={reply.cid}>
) : anonymousMode ? ( {({ shortAuthorAddress, authorAddressChanged }) => (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span> <>
<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> </span>
&nbsp; &nbsp;
<span <span
@@ -3154,14 +3163,19 @@ const Board = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/ (u/
<span key={`mob-ha-${index}`} className='highlight-address-mobile'> <span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
{<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>
)&nbsp; )&nbsp;
</span> </span>
@@ -3654,21 +3668,26 @@ const Board = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/ (u/
{reply.author?.shortAddress ? ( <span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
<span key={`mob-ha-${index}`} className='highlight-address-mobile'> {reply.author?.shortAddress ? (
{reply.author?.shortAddress} <VerifiedAuthor commentCid={reply.cid}>
</span> {({ shortAuthorAddress, authorAddressChanged }) => (
) : anonymousMode ? ( <>
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span> <span className='author-address-hidden'>{reply.author.shortAddress}</span>
) : ( <span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
<span key={`mob-ha-${index}`}>{account?.author?.shortAddress}</span> {shortAuthorAddress}
)} </span>
</>
)}
</VerifiedAuthor>
) : (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
)}
</span>
)&nbsp; )&nbsp;
</span> </span>
<br key={`mob-br-${index}`} /> <br key={`mob-br-${index}`} />
src/components/views/Subscriptions.jsx
+58 -31
View File
@@ -926,12 +926,17 @@ const Subscriptions = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</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>
) &nbsp; ) &nbsp;
<span <span
@@ -1261,6 +1266,11 @@ const Subscriptions = () => {
const replyMediaInfo = getCommentMediaInfo(reply); const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = 'assets/filedeleted-res.gif'; const fallbackImgUrl = 'assets/filedeleted-res.gif';
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); 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; let replyDisplayWidth, replyDisplayHeight;
if (reply.linkWidth && reply.linkHeight) { if (reply.linkWidth && reply.linkHeight) {
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight)); const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
@@ -1301,28 +1311,30 @@ const Subscriptions = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; &nbsp;(u/
<span <span
key={`pa-${index}`} key={`pa-${index}`}
className='poster-address address-desktop' className='poster-address address-desktop'
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/
{reply.author?.shortAddress ? ( {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'> <span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
{account?.author?.address.slice(0, 10) + '(...)'}
</span>
)} )}
)
</span> </span>
)
</span> </span>
&nbsp; &nbsp;
<span <span
@@ -2107,14 +2119,19 @@ const Subscriptions = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/ (u/
<span key={`mob-ha-${index}`} className='highlight-address-mobile'> <span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
{<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>
)&nbsp; )&nbsp;
</span> </span>
@@ -2446,6 +2463,11 @@ const Subscriptions = () => {
} }
const replyMediaInfo = getCommentMediaInfo(reply); const replyMediaInfo = getCommentMediaInfo(reply);
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
let signerAddress;
if (storedSigners[selectedThreadCidRef]) {
signerAddress = storedSigners[selectedThreadCidRef].address;
}
return ( return (
<div key={`mob-rc-${index}`} className='reply-container'> <div key={`mob-rc-${index}`} className='reply-container'>
<div key={`mob-pr-${index}`} className='post-reply post-reply-mobile'> <div key={`mob-pr-${index}`} className='post-reply post-reply-mobile'>
@@ -2590,21 +2612,26 @@ const Subscriptions = () => {
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
handleAddressClick( handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)
<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
} }
> >
(u/ (u/
{reply.author?.shortAddress ? ( <span key={`mob-ha-${index}`} className='highlight-address-mobile poster-address'>
<span key={`mob-ha-${index}`} className='highlight-address-mobile'> {reply.author?.shortAddress ? (
{reply.author?.shortAddress} <VerifiedAuthor commentCid={reply.cid}>
</span> {({ shortAuthorAddress, authorAddressChanged }) => (
) : ( <>
<span key={`mob-ha-${index}`} data-tooltip-id='tooltip' data-tooltip-content={account?.author?.address} data-tooltip-place='top'> <span className='author-address-hidden'>{reply.author.shortAddress}</span>
{account?.author?.address.slice(0, 8) + '(...)'} <span className={`author-address-visible ${authorAddressChanged ? 'authorAddressChanged' : ''}`}>
</span> {shortAuthorAddress}
)} </span>
</>
)}
</VerifiedAuthor>
) : (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span>
)}
</span>
)&nbsp; )&nbsp;
</span> </span>
<br key={`mob-br-${index}`} /> <br key={`mob-br-${index}`} />
src/components/views/Thread.jsx
+45 -29
View File
@@ -1101,15 +1101,18 @@ const Thread = () => {
className='poster-address address-desktop' className='poster-address address-desktop'
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)}
handleAddressClick(
<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
}
> >
(u/ (u/
<span key={`pa-${comment.cid}`} className='poster-address'> <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>
) )
</span> </span>
@@ -1419,7 +1422,7 @@ const Thread = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; &nbsp;(u/
<span <span
key={`pa-${index}`} key={`pa-${index}`}
className='poster-address address-desktop' className='poster-address address-desktop'
@@ -1427,16 +1430,20 @@ const Thread = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => handleAddressClick(reply.author?.shortAddress)} onClick={() => handleAddressClick(reply.author?.shortAddress)}
> >
(u/
{reply.author?.shortAddress ? ( {reply.author?.shortAddress ? (
<span key={`mob-ha-${index}`}>{reply.author?.shortAddress}</span> <VerifiedAuthor commentCid={reply.cid}>
) : anonymousMode ? ( {({ shortAuthorAddress, authorAddressChanged }) => (
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</span> <>
<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> </span>
&nbsp; &nbsp;
<span key={`dt-${index}`} className='date-time'> <span key={`dt-${index}`} className='date-time'>
@@ -2085,15 +2092,18 @@ const Thread = () => {
className='poster-address-mobile address-mobile' className='poster-address-mobile address-mobile'
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress}</VerifiedAuthor>)}
handleAddressClick(
<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}</VerifiedAuthor>,
)
}
> >
(u/ (u/
<span key={`mob-ha-${comment.cid}`} className='highlight-address-mobile'> <span key={`mob-ha-${comment.cid}`} className='highlight-address-mobile 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>
)&nbsp; )&nbsp;
</span> </span>
@@ -2488,24 +2498,30 @@ const Thread = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; <span key={`fix1-ha-${index}`} className='poster-address-mobile'>
&nbsp;(u/
</span>
<span <span
key={`mob-pa-${index}`} key={`mob-pa-${index}`}
className='poster-address-mobile address-mobile' className='poster-address-mobile poster-address'
id='reply-button' id='reply-button'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => handleAddressClick(reply.author?.shortAddress)} onClick={() => handleAddressClick(reply.author?.shortAddress)}
> >
(u/
{reply.author?.shortAddress ? ( {reply.author?.shortAddress ? (
<span key={`mob-ha-${index}`} className='highlight-address-mobile'> <VerifiedAuthor commentCid={reply.cid}>
{reply.author?.shortAddress} {({ shortAuthorAddress, authorAddressChanged }) => (
</span> <>
) : anonymousMode ? ( <span className='author-address-hidden'>{reply.author.shortAddress}</span>
<span key={`mob-ha-${index}`}>{signerAddress?.slice(8, 20)}</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> </span>
<br key={`mob-br-${index}`} /> <br key={`mob-br-${index}`} />