Extract signup prompt (#333)

* Extract SignUpPrompt component

* Return null instead of false when not showing SignUpPrompt

* Add trailing newline

* Lint

web/components/bet-panel.tsx

@@ -14,7 +14,7 @@ import {
   formatWithCommas,
 } from 'common/util/format'
 import { Title } from './title'
-import { firebaseLogin, User } from 'web/lib/firebase/users'
+import { User } from 'web/lib/firebase/users'
 import { Bet } from 'common/bet'
 import { APIError, placeBet } from 'web/lib/firebase/api-call'
 import { sellShares } from 'web/lib/firebase/fn-call'
@@ -36,6 +36,7 @@ import {
 } from 'common/calculate-cpmm'
 import { SellRow } from './sell-row'
 import { useSaveShares } from './use-save-shares'
+import { SignUpPrompt } from './sign-up-prompt'
 
 export function BetPanel(props: {
   contract: FullContract<DPM | CPMM, Binary>
@@ -70,14 +71,7 @@ export function BetPanel(props: {
 
         <BuyPanel contract={contract} user={user} />
 
-        {user === null && (
+        <SignUpPrompt />
-          <button
-            className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-            onClick={firebaseLogin}
-          >
-            Sign up to bet!
-          </button>
-        )}
       </Col>
     </Col>
   )
@@ -183,14 +177,7 @@ export function BetPanelSwitcher(props: {
           />
         )}
 
-        {user === null && (
+        <SignUpPrompt />
-          <button
-            className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-            onClick={firebaseLogin}
-          >
-            Sign up to bet!
-          </button>
-        )}
       </Col>
     </Col>
   )

web/components/numeric-bet-panel.tsx

@@ -12,12 +12,13 @@ import { formatPercent, formatMoney } from 'common/util/format'
 
 import { useUser } from '../hooks/use-user'
 import { APIError, placeBet } from '../lib/firebase/api-call'
-import { firebaseLogin, User } from '../lib/firebase/users'
+import { User } from '../lib/firebase/users'
 import { BuyAmountInput } from './amount-input'
 import { BucketInput } from './bucket-input'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
+import { SignUpPrompt } from './sign-up-prompt'
 
 export function NumericBetPanel(props: {
   contract: NumericContract
@@ -32,14 +33,7 @@ export function NumericBetPanel(props: {
 
       <NumericBuyPanel contract={contract} user={user} />
 
-      {user === null && (
+      <SignUpPrompt />
-        <button
-          className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
-          onClick={firebaseLogin}
-        >
-          Sign up to trade!
-        </button>
-      )}
     </Col>
   )
 }

web/components/sign-up-prompt.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { firebaseLogin } from 'web/lib/firebase/users'
+
+export function SignUpPrompt() {
+  const user = useUser()
+
+  return user === null ? (
+    <button
+      className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
+      onClick={firebaseLogin}
+    >
+      Sign up to bet!
+    </button>
+  ) : null
+}