Show confetti on recent created market

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,7 +33,9 @@ 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'
+import dayjs from 'dayjs'
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
   params: { username: string; contractSlug: string }
@@ -86,6 +88,7 @@ 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
@@ -119,6 +122,17 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
 
   return (
     <Page rightSidebar={rightSidebar}>
+      {user &&
+        contract.creatorId === user.id &&
+        Date.now() - contract.createdTime < 10 * 1000 && (
+          <Confetti
+            width={width ? width : 500}
+            height={height ? height : 500}
+            recycle={false}
+            numberOfPieces={300}
+          />
+        )}
+
       {ogCardProps && (
         <SEO
           title={question}

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"