2022-03-06 08:48:08 +00:00
|
|
|
import { SparklesIcon, XIcon } from '@heroicons/react/solid'
|
2022-01-27 23:14:18 +00:00
|
|
|
import { Avatar } from './avatar'
|
2022-03-06 08:48:08 +00:00
|
|
|
import { useRef, useState } from 'react'
|
2022-01-21 18:33:58 +00:00
|
|
|
import { Spacer } from './layout/spacer'
|
|
|
|
import { NewContract } from '../pages/create'
|
|
|
|
import { firebaseLogin, User } from '../lib/firebase/users'
|
|
|
|
import { ContractsGrid } from './contracts-list'
|
2022-03-09 17:08:57 +00:00
|
|
|
import { Contract, MAX_QUESTION_LENGTH } from '../../common/contract'
|
2022-01-27 00:21:14 +00:00
|
|
|
import { Col } from './layout/col'
|
2022-01-27 18:45:35 +00:00
|
|
|
import clsx from 'clsx'
|
2022-03-03 08:56:03 +00:00
|
|
|
import { Row } from './layout/row'
|
2022-03-09 02:43:30 +00:00
|
|
|
import { ENV_CONFIG } from '../../common/envs/constants'
|
2022-01-21 18:33:58 +00:00
|
|
|
|
|
|
|
export function FeedPromo(props: { hotContracts: Contract[] }) {
|
2022-01-22 00:28:12 +00:00
|
|
|
const { hotContracts } = props
|
2022-01-21 18:33:58 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2022-04-04 05:45:23 +00:00
|
|
|
<Col className="my-6 rounded-xl bg-white py-12 text-center sm:m-12">
|
|
|
|
<h1 className="text-4xl sm:text-6xl xl:text-6xl">
|
2022-03-03 08:56:03 +00:00
|
|
|
<div className="font-semibold sm:mb-2">
|
|
|
|
A{' '}
|
|
|
|
<span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
|
|
|
|
market{' '}
|
|
|
|
</span>
|
|
|
|
for
|
|
|
|
</div>
|
|
|
|
<div className="font-semibold">
|
|
|
|
every{' '}
|
|
|
|
<span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
|
|
|
|
prediction
|
|
|
|
</span>
|
2022-01-27 00:21:14 +00:00
|
|
|
</div>
|
|
|
|
</h1>
|
|
|
|
<Spacer h={6} />
|
2022-02-11 18:40:22 +00:00
|
|
|
<div className="mb-4 text-gray-500">
|
2022-03-03 08:56:03 +00:00
|
|
|
Find prediction markets on any topic imaginable. Or create your own!
|
2022-01-21 18:33:58 +00:00
|
|
|
<br />
|
2022-03-03 08:56:03 +00:00
|
|
|
Sign up to get M$ 1,000 and start trading.
|
2022-01-21 18:33:58 +00:00
|
|
|
<br />
|
|
|
|
</div>
|
2022-01-27 00:21:14 +00:00
|
|
|
<Spacer h={6} />
|
|
|
|
<button
|
2022-03-03 08:56:03 +00:00
|
|
|
className="btn btn-lg self-center border-none bg-gradient-to-r from-teal-500 to-green-500 normal-case hover:from-teal-600 hover:to-green-600"
|
2022-01-27 00:21:14 +00:00
|
|
|
onClick={firebaseLogin}
|
|
|
|
>
|
2022-03-03 08:56:03 +00:00
|
|
|
Sign up for free
|
2022-01-27 00:21:14 +00:00
|
|
|
</button>{' '}
|
|
|
|
</Col>
|
2022-01-22 20:52:49 +00:00
|
|
|
|
2022-03-03 08:56:03 +00:00
|
|
|
<Row className="m-4 mb-6 items-center gap-1 text-xl font-semibold text-gray-800">
|
|
|
|
<SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
|
|
|
|
Trending today
|
|
|
|
</Row>
|
2022-01-27 00:21:14 +00:00
|
|
|
<ContractsGrid
|
|
|
|
contracts={hotContracts?.slice(0, 10) || []}
|
|
|
|
showHotVolume
|
|
|
|
/>
|
2022-01-21 18:33:58 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-01-27 18:45:35 +00:00
|
|
|
export default function FeedCreate(props: {
|
|
|
|
user?: User
|
|
|
|
tag?: string
|
2022-01-27 20:05:59 +00:00
|
|
|
placeholder?: string
|
2022-01-27 18:45:35 +00:00
|
|
|
className?: string
|
|
|
|
}) {
|
|
|
|
const { user, tag, className } = props
|
2022-01-21 18:33:58 +00:00
|
|
|
const [question, setQuestion] = useState('')
|
2022-03-06 08:48:08 +00:00
|
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
|
|
const inputRef = useRef<HTMLTextAreaElement | null>()
|
2022-01-21 18:33:58 +00:00
|
|
|
|
2022-03-09 02:43:30 +00:00
|
|
|
const placeholders = ENV_CONFIG.newQuestionPlaceholders
|
2022-01-21 18:33:58 +00:00
|
|
|
// Rotate through a new placeholder each day
|
|
|
|
// Easter egg idea: click your own name to shuffle the placeholder
|
2022-01-27 20:40:46 +00:00
|
|
|
// const daysSinceEpoch = Math.floor(Date.now() / 1000 / 60 / 60 / 24)
|
2022-01-27 20:46:23 +00:00
|
|
|
const [randIndex] = useState(
|
|
|
|
Math.floor(Math.random() * 1e10) % placeholders.length
|
|
|
|
)
|
2022-01-27 20:40:46 +00:00
|
|
|
const placeholder = props.placeholder ?? `e.g. ${placeholders[randIndex]}`
|
2022-01-21 18:33:58 +00:00
|
|
|
|
|
|
|
return (
|
2022-01-27 21:08:18 +00:00
|
|
|
<div
|
2022-02-17 03:37:54 +00:00
|
|
|
className={clsx(
|
2022-03-31 05:35:20 +00:00
|
|
|
'w-full cursor-text rounded bg-white p-4 shadow-md',
|
2022-03-06 08:48:08 +00:00
|
|
|
isExpanded ? 'ring-2 ring-indigo-300' : '',
|
2022-02-17 03:37:54 +00:00
|
|
|
className
|
|
|
|
)}
|
2022-03-06 08:48:08 +00:00
|
|
|
onClick={() => {
|
|
|
|
!isExpanded && inputRef.current?.focus()
|
|
|
|
}}
|
2022-01-27 21:08:18 +00:00
|
|
|
>
|
2022-01-21 18:33:58 +00:00
|
|
|
<div className="relative flex items-start space-x-3">
|
2022-01-27 23:14:18 +00:00
|
|
|
<Avatar username={user?.username} avatarUrl={user?.avatarUrl} noLink />
|
2022-01-23 00:16:23 +00:00
|
|
|
|
2022-01-21 18:33:58 +00:00
|
|
|
<div className="min-w-0 flex-1">
|
2022-03-06 08:48:08 +00:00
|
|
|
<Row className="justify-between">
|
2022-01-21 18:33:58 +00:00
|
|
|
<p className="my-0.5 text-sm">Ask a question... </p>
|
2022-03-06 08:48:08 +00:00
|
|
|
{isExpanded && (
|
|
|
|
<button
|
|
|
|
className="btn btn-xs btn-circle btn-ghost rounded"
|
|
|
|
onClick={() => setIsExpanded(false)}
|
|
|
|
>
|
|
|
|
<XIcon
|
|
|
|
className="mx-auto h-6 w-6 text-gray-500"
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
</Row>
|
2022-01-27 23:52:24 +00:00
|
|
|
<textarea
|
|
|
|
ref={inputRef as any}
|
2022-03-06 08:48:08 +00:00
|
|
|
className={clsx(
|
|
|
|
'w-full resize-none appearance-none border-transparent bg-transparent p-0 text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent',
|
|
|
|
question && 'text-lg sm:text-xl',
|
|
|
|
!question && 'text-base sm:text-lg'
|
|
|
|
)}
|
2022-01-27 20:05:59 +00:00
|
|
|
placeholder={placeholder}
|
2022-01-21 18:33:58 +00:00
|
|
|
value={question}
|
2022-03-06 08:48:08 +00:00
|
|
|
rows={question.length > 68 ? 4 : 2}
|
2022-03-09 17:08:57 +00:00
|
|
|
maxLength={MAX_QUESTION_LENGTH}
|
2022-01-21 18:33:58 +00:00
|
|
|
onClick={(e) => e.stopPropagation()}
|
2022-01-27 23:52:24 +00:00
|
|
|
onChange={(e) => setQuestion(e.target.value.replace('\n', ''))}
|
2022-03-06 08:48:08 +00:00
|
|
|
onFocus={() => setIsExpanded(true)}
|
2022-01-21 18:33:58 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-01-23 00:16:23 +00:00
|
|
|
|
2022-01-21 18:33:58 +00:00
|
|
|
{/* Hide component instead of deleting, so edits to NewContract don't get lost */}
|
2022-03-06 08:48:08 +00:00
|
|
|
<div className={isExpanded ? '' : 'hidden'}>
|
2022-01-27 18:45:35 +00:00
|
|
|
<NewContract question={question} tag={tag} />
|
2022-01-21 18:33:58 +00:00
|
|
|
</div>
|
2022-01-23 00:16:23 +00:00
|
|
|
|
2022-01-21 18:33:58 +00:00
|
|
|
{/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
|
2022-03-06 08:48:08 +00:00
|
|
|
{!isExpanded && (
|
|
|
|
<div className="flex justify-end sm:-mt-4">
|
2022-01-27 21:22:18 +00:00
|
|
|
<button className="btn btn-sm" disabled>
|
2022-01-21 18:33:58 +00:00
|
|
|
Create Market
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|