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

add lastUpdatedAt to improve useMangoAccount rerendering trigger

This commit is contained in:
Tyler Shipe 2021-11-30 16:04:55 -05:00
parent 4eb7cd3934
commit 2d824c2213
9 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/AccountInfo.tsx
View File

@ -34,8 +34,7 @@ export default function AccountInfo() {
const connected = useMangoStore((s) => s.wallet.connected)
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
const mangoAccount = useMangoAccount()
const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
const { mangoAccount, initialLoad } = useMangoAccount()
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const mangoClient = useMangoStore((s) => s.connection.client)
const actions = useMangoStore((s) => s.actions)
@ -164,7 +163,7 @@ export default function AccountInfo() {
{t('equity')}
</div>
<div className="text-th-fgd-1">
{isLoading ? <DataLoader /> : formatUsdValue(+equity)}
{initialLoad ? <DataLoader /> : formatUsdValue(+equity)}
</div>
</div>
<div className="flex justify-between pb-3">
@ -172,7 +171,7 @@ export default function AccountInfo() {
{t('leverage')}
</div>
<div className="text-th-fgd-1">
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : mangoAccount ? (
`${mangoAccount
@ -188,7 +187,7 @@ export default function AccountInfo() {
{t('collateral-available')}
</div>
<div className={`text-th-fgd-1`}>
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : mangoAccount ? (
usdFormatter(
@ -252,7 +251,7 @@ export default function AccountInfo() {
</div>
</Tooltip>
<div className={`flex items-center text-th-fgd-1`}>
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : mangoGroup ? (
nativeToUi(

2
components/BalancesTable.tsx
View File

@ -21,10 +21,8 @@ import WithdrawModal from './WithdrawModal'
import { ExpandableRow } from './TableElements'
import MobileTableHeader from './mobile/MobileTableHeader'
import { useTranslation } from 'next-i18next'
import useMangoAccount from '../hooks/useMangoAccount'
const BalancesTable = ({ showZeroBalances = false }) => {
useMangoAccount()
const { t } = useTranslation('common')
const [showDepositModal, setShowDepositModal] = useState(false)
const [showWithdrawModal, setShowWithdrawModal] = useState(false)

15
components/MarketPosition.tsx
View File

@ -67,11 +67,10 @@ export default function MarketPosition() {
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
const mangoAccount = useMangoAccount()
const { mangoAccount, initialLoad } = useMangoAccount()
const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const connected = useMangoStore((s) => s.wallet.connected)
const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
const setMangoStore = useMangoStore((s) => s.set)
const price = useMangoStore((s) => s.tradeForm.price)
const baseSymbol = marketConfig.baseSymbol
@ -164,7 +163,7 @@ export default function MarketPosition() {
) : null}
<div className="flex items-center justify-between pb-3">
<div className="font-normal text-th-fgd-3 leading-4">{t('size')}</div>
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : (
<PerpSideBadge perpAccount={perpAccount}></PerpSideBadge>
@ -175,7 +174,7 @@ export default function MarketPosition() {
{t('position-size')}
</div>
<div className="text-th-fgd-1">
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : basePosition ? (
<span
@ -199,7 +198,7 @@ export default function MarketPosition() {
{t('notional-size')}
</div>
<div className="text-th-fgd-1">
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : notionalSize ? (
formatUsdValue(Math.abs(notionalSize))
@ -213,7 +212,7 @@ export default function MarketPosition() {
{t('average-entry')}
</div>
<div className="text-th-fgd-1">
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : avgEntryPrice ? (
formatUsdValue(avgEntryPrice)
@ -227,7 +226,7 @@ export default function MarketPosition() {
{t('break-even')}
</div>
<div className="text-th-fgd-1">
{isLoading ? (
{initialLoad ? (
<DataLoader />
) : breakEvenPrice ? (
formatUsdValue(breakEvenPrice)
@ -243,7 +242,7 @@ export default function MarketPosition() {
</Tooltip.Content>
</Tooltip>
<div className="flex items-center">
{isLoading ? <DataLoader /> : <PnlText pnl={unsettledPnl} />}
{initialLoad ? <DataLoader /> : <PnlText pnl={unsettledPnl} />}
{settling ? (
<Loading className="ml-2" />
) : (

2
components/Orderbook.tsx
View File

@ -208,7 +208,7 @@ export default function Orderbook({ depth = 8 }) {
setOrderbookData(null)
}
}
}, 250)
}, 500)
useEffect(() => {
lastOrderbookData.current = {

4
components/UserInfo.tsx
View File

@ -10,6 +10,7 @@ import TradeHistoryTable from './TradeHistoryTable'
import ManualRefresh from './ManualRefresh'
import Tabs from './Tabs'
import FeeDiscountsTable from './FeeDiscountsTable'
import useMangoAccount from '../hooks/useMangoAccount'
const TABS = [
'Balances',
@ -22,8 +23,9 @@ const TABS = [
const UserInfoTabs = ({ activeTab, setActiveTab }) => {
const openOrders = useOpenOrders()
const { openPositions } = usePerpPositions()
const { mangoAccount } = useMangoAccount()
const connected = useMangoStore((s) => s.connection.current)
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
const handleTabChange = (tabName) => {
setActiveTab(tabName)
}

3
hooks/useBalances.tsx
View File

@ -9,11 +9,12 @@ import useMangoStore from '../stores/useMangoStore'
import { i80f48ToPercent } from '../utils/index'
import { sumBy } from 'lodash'
import { I80F48 } from '@blockworks-foundation/mango-client/lib/src/fixednum'
import useMangoAccount from './useMangoAccount'
export function useBalances(): Balances[] {
const balances = []
const { mangoAccount } = useMangoAccount()
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)

18
hooks/useMangoAccount.tsx
View File

@ -1,11 +1,19 @@
import useMangoStore from '../stores/useMangoStore'
import { MangoAccount } from '@blockworks-foundation/mango-client'
import shallow from 'zustand/shallow'
export default function useMangoAccount(): MangoAccount {
const mangoAccount = useMangoStore(
(state) => state.selectedMangoAccount.current,
() => false
export default function useMangoAccount(): {
mangoAccount: MangoAccount
initialLoad: boolean
} {
const { mangoAccount, initialLoad } = useMangoStore(
(state) => ({
mangoAccount: state.selectedMangoAccount.current,
lastUpdatedAt: state.selectedMangoAccount.lastUpdatedAt,
initialLoad: state.selectedMangoAccount.initialLoad,
}),
shallow
)
return mangoAccount
return { mangoAccount, initialLoad }
}

2
hooks/usePerpPositions.tsx
View File

@ -79,7 +79,7 @@ export const collectPerpPosition = (
}
const usePerpPositions = () => {
const mangoAccount = useMangoAccount()
const { mangoAccount } = useMangoAccount()
const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)

4
stores/useMangoStore.tsx
View File

@ -144,6 +144,7 @@ interface MangoStore extends State {
selectedMangoAccount: {
current: MangoAccount | null
initialLoad: boolean
lastUpdatedAt: number
}
tradeForm: {
side: 'buy' | 'sell'
@ -226,6 +227,7 @@ const useMangoStore = create<MangoStore>((set, get) => {
selectedMangoAccount: {
current: null,
initialLoad: true,
lastUpdatedAt: 0,
},
tradeForm: {
side: 'buy',
@ -468,9 +470,11 @@ const useMangoStore = create<MangoStore>((set, get) => {
connection,
mangoClient.lastSlot
)
console.log('reloading mango account')
set((state) => {
state.selectedMangoAccount.current = reloadedMangoAccount
state.selectedMangoAccount.lastUpdatedAt = new Date().toISOString()
})
},
async reloadOrders() {