Free daily market (#107)

* Allow users a free daily market

* Show confetti on recent created market

* remove unused import

* remove comment

* Did create market -> hook, capitalize buttons

* Check for confetti with interval

* Just check once

* Capitalize create market button on feed

functions/src/create-contract.ts

@@ -1,7 +1,6 @@
 import * as functions from 'firebase-functions'
 import * as admin from 'firebase-admin'
 import * as _ from 'lodash'
-
 import { chargeUser, getUser } from './utils'
 import {
   Binary,
@@ -109,7 +108,16 @@ export const createContract = functions
         tags ?? []
       )
 
-      if (ante) await chargeUser(creator.id, ante)
+      // uses utc time on server:
+      const today = new Date().setHours(0, 0, 0, 0)
+      const userContractsCreatedTodaySnapshot = await firestore
+        .collection(`contracts`)
+        .where('creatorId', '==', userId)
+        .where('createdTime', '>=', today)
+        .get()
+      const isFree = userContractsCreatedTodaySnapshot.size === 0
+
+      if (!isFree && ante) await chargeUser(creator.id, ante)
 
       await contractRef.create(contract)
 

web/components/feed-create.tsx

@@ -141,7 +141,7 @@ export default function FeedCreate(props: {
       {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
       {!isExpanded && (
         <div className="flex justify-end sm:-mt-4">
-          <button className="btn btn-sm" disabled>
+          <button className="btn btn-sm capitalize" disabled>
             Create Market
           </button>
         </div>

web/components/nav/sidebar.tsx

@@ -19,6 +19,7 @@ import { firebaseLogin, firebaseLogout } from '../../lib/firebase/users'
 import { ManifoldLogo } from './manifold-logo'
 import { MenuButton } from './menu'
 import { getNavigationOptions, ProfileSummary } from './profile-menu'
+import { useHasCreatedContractToday } from '../../hooks/use-has-created-contract-today'
 
 const navigation = [
   { name: 'Home', href: '/home', icon: HomeIcon },
@@ -96,6 +97,7 @@ export default function Sidebar() {
   const user = useUser()
   let folds = useFollowedFolds(user) || []
   folds = _.sortBy(folds, 'followCount').reverse()
+  const deservesDailyFreeMarket = !useHasCreatedContractToday(user)
 
   const navigationOptions = user === null ? signedOutNavigation : navigation
   const mobileNavigationOptions =
@@ -159,10 +161,22 @@ export default function Sidebar() {
         />
       </div>
 
+      {deservesDailyFreeMarket ? (
+        <div className=" text-primary mt-4 text-center">
+          Use your daily free market! 🎉
+        </div>
+      ) : (
+        <div />
+      )}
+
       {user && (
-        <Link href={'/create'}>
-          <button className="btn btn-primary btn-md mt-4">Create Market</button>
-        </Link>
+        <div className={'aligncenter flex justify-center'}>
+          <Link href={'/create'}>
+            <button className="btn btn-primary btn-md mt-4 capitalize">
+              Create Market
+            </button>
+          </Link>
+        </div>
       )}
     </nav>
   )

web/hooks/use-has-created-contract-today.ts

@@ -0,0 +1,27 @@
+import { listContracts } from '../lib/firebase/contracts'
+import { useEffect, useState } from 'react'
+import dayjs from 'dayjs'
+import { User } from '../../common/user'
+
+export const useHasCreatedContractToday = (user: User | null | undefined) => {
+  const [hasCreatedContractToday, setHasCreatedContractToday] = useState(false)
+
+  useEffect(() => {
+    // Uses utc time like the server.
+    const todayAtMidnight = dayjs.utc().startOf('day').valueOf()
+
+    async function listUserContractsForToday() {
+      if (!user) return
+
+      const contracts = await listContracts(user.id)
+      const todayContracts = contracts.filter(
+        (contract) => contract.createdTime > todayAtMidnight
+      )
+      setHasCreatedContractToday(todayContracts.length > 0)
+    }
+
+    listUserContractsForToday()
+  }, [user])
+
+  return hasCreatedContractToday
+}

web/package.json

@@ -30,6 +30,7 @@
     "lodash": "4.17.21",
     "next": "12.1.2",
     "react": "17.0.2",
+    "react-confetti": "^6.0.1",
     "react-dom": "17.0.2",
     "react-expanding-textarea": "2.3.5"
   },

web/pages/[username]/[contractSlug].tsx

@@ -33,6 +33,8 @@ import { ContractTabs } from '../../components/contract/contract-tabs'
 import { FirstArgument } from '../../../common/util/types'
 import { DPM, FreeResponse, FullContract } from '../../../common/contract'
 import { contractTextDetails } from '../../components/contract/contract-details'
+import { useWindowSize } from '../../hooks/use-window-size'
+import Confetti from 'react-confetti'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -86,9 +88,21 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
   const { backToHome } = props
 
   const user = useUser()
+  const { width, height } = useWindowSize()
 
   const contract = useContractWithPreload(props.contract)
   const { bets, comments } = props
+  const [showConfetti, setShowConfetti] = useState(false)
+
+  useEffect(() => {
+    const shouldSeeConfetti = !!(
+      user &&
+      contract &&
+      contract.creatorId === user.id &&
+      Date.now() - contract.createdTime < 10 * 1000
+    )
+    setShowConfetti(shouldSeeConfetti)
+  }, [contract, user])
 
   // Sort for now to see if bug is fixed.
   comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
@@ -119,6 +133,15 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
 
   return (
     <Page rightSidebar={rightSidebar}>
+      {showConfetti && (
+        <Confetti
+          width={width ? width : 500}
+          height={height ? height : 500}
+          recycle={false}
+          numberOfPieces={300}
+        />
+      )}
+
       {ogCardProps && (
         <SEO
           title={question}

web/pages/create.tsx

@@ -18,6 +18,7 @@ import { TagsList } from '../components/tags-list'
 import { Row } from '../components/layout/row'
 import { MAX_DESCRIPTION_LENGTH, outcomeType } from '../../common/contract'
 import { formatMoney } from '../../common/util/format'
+import { useHasCreatedContractToday } from '../hooks/use-has-created-contract-today'
 
 export default function Create() {
   const [question, setQuestion] = useState('')
@@ -70,6 +71,9 @@ export function NewContract(props: { question: string; tag?: string }) {
   const tags = parseWordsAsTags(tagText)
 
   const [ante, setAnte] = useState(FIXED_ANTE)
+
+  const deservesDailyFreeMarket = !useHasCreatedContractToday(creator)
+
   // useEffect(() => {
   //   if (ante === null && creator) {
   //     const initialAnte = creator.balance < 100 ? MINIMUM_ANTE : 100
@@ -246,10 +250,14 @@ export function NewContract(props: { question: string; tag?: string }) {
             text={`Cost to create your market. This amount is used to subsidize trading.`}
           />
         </label>
-
-        <div className="label-text text-neutral pl-1">{formatMoney(ante)}</div>
-
-        {ante > balance && (
+        {deservesDailyFreeMarket ? (
+          <div className="label-text text-primary pl-1">FREE</div>
+        ) : (
+          <div className="label-text text-neutral pl-1">
+            {formatMoney(ante)}
+          </div>
+        )}
+        {!deservesDailyFreeMarket && ante > balance && (
           <div className="mb-2 mt-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide">
             <span className="mr-2 text-red-500">Insufficient balance</span>
             <button
@@ -278,7 +286,7 @@ export function NewContract(props: { question: string; tag?: string }) {
         <button
           type="submit"
           className={clsx(
-            'btn btn-primary',
+            'btn btn-primary capitalize',
             isSubmitting && 'loading disabled'
           )}
           disabled={isSubmitting || !isValid}

yarn.lock

@@ -4441,6 +4441,13 @@ raw-body@2.4.2, raw-body@^2.2.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-confetti@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.0.1.tgz#d4f57b5a021dd908a6243b8f63b6009b00818d10"
+  integrity sha512-ZpOTBrqSNhWE4rRXCZ6E6U+wGd7iYHF5MGrqwikoiBpgBq9Akdu0DcLW+FdFnLjyZYC+VfAiV2KeFgYRMyMrkA==
+  dependencies:
+    tween-functions "^1.2.0"
+
 react-dom@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -5154,6 +5161,11 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+tween-functions@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8=
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"