+
{formatLargeNumber(getExpectedValue(contract))}
-
expected
+ {!hideText && (
+
expected
+ )}
)}
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 6a8f5c9f..ed07e409 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -5,7 +5,9 @@ import {
PencilIcon,
CurrencyDollarIcon,
TrendingUpIcon,
+ StarIcon,
} from '@heroicons/react/outline'
+import { StarIcon as SolidStarIcon } from '@heroicons/react/solid'
import { Row } from '../layout/row'
import { formatMoney } from 'common/util/format'
import { UserLink } from '../user-page'
@@ -26,20 +28,13 @@ import NewContractBadge from '../new-contract-badge'
import { CATEGORY_LIST } from 'common/categories'
import { TagsList } from '../tags-list'
-export function AbbrContractDetails(props: {
+export function MiscDetails(props: {
contract: Contract
showHotVolume?: boolean
showCloseTime?: boolean
}) {
const { contract, showHotVolume, showCloseTime } = props
- const {
- volume,
- volume24Hours,
- creatorName,
- creatorUsername,
- closeTime,
- tags,
- } = contract
+ const { volume, volume24Hours, closeTime, tags } = contract
const { volumeLabel } = contractMetrics(contract)
// Show at most one category that this contract is tagged by
const categories = CATEGORY_LIST.filter((category) =>
@@ -47,41 +42,62 @@ export function AbbrContractDetails(props: {
).slice(0, 1)
return (
-
-
-
-
-
-
+
+ {categories.length > 0 && (
+
+ )}
-
- {categories.length > 0 && (
-
- )}
-
- {showHotVolume ? (
-
- {' '}
- {formatMoney(volume24Hours)}
-
- ) : showCloseTime ? (
-
-
- {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
- {fromNow(closeTime || 0)}
-
- ) : volume > 0 ? (
- {volumeLabel}
- ) : (
-
- )}
+ {showHotVolume ? (
+
+ {formatMoney(volume24Hours)}
-
-
+ ) : showCloseTime ? (
+
+
+ {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
+ {fromNow(closeTime || 0)}
+
+ ) : volume > 0 ? (
+ {volumeLabel}
+ ) : (
+
+ )}
+
+ )
+}
+
+export function AvatarDetails(props: { contract: Contract }) {
+ const { contract } = props
+ const { creatorName, creatorUsername } = contract
+
+ return (
+
+
+
+
+ )
+}
+
+export function AbbrContractDetails(props: {
+ contract: Contract
+ showHotVolume?: boolean
+ showCloseTime?: boolean
+}) {
+ const { contract, showHotVolume, showCloseTime } = props
+ return (
+
+
+
+
+
)
}
@@ -93,7 +109,7 @@ export function ContractDetails(props: {
}) {
const { contract, bets, isCreator, disabled } = props
const { closeTime, creatorName, creatorUsername } = contract
- const { volumeLabel, createdDate, resolvedDate } = contractMetrics(contract)
+ const { volumeLabel, resolvedDate } = contractMetrics(contract)
return (
diff --git a/web/components/contract/quick-bet.tsx b/web/components/contract/quick-bet.tsx
new file mode 100644
index 00000000..35fcad50
--- /dev/null
+++ b/web/components/contract/quick-bet.tsx
@@ -0,0 +1,241 @@
+import clsx from 'clsx'
+import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
+import { getExpectedValue } from 'common/calculate-dpm'
+import {
+ Contract,
+ FullContract,
+ CPMM,
+ DPM,
+ Binary,
+ NumericContract,
+ FreeResponse,
+} from 'common/contract'
+import { formatMoney } from 'common/util/format'
+import toast from 'react-hot-toast'
+import { useUser } from 'web/hooks/use-user'
+import { useUserContractBets } from 'web/hooks/use-user-bets'
+import { placeBet } from 'web/lib/firebase/api-call'
+import { getBinaryProb } from 'web/lib/firebase/contracts'
+import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
+import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
+import { Col } from '../layout/col'
+import { OUTCOME_TO_COLOR } from '../outcome-label'
+import { useSaveShares } from '../use-save-shares'
+import {
+ BinaryResolutionOrChance,
+ NumericResolutionOrExpectation,
+ FreeResponseResolutionOrChance,
+} from './contract-card'
+
+export function QuickBet(props: { contract: Contract }) {
+ const { contract } = props
+
+ const user = useUser()
+ const userBets = useUserContractBets(user?.id, contract.id)
+ const { yesFloorShares, noFloorShares, yesShares, noShares } = useSaveShares(
+ contract as FullContract,
+ userBets
+ )
+ // TODO: For some reason, Floor Shares are inverted for non-BINARY markets
+ const hasUpShares =
+ contract.outcomeType === 'BINARY' ? yesFloorShares : noFloorShares
+ const hasDownShares =
+ contract.outcomeType === 'BINARY' ? noFloorShares : yesFloorShares
+
+ const color = getColor(contract)
+
+ async function placeQuickBet(direction: 'UP' | 'DOWN') {
+ const betPromise = async () => {
+ const outcome = quickOutcome(contract, direction)
+ return await placeBet({
+ amount: 10,
+ outcome,
+ contractId: contract.id,
+ })
+ }
+ const shortQ = contract.question.slice(0, 20)
+ toast.promise(betPromise(), {
+ loading: `${formatMoney(10)} on "${shortQ}"...`,
+ success: `${formatMoney(10)} on "${shortQ}"...`,
+ error: (err) => `${err.message}`,
+ })
+ }
+
+ function quickOutcome(contract: Contract, direction: 'UP' | 'DOWN') {
+ if (contract.outcomeType === 'BINARY') {
+ return direction === 'UP' ? 'YES' : 'NO'
+ }
+ if (contract.outcomeType === 'FREE_RESPONSE') {
+ // TODO: Implement shorting of free response answers
+ if (direction === 'DOWN') {
+ throw new Error("Can't short free response answers")
+ }
+ return getTopAnswer(contract)?.id
+ }
+ if (contract.outcomeType === 'NUMERIC') {
+ // TODO: Ideally an 'UP' bet would be a uniform bet between [current, max]
+ throw new Error("Can't quick bet on numeric markets")
+ }
+ }
+
+ return (
+
+ {/* Up bet triangle */}
+
+
placeQuickBet('UP')}
+ >
+
+ {formatMoney(10)}
+
+
+ {hasUpShares > 0 ? (
+
+ ) : (
+
+ )}
+
+
placeQuickBet('DOWN')}
+ >
+ {hasDownShares > 0 ? (
+
+ ) : (
+
+ )}
+
+ {formatMoney(10)}
+
+