diff --git a/src/components/VerifiedAuthor.jsx b/src/components/VerifiedAuthor.jsx index a927a4fb..a903b3e1 100644 --- a/src/components/VerifiedAuthor.jsx +++ b/src/components/VerifiedAuthor.jsx @@ -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); diff --git a/src/components/styled/GlobalStyle.styled.jsx b/src/components/styled/GlobalStyle.styled.jsx index c140bf8d..05c647a5 100644 --- a/src/components/styled/GlobalStyle.styled.jsx +++ b/src/components/styled/GlobalStyle.styled.jsx @@ -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; } } -`; \ No newline at end of file +`; diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 1a11d106..ba49d68d 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -922,12 +922,17 @@ const All = () => { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > - {{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {thread.author.shortAddress} + {shortAuthorAddress} + + )} + )   @@ -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 )} -   +  (u/ - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > - (u/ {reply.author?.shortAddress ? ( - {reply.author?.shortAddress} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + {shortAuthorAddress} + + )} + ) : ( - - {account?.author?.address.slice(0, 10) + '(...)'} - + {signerAddress?.slice(8, 20)} )} - ) + )   { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > (u/ - - {{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}} + + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {thread.author.shortAddress} + {shortAuthorAddress} + + )} + )  @@ -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 (
@@ -2580,21 +2602,26 @@ const All = () => { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > (u/ - {reply.author?.shortAddress ? ( - - {reply.author?.shortAddress} - - ) : ( - - {account?.author?.address.slice(0, 8) + '(...)'} - - )} + + {reply.author?.shortAddress ? ( + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + + {shortAuthorAddress} + + + )} + + ) : ( + {signerAddress?.slice(8, 20)} + )} + ) 
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index af954a71..19fee2f3 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1948,12 +1948,17 @@ const Board = () => { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {thread.author.shortAddress} + {shortAuthorAddress} + + )} + )   { Anonymous )} -   +  (u/ - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > - (u/ {reply.author?.shortAddress ? ( - {reply.author?.shortAddress} - ) : anonymousMode ? ( - {signerAddress?.slice(8, 20)} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + + {shortAuthorAddress} + + + )} + ) : ( - {account?.author?.shortAddress} + {signerAddress?.slice(8, 20)} )} - ) + )   { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > (u/ - - {{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}} + + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {thread.author.shortAddress} + {shortAuthorAddress} + + )} + )  @@ -3654,21 +3668,26 @@ const Board = () => { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > (u/ - {reply.author?.shortAddress ? ( - - {reply.author?.shortAddress} - - ) : anonymousMode ? ( - {signerAddress?.slice(8, 20)} - ) : ( - {account?.author?.shortAddress} - )} + + {reply.author?.shortAddress ? ( + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + + {shortAuthorAddress} + + + )} + + ) : ( + {signerAddress?.slice(8, 20)} + )} + ) 
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index be5dac80..7c13ac19 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -926,12 +926,17 @@ const Subscriptions = () => { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > - {{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {thread.author.shortAddress} + {shortAuthorAddress} + + )} + )   { 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 )} -   +  (u/ - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > - (u/ {reply.author?.shortAddress ? ( - {reply.author?.shortAddress} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + {shortAuthorAddress} + + )} + ) : ( - - {account?.author?.address.slice(0, 10) + '(...)'} - + {signerAddress?.slice(8, 20)} )} - ) + )   { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > (u/ - - {{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}} + + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {thread.author.shortAddress} + {shortAuthorAddress} + + )} + )  @@ -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 (
@@ -2590,21 +2612,26 @@ const Subscriptions = () => { id='reply-button' style={{ cursor: 'pointer' }} onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) + handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress}) } > (u/ - {reply.author?.shortAddress ? ( - - {reply.author?.shortAddress} - - ) : ( - - {account?.author?.address.slice(0, 8) + '(...)'} - - )} + + {reply.author?.shortAddress ? ( + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + + {shortAuthorAddress} + + + )} + + ) : ( + {signerAddress?.slice(8, 20)} + )} + ) 
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index d94c75d4..7f00ee8c 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -1101,15 +1101,18 @@ const Thread = () => { className='poster-address address-desktop' id='reply-button' style={{ cursor: 'pointer' }} - onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) - } + onClick={() => handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress})} > (u/ - {{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {comment.author.shortAddress} + {shortAuthorAddress} + + )} + ) @@ -1419,7 +1422,7 @@ const Thread = () => { Anonymous )} -   +  (u/ { style={{ cursor: 'pointer' }} onClick={() => handleAddressClick(reply.author?.shortAddress)} > - (u/ {reply.author?.shortAddress ? ( - {reply.author?.shortAddress} - ) : anonymousMode ? ( - {signerAddress?.slice(8, 20)} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + {shortAuthorAddress} + + )} + ) : ( - {account?.author?.shortAddress} + {signerAddress?.slice(8, 20)} )} - ) + )   @@ -2085,15 +2092,18 @@ const Thread = () => { className='poster-address-mobile address-mobile' id='reply-button' style={{ cursor: 'pointer' }} - onClick={() => - handleAddressClick( - {({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}, - ) - } + onClick={() => handleAddressClick({({ shortAuthorAddress }) => shortAuthorAddress})} > (u/ - - {{({ shortAuthorAddress }) => shortAuthorAddress || 'aPL4c3H0Ld3r'}} + + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {comment.author.shortAddress} + {shortAuthorAddress} + + )} + )  @@ -2488,24 +2498,30 @@ const Thread = () => { Anonymous )} -   + +  (u/ + handleAddressClick(reply.author?.shortAddress)} > - (u/ {reply.author?.shortAddress ? ( - - {reply.author?.shortAddress} - - ) : anonymousMode ? ( - {signerAddress?.slice(8, 20)} + + {({ shortAuthorAddress, authorAddressChanged }) => ( + <> + {reply.author.shortAddress} + {shortAuthorAddress} + + )} + ) : ( - {account?.author?.shortAddress} + {signerAddress?.slice(8, 20)} )} + + )