PlayMoneyDisclaimer; hide limit orders for signed out users; infobox styling

web/components/bet-panel.tsx

@@ -42,6 +42,7 @@ import { useUnfilledBets } from 'web/hooks/use-bets'
 import { LimitBets } from './limit-bets'
 import { PillButton } from './buttons/pill-button'
 import { YesNoSelector } from './yes-no-selector'
+import { InfoBox } from './info-box'
 
 export function BetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -72,6 +73,7 @@ export function BetPanel(props: {
         <QuickOrLimitBet
           isLimitOrder={isLimitOrder}
           setIsLimitOrder={setIsLimitOrder}
+          hideToggle={!user}
         />
         <BuyPanel
           hidden={isLimitOrder}
@@ -85,7 +87,10 @@ export function BetPanel(props: {
           user={user}
           unfilledBets={unfilledBets}
         />
+
         <SignUpPrompt />
+
+        {!user && <PlayMoneyDisclaimer />}
       </Col>
       {unfilledBets.length > 0 && (
         <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
@@ -94,6 +99,14 @@ export function BetPanel(props: {
   )
 }
 
+const PlayMoneyDisclaimer = () => (
+  <InfoBox
+    title="M$ are play-money"
+    className="mt-4 max-w-md"
+    text="Manifold Dollars are the play currency used by our platform to keep track of your bets. It's completely free for you and your friends to get started!"
+  />
+)
+
 export function SimpleBetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   className?: string
@@ -124,6 +137,7 @@ export function SimpleBetPanel(props: {
         <QuickOrLimitBet
           isLimitOrder={isLimitOrder}
           setIsLimitOrder={setIsLimitOrder}
+          hideToggle={!user}
         />
         <BuyPanel
           hidden={isLimitOrder}
@@ -140,7 +154,10 @@ export function SimpleBetPanel(props: {
           unfilledBets={unfilledBets}
           onBuySuccess={onBetSuccess}
         />
+
         <SignUpPrompt />
+
+        {!user && <PlayMoneyDisclaimer />}
       </Col>
 
       {unfilledBets.length > 0 && (
@@ -688,32 +705,35 @@ function LimitOrderPanel(props: {
 function QuickOrLimitBet(props: {
   isLimitOrder: boolean
   setIsLimitOrder: (isLimitOrder: boolean) => void
+  hideToggle?: boolean
 }) {
-  const { isLimitOrder, setIsLimitOrder } = props
+  const { isLimitOrder, setIsLimitOrder, hideToggle } = props
 
   return (
     <Row className="align-center mb-4 justify-between">
       <div className="text-4xl">Bet</div>
-      <Row className="mt-1 items-center gap-2">
+      {!hideToggle && (
-        <PillButton
+        <Row className="mt-1 items-center gap-2">
-          selected={!isLimitOrder}
+          <PillButton
-          onSelect={() => {
+            selected={!isLimitOrder}
-            setIsLimitOrder(false)
+            onSelect={() => {
-            track('select quick order')
+              setIsLimitOrder(false)
-          }}
+              track('select quick order')
-        >
+            }}
-          Quick
+          >
-        </PillButton>
+            Quick
-        <PillButton
+          </PillButton>
-          selected={isLimitOrder}
+          <PillButton
-          onSelect={() => {
+            selected={isLimitOrder}
-            setIsLimitOrder(true)
+            onSelect={() => {
-            track('select limit order')
+              setIsLimitOrder(true)
-          }}
+              track('select limit order')
-        >
+            }}
-          Limit
+          >
-        </PillButton>
+            Limit
-      </Row>
+          </PillButton>
+        </Row>
+      )}
     </Row>
   )
 }

web/components/info-box.tsx

@@ -20,7 +20,7 @@ export function InfoBox(props: {
         </div>
         <div className="ml-3">
           <h3 className="text-sm font-medium text-black">{title}</h3>
-          <div className="mt-2 text-sm text-black">
+          <div className="mt-2 text-sm text-gray-600">
             <Linkify text={text} />
           </div>
         </div>