From c38d389aff5e25be8b8aa379359caf50ee2d2a5e Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Thu, 8 Sep 2022 01:01:04 -0500
Subject: [PATCH] Merge branch 'main' into new-home

---
 common/comment.ts                             |  12 +-
 firestore.rules                               |   4 +
 functions/src/place-bet.ts                    |   2 +-
 web/components/answers/answer-bet-panel.tsx   |   2 +-
 web/components/arrange-home.tsx               |   2 +-
 web/components/bet-button.tsx                 |   2 +-
 web/components/bet-panel.tsx                  |  12 +-
 web/components/comment-input.tsx              | 175 +++++++++++
 web/components/contract-search.tsx            |   2 +-
 web/components/contract/contract-details.tsx  |   2 +-
 .../contract/contract-info-dialog.tsx         |   2 +-
 .../contract/contract-leaderboard.tsx         |   2 +-
 web/components/contract/contract-tabs.tsx     |   4 +-
 web/components/feed/contract-activity.tsx     |   4 +-
 .../feed/feed-answer-comment-group.tsx        |   4 +-
 web/components/feed/feed-comments.tsx         | 273 +++++-------------
 web/components/landing-page-panel.tsx         |  17 +-
 web/components/nav/nav-bar.tsx                |   2 +-
 web/components/nav/profile-menu.tsx           |   2 +-
 web/components/play-money-disclaimer.tsx      |   4 +-
 .../portfolio/portfolio-value-section.tsx     |   1 +
 web/components/profile/loans-modal.tsx        |   2 +-
 web/components/resolution-panel.tsx           |   4 +-
 web/components/sign-up-prompt.tsx             |   2 +-
 web/components/tipper.tsx                     |   4 +-
 web/components/user-page.tsx                  |   2 +-
 web/components/yes-no-selector.tsx            |   2 +-
 web/hooks/use-comments.ts                     |  18 +-
 web/hooks/use-tip-txns.ts                     |   7 +-
 web/lib/firebase/comments.ts                  | 109 +++++--
 web/lib/firebase/groups.ts                    |   3 +-
 web/lib/firebase/txns.ts                      |  14 +
 web/pages/api/v0/group/by-id/[id]/markets.ts  |   5 +-
 web/pages/experimental/home/index.tsx         |   4 +-
 web/pages/group/[...slugs]/index.tsx          |   1 +
 web/pages/leaderboards.tsx                    |  17 +-
 web/pages/notifications.tsx                   |   4 +-
 web/pages/post/[...slugs]/index.tsx           |  77 ++++-
 web/posts/post-comments.tsx                   | 172 +++++++++++
 39 files changed, 687 insertions(+), 290 deletions(-)
 create mode 100644 web/components/comment-input.tsx
 create mode 100644 web/posts/post-comments.tsx

diff --git a/common/comment.ts b/common/comment.ts
index 3a4bd9ac..7ecbb6d4 100644
--- a/common/comment.ts
+++ b/common/comment.ts
@@ -1,6 +1,6 @@
 import type { JSONContent } from '@tiptap/core'
 
-export type AnyCommentType = OnContract | OnGroup
+export type AnyCommentType = OnContract | OnGroup | OnPost
 
 // Currently, comments are created after the bet, not atomically with the bet.
 // They're uniquely identified by the pair contractId/betId.
@@ -20,7 +20,7 @@ export type Comment<T extends AnyCommentType = AnyCommentType> = {
   userAvatarUrl?: string
 } & T
 
