Extract signup prompt (#333)

* Extract SignUpPrompt component

* Return null instead of false when not showing SignUpPrompt

* Add trailing newline

* Lint
This commit is contained in:
Forrest Wolf 2022-05-25 11:25:39 -05:00 committed by GitHub
parent fb237d502d
commit c5763e6ec3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 26 deletions

View File

@ -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 && (
<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>
)}
<SignUpPrompt />
</Col>
</Col>
)
@ -183,14 +177,7 @@ export function BetPanelSwitcher(props: {
/>
)}
{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>
)}
<SignUpPrompt />
</Col>
</Col>
)

View File

@ -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 && (
<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>
)}
<SignUpPrompt />
</Col>
)
}

View File

@ -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
}