blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

more improvement to load time when switching pages/markets

This commit is contained in:
Tyler Shipe 2021-11-14 18:37:02 +00:00
parent db4aa785fc
commit 92b3ac2ce7
13 changed files with 78 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/MarketDetails.tsx
View File

@ -58,6 +58,8 @@ const MarketDetails = () => {
const baseSymbol = marketConfig.baseSymbol
const selectedMarketName = marketConfig.name
const isPerpMarket = marketConfig.kind === 'perp'
console.log('marketConfig: ', marketConfig)
const previousMarketName: string = usePrevious(selectedMarketName)
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
const connected = useMangoStore((s) => s.wallet.connected)

12
components/MarketMenuItem.tsx
View File

@ -85,19 +85,17 @@ export default function MarketMenuItem({ menuTitle = '', linksArray = [] }) {
<div className="relative bg-th-bkg-3 divide-y divide-th-fgd-4 px-3 rounded rounded-t-none">
{linksArray.map((m) => (
<Link
href={`/${
m.name.slice(-4) === 'PERP' ? 'perp' : 'spot'
}/${m.name.slice(0, -5)}`}
href={{
pathname: '/market',
query: { name: m.name },
}}
key={m.name}
shallow={true}
>
<a
className={`block py-2 text-th-fgd-1 text-xs hover:text-th-primary whitespace-nowrap ${
asPath.includes(menuTitle)
? (asPath.includes('perp') &&
m.name.slice(-4) === 'PERP') ||
(asPath.includes('spot') &&
m.name.slice(-4) === 'USDC')
? asPath.includes(m.name.slice(-4))
? 'text-th-primary'
: 'text-th-fgd-1'
: null

9
components/PerpPositionsTable.tsx
View File

@ -140,13 +140,16 @@ const PositionsTable = () => {
src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
{asPath.includes(
`perp/${marketConfig.baseSymbol}`
{decodeURIComponent(asPath).includes(
marketConfig.name
) ? (
<span>{marketConfig.name}</span>
) : (
<Link
href={`/perp/${marketConfig.baseSymbol}`}
href={{
pathname: '/market',
query: { name: marketConfig.name },
}}
shallow={true}
>
<a className="text-th-fgd-1 underline hover:no-underline hover:text-th-fgd-1">

10
components/SettingsModal.tsx
View File

@ -31,7 +31,7 @@ export const initialMarket = {
base: 'BTC',
kind: 'perp',
name: 'BTC-PERP',
path: '/perp/BTC',
path: '/market?name=BTC-PERP',
}
const SettingsModal = ({ isOpen, onClose }) => {
@ -124,20 +124,18 @@ const DefaultMarketSettings = ({ setSettingsView }) => {
base: 'BTC',
kind: 'perp',
name: 'BTC-PERP',
path: '/perp/BTC',
path: '/market?name=BTC-PERP',
}
)
const handleSetDefaultMarket = (market) => {
const base = market.slice(0, -5)
const kind = market.includes('PERP') ? 'perp' : 'spot'
const defaultMarket = market.includes('PERP')
? `/perp/${base}`
: `/spot/${base}`
setDefaultMarket({
base: base,
kind: kind,
name: market,
path: defaultMarket,
path: `/market?name=${market}`,
})
}
const parsedDefaultMarket = defaultMarket

12
components/mobile/BottomBar.tsx
View File

@ -45,12 +45,16 @@ const BottomBar = () => {
<BtcMonoIcon className="h-4 mb-1 w-4" />
<StyledBarItemLabel>{t('markets')}</StyledBarItemLabel>
</div>
<Link href="/perp/btc" shallow={true}>
<Link
href={{
pathname: '/market',
query: { name: 'BTC-PERP' },
}}
shallow={true}
>
<div
className={`${
asPath === '/' ||
asPath.includes('spot') ||
asPath.includes('perp')
asPath === '/' || asPath.includes('market')
? 'text-th-primary'
: 'text-th-fgd-3'
} col-span-1 cursor-pointer default-transition flex flex-col items-center hover:text-th-primary`}

2
components/mobile/MobileMenu.tsx
View File

@ -39,7 +39,7 @@ const MobileMenu = () => {
<ConnectWalletButton />
</div>
<div className="p-6">
<MenuItem href="/spot/BTC">{t('trade')}</MenuItem>
<MenuItem href="/market?name=BTC/USDC">{t('trade')}</MenuItem>
<MenuItem href="/account">{t('account')}</MenuItem>
<MenuItem href="/borrow">{t('borrow')}</MenuItem>
<MenuItem href="/stats">{t('stats')}</MenuItem>

42
pages/account/[[...pubkey]].tsx → pages/account.tsx
View File

@ -6,27 +6,27 @@ import {
LinkIcon,
PencilIcon,
} from '@heroicons/react/outline'
import useMangoStore, { serumProgramId } 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 AccountsModal from '../../components/AccountsModal'
import AccountOverview from '../../components/account_page/AccountOverview'
import AccountInterest from '../../components/account_page/AccountInterest'
import AccountFunding from '../../components/account_page/AccountFunding'
import AccountNameModal from '../../components/AccountNameModal'
import Button from '../../components/Button'
import EmptyState from '../../components/EmptyState'
import Loading from '../../components/Loading'
import Swipeable from '../../components/mobile/Swipeable'
import Tabs from '../../components/Tabs'
import { useViewport } from '../../hooks/useViewport'
import { breakpoints } from '../../components/TradePageGrid'
import useMangoStore, { serumProgramId } 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 AccountsModal from '../components/AccountsModal'
import AccountOverview from '../components/account_page/AccountOverview'
import AccountInterest from '../components/account_page/AccountInterest'
import AccountFunding from '../components/account_page/AccountFunding'
import AccountNameModal from '../components/AccountNameModal'
import Button from '../components/Button'
import EmptyState from '../components/EmptyState'
import Loading from '../components/Loading'
import Swipeable from '../components/mobile/Swipeable'
import Tabs from '../components/Tabs'
import { useViewport } from '../hooks/useViewport'
import { breakpoints } from '../components/TradePageGrid'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'
import Select from '../../components/Select'
import Select from '../components/Select'
import { useRouter } from 'next/router'
import { PublicKey } from '@solana/web3.js'
@ -76,8 +76,10 @@ export default function Account() {
useEffect(() => {
async function loadUnownedMangoAccount() {
console.log('pubkey[0]', pubkey)
try {
const unownedMangoAccountPubkey = new PublicKey(pubkey[0])
const unownedMangoAccountPubkey = new PublicKey(pubkey)
if (mangoGroup) {
const unOwnedMangoAccount = await mangoClient.getMangoAccount(
unownedMangoAccountPubkey,

2
pages/borrow.tsx
View File

@ -10,7 +10,7 @@ import Loading from '../components/Loading'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'
export async function getServerSideProps({ locale }) {
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),

2
pages/index.tsx
View File

@ -13,7 +13,7 @@ import {
} from '../components/TradePageGrid'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
export async function getServerSideProps({ locale }) {
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'tv-chart'])),

42
pages/perp/[market].tsx → pages/market.tsx
View File

@ -1,20 +1,20 @@
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import useMangoGroupConfig from '../../hooks/useMangoGroupConfig'
import useMangoStore from '../../stores/useMangoStore'
import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
import useMangoStore from '../stores/useMangoStore'
import {
getMarketByBaseSymbolAndKind,
getMarketIndexBySymbol,
} from '@blockworks-foundation/mango-client'
import TopBar from '../../components/TopBar'
import TradePageGrid from '../../components/TradePageGrid'
import MarketSelect from '../../components/MarketSelect'
import useLocalStorageState from '../../hooks/useLocalStorageState'
import AlphaModal, { ALPHA_MODAL_KEY } from '../../components/AlphaModal'
import { PageBodyWrapper } from '../../components/styles'
import TopBar from '../components/TopBar'
import TradePageGrid from '../components/TradePageGrid'
import MarketSelect from '../components/MarketSelect'
import useLocalStorageState from '../hooks/useLocalStorageState'
import AlphaModal, { ALPHA_MODAL_KEY } from '../components/AlphaModal'
import { PageBodyWrapper } from '../components/styles'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
export async function getServerSideProps({ locale }) {
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'tv-chart'])),
@ -31,22 +31,32 @@ const PerpMarket = () => {
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const router = useRouter()
const { market } = router.query
useEffect(() => {
if (market && mangoGroup) {
console.log('router', router, mangoGroup)
const name = decodeURIComponent(router.asPath).split('name=')[1]
console.log('name: ', name)
if (name && mangoGroup) {
const marketQueryParam = name.toString().split(/-|\//)
const marketBaseSymbol = marketQueryParam[0]
const marketType = marketQueryParam[1] === 'PERP' ? 'perp' : 'spot'
console.log('marketType: ', marketType)
const newMarket = getMarketByBaseSymbolAndKind(
groupConfig,
market.toString().toUpperCase(),
'perp'
marketBaseSymbol.toUpperCase(),
marketType
)
console.log('newMarket', newMarket)
const marketIndex = getMarketIndexBySymbol(
groupConfig,
market.toString().toUpperCase()
marketBaseSymbol.toUpperCase()
)
setMangoStore((state) => {
state.selectedMarket.kind = 'perp'
state.selectedMarket.kind = marketType
if (newMarket.name !== marketConfig.name) {
state.selectedMarket.current = null
state.selectedMarket.config = newMarket
@ -57,7 +67,7 @@ const PerpMarket = () => {
}
})
}
}, [market, mangoGroup])
}, [router, mangoGroup])
return (
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>

76
pages/spot/[market].tsx
View File

@ -1,76 +0,0 @@
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import useMangoGroupConfig from '../../hooks/useMangoGroupConfig'
import useMangoStore from '../../stores/useMangoStore'
import {
getMarketByBaseSymbolAndKind,
getMarketIndexBySymbol,
} from '@blockworks-foundation/mango-client'
import TopBar from '../../components/TopBar'
import TradePageGrid from '../../components/TradePageGrid'
import MarketSelect from '../../components/MarketSelect'
import AlphaModal, { ALPHA_MODAL_KEY } from '../../components/AlphaModal'
import useLocalStorageState from '../../hooks/useLocalStorageState'
import { PageBodyWrapper } from '../../components/styles'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
export async function getServerSideProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'tv-chart'])),
// Will be passed to the page component as props
},
}
}
const SpotMarket = () => {
const [alphaAccepted] = useLocalStorageState(ALPHA_MODAL_KEY, false)
const groupConfig = useMangoGroupConfig()
const setMangoStore = useMangoStore((s) => s.set)
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const router = useRouter()
const { market } = router.query
useEffect(() => {
if (market && mangoGroup) {
const newMarket = getMarketByBaseSymbolAndKind(
groupConfig,
market.toString().toUpperCase(),
'spot'
)
const marketIndex = getMarketIndexBySymbol(
groupConfig,
market.toString().toUpperCase()
)
setMangoStore((state) => {
state.selectedMarket.kind = 'spot'
if (newMarket.name !== marketConfig.name) {
state.selectedMarket.current = null
state.selectedMarket.config = newMarket
state.tradeForm.price =
state.tradeForm.tradeType === 'Limit'
? mangoGroup.getPrice(marketIndex, mangoCache).toFixed(2)
: ''
}
})
}
}, [market, mangoGroup])
return (
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
<TopBar />
<MarketSelect />
<PageBodyWrapper className="p-1 sm:px-2 sm:py-1 md:px-2 md:py-1">
<TradePageGrid />
</PageBodyWrapper>
{!alphaAccepted && (
<AlphaModal isOpen={!alphaAccepted} onClose={() => {}} />
)}
</div>
)
}
export default SpotMarket

2
pages/stats.tsx
View File

@ -13,7 +13,7 @@ import { breakpoints } from '../components/TradePageGrid'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'
export async function getServerSideProps({ locale }) {
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),

2
stores/useMangoStore.tsx
View File

@ -62,7 +62,7 @@ export const WEBSOCKET_CONNECTION = new Connection(
)
const DEFAULT_MANGO_GROUP_NAME = process.env.NEXT_PUBLIC_GROUP || 'mainnet.1'
const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(
export const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(
CLUSTER,
DEFAULT_MANGO_GROUP_NAME
)