manifold/web/components/bet-summary.tsx

import { sumBy } from 'lodash'
import clsx from 'clsx'

import { Bet } from 'web/lib/firebase/bets'
import { formatMoney, formatWithCommas } from 'common/util/format'
import { Col } from './layout/col'
import { Contract } from 'web/lib/firebase/contracts'
import { Row } from './layout/row'
import { YesLabel, NoLabel } from './outcome-label'
import {
  calculatePayout,
  getContractBetMetrics,
  getProbability,
} from 'common/calculate'
import { InfoTooltip } from './info-tooltip'
import { ProfitBadge } from './profit-badge'

export function BetsSummary(props: {
  contract: Contract
  userBets: Bet[]
  className?: string
}) {
  const { contract, className } = props
  const { resolution, outcomeType } = contract
  const isBinary = outcomeType === 'BINARY'

  const bets = props.userBets.filter((b) => !b.isAnte)
  const { profitPercent, payout, profit, invested } = getContractBetMetrics(
    contract,
    bets
  )

  const excludeSales = bets.filter((b) => !b.isSold && !b.sale)
  const yesWinnings = sumBy(excludeSales, (bet) =>
    calculatePayout(contract, bet, 'YES')
  )
  const noWinnings = sumBy(excludeSales, (bet) =>
    calculatePayout(contract, bet, 'NO')
  )

  const position = yesWinnings - noWinnings

  const prob = isBinary ? getProbability(contract) : 0
  const expectation = prob * yesWinnings + (1 - prob) * noWinnings

  if (bets.length === 0) return <></>

  return (
    <Col className={clsx(className, 'gap-4')}>
      <Row className="flex-wrap gap-4 sm:flex-nowrap sm:gap-6">
        {resolution ? (
          <Col>
            <div className="text-sm text-gray-500">Payout</div>
            <div className="whitespace-nowrap">
              {formatMoney(payout)}{' '}
              <ProfitBadge profitPercent={profitPercent} />
            </div>
          </Col>
        ) : isBinary ? (
          <Col>
            <div className="whitespace-nowrap text-sm text-gray-500">
              Position{' '}
              <InfoTooltip text="Number of shares you own on net. 1 YES share = M$1 if the market resolves YES." />
            </div>
            <div className="whitespace-nowrap">
              {position > 1e-7 ? (
                <>
                  <YesLabel /> {formatWithCommas(position)}
                </>
              ) : position < -1e-7 ? (
                <>
                  <NoLabel /> {formatWithCommas(-position)}
                </>
              ) : (
                '——'
              )}
            </div>
          </Col>
        ) : (
          <Col>
            <div className="whitespace-nowrap text-sm text-gray-500">
              Expectation{''}
              <InfoTooltip text="The estimated payout of your position using the current market probability." />
            </div>
            <div className="whitespace-nowrap">{formatMoney(payout)}</div>
          </Col>
        )}

        <Col className="hidden sm:inline">
          <div className="whitespace-nowrap text-sm text-gray-500">
            Invested{' '}
            <InfoTooltip text="Cash currently invested in this market." />
          </div>
          <div className="whitespace-nowrap">{formatMoney(invested)}</div>
        </Col>

        {isBinary && !resolution && (
          <Col>
            <div className="whitespace-nowrap text-sm text-gray-500">
              Expectation{' '}
              <InfoTooltip text="The estimated payout of your position using the current market probability." />
            </div>
            <div className="whitespace-nowrap">{formatMoney(expectation)}</div>
          </Col>
        )}

        <Col>
          <div className="whitespace-nowrap text-sm text-gray-500">
            Profit{' '}
            <InfoTooltip text="Includes both realized & unrealized gains/losses." />
          </div>
          <div className="whitespace-nowrap">
            {formatMoney(profit)}
            <ProfitBadge profitPercent={profitPercent} />
          </div>
        </Col>
      </Row>
    </Col>
  )
}