Create new markets directly from the feed (#33)

* Move hot & closing markets to All Markets

Soon to be named "Explore"

* Set up a question box on the homepage

* Show Leaderboards by default instead of Create

* Support full contract creation from homepage

* Force mt-0 on /markets

* Move description into info tooltip

* Add hint to ask a question

* Initialize close date to 1 week from today

* Add a promo section for logged-out users

* Add hashtags, remove mobile padding

* Rewrite promo copy

* Store hotContracts as static props

web/components/contract-feed.tsx

@@ -40,7 +40,7 @@ import { Comment, mapCommentsByBetId } from '../lib/firebase/comments'
 import { JoinSpans } from './join-spans'
 import Textarea from 'react-expanding-textarea'
 
-function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
+export function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
   const { username, avatarUrl } = props
   return (
     <SiteLink className="relative" href={`/${username}`}>

web/components/feed-create.tsx

@@ -0,0 +1,119 @@
+import { useUser } from '../hooks/use-user'
+import { AvatarWithIcon } from './contract-feed'
+import { Title } from './title'
+import Textarea from 'react-expanding-textarea'
+import { useState } from 'react'
+import { Spacer } from './layout/spacer'
+import { NewContract } from '../pages/create'
+import { firebaseLogin, User } from '../lib/firebase/users'
+import { useHotContracts } from '../hooks/use-contracts'
+import { ContractsGrid } from './contracts-list'
+import { SiteLink } from './site-link'
+import { Contract } from '../../common/contract'
+
+export function FeedPromo(props: { hotContracts: Contract[] }) {
+  const contracts = useHotContracts() ?? props.hotContracts
+
+  return (
+    <>
+      <div className="w-full bg-indigo-50 p-6 sm:border-2 sm:border-indigo-100 sm:rounded-lg">
+        <Title
+          text="Bet on the future"
+          className="!mt-2 text-gray-800 !text-4xl"
+        />
+        <div className="text-gray-500 mb-4">
+          On Manifold Markets, you can find prediction markets run by your
+          favorite creators.
+          <br />
+          <button
+            className="bg-gradient-to-r gradient-to-r from-teal-500 to-green-500 text-transparent bg-clip-text hover:underline hover:decoration-gray-300 hover:decoration-2"
+            onClick={firebaseLogin}
+          >
+            Sign up to get M$ 1000 for free
+          </button>{' '}
+          and start trading!
+          <br />
+        </div>
+
+        <div className="flex flex-wrap mt-2 gap-2">
+          {['#politics', '#covid', '#gaming', '#sports', '#meta'].map((tag) => (
+            <Hashtag tag={tag} />
+          ))}
+        </div>
+        <Spacer h={4} />
+
+        <ContractsGrid contracts={contracts?.slice(0, 2) || []} showHotVolume />
+      </div>
+
+      <div className="text-gray-800 text-lg mb-0 mt-6 mx-6">
+        Recent community activity
+      </div>
+    </>
+  )
+}
+
+function Hashtag(props: { tag: string }) {
+  const { tag } = props
+  return (
+    <SiteLink href={`/tag/${tag.substring(1)}`} className="flex items-center">
+      <div className="bg-white hover:bg-gray-100 cursor-pointer px-4 py-2 rounded-full shadow-md">
+        <span className="text-gray-500">{tag}</span>
+      </div>
+    </SiteLink>
+  )
+}
+
+export default function FeedCreate(props: { user: User }) {
+  const { user } = props
+  const [question, setQuestion] = useState('')
+
+  const placeholders = [
+    'Will I make a new friend this week?',
+    'Will we discover that the world is a simulation?',
+    'Will anyone I know get engaged this year?',
+    'Will humans set foot on Mars by the end of 2030?',
+    'If I switch jobs, will I have more free time in 6 months than I do now?',
+    'Will any cryptocurrency eclipse Bitcoin by market cap?',
+  ]
+  // Rotate through a new placeholder each day
+  // Easter egg idea: click your own name to shuffle the placeholder
+  const daysSinceEpoch = Math.floor(Date.now() / 1000 / 60 / 60 / 24)
+  const placeholder = placeholders[daysSinceEpoch % placeholders.length]
+
+  return (
+    <div className="w-full bg-indigo-50 sm:rounded-md p-4">
+      <div className="relative flex items-start space-x-3">
+        <AvatarWithIcon
+          username={user.username}
+          avatarUrl={user.avatarUrl || ''}
+        />
+        <div className="min-w-0 flex-1">
+          {/* TODO: Show focus, for accessibility */}
+          <div>
+            <p className="my-0.5 text-sm">Ask a question... </p>
+          </div>
+          <Textarea
+            className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none focus:ring-transparent"
+            placeholder={`e.g. ${placeholder}`}
+            value={question}
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => setQuestion(e.target.value || '')}
+          />
+          <Spacer h={4} />
+        </div>
+      </div>
+      {/* Hide component instead of deleting, so edits to NewContract don't get lost */}
+      <div className={question ? '' : 'hidden'}>
+        <NewContract question={question} />
+      </div>
+      {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
+      {!question && (
+        <div className="flex justify-end">
+          <button className="btn" disabled>
+            Create Market
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

web/components/nav-bar.tsx

@@ -70,26 +70,23 @@ function NavOptions(props: { user: User | null; themeClasses: string }) {
 
       {user === null ? (
         <>
-          <div
+          <button
-            className={clsx(
+            className="btn border-none normal-case text-base font-medium px-6 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
-              'text-base font-medium cursor-pointer whitespace-nowrap',
-              themeClasses
-            )}
             onClick={firebaseLogin}
           >
             Sign in
-          </div>
+          </button>
         </>
       ) : (
         <>
-          <Link href="/create">
+          <Link href="/leaderboards">
             <a
               className={clsx(
                 'text-base hidden md:block whitespace-nowrap',
                 themeClasses
               )}
             >
-              Create a market
+              Leaderboards
             </a>
           </Link>
 

web/components/profile-menu.tsx

@@ -51,10 +51,6 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
       name: 'Your markets',
       href: `/${user.username}`,
     },
-    {
-      name: 'Leaderboards',
-      href: '/leaderboards',
-    },
     {
       name: 'Discord',
       href: 'https://discord.gg/eHQBNBqXuh',

web/pages/activity.tsx

@@ -79,7 +79,6 @@ export function ActivityFeed(props: {
   return contracts.length > 0 ? (
     <Col className="items-center">
       <Col className="w-full max-w-3xl">
-        <Title text="Recent Activity" />
         <Col className="w-full bg-white self-center divide-gray-300 divide-y">
           {activeContracts.map((contract, i) => (
             <div key={contract.id} className="py-6 px-2 sm:px-4">

web/pages/create.tsx

@@ -5,19 +5,50 @@ import dayjs from 'dayjs'
 import Textarea from 'react-expanding-textarea'
 
 import { Spacer } from '../components/layout/spacer'
-import { Title } from '../components/title'
 import { useUser } from '../hooks/use-user'
 import { Contract, contractPath } from '../lib/firebase/contracts'
-import { Page } from '../components/page'
 import { createContract } from '../lib/firebase/api-call'
 import { Row } from '../components/layout/row'
 import { AmountInput } from '../components/amount-input'
 import { MINIMUM_ANTE } from '../../common/antes'
 import { InfoTooltip } from '../components/info-tooltip'
 import { CREATOR_FEE } from '../../common/fees'
+import { Page } from '../components/page'
+import { Title } from '../components/title'
+
+export default function Create() {
+  const [question, setQuestion] = useState('')
+
+  return (
+    <Page>
+      <div className="w-full max-w-2xl mx-auto">
+        <Title text="Create a new prediction market" />
+
+        <div className="bg-gray-100 rounded-lg shadow-md px-6 py-4">
+          <form>
+            <div className="form-control w-full">
+              <label className="label">
+                <span className="mb-1">Question</span>
+              </label>
+
+              <Textarea
+                placeholder="e.g. Will the Democrats win the 2024 US presidential election?"
+                className="input input-bordered resize-none"
+                value={question}
+                onChange={(e) => setQuestion(e.target.value || '')}
+              />
+            </div>
+          </form>
+          <NewContract question={question} />
+        </div>
+      </div>
+    </Page>
+  )
+}
 
 // Allow user to create a new contract
-export default function NewContract() {
+export function NewContract(props: { question: string }) {
+  const question = props.question
   const creator = useUser()
 
   useEffect(() => {
@@ -29,7 +60,6 @@ export default function NewContract() {
   }, [])
 
   const [initialProb, setInitialProb] = useState(50)
-  const [question, setQuestion] = useState('')
   const [description, setDescription] = useState('')
 
   const [ante, setAnte] = useState<number | undefined>(undefined)
@@ -41,7 +71,9 @@ export default function NewContract() {
   }, [creator])
 
   const [anteError, setAnteError] = useState<string | undefined>()
-  const [closeDate, setCloseDate] = useState('')
+  // By default, close the market a week from today
+  const weekFromToday = dayjs().add(7, 'day').format('YYYY-MM-DD')
+  const [closeDate, setCloseDate] = useState(weekFromToday)
 
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -82,141 +114,119 @@ export default function NewContract() {
     await router.push(contractPath(result.contract as Contract))
   }
 
-  // const descriptionPlaceholder = `e.g. This market will resolve to “Yes” if, by June 2, 2021, 11:59:59 PM ET, Paxlovid (also known under PF-07321332)...`
+  const descriptionPlaceholder = `e.g. This market resolves to "YES" if, two weeks after closing, the...\n#politics #world`
-  const descriptionPlaceholder = `Provide more detail on how you will resolve this market. (Optional)`
 
   if (!creator) return <></>
 
   return (
-    <Page>
+    <form>
-      <div className="w-full max-w-2xl mx-auto">
+      <Spacer h={4} />
-        <Title text="Create a new prediction market" />
 
-        <div className="bg-gray-100 rounded-lg shadow-md px-6 py-4">
+      <div className="form-control">
-          <form>
+        <label className="label">
-            <div className="form-control w-full">
+          <span className="mb-1">Initial probability</span>
-              <label className="label">
+        </label>
-                <span className="mb-1">Question</span>
+        <Row className="items-center gap-2">
-              </label>
+          <label className="input-group input-group-lg w-fit text-lg">
-
+            <input
-              <Textarea
+              type="number"
-                placeholder="e.g. Will the Democrats win the 2024 US presidential election?"
+              value={initialProb}
-                className="input input-bordered resize-none"
+              className="input input-bordered input-md text-lg"
-                disabled={isSubmitting}
+              disabled={isSubmitting}
-                value={question}
+              min={1}
-                onChange={(e) => setQuestion(e.target.value || '')}
+              max={99}
-              />
+              onChange={(e) =>
-            </div>
+                setInitialProb(parseInt(e.target.value.substring(0, 2)))
-
+              }
-            <Spacer h={4} />
+            />
-
+            <span>%</span>
-            <div className="form-control">
+          </label>
-              <label className="label">
+          <input
-                <span className="mb-1">Initial probability</span>
+            type="range"
-              </label>
+            className="range range-primary"
-              <Row className="items-center gap-2">
+            min={1}
-                <label className="input-group input-group-lg w-fit text-lg">
+            max={99}
-                  <input
+            value={initialProb}
-                    type="number"
+            onChange={(e) => setInitialProb(parseInt(e.target.value))}
-                    value={initialProb}
+          />
-                    className="input input-bordered input-md text-lg"
+        </Row>
-                    disabled={isSubmitting}
-                    min={1}
-                    max={99}
-                    onChange={(e) =>
-                      setInitialProb(parseInt(e.target.value.substring(0, 2)))
-                    }
-                  />
-                  <span>%</span>
-                </label>
-                <input
-                  type="range"
-                  className="range range-primary"
-                  min={1}
-                  max={99}
-                  value={initialProb}
-                  onChange={(e) => setInitialProb(parseInt(e.target.value))}
-                />
-              </Row>
-            </div>
-
-            <Spacer h={4} />
-
-            <div className="form-control">
-              <label className="label">
-                <span className="mb-1">Description</span>
-              </label>
-              <Textarea
-                className="textarea w-full textarea-bordered"
-                rows={3}
-                placeholder={descriptionPlaceholder}
-                value={description}
-                disabled={isSubmitting}
-                onClick={(e) => e.stopPropagation()}
-                onChange={(e) => setDescription(e.target.value || '')}
-              />
-            </div>
-
-            <Spacer h={4} />
-
-            <div className="form-control items-start mb-1">
-              <label className="label gap-2 mb-1">
-                <span>Last trading day</span>
-                <InfoTooltip text="Trading allowed through 11:59 pm local time on this date." />
-              </label>
-              <input
-                type="date"
-                className="input input-bordered"
-                onClick={(e) => e.stopPropagation()}
-                onChange={(e) => setCloseDate(e.target.value || '')}
-                min={new Date().toISOString().split('T')[0]}
-                disabled={isSubmitting}
-                value={closeDate}
-              />
-            </div>
-
-            <Spacer h={4} />
-
-            <div className="form-control items-start mb-1">
-              <label className="label gap-2 mb-1">
-                <span>Market ante</span>
-                <InfoTooltip
-                  text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability. 
-              You earn ${CREATOR_FEE * 100}% of trading volume.`}
-                />
-              </label>
-              <AmountInput
-                amount={ante}
-                minimumAmount={MINIMUM_ANTE}
-                onChange={setAnte}
-                error={anteError}
-                setError={setAnteError}
-                disabled={isSubmitting}
-              />
-            </div>
-
-            <Spacer h={4} />
-
-            <div className="flex justify-end my-4">
-              <button
-                type="submit"
-                className={clsx(
-                  'btn btn-primary',
-                  isSubmitting && 'loading disabled'
-                )}
-                disabled={isSubmitting || !isValid}
-                onClick={(e) => {
-                  e.preventDefault()
-                  submit()
-                }}
-              >
-                {isSubmitting ? 'Creating...' : 'Create market'}
-              </button>
-            </div>
-          </form>
-        </div>
       </div>
-    </Page>
+
+      <Spacer h={4} />
+
+      <div className="form-control items-start mb-1">
+        <label className="label gap-2 mb-1">
+          <span className="mb-1">Description</span>
+          <InfoTooltip text="Optional. Describe how you will resolve this market." />
+        </label>
+        <Textarea
+          className="textarea w-full textarea-bordered"
+          rows={3}
+          placeholder={descriptionPlaceholder}
+          value={description}
+          disabled={isSubmitting}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setDescription(e.target.value || '')}
+        />
+      </div>
+
+      <Spacer h={4} />
+
+      <div className="form-control items-start mb-1">
+        <label className="label gap-2 mb-1">
+          <span>Last trading day</span>
+          <InfoTooltip text="Trading allowed through 11:59 pm local time on this date." />
+        </label>
+        <input
+          type="date"
+          className="input input-bordered"
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => setCloseDate(e.target.value || '')}
+          min={new Date().toISOString().split('T')[0]}
+          disabled={isSubmitting}
+          value={closeDate}
+        />
+      </div>
+
+      <Spacer h={4} />
+
+      <div className="form-control items-start mb-1">
+        <label className="label gap-2 mb-1">
+          <span>Market ante</span>
+          <InfoTooltip
+            text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability. 
+              You earn ${CREATOR_FEE * 100}% of trading volume.`}
+          />
+        </label>
+        <AmountInput
+          amount={ante}
+          minimumAmount={MINIMUM_ANTE}
+          onChange={setAnte}
+          error={anteError}
+          setError={setAnteError}
+          disabled={isSubmitting}
+        />
+      </div>
+
+      <Spacer h={4} />
+
+      <div className="flex justify-end my-4">
+        <button
+          type="submit"
+          className={clsx(
+            'btn btn-primary',
+            isSubmitting && 'loading disabled'
+          )}
+          disabled={isSubmitting || !isValid}
+          onClick={(e) => {
+            e.preventDefault()
+            submit()
+          }}
+        >
+          {isSubmitting ? 'Creating...' : 'Create market'}
+        </button>
+      </div>
+    </form>
   )
 }
 

web/pages/index.tsx

@@ -2,13 +2,10 @@ import React from 'react'
 import _ from 'lodash'
 import {
   Contract,
-  getClosingSoonContracts,
   getHotContracts,
   listAllContracts,
 } from '../lib/firebase/contracts'
-import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
-import { Title } from '../components/title'
 import { ActivityFeed, findActiveContracts } from './activity'
 import {
   getRecentComments,
@@ -16,16 +13,17 @@ import {
   listAllComments,
 } from '../lib/firebase/comments'
 import { Bet, listAllBets } from '../lib/firebase/bets'
-import { ContractsGrid } from '../components/contracts-list'
+import FeedCreate, { FeedPromo } from '../components/feed-create'
+import { Spacer } from '../components/layout/spacer'
+import { Col } from '../components/layout/col'
+import { useUser } from '../hooks/use-user'
 
 export async function getStaticProps() {
-  const [contracts, hotContracts, closingSoonContracts, recentComments] =
+  const [contracts, recentComments, hotContracts] = await Promise.all([
-    await Promise.all([
+    listAllContracts().catch((_) => []),
-      listAllContracts().catch((_) => []),
+    getRecentComments().catch(() => []),
-      getHotContracts().catch(() => []),
+    getHotContracts().catch(() => []),
-      getClosingSoonContracts().catch(() => []),
+  ])
-      getRecentComments().catch(() => []),
-    ])
 
   const activeContracts = findActiveContracts(contracts, recentComments)
   const activeContractBets = await Promise.all(
@@ -41,7 +39,6 @@ export async function getStaticProps() {
       activeContractBets,
       activeContractComments,
       hotContracts,
-      closingSoonContracts,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -53,53 +50,37 @@ const Home = (props: {
   activeContractBets: Bet[][]
   activeContractComments: Comment[][]
   hotContracts: Contract[]
-  closingSoonContracts: Contract[]
 }) => {
   const {
     activeContracts,
     activeContractBets,
     activeContractComments,
     hotContracts,
-    closingSoonContracts,
   } = props
 
+  const user = useUser()
+
   return (
     <Page>
-      <HotMarkets contracts={hotContracts} />
+      <Col className="items-center">
-      <Spacer h={10} />
+        <Col className="max-w-3xl">
-      <ClosingSoonMarkets contracts={closingSoonContracts} />
+          <div className="-mx-2 sm:mx-0">
-      <Spacer h={10} />
+            {user ? (
-      <ActivityFeed
+              <FeedCreate user={user} />
-        contracts={activeContracts}
+            ) : (
-        contractBets={activeContractBets}
+              <FeedPromo hotContracts={hotContracts} />
-        contractComments={activeContractComments}
+            )}
-      />
+            <Spacer h={4} />
+            <ActivityFeed
+              contracts={activeContracts}
+              contractBets={activeContractBets}
+              contractComments={activeContractComments}
+            />
+          </div>
+        </Col>
+      </Col>
     </Page>
   )
 }
 
-const HotMarkets = (props: { contracts: Contract[] }) => {
-  const { contracts } = props
-  if (contracts.length === 0) return <></>
-
-  return (
-    <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
-      <Title className="mt-0" text="🔥 Markets" />
-      <ContractsGrid contracts={contracts} showHotVolume />
-    </div>
-  )
-}
-
-const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
-  const { contracts } = props
-  if (contracts.length === 0) return <></>
-
-  return (
-    <div className="w-full bg-green-50 border-2 border-green-100 p-6 rounded-lg shadow-md">
-      <Title className="mt-0" text="⏰ Closing soon" />
-      <ContractsGrid contracts={contracts} showCloseTime />
-    </div>
-  )
-}
-
 export default Home

web/pages/markets.tsx

@@ -1,25 +1,44 @@
 import _ from 'lodash'
-import { SearchableGrid } from '../components/contracts-list'
+import { ContractsGrid, SearchableGrid } from '../components/contracts-list'
+import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
+import { Title } from '../components/title'
 import { useContracts } from '../hooks/use-contracts'
 import { useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
-import { Contract, listAllContracts } from '../lib/firebase/contracts'
+import {
+  Contract,
+  getClosingSoonContracts,
+  getHotContracts,
+  listAllContracts,
+} from '../lib/firebase/contracts'
 
 export async function getStaticProps() {
-  const contracts = await listAllContracts().catch((_) => {})
+  const [contracts, hotContracts, closingSoonContracts] = await Promise.all([
+    listAllContracts().catch((_) => []),
+    getHotContracts().catch(() => []),
+    getClosingSoonContracts().catch(() => []),
+  ])
 
   return {
     props: {
       contracts,
+      hotContracts,
+      closingSoonContracts,
     },
 
     revalidate: 60, // regenerate after a minute
   }
 }
 
-export default function Markets(props: { contracts: Contract[] }) {
+// TODO: Rename endpoint to "Explore"
+export default function Markets(props: {
+  contracts: Contract[]
+  hotContracts: Contract[]
+  closingSoonContracts: Contract[]
+}) {
   const contracts = useContracts() ?? props.contracts
+  const { hotContracts, closingSoonContracts } = props
   const { query, setQuery, sort, setSort } = useQueryAndSortParams()
 
   return (
@@ -29,6 +48,11 @@ export default function Markets(props: { contracts: Contract[] }) {
         description="Discover what's new, trending, or soon-to-close. Or search among our hundreds of markets."
         url="/markets"
       />
+      <HotMarkets contracts={hotContracts} />
+      <Spacer h={10} />
+      <ClosingSoonMarkets contracts={closingSoonContracts} />
+      <Spacer h={10} />
+
       <SearchableGrid
         contracts={contracts}
         query={query}
@@ -39,3 +63,27 @@ export default function Markets(props: { contracts: Contract[] }) {
     </Page>
   )
 }
+
+const HotMarkets = (props: { contracts: Contract[] }) => {
+  const { contracts } = props
+  if (contracts.length === 0) return <></>
+
+  return (
+    <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
+      <Title className="!mt-0" text="🔥 Markets" />
+      <ContractsGrid contracts={contracts} showHotVolume />
+    </div>
+  )
+}
+
+const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
+  const { contracts } = props
+  if (contracts.length === 0) return <></>
+
+  return (
+    <div className="w-full bg-green-50 border-2 border-green-100 p-6 rounded-lg shadow-md">
+      <Title className="!mt-0" text="⏰ Closing soon" />
+      <ContractsGrid contracts={contracts} showCloseTime />
+    </div>
+  )
+}