From e4c95083400a852c055468c10e271cab81d72c27 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 16 Mar 2022 21:42:24 -0700
Subject: [PATCH] Show "Buy" and % directly in FR feed

---
 web/components/answers/answer-bet-panel.tsx | 18 +++++--
 web/components/feed/feed-items.tsx          | 60 ++++++++++++++++++---
 web/components/yes-no-selector.tsx          | 14 +++--
 3 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index e426c370..fa508937 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -31,8 +31,9 @@ export function AnswerBetPanel(props: {
   contract: FullContract<DPM, FreeResponse>
   closePanel: () => void
   className?: string
+  isModal?: boolean
 }) {
-  const { answer, contract, closePanel, className } = props
+  const { answer, contract, closePanel, className, isModal } = props
   const { id: answerId } = answer
 
   const user = useUser()
@@ -99,11 +100,18 @@ export function AnswerBetPanel(props: {
   return (
     <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">Buy this answer</div>
+        <div className="text-xl">
+          Buy {isModal ? `"${answer.text}"` : 'this answer'}
+        </div>
 
-        <button className="btn-ghost btn-circle" onClick={closePanel}>
-          <XIcon className="mx-auto h-8 w-8 text-gray-500" aria-hidden="true" />
-        </button>
+        {!isModal && (
+          <button className="btn-ghost btn-circle" onClick={closePanel}>
+            <XIcon
+              className="mx-auto h-8 w-8 text-gray-500"
+              aria-hidden="true"
+            />
+          </button>
+        )}
       </Row>
       <div className="my-3 text-left text-sm text-gray-500">Amount </div>
       <AmountInput
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index 7d84fe49..10c6f310 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -26,7 +26,7 @@ import { useUser } from '../../hooks/use-user'
 import { Linkify } from '../linkify'
 import { Row } from '../layout/row'
 import { createComment, MAX_COMMENT_LENGTH } from '../../lib/firebase/comments'
-import { formatMoney } from '../../../common/util/format'
+import { formatMoney, formatPercent } from '../../../common/util/format'
 import { Comment } from '../../../common/comment'
 import { ResolutionOrChance } from '../contract-card'
 import { SiteLink } from '../site-link'
@@ -36,13 +36,18 @@ import { DateTimeTooltip } from '../datetime-tooltip'
 import { Bet } from '../../lib/firebase/bets'
 import { JoinSpans } from '../join-spans'
 import { fromNow } from '../../lib/util/time'
-import BetRow from '../bet-row'
+import BetRow, { Modal } from '../bet-row'
 import { parseTags } from '../../../common/util/parse'
 import { Avatar } from '../avatar'
 import { useAdmin } from '../../hooks/use-admin'
 import { Answer } from '../../../common/answer'
 import { ActivityItem } from './activity-items'
 import { FreeResponse, FullContract } from '../../../common/contract'
+import { BuyButton } from '../yes-no-selector'
+import { AnswerItem } from '../answers/answer-item'
+import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
+import { BetPanel } from '../bet-panel'
+import { AnswerBetPanel } from '../answers/answer-bet-panel'
 
 export function FeedItems(props: {
   contract: Contract
@@ -659,11 +664,25 @@ function FeedAnswerGroup(props: {
   answer: Answer
   items: ActivityItem[]
 }) {
-  const { answer, items } = props
+  const { answer, items, contract } = props
   const { username, avatarUrl, name, text } = answer
 
+  const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
+  const probPercent = formatPercent(prob)
+  const [open, setOpen] = useState(false)
+
   return (
     <Col className="flex-1 gap-2">
+      <Modal open={open} setOpen={setOpen}>
+        <AnswerBetPanel
+          answer={answer}
+          contract={contract}
+          closePanel={() => setOpen(false)}
+          className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
+          isModal={true}
+        />
+      </Modal>
+
       <Row className="my-4 gap-3">
         <div className="px-1">
           <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
@@ -674,9 +693,29 @@ function FeedAnswerGroup(props: {
           <div className="text-sm text-gray-500">
             <UserLink username={username} name={name} /> answered
           </div>
-          <span className="text-lg">
-            <Linkify text={text} />
-          </span>
+
+          <Row className="align-items justify-between gap-4">
+            <span className="text-lg">
+              <Linkify text={text} />
+            </span>
+
+            <Row className="align-items justify-end gap-4">
+              <span
+                className={clsx(
+                  'text-2xl',
+                  tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
+                )}
+              >
+                {probPercent}
+              </span>
+              <BuyButton
+                className="btn-sm hidden flex-initial !px-6 sm:flex"
+                onClick={() => {
+                  setOpen(true)
+                }}
+              />
+            </Row>
+          </Row>
         </Col>
       </Row>
 
@@ -699,6 +738,15 @@ function FeedAnswerGroup(props: {
           </div>
         </div>
       ))}
+
+      <div className="ml-10 mt-4">
+        <BuyButton
+          className="btn-sm !px-6 sm:hidden"
+          onClick={() => {
+            setOpen(true)
+          }}
+        />
+      </div>
     </Col>
   )
 }
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index cb7ecee4..3c4fbfef 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -158,10 +158,18 @@ export function FundsSelector(props: {
 
 export function BuyButton(props: { className?: string; onClick?: () => void }) {
   const { className, onClick } = props
+  // Note: styles coppied from YesNoSelector
   return (
-    <Button className={className} onClick={onClick} color="green">
-      BUY
-    </Button>
+    <button
+      className={clsx(
+        'hover:bg-primary-focus border-primary hover:border-primary-focus inline-flex flex-1  items-center justify-center rounded-lg border-2 p-2 hover:text-white',
+        'text-primary bg-transparent text-lg',
+        className
+      )}
+      onClick={onClick}
+    >
+      Buy
+    </button>
   )
 }