Show signup button if not signed up

web/components/bet-inline.tsx

@@ -9,6 +9,8 @@ import { BuyAmountInput } from './amount-input'
 import { Button } from './button'
 import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
+import { useUser } from 'web/hooks/use-user'
+import { SignUpPrompt } from './sign-up-prompt'
 
 export function BetInline(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -16,8 +18,9 @@ export function BetInline(props: {
 }) {
   const { contract, className } = props
 
-  const [outcome, setOutcome] = useState<'YES' | 'NO'>('YES')
+  const user = useUser()
 
+  const [outcome, setOutcome] = useState<'YES' | 'NO'>('YES')
   const [amount, setAmount] = useState<number>()
   const [error, setError] = useState<string>()
 
@@ -64,18 +67,21 @@ export function BetInline(props: {
         error="" // handle error ourselves
         setError={setError}
       />
-      <Button
-        color={({ YES: 'green', NO: 'red' } as const)[outcome]}
-        size="xs"
-        disabled={betDisabled}
-        onClick={() => submitBet.mutate()}
-      >
-        {submitBet.isLoading
-          ? 'Submitting'
-          : submitBet.isSuccess
-          ? 'Success!'
-          : 'Submit'}
-      </Button>
+      {user && (
+        <Button
+          color={({ YES: 'green', NO: 'red' } as const)[outcome]}
+          size="xs"
+          disabled={betDisabled}
+          onClick={() => submitBet.mutate()}
+        >
+          {submitBet.isLoading
+            ? 'Submitting'
+            : submitBet.isSuccess
+            ? 'Success!'
+            : 'Submit'}
+        </Button>
+      )}
+      <SignUpPrompt size="xs" />
     </Row>
   )
 }

web/components/button.tsx

@@ -1,20 +1,23 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
 
+export type SizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+export type ColorType =
+  | 'green'
+  | 'red'
+  | 'blue'
+  | 'indigo'
+  | 'yellow'
+  | 'gray'
+  | 'gradient'
+  | 'gray-white'
+
 export function Button(props: {
   className?: string
   onClick?: () => void
   children?: ReactNode
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  color?:
-    | 'green'
-    | 'red'
-    | 'blue'
-    | 'indigo'
-    | 'yellow'
-    | 'gray'
-    | 'gradient'
-    | 'gray-white'
+  size?: SizeType
+  color?: ColorType
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean
 }) {

web/components/sign-up-prompt.tsx

@@ -2,17 +2,21 @@ import React from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { withTracking } from 'web/lib/service/analytics'
-import { Button } from './button'
+import { Button, SizeType } from './button'
 
-export function SignUpPrompt(props: { label?: string; className?: string }) {
-  const { label, className } = props
+export function SignUpPrompt(props: {
+  label?: string
+  className?: string
+  size?: SizeType
+}) {
+  const { label, className, size = 'lg' } = props
   const user = useUser()
 
   return user === null ? (
     <Button
       onClick={withTracking(firebaseLogin, 'sign up to bet')}
       className={className}
-      size="lg"
+      size={size}
       color="gradient"
     >
       {label ?? 'Sign up to bet!'}