open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'manifoldmarkets:main' into main

Browse Source
This commit is contained in:
marsteralex 2022-09-16 17:20:52 -07:00 committed by GitHub
commit 0debf4b21a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 2206 additions and 1274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
common/calculate.ts
View File

@ -142,17 +142,20 @@ function getCpmmInvested(yourBets: Bet[]) {
const { outcome, shares, amount } = bet
if (floatingEqual(shares, 0)) continue
const spent = totalSpent[outcome] ?? 0
const position = totalShares[outcome] ?? 0
if (amount > 0) {
totalShares[outcome] = (totalShares[outcome] ?? 0) + shares
totalSpent[outcome] = (totalSpent[outcome] ?? 0) + amount
totalShares[outcome] = position + shares
totalSpent[outcome] = spent + amount
} else if (amount < 0) {
const averagePrice = totalSpent[outcome] / totalShares[outcome]
totalShares[outcome] = totalShares[outcome] + shares
totalSpent[outcome] = totalSpent[outcome] + averagePrice * shares
const averagePrice = position === 0 ? 0 : spent / position
totalShares[outcome] = position + shares
totalSpent[outcome] = spent + averagePrice * shares
}
}
return sum(Object.values(totalSpent))
return sum([0, ...Object.values(totalSpent)])
}
function getDpmInvested(yourBets: Bet[]) {

2
common/notification.ts
View File

@ -247,6 +247,8 @@ export type BetFillData = {
creatorOutcome: string
probability: number
fillAmount: number
limitOrderTotal?: number
limitOrderRemaining?: number
}
export type ContractResolutionData = {

88
common/user-notification-preferences.ts
View File

@ -60,14 +60,6 @@ export const getDefaultNotificationPreferences = (
privateUser?: PrivateUser,
noEmails?: boolean
) => {
const {
unsubscribedFromCommentEmails,
unsubscribedFromAnswerEmails,
unsubscribedFromResolutionEmails,
unsubscribedFromWeeklyTrendingEmails,
unsubscribedFromGenericEmails,
} = privateUser || {}
const constructPref = (browserIf: boolean, emailIf: boolean) => {
const browser = browserIf ? 'browser' : undefined
const email = noEmails ? undefined : emailIf ? 'email' : undefined
@ -75,84 +67,48 @@ export const getDefaultNotificationPreferences = (
}
return {
// Watched Markets
all_comments_on_watched_markets: constructPref(
true,
!unsubscribedFromCommentEmails
),
all_answers_on_watched_markets: constructPref(
true,
!unsubscribedFromAnswerEmails
),
all_comments_on_watched_markets: constructPref(true, false),
all_answers_on_watched_markets: constructPref(true, false),
// Comments
tips_on_your_comments: constructPref(true, !unsubscribedFromCommentEmails),
comments_by_followed_users_on_watched_markets: constructPref(true, false),
all_replies_to_my_comments_on_watched_markets: constructPref(
true,
!unsubscribedFromCommentEmails
),
all_replies_to_my_answers_on_watched_markets: constructPref(
true,
!unsubscribedFromCommentEmails
),
tips_on_your_comments: constructPref(true, true),
comments_by_followed_users_on_watched_markets: constructPref(true, true),
all_replies_to_my_comments_on_watched_markets: constructPref(true, true),
all_replies_to_my_answers_on_watched_markets: constructPref(true, true),
all_comments_on_contracts_with_shares_in_on_watched_markets: constructPref(
true,
!unsubscribedFromCommentEmails
false
),
// Answers
answers_by_followed_users_on_watched_markets: constructPref(
true,
!unsubscribedFromAnswerEmails
),
answers_by_market_creator_on_watched_markets: constructPref(
true,
!unsubscribedFromAnswerEmails
),
answers_by_followed_users_on_watched_markets: constructPref(true, true),
answers_by_market_creator_on_watched_markets: constructPref(true, true),
all_answers_on_contracts_with_shares_in_on_watched_markets: constructPref(
true,
!unsubscribedFromAnswerEmails
true
),
// On users' markets
your_contract_closed: constructPref(
true,
!unsubscribedFromResolutionEmails
), // High priority
all_comments_on_my_markets: constructPref(
true,
!unsubscribedFromCommentEmails
),
all_answers_on_my_markets: constructPref(
true,
!unsubscribedFromAnswerEmails
),
your_contract_closed: constructPref(true, true), // High priority
all_comments_on_my_markets: constructPref(true, true),
all_answers_on_my_markets: constructPref(true, true),
subsidized_your_market: constructPref(true, true),
// Market updates
resolutions_on_watched_markets: constructPref(
true,
!unsubscribedFromResolutionEmails
),
resolutions_on_watched_markets: constructPref(true, false),
market_updates_on_watched_markets: constructPref(true, false),
market_updates_on_watched_markets_with_shares_in: constructPref(
true,
false
),
resolutions_on_watched_markets_with_shares_in: constructPref(
true,
!unsubscribedFromResolutionEmails
),
resolutions_on_watched_markets_with_shares_in: constructPref(true, true),
//Balance Changes
loan_income: constructPref(true, false),
betting_streaks: constructPref(true, false),
referral_bonuses: constructPref(true, true),
unique_bettors_on_your_contract: constructPref(true, false),
tipped_comments_on_watched_markets: constructPref(
true,
!unsubscribedFromCommentEmails
),
tipped_comments_on_watched_markets: constructPref(true, true),
tips_on_your_markets: constructPref(true, true),
limit_order_fills: constructPref(true, false),
@ -160,17 +116,11 @@ export const getDefaultNotificationPreferences = (
tagged_user: constructPref(true, true),
on_new_follow: constructPref(true, true),
contract_from_followed_user: constructPref(true, true),
trending_markets: constructPref(
false,
!unsubscribedFromWeeklyTrendingEmails
),
trending_markets: constructPref(false, true),
profit_loss_updates: constructPref(false, true),
probability_updates_on_watched_markets: constructPref(true, false),
thank_you_for_purchases: constructPref(
false,
!unsubscribedFromGenericEmails
),
onboarding_flow: constructPref(false, !unsubscribedFromGenericEmails),
thank_you_for_purchases: constructPref(false, false),
onboarding_flow: constructPref(false, false),
} as notification_preferences
}

1
common/user.ts
View File

@ -71,6 +71,7 @@ export type PrivateUser = {
twitchName: string
controlToken: string
botEnabled?: boolean
needsRelinking?: boolean
}
}

7
common/util/random.ts
View File

@ -46,3 +46,10 @@ export const shuffle = (array: unknown[], rand: () => number) => {
;[array[i], array[swapIndex]] = [array[swapIndex], array[i]]
}
}
export function chooseRandomSubset<T>(items: T[], count: number) {
const fiveMinutes = 5 * 60 * 1000
const seed = Math.round(Date.now() / fiveMinutes).toString()
shuffle(items, createRNG(seed))
return items.slice(0, count)
}

21
functions/src/create-notification.ts
View File

@ -10,7 +10,7 @@ import { User } from '../../common/user'
import { Contract } from '../../common/contract'
import { getPrivateUser, getValues } from './utils'
import { Comment } from '../../common/comment'
import { groupBy, uniq } from 'lodash'
import { groupBy, sum, uniq } from 'lodash'
import { Bet, LimitBet } from '../../common/bet'
import { Answer } from '../../common/answer'
import { getContractBetMetrics } from '../../common/calculate'
@ -416,8 +416,9 @@ export const createCommentOrAnswerOrUpdatedContractNotification = async (
)
}
//TODO: store all possible reasons why the user might be getting the notification and choose the most lenient that they
// have enabled so they will unsubscribe from the least important notifications
//TODO: store all possible reasons why the user might be getting the notification
// and choose the most lenient that they have enabled so they will unsubscribe
// from the least important notifications
await notifyRepliedUser()
await notifyTaggedUsers()
await notifyContractCreator()
@ -479,7 +480,7 @@ export const createBetFillNotification = async (
fromUser: User,
toUser: User,
bet: Bet,
userBet: LimitBet,
limitBet: LimitBet,
contract: Contract,
idempotencyKey: string
) => {
@ -491,8 +492,10 @@ export const createBetFillNotification = async (
)
if (!sendToBrowser) return
const fill = userBet.fills.find((fill) => fill.matchedBetId === bet.id)
const fill = limitBet.fills.find((fill) => fill.matchedBetId === bet.id)
const fillAmount = fill?.amount ?? 0
const remainingAmount =
limitBet.orderAmount - sum(limitBet.fills.map((f) => f.amount))
const notificationRef = firestore
.collection(`/users/${toUser.id}/notifications`)
@ -503,7 +506,7 @@ export const createBetFillNotification = async (
reason: 'bet_fill',
createdTime: Date.now(),
isSeen: false,
sourceId: userBet.id,
sourceId: limitBet.id,
sourceType: 'bet',
sourceUpdateType: 'updated',
sourceUserName: fromUser.name,
@ -516,9 +519,11 @@ export const createBetFillNotification = async (
sourceContractId: contract.id,
data: {
betOutcome: bet.outcome,
creatorOutcome: userBet.outcome,
creatorOutcome: limitBet.outcome,
fillAmount,
probability: userBet.limitProb,
probability: limitBet.limitProb,
limitOrderTotal: limitBet.orderAmount,
limitOrderRemaining: remainingAmount,
} as BetFillData,
}
return await notificationRef.set(removeUndefinedProps(notification))

4
functions/src/on-update-contract.ts
View File

@ -13,6 +13,10 @@ export const onUpdateContract = functions.firestore
if (!contractUpdater) throw new Error('Could not find contract updater')
const previousValue = change.before.data() as Contract
// Resolution is handled in resolve-market.ts
if (!previousValue.isResolved && contract.isResolved) return
if (
previousValue.closeTime !== contract.closeTime ||
previousValue.question !== contract.question

52
web/components/arrange-home.tsx
View File

@ -5,21 +5,15 @@ import { MenuIcon } from '@heroicons/react/solid'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { Subtitle } from 'web/components/subtitle'
import { useMemberGroups } from 'web/hooks/use-group'
import { filterDefined } from 'common/util/array'
import { isArray, keyBy } from 'lodash'
import { User } from 'common/user'
import { Group } from 'common/group'
import { keyBy } from 'lodash'
export function ArrangeHome(props: {
user: User | null | undefined
homeSections: string[]
setHomeSections: (sections: string[]) => void
sections: { label: string; id: string }[]
setSectionIds: (sections: string[]) => void
}) {
const { user, homeSections, setHomeSections } = props
const { sections, setSectionIds } = props
const groups = useMemberGroups(user?.id) ?? []
const { itemsById, sections } = getHomeItems(groups, homeSections)
const sectionsById = keyBy(sections, 'id')
return (
<DragDropContext
@ -27,14 +21,14 @@ export function ArrangeHome(props: {
const { destination, source, draggableId } = e
if (!destination) return
const item = itemsById[draggableId]
const section = sectionsById[draggableId]
const newHomeSections = sections.map((section) => section.id)
const newSectionIds = sections.map((section) => section.id)
newHomeSections.splice(source.index, 1)
newHomeSections.splice(destination.index, 0, item.id)
newSectionIds.splice(source.index, 1)
newSectionIds.splice(destination.index, 0, section.id)
setHomeSections(newHomeSections)
setSectionIds(newSectionIds)
}}
>
<Row className="relative max-w-md gap-4">
@ -105,29 +99,3 @@ const SectionItem = (props: {
</div>
)
}
export const getHomeItems = (groups: Group[], sections: string[]) => {
// Accommodate old home sections.
if (!isArray(sections)) sections = []
const items = [
{ label: 'Trending', id: 'score' },
{ label: 'New for you', id: 'newest' },
{ label: 'Daily movers', id: 'daily-movers' },
...groups.map((g) => ({
label: g.name,
id: g.id,
})),
]
const itemsById = keyBy(items, 'id')
const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
// Add unmentioned items to the end.
sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
return {
sections: sectionItems,
itemsById,
}
}

5
web/components/button.tsx
View File

@ -11,6 +11,7 @@ export type ColorType =
| 'gray'
| 'gradient'
| 'gray-white'
| 'highlight-blue'
export function Button(props: {
className?: string
@ -56,7 +57,9 @@ export function Button(props: {
color === 'gradient' &&
'border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
color === 'gray-white' &&
'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none',
color === 'highlight-blue' &&
'text-highlight-blue border-none shadow-none',
className
)}
disabled={disabled}

6
web/components/buttons/pill-button.tsx
View File

@ -6,9 +6,10 @@ export function PillButton(props: {
onSelect: () => void
color?: string
xs?: boolean
className?: string
children: ReactNode
}) {
const { children, selected, onSelect, color, xs } = props
const { children, selected, onSelect, color, xs, className } = props
return (
<button
@ -17,7 +18,8 @@ export function PillButton(props: {
xs ? 'text-xs' : '',
selected
? ['text-white', color ?? 'bg-greyscale-6']
: 'bg-greyscale-2 hover:bg-greyscale-3'
: 'bg-greyscale-2 hover:bg-greyscale-3',
className
)}
onClick={onSelect}
>

126
web/components/contract-search.tsx
View File

@ -14,12 +14,10 @@ import { useEffect, useLayoutEffect, useRef, useMemo, ReactNode } from 'react'
import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
import { useFollows } from 'web/hooks/use-follows'
import {
storageStore,
historyStore,
urlParamStore,
usePersistentState,
} from 'web/hooks/use-persistent-state'
import { safeLocalStorage } from 'web/lib/util/local'
import { track, trackCallback } from 'web/lib/service/analytics'
import ContractSearchFirestore from 'web/pages/contract-search-firestore'
import { useMemberGroups } from 'web/hooks/use-group'
@ -29,6 +27,7 @@ import { debounce, isEqual, sortBy } from 'lodash'
import { DEFAULT_CATEGORY_GROUPS } from 'common/categories'
import { Col } from './layout/col'
import clsx from 'clsx'
import { safeLocalStorage } from 'web/lib/util/local'
const searchClient = algoliasearch(
'GJQPAYENIF',
@ -41,7 +40,7 @@ const searchIndexName = ENV === 'DEV' ? 'dev-contracts' : 'contractsIndex'
export const SORTS = [
{ label: 'Newest', value: 'newest' },
{ label: 'Trending', value: 'score' },
{ label: `Most ${PAST_BETS}`, value: 'most-traded' },
{ label: `Most traded`, value: 'most-traded' },
{ label: '24h volume', value: '24-hour-vol' },
{ label: '24h change', value: 'prob-change-day' },
{ label: 'Last updated', value: 'last-updated' },
@ -68,14 +67,13 @@ type AdditionalFilter = {
tag?: string
excludeContractIds?: string[]
groupSlug?: string
yourBets?: boolean
followed?: boolean
}
export function ContractSearch(props: {
user?: User | null
defaultSort?: Sort
defaultFilter?: filter
defaultPill?: string
additionalFilter?: AdditionalFilter
highlightOptions?: ContractHighlightOptions
onContractClick?: (contract: Contract) => void
@ -95,11 +93,13 @@ export function ContractSearch(props: {
contracts: Contract[] | undefined,
loadMore: () => void
) => ReactNode
autoFocus?: boolean
}) {
const {
user,
defaultSort,
defaultFilter,
defaultPill,
additionalFilter,
onContractClick,
hideOrderSelector,
@ -112,6 +112,7 @@ export function ContractSearch(props: {
noControls,
maxResults,
renderContracts,
autoFocus,
} = props
const [state, setState] = usePersistentState(
@ -207,13 +208,15 @@ export function ContractSearch(props: {
className={headerClassName}
defaultSort={defaultSort}
defaultFilter={defaultFilter}
defaultPill={defaultPill}
additionalFilter={additionalFilter}
persistPrefix={persistPrefix}
hideOrderSelector={hideOrderSelector}
persistPrefix={persistPrefix ? `${persistPrefix}-controls` : undefined}
useQueryUrlParam={useQueryUrlParam}
user={user}
onSearchParametersChanged={onSearchParametersChanged}
noControls={noControls}
autoFocus={autoFocus}
/>
{renderContracts ? (
renderContracts(renderedContracts, performQuery)
@ -235,25 +238,29 @@ function ContractSearchControls(props: {
className?: string
defaultSort?: Sort
defaultFilter?: filter
defaultPill?: string
additionalFilter?: AdditionalFilter
persistPrefix?: string
hideOrderSelector?: boolean
onSearchParametersChanged: (params: SearchParameters) => void
persistPrefix?: string
useQueryUrlParam?: boolean
user?: User | null
noControls?: boolean
autoFocus?: boolean
}) {
const {
className,
defaultSort,
defaultFilter,
defaultPill,
additionalFilter,
persistPrefix,
hideOrderSelector,
onSearchParametersChanged,
persistPrefix,
useQueryUrlParam,
user,
noControls,
autoFocus,
} = props
const router = useRouter()
@ -267,19 +274,42 @@ function ContractSearchControls(props: {
}
)
const [state, setState] = usePersistentState(
{
sort: defaultSort ?? 'score',
filter: defaultFilter ?? 'open',
pillFilter: null as string | null,
},
!persistPrefix
const sortKey = `${persistPrefix}-search-sort`
const savedSort = safeLocalStorage()?.getItem(sortKey)
const [sort, setSort] = usePersistentState(
savedSort ?? defaultSort ?? 'score',
!useQueryUrlParam
? undefined
: {
key: `${persistPrefix}-params`,
store: storageStore(safeLocalStorage()),
key: 's',
store: urlParamStore(router),
}
)
const [filter, setFilter] = usePersistentState(
defaultFilter ?? 'open',
!useQueryUrlParam
? undefined
: {
key: 'f',
store: urlParamStore(router),
}
)
const [pill, setPill] = usePersistentState(
defaultPill ?? '',
!useQueryUrlParam
? undefined
: {
key: 'p',
store: urlParamStore(router),
}
)
useEffect(() => {
if (persistPrefix && sort) {
safeLocalStorage()?.setItem(sortKey, sort as string)
}
}, [persistPrefix, query, sort, sortKey])
const follows = useFollows(user?.id)
const memberGroups = (useMemberGroups(user?.id) ?? []).filter(
@ -319,11 +349,6 @@ function ContractSearchControls(props: {
additionalFilter?.groupSlug
? `groupLinks.slug:${additionalFilter.groupSlug}`
: '',
additionalFilter?.yourBets && user
? // Show contracts bet on by the user
`uniqueBettorIds:${user.id}`
: '',
...(additionalFilter?.followed ? personalFilters : []),
]
const facetFilters = query
? additionalFilters
@ -331,31 +356,25 @@ function ContractSearchControls(props: {
...additionalFilters,
additionalFilter ? '' : 'visibility:public',
state.filter === 'open' ? 'isResolved:false' : '',
state.filter === 'closed' ? 'isResolved:false' : '',
state.filter === 'resolved' ? 'isResolved:true' : '',
filter === 'open' ? 'isResolved:false' : '',
filter === 'closed' ? 'isResolved:false' : '',
filter === 'resolved' ? 'isResolved:true' : '',
state.pillFilter &&
state.pillFilter !== 'personal' &&
state.pillFilter !== 'your-bets'
? `groupLinks.slug:${state.pillFilter}`
pill && pill !== 'personal' && pill !== 'your-bets'
? `groupLinks.slug:${pill}`
: '',
...(state.pillFilter === 'personal' ? personalFilters : []),
state.pillFilter === 'your-bets' && user
...(pill === 'personal' ? personalFilters : []),
pill === 'your-bets' && user
? // Show contracts bet on by the user
`uniqueBettorIds:${user.id}`
: '',
].filter((f) => f)
const openClosedFilter =
state.filter === 'open'
? 'open'
: state.filter === 'closed'
? 'closed'
: undefined
filter === 'open' ? 'open' : filter === 'closed' ? 'closed' : undefined
const selectPill = (pill: string | null) => () => {
setState({ ...state, pillFilter: pill })
setPill(pill ?? '')
track('select search category', { category: pill ?? 'all' })
}
@ -364,34 +383,32 @@ function ContractSearchControls(props: {
}
const selectFilter = (newFilter: filter) => {
if (newFilter === state.filter) return
setState({ ...state, filter: newFilter })
if (newFilter === filter) return
setFilter(newFilter)
track('select search filter', { filter: newFilter })
}
const selectSort = (newSort: Sort) => {
if (newSort === state.sort) return
setState({ ...state, sort: newSort })
if (newSort === sort) return
setSort(newSort)
track('select search sort', { sort: newSort })
}
useEffect(() => {
onSearchParametersChanged({
query: query,
sort: state.sort,
sort: sort as Sort,
openClosedFilter: openClosedFilter,
facetFilters: facetFilters,
})
}, [query, state.sort, openClosedFilter, JSON.stringify(facetFilters)])
}, [query, sort, openClosedFilter, JSON.stringify(facetFilters)])
if (noControls) {
return <></>
}
return (
<Col
className={clsx('bg-base-200 sticky top-0 z-20 gap-3 pb-3', className)}
>
<Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
<Row className="gap-1 sm:gap-2">
<input
type="text"
@ -400,11 +417,12 @@ function ContractSearchControls(props: {
onBlur={trackCallback('search', { query: query })}
placeholder={'Search'}
className="input input-bordered w-full"
autoFocus={autoFocus}
/>
{!query && (
<select
className="select select-bordered"
value={state.filter}
value={filter}
onChange={(e) => selectFilter(e.target.value as filter)}
>
<option value="open">Open</option>
@ -416,7 +434,7 @@ function ContractSearchControls(props: {
{!hideOrderSelector && !query && (
<select
className="select select-bordered"
value={state.sort}
value={sort}
onChange={(e) => selectSort(e.target.value as Sort)}
>
{SORTS.map((option) => (
@ -430,16 +448,12 @@ function ContractSearchControls(props: {
{!additionalFilter && !query && (
<Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
<PillButton
key={'all'}
selected={state.pillFilter === undefined}
onSelect={selectPill(null)}
>
<PillButton key={'all'} selected={!pill} onSelect={selectPill(null)}>
All
</PillButton>
<PillButton
key={'personal'}
selected={state.pillFilter === 'personal'}
selected={pill === 'personal'}
onSelect={selectPill('personal')}
>
{user ? 'For you' : 'Featured'}
@ -448,7 +462,7 @@ function ContractSearchControls(props: {
{user && (
<PillButton
key={'your-bets'}
selected={state.pillFilter === 'your-bets'}
selected={pill === 'your-bets'}
onSelect={selectPill('your-bets')}
>
Your {PAST_BETS}
@ -459,7 +473,7 @@ function ContractSearchControls(props: {
return (
<PillButton
key={slug}
selected={state.pillFilter === slug}
selected={pill === slug}
onSelect={selectPill(slug)}
>
{name}

4
web/components/contract-select-modal.tsx
View File

@ -81,7 +81,7 @@ export function SelectMarketsModal(props: {
</div>
)}
<div className="overflow-y-auto sm:px-8">
<div className="overflow-y-auto px-2 sm:px-8">
<ContractSearch
hideOrderSelector
onContractClick={addContract}
@ -96,7 +96,7 @@ export function SelectMarketsModal(props: {
'!bg-indigo-100 outline outline-2 outline-indigo-300',
}}
additionalFilter={{}} /* hide pills */
headerClassName="bg-white"
headerClassName="bg-white sticky"
{...contractSearchOptions}
/>
</div>

364
web/components/contract/contract-details.tsx
View File

@ -1,9 +1,4 @@
import {
ClockIcon,
DatabaseIcon,
PencilIcon,
UserGroupIcon,
} from '@heroicons/react/outline'
import { ClockIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import { Editor } from '@tiptap/react'
import dayjs from 'dayjs'
@ -16,9 +11,8 @@ import { DateTimeTooltip } from '../datetime-tooltip'
import { fromNow } from 'web/lib/util/time'
import { Avatar } from '../avatar'
import { useState } from 'react'
import { ContractInfoDialog } from './contract-info-dialog'
import NewContractBadge from '../new-contract-badge'
import { UserFollowButton } from '../follow-button'
import { MiniUserFollowButton } from '../follow-button'
import { DAY_MS } from 'common/util/time'
import { useUser } from 'web/hooks/use-user'
import { exhibitExts } from 'common/util/parse'
@ -33,7 +27,11 @@ import { contractMetrics } from 'common/contract-details'
import { UserLink } from 'web/components/user-link'
import { FeaturedContractBadge } from 'web/components/contract/featured-contract-badge'
import { Tooltip } from 'web/components/tooltip'
import { useWindowSize } from 'web/hooks/use-window-size'
import { ExtraContractActionsRow } from './extra-contract-actions-row'
import { PlusCircleIcon } from '@heroicons/react/solid'
import { GroupLink } from 'common/group'
import { Subtitle } from '../subtitle'
import { useIsMobile } from 'web/hooks/use-is-mobile'
export type ShowTime = 'resolve-date' | 'close-date'
@ -116,89 +114,137 @@ export function ContractDetails(props: {
disabled?: boolean
}) {
const { contract, disabled } = props
const {
closeTime,
creatorName,
creatorUsername,
creatorId,
creatorAvatarUrl,
resolutionTime,
} = contract
const { volumeLabel, resolvedDate } = contractMetrics(contract)
const user = useUser()
const isCreator = user?.id === creatorId
const [open, setOpen] = useState(false)
const { width } = useWindowSize()
const isMobile = (width ?? 0) < 600
const groupToDisplay = getGroupLinkToDisplay(contract)
const groupInfo = groupToDisplay ? (
<Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
<a
className={clsx(
linkClass,
'flex flex-row items-center truncate pr-0 sm:pr-2',
isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
)}
>
<UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
<span className="items-center truncate">{groupToDisplay.name}</span>
</a>
</Link>
) : (
<Button
size={'xs'}
className={'max-w-[200px] pr-2'}
color={'gray-white'}
onClick={() => !groupToDisplay && setOpen(true)}
>
<Row>
<UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
<span className="truncate">No Group</span>
</Row>
</Button>
)
const isMobile = useIsMobile()
return (
<Row className="flex-1 flex-wrap items-center gap-2 text-sm text-gray-500 md:gap-x-4 md:gap-y-2">
<Row className="items-center gap-2">
<Avatar
username={creatorUsername}
avatarUrl={creatorAvatarUrl}
noLink={disabled}
size={6}
/>
{disabled ? (
creatorName
) : (
<UserLink
className="whitespace-nowrap"
name={creatorName}
username={creatorUsername}
short={isMobile}
/>
)}
{!disabled && <UserFollowButton userId={creatorId} small />}
<Col>
<Row className="justify-between">
<MarketSubheader contract={contract} disabled={disabled} />
<div className="mt-0">
<ExtraContractActionsRow contract={contract} />
</div>
</Row>
<Row>
{disabled ? (
groupInfo
) : !groupToDisplay && !user ? (
<div />
) : (
{/* GROUPS */}
{isMobile && (
<div className="mt-2">
<MarketGroups contract={contract} disabled={disabled} />
</div>
)}
</Col>
)
}
export function MarketSubheader(props: {
contract: Contract
disabled?: boolean
}) {
const { contract, disabled } = props
const { creatorName, creatorUsername, creatorId, creatorAvatarUrl } = contract
const { resolvedDate } = contractMetrics(contract)
const user = useUser()
const isCreator = user?.id === creatorId
const isMobile = useIsMobile()
return (
<Row>
<Avatar
username={creatorUsername}
avatarUrl={creatorAvatarUrl}
noLink={disabled}
size={9}
className="mr-1.5"
/>
{!disabled && (
<div className="absolute mt-3 ml-[11px]">
<MiniUserFollowButton userId={creatorId} />
</div>
)}
<Col className="text-greyscale-6 ml-2 flex-1 flex-wrap text-sm">
<Row className="w-full justify-between ">
{disabled ? (
creatorName
) : (
<UserLink
className="my-auto whitespace-nowrap"
name={creatorName}
username={creatorUsername}
short={isMobile}
/>
)}
</Row>
<Row className="text-2xs text-greyscale-4 gap-2 sm:text-xs">
<CloseOrResolveTime
contract={contract}
resolvedDate={resolvedDate}
isCreator={isCreator}
/>
{!isMobile && (
<MarketGroups contract={contract} disabled={disabled} />
)}
</Row>
</Col>
</Row>
)
}
export function CloseOrResolveTime(props: {
contract: Contract
resolvedDate: any
isCreator: boolean
}) {
const { contract, resolvedDate, isCreator } = props
const { resolutionTime, closeTime } = contract
if (!!closeTime || !!resolvedDate) {
return (
<Row className="select-none items-center gap-1">
{resolvedDate && resolutionTime ? (
<>
<DateTimeTooltip text="Market resolved:" time={resolutionTime}>
<Row>
<div>resolved&nbsp;</div>
{resolvedDate}
</Row>
</DateTimeTooltip>
</>
) : null}
{!resolvedDate && closeTime && (
<Row>
{groupInfo}
{user && groupToDisplay && (
<Button
size={'xs'}
color={'gray-white'}
onClick={() => setOpen(!open)}
>
<PencilIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
</Button>
)}
{dayjs().isBefore(closeTime) && <div>closes&nbsp;</div>}
{!dayjs().isBefore(closeTime) && <div>closed&nbsp;</div>}
<EditableCloseDate
closeTime={closeTime}
contract={contract}
isCreator={isCreator ?? false}
/>
</Row>
)}
</Row>
)
} else return <></>
}
export function MarketGroups(props: {
contract: Contract
disabled?: boolean
}) {
const [open, setOpen] = useState(false)
const user = useUser()
const { contract, disabled } = props
const groupToDisplay = getGroupLinkToDisplay(contract)
return (
<>
<Row className="items-center gap-1">
<GroupDisplay groupToDisplay={groupToDisplay} />
{!disabled && user && (
<button
className="text-greyscale-4 hover:text-greyscale-3"
onClick={() => setOpen(true)}
>
<PlusCircleIcon className="h-[18px]" />
</button>
)}
</Row>
<Modal open={open} setOpen={setOpen} size={'md'}>
<Col
className={
@ -208,45 +254,7 @@ export function ContractDetails(props: {
<ContractGroupsList contract={contract} user={user} />
</Col>
</Modal>
{(!!closeTime || !!resolvedDate) && (
<Row className="hidden items-center gap-1 md:inline-flex">
{resolvedDate && resolutionTime ? (
<>
<ClockIcon className="h-5 w-5" />
<DateTimeTooltip text="Market resolved:" time={resolutionTime}>
{resolvedDate}
</DateTimeTooltip>
</>
) : null}
{!resolvedDate && closeTime && user && (
<>
<ClockIcon className="h-5 w-5" />
<EditableCloseDate
closeTime={closeTime}
contract={contract}
isCreator={isCreator ?? false}
/>
</>
)}
</Row>
)}
{user && (
<>
<Row className="hidden items-center gap-1 md:inline-flex">
<DatabaseIcon className="h-5 w-5" />
<div className="whitespace-nowrap">{volumeLabel}</div>
</Row>
{!disabled && (
<ContractInfoDialog
contract={contract}
className={'hidden md:inline-flex'}
/>
)}
</>
)}
</Row>
</>
)
}
@ -287,12 +295,12 @@ export function ExtraMobileContractDetails(props: {
!resolvedDate &&
closeTime && (
<Col className={'items-center text-sm text-gray-500'}>
<Row className={'text-gray-400'}>Closes&nbsp;</Row>
<EditableCloseDate
closeTime={closeTime}
contract={contract}
isCreator={creatorId === user?.id}
/>
<Row className={'text-gray-400'}>Ends</Row>
</Col>
)
)}
@ -312,6 +320,24 @@ export function ExtraMobileContractDetails(props: {
)
}
export function GroupDisplay(props: { groupToDisplay?: GroupLink | null }) {
const { groupToDisplay } = props
if (groupToDisplay) {
return (
<Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
<a className="bg-greyscale-4 hover:bg-greyscale-3 max-w-[140px] truncate rounded-full px-2 text-xs text-white sm:max-w-[250px]">
{groupToDisplay.name}
</a>
</Link>
)
} else
return (
<div className="bg-greyscale-4 truncate rounded-full px-2 text-xs text-white">
No Group
</div>
)
}
function EditableCloseDate(props: {
closeTime: number
contract: Contract
@ -363,47 +389,59 @@ function EditableCloseDate(props: {
return (
<>
{isEditingCloseTime ? (
<Row className="z-10 mr-2 w-full shrink-0 items-center gap-1">
<input
type="date"
className="input input-bordered shrink-0"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value)}
min={Date.now()}
value={closeDate}
/>
<input
type="time"
className="input input-bordered shrink-0"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseHoursMinutes(e.target.value)}
min="00:00"
value={closeHoursMinutes}
/>
<Button size={'xs'} color={'blue'} onClick={onSave}>
<Modal
size="sm"
open={isEditingCloseTime}
setOpen={setIsEditingCloseTime}
position="top"
>
<Col className="rounded bg-white px-8 pb-8">
<Subtitle text="Edit Close Date" />
<Row className="z-10 mr-2 w-full shrink-0 flex-wrap items-center gap-2">
<input
type="date"
className="input input-bordered w-full shrink-0 sm:w-fit"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value)}
min={Date.now()}
value={closeDate}
/>
<input
type="time"
className="input input-bordered w-full shrink-0 sm:w-max"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseHoursMinutes(e.target.value)}
min="00:00"
value={closeHoursMinutes}
/>
</Row>
<Button
className="mt-2"
size={'xs'}
color={'indigo'}
onClick={onSave}
>
Done
</Button>
</Row>
) : (
<DateTimeTooltip
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
time={closeTime}
</Col>
</Modal>
<DateTimeTooltip
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
time={closeTime}
>
<span
className={isCreator ? 'cursor-pointer' : ''}
onClick={() => isCreator && setIsEditingCloseTime(true)}
>
<span
className={isCreator ? 'cursor-pointer' : ''}
onClick={() => isCreator && setIsEditingCloseTime(true)}
>
{isSameDay ? (
<span className={'capitalize'}> {fromNow(closeTime)}</span>
) : isSameYear ? (
dayJsCloseTime.format('MMM D')
) : (
dayJsCloseTime.format('MMM D, YYYY')
)}
</span>
</DateTimeTooltip>
)}
{isSameDay ? (
<span className={'capitalize'}> {fromNow(closeTime)}</span>
) : isSameYear ? (
dayJsCloseTime.format('MMM D')
) : (
dayJsCloseTime.format('MMM D, YYYY')
)}
</span>
</DateTimeTooltip>
</>
)
}

32
web/components/contract/contract-info-dialog.tsx
View File

@ -2,6 +2,7 @@ import { DotsHorizontalIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import dayjs from 'dayjs'
import { useState } from 'react'
import { capitalize } from 'lodash'
import { Contract } from 'common/contract'
import { formatMoney } from 'common/util/format'
@ -19,7 +20,7 @@ import ShortToggle from '../widgets/short-toggle'
import { DuplicateContractButton } from '../copy-contract-button'
import { Row } from '../layout/row'
import { BETTORS } from 'common/user'
import { capitalize } from 'lodash'
import { Button } from '../button'
export const contractDetailsButtonClassName =
'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
@ -39,10 +40,16 @@ export function ContractInfoDialog(props: {
const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a')
const { createdTime, closeTime, resolutionTime, mechanism, outcomeType, id } =
contract
const {
createdTime,
closeTime,
resolutionTime,
uniqueBettorCount,
mechanism,
outcomeType,
id,
} = contract
const bettorsCount = contract.uniqueBettorCount ?? 'Unknown'
const typeDisplay =
outcomeType === 'BINARY'
? 'YES / NO'
@ -69,19 +76,21 @@ export function ContractInfoDialog(props: {
return (
<>
<button
<Button
size="sm"
color="gray-white"
className={clsx(contractDetailsButtonClassName, className)}
onClick={() => setOpen(true)}
>
<DotsHorizontalIcon
className={clsx('h-6 w-6 flex-shrink-0')}
className={clsx('h-5 w-5 flex-shrink-0')}
aria-hidden="true"
/>
</button>
</Button>
<Modal open={open} setOpen={setOpen}>
<Col className="gap-4 rounded bg-white p-6">
<Title className="!mt-0 !mb-0" text="Market info" />
<Title className="!mt-0 !mb-0" text="This Market" />
<table className="table-compact table-zebra table w-full text-gray-500">
<tbody>
@ -131,14 +140,9 @@ export function ContractInfoDialog(props: {
<td>{formatMoney(contract.volume)}</td>
</tr>
{/* <tr>
<td>Creator earnings</td>
<td>{formatMoney(contract.collectedFees.creatorFee)}</td>
</tr> */}
<tr>
<td>{capitalize(BETTORS)}</td>
<td>{bettorsCount}</td>
<td>{uniqueBettorCount ?? '0'}</td>
</tr>
<tr>

12
web/components/contract/contract-overview.tsx
View File

@ -25,11 +25,11 @@ import {
NumericContract,
PseudoNumericContract,
} from 'common/contract'
import { ContractDetails, ExtraMobileContractDetails } from './contract-details'
import { ContractDetails } from './contract-details'
import { NumericGraph } from './numeric-graph'
const OverviewQuestion = (props: { text: string }) => (
<Linkify className="text-2xl text-indigo-700 md:text-3xl" text={props.text} />
<Linkify className="text-lg text-indigo-700 sm:text-2xl" text={props.text} />
)
const BetWidget = (props: { contract: CPMMContract }) => {
@ -73,7 +73,7 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
const { contract, bets } = props
return (
<Col className="gap-1 md:gap-2">
<Col className="gap-3 px-2 sm:gap-4">
<Col className="gap-1 px-2">
<ContractDetails contract={contract} />
<Row className="justify-between gap-4">
<OverviewQuestion text={contract.question} />
@ -85,7 +85,6 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
</Row>
<Row className="items-center justify-between gap-4 xl:hidden">
<BinaryResolutionOrChance contract={contract} />
<ExtraMobileContractDetails contract={contract} />
{tradingAllowed(contract) && (
<BetWidget contract={contract as CPMMBinaryContract} />
)}
@ -113,10 +112,6 @@ const ChoiceOverview = (props: {
</Col>
<Col className={'mb-1 gap-y-2'}>
<AnswersGraph contract={contract} bets={[...bets].reverse()} />
<ExtraMobileContractDetails
contract={contract}
forceShowVolume={true}
/>
</Col>
</Col>
)
@ -140,7 +135,6 @@ const PseudoNumericOverview = (props: {
</Row>
<Row className="items-center justify-between gap-4 xl:hidden">
<PseudoNumericResolutionOrExpectation contract={contract} />
<ExtraMobileContractDetails contract={contract} />
{tradingAllowed(contract) && <BetWidget contract={contract} />}
</Row>
</Col>

9
web/components/contract/contract-tabs.tsx
View File

@ -23,6 +23,7 @@ import {
DEV_HOUSE_LIQUIDITY_PROVIDER_ID,
HOUSE_LIQUIDITY_PROVIDER_ID,
} from 'common/antes'
import { useIsMobile } from 'web/hooks/use-is-mobile'
export function ContractTabs(props: {
contract: Contract
@ -33,6 +34,7 @@ export function ContractTabs(props: {
}) {
const { contract, user, bets, tips } = props
const { outcomeType } = contract
const isMobile = useIsMobile()
const lps = useLiquidity(contract.id)
@ -131,7 +133,12 @@ export function ContractTabs(props: {
},
...(!user || !userBets?.length
? []
: [{ title: `Your ${PAST_BETS}`, content: yourTrades }]),
: [
{
title: isMobile ? `You` : `Your ${PAST_BETS}`,
content: yourTrades,
},
]),
]}
/>
{!user ? (

1
web/components/contract/contracts-grid.tsx
View File

@ -110,6 +110,7 @@ export function CreatorContractsList(props: {
return (
<ContractSearch
headerClassName="sticky"
user={user}
defaultSort="newest"
defaultFilter="all"

57
web/components/contract/extra-contract-actions-row.tsx
View File

@ -11,38 +11,29 @@ import { FollowMarketButton } from 'web/components/follow-market-button'
import { LikeMarketButton } from 'web/components/contract/like-market-button'
import { ContractInfoDialog } from 'web/components/contract/contract-info-dialog'
import { Col } from 'web/components/layout/col'
import { withTracking } from 'web/lib/service/analytics'
import { CreateChallengeModal } from 'web/components/challenges/create-challenge-modal'
import { CHALLENGES_ENABLED } from 'common/challenge'
import ChallengeIcon from 'web/lib/icons/challenge-icon'
export function ExtraContractActionsRow(props: { contract: Contract }) {
const { contract } = props
const { outcomeType, resolution } = contract
const user = useUser()
const [isShareOpen, setShareOpen] = useState(false)
const [openCreateChallengeModal, setOpenCreateChallengeModal] =
useState(false)
const showChallenge =
user && outcomeType === 'BINARY' && !resolution && CHALLENGES_ENABLED
return (
<Row className={'mt-0.5 justify-around sm:mt-2 lg:justify-start'}>
<Row>
<FollowMarketButton contract={contract} user={user} />
{user?.id !== contract.creatorId && (
<LikeMarketButton contract={contract} user={user} />
)}
<Button
size="lg"
size="sm"
color="gray-white"
className={'flex'}
onClick={() => {
setShareOpen(true)
}}
>
<Col className={'items-center sm:flex-row'}>
<ShareIcon
className={clsx('h-[24px] w-5 sm:mr-2')}
aria-hidden="true"
/>
<span>Share</span>
</Col>
<Row>
<ShareIcon className={clsx('h-5 w-5')} aria-hidden="true" />
</Row>
<ShareModal
isOpen={isShareOpen}
setOpen={setShareOpen}
@ -50,35 +41,7 @@ export function ExtraContractActionsRow(props: { contract: Contract }) {
user={user}
/>
</Button>
{showChallenge && (
<Button
size="lg"
color="gray-white"
className="max-w-xs self-center"
onClick={withTracking(
() => setOpenCreateChallengeModal(true),
'click challenge button'
)}
>
<Col className="items-center sm:flex-row">
<ChallengeIcon className="mx-auto h-[24px] w-5 text-gray-500 sm:mr-2" />
<span>Challenge</span>
</Col>
<CreateChallengeModal
isOpen={openCreateChallengeModal}
setOpen={setOpenCreateChallengeModal}
user={user}
contract={contract}
/>
</Button>
)}
<FollowMarketButton contract={contract} user={user} />
{user?.id !== contract.creatorId && (
<LikeMarketButton contract={contract} user={user} />
)}
<Col className={'justify-center md:hidden'}>
<Col className={'justify-center'}>
<ContractInfoDialog contract={contract} />
</Col>
</Row>

20
web/components/contract/like-market-button.tsx
View File

@ -38,15 +38,16 @@ export function LikeMarketButton(props: {
return (
<Button
size={'lg'}
size={'sm'}
className={'max-w-xs self-center'}
color={'gray-white'}
onClick={onLike}
>
<Col className={'items-center sm:flex-row'}>
<Col className={'relative items-center sm:flex-row'}>
<HeartIcon
className={clsx(
'h-[24px] w-5 sm:mr-2',
'h-5 w-5 sm:h-6 sm:w-6',
totalTipped > 0 ? 'mr-2' : '',
user &&
(userLikedContractIds?.includes(contract.id) ||
(!likes && contract.likedByUserIds?.includes(user.id)))
@ -54,7 +55,18 @@ export function LikeMarketButton(props: {
: ''
)}
/>
Tip {totalTipped > 0 ? `(${formatMoney(totalTipped)})` : ''}
{totalTipped > 0 && (
<div
className={clsx(
'bg-greyscale-6 absolute ml-3.5 mt-2 h-4 w-4 rounded-full align-middle text-white sm:mt-3 sm:h-5 sm:w-5 sm:px-1',
totalTipped > 99
? 'text-[0.4rem] sm:text-[0.5rem]'
: 'sm:text-2xs text-[0.5rem]'
)}
>
{totalTipped}
</div>
)}
</Col>
</Button>
)

49
web/components/contract/prob-change-table.tsx
View File

@ -11,8 +11,9 @@ export function ProbChangeTable(props: {
changes:
| { positiveChanges: CPMMContract[]; negativeChanges: CPMMContract[] }
| undefined
full?: boolean
}) {
const { changes } = props
const { changes, full } = props
if (!changes) return <LoadingIndicator />
@ -24,7 +25,10 @@ export function ProbChangeTable(props: {
negativeChanges.findIndex((c) => c.probChanges.day > -threshold) + 1
)
const maxRows = Math.min(positiveChanges.length, negativeChanges.length)
const rows = Math.min(3, Math.min(maxRows, countOverThreshold))
const rows = Math.min(
full ? Infinity : 3,
Math.min(maxRows, countOverThreshold)
)
const filteredPositiveChanges = positiveChanges.slice(0, rows)
const filteredNegativeChanges = negativeChanges.slice(0, rows)
@ -35,40 +39,33 @@ export function ProbChangeTable(props: {
<Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
<Col className="flex-1 divide-y">
{filteredPositiveChanges.map((contract) => (
<Row className="items-center hover:bg-gray-100">
<ProbChange
className="p-4 text-right text-xl"
contract={contract}
/>
<SiteLink
className="p-4 pl-2 font-semibold text-indigo-700"
href={contractPath(contract)}
>
<span className="line-clamp-2">{contract.question}</span>
</SiteLink>
</Row>
<ProbChangeRow key={contract.id} contract={contract} />
))}
</Col>
<Col className="flex-1 divide-y">
{filteredNegativeChanges.map((contract) => (
<Row className="items-center hover:bg-gray-100">
<ProbChange
className="p-4 text-right text-xl"
contract={contract}
/>
<SiteLink
className="p-4 pl-2 font-semibold text-indigo-700"
href={contractPath(contract)}
>
<span className="line-clamp-2">{contract.question}</span>
</SiteLink>
</Row>
<ProbChangeRow key={contract.id} contract={contract} />
))}
</Col>
</Col>
)
}
function ProbChangeRow(props: { contract: CPMMContract }) {
const { contract } = props
return (
<Row className="items-center hover:bg-gray-100">
<ProbChange className="p-4 text-right text-xl" contract={contract} />
<SiteLink
className="p-4 pl-2 font-semibold text-indigo-700"
href={contractPath(contract)}
>
<span className="line-clamp-2">{contract.question}</span>
</SiteLink>
</Row>
)
}
export function ProbChange(props: {
contract: CPMMContract
className?: string

53
web/components/editor/contract-mention-suggestion.ts
View File

@ -1,19 +1,16 @@
import type { MentionOptions } from '@tiptap/extension-mention'
import { ReactRenderer } from '@tiptap/react'
import { searchInAny } from 'common/util/parse'
import { orderBy } from 'lodash'
import tippy from 'tippy.js'
import { getCachedContracts } from 'web/hooks/use-contracts'
import { MentionList } from './contract-mention-list'
import { PluginKey } from 'prosemirror-state'
import { makeMentionRender } from './mention-suggestion'
type Suggestion = MentionOptions['suggestion']
const beginsWith = (text: string, query: string) =>
text.toLocaleLowerCase().startsWith(query.toLocaleLowerCase())
// copied from https://tiptap.dev/api/nodes/mention#usage
// TODO: merge with mention-suggestion.ts?
export const contractMentionSuggestion: Suggestion = {
char: '%',
allowSpaces: true,
@ -26,51 +23,5 @@ export const contractMentionSuggestion: Suggestion = {
[(c) => [c.question].some((s) => beginsWith(s, query))],
['desc', 'desc']
).slice(0, 5),
render: () => {
let component: ReactRenderer
let popup: ReturnType<typeof tippy>
return {
onStart: (props) => {
component = new ReactRenderer(MentionList, {
props,
editor: props.editor,
})
if (!props.clientRect) {
return
}
popup = tippy('body', {
getReferenceClientRect: props.clientRect as any,
appendTo: () => document.body,
content: component?.element,
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'bottom-start',
})
},
onUpdate(props) {
component?.updateProps(props)
if (!props.clientRect) {
return
}
popup?.[0].setProps({
getReferenceClientRect: props.clientRect as any,
})
},
onKeyDown(props) {
if (props.event.key === 'Escape') {
popup?.[0].hide()
return true
}
return (component?.ref as any)?.onKeyDown(props)
},
onExit() {
popup?.[0].destroy()
component?.destroy()
},
}
},
render: makeMentionRender(MentionList),
}

1
web/components/editor/contract-mention.tsx
View File

@ -31,6 +31,7 @@ const ContractMentionComponent = (props: any) => {
* https://tiptap.dev/guide/node-views/react#render-a-react-component
*/
export const DisplayContractMention = Mention.extend({
name: 'contract-mention',
parseHTML: () => [{ tag: name }],
renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
addNodeView: () =>

25
web/components/editor/mention-suggestion.ts
View File

@ -5,6 +5,7 @@ import { orderBy } from 'lodash'
import tippy from 'tippy.js'
import { getCachedUsers } from 'web/hooks/use-users'
import { MentionList } from './mention-list'
type Render = Suggestion['render']
type Suggestion = MentionOptions['suggestion']
@ -24,12 +25,16 @@ export const mentionSuggestion: Suggestion = {
],
['desc', 'desc']
).slice(0, 5),
render: () => {
render: makeMentionRender(MentionList),
}
export function makeMentionRender(mentionList: any): Render {
return () => {
let component: ReactRenderer
let popup: ReturnType<typeof tippy>
return {
onStart: (props) => {
component = new ReactRenderer(MentionList, {
component = new ReactRenderer(mentionList, {
props,
editor: props.editor,
})
@ -59,10 +64,16 @@ export const mentionSuggestion: Suggestion = {
})
},
onKeyDown(props) {
if (props.event.key === 'Escape') {
popup?.[0].hide()
return true
}
if (props.event.key)
if (
props.event.key === 'Escape' ||
// Also break out of the mention if the tooltip isn't visible
(props.event.key === 'Enter' && !popup?.[0].state.isShown)
) {
popup?.[0].destroy()
component?.destroy()
return false
}
return (component?.ref as any)?.onKeyDown(props)
},
onExit() {
@ -70,5 +81,5 @@ export const mentionSuggestion: Suggestion = {
component?.destroy()
},
}
},
}
}

67
web/components/follow-button.tsx
View File

@ -1,4 +1,6 @@
import { CheckCircleIcon, PlusCircleIcon } from '@heroicons/react/solid'
import clsx from 'clsx'
import { useEffect, useRef, useState } from 'react'
import { useFollows } from 'web/hooks/use-follows'
import { useUser } from 'web/hooks/use-user'
import { follow, unfollow } from 'web/lib/firebase/users'
@ -54,18 +56,73 @@ export function FollowButton(props: {
export function UserFollowButton(props: { userId: string; small?: boolean }) {
const { userId, small } = props
const currentUser = useUser()
const following = useFollows(currentUser?.id)
const user = useUser()
const following = useFollows(user?.id)
const isFollowing = following?.includes(userId)
if (!currentUser || currentUser.id === userId) return null
if (!user || user.id === userId) return null
return (
<FollowButton
isFollowing={isFollowing}
onFollow={() => follow(currentUser.id, userId)}
onUnfollow={() => unfollow(currentUser.id, userId)}
onFollow={() => follow(user.id, userId)}
onUnfollow={() => unfollow(user.id, userId)}
small={small}
/>
)
}
export function MiniUserFollowButton(props: { userId: string }) {
const { userId } = props
const user = useUser()
const following = useFollows(user?.id)
const isFollowing = following?.includes(userId)
const isFirstRender = useRef(true)
const [justFollowed, setJustFollowed] = useState(false)
useEffect(() => {
if (isFirstRender.current) {
if (isFollowing != undefined) {
isFirstRender.current = false
}
return
}
if (isFollowing) {
setJustFollowed(true)
setTimeout(() => {
setJustFollowed(false)
}, 1000)
}
}, [isFollowing])
if (justFollowed) {
return (
<CheckCircleIcon
className={clsx(
'text-highlight-blue ml-3 mt-2 h-5 w-5 rounded-full bg-white sm:mr-2'
)}
aria-hidden="true"
/>
)
}
if (
!user ||
user.id === userId ||
isFollowing ||
!user ||
isFollowing === undefined
)
return null
return (
<>
<button onClick={withTracking(() => follow(user.id, userId), 'follow')}>
<PlusCircleIcon
className={clsx(
'text-highlight-blue hover:text-hover-blue mt-2 ml-3 h-5 w-5 rounded-full bg-white sm:mr-2'
)}
aria-hidden="true"
/>
</button>
</>
)
}

16
web/components/follow-market-button.tsx
View File

@ -25,7 +25,7 @@ export const FollowMarketButton = (props: {
return (
<Button
size={'lg'}
size={'sm'}
color={'gray-white'}
onClick={async () => {
if (!user) return firebaseLogin()
@ -56,13 +56,19 @@ export const FollowMarketButton = (props: {
>
{followers?.includes(user?.id ?? 'nope') ? (
<Col className={'items-center gap-x-2 sm:flex-row'}>
<EyeOffIcon className={clsx('h-6 w-6')} aria-hidden="true" />
Unwatch
<EyeOffIcon
className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
aria-hidden="true"
/>
{/* Unwatch */}
</Col>
) : (
<Col className={'items-center gap-x-2 sm:flex-row'}>
<EyeIcon className={clsx('h-6 w-6')} aria-hidden="true" />
Watch
<EyeIcon
className={clsx('h-5 w-5 sm:h-6 sm:w-6')}
aria-hidden="true"
/>
{/* Watch */}
</Col>
)}
<WatchMarketModal

37
web/components/nav/nav-bar.tsx → web/components/nav/bottom-nav-bar.tsx
View File

@ -17,11 +17,14 @@ import { useRouter } from 'next/router'
import NotificationsIcon from 'web/components/notifications-icon'
import { useIsIframe } from 'web/hooks/use-is-iframe'
import { trackCallback } from 'web/lib/service/analytics'
import { User } from 'common/user'
import { PAST_BETS } from 'common/user'
function getNavigation() {
return [
{ name: 'Home', href: '/home', icon: HomeIcon },
{ name: 'Search', href: '/search', icon: SearchIcon },
{
name: 'Notifications',
href: `/notifications`,
@ -32,9 +35,24 @@ function getNavigation() {
const signedOutNavigation = [
{ name: 'Home', href: '/', icon: HomeIcon },
{ name: 'Explore', href: '/home', icon: SearchIcon },
{ name: 'Explore', href: '/search', icon: SearchIcon },
]
export const userProfileItem = (user: User) => ({
name: formatMoney(user.balance),
trackingEventName: 'profile',
href: `/${user.username}?tab=${PAST_BETS}`,
icon: () => (
<Avatar
className="mx-auto my-1"
size="xs"
username={user.username}
avatarUrl={user.avatarUrl}
noLink
/>
),
})
// From https://codepen.io/chris__sev/pen/QWGvYbL
export function BottomNavBar() {
const [sidebarOpen, setSidebarOpen] = useState(false)
@ -62,20 +80,7 @@ export function BottomNavBar() {
<NavBarItem
key={'profile'}
currentPage={currentPage}
item={{
name: formatMoney(user.balance),
trackingEventName: 'profile',
href: `/${user.username}?tab=${PAST_BETS}`,
icon: () => (
<Avatar
className="mx-auto my-1"
size="xs"
username={user.username}
avatarUrl={user.avatarUrl}
noLink
/>
),
}}
item={userProfileItem(user)}
/>
)}
<div
@ -99,7 +104,7 @@ function NavBarItem(props: { item: Item; currentPage: string }) {
const track = trackCallback(`navbar: ${item.trackingEventName ?? item.name}`)
return (
<Link href={item.href}>
<Link href={item.href ?? '#'}>
<a
className={clsx(
'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',

94
web/components/nav/group-nav-bar.tsx Normal file
View File

@ -0,0 +1,94 @@
import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
import { Item } from './sidebar'
import clsx from 'clsx'
import { trackCallback } from 'web/lib/service/analytics'
import TrophyIcon from 'web/lib/icons/trophy-icon'
import { useUser } from 'web/hooks/use-user'
import NotificationsIcon from '../notifications-icon'
import router from 'next/router'
import { userProfileItem } from './bottom-nav-bar'
const mobileGroupNavigation = [
{ name: 'Markets', key: 'markets', icon: HomeIcon },
{ name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
{ name: 'About', key: 'about', icon: ClipboardIcon },
]
const mobileGeneralNavigation = [
{
name: 'Notifications',
key: 'notifications',
icon: NotificationsIcon,
href: '/notifications',
},
]
export function GroupNavBar(props: {
currentPage: string
onClick: (key: string) => void
}) {
const { currentPage } = props
const user = useUser()
return (
<nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
{mobileGroupNavigation.map((item) => (
<NavBarItem
key={item.name}
item={item}
currentPage={currentPage}
onClick={props.onClick}
/>
))}
{mobileGeneralNavigation.map((item) => (
<NavBarItem
key={item.name}
item={item}
currentPage={currentPage}
onClick={() => {
router.push(item.href)
}}
/>
))}
{user && (
<NavBarItem
key={'profile'}
currentPage={currentPage}
onClick={() => {
router.push(`/${user.username}?tab=trades`)
}}
item={userProfileItem(user)}
/>
)}
</nav>
)
}
function NavBarItem(props: {
item: Item
currentPage: string
onClick: (key: string) => void
}) {
const { item, currentPage } = props
const track = trackCallback(
`group navbar: ${item.trackingEventName ?? item.name}`
)
return (
<button onClick={() => props.onClick(item.key ?? '#')}>
<a
className={clsx(
'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',
currentPage === item.key && 'bg-gray-200 text-indigo-700'
)}
onClick={track}
>
{item.icon && <item.icon className="my-1 mx-auto h-6 w-6" />}
{item.name}
</a>
</button>
)
}

82
web/components/nav/group-sidebar.tsx Normal file
View File

@ -0,0 +1,82 @@
import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import { useUser } from 'web/hooks/use-user'
import { ManifoldLogo } from './manifold-logo'
import { ProfileSummary } from './profile-menu'
import React from 'react'
import TrophyIcon from 'web/lib/icons/trophy-icon'
import { SignInButton } from '../sign-in-button'
import NotificationsIcon from '../notifications-icon'
import { SidebarItem } from './sidebar'
import { buildArray } from 'common/util/array'
import { User } from 'common/user'
import { Row } from '../layout/row'
import { Spacer } from '../layout/spacer'
const groupNavigation = [
{ name: 'Markets', key: 'markets', icon: HomeIcon },
{ name: 'About', key: 'about', icon: ClipboardIcon },
{ name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
]
const generalNavigation = (user?: User | null) =>
buildArray(
user && {
name: 'Notifications',
href: `/notifications`,
key: 'notifications',
icon: NotificationsIcon,
}
)
export function GroupSidebar(props: {
groupName: string
className?: string
onClick: (key: string) => void
joinOrAddQuestionsButton: React.ReactNode
currentKey: string
}) {
const { className, groupName, currentKey } = props
const user = useUser()
return (
<nav
aria-label="Group Sidebar"
className={clsx('flex max-h-[100vh] flex-col', className)}
>
<ManifoldLogo className="pt-6" twoLine />
<Row className="pl-2 text-xl text-indigo-700 sm:mt-3">{groupName}</Row>
<div className=" min-h-0 shrink flex-col items-stretch gap-1 pt-6 lg:flex ">
{user ? (
<ProfileSummary user={user} />
) : (
<SignInButton className="mb-4" />
)}
</div>
{/* Desktop navigation */}
{groupNavigation.map((item) => (
<SidebarItem
key={item.key}
item={item}
currentPage={currentKey}
onClick={props.onClick}
/>
))}
{generalNavigation(user).map((item) => (
<SidebarItem
key={item.key}
item={item}
currentPage={currentKey}
onClick={props.onClick}
/>
))}
<Spacer h={2} />
{props.joinOrAddQuestionsButton}
</nav>
)
}

6
web/components/nav/menu.tsx
View File

@ -4,7 +4,7 @@ import clsx from 'clsx'
export type MenuItem = {
name: string
href: string
href?: string
onClick?: () => void
}
@ -38,11 +38,11 @@ export function MenuButton(props: {
{({ active }) => (
<a
href={item.href}
target={item.href.startsWith('http') ? '_blank' : undefined}
target={item.href?.startsWith('http') ? '_blank' : undefined}
onClick={item.onClick}
className={clsx(
active ? 'bg-gray-100' : '',
'line-clamp-3 block py-1.5 px-4 text-sm text-gray-700'
'line-clamp-3 block cursor-pointer py-1.5 px-4 text-sm text-gray-700'
)}
>
{item.name}

85
web/components/nav/sidebar.tsx
View File

@ -13,7 +13,7 @@ import Router, { useRouter } from 'next/router'
import { useUser } from 'web/hooks/use-user'
import { firebaseLogout, User } from 'web/lib/firebase/users'
import { ManifoldLogo } from './manifold-logo'
import { MenuButton } from './menu'
import { MenuButton, MenuItem } from './menu'
import { ProfileSummary } from './profile-menu'
import NotificationsIcon from 'web/components/notifications-icon'
import React from 'react'
@ -35,6 +35,7 @@ const logout = async () => {
function getNavigation() {
return [
{ name: 'Home', href: '/home', icon: HomeIcon },
{ name: 'Search', href: '/search', icon: SearchIcon },
{
name: 'Notifications',
href: `/notifications`,
@ -100,7 +101,7 @@ function getMoreNavigation(user?: User | null) {
const signedOutNavigation = [
{ name: 'Home', href: '/', icon: HomeIcon },
{ name: 'Explore', href: '/home', icon: SearchIcon },
{ name: 'Explore', href: '/search', icon: SearchIcon },
{
name: 'Help & About',
href: 'https://help.manifold.markets/',
@ -139,7 +140,7 @@ function getMoreMobileNav() {
}
if (IS_PRIVATE_MANIFOLD) return [signOut]
return buildArray<Item>(
return buildArray<MenuItem>(
CHALLENGES_ENABLED && { name: 'Challenges', href: '/challenges' },
[
{ name: 'Groups', href: '/groups' },
@ -156,39 +157,59 @@ function getMoreMobileNav() {
export type Item = {
name: string
trackingEventName?: string
href: string
href?: string
key?: string
icon?: React.ComponentType<{ className?: string }>
}
function SidebarItem(props: { item: Item; currentPage: string }) {
const { item, currentPage } = props
return (
<Link href={item.href} key={item.name}>
<a
onClick={trackCallback('sidebar: ' + item.name)}
className={clsx(
item.href == currentPage
? 'bg-gray-200 text-gray-900'
: 'text-gray-600 hover:bg-gray-100',
'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={item.href == currentPage ? 'page' : undefined}
>
{item.icon && (
<item.icon
className={clsx(
item.href == currentPage
? 'text-gray-500'
: 'text-gray-400 group-hover:text-gray-500',
'-ml-1 mr-3 h-6 w-6 flex-shrink-0'
)}
aria-hidden="true"
/>
)}
<span className="truncate">{item.name}</span>
</a>
</Link>
export function SidebarItem(props: {
item: Item
currentPage: string
onClick?: (key: string) => void
}) {
const { item, currentPage, onClick } = props
const isCurrentPage =
item.href != null ? item.href === currentPage : item.key === currentPage
const sidebarItem = (
<a
onClick={trackCallback('sidebar: ' + item.name)}
className={clsx(
isCurrentPage
? 'bg-gray-200 text-gray-900'
: 'text-gray-600 hover:bg-gray-100',
'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={item.href == currentPage ? 'page' : undefined}
>
{item.icon && (
<item.icon
className={clsx(
isCurrentPage
? 'text-gray-500'
: 'text-gray-400 group-hover:text-gray-500',
'-ml-1 mr-3 h-6 w-6 flex-shrink-0'
)}
aria-hidden="true"
/>
)}
<span className="truncate">{item.name}</span>
</a>
)
if (item.href) {
return (
<Link href={item.href} key={item.name}>
{sidebarItem}
</Link>
)
} else {
return onClick ? (
<button onClick={() => onClick(item.key ?? '#')}>{sidebarItem}</button>
) : (
<> </>
)
}
}
function SidebarButton(props: {

1
web/components/notification-settings.tsx
View File

@ -63,7 +63,6 @@ export function NotificationSettings(props: {
'contract_from_followed_user',
'unique_bettors_on_your_contract',
// TODO: add these
// one-click unsubscribe only unsubscribes them from that type only, (well highlighted), then a link to manage the rest of their notifications
// 'profit_loss_updates', - changes in markets you have shares in
// biggest winner, here are the rest of your markets

89
web/components/onboarding/group-selector-dialog.tsx Normal file
View File

@ -0,0 +1,89 @@
import { sortBy } from 'lodash'
import React, { useRef } from 'react'
import { Col } from 'web/components/layout/col'
import { Title } from 'web/components/title'
import { useGroups, useMemberGroupIds } from 'web/hooks/use-group'
import { joinGroup, leaveGroup } from 'web/lib/firebase/groups'
import { useUser } from 'web/hooks/use-user'
import { Modal } from 'web/components/layout/modal'
import { PillButton } from 'web/components/buttons/pill-button'
import { Button } from 'web/components/button'
import { Group } from 'common/group'
export default function GroupSelectorDialog(props: {
open: boolean
setOpen: (open: boolean) => void
}) {
const { open, setOpen } = props
const groups = useGroups()
const user = useUser()
const memberGroupIds = useMemberGroupIds(user) || []
const cachedGroups = useRef<Group[]>()
if (groups && !cachedGroups.current) {
cachedGroups.current = groups
}
const excludedGroups = [
'features',
'personal',
'private',
'nomic',
'proofnik',
'free money',
'motivation',
'sf events',
'please resolve',
'short-term',
'washifold',
]
const displayedGroups = sortBy(cachedGroups.current ?? [], [
(group) => -1 * group.totalMembers,
(group) => -1 * group.totalContracts,
])
.filter((group) => group.anyoneCanJoin)
.filter((group) =>
excludedGroups.every((name) => !group.name.toLowerCase().includes(name))
)
.filter(
(group) =>
(group.mostRecentContractAddedTime ?? 0) >
Date.now() - 1000 * 60 * 60 * 24 * 7
)
.slice(0, 30)
return (
<Modal open={open} setOpen={setOpen}>
<Col className="h-[32rem] rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg">
<Title text="What interests you?" />
<p className="mb-4">
Choose among the categories below to personalize your Manifold
experience.
</p>
<div className="scrollbar-hide items-start gap-2 overflow-x-auto">
{user &&
displayedGroups.map((group) => (
<PillButton
selected={memberGroupIds.includes(group.id)}
onSelect={() =>
memberGroupIds.includes(group.id)
? leaveGroup(group, user.id)
: joinGroup(group, user.id)
}
className="mr-1 mb-2 max-w-[12rem] truncate"
>
{group.name}
</PillButton>
))}
</div>
</Col>
<Col>
<Button onClick={() => setOpen(false)}>Done</Button>
</Col>
</Modal>
)
}

40
web/components/onboarding/welcome.tsx
View File

@ -7,6 +7,7 @@ import { Col } from '../layout/col'
import { Modal } from '../layout/modal'
import { Row } from '../layout/row'
import { Title } from '../title'
import GroupSelectorDialog from './group-selector-dialog'
export default function Welcome() {
const user = useUser()
@ -32,17 +33,26 @@ export default function Welcome() {
}
}
if (!user || !user.shouldShowWelcome) {
return <></>
} else
return (
<Modal
open={open}
setOpen={(newOpen) => {
setUserHasSeenWelcome()
setOpen(newOpen)
}}
>
const [groupSelectorOpen, setGroupSelectorOpen] = useState(false)
if (!user || (!user.shouldShowWelcome && !groupSelectorOpen)) return <></>
const toggleOpen = (isOpen: boolean) => {
setUserHasSeenWelcome()
setOpen(isOpen)
if (!isOpen) {
setGroupSelectorOpen(true)
}
}
return (
<>
<GroupSelectorDialog
open={groupSelectorOpen}
setOpen={() => setGroupSelectorOpen(false)}
/>
<Modal open={open} setOpen={toggleOpen}>
<Col className="h-[32rem] place-content-between rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg">
{page === 0 && <Page0 />}
{page === 1 && <Page1 />}
@ -68,17 +78,15 @@ export default function Welcome() {
</Row>
<u
className="self-center text-xs text-gray-500"
onClick={() => {
setOpen(false)
setUserHasSeenWelcome()
}}
onClick={() => toggleOpen(false)}
>
I got the gist, exit welcome
</u>
</Col>
</Col>
</Modal>
)
</>
)
}
function PageIndicator(props: { page: number; totalpages: number }) {

2
web/components/page.tsx
View File

@ -1,6 +1,6 @@
import clsx from 'clsx'
import { ReactNode } from 'react'
import { BottomNavBar } from './nav/nav-bar'
import { BottomNavBar } from './nav/bottom-nav-bar'
import Sidebar from './nav/sidebar'
import { Toaster } from 'react-hot-toast'

133
web/components/profile/twitch-panel.tsx
View File

@ -1,133 +0,0 @@
import clsx from 'clsx'
import { MouseEventHandler, ReactNode, useState } from 'react'
import toast from 'react-hot-toast'
import { LinkIcon } from '@heroicons/react/solid'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import { updatePrivateUser } from 'web/lib/firebase/users'
import { track } from 'web/lib/service/analytics'
import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
import { copyToClipboard } from 'web/lib/util/copy'
import { Button, ColorType } from './../button'
import { Row } from './../layout/row'
import { LoadingIndicator } from './../loading-indicator'
function BouncyButton(props: {
children: ReactNode
onClick?: MouseEventHandler<any>
color?: ColorType
}) {
const { children, onClick, color } = props
return (
<Button
color={color}
size="lg"
onClick={onClick}
className="btn h-[inherit] flex-shrink-[inherit] border-none font-normal normal-case"
>
{children}
</Button>
)
}
export function TwitchPanel() {
const user = useUser()
const privateUser = usePrivateUser()
const twitchInfo = privateUser?.twitchInfo
const twitchName = privateUser?.twitchInfo?.twitchName
const twitchToken = privateUser?.twitchInfo?.controlToken
const twitchBotConnected = privateUser?.twitchInfo?.botEnabled
const linkIcon = <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />
const copyOverlayLink = async () => {
copyToClipboard(`http://localhost:1000/overlay?t=${twitchToken}`)
toast.success('Overlay link copied!', {
icon: linkIcon,
})
}
const copyDockLink = async () => {
copyToClipboard(`http://localhost:1000/dock?t=${twitchToken}`)
toast.success('Dock link copied!', {
icon: linkIcon,
})
}
const updateBotConnected = (connected: boolean) => async () => {
if (user && twitchInfo) {
twitchInfo.botEnabled = connected
await updatePrivateUser(user.id, { twitchInfo })
}
}
const [twitchLoading, setTwitchLoading] = useState(false)
const createLink = async () => {
if (!user || !privateUser) return
setTwitchLoading(true)
const promise = linkTwitchAccountRedirect(user, privateUser)
track('link twitch from profile')
await promise
setTwitchLoading(false)
}
return (
<>
<div>
<label className="label">Twitch</label>
{!twitchName ? (
<Row>
<Button
color="indigo"
onClick={createLink}
disabled={twitchLoading}
>
Link your Twitch account
</Button>
{twitchLoading && <LoadingIndicator className="ml-4" />}
</Row>
) : (
<Row>
<span className="mr-4 text-gray-500">Linked Twitch account</span>{' '}
{twitchName}
</Row>
)}
</div>
{twitchToken && (
<div>
<div className="flex w-full">
<div
className={clsx(
'flex grow gap-4',
twitchToken ? '' : 'tooltip tooltip-top'
)}
data-tip="You must link your Twitch account first"
>
<BouncyButton color="blue" onClick={copyOverlayLink}>
Copy overlay link
</BouncyButton>
<BouncyButton color="indigo" onClick={copyDockLink}>
Copy dock link
</BouncyButton>
{twitchBotConnected ? (
<BouncyButton color="red" onClick={updateBotConnected(false)}>
Remove bot from your channel
</BouncyButton>
) : (
<BouncyButton color="green" onClick={updateBotConnected(true)}>
Add bot to your channel
</BouncyButton>
)}
</div>
</div>
</div>
)}
</>
)
}

40
web/hooks/use-contracts.ts
View File

@ -2,17 +2,19 @@ import { useFirestoreQueryData } from '@react-query-firebase/firestore'
import { useEffect, useState } from 'react'
import {
Contract,
listenForActiveContracts,
listenForContracts,
listenForHotContracts,
listenForInactiveContracts,
listenForNewContracts,
getUserBetContracts,
getUserBetContractsQuery,
listAllContracts,
trendingContractsQuery,
getContractsQuery,
} from 'web/lib/firebase/contracts'
import { QueryClient, useQueryClient } from 'react-query'
import { MINUTE_MS } from 'common/util/time'
import { query, limit } from 'firebase/firestore'
import { Sort } from 'web/components/contract-search'
export const useContracts = () => {
const [contracts, setContracts] = useState<Contract[] | undefined>()
@ -30,23 +32,25 @@ export const getCachedContracts = async () =>
staleTime: Infinity,
})
export const useActiveContracts = () => {
const [activeContracts, setActiveContracts] = useState<
Contract[] | undefined
>()
const [newContracts, setNewContracts] = useState<Contract[] | undefined>()
export const useTrendingContracts = (maxContracts: number) => {
const result = useFirestoreQueryData(
['trending-contracts', maxContracts],
query(trendingContractsQuery, limit(maxContracts))
)
return result.data
}
useEffect(() => {
return listenForActiveContracts(setActiveContracts)
}, [])
useEffect(() => {
return listenForNewContracts(setNewContracts)
}, [])
if (!activeContracts || !newContracts) return undefined
return [...activeContracts, ...newContracts]
export const useContractsQuery = (
sort: Sort,
maxContracts: number,
filters: { groupSlug?: string } = {},
visibility?: 'public'
) => {
const result = useFirestoreQueryData(
['contracts-query', sort, maxContracts, filters],
getContractsQuery(sort, maxContracts, filters, visibility)
)
return result.data
}
export const useInactiveContracts = () => {

35
web/hooks/use-group.ts
View File

@ -11,13 +11,17 @@ import {
listenForMemberGroupIds,
listenForOpenGroups,
listGroups,
topFollowedGroupsQuery,
} from 'web/lib/firebase/groups'
import { getUser } from 'web/lib/firebase/users'
import { filterDefined } from 'common/util/array'
import { Contract } from 'common/contract'
import { uniq } from 'lodash'
import { keyBy, uniq, uniqBy } from 'lodash'
import { listenForValues } from 'web/lib/firebase/utils'
import { useQuery } from 'react-query'
import { useFirestoreQueryData } from '@react-query-firebase/firestore'
import { limit, query } from 'firebase/firestore'
import { useTrendingContracts } from './use-contracts'
export const useGroup = (groupId: string | undefined) => {
const [group, setGroup] = useState<Group | null | undefined>()
@ -49,6 +53,30 @@ export const useOpenGroups = () => {
return groups
}
export const useTopFollowedGroups = (count: number) => {
const result = useFirestoreQueryData(
['top-followed-contracts', count],
query(topFollowedGroupsQuery, limit(count))
)
return result.data
}
export const useTrendingGroups = () => {
const topGroups = useTopFollowedGroups(200)
const groupsById = keyBy(topGroups, 'id')
const trendingContracts = useTrendingContracts(200)
const groupLinks = uniqBy(
(trendingContracts ?? []).map((c) => c.groupLinks ?? []).flat(),
(link) => link.groupId
)
return filterDefined(
groupLinks.map((link) => groupsById[link.groupId])
).filter((group) => group.totalMembers >= 3)
}
export const useMemberGroups = (userId: string | null | undefined) => {
const result = useQuery(['member-groups', userId ?? ''], () =>
getMemberGroups(userId ?? '')
@ -56,10 +84,11 @@ export const useMemberGroups = (userId: string | null | undefined) => {
return result.data
}
// Note: We cache member group ids in localstorage to speed up the initial load
export const useMemberGroupIds = (user: User | null | undefined) => {
const cachedGroups = useMemberGroups(user?.id)
const [memberGroupIds, setMemberGroupIds] = useState<string[] | undefined>(
undefined
cachedGroups?.map((g) => g.id)
)
useEffect(() => {

7
web/hooks/use-is-mobile.ts Normal file
View File

@ -0,0 +1,7 @@
import { useWindowSize } from 'web/hooks/use-window-size'
// matches talwind sm breakpoint
export function useIsMobile() {
const { width } = useWindowSize()
return (width ?? 0) < 640
}

2
web/hooks/use-notifications.ts
View File

@ -98,7 +98,7 @@ export function groupNotifications(notifications: Notification[]) {
const notificationGroup: NotificationGroup = {
notifications: notificationsForContractId,
groupedById: contractId,
isSeen: notificationsForContractId[0].isSeen,
isSeen: notificationsForContractId.some((n) => !n.isSeen),
timePeriod: day,
type: 'normal',
}

2
web/hooks/use-prefetch.ts
View File

@ -1,5 +1,6 @@
import { usePrefetchUserBetContracts } from './use-contracts'
import { usePrefetchPortfolioHistory } from './use-portfolio-history'
import { usePrefetchProbChanges } from './use-prob-changes'
import { usePrefetchUserBets } from './use-user-bets'
export function usePrefetch(userId: string | undefined) {
@ -8,5 +9,6 @@ export function usePrefetch(userId: string | undefined) {
usePrefetchUserBets(maybeUserId),
usePrefetchUserBetContracts(maybeUserId),
usePrefetchPortfolioHistory(maybeUserId, 'weekly'),
usePrefetchProbChanges(userId),
])
}

19
web/hooks/use-prob-changes.tsx
View File

@ -1,8 +1,11 @@
import { useFirestoreQueryData } from '@react-query-firebase/firestore'
import { MINUTE_MS } from 'common/util/time'
import { useQueryClient } from 'react-query'
import {
getProbChangesNegative,
getProbChangesPositive,
} from 'web/lib/firebase/contracts'
import { getValues } from 'web/lib/firebase/utils'
export const useProbChanges = (userId: string) => {
const { data: positiveChanges } = useFirestoreQueryData(
@ -20,3 +23,19 @@ export const useProbChanges = (userId: string) => {
return { positiveChanges, negativeChanges }
}
export const usePrefetchProbChanges = (userId: string | undefined) => {
const queryClient = useQueryClient()
if (userId) {
queryClient.prefetchQuery(
['prob-changes-day-positive', userId],
() => getValues(getProbChangesPositive(userId)),
{ staleTime: MINUTE_MS }
)
queryClient.prefetchQuery(
['prob-changes-day-negative', userId],
() => getValues(getProbChangesNegative(userId)),
{ staleTime: MINUTE_MS }
)
}
}

83
web/lib/firebase/contracts.ts
View File

@ -17,13 +17,14 @@ import { partition, sortBy, sum, uniqBy } from 'lodash'
import { coll, getValues, listenForValue, listenForValues } from './utils'
import { BinaryContract, Contract, CPMMContract } from 'common/contract'
import { createRNG, shuffle } from 'common/util/random'
import { chooseRandomSubset } from 'common/util/random'
import { formatMoney, formatPercent } from 'common/util/format'
import { DAY_MS } from 'common/util/time'
import { Bet } from 'common/bet'
import { Comment } from 'common/comment'
import { ENV_CONFIG } from 'common/envs/constants'
import { getBinaryProb } from 'common/contract-details'
import { Sort } from 'web/components/contract-search'
export const contracts = coll<Contract>('contracts')
@ -176,23 +177,6 @@ export function getUserBetContractsQuery(userId: string) {
) as Query<Contract>
}
const activeContractsQuery = query(
contracts,
where('isResolved', '==', false),
where('visibility', '==', 'public'),
where('volume7Days', '>', 0)
)
export function getActiveContracts() {
return getValues<Contract>(activeContractsQuery)
}
export function listenForActiveContracts(
setContracts: (contracts: Contract[]) => void
) {
return listenForValues<Contract>(activeContractsQuery, setContracts)
}
const inactiveContractsQuery = query(
contracts,
where('isResolved', '==', false),
@ -255,13 +239,6 @@ export async function unFollowContract(contractId: string, userId: string) {
await deleteDoc(followDoc)
}
function chooseRandomSubset(contracts: Contract[], count: number) {
const fiveMinutes = 5 * 60 * 1000
const seed = Math.round(Date.now() / fiveMinutes).toString()
shuffle(contracts, createRNG(seed))
return contracts.slice(0, count)
}
const hotContractsQuery = query(
contracts,
where('isResolved', '==', false),
@ -282,16 +259,17 @@ export function listenForHotContracts(
})
}
const trendingContractsQuery = query(
export const trendingContractsQuery = query(
contracts,
where('isResolved', '==', false),
where('visibility', '==', 'public'),
orderBy('popularityScore', 'desc'),
limit(10)
orderBy('popularityScore', 'desc')
)
export async function getTrendingContracts() {
return await getValues<Contract>(trendingContractsQuery)
export async function getTrendingContracts(maxContracts = 10) {
return await getValues<Contract>(
query(trendingContractsQuery, limit(maxContracts))
)
}
export async function getContractsBySlugs(slugs: string[]) {
@ -343,6 +321,51 @@ export const getTopGroupContracts = async (
return await getValues<Contract>(creatorContractsQuery)
}
const sortToField = {
newest: 'createdTime',
score: 'popularityScore',
'most-traded': 'volume',
'24-hour-vol': 'volume24Hours',
'prob-change-day': 'probChanges.day',
'last-updated': 'lastUpdated',
liquidity: 'totalLiquidity',
'close-date': 'closeTime',
'resolve-date': 'resolutionTime',
'prob-descending': 'prob',
'prob-ascending': 'prob',
} as const
const sortToDirection = {
newest: 'desc',
score: 'desc',
'most-traded': 'desc',
'24-hour-vol': 'desc',
'prob-change-day': 'desc',
'last-updated': 'desc',
liquidity: 'desc',
'close-date': 'asc',
'resolve-date': 'desc',
'prob-ascending': 'asc',
'prob-descending': 'desc',
} as const
export const getContractsQuery = (
sort: Sort,
maxItems: number,
filters: { groupSlug?: string } = {},
visibility?: 'public'
) => {
const { groupSlug } = filters
return query(
contracts,
where('isResolved', '==', false),
...(visibility ? [where('visibility', '==', visibility)] : []),
...(groupSlug ? [where('groupSlugs', 'array-contains', groupSlug)] : []),
orderBy(sortToField[sort], sortToDirection[sort]),
limit(maxItems)
)
}
export const getRecommendedContracts = async (
contract: Contract,
excludeBettorId: string,

7
web/lib/firebase/groups.ts
View File

@ -6,6 +6,7 @@ import {
doc,
getDocs,
onSnapshot,
orderBy,
query,
setDoc,
updateDoc,
@ -256,3 +257,9 @@ export async function listMemberIds(group: Group) {
const members = await getValues<GroupMemberDoc>(groupMembers(group.id))
return members.map((m) => m.userId)
}
export const topFollowedGroupsQuery = query(
groups,
where('anyoneCanJoin', '==', true),
orderBy('totalMembers', 'desc')
)

19
web/lib/icons/corner-down-right-icon.tsx Normal file
View File

@ -0,0 +1,19 @@
export default function CornerDownRightIcon(props: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className={props.className}
>
<polyline points="15 10 20 15 15 20"></polyline>
<path d="M4 4v7a4 4 0 0 0 4 4h12"></path>
</svg>
)
}

64
web/lib/twitch/link-twitch-account.ts
View File

@ -3,29 +3,33 @@ import { generateNewApiKey } from '../api/api-key'
const TWITCH_BOT_PUBLIC_URL = 'https://king-prawn-app-5btyw.ondigitalocean.app' // TODO: Add this to env config appropriately
async function postToBot(url: string, body: unknown) {
const result = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
})
const json = await result.json()
if (!result.ok) {
throw new Error(json.message)
} else {
return json
}
}
export async function initLinkTwitchAccount(
manifoldUserID: string,
manifoldUserAPIKey: string
): Promise<[string, Promise<{ twitchName: string; controlToken: string }>]> {
const response = await fetch(`${TWITCH_BOT_PUBLIC_URL}/api/linkInit`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
manifoldID: manifoldUserID,
apiKey: manifoldUserAPIKey,
redirectURL: window.location.href,
}),
const response = await postToBot(`${TWITCH_BOT_PUBLIC_URL}/api/linkInit`, {
manifoldID: manifoldUserID,
apiKey: manifoldUserAPIKey,
redirectURL: window.location.href,
})
const responseData = await response.json()
if (!response.ok) {
throw new Error(responseData.message)
}
const responseFetch = fetch(
`${TWITCH_BOT_PUBLIC_URL}/api/linkResult?userID=${manifoldUserID}`
)
return [responseData.twitchAuthURL, responseFetch.then((r) => r.json())]
return [response.twitchAuthURL, responseFetch.then((r) => r.json())]
}
export async function linkTwitchAccountRedirect(
@ -38,4 +42,34 @@ export async function linkTwitchAccountRedirect(
const [twitchAuthURL] = await initLinkTwitchAccount(user.id, apiKey)
window.location.href = twitchAuthURL
await new Promise((r) => setTimeout(r, 1e10)) // Wait "forever" for the page to change location
}
export async function updateBotEnabledForUser(
privateUser: PrivateUser,
botEnabled: boolean
) {
if (botEnabled) {
return postToBot(`${TWITCH_BOT_PUBLIC_URL}/registerchanneltwitch`, {
apiKey: privateUser.apiKey,
}).then((r) => {
if (!r.success) throw new Error(r.message)
})
} else {
return postToBot(`${TWITCH_BOT_PUBLIC_URL}/unregisterchanneltwitch`, {
apiKey: privateUser.apiKey,
}).then((r) => {
if (!r.success) throw new Error(r.message)
})
}
}
export function getOverlayURLForUser(privateUser: PrivateUser) {
const controlToken = privateUser?.twitchInfo?.controlToken
return `${TWITCH_BOT_PUBLIC_URL}/overlay?t=${controlToken}`
}
export function getDockURLForUser(privateUser: PrivateUser) {
const controlToken = privateUser?.twitchInfo?.controlToken
return `${TWITCH_BOT_PUBLIC_URL}/dock?t=${controlToken}`
}

2
web/pages/[username]/[contractSlug].tsx
View File

@ -37,7 +37,6 @@ import { User } from 'common/user'
import { ContractComment } from 'common/comment'
import { getOpenGraphProps } from 'common/contract-details'
import { ContractDescription } from 'web/components/contract/contract-description'
import { ExtraContractActionsRow } from 'web/components/contract/extra-contract-actions-row'
import {
ContractLeaderboard,
ContractTopTrades,
@ -257,7 +256,6 @@ export function ContractPageContent(
)}
<ContractOverview contract={contract} bets={nonChallengeBets} />
<ExtraContractActionsRow contract={contract} />
<ContractDescription className="mb-6 px-2" contract={contract} />
{outcomeType === 'NUMERIC' && (

21
web/pages/daily-movers.tsx Normal file
View File

@ -0,0 +1,21 @@
import { ProbChangeTable } from 'web/components/contract/prob-change-table'
import { Col } from 'web/components/layout/col'
import { Page } from 'web/components/page'
import { Title } from 'web/components/title'
import { useProbChanges } from 'web/hooks/use-prob-changes'
import { useUser } from 'web/hooks/use-user'
export default function DailyMovers() {
const user = useUser()
const changes = useProbChanges(user?.id ?? '')
return (
<Page>
<Col className="pm:mx-10 gap-4 sm:px-4 sm:pb-4">
<Title className="mx-4 !mb-0 sm:mx-0" text="Daily movers" />
<ProbChangeTable changes={changes} full />
</Col>
</Page>
)
}

64
web/pages/embed/[username]/[contractSlug].tsx
View File

@ -11,7 +11,7 @@ import {
NumericResolutionOrExpectation,
PseudoNumericResolutionOrExpectation,
} from 'web/components/contract/contract-card'
import { ContractDetails } from 'web/components/contract/contract-details'
import { MarketSubheader } from 'web/components/contract/contract-details'
import { ContractProbGraph } from 'web/components/contract/contract-prob-graph'
import { NumericGraph } from 'web/components/contract/numeric-graph'
import { Col } from 'web/components/layout/col'
@ -102,50 +102,40 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
return (
<Col className="h-[100vh] w-full bg-white">
<div className="relative flex flex-col pt-2">
<div className="px-3 text-xl text-indigo-700 md:text-2xl">
<Row className="justify-between gap-4 px-2">
<div className="text-xl text-indigo-700 md:text-2xl">
<SiteLink href={href}>{question}</SiteLink>
</div>
{isBinary && (
<BinaryResolutionOrChance contract={contract} probAfter={probAfter} />
)}
<Spacer h={3} />
{isPseudoNumeric && (
<PseudoNumericResolutionOrExpectation contract={contract} />
)}
<Row className="items-center justify-between gap-4 px-2">
<ContractDetails contract={contract} disabled />
{outcomeType === 'FREE_RESPONSE' && (
<FreeResponseResolutionOrChance contract={contract} truncate="long" />
)}
{(isBinary || isPseudoNumeric) &&
tradingAllowed(contract) &&
!betPanelOpen && (
<Button color="gradient" onClick={() => setBetPanelOpen(true)}>
Predict
</Button>
)}
{outcomeType === 'NUMERIC' && (
<NumericResolutionOrExpectation contract={contract} />
)}
</Row>
<Spacer h={3} />
<Row className="items-center justify-between gap-4 px-2">
<MarketSubheader contract={contract} disabled />
{isBinary && (
<BinaryResolutionOrChance
contract={contract}
probAfter={probAfter}
className="items-center"
/>
{(isBinary || isPseudoNumeric) &&
tradingAllowed(contract) &&
!betPanelOpen && (
<Button color="gradient" onClick={() => setBetPanelOpen(true)}>
Predict
</Button>
)}
</Row>
{isPseudoNumeric && (
<PseudoNumericResolutionOrExpectation contract={contract} />
)}
{outcomeType === 'FREE_RESPONSE' && (
<FreeResponseResolutionOrChance
contract={contract}
truncate="long"
/>
)}
{outcomeType === 'NUMERIC' && (
<NumericResolutionOrExpectation contract={contract} />
)}
</Row>
<Spacer h={2} />
</div>
<Spacer h={2} />
{(isBinary || isPseudoNumeric) && betPanelOpen && (
<BetInline

215
web/pages/experimental/home/index.tsx
View File

@ -1,215 +0,0 @@
import React from 'react'
import Router from 'next/router'
import {
AdjustmentsIcon,
PlusSmIcon,
ArrowSmRightIcon,
} from '@heroicons/react/solid'
import clsx from 'clsx'
import { Page } from 'web/components/page'
import { Col } from 'web/components/layout/col'
import { ContractSearch, SORTS } from 'web/components/contract-search'
import { User } from 'common/user'
import { useTracking } from 'web/hooks/use-tracking'
import { track } from 'web/lib/service/analytics'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { Sort } from 'web/components/contract-search'
import { Group } from 'common/group'
import { SiteLink } from 'web/components/site-link'
import { useUser } from 'web/hooks/use-user'
import { useMemberGroups } from 'web/hooks/use-group'
import { Button } from 'web/components/button'
import { getHomeItems } from '../../../components/arrange-home'
import { Title } from 'web/components/title'
import { Row } from 'web/components/layout/row'
import { ProbChangeTable } from 'web/components/contract/prob-change-table'
import { groupPath } from 'web/lib/firebase/groups'
import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
import { formatMoney } from 'common/util/format'
import { useProbChanges } from 'web/hooks/use-prob-changes'
import { ProfitBadge } from 'web/components/bets-list'
import { calculatePortfolioProfit } from 'common/calculate-metrics'
export default function Home() {
const user = useUser()
useTracking('view home')
useSaveReferral()
const groups = useMemberGroups(user?.id) ?? []
const { sections } = getHomeItems(groups, user?.homeSections ?? [])
return (
<Page>
<Col className="pm:mx-10 gap-4 px-4 pb-12">
<Row className={'mt-4 w-full items-start justify-between'}>
<Row className="items-end gap-4">
<Title className="!mb-1 !mt-0" text="Home" />
<EditButton />
</Row>
<DailyProfitAndBalance className="" user={user} />
</Row>
{sections.map((item) => {
const { id } = item
if (id === 'daily-movers') {
return <DailyMoversSection key={id} userId={user?.id} />
}
const sort = SORTS.find((sort) => sort.value === id)
if (sort)
return (
<SearchSection
key={id}
label={sort.value === 'newest' ? 'New for you' : sort.label}
sort={sort.value}
followed={sort.value === 'newest'}
user={user}
/>
)
const group = groups.find((g) => g.id === id)
if (group) return <GroupSection key={id} group={group} user={user} />
return null
})}
</Col>
<button
type="button"
className="fixed bottom-[70px] right-3 z-20 inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-3 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 lg:hidden"
onClick={() => {
Router.push('/create')
track('mobile create button')
}}
>
<PlusSmIcon className="h-8 w-8" aria-hidden="true" />
</button>
</Page>
)
}
function SearchSection(props: {
label: string
user: User | null | undefined | undefined
sort: Sort
yourBets?: boolean
followed?: boolean
}) {
const { label, user, sort, yourBets, followed } = props
return (
<Col>
<SectionHeader label={label} href={`/home?s=${sort}`} />
<ContractSearch
user={user}
defaultSort={sort}
additionalFilter={
yourBets
? { yourBets: true }
: followed
? { followed: true }
: undefined
}
noControls
maxResults={6}
persistPrefix={`experimental-home-${sort}`}
/>
</Col>
)
}
function GroupSection(props: {
group: Group
user: User | null | undefined | undefined
}) {
const { group, user } = props
return (
<Col>
<SectionHeader label={group.name} href={groupPath(group.slug)} />
<ContractSearch
user={user}
defaultSort={'score'}
additionalFilter={{ groupSlug: group.slug }}
noControls
maxResults={6}
persistPrefix={`experimental-home-${group.slug}`}
/>
</Col>
)
}
function DailyMoversSection(props: { userId: string | null | undefined }) {
const { userId } = props
const changes = useProbChanges(userId ?? '')
return (
<Col className="gap-2">
<SectionHeader label="Daily movers" href="daily-movers" />
<ProbChangeTable changes={changes} />
</Col>
)
}
function SectionHeader(props: { label: string; href: string }) {
const { label, href } = props
return (
<Row className="mb-3 items-center justify-between">
<SiteLink className="text-xl" href={href}>
{label}{' '}
<ArrowSmRightIcon
className="mb-0.5 inline h-6 w-6 text-gray-500"
aria-hidden="true"
/>
</SiteLink>
</Row>
)
}
function EditButton(props: { className?: string }) {
const { className } = props
return (
<SiteLink href="/experimental/home/edit">
<Button size="sm" color="gray-white" className={clsx(className, 'flex')}>
<AdjustmentsIcon className={clsx('h-[24px] w-5')} aria-hidden="true" />
</Button>
</SiteLink>
)
}
function DailyProfitAndBalance(props: {
user: User | null | undefined
className?: string
}) {
const { user, className } = props
const metrics = usePortfolioHistory(user?.id ?? '', 'daily') ?? []
const [first, last] = [metrics[0], metrics[metrics.length - 1]]
if (first === undefined || last === undefined) return null
const profit =
calculatePortfolioProfit(last) - calculatePortfolioProfit(first)
const profitPercent = profit / first.investmentValue
return (
<Row className={'gap-4'}>
<Col>
<div className="text-gray-500">Daily profit</div>
<Row className={clsx(className, 'items-center text-lg')}>
<span>{formatMoney(profit)}</span>{' '}
<ProfitBadge profitPercent={profitPercent * 100} />
</Row>
</Col>
<Col>
<div className="text-gray-500">Streak</div>
<Row className={clsx(className, 'items-center text-lg')}>
<span>🔥 {user?.currentBettingStreak ?? 0}</span>
</Row>
</Col>
</Row>
)
}

41
web/pages/explore-groups.tsx Normal file
View File

@ -0,0 +1,41 @@
import Masonry from 'react-masonry-css'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { Page } from 'web/components/page'
import { Title } from 'web/components/title'
import { useMemberGroupIds, useTrendingGroups } from 'web/hooks/use-group'
import { useUser } from 'web/hooks/use-user'
import { GroupCard } from './groups'
export default function Explore() {
const user = useUser()
const groups = useTrendingGroups()
const memberGroupIds = useMemberGroupIds(user) || []
return (
<Page>
<Col className="pm:mx-10 gap-4 px-4 pb-12 xl:w-[115%]">
<Row className={'w-full items-center justify-between'}>
<Title className="!mb-0" text="Trending groups" />
</Row>
<Masonry
breakpointCols={{ default: 3, 1200: 2, 570: 1 }}
className="-ml-4 flex w-auto self-center"
columnClassName="pl-4 bg-clip-padding"
>
{groups.map((g) => (
<GroupCard
key={g.id}
className="mb-4 !min-w-[250px]"
group={g}
creator={null}
user={user}
isMember={memberGroupIds.includes(g.id)}
/>
))}
</Masonry>
</Col>
</Page>
)
}

167
web/pages/group/[...slugs]/index.tsx
View File

@ -1,10 +1,9 @@
import React, { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { toast } from 'react-hot-toast'
import { toast, Toaster } from 'react-hot-toast'
import { Group, GROUP_CHAT_SLUG } from 'common/group'
import { Page } from 'web/components/page'
import { Contract, listContractsByGroupSlug } from 'web/lib/firebase/contracts'
import {
addContractToGroup,
@ -30,7 +29,7 @@ import Custom404 from '../../404'
import { SEO } from 'web/components/SEO'
import { Linkify } from 'web/components/linkify'
import { fromPropz, usePropz } from 'web/hooks/use-propz'
import { Tabs } from 'web/components/layout/tabs'
import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
import { ContractSearch } from 'web/components/contract-search'
import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
@ -49,6 +48,9 @@ import { Spacer } from 'web/components/layout/spacer'
import { usePost } from 'web/hooks/use-post'
import { useAdmin } from 'web/hooks/use-admin'
import { track } from '@amplitude/analytics-browser'
import { GroupNavBar } from 'web/components/nav/group-nav-bar'
import { ArrowLeftIcon } from '@heroicons/react/solid'
import { GroupSidebar } from 'web/components/nav/group-sidebar'
import { SelectMarketsModal } from 'web/components/contract-select-modal'
import { BETTORS } from 'common/user'
@ -138,6 +140,7 @@ export default function GroupPage(props: {
const user = useUser()
const isAdmin = useAdmin()
const memberIds = useMemberIds(group?.id ?? null) ?? props.memberIds
const [sidebarIndex, setSidebarIndex] = useState(0)
useSaveReferral(user, {
defaultReferrerUsername: creator.username,
@ -151,7 +154,7 @@ export default function GroupPage(props: {
const isMember = user && memberIds.includes(user.id)
const maxLeaderboardSize = 50
const leaderboard = (
const leaderboardPage = (
<Col>
<div className="mt-4 flex flex-col gap-8 px-4 md:flex-row">
<GroupLeaderboard
@ -170,7 +173,7 @@ export default function GroupPage(props: {
</Col>
)
const aboutTab = (
const aboutPage = (
<Col>
{(group.aboutPostId != null || isCreator || isAdmin) && (
<GroupAboutPost
@ -190,73 +193,118 @@ export default function GroupPage(props: {
</Col>
)
const questionsTab = (
<ContractSearch
user={user}
defaultSort={'newest'}
defaultFilter={suggestedFilter}
additionalFilter={{ groupSlug: group.slug }}
persistPrefix={`group-${group.slug}`}
/>
const questionsPage = (
<>
{/* align the divs to the right */}
<div className={' flex justify-end px-2 pb-2 sm:hidden'}>
<div>
<JoinOrAddQuestionsButtons
group={group}
user={user}
isMember={!!isMember}
/>
</div>
</div>
<ContractSearch
headerClassName="md:sticky"
user={user}
defaultSort={'newest'}
defaultFilter={suggestedFilter}
additionalFilter={{ groupSlug: group.slug }}
persistPrefix={`group-${group.slug}`}
/>
</>
)
const tabs = [
const sidebarPages = [
{
title: 'Markets',
content: questionsTab,
content: questionsPage,
href: groupPath(group.slug, 'markets'),
key: 'markets',
},
{
title: 'Leaderboards',
content: leaderboard,
content: leaderboardPage,
href: groupPath(group.slug, 'leaderboards'),
key: 'leaderboards',
},
{
title: 'About',
content: aboutTab,
content: aboutPage,
href: groupPath(group.slug, 'about'),
key: 'about',
},
]
const tabIndex = tabs
.map((t) => t.title.toLowerCase())
.indexOf(page ?? 'markets')
const pageContent = sidebarPages[sidebarIndex].content
const onSidebarClick = (key: string) => {
const index = sidebarPages.findIndex((t) => t.key === key)
setSidebarIndex(index)
}
const joinOrAddQuestionsButton = (
<JoinOrAddQuestionsButtons
group={group}
user={user}
isMember={!!isMember}
/>
)
return (
<Page>
<SEO
title={group.name}
description={`Created by ${creator.name}. ${group.about}`}
url={groupPath(group.slug)}
/>
<Col className="relative px-3">
<Row className={'items-center justify-between gap-4'}>
<div className={'sm:mb-1'}>
<div
className={'line-clamp-1 my-2 text-2xl text-indigo-700 sm:my-3'}
>
{group.name}
</div>
<div className={'hidden sm:block'}>
<Linkify text={group.about} />
</div>
</div>
<div className="mt-2">
<JoinOrAddQuestionsButtons
group={group}
user={user}
isMember={!!isMember}
/>
</div>
</Row>
</Col>
<Tabs
currentPageForAnalytics={groupPath(group.slug)}
className={'mx-2 mb-0 sm:mb-2'}
defaultIndex={tabIndex > 0 ? tabIndex : 0}
tabs={tabs}
/>
</Page>
<>
<TopGroupNavBar group={group} />
<div>
<div
className={
'mx-auto w-full pb-[58px] lg:grid lg:grid-cols-12 lg:gap-x-2 lg:pb-0 xl:max-w-7xl xl:gap-x-8'
}
>
<Toaster />
<GroupSidebar
groupName={group.name}
className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex"
onClick={onSidebarClick}
joinOrAddQuestionsButton={joinOrAddQuestionsButton}
currentKey={sidebarPages[sidebarIndex].key}
/>
<SEO
title={group.name}
description={`Created by ${creator.name}. ${group.about}`}
url={groupPath(group.slug)}
/>
<main className={'px-2 pt-1 lg:col-span-8 lg:pt-6 xl:col-span-8'}>
{pageContent}
</main>
</div>
<GroupNavBar
currentPage={sidebarPages[sidebarIndex].key}
onClick={onSidebarClick}
/>
</div>
</>
)
}
export function TopGroupNavBar(props: { group: Group }) {
return (
<header className="sticky top-0 z-50 w-full pb-2 md:hidden lg:col-span-12">
<div className="flex items-center border-b border-gray-200 bg-white px-4">
<div className="flex-shrink-0">
<Link href="/">
<a className="text-indigo-700 hover:text-gray-500 ">
<ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
</a>
</Link>
</div>
<div className="ml-3">
<h1 className="text-lg font-medium text-indigo-700">
{props.group.name}
</h1>
</div>
</div>
</header>
)
}
@ -264,10 +312,11 @@ function JoinOrAddQuestionsButtons(props: {
group: Group
user: User | null | undefined
isMember: boolean
className?: string
}) {
const { group, user, isMember } = props
return user && isMember ? (
<Row className={'mt-0 justify-end'}>
<Row className={'w-full self-start pt-4'}>
<AddContractButton group={group} user={user} />
</Row>
) : group.anyoneCanJoin ? (
@ -411,9 +460,9 @@ function AddContractButton(props: { group: Group; user: User }) {
return (
<>
<div className={'flex justify-center'}>
<div className={'flex w-full justify-center'}>
<Button
className="whitespace-nowrap"
className="w-full whitespace-nowrap"
size="md"
color="indigo"
onClick={() => setOpen(true)}
@ -468,7 +517,9 @@ function JoinGroupButton(props: {
<div>
<button
onClick={follow}
className={'btn-md btn-outline btn whitespace-nowrap normal-case'}
className={
'btn-md btn-outline btn w-full whitespace-nowrap normal-case'
}
>
Follow
</button>

32
web/pages/groups.tsx
View File

@ -171,26 +171,34 @@ export default function Groups(props: {
export function GroupCard(props: {
group: Group
creator: User | undefined
creator: User | null | undefined
user: User | undefined | null
isMember: boolean
className?: string
}) {
const { group, creator, user, isMember } = props
const { group, creator, user, isMember, className } = props
const { totalContracts } = group
return (
<Col className="relative min-w-[20rem] max-w-xs gap-1 rounded-xl bg-white p-8 shadow-md hover:bg-gray-100">
<Col
className={clsx(
'relative min-w-[20rem] max-w-xs gap-1 rounded-xl bg-white p-6 shadow-md hover:bg-gray-100',
className
)}
>
<Link href={groupPath(group.slug)}>
<a className="absolute left-0 right-0 top-0 bottom-0 z-0" />
</Link>
<div>
<Avatar
className={'absolute top-2 right-2 z-10'}
username={creator?.username}
avatarUrl={creator?.avatarUrl}
noLink={false}
size={12}
/>
</div>
{creator !== null && (
<div>
<Avatar
className={'absolute top-2 right-2 z-10'}
username={creator?.username}
avatarUrl={creator?.avatarUrl}
noLink={false}
size={12}
/>
</div>
)}
<Row className="items-center justify-between gap-2">
<span className="text-xl">{group.name}</span>
</Row>

46
web/pages/home.tsx
View File

@ -1,46 +0,0 @@
import { useRouter } from 'next/router'
import { PencilAltIcon } from '@heroicons/react/solid'
import { Page } from 'web/components/page'
import { Col } from 'web/components/layout/col'
import { ContractSearch } from 'web/components/contract-search'
import { useTracking } from 'web/hooks/use-tracking'
import { useUser } from 'web/hooks/use-user'
import { track } from 'web/lib/service/analytics'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { usePrefetch } from 'web/hooks/use-prefetch'
const Home = () => {
const user = useUser()
const router = useRouter()
useTracking('view home')
useSaveReferral()
usePrefetch(user?.id)
return (
<>
<Page>
<Col className="mx-auto w-full p-2">
<ContractSearch
user={user}
persistPrefix="home-search"
useQueryUrlParam={true}
/>
</Col>
<button
type="button"
className="fixed bottom-[70px] right-3 z-20 inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 lg:hidden"
onClick={() => {
router.push('/create')
track('mobile create button')
}}
>
<PencilAltIcon className="h-7 w-7" aria-hidden="true" />
</button>
</Page>
</>
)
}
export default Home

15
web/pages/experimental/home/edit.tsx → web/pages/home/edit.tsx
View File

@ -7,9 +7,12 @@ import { Row } from 'web/components/layout/row'
import { Page } from 'web/components/page'
import { SiteLink } from 'web/components/site-link'
import { Title } from 'web/components/title'
import { useMemberGroups } from 'web/hooks/use-group'
import { useTracking } from 'web/hooks/use-tracking'
import { useUser } from 'web/hooks/use-user'
import { updateUser } from 'web/lib/firebase/users'
import { track } from 'web/lib/service/analytics'
import { getHomeItems } from '.'
export default function Home() {
const user = useUser()
@ -24,6 +27,9 @@ export default function Home() {
setHomeSections(newHomeSections)
}
const groups = useMemberGroups(user?.id) ?? []
const { sections } = getHomeItems(groups, homeSections)
return (
<Page>
<Col className="pm:mx-10 gap-4 px-4 pb-6 pt-2">
@ -32,11 +38,7 @@ export default function Home() {
<DoneButton />
</Row>
<ArrangeHome
user={user}
homeSections={homeSections}
setHomeSections={updateHomeSections}
/>
<ArrangeHome sections={sections} setSectionIds={updateHomeSections} />
</Col>
</Page>
)
@ -46,11 +48,12 @@ function DoneButton(props: { className?: string }) {
const { className } = props
return (
<SiteLink href="/experimental/home">
<SiteLink href="/home">
<Button
size="lg"
color="blue"
className={clsx(className, 'flex whitespace-nowrap')}
onClick={() => track('done editing home')}
>
Done
</Button>

387
web/pages/home/index.tsx Normal file
View File

@ -0,0 +1,387 @@
import React, { ReactNode, useEffect, useState } from 'react'
import Router from 'next/router'
import {
AdjustmentsIcon,
PencilAltIcon,
ArrowSmRightIcon,
} from '@heroicons/react/solid'
import { XCircleIcon } from '@heroicons/react/outline'
import clsx from 'clsx'
import { toast, Toaster } from 'react-hot-toast'
import { Page } from 'web/components/page'
import { Col } from 'web/components/layout/col'
import { ContractSearch, SORTS } from 'web/components/contract-search'
import { User } from 'common/user'
import { useTracking } from 'web/hooks/use-tracking'
import { track } from 'web/lib/service/analytics'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { Sort } from 'web/components/contract-search'
import { Group } from 'common/group'
import { SiteLink } from 'web/components/site-link'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import {
useMemberGroupIds,
useMemberGroups,
useTrendingGroups,
} from 'web/hooks/use-group'
import { Button } from 'web/components/button'
import { Row } from 'web/components/layout/row'
import { ProbChangeTable } from 'web/components/contract/prob-change-table'
import {
getGroup,
groupPath,
joinGroup,
leaveGroup,
} from 'web/lib/firebase/groups'
import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
import { formatMoney } from 'common/util/format'
import { useProbChanges } from 'web/hooks/use-prob-changes'
import { ProfitBadge } from 'web/components/bets-list'
import { calculatePortfolioProfit } from 'common/calculate-metrics'
import { hasCompletedStreakToday } from 'web/components/profile/betting-streak-modal'
import { useContractsQuery } from 'web/hooks/use-contracts'
import { ContractsGrid } from 'web/components/contract/contracts-grid'
import { PillButton } from 'web/components/buttons/pill-button'
import { filterDefined } from 'common/util/array'
import { updateUser } from 'web/lib/firebase/users'
import { isArray, keyBy } from 'lodash'
import { usePrefetch } from 'web/hooks/use-prefetch'
import { Title } from 'web/components/title'
export default function Home() {
const user = useUser()
useTracking('view home')
useSaveReferral()
usePrefetch(user?.id)
const cachedGroups = useMemberGroups(user?.id) ?? []
const groupIds = useMemberGroupIds(user)
const [groups, setGroups] = useState(cachedGroups)
useEffect(() => {
if (groupIds) {
Promise.all(groupIds.map((id) => getGroup(id))).then((groups) =>
setGroups(filterDefined(groups))
)
}
}, [groupIds])
const { sections } = getHomeItems(groups, user?.homeSections ?? [])
return (
<Page>
<Toaster />
<Col className="pm:mx-10 gap-4 px-4 pb-12 pt-4 sm:pt-0">
<Row className={'mb-2 w-full items-center justify-between gap-8'}>
<Title className="!mt-0 !mb-0" text="Home" />
<DailyStats user={user} />
</Row>
{sections.map((section) => renderSection(section, user, groups))}
<TrendingGroupsSection user={user} />
</Col>
<button
type="button"
className="fixed bottom-[70px] right-3 z-20 inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 lg:hidden"
onClick={() => {
Router.push('/create')
track('mobile create button')
}}
>
<PencilAltIcon className="h-7 w-7" aria-hidden="true" />
</button>
</Page>
)
}
const HOME_SECTIONS = [
{ label: 'Daily movers', id: 'daily-movers' },
{ label: 'Trending', id: 'score' },
{ label: 'New for you', id: 'new-for-you' },
{ label: 'Recently updated', id: 'recently-updated-for-you' },
]
export const getHomeItems = (groups: Group[], sections: string[]) => {
// Accommodate old home sections.
if (!isArray(sections)) sections = []
const items = [
...HOME_SECTIONS,
...groups.map((g) => ({
label: g.name,
id: g.id,
})),
]
const itemsById = keyBy(items, 'id')
const sectionItems = filterDefined(sections.map((id) => itemsById[id]))
// Add unmentioned items to the end.
sectionItems.push(...items.filter((item) => !sectionItems.includes(item)))
return {
sections: sectionItems,
itemsById,
}
}
function renderSection(
section: { id: string; label: string },
user: User | null | undefined,
groups: Group[]
) {
const { id, label } = section
if (id === 'daily-movers') {
return <DailyMoversSection key={id} userId={user?.id} />
}
if (id === 'new-for-you')
return (
<SearchSection
key={id}
label={label}
sort={'newest'}
pill="personal"
user={user}
/>
)
if (id === 'recently-updated-for-you')
return (
<SearchSection
key={id}
label={label}
sort={'last-updated'}
pill="personal"
user={user}
/>
)
const sort = SORTS.find((sort) => sort.value === id)
if (sort)
return (
<SearchSection key={id} label={label} sort={sort.value} user={user} />
)
const group = groups.find((g) => g.id === id)
if (group) return <GroupSection key={id} group={group} user={user} />
return null
}
function SectionHeader(props: {
label: string
href: string
children?: ReactNode
}) {
const { label, href, children } = props
return (
<Row className="mb-3 items-center justify-between">
<SiteLink
className="text-xl"
href={href}
onClick={() => track('home click section header', { section: href })}
>
{label}{' '}
<ArrowSmRightIcon
className="mb-0.5 inline h-6 w-6 text-gray-500"
aria-hidden="true"
/>
</SiteLink>
{children}
</Row>
)
}
function SearchSection(props: {
label: string
user: User | null | undefined | undefined
sort: Sort
pill?: string
}) {
const { label, user, sort, pill } = props
return (
<Col>
<SectionHeader
label={label}
href={`/search?s=${sort}${pill ? `&p=${pill}` : ''}`}
/>
<ContractSearch
user={user}
defaultSort={sort}
defaultPill={pill}
noControls
maxResults={6}
headerClassName="sticky"
persistPrefix={`home-${sort}`}
/>
</Col>
)
}
function GroupSection(props: {
group: Group
user: User | null | undefined | undefined
}) {
const { group, user } = props
const contracts = useContractsQuery('score', 4, { groupSlug: group.slug })
return (
<Col>
<SectionHeader label={group.name} href={groupPath(group.slug)}>
<Button
className=""
color="gray-white"
onClick={() => {
if (user) {
const homeSections = (user.homeSections ?? []).filter(
(id) => id !== group.id
)
updateUser(user.id, { homeSections })
toast.promise(leaveGroup(group, user.id), {
loading: 'Unfollowing group...',
success: `Unfollowed ${group.name}`,
error: "Couldn't unfollow group, try again?",
})
}
}}
>
<XCircleIcon
className={clsx('h-5 w-5 flex-shrink-0')}
aria-hidden="true"
/>
</Button>
</SectionHeader>
<ContractsGrid contracts={contracts} />
</Col>
)
}
function DailyMoversSection(props: { userId: string | null | undefined }) {
const { userId } = props
const changes = useProbChanges(userId ?? '')
return (
<Col className="gap-2">
<SectionHeader label="Daily movers" href="/daily-movers" />
<ProbChangeTable changes={changes} />
</Col>
)
}
function DailyStats(props: {
user: User | null | undefined
className?: string
}) {
const { user, className } = props
const metrics = usePortfolioHistory(user?.id ?? '', 'daily') ?? []
const [first, last] = [metrics[0], metrics[metrics.length - 1]]
const privateUser = usePrivateUser()
const streaksHidden =
privateUser?.notificationPreferences.betting_streaks.length === 0
let profit = 0
let profitPercent = 0
if (first && last) {
profit = calculatePortfolioProfit(last) - calculatePortfolioProfit(first)
profitPercent = profit / first.investmentValue
}
return (
<Row className={'gap-4'}>
<Col>
<div className="text-gray-500">Daily profit</div>
<Row className={clsx(className, 'items-center text-lg')}>
<span>{formatMoney(profit)}</span>{' '}
<ProfitBadge profitPercent={profitPercent * 100} />
</Row>
</Col>
{!streaksHidden && (
<Col>
<div className="text-gray-500">Streak</div>
<Row
className={clsx(
className,
'items-center text-lg',
user && !hasCompletedStreakToday(user) && 'grayscale'
)}
>
<span>🔥 {user?.currentBettingStreak ?? 0}</span>
</Row>
</Col>
)}
</Row>
)
}
function TrendingGroupsSection(props: { user: User | null | undefined }) {
const { user } = props
const memberGroupIds = useMemberGroupIds(user) || []
const groups = useTrendingGroups().filter(
(g) => !memberGroupIds.includes(g.id)
)
const count = 25
const chosenGroups = groups.slice(0, count)
return (
<Col>
<SectionHeader label="Trending groups" href="/explore-groups">
<CustomizeButton />
</SectionHeader>
<Row className="flex-wrap gap-2">
{chosenGroups.map((g) => (
<PillButton
key={g.id}
selected={memberGroupIds.includes(g.id)}
onSelect={() => {
if (!user) return
if (memberGroupIds.includes(g.id)) leaveGroup(g, user?.id)
else {
const homeSections = (user.homeSections ?? [])
.filter((id) => id !== g.id)
.concat(g.id)
updateUser(user.id, { homeSections })
toast.promise(joinGroup(g, user.id), {
loading: 'Following group...',
success: `Followed ${g.name}`,
error: "Couldn't follow group, try again?",
})
track('home follow group', { group: g.slug })
}
}}
>
{g.name}
</PillButton>
))}
</Row>
</Col>
)
}
function CustomizeButton() {
return (
<SiteLink
className="mb-2 flex flex-row items-center text-xl hover:no-underline"
href="/home/edit"
>
<Button size="lg" color="gray" className={clsx('flex gap-2')}>
<AdjustmentsIcon
className={clsx('h-[24px] w-5 text-gray-500')}
aria-hidden="true"
/>
Customize
</Button>
</SiteLink>
)
}

17
web/pages/notifications.tsx
View File

@ -904,25 +904,30 @@ function BetFillNotification(props: {
}) {
const { notification, isChildOfGroup, highlighted, justSummary } = props
const { sourceText, data } = notification
const { creatorOutcome, probability } = (data as BetFillData) ?? {}
const { creatorOutcome, probability, limitOrderTotal, limitOrderRemaining } =
(data as BetFillData) ?? {}
const subtitle = 'bet against you'
const amount = formatMoney(parseInt(sourceText ?? '0'))
const description =
creatorOutcome && probability ? (
<span>
of your{' '}
of your {limitOrderTotal ? formatMoney(limitOrderTotal) : ''}
<span
className={
className={clsx(
'mx-1',
creatorOutcome === 'YES'
? 'text-primary'
: creatorOutcome === 'NO'
? 'text-red-500'
: 'text-blue-500'
}
)}
>
{creatorOutcome}{' '}
{creatorOutcome}
</span>
limit order at {Math.round(probability * 100)}% was filled
limit order at {Math.round(probability * 100)}% was filled{' '}
{limitOrderRemaining
? `(${formatMoney(limitOrderRemaining)} remaining)`
: ''}
</span>
) : (
<span>of your limit order was filled</span>

79
web/pages/profile.tsx
View File

@ -1,24 +1,28 @@
import React, { useState } from 'react'
import { RefreshIcon } from '@heroicons/react/outline'
import { AddFundsButton } from 'web/components/add-funds-button'
import { Page } from 'web/components/page'
import { SEO } from 'web/components/SEO'
import { Title } from 'web/components/title'
import { formatMoney } from 'common/util/format'
import { PrivateUser, User } from 'common/user'
import { cleanDisplayName, cleanUsername } from 'common/util/clean-username'
import { changeUserInfo } from 'web/lib/firebase/api'
import { uploadImage } from 'web/lib/firebase/storage'
import { formatMoney } from 'common/util/format'
import Link from 'next/link'
import React, { useState } from 'react'
import Textarea from 'react-expanding-textarea'
import { AddFundsButton } from 'web/components/add-funds-button'
import { ConfirmationButton } from 'web/components/confirmation-button'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { User, PrivateUser } from 'common/user'
import { getUserAndPrivateUser, updateUser } from 'web/lib/firebase/users'
import { defaultBannerUrl } from 'web/components/user-page'
import { Page } from 'web/components/page'
import { SEO } from 'web/components/SEO'
import { SiteLink } from 'web/components/site-link'
import Textarea from 'react-expanding-textarea'
import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
import { Title } from 'web/components/title'
import { defaultBannerUrl } from 'web/components/user-page'
import { generateNewApiKey } from 'web/lib/api/api-key'
import { TwitchPanel } from 'web/components/profile/twitch-panel'
import { changeUserInfo } from 'web/lib/firebase/api'
import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
import { uploadImage } from 'web/lib/firebase/storage'
import {
getUserAndPrivateUser,
updatePrivateUser,
updateUser,
} from 'web/lib/firebase/users'
export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
return { props: { auth: await getUserAndPrivateUser(creds.uid) } }
@ -93,10 +97,15 @@ export default function ProfilePage(props: {
}
}
const updateApiKey = async (e: React.MouseEvent) => {
const updateApiKey = async (e?: React.MouseEvent) => {
const newApiKey = await generateNewApiKey(user.id)
setApiKey(newApiKey ?? '')
e.preventDefault()
e?.preventDefault()
if (!privateUser.twitchInfo) return
await updatePrivateUser(privateUser.id, {
twitchInfo: { ...privateUser.twitchInfo, needsRelinking: true },
})
}
const fileHandler = async (event: any) => {
@ -229,16 +238,38 @@ export default function ProfilePage(props: {
value={apiKey}
readOnly
/>
<button
className="btn btn-primary btn-square p-2"
onClick={updateApiKey}
<ConfirmationButton
openModalBtn={{
className: 'btn btn-primary btn-square p-2',
label: '',
icon: <RefreshIcon />,
}}
submitBtn={{
label: 'Update key',
className: 'btn-primary',
}}
onSubmitWithSuccess={async () => {
updateApiKey()
return true
}}
>
<RefreshIcon />
</button>
<Col>
<Title text={'Are you sure?'} />
<div>
Updating your API key will break any existing applications
connected to your account, <b>including the Twitch bot</b>.
You will need to go to the{' '}
<Link href="/twitch">
<a className="underline focus:outline-none">
Twitch page
</a>
</Link>{' '}
to relink your account.
</div>
</Col>
</ConfirmationButton>
</div>
</div>
<TwitchPanel />
</Col>
</Col>
</Page>

26
web/pages/search.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Page } from 'web/components/page'
import { Col } from 'web/components/layout/col'
import { ContractSearch } from 'web/components/contract-search'
import { useTracking } from 'web/hooks/use-tracking'
import { useUser } from 'web/hooks/use-user'
import { usePrefetch } from 'web/hooks/use-prefetch'
export default function Search() {
const user = useUser()
usePrefetch(user?.id)
useTracking('view search')
return (
<Page>
<Col className="mx-auto w-full p-2">
<ContractSearch
user={user}
persistPrefix="search"
useQueryUrlParam={true}
autoFocus
/>
</Col>
</Page>
)
}

14
web/pages/tournaments/index.tsx
View File

@ -76,6 +76,13 @@ const Salem = {
}
const tourneys: Tourney[] = [
{
title: 'Clearer Thinking Regrant Project',
blurb: 'Which projects will Clearer Thinking give a grant to?',
award: '$13,000',
endTime: toDate('Sep 30, 2022'),
groupId: 'fhksfIgqyWf7OxsV9nkM',
},
{
title: 'Manifold F2P Tournament',
blurb:
@ -99,13 +106,6 @@ const tourneys: Tourney[] = [
endTime: toDate('Jan 6, 2023'),
groupId: 'SxGRqXRpV3RAQKudbcNb',
},
// {
// title: 'Clearer Thinking Regrant Project',
// blurb: 'Something amazing',
// award: '$10,000',
// endTime: toDate('Sep 22, 2022'),
// groupId: '2VsVVFGhKtIdJnQRAXVb',
// },
// Tournaments without awards get featured belows
{

447
web/pages/twitch.tsx
View File

@ -1,28 +1,48 @@
import { useState } from 'react'
import { LinkIcon } from '@heroicons/react/solid'
import clsx from 'clsx'
import { PrivateUser, User } from 'common/user'
import Link from 'next/link'
import { MouseEventHandler, ReactNode, useState } from 'react'
import { Page } from 'web/components/page'
import { Col } from 'web/components/layout/col'
import { ManifoldLogo } from 'web/components/nav/manifold-logo'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { SEO } from 'web/components/SEO'
import { Spacer } from 'web/components/layout/spacer'
import { firebaseLogin, getUserAndPrivateUser } from 'web/lib/firebase/users'
import { track } from 'web/lib/service/analytics'
import { Row } from 'web/components/layout/row'
import { Button } from 'web/components/button'
import { useTracking } from 'web/hooks/use-tracking'
import { linkTwitchAccountRedirect } from 'web/lib/twitch/link-twitch-account'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import { LoadingIndicator } from 'web/components/loading-indicator'
import toast from 'react-hot-toast'
import { Button } from 'web/components/button'
import { Col } from 'web/components/layout/col'
import { Row } from 'web/components/layout/row'
import { Spacer } from 'web/components/layout/spacer'
import { LoadingIndicator } from 'web/components/loading-indicator'
import { ManifoldLogo } from 'web/components/nav/manifold-logo'
import { Page } from 'web/components/page'
import { SEO } from 'web/components/SEO'
import { Title } from 'web/components/title'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { useTracking } from 'web/hooks/use-tracking'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import {
firebaseLogin,
getUserAndPrivateUser,
updatePrivateUser,
} from 'web/lib/firebase/users'
import { track } from 'web/lib/service/analytics'
import {
getDockURLForUser,
getOverlayURLForUser,
linkTwitchAccountRedirect,
updateBotEnabledForUser,
} from 'web/lib/twitch/link-twitch-account'
import { copyToClipboard } from 'web/lib/util/copy'
export default function TwitchLandingPage() {
useSaveReferral()
useTracking('view twitch landing page')
function ButtonGetStarted(props: {
user?: User | null
privateUser?: PrivateUser | null
buttonClass?: string
spinnerClass?: string
}) {
const { user, privateUser, buttonClass, spinnerClass } = props
const user = useUser()
const privateUser = usePrivateUser()
const twitchUser = privateUser?.twitchInfo?.twitchName
const [isLoading, setLoading] = useState(false)
const needsRelink =
privateUser?.twitchInfo?.twitchName &&
privateUser?.twitchInfo?.needsRelinking
const callback =
user && privateUser
@ -34,11 +54,11 @@ export default function TwitchLandingPage() {
const { user, privateUser } = await getUserAndPrivateUser(userId)
if (!user || !privateUser) return
if (privateUser.twitchInfo?.twitchName) return // If we've already linked Twitch, no need to do so again
await linkTwitchAccountRedirect(user, privateUser)
}
const [isLoading, setLoading] = useState(false)
const getStarted = async () => {
try {
setLoading(true)
@ -49,9 +69,335 @@ export default function TwitchLandingPage() {
} catch (e) {
console.error(e)
toast.error('Failed to sign up. Please try again later.')
} finally {
setLoading(false)
}
}
return isLoading ? (
<LoadingIndicator
spinnerClassName={clsx('!w-11 !h-11 my-4', spinnerClass)}
/>
) : (
<Button
size="xl"
color={needsRelink ? 'red' : 'gradient'}
className={clsx('my-4 self-center !px-16', buttonClass)}
onClick={getStarted}
>
{needsRelink ? 'API key updated: relink Twitch' : 'Start playing'}
</Button>
)
}
function TwitchPlaysManifoldMarkets(props: {
user?: User | null
privateUser?: PrivateUser | null
}) {
const { user, privateUser } = props
const twitchInfo = privateUser?.twitchInfo
const twitchUser = twitchInfo?.twitchName
return (
<div>
<Row className="mb-4">
<img
src="/twitch-glitch.svg"
className="mb-[0.4rem] mr-4 inline h-10 w-10"
></img>
<Title
text={'Twitch plays Manifold Markets'}
className={'!-my-0 md:block'}
/>
</Row>
<Col className="gap-4">
<div>
Similar to Twitch channel point predictions, Manifold Markets allows
you to create and feature on stream any question you like with users
predicting to earn play money.
</div>
<div>
The key difference is that Manifold's questions function more like a
stock market and viewers can buy and sell shares over the course of
the event and not just at the start. The market will eventually
resolve to yes or no at which point the winning shareholders will
receive their profit.
</div>
Start playing now by logging in with Google and typing commands in chat!
{twitchUser && !twitchInfo.needsRelinking ? (
<Button
size="xl"
color="green"
className="btn-disabled my-4 self-center !border-none"
>
Account connected: {twitchUser}
</Button>
) : (
<ButtonGetStarted user={user} privateUser={privateUser} />
)}
<div>
Instead of Twitch channel points we use our play money, Mana (M$). All
viewers start with M$1000 and more can be earned for free and then{' '}
<Link href="/charity">
<a className="underline">donated to a charity</a>
</Link>{' '}
of their choice at no cost!
</div>
</Col>
</div>
)
}
function Subtitle(props: { text: string }) {
const { text } = props
return <div className="text-2xl">{text}</div>
}
function Command(props: { command: string; desc: string }) {
const { command, desc } = props
return (
<div>
<p className="inline font-bold">{'!' + command}</p>
{' - '}
<p className="inline">{desc}</p>
</div>
)
}
function TwitchChatCommands() {
return (
<div>
<Title text="Twitch Chat Commands" className="md:block" />
<Col className="gap-4">
<Subtitle text="For Chat" />
<Command command="bet yes#" desc="Bets a # of Mana on yes." />
<Command command="bet no#" desc="Bets a # of Mana on no." />
<Command
command="sell"
desc="Sells all shares you own. Using this command causes you to
cash out early before the market resolves. This could be profitable
(if the probability has moved towards the direction you bet) or cause
a loss, although at least you keep some Mana. For maximum profit (but
also risk) it is better to not sell and wait for a favourable
resolution."
/>
<Command command="balance" desc="Shows how much Mana you own." />
<Command command="allin yes" desc="Bets your entire balance on yes." />
<Command command="allin no" desc="Bets your entire balance on no." />
<Subtitle text="For Mods/Streamer" />
<Command
command="create <question>"
desc="Creates and features the question. Be careful... this will override any question that is currently featured."
/>
<Command command="resolve yes" desc="Resolves the market as 'Yes'." />
<Command command="resolve no" desc="Resolves the market as 'No'." />
<Command
command="resolve n/a"
desc="Resolves the market as 'N/A' and refunds everyone their Mana."
/>
</Col>
</div>
)
}
function BotSetupStep(props: {
stepNum: number
buttonName?: string
buttonOnClick?: MouseEventHandler
overrideButton?: ReactNode
children: ReactNode
}) {
const { stepNum, buttonName, buttonOnClick, overrideButton, children } = props
return (
<Col className="flex-1">
{(overrideButton || buttonName) && (
<>
{overrideButton ?? (
<Button
size={'md'}
color={'green'}
className="!border-none"
onClick={buttonOnClick}
>
{buttonName}
</Button>
)}
<Spacer h={4} />
</>
)}
<div>
<p className="inline font-bold">Step {stepNum}. </p>
{children}
</div>
</Col>
)
}
function BotConnectButton(props: {
privateUser: PrivateUser | null | undefined
}) {
const { privateUser } = props
const [loading, setLoading] = useState(false)
const updateBotConnected = (connected: boolean) => async () => {
if (!privateUser) return
const twitchInfo = privateUser.twitchInfo
if (!twitchInfo) return
const error = connected
? 'Failed to add bot to your channel'
: 'Failed to remove bot from your channel'
const success = connected
? 'Added bot to your channel'
: 'Removed bot from your channel'
setLoading(true)
toast.promise(
updateBotEnabledForUser(privateUser, connected)
.then(() =>
updatePrivateUser(privateUser.id, {
twitchInfo: { ...twitchInfo, botEnabled: connected },
})
)
.finally(() => setLoading(false)),
{ loading: 'Updating bot settings...', error, success },
{
loading: {
className: '!max-w-sm',
},
success: {
className:
'!bg-primary !transition-all !duration-500 !text-white !max-w-sm',
},
error: {
className:
'!bg-red-400 !transition-all !duration-500 !text-white !max-w-sm',
},
}
)
}
return (
<>
{privateUser?.twitchInfo?.botEnabled ? (
<Button
color="red"
onClick={updateBotConnected(false)}
className={clsx(loading && '!btn-disabled', 'border-none')}
>
{loading ? (
<LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
) : (
'Remove bot from channel'
)}
</Button>
) : (
<Button
color="green"
onClick={updateBotConnected(true)}
className={clsx(loading && '!btn-disabled', 'border-none')}
>
{loading ? (
<LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
) : (
'Add bot to your channel'
)}
</Button>
)}
</>
)
}
function SetUpBot(props: {
user?: User | null
privateUser?: PrivateUser | null
}) {
const { user, privateUser } = props
const twitchLinked =
privateUser?.twitchInfo?.twitchName &&
!privateUser?.twitchInfo?.needsRelinking
? true
: undefined
const toastTheme = {
className: '!bg-primary !text-white',
icon: <LinkIcon className="mr-2 h-6 w-6" aria-hidden="true" />,
}
const copyOverlayLink = async () => {
if (!privateUser) return
copyToClipboard(getOverlayURLForUser(privateUser))
toast.success('Overlay link copied!', toastTheme)
}
const copyDockLink = async () => {
if (!privateUser) return
copyToClipboard(getDockURLForUser(privateUser))
toast.success('Dock link copied!', toastTheme)
}
return (
<>
<Title
text={'Set up the bot for your own stream'}
className={'!mb-4 md:block'}
/>
<Col className="gap-4">
<img
src="https://raw.githubusercontent.com/PhilBladen/ManifoldTwitchIntegration/master/docs/OBS.png" // TODO: Copy this into the Manifold codebase public folder
className="!-my-2"
></img>
To add the bot to your stream make sure you have logged in then follow
the steps below.
{!twitchLinked && (
<ButtonGetStarted
user={user}
privateUser={privateUser}
buttonClass={'!my-0'}
spinnerClass={'!my-0'}
/>
)}
<div className="flex flex-col gap-6 sm:flex-row">
<BotSetupStep
stepNum={1}
overrideButton={
twitchLinked && <BotConnectButton privateUser={privateUser} />
}
>
Use the button above to add the bot to your channel. Then mod it by
typing in your Twitch chat: <b>/mod ManifoldBot</b>
<br />
If the bot is not modded it will not be able to respond to commands
properly.
</BotSetupStep>
<BotSetupStep
stepNum={2}
buttonName={twitchLinked && 'Overlay link'}
buttonOnClick={copyOverlayLink}
>
Create a new browser source in your streaming software such as OBS.
Paste in the above link and resize it to your liking. We recommend
setting the size to 400x400.
</BotSetupStep>
<BotSetupStep
stepNum={3}
buttonName={twitchLinked && 'Control dock link'}
buttonOnClick={copyDockLink}
>
The bot can be controlled entirely through chat. But we made an easy
to use control panel. Share the link with your mods or embed it into
your OBS as a custom dock.
</BotSetupStep>
</div>
</Col>
</>
)
}
export default function TwitchLandingPage() {
useSaveReferral()
useTracking('view twitch landing page')
const user = useUser()
const privateUser = usePrivateUser()
return (
<Page>
@ -62,58 +408,11 @@ export default function TwitchLandingPage() {
<div className="px-4 pt-2 md:mt-0 lg:hidden">
<ManifoldLogo />
</div>
<Col className="items-center">
<Col className="max-w-3xl">
<Col className="mb-6 rounded-xl sm:m-12 sm:mt-0">
<Row className="self-center">
<img height={200} width={200} src="/twitch-logo.png" />
<img height={200} width={200} src="/flappy-logo.gif" />
</Row>
<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">
<span className="bg-gradient-to-r from-indigo-500 to-blue-500 bg-clip-text font-bold text-transparent">
Bet
</span>{' '}
on your favorite streams
</div>
</h1>
<Spacer h={6} />
<div className="mb-4 px-2 ">
Get more out of Twitch with play-money betting markets.{' '}
{!twitchUser &&
'Click the button below to link your Twitch account.'}
<br />
</div>
</div>
<Spacer h={6} />
{twitchUser ? (
<div className="mt-3 self-center rounded-lg bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 p-4 ">
<div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
<div className="truncate text-sm font-medium text-gray-500">
Twitch account linked
</div>
<div className="mt-1 text-2xl font-semibold text-gray-900">
{twitchUser}
</div>
</div>
</div>
) : isLoading ? (
<LoadingIndicator spinnerClassName="!w-16 !h-16" />
) : (
<Button
size="2xl"
color="gradient"
className="self-center"
onClick={getStarted}
>
Get started
</Button>
)}
</Col>
</Col>
<Col className="max-w-3xl gap-8 rounded bg-white p-4 text-gray-600 shadow-md sm:mx-auto sm:p-10">
<TwitchPlaysManifoldMarkets user={user} privateUser={privateUser} />
<TwitchChatCommands />
<SetUpBot user={user} privateUser={privateUser} />
</Col>
</Page>
)

21
web/public/twitch-glitch.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#9146FF;}
</style>
<title>Asset 2</title>
<g>
<polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 "/>
<g>
<g id="Layer_1-2">
<path class="st1" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
V1300z"/>
<rect x="1700" y="550" class="st1" width="200" height="600"/>
<rect x="1150" y="550" class="st1" width="200" height="600"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 890 B

2
web/tailwind.config.js
View File

@ -26,6 +26,8 @@ module.exports = {
'greyscale-5': '#9191A7',
'greyscale-6': '#66667C',
'greyscale-7': '#111140',
'highlight-blue': '#5BCEFF',
'hover-blue': '#90DEFF',
},
typography: {
quoteless: {