-type OnContract = {
+export type OnContract = {
   commentType: 'contract'
   contractId: string
   answerOutcome?: string
@@ -35,10 +35,16 @@ type OnContract = {
   betOutcome?: string
 }
 
-type OnGroup = {
+export type OnGroup = {
   commentType: 'group'
   groupId: string
 }
 
+export type OnPost = {
+  commentType: 'post'
+  postId: string
+}
+
 export type ContractComment = Comment<OnContract>
 export type GroupComment = Comment<OnGroup>
+export type PostComment = Comment<OnPost>
diff --git a/firestore.rules b/firestore.rules
index 15b60d0f..30bf0ec9 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -203,6 +203,10 @@ service cloud.firestore {
                          .affectedKeys()
                          .hasOnly(['name', 'content']);
         allow delete: if isAdmin() || request.auth.uid == resource.data.creatorId;
+         match /comments/{commentId} {
+          	allow read;
+            allow create: if request.auth != null && commentMatchesUser(request.auth.uid, request.resource.data) ;
+          }
       }
   }
 }
diff --git a/functions/src/place-bet.ts b/functions/src/place-bet.ts
index 404fda50..d98430c1 100644
--- a/functions/src/place-bet.ts
+++ b/functions/src/place-bet.ts
@@ -135,7 +135,7 @@ export const placebet = newEndpoint({}, async (req, auth) => {
         !isFinite(newP) ||
         Math.min(...Object.values(newPool ?? {})) < CPMM_MIN_POOL_QTY)
     ) {
-      throw new APIError(400, 'Bet too large for current liquidity pool.')
+      throw new APIError(400, 'Trade too large for current liquidity pool.')
     }
 
     const betDoc = contractDoc.collection('bets').doc()
diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index ace06b6c..dbf7ff11 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -120,7 +120,7 @@ export function AnswerBetPanel(props: {
     <Col className={clsx('px-2 pb-2 pt-4 sm:pt-0', className)}>
       <Row className="items-center justify-between self-stretch">
         <div className="text-xl">
-          Bet on {isModal ? `"${answer.text}"` : 'this answer'}
+          Buy answer: {isModal ? `"${answer.text}"` : 'this answer'}
         </div>
 
         {!isModal && (
diff --git a/web/components/arrange-home.tsx b/web/components/arrange-home.tsx
index c1c86a0e..ae02e3ea 100644
--- a/web/components/arrange-home.tsx
+++ b/web/components/arrange-home.tsx
@@ -111,7 +111,7 @@ export const getHomeItems = (
     { label: 'Trending', id: 'score' },
     { label: 'Newest', id: 'newest' },
     { label: 'Close date', id: 'close-date' },
-    { label: 'Your bets', id: 'your-bets' },
+    { label: 'Your trades', id: 'your-bets' },
     ...groups.map((g) => ({
       label: g.name,
       id: g.id,
diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index 7d84bbc0..77b17678 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -38,7 +38,7 @@ export default function BetButton(props: {
             className={clsx('my-auto inline-flex min-w-[75px] ', btnClassName)}
             onClick={() => setOpen(true)}
           >
-            Bet
+            Trade
           </Button>
         ) : (
           <BetSignUpPrompt />
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index c48e92a9..1f2b9bd3 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -281,7 +281,7 @@ function BuyPanel(props: {
         title="Whoa, there!"
         text={`You might not want to spend ${formatPercent(
           bankrollFraction
-        )} of your balance on a single bet. \n\nCurrent balance: ${formatMoney(
+        )} of your balance on a single trade. \n\nCurrent balance: ${formatMoney(
           user?.balance ?? 0
         )}`}
       />
@@ -379,11 +379,11 @@ function BuyPanel(props: {
           )}
           onClick={betDisabled ? undefined : submitBet}
         >
-          {isSubmitting ? 'Submitting...' : 'Submit bet'}
+          {isSubmitting ? 'Submitting...' : 'Submit trade'}
         </button>
       )}
 
-      {wasSubmitted && <div className="mt-4">Bet submitted!</div>}
+      {wasSubmitted && <div className="mt-4">Trade submitted!</div>}
     </Col>
   )
 }
@@ -569,7 +569,7 @@ function LimitOrderPanel(props: {
       <Row className="mt-1 items-center gap-4">
         <Col className="gap-2">
           <div className="relative ml-1 text-sm text-gray-500">
-            Bet {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} up to
+            Buy {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} up to
           </div>
           <ProbabilityOrNumericInput
             contract={contract}
@@ -580,7 +580,7 @@ function LimitOrderPanel(props: {
         </Col>
         <Col className="gap-2">
           <div className="ml-1 text-sm text-gray-500">
-            Bet {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} down to
+            Buy {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} down to
           </div>
           <ProbabilityOrNumericInput
             contract={contract}
@@ -750,7 +750,7 @@ function QuickOrLimitBet(props: {
 
   return (
     <Row className="align-center mb-4 justify-between">
-      <div className="text-4xl">Bet</div>
+      <div className="text-4xl">Trade</div>
       {!hideToggle && (
         <Row className="mt-1 items-center gap-2">
           <PillButton
diff --git a/web/components/comment-input.tsx b/web/components/comment-input.tsx
new file mode 100644
index 00000000..1d0b3cc1
--- /dev/null
+++ b/web/components/comment-input.tsx
@@ -0,0 +1,175 @@
+import { PaperAirplaneIcon } from '@heroicons/react/solid'
+import { Editor } from '@tiptap/react'
+import clsx from 'clsx'
+import { User } from 'common/user'
+import { useEffect, useState } from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { useWindowSize } from 'web/hooks/use-window-size'
+import { MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
+import { Avatar } from './avatar'
+import { TextEditor, useTextEditor } from './editor'
+import { Row } from './layout/row'
+import { LoadingIndicator } from './loading-indicator'
+
+export function CommentInput(props: {
+  replyToUser?: { id: string; username: string }
+  // Reply to a free response answer
+  parentAnswerOutcome?: string
+  // Reply to another comment
+  parentCommentId?: string
+  onSubmitComment?: (editor: Editor, betId: string | undefined) => void
+  className?: string
+  presetId?: string
+}) {
+  const {
+    parentAnswerOutcome,
+    parentCommentId,
+    replyToUser,
+    onSubmitComment,
+    presetId,
+  } = props
+  const user = useUser()
+
+  const { editor, upload } = useTextEditor({
+    simple: true,
+    max: MAX_COMMENT_LENGTH,
+    placeholder:
+      !!parentCommentId || !!parentAnswerOutcome
+        ? 'Write a reply...'
+        : 'Write a comment...',
+  })
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  async function submitComment(betId: string | undefined) {
+    if (!editor || editor.isEmpty || isSubmitting) return
+    setIsSubmitting(true)
+    onSubmitComment?.(editor, betId)
+    setIsSubmitting(false)
+  }
+
+  if (user?.isBannedFromPosting) return <></>
+
+  return (
+    <Row className={clsx(props.className, 'mb-2 gap-1 sm:gap-2')}>
+      <Avatar
+        avatarUrl={user?.avatarUrl}
+        username={user?.username}
+        size="sm"
+        className="mt-2"
+      />
+      <div className="min-w-0 flex-1 pl-0.5 text-sm">
+        <CommentInputTextArea
+          editor={editor}
+          upload={upload}
+          replyToUser={replyToUser}
+          user={user}
+          submitComment={submitComment}
+          isSubmitting={isSubmitting}
+          presetId={presetId}
+        />
+      </div>
+    </Row>
+  )
+}
+
+export function CommentInputTextArea(props: {
+  user: User | undefined | null
+  replyToUser?: { id: string; username: string }
+  editor: Editor | null
+  upload: Parameters<typeof TextEditor>[0]['upload']
+  submitComment: (id?: string) => void
+  isSubmitting: boolean
+  submitOnEnter?: boolean
+  presetId?: string
+}) {
+  const {
+    user,
+    editor,
+    upload,
+    submitComment,
+    presetId,
+    isSubmitting,
+    submitOnEnter,
+    replyToUser,
+  } = props
+  const isMobile = (useWindowSize().width ?? 0) < 768 // TODO: base off input device (keybord vs touch)
+
+  useEffect(() => {
+    editor?.setEditable(!isSubmitting)
+  }, [isSubmitting, editor])
+
+  const submit = () => {
+    submitComment(presetId)
+    editor?.commands?.clearContent()
+  }
+
+  useEffect(() => {
+    if (!editor) {
+      return
+    }
+    // submit on Enter key
+    editor.setOptions({
+      editorProps: {
+        handleKeyDown: (view, event) => {
+          if (
+            submitOnEnter &&
+            event.key === 'Enter' &&
+            !event.shiftKey &&
+            (!isMobile || event.ctrlKey || event.metaKey) &&
+            // mention list is closed
+            !(view.state as any).mention$.active
+          ) {
+            submit()
+            event.preventDefault()
+            return true
+          }
+          return false
+        },
+      },
+    })
+    // insert at mention and focus
+    if (replyToUser) {
+      editor
+        .chain()
+        .setContent({
+          type: 'mention',
+          attrs: { label: replyToUser.username, id: replyToUser.id },
+        })
+        .insertContent(' ')
+        .focus()
+        .run()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor])
+
+  return (
+    <>
+      <TextEditor editor={editor} upload={upload}>
+        {user && !isSubmitting && (
+          <button
+            className="btn btn-ghost btn-sm px-2 disabled:bg-inherit disabled:text-gray-300"
+            disabled={!editor || editor.isEmpty}
+            onClick={submit}
+          >
+            <PaperAirplaneIcon className="m-0 h-[25px] min-w-[22px] rotate-90 p-0" />
+          </button>
+        )}
+
+        {isSubmitting && (
+          <LoadingIndicator spinnerClassName={'border-gray-500'} />
+        )}
+      </TextEditor>
+      <Row>
+        {!user && (
+          <button
+            className={'btn btn-outline btn-sm mt-2 normal-case'}
+            onClick={() => submitComment(presetId)}
+          >
+            Add my comment
+          </button>
+        )}
+      </Row>
+    </>
+  )
+}
diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index a7c22d80..668dbaf3 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -444,7 +444,7 @@ function ContractSearchControls(props: {
               selected={state.pillFilter === 'your-bets'}
               onSelect={selectPill('your-bets')}
             >
-              Your bets
+              Your trades
             </PillButton>
           )}
 
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 48528029..c383d349 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -294,7 +294,7 @@ export function ExtraMobileContractDetails(props: {
           <Tooltip
             text={`${formatMoney(
               volume
-            )} bet - ${uniqueBettors} unique bettors`}
+            )} bet - ${uniqueBettors} unique traders`}
           >
             {volumeTranslation}
           </Tooltip>
diff --git a/web/components/contract/contract-info-dialog.tsx b/web/components/contract/contract-info-dialog.tsx
index f376a04a..ae586725 100644
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@@ -135,7 +135,7 @@ export function ContractInfoDialog(props: {
               </tr> */}
 
               <tr>
-                <td>Bettors</td>
+                <td>Traders</td>
                 <td>{bettorsCount}</td>
               </tr>
 
diff --git a/web/components/contract/contract-leaderboard.tsx b/web/components/contract/contract-leaderboard.tsx
index ce5c7da6..1eaf7043 100644
--- a/web/components/contract/contract-leaderboard.tsx
+++ b/web/components/contract/contract-leaderboard.tsx
@@ -49,7 +49,7 @@ export function ContractLeaderboard(props: {
 
   return users && users.length > 0 ? (
     <Leaderboard
-      title="🏅 Top bettors"
+      title="🏅 Top traders"
       users={users || []}
       columns={[
         {
diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 417de12b..40fa9da0 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -116,13 +116,13 @@ export function ContractTabs(props: {
             badge: `${comments.length}`,
           },
           {
-            title: 'Bets',
+            title: 'Trades',
             content: betActivity,
             badge: `${visibleBets.length}`,
           },
           ...(!user || !userBets?.length
             ? []
-            : [{ title: 'Your bets', content: yourTrades }]),
+            : [{ title: 'Your trades', content: yourTrades }]),
         ]}
       />
       {!user ? (
diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx
index 0878e570..55b8a958 100644
--- a/web/components/feed/contract-activity.tsx
+++ b/web/components/feed/contract-activity.tsx
@@ -6,7 +6,7 @@ import { getOutcomeProbability } from 'common/calculate'
 import { FeedBet } from './feed-bets'
 import { FeedLiquidity } from './feed-liquidity'
 import { FeedAnswerCommentGroup } from './feed-answer-comment-group'
-import { FeedCommentThread, CommentInput } from './feed-comments'
+import { FeedCommentThread, ContractCommentInput } from './feed-comments'
 import { User } from 'common/user'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { LiquidityProvision } from 'common/liquidity-provision'
@@ -72,7 +72,7 @@ export function ContractCommentsActivity(props: {
 
   return (
     <>
-      <CommentInput
+      <ContractCommentInput
         className="mb-5"
         contract={contract}
         betsByCurrentUser={(user && betsByUserId[user.id]) ?? []}
diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx
index 7758ec82..0535ac33 100644
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@@ -9,7 +9,7 @@ import { Avatar } from 'web/components/avatar'
 import { Linkify } from 'web/components/linkify'
 import clsx from 'clsx'
 import {
-  CommentInput,
+  ContractCommentInput,
   FeedComment,
   getMostRecentCommentableBet,
 } from 'web/components/feed/feed-comments'
@@ -177,7 +177,7 @@ export function FeedAnswerCommentGroup(props: {
             className="absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
             aria-hidden="true"
           />
-          <CommentInput
+          <ContractCommentInput
             contract={contract}
             betsByCurrentUser={betsByCurrentUser}
             commentsByCurrentUser={commentsByCurrentUser}
diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index fa2cc6f5..a63a4b6e 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -13,22 +13,18 @@ import { Avatar } from 'web/components/avatar'
 import { OutcomeLabel } from 'web/components/outcome-label'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { firebaseLogin } from 'web/lib/firebase/users'
-import {
-  createCommentOnContract,
-  MAX_COMMENT_LENGTH,
-} from 'web/lib/firebase/comments'
+import { createCommentOnContract } from 'web/lib/firebase/comments'
 import { BetStatusText } from 'web/components/feed/feed-bets'
 import { Col } from 'web/components/layout/col'
 import { getProbability } from 'common/calculate'
-import { LoadingIndicator } from 'web/components/loading-indicator'
-import { PaperAirplaneIcon } from '@heroicons/react/outline'
 import { track } from 'web/lib/service/analytics'
 import { Tipper } from '../tipper'
 import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
-import { useWindowSize } from 'web/hooks/use-window-size'
-import { Content, TextEditor, useTextEditor } from '../editor'
+
+import { Content } from '../editor'
 import { Editor } from '@tiptap/react'
 import { UserLink } from 'web/components/user-link'
+import { CommentInput } from '../comment-input'
 
 export function FeedCommentThread(props: {
   user: User | null | undefined
@@ -90,14 +86,16 @@ export function FeedCommentThread(props: {
             className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
             aria-hidden="true"
           />
-          <CommentInput
+          <ContractCommentInput
             contract={contract}
             betsByCurrentUser={(user && betsByUserId[user.id]) ?? []}
             commentsByCurrentUser={(user && commentsByUserId[user.id]) ?? []}
             parentCommentId={parentComment.id}
             replyToUser={replyTo}
             parentAnswerOutcome={parentComment.answerOutcome}
-            onSubmitComment={() => setShowReply(false)}
+            onSubmitComment={() => {
+              setShowReply(false)
+            }}
           />
         </Col>
       )}
@@ -267,67 +265,76 @@ function CommentStatus(props: {
   )
 }
 
-//TODO: move commentinput and comment input text area into their own files
-export function CommentInput(props: {
+export function ContractCommentInput(props: {
   contract: Contract
   betsByCurrentUser: Bet[]
   commentsByCurrentUser: ContractComment[]
   className?: string
+  parentAnswerOutcome?: string | undefined
   replyToUser?: { id: string; username: string }
-  // Reply to a free response answer
-  parentAnswerOutcome?: string
-  // Reply to another comment
   parentCommentId?: string
   onSubmitComment?: () => void
 }) {
-  const {
-    contract,
-    betsByCurrentUser,
-    commentsByCurrentUser,
-    className,
-    parentAnswerOutcome,
-    parentCommentId,
-    replyToUser,
-    onSubmitComment,
-  } = props
   const user = useUser()
-  const { editor, upload } = useTextEditor({
-    simple: true,
-    max: MAX_COMMENT_LENGTH,
-    placeholder:
-      !!parentCommentId || !!parentAnswerOutcome
-        ? 'Write a reply...'
-        : 'Write a comment...',
-  })
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  const mostRecentCommentableBet = getMostRecentCommentableBet(
-    betsByCurrentUser,
-    commentsByCurrentUser,
-    user,
-    parentAnswerOutcome
-  )
-  const { id } = mostRecentCommentableBet || { id: undefined }
-
-  async function submitComment(betId: string | undefined) {
+  async function onSubmitComment(editor: Editor, betId: string | undefined) {
     if (!user) {
       track('sign in to comment')
       return await firebaseLogin()
     }
-    if (!editor || editor.isEmpty || isSubmitting) return
-    setIsSubmitting(true)
     await createCommentOnContract(
-      contract.id,
+      props.contract.id,
       editor.getJSON(),
       user,
       betId,
-      parentAnswerOutcome,
-      parentCommentId
+      props.parentAnswerOutcome,
+      props.parentCommentId
     )
-    onSubmitComment?.()
-    setIsSubmitting(false)
+    props.onSubmitComment?.()
   }
 
+  const mostRecentCommentableBet = getMostRecentCommentableBet(
+    props.betsByCurrentUser,
+    props.commentsByCurrentUser,
+    user,
+    props.parentAnswerOutcome
+  )
+
+  const { id } = mostRecentCommentableBet || { id: undefined }
+
+  return (
+    <Col>
+      <CommentBetArea
+        betsByCurrentUser={props.betsByCurrentUser}
+        contract={props.contract}
+        commentsByCurrentUser={props.commentsByCurrentUser}
+        parentAnswerOutcome={props.parentAnswerOutcome}
+        user={useUser()}
+        className={props.className}
+        mostRecentCommentableBet={mostRecentCommentableBet}
+      />
+      <CommentInput
+        replyToUser={props.replyToUser}
+        parentAnswerOutcome={props.parentAnswerOutcome}
+        parentCommentId={props.parentCommentId}
+        onSubmitComment={onSubmitComment}
+        className={props.className}
+        presetId={id}
+      />
+    </Col>
+  )
+}
+
+function CommentBetArea(props: {
+  betsByCurrentUser: Bet[]
+  contract: Contract
+  commentsByCurrentUser: ContractComment[]
+  parentAnswerOutcome?: string
+  user?: User | null
+  className?: string
+  mostRecentCommentableBet?: Bet
+}) {
+  const { betsByCurrentUser, contract, user, mostRecentCommentableBet } = props
+
   const { userPosition, outcome } = getBettorsLargestPositionBeforeTime(
     contract,
     Date.now(),
@@ -336,158 +343,36 @@ export function CommentInput(props: {
 
   const isNumeric = contract.outcomeType === 'NUMERIC'
 
-  if (user?.isBannedFromPosting) return <></>
-
   return (
-    <Row className={clsx(className, 'mb-2 gap-1 sm:gap-2')}>
-      <Avatar
-        avatarUrl={user?.avatarUrl}
-        username={user?.username}
-        size="sm"
-        className="mt-2"
-      />
-      <div className="min-w-0 flex-1 pl-0.5 text-sm">
-        <div className="mb-1 text-gray-500">
-          {mostRecentCommentableBet && (
-            <BetStatusText
+    <Row className={clsx(props.className, 'mb-2 gap-1 sm:gap-2')}>
+      <div className="mb-1 text-gray-500">
+        {mostRecentCommentableBet && (
+          <BetStatusText
+            contract={contract}
+            bet={mostRecentCommentableBet}
+            isSelf={true}
+            hideOutcome={isNumeric || contract.outcomeType === 'FREE_RESPONSE'}
+          />
+        )}
+        {!mostRecentCommentableBet && user && userPosition > 0 && !isNumeric && (
+          <>
+            {"You're"}
+            <CommentStatus
+              outcome={outcome}
               contract={contract}
-              bet={mostRecentCommentableBet}
-              isSelf={true}
-              hideOutcome={
-                isNumeric || contract.outcomeType === 'FREE_RESPONSE'
+              prob={
+                contract.outcomeType === 'BINARY'
+                  ? getProbability(contract)
+                  : undefined
               }
             />
-          )}
-          {!mostRecentCommentableBet && user && userPosition > 0 && !isNumeric && (
-            <>
-              {"You're"}
-              <CommentStatus
-                outcome={outcome}
-                contract={contract}
-                prob={
-                  contract.outcomeType === 'BINARY'
-                    ? getProbability(contract)
-                    : undefined
-                }
-              />
-            </>
-          )}
-        </div>
-        <CommentInputTextArea
-          editor={editor}
-          upload={upload}
-          replyToUser={replyToUser}
-          user={user}
-          submitComment={submitComment}
-          isSubmitting={isSubmitting}
-          presetId={id}
-        />
+          </>
+        )}
       </div>
     </Row>
   )
 }
 
-export function CommentInputTextArea(props: {
-  user: User | undefined | null
-  replyToUser?: { id: string; username: string }
-  editor: Editor | null
-  upload: Parameters<typeof TextEditor>[0]['upload']
-  submitComment: (id?: string) => void
-  isSubmitting: boolean
-  submitOnEnter?: boolean
-  presetId?: string
-}) {
-  const {
-    user,
-    editor,
-    upload,
-    submitComment,
-    presetId,
-    isSubmitting,
-    submitOnEnter,
-    replyToUser,
-  } = props
-  const isMobile = (useWindowSize().width ?? 0) < 768 // TODO: base off input device (keybord vs touch)
-
-  useEffect(() => {
-    editor?.setEditable(!isSubmitting)
-  }, [isSubmitting, editor])
-
-  const submit = () => {
-    submitComment(presetId)
-    editor?.commands?.clearContent()
-  }
-
-  useEffect(() => {
-    if (!editor) {
-      return
-    }
-    // submit on Enter key
-    editor.setOptions({
-      editorProps: {
-        handleKeyDown: (view, event) => {
-          if (
-            submitOnEnter &&
-            event.key === 'Enter' &&
-            !event.shiftKey &&
-            (!isMobile || event.ctrlKey || event.metaKey) &&
-            // mention list is closed
-            !(view.state as any).mention$.active
-          ) {
-            submit()
-            event.preventDefault()
-            return true
-          }
-          return false
-        },
-      },
-    })
-    // insert at mention and focus
-    if (replyToUser) {
-      editor
-        .chain()
-        .setContent({
-          type: 'mention',
-          attrs: { label: replyToUser.username, id: replyToUser.id },
-        })
-        .insertContent(' ')
-        .focus()
-        .run()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor])
-
-  return (
-    <>
-      <TextEditor editor={editor} upload={upload}>
-        {user && !isSubmitting && (
-          <button
-            className="btn btn-ghost btn-sm px-2 disabled:bg-inherit disabled:text-gray-300"
-            disabled={!editor || editor.isEmpty}
-            onClick={submit}
-          >
-            <PaperAirplaneIcon className="m-0 h-[25px] min-w-[22px] rotate-90 p-0" />
-          </button>
-        )}
-
-        {isSubmitting && (
-          <LoadingIndicator spinnerClassName={'border-gray-500'} />
-        )}
-      </TextEditor>
-      <Row>
-        {!user && (
-          <button
-            className={'btn btn-outline btn-sm mt-2 normal-case'}
-            onClick={() => submitComment(presetId)}
-          >
-            Add my comment
-          </button>
-        )}
-      </Row>
-    </>
-  )
-}
-
 function getBettorsLargestPositionBeforeTime(
   contract: Contract,
   createdTime: number,
diff --git a/web/components/landing-page-panel.tsx b/web/components/landing-page-panel.tsx
index 2e3d85e2..a5b46b08 100644
--- a/web/components/landing-page-panel.tsx
+++ b/web/components/landing-page-panel.tsx
@@ -27,23 +27,18 @@ export function LandingPagePanel(props: { hotContracts: Contract[] }) {
         <div className="m-4 max-w-[550px] self-center">
           <h1 className="text-3xl sm:text-6xl xl:text-6xl">
             <div className="font-semibold sm:mb-2">
-              Predict{' '}
+              A{' '}
               <span className="bg-gradient-to-r from-indigo-500 to-blue-500 bg-clip-text font-bold text-transparent">
-                anything!
-              </span>
+                market
+              </span>{' '}
+              for every question
             </div>
           </h1>
           <Spacer h={6} />
           <div className="mb-4 px-2 ">
-            Create a play-money prediction market on any topic you care about
-            and bet with your friends on what will happen!
+            Create a play-money prediction market on any topic you care about.
+            Trade with your friends to forecast the future.
             <br />
-            {/* <br />
-          Sign up and get {formatMoney(1000)} - worth $10 to your{' '}
-          <SiteLink className="font-semibold" href="/charity">
-            favorite charity.
-          </SiteLink>
-          <br /> */}
           </div>
         </div>
         <Spacer h={6} />
diff --git a/web/components/nav/nav-bar.tsx b/web/components/nav/nav-bar.tsx
index 5a81f566..242d6ff5 100644
--- a/web/components/nav/nav-bar.tsx
+++ b/web/components/nav/nav-bar.tsx
@@ -64,7 +64,7 @@ export function BottomNavBar() {
           item={{
             name: formatMoney(user.balance),
             trackingEventName: 'profile',
-            href: `/${user.username}?tab=bets`,
+            href: `/${user.username}?tab=trades`,
             icon: () => (
               <Avatar
                 className="mx-auto my-1"
diff --git a/web/components/nav/profile-menu.tsx b/web/components/nav/profile-menu.tsx
index aad17d84..e7cc056f 100644
--- a/web/components/nav/profile-menu.tsx
+++ b/web/components/nav/profile-menu.tsx
@@ -8,7 +8,7 @@ import { trackCallback } from 'web/lib/service/analytics'
 export function ProfileSummary(props: { user: User }) {
   const { user } = props
   return (
-    <Link href={`/${user.username}?tab=bets`}>
+    <Link href={`/${user.username}?tab=trades`}>
       <a
         onClick={trackCallback('sidebar: profile')}
         className="group mb-3 flex flex-row items-center gap-4 truncate rounded-md py-3 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
diff --git a/web/components/play-money-disclaimer.tsx b/web/components/play-money-disclaimer.tsx
index 6ee16c1e..860075d0 100644
--- a/web/components/play-money-disclaimer.tsx
+++ b/web/components/play-money-disclaimer.tsx
@@ -2,8 +2,8 @@ import { InfoBox } from './info-box'
 
 export const PlayMoneyDisclaimer = () => (
   <InfoBox
-    title="Play-money betting"
+    title="Play-money trading"
     className="mt-4 max-w-md"
-    text="Mana (M$) is the play-money used by our platform to keep track of your bets. It's completely free for you and your friends to get started!"
+    text="Mana (M$) is the play-money used by our platform to keep track of your trades. It's completely free for you and your friends to get started!"
   />
 )
diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx
index a7bce6bf..a0006c60 100644
--- a/web/components/portfolio/portfolio-value-section.tsx
+++ b/web/components/portfolio/portfolio-value-section.tsx
@@ -44,6 +44,7 @@ export const PortfolioValueSection = memo(
             }}
           >
             <option value="allTime">All time</option>
+            <option value="monthly">Last Month</option>
             <option value="weekly">Last 7d</option>
             <option value="daily">Last 24h</option>
           </select>
diff --git a/web/components/profile/loans-modal.tsx b/web/components/profile/loans-modal.tsx
index 46be649a..24b23e5b 100644
--- a/web/components/profile/loans-modal.tsx
+++ b/web/components/profile/loans-modal.tsx
@@ -11,7 +11,7 @@ export function LoansModal(props: {
     <Modal open={isOpen} setOpen={setOpen}>
       <Col className="items-center gap-4 rounded-md bg-white px-8 py-6">
         <span className={'text-8xl'}>🏦</span>
-        <span className="text-xl">Daily loans on your bets</span>
+        <span className="text-xl">Daily loans on your trades</span>
         <Col className={'gap-2'}>
           <span className={'text-indigo-700'}>• What are daily loans?</span>
           <span className={'ml-2'}>
diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx
index fe062d06..5a7b993e 100644
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@@ -83,14 +83,14 @@ export function ResolutionPanel(props: {
       <div>
         {outcome === 'YES' ? (
           <>
-            Winnings will be paid out to YES bettors.
+            Winnings will be paid out to traders who bought YES.
             {/* <br />
             <br />
             You will earn {earnedFees}. */}
           </>
         ) : outcome === 'NO' ? (
           <>
-            Winnings will be paid out to NO bettors.
+            Winnings will be paid out to traders who bought NO.
             {/* <br />
             <br />
             You will earn {earnedFees}. */}
diff --git a/web/components/sign-up-prompt.tsx b/web/components/sign-up-prompt.tsx
index 5ade4c1f..239fb4ad 100644
--- a/web/components/sign-up-prompt.tsx
+++ b/web/components/sign-up-prompt.tsx
@@ -19,7 +19,7 @@ export function BetSignUpPrompt(props: {
       size={size}
       color="gradient"
     >
-      {label ?? 'Sign up to bet!'}
+      {label ?? 'Sign up to trade!'}
     </Button>
   ) : null
 }
diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx
index b9ebdefc..7aef6189 100644
--- a/web/components/tipper.tsx
+++ b/web/components/tipper.tsx
@@ -46,6 +46,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
         comment.commentType === 'contract' ? comment.contractId : undefined
       const groupId =
         comment.commentType === 'group' ? comment.groupId : undefined
+      const postId = comment.commentType === 'post' ? comment.postId : undefined
       await transact({
         amount: change,
         fromId: user.id,
@@ -54,7 +55,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
         toType: 'USER',
         token: 'M$',
         category: 'TIP',
-        data: { commentId: comment.id, contractId, groupId },
+        data: { commentId: comment.id, contractId, groupId, postId },
         description: `${user.name} tipped M$ ${change} to ${comment.userName} for a comment`,
       })
 
@@ -62,6 +63,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
         commentId: comment.id,
         contractId,
         groupId,
+        postId,
         amount: change,
         fromId: user.id,
         toId: comment.userId,
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 2d4db1eb..81aed562 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -260,7 +260,7 @@ export function UserPage(props: { user: User }) {
               ),
             },
             {
-              title: 'Bets',
+              title: 'Trades',
               content: (
                 <>
                   <BetsList user={user} />
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index aaf1764e..719308bf 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -193,7 +193,7 @@ export function BuyButton(props: { className?: string; onClick?: () => void }) {
       )}
       onClick={onClick}
     >
-      Bet
+      Buy
     </button>
   )
 }
diff --git a/web/hooks/use-comments.ts b/web/hooks/use-comments.ts
index 172d2cee..b380d53f 100644
--- a/web/hooks/use-comments.ts
+++ b/web/hooks/use-comments.ts
@@ -1,8 +1,14 @@
 import { useEffect, useState } from 'react'
-import { Comment, ContractComment, GroupComment } from 'common/comment'
+import {
+  Comment,
+  ContractComment,
+  GroupComment,
+  PostComment,
+} from 'common/comment'
 import {
   listenForCommentsOnContract,
   listenForCommentsOnGroup,
+  listenForCommentsOnPost,
   listenForRecentComments,
 } from 'web/lib/firebase/comments'
 
@@ -25,6 +31,16 @@ export const useCommentsOnGroup = (groupId: string | undefined) => {
   return comments
 }
 
+export const useCommentsOnPost = (postId: string | undefined) => {
+  const [comments, setComments] = useState<PostComment[] | undefined>()
+
+  useEffect(() => {
+    if (postId) return listenForCommentsOnPost(postId, setComments)
+  }, [postId])
+
+  return comments
+}
+
 export const useRecentComments = () => {
   const [recentComments, setRecentComments] = useState<Comment[] | undefined>()
   useEffect(() => listenForRecentComments(setRecentComments), [])
diff --git a/web/hooks/use-tip-txns.ts b/web/hooks/use-tip-txns.ts
index 8d26176f..8726fd6e 100644
--- a/web/hooks/use-tip-txns.ts
+++ b/web/hooks/use-tip-txns.ts
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react'
 import {
   listenForTipTxns,
   listenForTipTxnsOnGroup,
+  listenForTipTxnsOnPost,
 } from 'web/lib/firebase/txns'
 
 export type CommentTips = { [userId: string]: number }
@@ -12,14 +13,16 @@ export type CommentTipMap = { [commentId: string]: CommentTips }
 export function useTipTxns(on: {
   contractId?: string
   groupId?: string
+  postId?: string
 }): CommentTipMap {
   const [txns, setTxns] = useState<TipTxn[]>([])
-  const { contractId, groupId } = on
+  const { contractId, groupId, postId } = on
 
   useEffect(() => {
     if (contractId) return listenForTipTxns(contractId, setTxns)
     if (groupId) return listenForTipTxnsOnGroup(groupId, setTxns)
-  }, [contractId, groupId, setTxns])
+    if (postId) return listenForTipTxnsOnPost(postId, setTxns)
+  }, [contractId, groupId, postId, setTxns])
 
   return useMemo(() => {
     const byComment = groupBy(txns, 'data.commentId')
diff --git a/web/lib/firebase/comments.ts b/web/lib/firebase/comments.ts
index aab4de85..e00d7397 100644
--- a/web/lib/firebase/comments.ts
+++ b/web/lib/firebase/comments.ts
@@ -7,12 +7,22 @@ import {
   query,
   setDoc,
   where,
+  DocumentData,
+  DocumentReference,
 } from 'firebase/firestore'
 
 import { getValues, listenForValues } from './utils'
 import { db } from './init'
 import { User } from 'common/user'
-import { Comment, ContractComment, GroupComment } from 'common/comment'
+import {
+  Comment,
+  ContractComment,
+  GroupComment,
+  OnContract,
+  OnGroup,
+  OnPost,
+  PostComment,
+} from 'common/comment'
 import { removeUndefinedProps } from 'common/util/object'
 import { track } from '@amplitude/analytics-browser'
 import { JSONContent } from '@tiptap/react'
@@ -24,7 +34,7 @@ export const MAX_COMMENT_LENGTH = 10000
 export async function createCommentOnContract(
   contractId: string,
   content: JSONContent,
-  commenter: User,
+  user: User,
   betId?: string,
   answerOutcome?: string,
   replyToCommentId?: string
@@ -32,28 +42,20 @@ export async function createCommentOnContract(
   const ref = betId
     ? doc(getCommentsCollection(contractId), betId)
     : doc(getCommentsCollection(contractId))
-  // contract slug and question are set via trigger
-  const comment = removeUndefinedProps({
-    id: ref.id,
+  const onContract = {
     commentType: 'contract',
     contractId,
-    userId: commenter.id,
-    content: content,
-    createdTime: Date.now(),
-    userName: commenter.name,
-    userUsername: commenter.username,
-    userAvatarUrl: commenter.avatarUrl,
-    betId: betId,
-    answerOutcome: answerOutcome,
-    replyToCommentId: replyToCommentId,
-  })
-  track('comment', {
+    betId,
+    answerOutcome,
+  } as OnContract
+  return await createComment(
     contractId,
-    commentId: ref.id,
-    betId: betId,
-    replyToCommentId: replyToCommentId,
-  })
-  return await setDoc(ref, comment)
+    onContract,
+    content,
+    user,
+    ref,
+    replyToCommentId
+  )
 }
 export async function createCommentOnGroup(
   groupId: string,
@@ -62,10 +64,45 @@ export async function createCommentOnGroup(
   replyToCommentId?: string
 ) {
   const ref = doc(getCommentsOnGroupCollection(groupId))
+  const onGroup = { commentType: 'group', groupId: groupId } as OnGroup
+  return await createComment(
+    groupId,
+    onGroup,
+    content,
+    user,
+    ref,
+    replyToCommentId
+  )
+}
+
+export async function createCommentOnPost(
+  postId: string,
+  content: JSONContent,
+  user: User,
+  replyToCommentId?: string
+) {
+  const ref = doc(getCommentsOnPostCollection(postId))
+  const onPost = { postId: postId, commentType: 'post' } as OnPost
+  return await createComment(
+    postId,
+    onPost,
+    content,
+    user,
+    ref,
+    replyToCommentId
+  )
+}
+
+async function createComment(
+  surfaceId: string,
+  extraFields: OnContract | OnGroup | OnPost,
+  content: JSONContent,
+  user: User,
+  ref: DocumentReference<DocumentData>,
+  replyToCommentId?: string
+) {
   const comment = removeUndefinedProps({
     id: ref.id,
-    commentType: 'group',
-    groupId,
     userId: user.id,
     content: content,
     createdTime: Date.now(),
@@ -73,11 +110,13 @@ export async function createCommentOnGroup(
     userUsername: user.username,
     userAvatarUrl: user.avatarUrl,
     replyToCommentId: replyToCommentId,
+    ...extraFields,
   })
-  track('group message', {
+
+  track(`${extraFields.commentType} message`, {
     user,
     commentId: ref.id,
-    groupId,
+    surfaceId,
     replyToCommentId: replyToCommentId,
   })
   return await setDoc(ref, comment)
@@ -91,6 +130,10 @@ function getCommentsOnGroupCollection(groupId: string) {
   return collection(db, 'groups', groupId, 'comments')
 }
 
+function getCommentsOnPostCollection(postId: string) {
+  return collection(db, 'posts', postId, 'comments')
+}
+
 export async function listAllComments(contractId: string) {
   return await getValues<Comment>(
     query(getCommentsCollection(contractId), orderBy('createdTime', 'desc'))
@@ -103,6 +146,12 @@ export async function listAllCommentsOnGroup(groupId: string) {
   )
 }
 
+export async function listAllCommentsOnPost(postId: string) {
+  return await getValues<PostComment>(
+    query(getCommentsOnPostCollection(postId), orderBy('createdTime', 'desc'))
+  )
+}
+
 export function listenForCommentsOnContract(
   contractId: string,
   setComments: (comments: ContractComment[]) => void
@@ -126,6 +175,16 @@ export function listenForCommentsOnGroup(
   )
 }
 
+export function listenForCommentsOnPost(
+  postId: string,
+  setComments: (comments: PostComment[]) => void
+) {
+  return listenForValues<PostComment>(
+    query(getCommentsOnPostCollection(postId), orderBy('createdTime', 'desc')),
+    setComments
+  )
+}
+
 const DAY_IN_MS = 24 * 60 * 60 * 1000
 
 // Define "recent" as "<3 days ago" for now
diff --git a/web/lib/firebase/groups.ts b/web/lib/firebase/groups.ts
index 08a4dba8..7a372d9a 100644
--- a/web/lib/firebase/groups.ts
+++ b/web/lib/firebase/groups.ts
@@ -86,9 +86,10 @@ export async function listGroupContracts(groupId: string) {
     contractId: string
     createdTime: number
   }>(groupContracts(groupId))
-  return Promise.all(
+  const contracts = await Promise.all(
     contractDocs.map((doc) => getContractFromId(doc.contractId))
   )
+  return filterDefined(contracts)
 }
 
 export function listenForOpenGroups(setGroups: (groups: Group[]) => void) {
diff --git a/web/lib/firebase/txns.ts b/web/lib/firebase/txns.ts
index 88ab1352..141217e4 100644
--- a/web/lib/firebase/txns.ts
+++ b/web/lib/firebase/txns.ts
@@ -41,6 +41,13 @@ const getTipsOnGroupQuery = (groupId: string) =>
     where('data.groupId', '==', groupId)
   )
 
+const getTipsOnPostQuery = (postId: string) =>
+  query(
+    txns,
+    where('category', '==', 'TIP'),
+    where('data.postId', '==', postId)
+  )
+
 export function listenForTipTxns(
   contractId: string,
   setTxns: (txns: TipTxn[]) => void
@@ -54,6 +61,13 @@ export function listenForTipTxnsOnGroup(
   return listenForValues<TipTxn>(getTipsOnGroupQuery(groupId), setTxns)
 }
 
+export function listenForTipTxnsOnPost(
+  postId: string,
+  setTxns: (txns: TipTxn[]) => void
+) {
+  return listenForValues<TipTxn>(getTipsOnPostQuery(postId), setTxns)
+}
+
 // Find all manalink Txns that are from or to this user
 export function useManalinkTxns(userId: string) {
   const [fromTxns, setFromTxns] = useState<ManalinkTxn[]>([])
diff --git a/web/pages/api/v0/group/by-id/[id]/markets.ts b/web/pages/api/v0/group/by-id/[id]/markets.ts
index f7538277..e9610a20 100644
--- a/web/pages/api/v0/group/by-id/[id]/markets.ts
+++ b/web/pages/api/v0/group/by-id/[id]/markets.ts
@@ -1,6 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { applyCorsHeaders, CORS_UNRESTRICTED } from 'web/lib/api/cors'
 import { listGroupContracts } from 'web/lib/firebase/groups'
+import { toLiteMarket } from 'web/pages/api/v0/_types'
 
 export default async function handler(
   req: NextApiRequest,
@@ -8,7 +9,9 @@ export default async function handler(
 ) {
   await applyCorsHeaders(req, res, CORS_UNRESTRICTED)
   const { id } = req.query
-  const contracts = await listGroupContracts(id as string)
+  const contracts = (await listGroupContracts(id as string)).map((contract) =>
+    toLiteMarket(contract)
+  )
   if (!contracts) {
     res.status(404).json({ error: 'Group not found' })
     return
diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx
index a9797a05..12d07443 100644
--- a/web/pages/experimental/home/index.tsx
+++ b/web/pages/experimental/home/index.tsx
@@ -52,7 +52,7 @@ const Home = () => {
           <EditButton />
         </Row>
 
-        <DailyProfitAndBalance className="self-end" userId={user?.id} />
+        <DailyProfitAndBalance userId={user?.id} />
 
         <div className="text-xl text-gray-800">Daily movers</div>
         <ProbChangeTable userId={user?.id} />
@@ -63,7 +63,7 @@ const Home = () => {
             return (
               <SearchSection
                 key={id}
-                label={'Your bets'}
+                label={'Your trades'}
                 sort={'prob-change-day'}
                 user={user}
                 yourBets
diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx
index 4df21faf..768e2f82 100644
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@@ -227,6 +227,7 @@ export default function GroupPage(props: {
       defaultSort={'newest'}
       defaultFilter={suggestedFilter}
       additionalFilter={{ groupSlug: group.slug }}
+      persistPrefix={`group-${group.slug}`}
     />
   )
 
diff --git a/web/pages/leaderboards.tsx b/web/pages/leaderboards.tsx
index 45c484c4..08819833 100644
--- a/web/pages/leaderboards.tsx
+++ b/web/pages/leaderboards.tsx
@@ -135,21 +135,20 @@ export default function Leaderboards(_props: {
         defaultIndex={1}
         tabs={[
           {
-            title: 'All Time',
-            content: LeaderboardWithPeriod('allTime'),
+            title: 'Daily',
+            content: LeaderboardWithPeriod('daily'),
           },
-          // TODO: Enable this near the end of July!
-          // {
-          //   title: 'Monthly',
-          //   content: LeaderboardWithPeriod('monthly'),
-          // },
           {
             title: 'Weekly',
             content: LeaderboardWithPeriod('weekly'),
           },
           {
-            title: 'Daily',
-            content: LeaderboardWithPeriod('daily'),
+            title: 'Monthly',
+            content: LeaderboardWithPeriod('monthly'),
+          },
+          {
+            title: 'All Time',
+            content: LeaderboardWithPeriod('allTime'),
           },
         ]}
       />
diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx
index ccfbf371..d10812bf 100644
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@@ -390,7 +390,7 @@ function IncomeNotificationItem(props: {
       reasonText = !simple
         ? `Bonus for ${
             parseInt(sourceText) / UNIQUE_BETTOR_BONUS_AMOUNT
-          } new bettors on`
+          } new traders on`
         : 'bonus on'
     } else if (sourceType === 'tip') {
       reasonText = !simple ? `tipped you on` : `in tips on`
@@ -508,7 +508,7 @@ function IncomeNotificationItem(props: {
           {(isTip || isUniqueBettorBonus) && (
             <MultiUserTransactionLink
               userInfos={userLinks}
-              modalLabel={isTip ? 'Who tipped you' : 'Unique bettors'}
+              modalLabel={isTip ? 'Who tipped you' : 'Unique traders'}
             />
           )}
           <Row className={'line-clamp-2 flex max-w-xl'}>
diff --git a/web/pages/post/[...slugs]/index.tsx b/web/pages/post/[...slugs]/index.tsx
index 737e025f..11c37f22 100644
--- a/web/pages/post/[...slugs]/index.tsx
+++ b/web/pages/post/[...slugs]/index.tsx
@@ -16,17 +16,25 @@ import { Col } from 'web/components/layout/col'
 import { ENV_CONFIG } from 'common/envs/constants'
 import Custom404 from 'web/pages/404'
 import { UserLink } from 'web/components/user-link'
+import { listAllCommentsOnPost } from 'web/lib/firebase/comments'
+import { PostComment } from 'common/comment'
+import { CommentTipMap, useTipTxns } from 'web/hooks/use-tip-txns'
+import { groupBy, sortBy } from 'lodash'
+import { PostCommentInput, PostCommentThread } from 'web/posts/post-comments'
+import { useCommentsOnPost } from 'web/hooks/use-comments'
 
 export async function getStaticProps(props: { params: { slugs: string[] } }) {
   const { slugs } = props.params
 
   const post = await getPostBySlug(slugs[0])
   const creator = post ? await getUser(post.creatorId) : null
+  const comments = post && (await listAllCommentsOnPost(post.id))
 
   return {
     props: {
       post: post,
       creator: creator,
+      comments: comments,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -37,28 +45,36 @@ export async function getStaticPaths() {
   return { paths: [], fallback: 'blocking' }
 }
 
-export default function PostPage(props: { post: Post; creator: User }) {
+export default function PostPage(props: {
+  post: Post
+  creator: User
+  comments: PostComment[]
+}) {
   const [isShareOpen, setShareOpen] = useState(false)
+  const { post, creator } = props
 
-  if (props.post == null) {
+  const tips = useTipTxns({ postId: post.id })
+  const shareUrl = `https://${ENV_CONFIG.domain}${postPath(post.slug)}`
+  const updatedComments = useCommentsOnPost(post.id)
+  const comments = updatedComments ?? props.comments
+
+  if (post == null) {
     return <Custom404 />
   }
 
-  const shareUrl = `https://${ENV_CONFIG.domain}${postPath(props?.post.slug)}`
-
   return (
     <Page>
       <div className="mx-auto w-full max-w-3xl ">
         <Spacer h={1} />
-        <Title className="!mt-0" text={props.post.title} />
+        <Title className="!mt-0" text={post.title} />
         <Row>
           <Col className="flex-1">
             <div className={'inline-flex'}>
               <div className="mr-1 text-gray-500">Created by</div>
               <UserLink
                 className="text-neutral"
-                name={props.creator.name}
-                username={props.creator.username}
+                name={creator.name}
+                username={creator.username}
               />
             </div>
           </Col>
@@ -88,10 +104,55 @@ export default function PostPage(props: { post: Post; creator: User }) {
         <Spacer h={2} />
         <div className="rounded-lg bg-white px-6 py-4 sm:py-0">
           <div className="form-control w-full py-2">
-            <Content content={props.post.content} />
+            <Content content={post.content} />
           </div>
         </div>
+
+        <Spacer h={2} />
+        <div className="rounded-lg bg-white px-6 py-4 sm:py-0">
+          <PostCommentsActivity
+            post={post}
+            comments={comments}
+            tips={tips}
+            user={creator}
+          />
+        </div>
       </div>
     </Page>
   )
 }
+
+export function PostCommentsActivity(props: {
+  post: Post
+  comments: PostComment[]
+  tips: CommentTipMap
+  user: User | null | undefined
+}) {
+  const { post, comments, user, tips } = props
+  const commentsByUserId = groupBy(comments, (c) => c.userId)
+  const commentsByParentId = groupBy(comments, (c) => c.replyToCommentId ?? '_')
+  const topLevelComments = sortBy(
+    commentsByParentId['_'] ?? [],
+    (c) => -c.createdTime
+  )
+
+  return (
+    <>
+      <PostCommentInput post={post} />
+      {topLevelComments.map((parent) => (
+        <PostCommentThread
+          key={parent.id}
+          user={user}
+          post={post}
+          parentComment={parent}
+          threadComments={sortBy(
+            commentsByParentId[parent.id] ?? [],
+            (c) => c.createdTime
+          )}
+          tips={tips}
+          commentsByUserId={commentsByUserId}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/web/posts/post-comments.tsx b/web/posts/post-comments.tsx
new file mode 100644
index 00000000..d129f807
--- /dev/null
+++ b/web/posts/post-comments.tsx
@@ -0,0 +1,172 @@
+import { track } from '@amplitude/analytics-browser'
+import { Editor } from '@tiptap/core'
+import clsx from 'clsx'
+import { PostComment } from 'common/comment'
+import { Post } from 'common/post'
+import { User } from 'common/user'
+import { Dictionary } from 'lodash'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Avatar } from 'web/components/avatar'
+import { CommentInput } from 'web/components/comment-input'
+import { Content } from 'web/components/editor'
+import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
+import { Col } from 'web/components/layout/col'
+import { Row } from 'web/components/layout/row'
+import { Tipper } from 'web/components/tipper'
+import { UserLink } from 'web/components/user-link'
+import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
+import { useUser } from 'web/hooks/use-user'
+import { createCommentOnPost } from 'web/lib/firebase/comments'
+import { firebaseLogin } from 'web/lib/firebase/users'
+
+export function PostCommentThread(props: {
+  user: User | null | undefined
+  post: Post
+  threadComments: PostComment[]
+  tips: CommentTipMap
+  parentComment: PostComment
+  commentsByUserId: Dictionary<PostComment[]>
+}) {
+  const { post, threadComments, tips, parentComment } = props
+  const [showReply, setShowReply] = useState(false)
+  const [replyTo, setReplyTo] = useState<{ id: string; username: string }>()
+
+  function scrollAndOpenReplyInput(comment: PostComment) {
+    setReplyTo({ id: comment.userId, username: comment.userUsername })
+    setShowReply(true)
+  }
+
+  return (
+    <Col className="relative w-full items-stretch gap-3 pb-4">
+      <span
+        className="absolute top-5 left-4 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
+        aria-hidden="true"
+      />
+      {[parentComment].concat(threadComments).map((comment, commentIdx) => (
+        <PostComment
+          key={comment.id}
+          indent={commentIdx != 0}
+          post={post}
+          comment={comment}
+          tips={tips[comment.id]}
+          onReplyClick={scrollAndOpenReplyInput}
+        />
+      ))}
+      {showReply && (
+        <Col className="-pb-2 relative ml-6">
+          <span
+            className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+            aria-hidden="true"
+          />
+          <PostCommentInput
+            post={post}
+            parentCommentId={parentComment.id}
+            replyToUser={replyTo}
+            onSubmitComment={() => setShowReply(false)}
+          />
+        </Col>
+      )}
+    </Col>
+  )
+}
+
+export function PostCommentInput(props: {
+  post: Post
+  parentCommentId?: string
+  replyToUser?: { id: string; username: string }
+  onSubmitComment?: () => void
+}) {
+  const user = useUser()
+
+  const { post, parentCommentId, replyToUser } = props
+
+  async function onSubmitComment(editor: Editor) {
+    if (!user) {
+      track('sign in to comment')
+      return await firebaseLogin()
+    }
+    await createCommentOnPost(post.id, editor.getJSON(), user, parentCommentId)
+    props.onSubmitComment?.()
+  }
+
+  return (
+    <CommentInput
+      replyToUser={replyToUser}
+      parentCommentId={parentCommentId}
+      onSubmitComment={onSubmitComment}
+    />
+  )
+}
+
+export function PostComment(props: {
+  post: Post
+  comment: PostComment
+  tips: CommentTips
+  indent?: boolean
+  probAtCreatedTime?: number
+  onReplyClick?: (comment: PostComment) => void
+}) {
+  const { post, comment, tips, indent, onReplyClick } = props
+  const { text, content, userUsername, userName, userAvatarUrl, createdTime } =
+    comment
+
+  const [highlighted, setHighlighted] = useState(false)
+  const router = useRouter()
+  useEffect(() => {
+    if (router.asPath.endsWith(`#${comment.id}`)) {
+      setHighlighted(true)
+    }
+  }, [comment.id, router.asPath])
+
+  return (
+    <Row
+      id={comment.id}
+      className={clsx(
+        'relative',
+        indent ? 'ml-6' : '',
+        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
+      )}
+    >
+      {/*draw a gray line from the comment to the left:*/}
+      {indent ? (
+        <span
+          className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+          aria-hidden="true"
+        />
+      ) : null}
+      <Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
+      <div className="ml-1.5 min-w-0 flex-1 pl-0.5 sm:ml-3">
+        <div className="mt-0.5 text-sm text-gray-500">
+          <UserLink
+            className="text-gray-500"
+            username={userUsername}
+            name={userName}
+          />{' '}
+          <CopyLinkDateTimeComponent
+            prefix={comment.userName}
+            slug={post.slug}
+            createdTime={createdTime}
+            elementId={comment.id}
+          />
+        </div>
+        <Content
+          className="mt-2 text-[15px] text-gray-700"
+          content={content || text}
+          smallImage
+        />
+        <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
+          <Tipper comment={comment} tips={tips ?? {}} />
+          {onReplyClick && (
+            <button
+              className="font-bold hover:underline"
+              onClick={() => onReplyClick(comment)}
+            >
+              Reply
+            </button>
+          )}
+        </Row>
+      </div>
+    </Row>
+  )
+}