full width account tabs on mobile
This commit is contained in:
parent
63e3d187b1
commit
b4b2198af6
|
@ -7,6 +7,8 @@ import ActivityFeed from './ActivityFeed'
|
||||||
import UnsettledTrades from '@components/trade/UnsettledTrades'
|
import UnsettledTrades from '@components/trade/UnsettledTrades'
|
||||||
import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
|
import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
|
||||||
import useMangoAccount from 'hooks/useMangoAccount'
|
import useMangoAccount from 'hooks/useMangoAccount'
|
||||||
|
import { useViewport } from 'hooks/useViewport'
|
||||||
|
import { breakpoints } from 'utils/theme'
|
||||||
|
|
||||||
const TABS = [
|
const TABS = [
|
||||||
'balances',
|
'balances',
|
||||||
|
@ -19,6 +21,8 @@ const AccountTabs = () => {
|
||||||
const [activeTab, setActiveTab] = useState('balances')
|
const [activeTab, setActiveTab] = useState('balances')
|
||||||
const actions = mangoStore((s) => s.actions)
|
const actions = mangoStore((s) => s.actions)
|
||||||
const { mangoAccount } = useMangoAccount()
|
const { mangoAccount } = useMangoAccount()
|
||||||
|
const { width } = useViewport()
|
||||||
|
const isMobile = width ? width < breakpoints.md : false
|
||||||
|
|
||||||
const tabsWithCount: [string, number][] = useMemo(() => {
|
const tabsWithCount: [string, number][] = useMemo(() => {
|
||||||
return TABS.map((t) => [t, 0])
|
return TABS.map((t) => [t, 0])
|
||||||
|
@ -37,6 +41,7 @@ const AccountTabs = () => {
|
||||||
onChange={(v) => setActiveTab(v)}
|
onChange={(v) => setActiveTab(v)}
|
||||||
values={tabsWithCount}
|
values={tabsWithCount}
|
||||||
showBorders
|
showBorders
|
||||||
|
fillWidth={isMobile}
|
||||||
/>
|
/>
|
||||||
<TabContent activeTab={activeTab} />
|
<TabContent activeTab={activeTab} />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -24,8 +24,8 @@ const RecentTrades = () => {
|
||||||
SOUND_SETTINGS_KEY,
|
SOUND_SETTINGS_KEY,
|
||||||
INITIAL_SOUND_SETTINGS
|
INITIAL_SOUND_SETTINGS
|
||||||
)
|
)
|
||||||
const currentFillsData = useRef<any>(null)
|
const currentFillsData = useRef<any>([])
|
||||||
const nextFillsData = useRef<any>(null)
|
const nextFillsData = useRef<any>([])
|
||||||
|
|
||||||
const buySound = new Howl({
|
const buySound = new Howl({
|
||||||
src: ['/sounds/trade-buy.mp3'],
|
src: ['/sounds/trade-buy.mp3'],
|
||||||
|
@ -63,10 +63,12 @@ const RecentTrades = () => {
|
||||||
currentFillsData.current = fills
|
currentFillsData.current = fills
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
nextFillsData?.current &&
|
nextFillsData.current.length &&
|
||||||
!isEqual(currentFillsData.current, nextFillsData.current)
|
!isEqual(currentFillsData.current, nextFillsData.current)
|
||||||
) {
|
) {
|
||||||
fills[0].side === 'buy' ? buySound.play() : sellSound.play()
|
nextFillsData.current[0].side === 'buy'
|
||||||
|
? buySound.play()
|
||||||
|
: sellSound.play()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
Loading…
Reference in New Issue