mobile styles for new features

This commit is contained in:
saml33 2021-09-26 23:20:51 +10:00
parent 76859b83dc
commit 659e48c99f
26 changed files with 275 additions and 648 deletions

View File

@ -1,5 +1,3 @@
// import { useViewport } from '../hooks/useViewport'
// import { breakpoints } from './TradePageGrid'
import { FunctionComponent } from 'react'
interface ButtonGroupProps {
@ -15,8 +13,6 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
values,
onChange,
}) => {
// const { width } = useViewport()
// const isMobile = width ? width < breakpoints.sm : false
return (
<div className="bg-th-bkg-3 rounded-md">
<div className="flex relative">
@ -37,7 +33,7 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
${
v === activeValue
? `text-th-primary`
: `text-th-fgd-1 opacity-50 hover:opacity-100`
: `text-th-fgd-1 opacity-70 hover:opacity-100`
}
`}
key={`${v}${i}`}

View File

@ -15,8 +15,8 @@ const HiddenCheckbox = styled.input`
width: 1px;
`
const Checkbox = ({ checked, ...props }) => (
<>
const Checkbox = ({ checked, children, ...props }) => (
<label className="cursor-pointer flex items-center">
<HiddenCheckbox checked={checked} {...props} type="checkbox" />
<div
className={`${
@ -27,7 +27,8 @@ const Checkbox = ({ checked, ...props }) => (
className={`${checked ? 'block' : 'hidden'} h-4 w-4 text-th-primary`}
/>
</div>
</>
<span className="ml-2 text-xs text-th-fgd-3">{children}</span>
</label>
)
export default Checkbox

View File

@ -29,9 +29,11 @@ export const FlipCardInner = styled.div<any>`
`
export const FlipCardFront = styled.div`
position: absolute;
width: 100%;
height: 100%;
@media screen and (min-width: 768px) {
height: 100%;
position: absolute;
}
`
export const FlipCardBack = styled.div`
@ -45,5 +47,4 @@ export const StyledFloatingElement = styled(FloatingElement)`
animation: ${css`
${fadeIn} 1s linear
`};
overflow: auto;
`

View File

@ -41,7 +41,7 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
const wallet = useMangoStore((s) => s.wallet.current)
return (
<div
className={`thin-scroll bg-th-bkg-2 rounded-lg p-2.5 sm:p-4 overflow-auto overflow-x-hidden relative ${className}`}
className={`thin-scroll bg-th-bkg-2 rounded-lg p-2.5 md:p-4 overflow-auto overflow-x-hidden relative ${className}`}
>
{!connected && showConnect ? (
<div className="absolute top-0 left-0 w-full h-full z-10">

View File

@ -30,8 +30,7 @@ const Input = ({
<div className={`flex relative ${wrapperClassName}`}>
{prefix ? (
<div
className={`flex items-center justify-end p-2 border border-r-0
border-th-fgd-4 bg-th-bkg-2 text-xs rounded-md rounded-r-none text-right ${prefixClassName}`}
className={`absolute left-2 top-1/2 transform -translate-y-1/2 ${prefixClassName}`}
>
{prefix}
</div>
@ -40,7 +39,7 @@ const Input = ({
type={type}
value={value}
onChange={onChange}
className={`${className} pb-px px-2 flex-1 bg-th-bkg-1 rounded-md h-10 text-th-fgd-1 w-full
className={`${className} bg-th-bkg-1 pb-px px-2 flex-1 rounded-md h-10 text-th-fgd-1 w-full
border ${
error ? 'border-th-red' : 'border-th-fgd-4'
} default-transition hover:border-th-primary
@ -50,7 +49,7 @@ const Input = ({
? 'bg-th-bkg-3 cursor-not-allowed hover:border-th-fgd-4 text-th-fgd-3'
: ''
}
${prefix ? 'rounded-l-none' : ''}`}
${prefix ? 'pl-7' : ''}`}
disabled={disabled}
{...props}
/>

View File

@ -12,7 +12,7 @@ import FloatingElement from '../components/FloatingElement'
import Orderbook from '../components/Orderbook'
import AccountInfo from './AccountInfo'
import UserMarketInfo from './UserMarketInfo'
import TradeForm from './TradeForm'
import TradeForm from './trade_form/TradeForm'
import UserInfo from './UserInfo'
import RecentMarketTrades from './RecentMarketTrades'
import useMangoStore from '../stores/useMangoStore'

View File

@ -1,90 +0,0 @@
import { Listbox } from '@headlessui/react'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
import { useViewport } from '../hooks/useViewport'
import { breakpoints } from './TradePageGrid'
const TradeType = ({
value,
onChange,
offerTriggers = false,
className = '',
}) => {
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const TRADE_TYPES = ['Limit', 'Market']
if (offerTriggers)
TRADE_TYPES.push(
'Stop Loss',
'Stop Limit',
'Take Profit',
'Take Profit Limit'
)
return (
<div className={`relative ${className}`}>
{!isMobile ? (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<Listbox.Button
className={`font-normal h-full w-full bg-th-bkg-1 border border-th-fgd-4 p-2 hover:border-th-primary rounded-md focus:outline-none focus:border-th-primary`}
>
<div className={`flex items-center justify-between space-x-4`}>
<span>{value}</span>
{open ? (
<ChevronUpIcon className={`h-5 w-5 mr-1 text-th-primary`} />
) : (
<ChevronDownIcon
className={`h-5 w-5 mr-1 text-th-primary`}
/>
)}
</div>
</Listbox.Button>
{open ? (
<Listbox.Options
static
className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md text-left`}
>
{TRADE_TYPES.map((type) => (
<Listbox.Option key={type} value={type}>
{({ selected }) => (
<div
className={`p-2 hover:bg-th-bkg-2 hover:cursor-pointer tracking-wider ${
selected && `text-th-primary`
}`}
>
{type}
</div>
)}
</Listbox.Option>
))}
</Listbox.Options>
) : null}
</>
)}
</Listbox>
) : (
<div className="flex">
{TRADE_TYPES.slice(0, 2).map((tradeType) => (
<div
key={tradeType}
className={`px-2 py-2 ml-2 rounded-md cursor-pointer default-transition bg-th-bkg-4
${
value === tradeType
? `ring-1 ring-inset ring-th-primary text-th-primary`
: `text-th-fgd-1 opacity-50 hover:opacity-100`
}
`}
onClick={() => onChange(tradeType)}
>
{tradeType}
</div>
))}
</div>
)}
</div>
)
}
export default TradeType

