open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use quick vs limit bet in mobile dialog

Browse Source
This commit is contained in:
James Grugett 2022-07-13 18:28:33 -05:00
parent 9240cd3d1c
commit 67b3450924
1 changed files with 41 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
web/components/bet-panel.tsx
View File

@ -1,7 +1,6 @@
import clsx from 'clsx'
import React, { useEffect, useState } from 'react'
import { partition, sum, sumBy } from 'lodash'
import { SwitchHorizontalIcon } from '@heroicons/react/solid'
import { useUser } from 'web/hooks/use-user'
import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
@ -72,30 +71,10 @@ export function BetPanel(props: {
className
)}
>
<Row className="align-center mb-4 justify-between">
<div className="text-4xl">Bet</div>
<Row className="mt-2 items-center gap-2">
<PillButton
selected={!isLimitOrder}
onSelect={() => {
setIsLimitOrder(false)
track('select quick order')
}}
>
Quick
</PillButton>
<PillButton
selected={isLimitOrder}
onSelect={() => {
setIsLimitOrder(true)
track('select limit order')
}}
>
Limit
</PillButton>
</Row>
</Row>
<QuickOrLimitBet
isLimitOrder={isLimitOrder}
setIsLimitOrder={setIsLimitOrder}
/>
<BuyPanel
contract={contract}
user={user}
@ -142,19 +121,10 @@ export function SimpleBetPanel(props: {
'rounded-b-md bg-white px-8 py-6'
)}
>
<Row className="justify-between">
<div className="mb-6 text-2xl">
{isLimitOrder ? <>Limit order</> : <>Place your bet</>}
</div>
<button
className="btn btn-ghost btn-sm text-sm normal-case"
onClick={() => setIsLimitOrder(!isLimitOrder)}
>
<SwitchHorizontalIcon className="inline h-6 w-6" />
</button>
</Row>
<QuickOrLimitBet
isLimitOrder={isLimitOrder}
setIsLimitOrder={setIsLimitOrder}
/>
<BuyPanel
contract={contract}
user={user}
@ -427,6 +397,39 @@ function BuyPanel(props: {
)
}
function QuickOrLimitBet(props: {
isLimitOrder: boolean
setIsLimitOrder: (isLimitOrder: boolean) => void
}) {
const { isLimitOrder, setIsLimitOrder } = props
return (
<Row className="align-center mb-4 justify-between">
<div className="text-4xl">Bet</div>
<Row className="mt-2 items-center gap-2">
<PillButton
selected={!isLimitOrder}
onSelect={() => {
setIsLimitOrder(false)
track('select quick order')
}}
>
Quick
</PillButton>
<PillButton
selected={isLimitOrder}
onSelect={() => {
setIsLimitOrder(true)
track('select limit order')
}}
>
Limit
</PillButton>
</Row>
</Row>
)
}
export function SellPanel(props: {
contract: CPMMBinaryContract | PseudoNumericContract
userBets: Bet[]