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,6 +67,7 @@ export function BetInline(props: {
         error="" // handle error ourselves
         setError={setError}
       />
+      {user && (
         <Button
           color={({ YES: 'green', NO: 'red' } as const)[outcome]}
           size="xs"
@@ -76,6 +80,8 @@ export function BetInline(props: {
             ? 'Success!'
             : 'Submit'}
         </Button>
+      )}
+      <SignUpPrompt size="xs" />
     </Row>
   )
 }

web/components/button.tsx

@@ -1,12 +1,8 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
 
-export function Button(props: {
-  className?: string
-  onClick?: () => void
-  children?: ReactNode
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  color?:
+export type SizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+export type ColorType =
   | 'green'
   | 'red'
   | 'blue'
@@ -15,6 +11,13 @@ export function Button(props: {
   | 'gray'
   | 'gradient'
   | 'gray-white'
+
+export function Button(props: {
+  className?: string
+  onClick?: () => void
+  children?: ReactNode
+  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!'}