View File

@ -1,12 +1,12 @@
import { useState } from 'react'
import { useMemo, useState } from 'react'
import { Disclosure } from '@headlessui/react'
import dynamic from 'next/dynamic'
import { XIcon } from '@heroicons/react/outline'
import useMangoStore from '../../stores/useMangoStore'
import { PerpMarket } from '@blockworks-foundation/mango-client'
import { getWeights, PerpMarket } from '@blockworks-foundation/mango-client'
import { CandlesIcon } from '../icons'
import SwipeableTabs from './SwipeableTabs'
import TradeForm from '../TradeForm'
import AdvancedTradeForm from '../trade_form/AdvancedTradeForm'
import Orderbook from '../Orderbook'
import MarketBalances from '../MarketBalances'
import MarketDetails from '../MarketDetails'
@ -25,6 +25,7 @@ const MobileTradePage = () => {
const [viewIndex, setViewIndex] = useState(0)
const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const connected = useMangoStore((s) => s.wallet.connected)
const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
const baseSymbol = marketConfig.baseSymbol
@ -34,6 +35,15 @@ const MobileTradePage = () => {
setViewIndex(index)
}
const initLeverage = useMemo(() => {
if (!mangoGroup || !marketConfig) return 1
const ws = getWeights(mangoGroup, marketConfig.marketIndex, 'Init')
const w =
marketConfig.kind === 'perp' ? ws.perpAssetWeight : ws.spotAssetWeight
return Math.round((100 * -1) / (w.toNumber() - 1)) / 100
}, [mangoGroup, marketConfig])
const TABS =
selectedMarket instanceof PerpMarket
? ['Trade', 'Details', 'Position', 'Orders']
@ -59,6 +69,9 @@ const MobileTradePage = () => {
{isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
</div>
</div>
<span className="border border-th-primary ml-2 px-1 py-0.5 rounded text-xs text-th-primary">
{initLeverage}x
</span>
</div>
<Disclosure>
{({ open }) => (
@ -72,7 +85,7 @@ const MobileTradePage = () => {
)}
</div>
</Disclosure.Button>
<Disclosure.Panel className="pt-3">
<Disclosure.Panel>
<div className="bg-th-bkg-2 h-96 mb-2 p-2 rounded-lg">
<TVChartContainer />
</div>
@ -90,7 +103,7 @@ const MobileTradePage = () => {
<div>
<div className="bg-th-bkg-2 grid grid-cols-12 grid-rows-1 gap-4 mb-2 px-2 py-3 rounded-lg">
<div className="col-span-7">
<TradeForm />
<AdvancedTradeForm />
</div>
<div className="col-span-5">
<Orderbook depth={8} />

View File

@ -1,33 +1,38 @@
import { useMemo, useState, useEffect, useRef } from 'react'
import useIpAddress from '../hooks/useIpAddress'
import useIpAddress from '../../hooks/useIpAddress'
import {
getMarketIndexBySymbol,
getTokenBySymbol,
I80F48,
PerpMarket,
} from '@blockworks-foundation/mango-client'
import { notify } from '../utils/notifications'
import { calculateTradePrice, getDecimalCount } from '../utils'
import { floorToDecimal } from '../utils/index'
import useMangoStore from '../stores/useMangoStore'
import Button from './Button'
import { notify } from '../../utils/notifications'
import { calculateTradePrice, getDecimalCount } from '../../utils'
import { floorToDecimal } from '../../utils/index'
import useMangoStore from '../../stores/useMangoStore'
import Button from '../Button'
import TradeType from './TradeType'
import Input from './Input'
import Switch from './Switch'
import Input from '../Input'
import { Market } from '@project-serum/serum'
import Big from 'big.js'
import MarketFee from './MarketFee'
import LeverageSlider from './LeverageSlider'
import Loading from './Loading'
import Tooltip from './Tooltip'
import { useViewport } from '../hooks/useViewport'
import { breakpoints } from './TradePageGrid'
import MarketFee from '../MarketFee'
import Loading from '../Loading'
import Tooltip from '../Tooltip'
import OrderSideTabs from './OrderSideTabs'
import { ElementTitle } from './styles'
import ButtonGroup from './ButtonGroup'
import { ElementTitle } from '../styles'
import ButtonGroup from '../ButtonGroup'
import SlippageWarning from './SlippageWarning'
import Checkbox from '../Checkbox'
import { useViewport } from '../../hooks/useViewport'
import { breakpoints } from '../TradePageGrid'
export default function AdvancedTradeForm({ initLeverage }) {
interface AdvancedTradeFormProps {
initLeverage?: number
}
export default function AdvancedTradeForm({
initLeverage,
}: AdvancedTradeFormProps) {
const set = useMangoStore((s) => s.set)
const { ipAllowed } = useIpAddress()
const connected = useMangoStore((s) => s.wallet.connected)
@ -47,6 +52,8 @@ export default function AdvancedTradeForm({ initLeverage }) {
groupConfig,
marketConfig.baseSymbol
)
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const {
side,
@ -70,9 +77,6 @@ export default function AdvancedTradeForm({ initLeverage }) {
'Take Profit Limit',
].includes(tradeType)
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const [postOnly, setPostOnly] = useState(false)
const [ioc, setIoc] = useState(false)
const [submitting, setSubmitting] = useState(false)
@ -478,30 +482,30 @@ export default function AdvancedTradeForm({ initLeverage }) {
submitting ||
!mangoAccount
return !isMobile ? (
return (
<div className="flex flex-col h-full">
<ElementTitle>
<ElementTitle className="hidden md:flex">
{marketConfig.name}
<span className="border border-th-primary ml-2 px-1 py-0.5 rounded text-xs text-th-primary">
{initLeverage}x
</span>
</ElementTitle>
<OrderSideTabs onChange={setSide} side={side} />
<div className="grid grid-cols-12 gap-2 text-left">
<div className="col-span-2 flex items-center">
<label className="text-xs text-th-fgd-3">Type</label>
<div className="grid grid-cols-12 md:gap-2 text-left">
<div className="col-span-12 md:col-span-2 flex items-center">
<label className="text-xxs md:text-xs text-th-fgd-3">Type</label>
</div>
<div className="col-span-10">
<div className="col-span-12 md:col-span-10 pb-2 md:pb-0">
<TradeType
onChange={onTradeTypeChange}
value={tradeType}
offerTriggers={isPerpMarket}
/>
</div>
<div className="col-span-2 flex items-center">
<label className="text-xs text-th-fgd-3">Price</label>
<div className="col-span-12 md:col-span-2 flex items-center">
<label className="text-xxs md:text-xs text-th-fgd-3">Price</label>
</div>
<div className="col-span-10">
<div className="col-span-12 md:col-span-10 pb-2 md:pb-0">
<Input
type="number"
min="0"
@ -509,7 +513,7 @@ export default function AdvancedTradeForm({ initLeverage }) {
onChange={(e) => onSetPrice(e.target.value)}
value={price}
disabled={isMarketOrder}
placeholder={tradeType === 'Market' ? 'Market Price' : null}
placeholder={tradeType === 'Market' ? markPrice : null}
prefix={
<img
src={`/assets/icons/${groupConfig.quoteSymbol.toLowerCase()}.svg`}
@ -521,10 +525,12 @@ export default function AdvancedTradeForm({ initLeverage }) {
</div>
{isTriggerOrder && (
<>
<div className="col-span-2 flex items-center">
<label className="text-xs text-th-fgd-3">Trigger Price</label>
<div className="col-span-12 md:col-span-2 flex items-center">
<label className="text-xxs md:text-xs text-th-fgd-3">
Trigger Price
</label>
</div>
<div className="col-span-10">
<div className="col-span-12 md:col-span-10 pb-2 md:pb-0">
<Input
type="number"
min="0"
@ -542,10 +548,10 @@ export default function AdvancedTradeForm({ initLeverage }) {
</div>
</>
)}
<div className="col-span-2 flex items-center">
<label className="text-xs text-th-fgd-3">Size</label>
<div className="col-span-12 md:col-span-2 flex items-center">
<label className="text-xxs md:text-xs text-th-fgd-3">Size</label>
</div>
<div className="col-span-10">
<div className="col-span-12 md:col-span-10 pb-2 md:pb-0">
<Input.Group className="-mb-1">
<Input
type="number"
@ -579,87 +585,81 @@ export default function AdvancedTradeForm({ initLeverage }) {
/>
</Input.Group>
</div>
<div className="col-span-10 col-start-3">
<div className="col-span-12 md:col-span-10 md:col-start-3">
<ButtonGroup
activeValue={positionSizePercent}
onChange={(p) => handleSetPositionSize(p)}
unit="%"
values={['10', '25', '50', '75', '100']}
values={
isMobile
? ['10', '25', '50', '75']
: ['10', '25', '50', '75', '100']
}
/>
{side === 'sell' ? (
roundedDeposits > 0 ? (
<div className="text-th-fgd-3 text-xs tracking-normal mt-2">
<span>{closeDepositString}</span>
</div>
) : null
) : roundedBorrows > 0 ? (
<div className="text-th-fgd-3 text-xs tracking-normal mt-2">
<span>{roundedDeposits > 0 ? closeDepositString : null}</span>
<span>{closeBorrowString}</span>
</div>
) : (
<div className="text-th-fgd-3 text-xs tracking-normal mt-2">
<span>{roundedBorrows > 0 ? closeBorrowString : null}</span>
</div>
)}
{/* <LeverageSlider
onChange={(e) => onSetBaseSize(e)}
value={baseSize ? baseSize : 0}
step={parseFloat(minOrderSize)}
disabled={false}
side={side}
decimalCount={sizeDecimalCount}
price={calculateTradePrice(
tradeType,
orderbook,
baseSize ? baseSize : 0,
side,
price,
triggerPrice
)}
/> */}
<div className="flex">
) : null}
<div className="sm:flex">
{isLimitOrder ? (
<>
<div className="mr-4 mt-2">
<div className="flex">
<div className="mr-4 mt-4">
<Tooltip
className="hidden md:block"
delay={250}
placement="left"
content="Post only orders are guaranteed to be the maker order or else it will be canceled."
>
<Switch
className="text-th-fgd-3 text-xs"
<Checkbox
checked={postOnly}
onChange={postOnChange}
onChange={(e) => postOnChange(e.target.checked)}
>
POST
</Switch>
</Checkbox>
</Tooltip>
</div>
<div className="mr-4 mt-2">
<div className="mr-4 mt-4">
<Tooltip
className="hidden md:block"
delay={250}
placement="left"
content="Immediate or cancel orders are guaranteed to be the taker or it will be canceled."
>
<Switch
className="text-th-fgd-3 text-xs"
checked={ioc}
onChange={iocOnChange}
>
IOC
</Switch>
<div className="flex items-center text-th-fgd-3 text-xs">
<Checkbox
checked={ioc}
onChange={(e) => iocOnChange(e.target.checked)}
>
IOC
</Checkbox>
</div>
</Tooltip>
</div>
</>
</div>
) : null}
{marketConfig.kind === 'perp' && !isTriggerOrder ? (
<Tooltip
delay={250}
placement="left"
content="Reduce only orders will only reduce your overall position."
>
<Switch
className="mt-2 text-th-fgd-3 text-xs"
checked={reduceOnly}
onChange={reduceOnChange}
<div className="mt-4">
<Tooltip
className="hidden md:block"
delay={250}
placement="left"
content="Reduce only orders will only reduce your overall position."
>
Reduce Only
</Switch>
</Tooltip>
<Checkbox
checked={reduceOnly}
onChange={(e) => reduceOnChange(e.target.checked)}
>
Reduce Only
</Checkbox>
</Tooltip>
</div>
) : null}
</div>
<div className={`flex pt-4`}>
@ -679,18 +679,24 @@ export default function AdvancedTradeForm({ initLeverage }) {
</div>
) : side.toLowerCase() === 'buy' ? (
market instanceof PerpMarket ? (
`${baseSize > 0 ? 'Long ' + baseSize : 'Long '} ${
marketConfig.name
}`
<>
{baseSize > 0 ? 'Long ' + baseSize : 'Long '}{' '}
<span className="whitespace-nowrap">
{marketConfig.name}
</span>
</>
) : (
`${baseSize > 0 ? 'Buy ' + baseSize : 'Buy '} ${
marketConfig.baseSymbol
}`
)
) : market instanceof PerpMarket ? (
`${baseSize > 0 ? 'Short ' + baseSize : 'Short '} ${
marketConfig.name
}`
<>
{baseSize > 0 ? 'Short ' + baseSize : 'Short '}{' '}
<span className="whitespace-nowrap">
{marketConfig.name}
</span>
</>
) : (
`${baseSize > 0 ? 'Sell ' + baseSize : 'Sell '} ${
marketConfig.baseSymbol
@ -704,7 +710,7 @@ export default function AdvancedTradeForm({ initLeverage }) {
)}
</div>
{tradeType === 'Market' ? (
<div className="col-span-10 col-start-3 pt-2">
<div className="col-span-12 md:col-span-10 md:col-start-3 pt-2">
<SlippageWarning slippage={0.2} />
</div>
) : null}
@ -714,187 +720,5 @@ export default function AdvancedTradeForm({ initLeverage }) {
</div>
</div>
</div>
) : (
<div className="flex flex-col h-full">
<div className={`flex pb-3 text-base text-th-fgd-4`}>
<button
onClick={() => setSide('buy')}
className={`flex-1 outline-none focus:outline-none`}
>
<div
className={`hover:text-th-green pb-1 transition-colors duration-500
${
side === 'buy'
? `text-th-green hover:text-th-green border-b-2 border-th-green`
: undefined
}`}
>
Buy
</div>
</button>
<button
onClick={() => setSide('sell')}
className={`flex-1 outline-none focus:outline-none`}
>
<div
className={`hover:text-th-red pb-1 transition-colors duration-500
${
side === 'sell'
? `text-th-red hover:text-th-red border-b-2 border-th-red`
: undefined
}
`}
>
Sell
</div>
</button>
</div>
<div className="pb-3">
<label className="block mb-1 text-th-fgd-3 text-xs">Price</label>
<Input
type="number"
min="0"
step={tickSize}
onChange={(e) => onSetPrice(e.target.value)}
value={price}
disabled={tradeType === 'Market'}
suffix={
<img
src={`/assets/icons/${groupConfig.quoteSymbol.toLowerCase()}.svg`}
width="16"
height="16"
/>
}
/>
</div>
<div className="flex items-center justify-between pb-3">
<label className="text-th-fgd-3 text-xs">Type</label>
<TradeType
onChange={onTradeTypeChange}
value={tradeType}
className=""
/>
</div>
<label className="block mb-1 text-th-fgd-3 text-xs">Size</label>
<div className="grid grid-cols-2 grid-rows-1 gap-2">
<div className="col-span-1">
<Input
type="number"
min="0"
step={minOrderSize}
onChange={(e) => onSetBaseSize(e.target.value)}
value={baseSize}
suffix={
<img
src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
width="16"
height="16"
/>
}
/>
</div>
<div className="col-span-1">
<Input
type="number"
min="0"
step={minOrderSize}
onChange={(e) => onSetQuoteSize(e.target.value)}
value={quoteSize}
suffix={
<img
src={`/assets/icons/${groupConfig.quoteSymbol.toLowerCase()}.svg`}
width="16"
height="16"
/>
}
/>
</div>
</div>
<LeverageSlider
onChange={(e) => onSetBaseSize(e)}
value={baseSize ? baseSize : 0}
step={parseFloat(minOrderSize)}
disabled={false}
side={side}
decimalCount={sizeDecimalCount}
price={calculateTradePrice(
tradeType,
orderbook,
baseSize ? baseSize : 0,
side,
price,
triggerPrice
)}
/>
{tradeType !== 'Market' ? (
<div className="flex mt-2">
<Switch checked={postOnly} onChange={postOnChange}>
POST
</Switch>
<div className="ml-4">
<Switch checked={ioc} onChange={iocOnChange}>
IOC
</Switch>
</div>
</div>
) : null}
<div className={`flex py-4`}>
{ipAllowed ? (
side === 'buy' ? (
<Button
disabled={disabledTradeButton}
onClick={onSubmit}
className={`${
!disabledTradeButton
? 'bg-th-bkg-2 border border-th-green hover:border-th-green-dark'
: 'border border-th-bkg-4'
} text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark flex-grow`}
>
{submitting ? (
<div className="w-full">
<Loading className="mx-auto" />
</div>
) : (
`${baseSize > 0 ? 'Buy ' + baseSize : 'Buy '} ${
marketConfig.name.includes('PERP')
? marketConfig.name
: marketConfig.baseSymbol
}`
)}
</Button>
) : (
<Button
disabled={disabledTradeButton}
onClick={onSubmit}
className={`${
!disabledTradeButton
? 'bg-th-bkg-2 border border-th-red hover:border-th-red-dark'
: 'border border-th-bkg-4'
} text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
>
{submitting ? (
<div className="w-full">
<Loading className="mx-auto" />
</div>
) : (
`${baseSize > 0 ? 'Sell ' + baseSize : 'Sell '} ${
marketConfig.name.includes('PERP')
? marketConfig.name
: marketConfig.baseSymbol
}`
)}
</Button>
)
) : (
<Button disabled className="flex-grow">
<span>Country Not Allowed</span>
</Button>
)}
</div>
<div className="flex text-xs text-th-fgd-4 px-6 mt-2.5">
<MarketFee />
</div>
</div>
)
}

View File

@ -1,6 +1,6 @@
import { FunctionComponent } from 'react'
import { PerpMarket } from '@blockworks-foundation/mango-client'
import useMangoStore from '../stores/useMangoStore'
import useMangoStore from '../../stores/useMangoStore'
interface OrderSideTabsProps {
onChange: (x) => void
@ -13,7 +13,7 @@ const OrderSideTabs: FunctionComponent<OrderSideTabsProps> = ({
}) => {
const market = useMangoStore((s) => s.selectedMarket.current)
return (
<div className={`border-b border-th-fgd-4 mb-4 relative`}>
<div className={`border-b border-th-fgd-4 mb-2 md:mb-4 relative`}>
<div
className={`absolute ${
side === 'buy'
@ -24,7 +24,7 @@ const OrderSideTabs: FunctionComponent<OrderSideTabsProps> = ({
<nav className="-mb-px flex" aria-label="Tabs">
<button
onClick={() => onChange('buy')}
className={`cursor-pointer default-transition flex font-semibold items-center justify-center p-2 relative text-base w-1/2 whitespace-nowrap hover:opacity-100
className={`cursor-pointer default-transition flex font-semibold items-center justify-center pb-2 md:py-2 relative text-base w-1/2 whitespace-nowrap hover:opacity-100
${
side === 'buy'
? `text-th-green`
@ -36,7 +36,7 @@ const OrderSideTabs: FunctionComponent<OrderSideTabsProps> = ({
</button>
<button
onClick={() => onChange('sell')}
className={`cursor-pointer default-transition flex font-semibold items-center justify-center p-2 relative text-base w-1/2 whitespace-nowrap hover:opacity-100
className={`cursor-pointer default-transition flex font-semibold items-center justify-center pb-2 relative text-base w-1/2 whitespace-nowrap hover:opacity-100
${
side === 'sell'
? `text-th-red`

View File

@ -1,31 +1,26 @@
import { useState, useEffect, useRef, useMemo } from 'react'
import useIpAddress from '../hooks/useIpAddress'
import useIpAddress from '../../hooks/useIpAddress'
import {
getTokenBySymbol,
getMarketIndexBySymbol,
I80F48,
PerpMarket,
} from '@blockworks-foundation/mango-client'
import { notify } from '../utils/notifications'
import { calculateTradePrice, getDecimalCount, sleep } from '../utils'
import { floorToDecimal } from '../utils/index'
import useMangoStore from '../stores/useMangoStore'
import Button from './Button'
import TradeType from './TradeType'
import Input from './Input'
import Switch from './Switch'
import { notify } from '../../utils/notifications'
import { calculateTradePrice, getDecimalCount, sleep } from '../../utils'
import { floorToDecimal } from '../../utils/index'
import useMangoStore from '../../stores/useMangoStore'
import Button from '../Button'
import Input from '../Input'
import { Market } from '@project-serum/serum'
import Big from 'big.js'
import MarketFee from './MarketFee'
import LeverageSlider from './LeverageSlider'
import Loading from './Loading'
import { useViewport } from '../hooks/useViewport'
import { breakpoints } from './TradePageGrid'
import { ElementTitle } from './styles'
import ButtonGroup from './ButtonGroup'
import Checkbox from './Checkbox'
import MarketFee from '../MarketFee'
import Loading from '../Loading'
import { ElementTitle } from '../styles'
import ButtonGroup from '../ButtonGroup'
import Checkbox from '../Checkbox'
import OrderSideTabs from './OrderSideTabs'
import Tooltip from './Tooltip'
import Tooltip from '../Tooltip'
import SlippageWarning from './SlippageWarning'
export default function SimpleTradeForm({ initLeverage }) {
@ -46,8 +41,6 @@ export default function SimpleTradeForm({ initLeverage }) {
const market = useMangoStore((s) => s.selectedMarket.current)
const { side, baseSize, quoteSize, price, triggerPrice, tradeType } =
useMangoStore((s) => s.tradeForm)
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const [postOnly, setPostOnly] = useState(false)
const [ioc, setIoc] = useState(false)
@ -422,7 +415,7 @@ export default function SimpleTradeForm({ initLeverage }) {
(side === 'sell' && baseSize === roundedDeposits) ||
(side === 'buy' && baseSize === roundedBorrows)
return !isMobile ? (
return (
<div className="flex flex-col h-full">
<ElementTitle>
{marketConfig.name}
@ -453,7 +446,7 @@ export default function SimpleTradeForm({ initLeverage }) {
onChange={(e) => onSetPrice(e.target.value)}
value={price}
disabled={tradeType === 'Market'}
placeholder={tradeType === 'Market' ? 'Market Price' : null}
placeholder={tradeType === 'Market' ? markPrice : null}
prefix={
<img
src={`/assets/icons/${groupConfig.quoteSymbol.toLowerCase()}.svg`}
@ -523,15 +516,12 @@ export default function SimpleTradeForm({ initLeverage }) {
showStopForm ? 'bg-th-bkg-4' : 'bg-th-bkg-3'
} mt-2 p-2 rounded-md w-1/2`}
>
<label className="cursor-pointer flex items-center">
<Checkbox
checked={showStopForm}
onChange={(e) => setShowStopForm(e.target.checked)}
/>
<span className="ml-2 text-xs text-th-fgd-3">
Set Stop Loss
</span>
</label>
<Checkbox
checked={showStopForm}
onChange={(e) => setShowStopForm(e.target.checked)}
>
Set Stop Loss
</Checkbox>
</div>
) : null}
{!hideProfitStop ? (
@ -540,15 +530,12 @@ export default function SimpleTradeForm({ initLeverage }) {
showTakeProfitForm ? 'bg-th-bkg-4' : 'bg-th-bkg-3'
} mt-2 p-2 rounded-md w-1/2`}
>
<label className="cursor-pointer flex items-center">
<Checkbox
checked={showTakeProfitForm}
onChange={(e) => setShowTakeProfitForm(e.target.checked)}
/>
<span className="ml-2 text-xs text-th-fgd-3">
Set Take Profit
</span>
</label>
<Checkbox
checked={showTakeProfitForm}
onChange={(e) => setShowTakeProfitForm(e.target.checked)}
>
Set Take Profit
</Checkbox>
</div>
) : null}
</div>
@ -618,52 +605,53 @@ export default function SimpleTradeForm({ initLeverage }) {
<div className="col-span-10 col-start-3 flex">
{tradeType === 'Limit' ? (
<>
<div className="mr-4 pt-2">
<div className="mr-4 mt-2">
<Tooltip
delay={250}
placement="left"
content="Post only orders are guaranteed to be the maker order or else it will be canceled."
>
<Switch
className="text-th-fgd-3 text-xs"
<Checkbox
checked={postOnly}
onChange={postOnChange}
onChange={(e) => postOnChange(e.target.checked)}
>
POST
</Switch>
</Checkbox>
</Tooltip>
</div>
<div className="mr-4 pt-2">
<div className="mr-4 mt-2">
<Tooltip
delay={250}
placement="left"
content="Immediate or cancel orders are guaranteed to be the taker or it will be canceled."
>
<Switch
className="text-th-fgd-3 text-xs"
checked={ioc}
onChange={iocOnChange}
>
IOC
</Switch>
<div className="flex items-center text-th-fgd-3 text-xs">
<Checkbox
checked={ioc}
onChange={(e) => iocOnChange(e.target.checked)}
>
IOC
</Checkbox>
</div>
</Tooltip>
</div>
</>
) : null}
{marketConfig.kind === 'perp' ? (
<Tooltip
delay={250}
placement="left"
content="Reduce only orders will only reduce your overall position."
>
<Switch
className="pt-2 text-th-fgd-3 text-xs"
checked={reduceOnly}
onChange={reduceOnChange}
<div className="mt-2">
<Tooltip
delay={250}
placement="left"
content="Reduce only orders will only reduce your overall position."
>
Reduce Only
</Switch>
</Tooltip>
<Checkbox
checked={reduceOnly}
onChange={(e) => reduceOnChange(e.target.checked)}
>
Reduce Only
</Checkbox>
</Tooltip>
</div>
) : null}
</div>
<div className={`col-span-10 col-start-3 flex pt-2`}>
@ -717,181 +705,5 @@ export default function SimpleTradeForm({ initLeverage }) {
</div>
</div>
</div>
) : (
<div className="flex flex-col h-full">
<div className={`flex pb-3 text-base text-th-fgd-4`}>
<button
onClick={() => setSide('buy')}
className={`flex-1 outline-none focus:outline-none`}
>
<div
className={`hover:text-th-green pb-1 transition-colors duration-500
${
side === 'buy'
? `text-th-green hover:text-th-green border-b-2 border-th-green`
: undefined
}`}
>
{market instanceof PerpMarket ? 'Long' : 'Buy'}
</div>
</button>
<button
onClick={() => setSide('sell')}
className={`flex-1 outline-none focus:outline-none`}
>
<div
className={`hover:text-th-red pb-1 transition-colors duration-500
${
side === 'sell'
? `text-th-red hover:text-th-red border-b-2 border-th-red`
: undefined
}
`}
>
{market instanceof PerpMarket ? 'Short' : 'Sell'}
</div>
</button>
</div>
<div className="pb-3">
<label className="block mb-1 text-th-fgd-3 text-xs">Price</label>
<Input
type="number"
min="0"
step={tickSize}
onChange={(e) => onSetPrice(e.target.value)}
value={price}
disabled={tradeType === 'Market'}
suffix={
<img
src={`/assets/icons/${groupConfig.quoteSymbol.toLowerCase()}.svg`}
width="16"
height="16"
/>
}
/>
</div>
<div className="flex items-center justify-between pb-3">
<label className="text-th-fgd-3 text-xs">Type</label>
<TradeType onChange={onTradeTypeChange} value={tradeType} />
</div>
<label className="block mb-1 text-th-fgd-3 text-xs">Size</label>
<div className="grid grid-cols-2 grid-rows-1 gap-2">
<div className="col-span-1">
<Input
type="number"
min="0"
step={minOrderSize}
onChange={(e) => onSetBaseSize(e.target.value)}
value={baseSize}
suffix={
<img
src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
width="16"
height="16"
/>
}
/>
</div>
<div className="col-span-1">
<Input
type="number"
min="0"
step={minOrderSize}
onChange={(e) => onSetQuoteSize(e.target.value)}
value={quoteSize}
suffix={
<img
src={`/assets/icons/${groupConfig.quoteSymbol.toLowerCase()}.svg`}
width="16"
height="16"
/>
}
/>
</div>
</div>
<LeverageSlider
onChange={(e) => onSetBaseSize(e)}
value={baseSize ? baseSize : 0}
step={parseFloat(minOrderSize)}
disabled={false}
side={side}
decimalCount={sizeDecimalCount}
price={calculateTradePrice(
tradeType,
orderbook,
baseSize ? baseSize : 0,
side,
price
)}
/>
{tradeType !== 'Market' ? (
<div className="flex mt-2">
<Switch checked={postOnly} onChange={postOnChange}>
POST
</Switch>
<div className="ml-4">
<Switch checked={ioc} onChange={iocOnChange}>
IOC
</Switch>
</div>
</div>
) : null}
<div className={`flex py-4`}>
{ipAllowed ? (
side === 'buy' ? (
<Button
disabled={disabledTradeButton}
onClick={onSubmit}
className={`${
!disabledTradeButton
? 'bg-th-bkg-2 border border-th-green hover:border-th-green-dark'
: 'border border-th-bkg-4'
} text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark flex-grow`}
>
{submitting ? (
<div className="w-full">
<Loading className="mx-auto" />
</div>
) : (
`${baseSize > 0 ? 'Buy ' + baseSize : 'Buy '} ${
marketConfig.name.includes('PERP')
? marketConfig.name
: marketConfig.baseSymbol
}`
)}
</Button>
) : (
<Button
disabled={disabledTradeButton}
onClick={onSubmit}
className={`${
!disabledTradeButton
? 'bg-th-bkg-2 border border-th-red hover:border-th-red-dark'
: 'border border-th-bkg-4'
} text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
>
{submitting ? (
<div className="w-full">
<Loading className="mx-auto" />
</div>
) : (
`${baseSize > 0 ? 'Sell ' + baseSize : 'Sell '} ${
marketConfig.name.includes('PERP')
? marketConfig.name
: marketConfig.baseSymbol
}`
)}
</Button>
)
) : (
<Button disabled className="flex-grow">
<span>Country Not Allowed</span>
</Button>
)}
</div>
<div className="flex text-xs text-th-fgd-4 px-6 mt-2.5">
<MarketFee />
</div>
</div>
)
}

View File

@ -1,7 +1,7 @@
import { useMemo, useState } from 'react'
import { SwitchHorizontalIcon } from '@heroicons/react/outline'
import { getWeights } from '@blockworks-foundation/mango-client'
import useMangoStore from '../stores/useMangoStore'
import useMangoStore from '../../stores/useMangoStore'
import AdvancedTradeForm from './AdvancedTradeForm'
import SimpleTradeForm from './SimpleTradeForm'
import {
@ -10,7 +10,7 @@ import {
FlipCardFront,
FlipCardInner,
StyledFloatingElement,
} from './FlipCard'
} from '../FlipCard'
export default function TradeForm() {
const [showAdvancedFrom, setShowAdvancedForm] = useState(true)
@ -36,11 +36,14 @@ export default function TradeForm() {
<FlipCardInner flip={showAdvancedFrom}>
{showAdvancedFrom ? (
<FlipCardFront>
<StyledFloatingElement className="h-full" showConnect>
<StyledFloatingElement
className="h-full px-1 py-0 md:px-4 md:py-4"
showConnect
>
<div className={`${!connected ? 'filter blur-sm' : ''}`}>
<button
onClick={handleFormChange}
className="absolute flex items-center justify-center right-4 rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
className="absolute hidden md:flex items-center justify-center right-4 rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
>
<SwitchHorizontalIcon className="w-5 h-5" />
</button>
@ -50,7 +53,7 @@ export default function TradeForm() {
</FlipCardFront>
) : (
<FlipCardBack>
<StyledFloatingElement className="h-full" showConnect>
<StyledFloatingElement className="h-full px-1 md:px-4" showConnect>
<div className={`${!connected ? 'filter blur-sm' : ''}`}>
<button
onClick={handleFormChange}

View File

@ -0,0 +1,68 @@
import { Listbox } from '@headlessui/react'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
import { useViewport } from '../../hooks/useViewport'
import { breakpoints } from '../TradePageGrid'
const TradeType = ({
value,
onChange,
offerTriggers = false,
className = '',
}) => {
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const TRADE_TYPES = ['Limit', 'Market']
if (offerTriggers)
TRADE_TYPES.push(
'Stop Loss',
'Stop Limit',
'Take Profit',
'Take Profit Limit'
)
return (
<div className={`relative ${className}`}>
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<Listbox.Button
className={`font-normal h-full w-full bg-th-bkg-1 border border-th-fgd-4 p-2 hover:border-th-primary rounded-md focus:outline-none focus:border-th-primary`}
>
<div className={`flex items-center justify-between space-x-4`}>
<span>{value}</span>
{open ? (
<ChevronUpIcon className={`h-5 w-5 mr-1 text-th-primary`} />
) : (
<ChevronDownIcon className={`h-5 w-5 mr-1 text-th-primary`} />
)}
</div>
</Listbox.Button>
{open ? (
<Listbox.Options
static
className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md text-left`}
>
{TRADE_TYPES.map((type) => (
<Listbox.Option key={type} value={type}>
{({ selected }) => (
<div
className={`p-2 hover:bg-th-bkg-2 hover:cursor-pointer tracking-wider ${
selected && `text-th-primary`
}`}
>
{type}
</div>
)}
</Listbox.Option>
))}
</Listbox.Options>
) : null}
</>
)}
</Listbox>
</div>
)
}
export default TradeType

View File

@ -1,8 +1,8 @@
import { Listbox } from '@headlessui/react'
import styled from '@emotion/styled'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
import { useViewport } from '../hooks/useViewport'
import { breakpoints } from './TradePageGrid'
import { useViewport } from '../../hooks/useViewport'
import { breakpoints } from '../TradePageGrid'
const StyledListbox = styled(Listbox.Button)`
border-right: 1px solid transparent;

View File

@ -10,10 +10,10 @@ import useMangoStore from '../stores/useMangoStore'
import { copyToClipboard } from '../utils'
import PageBodyContainer from '../components/PageBodyContainer'
import TopBar from '../components/TopBar'
import AccountOrders from '../components/account-page/AccountOrders'
import AccountHistory from '../components/account-page/AccountHistory'
import AccountOrders from '../components/account_page/AccountOrders'
import AccountHistory from '../components/account_page/AccountHistory'
import AccountsModal from '../components/AccountsModal'
import AccountOverview from '../components/account-page/AccountOverview'
import AccountOverview from '../components/account_page/AccountOverview'
import AccountNameModal from '../components/AccountNameModal'
import Button from '../components/Button'
import EmptyState from '../components/EmptyState'

View File

@ -5,7 +5,7 @@ import PageBodyContainer from '../components/PageBodyContainer'
import TopBar from '../components/TopBar'
import EmptyState from '../components/EmptyState'
import AccountsModal from '../components/AccountsModal'
import AccountBorrows from '../components/account-page/AccountBorrows'
import AccountBorrows from '../components/account_page/AccountBorrows'
import Loading from '../components/Loading'
export default function Borrow() {

View File

@ -1,9 +1,9 @@
import { useState } from 'react'
import TopBar from '../components/TopBar'
import PageBodyContainer from '../components/PageBodyContainer'
import StatsTotals from '../components/stats-page/StatsTotals'
import StatsAssets from '../components/stats-page/StatsAssets'
import StatsPerps from '../components/stats-page/StatsPerps'
import StatsTotals from '../components/stats_page/StatsTotals'
import StatsAssets from '../components/stats_page/StatsAssets'
import StatsPerps from '../components/stats_page/StatsPerps'
import useMangoStats from '../hooks/useMangoStats'
import Swipeable from '../components/mobile/Swipeable'
import SwipeableTabs from '../components/mobile/SwipeableTabs'