From 1d6a7d857ceeb019bf883cdb9dc32f3b56b0534b Mon Sep 17 00:00:00 2001 From: lilnounsDAO Date: Sun, 4 Feb 2024 03:20:24 +0000 Subject: [PATCH] comment UI --- .../AuctionActivity.module.css | 7 + .../AuctionActivity/BidHistory.module.css | 12 +- .../src/components/AuctionActivity/index.tsx | 26 ++- .../src/components/Bid/Bid.module.css | 75 +++++++-- .../nouns-webapp/src/components/Bid/index.tsx | 26 +-- .../src/components/BidHistory/index.tsx | 107 ++++++++++--- .../BidHistoryBtn/BidHistoryBtn.module.css | 87 +++++++++- .../src/components/BidHistoryBtn/index.tsx | 3 +- .../components/BidHistoryModalRow/index.tsx | 30 +--- .../src/components/BidHistoryToggle/index.tsx | 63 ++++++++ .../src/components/NounInfoCard/index.tsx | 5 +- .../NounInfoRowComment.module.css | 148 +++++++++--------- .../components/NounInfoRowComment/index.tsx | 44 ++---- .../src/components/TruncatedComment/index.tsx | 27 ++++ packages/nouns-webapp/src/locales/en-US.po | 13 +- packages/nouns-webapp/src/locales/ja-JP.po | 13 +- packages/nouns-webapp/src/locales/pseudo.po | 25 ++- .../nouns-webapp/src/wrappers/subgraph.ts | 5 +- 18 files changed, 517 insertions(+), 199 deletions(-) create mode 100644 packages/nouns-webapp/src/components/BidHistoryToggle/index.tsx create mode 100644 packages/nouns-webapp/src/components/TruncatedComment/index.tsx diff --git a/packages/nouns-webapp/src/components/AuctionActivity/AuctionActivity.module.css b/packages/nouns-webapp/src/components/AuctionActivity/AuctionActivity.module.css index d375f9d9f0..edfdd2c506 100644 --- a/packages/nouns-webapp/src/components/AuctionActivity/AuctionActivity.module.css +++ b/packages/nouns-webapp/src/components/AuctionActivity/AuctionActivity.module.css @@ -4,6 +4,13 @@ align-self: flex-start !important; } +.container { + display: flex; + justify-content: space-between; + margin-left: 16px; + margin-right: 16px; +} + .informationRow { margin-bottom: 0.5rem; } diff --git a/packages/nouns-webapp/src/components/AuctionActivity/BidHistory.module.css b/packages/nouns-webapp/src/components/AuctionActivity/BidHistory.module.css index 80762e72f6..7cfe920865 100644 --- a/packages/nouns-webapp/src/components/AuctionActivity/BidHistory.module.css +++ b/packages/nouns-webapp/src/components/AuctionActivity/BidHistory.module.css @@ -6,7 +6,7 @@ display: grid; text-align: start; list-style-type: none; - row-gap: 0.5rem; + row-gap: 0.25rem; padding: 0; margin-bottom: 8px; margin-top: 1rem; @@ -111,7 +111,15 @@ } .bidComment { - color: gray; + font-family: 'PT Root UI'; + font-weight: bold; + font-size: 16px; + padding-top: 2px; +} + +.bidComment:hover { + opacity: 0.65; + cursor: pointer; } .bidRowCool .bidAmount { diff --git a/packages/nouns-webapp/src/components/AuctionActivity/index.tsx b/packages/nouns-webapp/src/components/AuctionActivity/index.tsx index eb07aae94c..8894768968 100644 --- a/packages/nouns-webapp/src/components/AuctionActivity/index.tsx +++ b/packages/nouns-webapp/src/components/AuctionActivity/index.tsx @@ -24,6 +24,7 @@ import { useAppSelector } from '../../hooks'; import BidHistoryModal from '../BidHistoryModal'; import { Trans } from '@lingui/macro'; import Holder from '../Holder'; +import BidHistoryToggle from '../BidHistoryToggle'; const openEtherscanBidHistory = () => { const url = buildEtherscanAddressLink(config.addresses.nounsAuctionHouseProxy); @@ -53,15 +54,25 @@ const AuctionActivity: React.FC = (props: AuctionActivityP const [auctionEnded, setAuctionEnded] = useState(false); const [auctionTimer, setAuctionTimer] = useState(false); + const [isBidsToggleActive, setIsBidsToggleActive] = useState(true); const [showBidHistoryModal, setShowBidHistoryModal] = useState(false); - const showBidModalHandler = () => { + + const showBidHistoryModalHandler = () => { setShowBidHistoryModal(true); }; const dismissBidModalHanlder = () => { setShowBidHistoryModal(false); }; + const toggleBidAmounts = () => { + setIsBidsToggleActive(true); + }; + + const toggleBidComments = () => { + setIsBidsToggleActive(false); + }; + // timer logic - check auction status every 30 seconds, until five minutes remain, then check status every second useEffect(() => { if (!auction) return; @@ -155,12 +166,14 @@ const AuctionActivity: React.FC = (props: AuctionActivityP {!isLastAuction ? ( ) : ( displayGraphDepComps && ( @@ -171,7 +184,14 @@ const AuctionActivity: React.FC = (props: AuctionActivityP {isLastAuction && !auction.amount.eq(0) && (displayGraphDepComps ? ( - +
+ + +
) : ( ))} diff --git a/packages/nouns-webapp/src/components/Bid/Bid.module.css b/packages/nouns-webapp/src/components/Bid/Bid.module.css index 51a77d8c14..b1b1988ebf 100644 --- a/packages/nouns-webapp/src/components/Bid/Bid.module.css +++ b/packages/nouns-webapp/src/components/Bid/Bid.module.css @@ -81,22 +81,31 @@ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: auto; - height: 100px; color: black; - border-radius: 12px !important; - box-shadow: inset 0px 0px 0px 1px #fff; - background-color: white; + background-color: transparent !important; outline: none !important; box-shadow: none !important; font-family: 'PT Root UI'; font-weight: bold; font-size: 15px; - transition: all 0.2s ease-in-out; border: none; + border-radius: 0; + bottom: 0; + left: 0; + padding-left: 10px; + padding-bottom: 5px; + width: 100%; + box-sizing: border-box; + height: 3rem; + padding-top: 1.5rem; + line-height: 1.2em; + resize: none; + border-bottom: 1px solid #79809c49; } .commentInput:focus { - box-shadow: inset 0px 0px 0px 1px var(--brand-cool-dark-text) !important; + background-color: transparent !important; + border-bottom: 1px solid black; } .customPlaceholder { @@ -123,15 +132,21 @@ .customPlaceholderBidComment { position: absolute; opacity: 0.3; - top: 15%; - left: 3%; - color: var(--brand-cool-light-text); font-family: 'PT Root UI'; font-weight: bold; font-size: 15px; z-index: 1; pointer-events: none; text-align: left; + + bottom: 0; + left: 0; + padding-left: 10px; + padding-bottom: 5px; + width: 100%; + box-sizing: border-box; + color: rgb(95, 95, 95); + opacity: 1; } .activityRow .form-floating { @@ -189,22 +204,47 @@ border: 1px solid #8c8d9275; } - .customPlaceholder { - left: 40%; - } .customPlaceholderBidAmt { left: 3.5%; top: 16%; } - + + .customPlaceholderBidComment { + left: 0.1%; + top: 13%; + margin-left: 0.1rem; + margin-bottom: 0.5rem; + color: var(--brand-cool-light-text); + font-family: 'PT Root UI'; + font-weight: bold; + font-size: medium; + } + .commentInput { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + width: auto; + color: black; + border-radius: 12px !important; + box-shadow: inset 0px 0px 0px 1px #fff; + background-color: white; + outline: none !important; + box-shadow: none !important; + font-family: 'PT Root UI'; + /* font-weight:normal; */ + font-size: medium; + transition: all 0.2s ease-in-out; border: none; border: 1px solid #8c8d9275; + padding-top: 15px; + height: 100px; + left: 0.5%; } - - .customPlaceholderBidComment { - left: 3.5%; - top: 16%; + + .commentInput:focus { + box-shadow: inset 0px 0px 0px 1px var(--brand-cool-dark-text) !important; + border: none !important; } .emergencySettleWrapper { @@ -228,5 +268,6 @@ } .inputGroup { + position: relative; margin-bottom: 6px; } \ No newline at end of file diff --git a/packages/nouns-webapp/src/components/Bid/index.tsx b/packages/nouns-webapp/src/components/Bid/index.tsx index 343c0ea820..916fb481f2 100644 --- a/packages/nouns-webapp/src/components/Bid/index.tsx +++ b/packages/nouns-webapp/src/components/Bid/index.tsx @@ -10,13 +10,14 @@ import { Spinner, InputGroup, FormControl, Button, Col } from 'react-bootstrap'; import { useAuctionMinBidIncPercentage } from '../../wrappers/nounsAuction'; import { useAppDispatch } from '../../hooks'; import { AlertModal, setAlertModal } from '../../state/slices/application'; -import { NounsAuctionHouseFactory } from '@nouns/sdk'; +import { NounsAuctionHouseV2Factory } from '@nouns/sdk'; import config from '../../config'; import WalletConnectModal from '../WalletConnectModal'; import SettleManuallyBtn from '../SettleManuallyBtn'; import { Trans } from '@lingui/macro'; import { useActiveLocale } from '../../hooks/useActivateLocale'; import responsiveUiUtilsClasses from '../../utils/ResponsiveUIUtils.module.css'; +import { isMobileScreen } from '../../utils/isMobile'; const computeMinimumNextBid = ( currentBid: BigNumber, @@ -54,7 +55,7 @@ const Bid: React.FC<{ const { library } = useEthers(); let { auction, auctionEnded } = props; const activeLocale = useActiveLocale(); - const nounsAuctionHouseContract = new NounsAuctionHouseFactory().attach( + const nounsAuctionHouseContract = new NounsAuctionHouseV2Factory().attach( config.addresses.nounsAuctionHouseProxy, ); @@ -136,6 +137,7 @@ const Bid: React.FC<{ const gasLimit = await contract.estimateGas.createBid(auction.nounId, { value, }); + if (bidComment.trim() === '') { placeBid(auction.nounId, { value, @@ -149,7 +151,7 @@ const Bid: React.FC<{ placeBidWithComment(auction.nounId, bidComment, { value, - gasLimit: gasLimit.add(totalGas), // A 10,000 gas pad is used to avoid 'Out of gas' errors + gasLimit: totalGas, // A 10,000 gas pad is used to avoid 'Out of gas' errors }); } }; @@ -282,9 +284,15 @@ const Bid: React.FC<{ window.open('https://fomonouns.wtf', '_blank')?.focus(); }; - const commentCopy = 'leave a comment with your bid (optional)'; + const commentCopy = Add a comment to your bid (optional) const isWalletConnected = activeAccount !== undefined; + const autoGrow = (event: React.ChangeEvent) => { + const minHeight = isMobileScreen() ? '100px' : '3rem'; + const isSingleLine = event.target.value.split('\n').length === 1; + event.target.style.height = isSingleLine ? minHeight : `${event.target.scrollHeight}px`; + }; + return ( <> {showConnectModal && activeAccount === undefined && ( @@ -315,7 +323,7 @@ const Bid: React.FC<{ min="0" onChange={bidInputHandler} ref={bidInputRef} - value={bidInput} + value={bidInput.trimStart()} /> )} @@ -334,7 +342,6 @@ const Bid: React.FC<{ Vote for the next Noun ⌐◧-◧ - {/* Only show force settle button if wallet connected */} {isWalletConnected && ( @@ -346,15 +353,16 @@ const Bid: React.FC<{ {!auctionEnded && ( <> - + {!auctionEnded && bidComment.trim() === '' ? commentCopy : ''} setBidComment(e.target.value)} - value={bidComment} + onChange={e => setBidComment(e.target.value.trimStart())} + value={bidComment.trimStart()} + onInput={autoGrow} /> diff --git a/packages/nouns-webapp/src/components/BidHistory/index.tsx b/packages/nouns-webapp/src/components/BidHistory/index.tsx index 254de06f69..7d604355eb 100644 --- a/packages/nouns-webapp/src/components/BidHistory/index.tsx +++ b/packages/nouns-webapp/src/components/BidHistory/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import ShortAddress from '../ShortAddress'; import dayjs from 'dayjs'; import link from '../../assets/icons/Link.svg'; @@ -9,8 +9,17 @@ import { Bid } from '../../utils/types'; import { BigNumber as EthersBN } from '@ethersproject/bignumber'; import { useAuctionBids } from '../../wrappers/onDisplayAuction'; import { useAppSelector } from '../../hooks'; +import CommentModal from '../CommentModal'; +import TruncatedComment from '../TruncatedComment'; -const bidItem = (bid: Bid, index: number, classes: any, isCool?: boolean) => { +const bidItem = ( + bid: Bid, + index: number, + classes: any, + showBids: boolean, + onClickHandler: (index: number) => void, + isCool?: boolean, +) => { const bidAmount = ; const date = `${dayjs(bid.timestamp.toNumber() * 1000).format('MMM DD')} at ${dayjs( bid.timestamp.toNumber() * 1000, @@ -19,44 +28,98 @@ const bidItem = (bid: Bid, index: number, classes: any, isCool?: boolean) => { const txLink = buildEtherscanTxLink(bid.transactionHash); const isMobile = window.innerWidth < 992; + const CommentBlock = () => ( +
onClickHandler(index)}> + {bid.comment ? : null} +
+ ); + return ( -
  • -
    -
    -
    -
    - + <> +
  • +
    +
    +
    +
    + +
    +
    {date}
    -
    {date}
    -
    -
    -
    {bidAmount}
    -
    - - link symbol - +
    + {showBids ? ( + <> +
    {bidAmount}
    +
    + + link symbol + +
    + + ) : ( + <> + + + )}
    -
    -
    • + + ); }; -const BidHistory: React.FC<{ auctionId: string; max: number; classes?: any }> = props => { - const { auctionId, max, classes } = props; +const BidHistory: React.FC<{ + auctionId: string; + max: number; + showBids: boolean; + classes?: any; +}> = props => { + const { auctionId, max, showBids, classes } = props; const isCool = useAppSelector(state => state.application.isCoolBackground); const bids = useAuctionBids(EthersBN.from(auctionId)); + const sortedBids = + bids && + bids + .sort((bid1: Bid, bid2: Bid) => -1 * (bid1.timestamp.toNumber() - bid2.timestamp.toNumber())) + .slice(0, max); + + const [showBidModal, setShowBidModal] = useState(false); + const [bid, setBid] = useState(); + + const showBidModalHandler = (index: number) => { + setShowBidModal(true); + sortedBids && setBid(sortedBids[index]); + }; + + const dismissBidModalHandler = () => { + setShowBidModal(false); + }; + const bidContent = bids && bids .sort((bid1: Bid, bid2: Bid) => -1 * (bid1.timestamp.toNumber() - bid2.timestamp.toNumber())) .map((bid: Bid, i: number) => { - return bidItem(bid, i, classes, isCool); + return bidItem(bid, i, classes, showBids, () => showBidModalHandler(i), isCool); }) .slice(0, max); - return
      {bidContent}
    ; + return ( + <> + {showBidModal && bid && ( + + )} + +
      {bidContent}
    + + ); }; export default BidHistory; diff --git a/packages/nouns-webapp/src/components/BidHistoryBtn/BidHistoryBtn.module.css b/packages/nouns-webapp/src/components/BidHistoryBtn/BidHistoryBtn.module.css index 8d1f9b7a59..6de2c28618 100644 --- a/packages/nouns-webapp/src/components/BidHistoryBtn/BidHistoryBtn.module.css +++ b/packages/nouns-webapp/src/components/BidHistoryBtn/BidHistoryBtn.module.css @@ -74,9 +74,94 @@ } .bidHistoryWrapperCool:hover { - color: var(--brand-color-blue); + color: var(--brand-cool-dark-text); +} + +.bidHistoryWrapperWarmActive { + display: flex; + border-radius: 10px !important; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease-in-out; + color: var(--brand-color-warm); +} + +.bidHistoryWrapperCoolActive { + display: flex; + border-radius: 10px !important; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease-in-out; + color: var(--brand-cool-dark-text); } .bidHistoryWrapper:hover { background-color: var(--brand-gray-hover); } + +.container { + display: flex; + align-items: center; + height: fit-content; +} + +.currentBidCol { + border-right: 1px solid #79809c49; + color: var(--brand-color-cool); + font-family: 'PT Root UI'; + font-weight: bold; + font-size: 1rem; + font-size: 16px; + margin-right: 6px; +} + +.auctionTimerCol { + color: var(--brand-color-cool); + font-family: 'PT Root UI'; + font-weight: bold; + font-size: 1rem; + font-size: 16px; + margin-left: 6px; +} + +.currentBidsCol { + border-right: 1px solid #79809c49; + color: var(--brand-color-cool); + font-family: 'PT Root UI'; + font-weight: bold; + font-size: 1rem; + font-size: 16px; + margin-right: 6px; +} + +.auctionCommentsCol { + color: var(--brand-color-cool); + font-family: 'PT Root UI'; + font-weight: bold; + font-size: 1rem; + font-size: 16px; + margin-left: 6px; +} + +@media (max-width: 992px) { + + .currentBidsCol { + border-right: 1px solid #79809c49; + color: var(--brand-color-cool); + font-family: 'PT Root UI'; + font-weight: bold; + font-size: 1rem; + font-size: 16px; + padding-right: 9px; + } + + .auctionCommentsCol { + color: var(--brand-color-cool); + font-family: 'PT Root UI'; + font-weight: bold; + font-size: 1rem; + font-size: 16px; + margin-left: 3px; + } + +} \ No newline at end of file diff --git a/packages/nouns-webapp/src/components/BidHistoryBtn/index.tsx b/packages/nouns-webapp/src/components/BidHistoryBtn/index.tsx index 5118f760b8..a6cb985a8f 100644 --- a/packages/nouns-webapp/src/components/BidHistoryBtn/index.tsx +++ b/packages/nouns-webapp/src/components/BidHistoryBtn/index.tsx @@ -7,14 +7,13 @@ const BidHistoryBtn: React.FC<{ onClick: () => void }> = props => { const { onClick } = props; const isCool = useAppSelector(state => state.application.stateBackgroundColor) === '#d5d7e1'; - return (
    - View all bids + View all
    ); diff --git a/packages/nouns-webapp/src/components/BidHistoryModalRow/index.tsx b/packages/nouns-webapp/src/components/BidHistoryModalRow/index.tsx index 9dccc34b16..6a6b3b6c5f 100644 --- a/packages/nouns-webapp/src/components/BidHistoryModalRow/index.tsx +++ b/packages/nouns-webapp/src/components/BidHistoryModalRow/index.tsx @@ -1,5 +1,5 @@ import classes from './BidHistoryModalRow.module.css'; -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { ExternalLinkIcon } from '@heroicons/react/solid'; import { buildEtherscanTxLink } from '../../utils/etherscan'; import TruncatedAmount from '../TruncatedAmount'; @@ -16,6 +16,7 @@ import { containsBlockedText } from '../../utils/moderation/containsBlockedText' import { i18n } from '@lingui/core'; import { shortENS, useShortAddress } from '../../utils/addressAndENSDisplayUtils'; import { isMobileScreen } from '../../utils/isMobile'; +import TruncatedComment from '../TruncatedComment'; interface BidHistoryModalRowProps { bid: Bid; @@ -34,28 +35,11 @@ const BidHistoryModalRow: React.FC = props => { const shortAddress = useShortAddress(bid.sender); const isMobile = isMobileScreen(); - const commentLength = isMobile ? 13 : 30 + const commentLength = isMobile ? 13 : 35; - const [expanded, setExpanded] = useState(false); // new state here - const expandRowHandler = () => (bid.comment.length > commentLength ? setExpanded(!expanded) : null); // new handler to toggle expanded state - const [displayedComment, setDisplayedComment] = useState(''); - - useEffect(() => { - if (!bid.comment) return; - - if (bid.comment.length > commentLength) { - let truncComment = bid.comment.substring(0, commentLength); - - // check the next character, if it is not a space, go back to previous space - if (bid.comment.length > commentLength && bid.comment[commentLength] !== ' ') { - truncComment = truncComment.substring(0, truncComment.lastIndexOf(' ')); - } - // add ellipsis - setDisplayedComment(truncComment + '...'); - } else { - setDisplayedComment(bid.comment); - } - }, [bid.comment]); + const [expanded, setExpanded] = useState(false); + const expandRowHandler = () => + bid.comment.length > commentLength ? setExpanded(!expanded) : null; return ( <> @@ -84,7 +68,7 @@ const BidHistoryModalRow: React.FC = props => { )}
    - {bid.comment ? `"${displayedComment}"` : null} + {bid.comment ? : null}
    diff --git a/packages/nouns-webapp/src/components/BidHistoryToggle/index.tsx b/packages/nouns-webapp/src/components/BidHistoryToggle/index.tsx new file mode 100644 index 0000000000..f90cf40840 --- /dev/null +++ b/packages/nouns-webapp/src/components/BidHistoryToggle/index.tsx @@ -0,0 +1,63 @@ +import bidBtnClasses from '../BidHistoryBtn/BidHistoryBtn.module.css'; +import { useAppSelector } from '../../hooks'; +import { Trans } from '@lingui/macro'; +import { Col } from 'react-bootstrap'; + +const BidHistoryToggle: React.FC<{ + onBidsClick: () => void; + onCommentsClick: () => void; + isBidsToggleActive: boolean; +}> = props => { + const { onBidsClick, onCommentsClick, isBidsToggleActive } = props; + + const isCool = useAppSelector(state => state.application.stateBackgroundColor) === '#d5d7e1'; + + const Bids: React.FC = () => ( +
    + + Bids + +
    + ); + + const Comments: React.FC = () => ( +
    + + Comments + +
    + ); + + return ( + <> +
    + + +
    + + ); +}; + +export default BidHistoryToggle; diff --git a/packages/nouns-webapp/src/components/NounInfoCard/index.tsx b/packages/nouns-webapp/src/components/NounInfoCard/index.tsx index 87fff78153..f7b53800c6 100644 --- a/packages/nouns-webapp/src/components/NounInfoCard/index.tsx +++ b/packages/nouns-webapp/src/components/NounInfoCard/index.tsx @@ -18,11 +18,12 @@ import { Trans } from '@lingui/macro'; interface NounInfoCardProps { nounId: number; + nounWinner: string; bidHistoryOnClickHandler: () => void; } const NounInfoCard: React.FC = props => { - const { nounId, bidHistoryOnClickHandler } = props; + const { nounId, nounWinner, bidHistoryOnClickHandler } = props; const etherscanButtonClickHandler = () => window.open(buildEtherscanTokenLink(config.addresses.nounsToken, nounId)); @@ -38,7 +39,7 @@ const NounInfoCard: React.FC = props => { - + = props => { - const { nounId } = props; - const isCool = useAppSelector(state => state.application.isCoolBackground); - const { loading, error, data } = useQuery(bidsByAuctionQueryForWinningBid(nounId.toString())); + const { nounId, nounWinner } = props; + const { loading, error, data } = useQuery( + bidsByAuctionQueryForWinningBid(nounId.toString(), nounWinner.toLowerCase()), + ); - const [displayedComment, setDisplayedComment] = useState(''); const [showCommentModal, setShowCommentModal] = useState(false); const showCommentModalHandler = () => setShowCommentModal(true); const dismissCommentModalHanlder = () => setShowCommentModal(false); @@ -36,24 +36,7 @@ const NounInfoRowComment: React.FC = props => { const comment = bid !== null ? bid.comment : 'null'; const isMobile = isMobileScreen(); - const commentLength = isMobile ? 13 : 30 - - useEffect(() => { - if (!comment) return; - - if (comment.length > commentLength) { - let truncComment = comment.substring(0, commentLength); - - // check the next character, if it is not a space, go back to previous space - if (comment.length > commentLength && comment[commentLength] !== ' ') { - truncComment = truncComment.substring(0, truncComment.lastIndexOf(' ')); - } - // add ellipsis - setDisplayedComment(truncComment + '...'); - } else { - setDisplayedComment(comment); - } - }, [comment]); + const commentLength = isMobile ? 13 : 35; if (loading) { return ( @@ -86,14 +69,13 @@ const NounInfoRowComment: React.FC = props => { Comment {comment.length > commentLength ? ( - - {`"${displayedComment}"`} + + ) : ( - {`"${displayedComment}"`} + + + )} ) : ( diff --git a/packages/nouns-webapp/src/components/TruncatedComment/index.tsx b/packages/nouns-webapp/src/components/TruncatedComment/index.tsx new file mode 100644 index 0000000000..e322c2b274 --- /dev/null +++ b/packages/nouns-webapp/src/components/TruncatedComment/index.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { isMobileScreen } from '../../utils/isMobile'; + +const TruncatedComment: React.FC<{ comment: string }> = props => { + const { comment } = props; + const isMobile = isMobileScreen(); + const commentLength = isMobile ? 13 : 35; + + const getDisplayedComment = (comment: string) => { + if (!comment) return ''; + + if (comment.length > commentLength) { + let truncComment = comment.substring(0, commentLength); + if (comment[commentLength] !== ' ') { + truncComment = truncComment.substring(0, truncComment.lastIndexOf(' ')); + } + return truncComment + '...'; + } + return comment; + }; + + const displayedComment = getDisplayedComment(comment); + + return <>{displayedComment}; +}; + +export default TruncatedComment; diff --git a/packages/nouns-webapp/src/locales/en-US.po b/packages/nouns-webapp/src/locales/en-US.po index d8b8f3dd2a..c338615343 100644 --- a/packages/nouns-webapp/src/locales/en-US.po +++ b/packages/nouns-webapp/src/locales/en-US.po @@ -341,6 +341,7 @@ msgstr "Bid history" msgid "Bid was placed successfully!" msgstr "Bid was placed successfully!" +#: src/components/BidHistoryToggle/index.tsx #: src/components/NounInfoCard/index.tsx msgid "Bids" msgstr "Bids" @@ -441,6 +442,14 @@ msgstr "Close" msgid "Comment" msgstr "Comment" +#: src/components/NounInfoCard/BidHistoryToggle.tsx +msgid "Comments" +msgstr "Comments" + +#: src/components/NounInfoCard/Bid/index.tsx +msgid "Add a comment to your bid (optional)" +msgstr "Add a comment to your bid (optional)" + #: src/components/Documentation/index.tsx msgid "Compound Governance" msgstr "Compound Governance" @@ -1722,8 +1731,8 @@ msgid "View Threshold Info" msgstr "View Threshold Info" #: src/components/BidHistoryBtn/index.tsx -msgid "View all bids" -msgstr "View all bids" +msgid "View all" +msgstr "View all" #: src/components/ChangeDelegatePannel/index.tsx #: src/components/Holder/index.tsx diff --git a/packages/nouns-webapp/src/locales/ja-JP.po b/packages/nouns-webapp/src/locales/ja-JP.po index 59babbe851..9db57b469b 100644 --- a/packages/nouns-webapp/src/locales/ja-JP.po +++ b/packages/nouns-webapp/src/locales/ja-JP.po @@ -346,6 +346,7 @@ msgstr "入札履歴" msgid "Bid was placed successfully!" msgstr "正常に入札されました！" +#: src/components/BidHistoryToggle/index.tsx #: src/components/NounInfoCard/index.tsx msgid "Bids" msgstr "入札" @@ -446,6 +447,14 @@ msgstr "近い" msgid "Comment" msgstr "コメント" +#: src/components/NounInfoCard/BidHistoryToggle/index.tsx +msgid "Comments" +msgstr "コメント" + +#: src/components/NounInfoCard/Bid/index.tsx +msgid "Add a comment to your bid (optional)" +msgstr "入札にコメントを追加します (オプション)" + #: src/components/Documentation/index.tsx msgid "Compound Governance" msgstr "コンパウンドガバナンス" @@ -1727,8 +1736,8 @@ msgid "View Threshold Info" msgstr "" #: src/components/BidHistoryBtn/index.tsx -msgid "View all bids" -msgstr "すべての入札を表示" +msgid "View all" +msgstr "すべて見る" #: src/components/ChangeDelegatePannel/index.tsx #: src/components/Holder/index.tsx diff --git a/packages/nouns-webapp/src/locales/pseudo.po b/packages/nouns-webapp/src/locales/pseudo.po index a51a00076b..dd9c9336ad 100644 --- a/packages/nouns-webapp/src/locales/pseudo.po +++ b/packages/nouns-webapp/src/locales/pseudo.po @@ -186,6 +186,10 @@ msgstr "" #~ msgid "Add a Proposal Transaction" #~ msgstr "" +#: src/components/Bid/index.tsx +msgid "Add a comment to your bid (optional)" +msgstr "" + #: src/components/CandidateSponsors/SubmitUpdateProposal.tsx msgid "Add an optional message for the changes to the proposal" msgstr "" @@ -345,6 +349,7 @@ msgstr "" msgid "Bid was placed successfully!" msgstr "" +#: src/components/BidHistoryToggle/index.tsx #: src/components/NounInfoCard/index.tsx msgid "Bids" msgstr "" @@ -445,6 +450,10 @@ msgstr "" msgid "Comment" msgstr "" +#: src/components/BidHistoryToggle/index.tsx +msgid "Comments" +msgstr "" + #: src/components/Documentation/index.tsx msgid "Compound Governance" msgstr "" @@ -1222,6 +1231,10 @@ msgstr "" msgid "Proposals" msgstr "" +#: src/pages/Vote/index.tsx +msgid "Proposals cannot be executed during a forking period" +msgstr "" + #: src/components/Proposals/index.tsx msgid "Proposals submitted by community members will appear here." msgstr "" @@ -1467,12 +1480,12 @@ msgstr "" #~ msgstr "" #: src/pages/Vote/index.tsx -msgid "Taken on created block" -msgstr "" +#~ msgid "Taken on created block" +#~ msgstr "" #: src/pages/Vote/index.tsx -msgid "Taken on start block" -msgstr "" +#~ msgid "Taken on start block" +#~ msgstr "" #: src/components/VoteModal/index.tsx msgid "Thank you for voting." @@ -1746,8 +1759,8 @@ msgid "View Threshold Info" msgstr "" #: src/components/BidHistoryBtn/index.tsx -msgid "View all bids" -msgstr "" +#~ msgid "View all" +#~ msgstr "" #: src/components/ChangeDelegatePannel/index.tsx #: src/components/Holder/index.tsx diff --git a/packages/nouns-webapp/src/wrappers/subgraph.ts b/packages/nouns-webapp/src/wrappers/subgraph.ts index 05cab3db80..b3fd157790 100644 --- a/packages/nouns-webapp/src/wrappers/subgraph.ts +++ b/packages/nouns-webapp/src/wrappers/subgraph.ts @@ -338,9 +338,8 @@ export const bidsByAuctionQuery = (auctionId: string) => gql` } `; -export const bidsByAuctionQueryForWinningBid = (auctionId: string) => gql` -{ - bids(where:{auction: "${auctionId}", comment_not: null}, orderBy: amount, orderDirection: desc) { +export const bidsByAuctionQueryForWinningBid = (auctionId: string, winner: string) => gql` { + bids(where:{auction: "${auctionId}", comment_not: null, bidder: "${winner}"}, orderBy: amount, orderDirection: desc) { id comment amount