comment UI

nounsDAO · Feb 4, 2024 · 1d6a7d8 · 1d6a7d8
1 parent 3619ccc
commit 1d6a7d8
Show file tree

Hide file tree

Showing 18 changed files with 517 additions and 199 deletions.
diff --git 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
@@ -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
@@ -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<AuctionActivityProps> = (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<AuctionActivityProps> = (props: AuctionActivityP
             {!isLastAuction ? (
               <NounInfoCard
                 nounId={auction.nounId.toNumber()}
-                bidHistoryOnClickHandler={showBidModalHandler}
+                nounWinner={auction.bidder}
+                bidHistoryOnClickHandler={showBidHistoryModalHandler}
               />
             ) : (
               displayGraphDepComps && (
                 <BidHistory
                   auctionId={auction.nounId.toString()}
+                  showBids={isBidsToggleActive}
                   max={3}
                   classes={bidHistoryClasses}
                 />
@@ -171,7 +184,14 @@ const AuctionActivity: React.FC<AuctionActivityProps> = (props: AuctionActivityP
             {isLastAuction &&
               !auction.amount.eq(0) &&
               (displayGraphDepComps ? (
-                <BidHistoryBtn onClick={showBidModalHandler} />
+                <div className={classes.container}>
+                  <BidHistoryToggle
+                    onBidsClick={toggleBidAmounts}
+                    onCommentsClick={toggleBidComments}
+                    isBidsToggleActive={isBidsToggleActive}
+                  />
+                  <BidHistoryBtn onClick={showBidHistoryModalHandler} />
+                </div>
               ) : (
                 <BidHistoryBtn onClick={openEtherscanBidHistory} />
               ))}

diff --git 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;
 }
diff --git 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 = <Trans>Add a comment to your bid (optional)</Trans>
   const isWalletConnected = activeAccount !== undefined;
 
+  const autoGrow = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    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<{
                 <Trans>Vote for the next Noun</Trans> ⌐◧-◧
               </Button>
             </Col>
-            {/* Only show force settle button if wallet connected */}
             {isWalletConnected && (
               <Col lg={12}>
                 <SettleManuallyBtn settleAuctionHandler={settleAuctionHandler} auction={auction} />
@@ -346,15 +353,16 @@ const Bid: React.FC<{
 
       {!auctionEnded && (
         <>
-          <InputGroup>
+          <InputGroup className={classes.inputGroup}>
             <span className={classes.customPlaceholderBidComment}>
               {!auctionEnded && bidComment.trim() === '' ? commentCopy : ''}
             </span>
             <FormControl
               className={classes.commentInput}
               as="textarea"
-              onChange={e => setBidComment(e.target.value)}
-              value={bidComment}
+              onChange={e => setBidComment(e.target.value.trimStart())}
+              value={bidComment.trimStart()}
+              onInput={autoGrow}
             />
           </InputGroup>
         </>