Outcome
@@ -397,9 +413,9 @@ export default function LimitOrderPanel(props: {
{isPseudoNumeric ? (
Get Mana
- Redeem your {SWEEPIES_NAME} for mana. You'll get{' '}
- {CASH_TO_MANA_CONVERSION_RATE} mana for every 1 {SWEEPIES_NAME}.
+ Redeem your {SWEEPIES_NAME} at{' '}
+
+ {formatSweepies(1)} {'→'}{' '}
+ {formatMoney(CASH_TO_MANA_CONVERSION_RATE)}
+
+ , no fees included!
Redeem for USD
- Redeem your {SWEEPIES_NAME} for USD with a{' '}
- {CHARITY_FEE * 100}% fee.
+ Redeem your {SWEEPIES_NAME} at{' '}
+
+ {formatSweepies(1)} {'→'} {formatMoneyUSD(1)}
+
+ , minus a {CHARITY_FEE * 100}% fee.
+
- {marketTier && marketTier !== 'basic' && (
+ {marketTier && marketTier !== 'basic' && !isCashContract && (
void }) => (
>
)
+
+const Sweepstakes = ({
+ onClick,
+}: {
+ onClick: (sectionTitle: string) => void
+}) => (
+
+
+)
diff --git a/web/components/gidx/location-monitor.tsx b/web/components/gidx/location-monitor.tsx
new file mode 100644
index 0000000000..419dd2c672
--- /dev/null
+++ b/web/components/gidx/location-monitor.tsx
@@ -0,0 +1,55 @@
+import { Button } from 'web/components/buttons/button'
+import { useMonitorStatus } from 'web/hooks/use-monitor-status'
+import { useEvent } from 'web/hooks/use-event'
+import { User } from 'common/user'
+import { Col } from '../layout/col'
+import { Contract } from 'common/contract'
+
+export const LocationMonitor = (props: {
+ contract: Contract
+ user: User | undefined | null
+ setShowPanel: (isOpen: boolean) => void
+ showPanel: boolean
+}) => {
+ const { user, contract, setShowPanel, showPanel } = props
+
+ const {
+ fetchMonitorStatus,
+ requestLocation,
+ loading,
+ monitorStatus,
+ monitorStatusMessage,
+ } = useMonitorStatus(contract.token === 'CASH', user, () =>
+ setShowPanel(true)
+ )
+ const getLocation = useEvent(() => {
+ requestLocation((location) => {
+ if (!location) {
+ return
+ }
+ // may need to pass location to fetchMonitorStatus
+ fetchMonitorStatus()
+ setShowPanel(false)
+ })
+ })
+ if (!user || !showPanel || !user.idVerified) {
+ return null
+ }
+ return (
+ {props.children}
+export function BottomRow(props: {
+ children: React.ReactNode
+ className?: string
+}) {
+ const { className } = props
+ return (
+
+ {props.children}
+
+ )
+}
+
+export function Divider(props: { className?: string }) {
+ return (
+
+ )
}
diff --git a/web/components/gidx/register-user-form.tsx b/web/components/gidx/register-user-form.tsx
index 6b023c6dba..8cdf44d6d9 100644
--- a/web/components/gidx/register-user-form.tsx
+++ b/web/components/gidx/register-user-form.tsx
@@ -32,6 +32,7 @@ import { CoinNumber } from 'web/components/widgets/coin-number'
import { RegisterIcon } from 'web/public/custom-components/registerIcon'
import {
BottomRow,
+ Divider,
InputTitle,
} from 'web/components/gidx/register-component-helpers'
import { DocumentUploadIcon } from 'web/public/custom-components/documentUploadIcon'
@@ -241,7 +242,7 @@ export const RegisterUserForm = (props: {
/>
-
+ Citizenship Country
@@ -284,8 +285,8 @@ export const RegisterUserForm = (props: {
onChange={(e) => setUserInfo({ ...userInfo, City: e.target.value })}
/>
-
- void
@@ -216,7 +217,7 @@ export const UploadDocuments = (props: {
)}
-
+
@@ -233,7 +234,7 @@ export const UploadDocuments = (props: {
Continue
)}
-
+
)
}
diff --git a/web/components/gidx/verify-me.tsx b/web/components/gidx/verify-me.tsx
index 0005ff5ae1..4fe4ba1977 100644
--- a/web/components/gidx/verify-me.tsx
+++ b/web/components/gidx/verify-me.tsx
@@ -8,7 +8,7 @@ import {
import { Col } from 'web/components/layout/col'
import Link from 'next/link'
import clsx from 'clsx'
-import { Button, buttonClass } from 'web/components/buttons/button'
+import { Button, buttonClass, IconButton } from 'web/components/buttons/button'
import { api } from 'web/lib/api/api'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import { GIDXDocument, idNameToCategoryType } from 'common/gidx/gidx'
@@ -20,6 +20,29 @@ import { useMonitorStatus } from 'web/hooks/use-monitor-status'
import { VerifyButton } from '../twomba/toggle-verify-callout'
import { MdBlock } from 'react-icons/md'
import { XIcon } from '@heroicons/react/solid'
+import { usePersistentLocalState } from 'web/hooks/use-persistent-local-state'
+
+const HideVerifyMeButton = ({
+ hideVerifyMe,
+ setHideVerifyMe,
+ className,
+}: {
+ hideVerifyMe: boolean
+ setHideVerifyMe: (value: boolean) => void
+ className?: string
+}) => {
+ if (hideVerifyMe) return null
+
+ return (
+ setHideVerifyMe(true)}
+ >
+
+ )
+}
export const VerifyMe = (props: { user: User }) => {
const user = useUser() ?? props.user
@@ -34,6 +57,12 @@ export const VerifyMe = (props: { user: User }) => {
const [documents, setDocuments] = useState(null)
const [loading, setLoading] = useState(false)
+
+ const [hideVerifyMe, setHideVerifyMe] = usePersistentLocalState(
+ false,
+ `hideVerifyMe`
+ )
+
const {
fetchMonitorStatus,
loading: loadingMonitorStatus,
@@ -53,6 +82,10 @@ export const VerifyMe = (props: { user: User }) => {
const showUploadDocsButton =
getDocumentsStatus(documents ?? []).isRejected && documents
+ if (hideVerifyMe) {
+ return null
+ }
+
if (identityBlocked(user, privateUser)) {
return (
+
)
@@ -82,16 +120,30 @@ export const VerifyMe = (props: { user: User }) => {
+ Document verification pending...
+
+
+
+
{documents && (
@@ -139,7 +191,7 @@ export const VerifyMe = (props: { user: User }) => {
return (
@@ -159,14 +211,19 @@ export const VerifyMe = (props: { user: User }) => {
return (
+
)
@@ -184,19 +241,31 @@ export const VerifyMe = (props: { user: User }) => {
'flex w-full flex-col items-center justify-between gap-2 sm:flex-row'
}
>
-
-
+
+
+
{monitorStatus === 'error' && (
{monitorStatusMessage}
@@ -211,11 +280,21 @@ export const VerifyMe = (props: { user: User }) => {
'border-primary-500 bg-primary-100 items-center justify-between gap-2 rounded border px-4 py-2 sm:flex-row'
}
>
-
+
{getVerificationStatus(user).status !== 'success' &&
`You are not yet verified! Verify to start trading on ${SWEEPIES_NAME} markets.`}
-
-
+ Prizes
{
return [!bannerSeen, () => setBannerSeen(1)] as const
}
+
+export const TwombaBanner = () => {
+ const [showBanner, hideBanner] = useBanner('twomba')
+ if (!showBanner) return null
+ return (
+
+
+
+
+ )
+}
diff --git a/web/components/nav/profile-summary.tsx b/web/components/nav/profile-summary.tsx
index 21815151bd..8498e57a93 100644
--- a/web/components/nav/profile-summary.tsx
+++ b/web/components/nav/profile-summary.tsx
@@ -33,7 +33,6 @@ export function ProfileSummary(props: { user: User; className?: string }) {
/>
{isSpiceMarket && (
@@ -91,7 +95,17 @@ export function MarketTopics(props: TopicRowProps) {
{
+ track('click category pill on market', {
+ contractId: contract.id,
+ categoryName: t.name,
+ })
+ }}
+ />
))}
{user && canEdit && (
-
- Manifold lets you {TRADE_TERM} on upcoming events. As other users{' '}
- {TRADE_TERM} against you, it creates a probability of how likely the
- event will happen—this is known as a prediction market.
-
- ) : (
-
- Manifold lets you {TRADE_TERM} on upcoming events using play money. As
- other users {TRADE_TERM} against you, it creates a probability of how
- likely the event will happen—this is known as a prediction market.
-
- )}
-
- {capitalize(TRADE_TERM)} on current events, politics, tech, and AI, or
- create your own market about an event you care about for others to trade
- on!
-
-
-)
-
const WhyBet = ({ onClick }: { onClick: (sectionTitle: string) => void }) => (
{capitalize(TRADING_TERM)} contributes to accurate answers of important,
- real-world questions.
+ real-world questions and helps you stay more accountable as you make
+ predictions.
- {!TWOMBA_ENABLED && SPICE_PRODUCTION_ENABLED && (
-
- {capitalize(TRADE_TERM)} to win prizepoints! Redeem them and we will
- donate to a charity of your choice. Our users have{' '}
-
- raised over $300,000 for charity
- {' '}
- so far!
-
- )}
{TWOMBA_ENABLED && (
<>
- {capitalize(TRADE_TERM)} for a chance to win real cash prizes{' '}
- when you trade with{' '}
+ {capitalize(TRADE_TERM)} with{' '}
)}
@@ -198,3 +164,42 @@ const Accuracy = ({ onClick }: { onClick: (sectionTitle: string) => void }) => (
+ There are two types of markets on Manifold: play money and sweepstakes.
+
+
+ By default all markets are play money and use mana. These markets allow
+ you to win more mana but do not award any prizes which can be cashed out.
+
+
+ Selected markets will have a sweepstakes toggle. These require sweepcash
+ to participate and allow winners to withdraw any sweepcash won to real
+ money.
+
+
+ As play money and sweepstakes markets are independent of each other, they
+ may have different odds even though they share the same question and
+ comments.
+
+
+ Learn more.
+
+ + You must share your location to participate in sweepstakes. Please allow + location sharing. +
+
+
+
+ {monitorStatus === 'error' && (
+ {monitorStatusMessage}
+ )}
+
+ )
+}
diff --git a/web/components/gidx/location-panel.tsx b/web/components/gidx/location-panel.tsx
index daa850071e..72a814de68 100644
--- a/web/components/gidx/location-panel.tsx
+++ b/web/components/gidx/location-panel.tsx
@@ -1,17 +1,11 @@
-import {
- ENABLE_FAKE_CUSTOMER,
- FAKE_CUSTOMER_BODY,
- GPSData,
-} from 'common/gidx/gidx'
-import { useEffect, useState } from 'react'
+import { GPSData } from 'common/gidx/gidx'
import { Button } from 'web/components/buttons/button'
-import { LoadingIndicator } from 'web/components/widgets/loading-indicator'
-import { useNativeMessages } from 'web/hooks/use-native-messages'
import { getIsNative } from 'web/lib/native/is-native'
-import { postMessageToNative } from 'web/lib/native/post-message'
import { BottomRow } from './register-component-helpers'
import { LocationBlockedIcon } from 'web/public/custom-components/locationBlockedIcon'
-import { MINUTE_MS } from 'common/util/time'
+import { useLocation } from 'web/hooks/use-location'
+import { LoadingIndicator } from '../widgets/loading-indicator'
+import { useEffect } from 'react'
export const LocationPanel = (props: {
setLocation: (data: GPSData) => void
@@ -30,115 +24,14 @@ export const LocationPanel = (props: {
back,
} = props
- const [checkedPermissions, setCheckedPermissions] = useState(false)
- const [timeout, setTimeout] = useState(10000)
+ const { checkedPermissions, requestLocation, checkLocationPermission } =
+ useLocation(setLocation, setLocationError, setLoading)
useEffect(() => {
- if (!checkedPermissions) checkLocationPermission()
- }, [])
-
- // TODO: native app optimization: see if they've already given location permission
- const checkLocationPermission = async () => {
- setLoading(true)
-
- if ('permissions' in navigator) {
- try {
- const permissionStatus = await navigator.permissions.query({
- name: 'geolocation',
- })
- switch (permissionStatus.state) {
- case 'granted':
- console.log('Location permission already granted')
- requestLocation(() => setCheckedPermissions(true))
- break
- case 'prompt':
- console.log('Location permission has not been requested yet')
- setCheckedPermissions(true)
- setLoading(false)
- break
- case 'denied':
- console.log('Location permission has been denied')
- setCheckedPermissions(true)
- setLoading(false)
- break
- }
- } catch (error) {
- console.error('Error checking geolocation permission:', error)
- setCheckedPermissions(true)
- }
- } else {
- console.log('Permissions API not supported')
- setCheckedPermissions(true)
- }
- }
-
- useNativeMessages(['location'], (type, data) => {
- console.log('Received location data from native', data)
- if ('error' in data) {
- setLocationError(data.error)
- } else {
- setLocation({
- ...data,
- })
+ if (!checkedPermissions) {
+ checkLocationPermission()
}
- setLoading(false)
- })
-
- const requestLocation = (onFinishCallback?: () => void) => {
- setLocationError(undefined)
- setLoading(true)
- if (getIsNative()) {
- console.log('requesting location from native')
- postMessageToNative('locationRequested', {})
- onFinishCallback?.()
- return
- }
- if ('geolocation' in navigator) {
- navigator.geolocation.getCurrentPosition(
- (position) => {
- const { coords } = position
- setLocation(
- ENABLE_FAKE_CUSTOMER
- ? FAKE_CUSTOMER_BODY.DeviceGPS
- : {
- Latitude: coords.latitude,
- Longitude: coords.longitude,
- Radius: coords.accuracy,
- Altitude: coords.altitude ?? 0,
- Speed: coords.speed ?? 0,
- DateTime: new Date().toISOString(),
- }
- )
- setLoading(false)
- onFinishCallback?.()
- },
- (error) => {
- console.log('Error requesting location', error)
- if (error.message.includes('denied')) {
- setLocationError(
- 'Location permission denied. Please enable location sharing in your browser settings.'
- )
- } else {
- if (error.message.includes('timeout')) {
- setTimeout(timeout + 5000)
- }
- setLocationError(error.message)
- }
- setLoading(false)
- onFinishCallback?.()
- },
- {
- enableHighAccuracy: true,
- timeout,
- maximumAge: 20 * MINUTE_MS,
- }
- )
- } else {
- setLocationError('Geolocation is not supported by your browser.')
- setLoading(false)
- onFinishCallback?.()
- }
- }
+ }, [])
if (!checkedPermissions) {
return
+ State
- Postal Code
-
+
{error && (
- Win {SPICE_NAME}s at the end of the season based on your division
- and finishing rank.
+ Win mana at the end of the season based on your division and
+ finishing rank.
Sweepstakes cash prizes are here! Read more
+
- {!SPICE_PRODUCTION_ENABLED &&
+ {pseudonymName}
+
+ )
+ }
if (mainBinaryMCAnswer && mechanism === 'cpmm-multi-1') {
return (
diff --git a/web/components/portfolio/balance-change-table.tsx b/web/components/portfolio/balance-change-table.tsx
index ff337ba8e4..61ac7b3a53 100644
--- a/web/components/portfolio/balance-change-table.tsx
+++ b/web/components/portfolio/balance-change-table.tsx
@@ -4,8 +4,8 @@ import {
formatMoneyUSD,
formatSpice,
formatSweepies,
+ formatWithToken,
maybePluralize,
- shortFormatNumber,
} from 'common/util/format'
import { Row } from 'web/components/layout/row'
import clsx from 'clsx'
@@ -20,7 +20,6 @@ import {
isTxnChange,
} from 'common/balance-change'
import Link from 'next/link'
-import { ENV_CONFIG } from 'common/envs/constants'
import {
FaBackward,
FaArrowRightArrowLeft,
@@ -272,9 +271,11 @@ const BetBalanceChangeRow = (props: {
const { amount, contract, answer, bet, type } = change
const { outcome } = bet
const { slug, question, creatorUsername } = contract
- const niceAmount =
- (token === 'CASH' ? 'S' : ENV_CONFIG.moneyMoniker) +
- shortFormatNumber(amount).replace('-', '')
+ const niceAmount = formatWithToken({
+ amount: Math.abs(amount),
+ token: token === 'MANA' ? 'M$' : 'CASH',
+ short: true,
+ })
const direction =
type === 'redeem_shares'
? 'sideways'
diff --git a/web/components/portfolio/twomba-portfolio-graph.tsx b/web/components/portfolio/twomba-portfolio-graph.tsx
index 04f1e79ba6..0345cadb39 100644
--- a/web/components/portfolio/twomba-portfolio-graph.tsx
+++ b/web/components/portfolio/twomba-portfolio-graph.tsx
@@ -185,6 +185,7 @@ export const TwombaPortfolioGraph = (props: {
setPortfolioFocus('all')
}}
areaClassName="hover:opacity-50 opacity-[0.2] transition-opacity"
+ noWatermark
/>
)
}
@@ -267,6 +268,7 @@ export const TwombaProfitGraph = (props: {
color={['#14b8a6', '#F75836']}
negativeThreshold={negativeThreshold}
hideXAxis={hideXAxis}
+ noWatermark
/>
)
}
@@ -319,15 +321,23 @@ function usePortfolioPointsFromHistory(
return balance + investment - totalDeposits - firstProfit
}
- function getNetworth(balance: number, investment: number) {
- return balance + investment
+ function getNetworth(
+ balance: number,
+ investment: number,
+ spiceBalance?: number
+ ) {
+ return (
+ balance +
+ investment +
+ (spiceBalance ?? 0) * SPICE_TO_MANA_CONVERSION_RATE
+ )
}
portfolioHistory.forEach((p) => {
profitPoints.push({
x: p.timestamp,
y: getProfit(
- p.balance,
+ p.balance + (p.spiceBalance ?? 0) * SPICE_TO_MANA_CONVERSION_RATE,
p.investmentValue,
p.totalDeposits,
firstProfit
@@ -346,7 +356,7 @@ function usePortfolioPointsFromHistory(
})
networthPoints.push({
x: p.timestamp,
- y: getNetworth(p.balance, p.investmentValue),
+ y: getNetworth(p.balance, p.investmentValue, p.spiceBalance),
obj: p,
})
cashProfitPoints.push({
diff --git a/web/components/portfolio/twomba-portfolio-value-section.tsx b/web/components/portfolio/twomba-portfolio-value-section.tsx
index 3bf8e7d2da..24b6c83fb9 100644
--- a/web/components/portfolio/twomba-portfolio-value-section.tsx
+++ b/web/components/portfolio/twomba-portfolio-value-section.tsx
@@ -26,6 +26,7 @@ import {
} from './twomba-portfolio-graph'
import { getPortfolioValues } from '../twomba-portfolio-helpers'
import { useSweepstakes } from '../sweestakes-context'
+import { SPICE_TO_MANA_CONVERSION_RATE } from 'common/envs/constants'
export type PortfolioHoveredGraphType =
| 'balance'
@@ -177,13 +178,18 @@ export const TwombaPortfolioValueSection = memo(
const { firstProfit, totalValue, calculatedProfit } = getPortfolioValues({
first: first
? {
- balance: first.balance,
+ balance:
+ first.balance +
+ (first.spiceBalance ?? 0) * SPICE_TO_MANA_CONVERSION_RATE,
investmentValue: first.investmentValue,
totalDeposits: first.totalDeposits,
}
: undefined,
last: {
- balance: lastPortfolioMetrics.balance,
+ balance:
+ lastPortfolioMetrics.balance +
+ (lastPortfolioMetrics.spiceBalance ?? 0) *
+ SPICE_TO_MANA_CONVERSION_RATE,
investmentValue: lastPortfolioMetrics.investmentValue,
totalDeposits: lastPortfolioMetrics.totalDeposits,
},
@@ -400,7 +406,7 @@ function TwombaPortfolioValueSkeleton(props: {
{portfolioGraphElement && (
{profitGraphElement && (
)
}
+
+export function BinaryUserPosition(props: {
+ contract: BinaryContract
+ userBets: Bet[]
+ user: User
+ className?: string
+ binaryPseudonym?: {
+ YES: {
+ pseudonymName: string
+ pseudonymColor: string
+ }
+ NO: {
+ pseudonymName: string
+ pseudonymColor: string
+ }
+ }
+}) {
+ const { contract, user, userBets, className, binaryPseudonym } = props
+
+ const { totalShares } = getContractBetMetrics(contract, userBets)
+
+ const yesWinnings = totalShares.YES ?? 0
+ const noWinnings = totalShares.NO ?? 0
+ const position = yesWinnings - noWinnings
+ const betUp = position > 1e-7
+ const betDown = position < 1e-7
+ const sharesSum = sumBy(userBets, (bet) =>
+ bet.outcome === 'YES' ? bet.shares : -bet.shares
+ )
+ const [openModal, setOpenModal] = useState(false)
+ if (!betUp && !betDown) {
+ return <>
+ }
+
+ return (
+
+ )
+}
diff --git a/web/components/us-elections/contracts/party-panel/binary-party-panel.tsx b/web/components/us-elections/contracts/party-panel/binary-party-panel.tsx
new file mode 100644
index 0000000000..38ec7d5977
--- /dev/null
+++ b/web/components/us-elections/contracts/party-panel/binary-party-panel.tsx
@@ -0,0 +1,411 @@
+import { track } from 'web/lib/service/analytics'
+import clsx from 'clsx'
+import { Bet } from 'common/bet'
+import { getDisplayProbability, getProbability } from 'common/calculate'
+import { BinaryContract, Contract } from 'common/contract'
+import { TRADE_TERM } from 'common/envs/constants'
+import { User } from 'common/user'
+import { formatPercent } from 'common/util/format'
+import { capitalize } from 'lodash'
+import Image from 'next/image'
+import { useState } from 'react'
+import {
+ AnswerBar,
+ CreatorAndAnswerLabel,
+} from 'web/components/answers/answer-components'
+import { BetDialog } from 'web/components/bet/bet-dialog'
+import { BinaryOutcomes } from 'web/components/bet/bet-panel'
+import { Button } from 'web/components/buttons/button'
+import { isClosed } from 'web/components/contract/contracts-table'
+import { Col } from 'web/components/layout/col'
+import { Row } from 'web/components/layout/row'
+import { Spacer } from 'web/components/layout/spacer'
+import { SizedContainer } from 'web/components/sized-container'
+import { ProbabilityNeedle } from 'web/components/us-elections/probability-needle'
+import { useSaveBinaryShares } from 'web/hooks/use-save-binary-shares'
+import { useUser } from 'web/hooks/use-user'
+import { useUserContractBets } from 'web/hooks/use-user-bets'
+import { firebaseLogin } from 'web/lib/firebase/users'
+import { BubblePercentChange } from '../candidates-panel/candidate-bar'
+import { BinaryUserPosition } from '../candidates-panel/candidates-user-position'
+import { ELECTIONS_PARTY_QUESTION_PSEUDONYM } from 'web/components/elections-page'
+
+const politicsBinaryPseudonym = {
+ YES: {
+ pseudonymName: 'TRUMP',
+ pseudonymColor: 'sienna',
+ },
+ NO: {
+ pseudonymName: 'HARRIS',
+ pseudonymColor: 'azure',
+ },
+}
+
+// just the bars
+export function BinaryPartyPanel(props: { contract: BinaryContract }) {
+ const { contract } = props
+ const user = useUser()
+
+ const userBets = useUserContractBets(user?.id, contract.id)
+
+ const { sharesOutcome } = useSaveBinaryShares(contract, userBets)
+
+ const republicanProb = getDisplayProbability(contract)
+ const democraticProb = 1 - republicanProb
+
+ return (
+
+ {(width, height) => (
+
+
+ {trumpHead}
+
+
+ }
+ />
+
+ {harrisHead}
+
+
+ }
+ />
+
+ )
+}
+
+function BinaryPartyAnswerSnippet(props: {
+ contract: BinaryContract
+ color: string
+ betUp: boolean
+ user?: User | null
+ className?: string
+ isDemocraticParty: boolean
+ probability: number
+ userBets: Bet[]
+}) {
+ const {
+ contract,
+ betUp,
+ user,
+ className,
+ isDemocraticParty,
+ probability,
+ userBets,
+ } = props
+
+ const { resolution } = contract
+
+ const probChangesToday = contract.probChanges.day
+
+ return (
+
+
+
+
+
+ {customTitle ?? contract.question}
+
+ {TWOMBA_ENABLED &&
+
+ {children}
+ {
+ trackClick()
+ Router.push(path)
+ e.currentTarget.focus() // focus the div like a button, for style
+ }}
+ >
+
+
+ )
+ }
if (viewType == 'CANDIDATE') {
return (
{!disableClearButton && (
@@ -181,6 +183,7 @@ export function BuyAmountInput(props: {
disableQuickButtons?: boolean
token?: InputTokenType
marketTier?: MarketTierType | undefined
+ sliderColor?: string
}) {
const {
amount,
@@ -202,6 +205,7 @@ export function BuyAmountInput(props: {
quickButtonValues,
disableQuickButtons,
token = 'M$',
+ sliderColor,
} = props
const user = useUser()
@@ -325,6 +329,7 @@ export function BuyAmountInput(props: {
disabled={disabled}
smallAmounts={!hasLotsOfMoney || marketTier === 'play'}
token={token}
+ sliderColor={sliderColor}
/>
)}
{error ? (
diff --git a/web/components/widgets/input.tsx b/web/components/widgets/input.tsx
index 0f2e2caf3a..e2758a4d61 100644
--- a/web/components/widgets/input.tsx
+++ b/web/components/widgets/input.tsx
@@ -34,7 +34,7 @@ export const Input = forwardRef(
: 'border-ink-300 placeholder-ink-400 focus:ring-primary-500 focus:border-primary-500',
className
)}
- step={0.001} // default to 3 decimal places
+ step={rest.step ?? 0.001} // default to 3 decimal places
{...rest}
/>
diff --git a/web/components/widgets/slider.tsx b/web/components/widgets/slider.tsx
index 53d2db7f51..2ef915c1d5 100644
--- a/web/components/widgets/slider.tsx
+++ b/web/components/widgets/slider.tsx
@@ -11,6 +11,8 @@ const colors = {
red: ['bg-scarlet-400', 'focus:outline-scarlet-600/30 bg-scarlet-600'],
indigo: ['bg-primary-300', 'focus:outline-primary-500/30 bg-primary-500'],
violet: ['bg-violet-300', 'focus:outline-violet-500/30 bg-violet-500'],
+ azure: ['bg-azure-300', 'focus:outline-azure-500/30 bg-azure-500'],
+ sienna: ['bg-sienna-300', 'focus:outline-sienna-500/30 bg-sienna-500'],
// light: ['primary-200', 'primary-300']
} as const
export type Mark = { value: number; label: string }
diff --git a/web/hooks/use-location.ts b/web/hooks/use-location.ts
new file mode 100644
index 0000000000..2fb43616fb
--- /dev/null
+++ b/web/hooks/use-location.ts
@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import {
+ ENABLE_FAKE_CUSTOMER,
+ FAKE_CUSTOMER_BODY,
+ GPSData,
+} from 'common/gidx/gidx'
+import { getIsNative } from 'web/lib/native/is-native'
+import { postMessageToNative } from 'web/lib/native/post-message'
+import { MINUTE_MS } from 'common/util/time'
+
+export const useLocation = (
+ setLocation: (data: GPSData) => void,
+ setLocationError: (error: string | undefined) => void,
+ setLoading: (loading: boolean) => void
+) => {
+ const [checkedPermissions, setCheckedPermissions] = useState(false)
+
+ const checkLocationPermission = async () => {
+ setLoading(true)
+
+ if ('permissions' in navigator) {
+ try {
+ const permissionStatus = await navigator.permissions.query({
+ name: 'geolocation',
+ })
+ switch (permissionStatus.state) {
+ case 'granted':
+ console.log('Location permission already granted')
+ requestLocation(() => setCheckedPermissions(true))
+ break
+ case 'prompt':
+ console.log('Location permission has not been requested yet')
+ setCheckedPermissions(true)
+ setLoading(false)
+ break
+ case 'denied':
+ console.log('Location permission has been denied')
+ setCheckedPermissions(true)
+ setLoading(false)
+ break
+ }
+ } catch (error) {
+ console.error('Error checking geolocation permission:', error)
+ setCheckedPermissions(true)
+ }
+ } else {
+ console.error('Permissions API not supported')
+ setCheckedPermissions(true)
+ }
+ }
+
+ const requestLocation = (onFinishCallback?: (location?: GPSData) => void) => {
+ setLocationError(undefined)
+ setLoading(true)
+ if (getIsNative()) {
+ console.log('requesting location from native')
+ postMessageToNative('locationRequested', {})
+ onFinishCallback?.()
+ return
+ }
+ if ('geolocation' in navigator) {
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ const { coords } = position
+ const location = {
+ Latitude: coords.latitude,
+ Longitude: coords.longitude,
+ Radius: coords.accuracy,
+ Altitude: coords.altitude ?? 0,
+ Speed: coords.speed ?? 0,
+ DateTime: new Date().toISOString(),
+ }
+ setLocation(
+ ENABLE_FAKE_CUSTOMER ? FAKE_CUSTOMER_BODY.DeviceGPS : location
+ )
+ setLoading(false)
+ onFinishCallback?.(location)
+ },
+ (error) => {
+ console.error('Error requesting location', error)
+ if (error.message.includes('denied')) {
+ setLocationError(
+ 'Location permission denied. Please enable location sharing in your browser settings.'
+ )
+ } else {
+ setLocationError(error.message)
+ }
+ setLoading(false)
+ onFinishCallback?.()
+ },
+ {
+ enableHighAccuracy: true,
+ maximumAge: 20 * MINUTE_MS,
+ }
+ )
+ } else {
+ setLocationError('Geolocation is not supported by your browser.')
+ setLoading(false)
+ onFinishCallback?.()
+ }
+ }
+
+ return { checkedPermissions, requestLocation, checkLocationPermission }
+}
diff --git a/web/hooks/use-monitor-status.ts b/web/hooks/use-monitor-status.ts
index d05bb2336a..12f3d55c59 100644
--- a/web/hooks/use-monitor-status.ts
+++ b/web/hooks/use-monitor-status.ts
@@ -1,17 +1,17 @@
import { useEffect, useState } from 'react'
import { api } from 'web/lib/api/api'
import { useNativeMessages } from 'web/hooks/use-native-messages'
-import { getIsNative } from 'web/lib/native/is-native'
-import { postMessageToNative } from 'web/lib/native/post-message'
import { GPSData } from 'common/gidx/gidx'
import { MINUTE_MS } from 'common/util/time'
import { User } from 'common/user'
import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state'
import { useEvent } from 'web/hooks/use-event'
+import { useLocation } from './use-location'
export const useMonitorStatus = (
polling: boolean,
- user: User | undefined | null
+ user: User | undefined | null,
+ promptUserToShareLocation?: () => void
) => {
const [location, setLocation] = usePersistentInMemoryState<
GPSData | undefined
@@ -36,44 +36,18 @@ export const useMonitorStatus = (
setLocation(data as GPSData)
}
})
-
- const requestLocation = () => {
- setMonitorStatusMessage(undefined)
- if (getIsNative()) {
- postMessageToNative('locationRequested', {})
- } else if ('geolocation' in navigator) {
- navigator.geolocation.getCurrentPosition(
- (position) => {
- const { coords } = position
- const loc = {
- Latitude: coords.latitude,
- Longitude: coords.longitude,
- Radius: coords.accuracy,
- Altitude: coords.altitude ?? 0,
- Speed: coords.speed ?? 0,
- DateTime: new Date().toISOString(),
- }
- setLocation(loc)
- fetchMonitorStatusWithLocation(loc)
- },
- (error) => {
- setMonitorStatusMessage(error.message)
- setMonitorStatus('error')
- },
- {
- enableHighAccuracy: true,
- timeout: 5000,
- maximumAge: 20 * MINUTE_MS,
- }
- )
- } else {
- setMonitorStatus('error')
- setMonitorStatusMessage('Geolocation is not supported by your browser.')
- }
+ const setLocationError = (error: string | undefined) => {
+ setMonitorStatus('error')
+ setMonitorStatusMessage(error)
}
+ const { checkedPermissions, requestLocation, checkLocationPermission } =
+ useLocation(setLocation, setLocationError, setLoading)
const fetchMonitorStatus = useEvent(async () => {
- if (!user || !user.idVerified) {
+ if (!user) {
+ return
+ }
+ if (!user.idVerified) {
setMonitorStatus('error')
setMonitorStatusMessage('User not verified')
return {
@@ -83,10 +57,23 @@ export const useMonitorStatus = (
}
setMonitorStatusMessage(undefined)
setLoading(true)
- if (!location) requestLocation()
- else return fetchMonitorStatusWithLocation(location)
+ if (!location) {
+ checkLocationPermission()
+ } else return fetchMonitorStatusWithLocation(location)
})
+ useEffect(() => {
+ if (checkedPermissions && !location) {
+ if (promptUserToShareLocation) {
+ promptUserToShareLocation()
+ } else {
+ requestLocation()
+ }
+ } else if (checkedPermissions && location) {
+ fetchMonitorStatusWithLocation(location)
+ }
+ }, [checkedPermissions, location])
+
const fetchMonitorStatusWithLocation = useEvent(
async (location: GPSData | undefined) => {
if (!location) {
@@ -120,7 +107,7 @@ export const useMonitorStatus = (
)
useEffect(() => {
- if (!polling) return
+ if (!polling || !user) return
const currentTime = Date.now()
const timeSinceLastCall = currentTime - lastApiCallTime
@@ -131,7 +118,13 @@ export const useMonitorStatus = (
const interval = setInterval(fetchMonitorStatus, 20 * MINUTE_MS)
return () => clearInterval(interval)
- }, [polling, fetchMonitorStatus, lastApiCallTime])
+ }, [polling, fetchMonitorStatus, lastApiCallTime, user?.idVerified])
- return { monitorStatus, monitorStatusMessage, fetchMonitorStatus, loading }
+ return {
+ monitorStatus,
+ monitorStatusMessage,
+ fetchMonitorStatus,
+ loading,
+ requestLocation,
+ }
}
diff --git a/web/lib/politics/home.ts b/web/lib/politics/home.ts
index e91b8f3ece..bca65a8662 100644
--- a/web/lib/politics/home.ts
+++ b/web/lib/politics/home.ts
@@ -17,9 +17,11 @@ import { getMultiBetPoints } from 'common/contract-params'
import { PolicyContractType, PolicyData } from 'web/public/data/policy-data'
import { mapValues } from 'lodash'
import { getBetPoints } from 'web/lib/supabase/bets'
+import { CASH_SUFFIX } from 'common/envs/constants'
export const ELECTION_PARTY_CONTRACT_SLUG =
- 'which-party-will-win-the-2024-us-pr-f4158bf9278a'
+ // 'which-party-will-win-the-2024-us-pr-f4158bf9278a'
+ 'will-trump-win-the-2024-election'
export async function getElectionsPageProps() {
const adminDb = await initSupabaseAdmin()
@@ -47,6 +49,7 @@ export async function getElectionsPageProps() {
const specialContractSlugs = [
ELECTION_PARTY_CONTRACT_SLUG,
+ `${ELECTION_PARTY_CONTRACT_SLUG}${CASH_SUFFIX}`,
'who-will-win-the-2024-us-presidenti-8c1c8b2f8964',
'who-will-win-the-2024-republican-pr-e1332cf40e59',
'who-will-win-the-2024-democratic-pr-47576e90fa38',
@@ -64,6 +67,7 @@ export async function getElectionsPageProps() {
const [
electionPartyContract,
+ electionPartyCashContract,
electionCandidateContract,
republicanCandidateContract,
democratCandidateContract,
@@ -106,6 +110,7 @@ export async function getElectionsPageProps() {
rawGovernorStateContracts: governorStateContracts,
rawPolicyContracts: policyContracts,
electionPartyContract,
+ electionPartyCashContract,
electionCandidateContract,
republicanCandidateContract,
democratCandidateContract,
diff --git a/web/lib/util/devtools.ts b/web/lib/util/devtools.ts
new file mode 100644
index 0000000000..f3827b02af
--- /dev/null
+++ b/web/lib/util/devtools.ts
@@ -0,0 +1,115 @@
+// devtoolsDetector.ts
+export interface DevtoolsDetectorConfig {
+ pollingIntervalSeconds: number
+ maxMillisBeforeAckWhenClosed: number
+ moreAnnoyingDebuggerStatements: number
+ onDetectOpen?: () => void
+ onDetectClose?: () => void
+ startup: 'asap' | 'manual' | 'domContentLoaded'
+ onCheckOpennessWhilePaused: 'returnStaleValue' | 'throw'
+}
+
+export interface DevtoolsDetector {
+ config: DevtoolsDetectorConfig
+ readonly isOpen: boolean
+ paused: boolean
+}
+
+export const setupDevtoolsDetector = (): DevtoolsDetector => {
+ const config: DevtoolsDetectorConfig = {
+ pollingIntervalSeconds: 0.25,
+ maxMillisBeforeAckWhenClosed: 100,
+ moreAnnoyingDebuggerStatements: 1,
+ onDetectOpen: undefined,
+ onDetectClose: undefined,
+ startup: 'asap',
+ onCheckOpennessWhilePaused: 'returnStaleValue',
+ }
+
+ Object.seal(config)
+
+ const heart = new Worker(
+ URL.createObjectURL(
+ new Blob(
+ [
+ `"use strict";
+ onmessage = (ev) => { postMessage({ isOpenBeat: true });
+ debugger;
+ for (let i = 0; i < ev.data.moreDebugs; i++) {
+ debugger;
+ }
+ postMessage({ isOpenBeat: false });
+ };`,
+ ],
+ { type: 'text/javascript' }
+ )
+ )
+ )
+
+ let _isDevtoolsOpen = false
+ let _isDetectorPaused = true
+ let resolveVerdict: (value: boolean | null) => void = () => {}
+ let nextPulse$: NodeJS.Timeout | number = NaN
+
+ const onHeartMsg = (msg: MessageEvent<{ isOpenBeat: boolean }>) => {
+ if (msg.data.isOpenBeat) {
+ const p = new Promise((_resolveVerdict) => {
+ resolveVerdict = _resolveVerdict
+ let wait$: NodeJS.Timeout | number = setTimeout(() => {
+ wait$ = NaN
+ resolveVerdict(true)
+ }, config.maxMillisBeforeAckWhenClosed + 1)
+ })
+
+ p.then((verdict) => {
+ if (verdict === null) return
+ if (verdict !== _isDevtoolsOpen) {
+ _isDevtoolsOpen = verdict
+ const cb = { true: config.onDetectOpen, false: config.onDetectClose }[
+ verdict + ''
+ ]
+ if (cb) cb()
+ }
+ nextPulse$ = setTimeout(() => {
+ nextPulse$ = NaN
+ doOnePulse()
+ }, config.pollingIntervalSeconds * 1000)
+ })
+ } else {
+ resolveVerdict(false)
+ }
+ }
+
+ const doOnePulse = () => {
+ heart.postMessage({ moreDebugs: config.moreAnnoyingDebuggerStatements })
+ }
+
+ const detector: DevtoolsDetector = {
+ config,
+ get isOpen() {
+ if (_isDetectorPaused && config.onCheckOpennessWhilePaused === 'throw') {
+ throw new Error('`onCheckOpennessWhilePaused` is set to `"throw"`.')
+ }
+ return _isDevtoolsOpen
+ },
+ get paused() {
+ return _isDetectorPaused
+ },
+ set paused(pause: boolean) {
+ if (_isDetectorPaused === pause) return
+ _isDetectorPaused = pause
+ if (pause) {
+ heart.removeEventListener('message', onHeartMsg as EventListener)
+ clearTimeout(nextPulse$)
+ nextPulse$ = NaN
+ resolveVerdict(null)
+ } else {
+ heart.addEventListener('message', onHeartMsg as EventListener)
+ doOnePulse()
+ }
+ },
+ }
+
+ Object.freeze(detector)
+ return detector
+}
diff --git a/web/next.config.js b/web/next.config.js
index 035be9d852..42de430a5a 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -92,12 +92,12 @@ module.exports = {
},
{
source: '/privacy',
- destination: '/privacy.html',
+ destination: '/privacy-policy.html',
permanent: true,
},
{
source: '/terms',
- destination: '/terms.html',
+ destination: '/terms-and-conditions.html',
permanent: true,
},
{
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index b8e4947d1c..76a60715b0 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -14,6 +14,7 @@ import {
} from 'common/contract'
import { ContractMetric } from 'common/contract-metric'
import {
+ CASH_SUFFIX,
HOUSE_BOT_USERNAME,
SPICE_MARKET_TOOLTIP,
TWOMBA_ENABLED,
@@ -118,7 +119,7 @@ export async function getStaticProps(ctx: {
const manaContract = contract.siblingContractId
? await getContract(adminDb, contract.siblingContractId)
: null
- const slug = manaContract?.slug ?? contractSlug.replace('--cash', '')
+ const slug = manaContract?.slug ?? contractSlug.replace(CASH_SUFFIX, '')
return {
redirect: {
@@ -628,7 +629,8 @@ export function ContractPageContent(props: ContractParams) {
{
- const [devtoolsOpen, setDevtoolsOpen] = usePersistentInMemoryState(
- false,
- 'devtools'
- )
+ const [_, setDetector] = useState(null)
+ const [isDevtoolsOpen, setIsDevtoolsOpen] = useState(false)
+
useEffect(() => {
- const isLocal =
- window.location.hostname === 'localhost' ||
- // For ios local dev
- window.location.hostname === '192.168.1.229'
- if (!TWOMBA_ENABLED || isLocal) {
+ const ignore =
+ window.location.host === 'localhost:3000' ||
+ process.env.NEXT_PUBLIC_FIREBASE_ENV === 'DEV'
+
+ if (ignore) {
return
}
- const detectDevTools = () => {
- const threshold = 160
- const widthThreshold = window.outerWidth - window.innerWidth > threshold
- const heightThreshold =
- window.outerHeight - window.innerHeight > threshold
+ const devtoolsDetector = setupDevtoolsDetector()
+ setDetector(devtoolsDetector)
- if ((widthThreshold || heightThreshold) && !devtoolsOpen) {
- setDevtoolsOpen(true)
- }
+ devtoolsDetector.config.onDetectOpen = () => {
+ setIsDevtoolsOpen(true)
}
- const intervalId = setInterval(() => {
- detectDevTools()
- }, 1000)
+ // Start detecting right away
+ devtoolsDetector.paused = false
- return () => clearInterval(intervalId)
+ return () => {
+ // Pause the detector when component unmounts
+ devtoolsDetector.paused = true
+ }
}, [])
-
- return devtoolsOpen
+ return isDevtoolsOpen
}
// specially treated props that may be present in the server/static props
diff --git a/web/pages/about.tsx b/web/pages/about.tsx
index cd806fbef2..ca669df147 100644
--- a/web/pages/about.tsx
+++ b/web/pages/about.tsx
@@ -6,13 +6,11 @@ import { Footer } from 'web/components/footer'
import { SEO } from 'web/components/SEO'
import { Title } from 'web/components/widgets/title'
import { getNativePlatform } from 'web/lib/native/is-native'
-import {
- ExplainerPanel,
- WhatIsManifoldContent,
-} from 'web/components/explainer-panel'
+import { ExplainerPanel } from 'web/components/explainer-panel'
import { LabCard } from './lab'
-import { TRADE_TERM } from 'common/envs/constants'
+import { TRADE_TERM, TWOMBA_ENABLED } from 'common/envs/constants'
import { capitalize } from 'lodash'
+import { AboutManifold } from 'web/components/about-manifold'
export default function AboutPage() {
getNativePlatform()
@@ -30,7 +28,9 @@ export default function AboutPage() {
About
-
+
{!user || !privateUser ? (
-
{
const { data } = await db
@@ -187,18 +189,12 @@ export default function LandingPage(props: {
{user.name}
}
+
+ {(width, height) => (
+
+
+
+
+
+
+
+
+
+ {formatPercent(repProb)}
+ {probChangesToday > 0 && (
+
+
+ {formatPercent(demProb)}
+ {probChangesToday < 0 && (
+
+ {isDemocraticParty ? 'Harris' : 'Trump'}
+
+ {formatPercent(probability)}
+ {(isDemocraticParty && probChangesToday < 0) ||
+ (!isDemocraticParty && probChangesToday > 0 && (
+
+
+
+ )
+}
+
+export function BinaryBetButton(props: {
+ contract: Contract
+ user?: User | null
+ initialOutcome?: BinaryOutcomes
+ className?: string
+ questionPseudonym?: string
+}) {
+ const { contract, initialOutcome, className, questionPseudonym } = props
+ const user = useUser()
+ const [open, setOpen] = useState(false)
+
+ if (
+ !isClosed(contract) &&
+ !contract.isResolved &&
+ (contract.mechanism === 'cpmm-1' || contract.mechanism === 'cpmm-multi-1')
+ ) {
+ return (
+ <>
+
+
+ {open && (
+
+