Merge branch 'main' into create-contract

web/components/bet-panel.tsx

@@ -1,15 +1,20 @@
 import React, { useState } from 'react'
 import { Contract } from '../lib/firebase/contracts'
-import { Button } from './button'
 import { Col } from './layout/col'
+import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import { YesNoSelector } from './yes-no-selector'
 
 export function BetPanel(props: { contract: Contract; className?: string }) {
   const { contract, className } = props
 
-  const [betChoice, setBetChoice] = useState<'yes' | 'no'>('yes')
-  const [shares, setShares] = useState(0)
+  const [betChoice, setBetChoice] = useState<'YES' | 'NO'>('YES')
+  const [betAmount, setBetAmount] = useState<number | undefined>(undefined)
+
+  function onBetChange(str: string) {
+    const amount = parseInt(str)
+    setBetAmount(isNaN(amount) ? undefined : amount)
+  }
 
   return (
     <Col className={'bg-gray-600 p-6 rounded ' + className}>
@@ -24,29 +29,37 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
 
       <Spacer h={4} />
 
-      <div className="p-2 font-medium">Shares</div>
-      <div className="p-2">
+      <div className="p-2 font-medium">Bet amount</div>
+      <Row className="p-2 items-center">
         <input
           className="input input-bordered input-md"
           style={{ maxWidth: 80 }}
           type="text"
-          value={shares}
-          onChange={(e) => setShares(parseInt(e.target.value) || 0)}
-          onFocus={(e) => e.target.select()}
+          placeholder="0"
+          value={betAmount ?? ''}
+          onChange={(e) => onBetChange(e.target.value)}
         />
-      </div>
+        <div className="ml-3">points</div>
+      </Row>
 
-      <Spacer h={4} />
+      {!!betAmount && (
+        <>
+          <Spacer h={4} />
 
-      <div className="p-2 font-medium">Price</div>
-      <div className="px-2">
-        {shares * (betChoice === 'yes' ? 57 : 43)} points
-      </div>
+          <div className="p-2 font-medium">Average price</div>
+          <div className="px-2">{betChoice === 'YES' ? 0.57 : 0.43} points</div>
 
-      <Spacer h={6} />
+          <Spacer h={2} />
 
-      {shares !== 0 && (
-        <Button color={shares ? 'green' : 'deemphasized'}>Place bet</Button>
+          <div className="p-2 font-medium">Estimated winnings</div>
+          <div className="px-2">
+            {Math.floor(betAmount / (betChoice === 'YES' ? 0.57 : 0.43))} points
+          </div>
+
+          <Spacer h={6} />
+
+          <button className="btn btn-primary">Place bet</button>
+        </>
       )}
     </Col>
   )

web/components/header.tsx

@@ -6,7 +6,7 @@ import { firebaseLogin } from '../lib/firebase/users'
 const navigation = [
   {
     name: 'About',
-    href: 'https://mantic.notion.site/About-Mantic-Markets-09bdde9044614e62a27477b4b1bf77ea',
+    href: 'https://mantic.notion.site/About-Mantic-Markets-46a1a0fb6e294011a8b6b582e276359f',
   },
   { name: 'Simulator', href: '/simulator' },
 ]

web/components/hero.tsx

@@ -18,8 +18,7 @@ export const Hero = () => {
                     </span>
                   </h1>
                   <p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-                    Create and resolve your own prediction markets to earn a
-                    percent of the bet volume. Powered by Solana.
+                    Forecast the future with play-money prediction markets for you and your community
                   </p>
                   <div className="mt-10 sm:mt-12">
                     <ConvertKitEmailForm />

web/components/yes-no-selector.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import { Button } from './button'
 import { Row } from './layout/row'
 
 export function YesNoSelector(props: {
-  selected: 'yes' | 'no'
-  onSelect: (selected: 'yes' | 'no') => void
+  selected: 'YES' | 'NO'
+  onSelect: (selected: 'YES' | 'NO') => void
   yesLabel?: string
   noLabel?: string
   className?: string
@@ -14,17 +13,17 @@ export function YesNoSelector(props: {
   return (
     <Row className={className}>
       <Button
-        color={selected === 'yes' ? 'green' : 'deemphasized'}
+        color={selected === 'YES' ? 'green' : 'deemphasized'}
         hideFocusRing
-        onClick={() => onSelect('yes')}
+        onClick={() => onSelect('YES')}
       >
         {yesLabel ?? 'Yes'}
       </Button>
 
       <Button
-        color={selected === 'no' ? 'red' : 'deemphasized'}
+        color={selected === 'NO' ? 'red' : 'deemphasized'}
         hideFocusRing
-        onClick={() => onSelect('no')}
+        onClick={() => onSelect('NO')}
         className="ml-3"
       >
         {noLabel ?? 'No'}
@@ -32,3 +31,36 @@ export function YesNoSelector(props: {
     </Row>
   )
 }
+
+function Button(props: {
+  className?: string
+  onClick?: () => void
+  color: 'green' | 'red' | 'deemphasized'
+  hideFocusRing?: boolean
+  children?: any
+}) {
+  const { className, onClick, children, color, hideFocusRing } = props
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        'inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
+        !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
+        color === 'green' &&
+          'bg-green-500 hover:bg-green-600 focus:ring-green-500',
+        color === 'red' && 'bg-red-500 hover:bg-red-600 focus:ring-red-500',
+        color === 'deemphasized' &&
+          'bg-transparent hover:bg-gray-500 focus:ring-gray-400',
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
+function classNames(...classes: any[]) {
+  return classes.filter(Boolean).join(' ')
+}

web/package-lock.json

@@ -8,12 +8,12 @@
       "dependencies": {
         "@headlessui/react": "1.4.2",
         "@heroicons/react": "1.0.5",
-        "chart.js": "^3.6.1",
-        "daisyui": "^1.16.2",
-        "firebase": "^9.6.0",
+        "chart.js": "3.6.1",
+        "daisyui": "1.16.2",
+        "firebase": "9.6.0",
         "next": "12.0.4",
         "react": "17.0.2",
-        "react-chartjs-2": "^4.0.0",
+        "react-chartjs-2": "4.0.0",
         "react-dom": "17.0.2"
       },
       "devDependencies": {