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

hide reduce only tokens (#399) 

* hide reduceonly tokens

* fix

* fix
This commit is contained in:
Adrian Brzeziński 2024-03-06 21:16:15 +01:00 committed by GitHub
parent ee69f84200
commit 1b297d9c4f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 112 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/stats/tokens/TokenDetailsTable.tsx
View File

@ -31,7 +31,7 @@ const TokenDetailsTable = () => {
const { group } = useMangoGroup()
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const banks = useBanksWithBalances()
const banks = useBanksWithBalances(undefined, true)
const router = useRouter()
const formattedTableData = useCallback(() => {

2
components/stats/tokens/TokenOverviewTable.tsx
View File

@ -37,7 +37,7 @@ const TokenOverviewTable = () => {
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const router = useRouter()
const banks = useBanksWithBalances()
const banks = useBanksWithBalances(undefined, true)
const formattedTableData = useCallback(() => {
const formatted = []

32
components/swap/SwapFormTokenList.tsx
View File

@ -19,6 +19,8 @@ import { walletBalanceForToken } from '@components/DepositForm'
import TokenReduceOnlyDesc from '@components/shared/TokenReduceOnlyDesc'
import PopularSwapTokens from './PopularSwapTokens'
import { useViewport } from 'hooks/useViewport'
import { isBankVisibleForUser } from 'utils/bank'
import { TOKEN_REDUCE_ONLY_OPTIONS } from 'utils/constants'
export type SwapFormTokenListType =
| 'input'
@ -316,7 +318,31 @@ const SwapFormTokenList = ({
setSearch(e.target.value)
}
const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
const sortedTokens: TokenInfoWithAmounts[] = search
? startSearch(tokenInfos, search)
: (tokenInfos as [])
const filteredSortedTokens = sortedTokens.filter((x) => {
const tokenPk = new PublicKey(x.address)
const tokenBank = group?.getFirstBankByMint(tokenPk)
if (tokenBank?.reduceOnly === TOKEN_REDUCE_ONLY_OPTIONS.ENABLED) {
const borrowedAmount = mangoAccount
? new Decimal(mangoAccount.getTokenBorrowsUi(tokenBank))
.toDecimalPlaces(tokenBank.mintDecimals, Decimal.ROUND_UP)
.toNumber()
: 0
return (
group &&
tokenBank &&
isBankVisibleForUser(
tokenBank,
borrowedAmount,
x.amount?.isZero() ? 0 : 1,
)
)
} else {
return true
}
})
useEffect(() => {
if (focusRef?.current && isDesktop) {
@ -382,8 +408,8 @@ const SwapFormTokenList = ({
: 'h-[calc(100%-128px)]'
} overflow-auto py-2`}
>
{sortedTokens?.length ? (
sortedTokens.map((token) => (
{filteredSortedTokens?.length ? (
filteredSortedTokens.map((token) => (
<TokenItem
key={token.address}
token={token}

29
components/trade/MarketSelectDropdown.tsx
View File

@ -37,6 +37,10 @@ import { useSortableData } from 'hooks/useSortableData'
import { SortableColumnHeader } from '@components/shared/TableElements'
import { useViewport } from 'hooks/useViewport'
import { useRouter } from 'next/router'
import { TOKEN_REDUCE_ONLY_OPTIONS } from 'utils/constants'
import { isBankVisibleForUser } from 'utils/bank'
import Decimal from 'decimal.js'
import useMangoAccount from 'hooks/useMangoAccount'
type Currencies = {
[key: string]: string
@ -70,6 +74,7 @@ const MarketSelectDropdown = () => {
const { isDesktop } = useViewport()
const focusRef = useRef<HTMLInputElement>(null)
const { query } = useRouter()
const { mangoAccount } = useMangoAccount()
// switch to spot tab on spot markets
useEffect(() => {
@ -134,6 +139,26 @@ const MarketSelectDropdown = () => {
sortConfig: serumSortConfig,
} = useSortableData(unsortedSerumMarketsToShow)
const filteredSerumMarkets = serumMarketsToShow.filter((x) => {
const baseBank = group?.getFirstBankByTokenIndex(x.baseTokenIndex)
if (baseBank?.reduceOnly === TOKEN_REDUCE_ONLY_OPTIONS.ENABLED) {
if (!mangoAccount) {
return false
}
const borrowedAmount = mangoAccount
? new Decimal(mangoAccount.getTokenBorrowsUi(baseBank))
.toDecimalPlaces(baseBank.mintDecimals, Decimal.ROUND_UP)
.toNumber()
: 0
const balance = mangoAccount
? mangoAccount.getTokenBalanceUi(baseBank)
: 0
return isBankVisibleForUser(baseBank, borrowedAmount, balance)
} else {
return true
}
})
useEffect(() => {
if (focusRef?.current && spotOrPerp === 'spot' && isDesktop && isOpen) {
focusRef.current.focus()
@ -379,8 +404,8 @@ const MarketSelectDropdown = () => {
/>
</p>
</div>
{serumMarketsToShow.length ? (
serumMarketsToShow.map((m) => {
{filteredSerumMarkets.length ? (
filteredSerumMarkets.map((m) => {
const baseBank = group?.getFirstBankByTokenIndex(
m.baseTokenIndex,
)

67
hooks/useBanksWithBalances.ts
View File

@ -6,6 +6,7 @@ import { useMemo } from 'react'
import useMangoAccount from './useMangoAccount'
import useMangoGroup from './useMangoGroup'
import Decimal from 'decimal.js'
import { isBankVisibleForUser } from 'utils/bank'
export interface BankWithBalance {
balance: number
@ -23,6 +24,7 @@ export default function useBanksWithBalances(
| 'maxBorrow'
| 'maxWithdraw'
| 'walletBalance',
showReduceOnlyTokens = false,
) {
const { group } = useMangoGroup()
const { mangoAccount } = useMangoAccount()
@ -36,35 +38,44 @@ export default function useBanksWithBalances(
key,
value,
}),
).map((b) => {
const bank = b.value[0]
const balance = mangoAccount ? mangoAccount.getTokenBalanceUi(bank) : 0
)
.map((b) => {
const bank = b.value[0]
const balance = mangoAccount
? mangoAccount.getTokenBalanceUi(bank)
: 0
const maxBorrow = mangoAccount
? getMaxWithdrawForBank(group, bank, mangoAccount, true).toNumber()
: 0
let maxWithdraw = mangoAccount
? getMaxWithdrawForBank(group, bank, mangoAccount).toNumber()
: 0
if (maxWithdraw < balance) {
maxWithdraw = maxWithdraw * 0.998
}
const borrowedAmount = mangoAccount
? new Decimal(mangoAccount.getTokenBorrowsUi(bank))
.toDecimalPlaces(bank.mintDecimals, Decimal.ROUND_UP)
.toNumber()
: 0
const walletBalance =
walletBalanceForToken(walletTokens, bank.name)?.maxAmount || 0
return {
bank,
balance,
borrowedAmount,
maxBorrow,
maxWithdraw,
walletBalance,
}
})
const maxBorrow = mangoAccount
? getMaxWithdrawForBank(group, bank, mangoAccount, true).toNumber()
: 0
let maxWithdraw = mangoAccount
? getMaxWithdrawForBank(group, bank, mangoAccount).toNumber()
: 0
if (maxWithdraw < balance) {
maxWithdraw = maxWithdraw * 0.998
}
const borrowedAmount = mangoAccount
? new Decimal(mangoAccount.getTokenBorrowsUi(bank))
.toDecimalPlaces(bank.mintDecimals, Decimal.ROUND_UP)
.toNumber()
: 0
const walletBalance =
walletBalanceForToken(walletTokens, bank.name)?.maxAmount || 0
return {
bank,
balance,
borrowedAmount,
maxBorrow,
maxWithdraw,
walletBalance,
}
})
.filter((x) =>
!showReduceOnlyTokens
? isBankVisibleForUser(x.bank, x.borrowedAmount, x.balance)
: true,
)
const sortedBanks = banksWithBalances.sort((a, b) => {
if (sortByKey) {

15
utils/bank.ts Normal file
View File

@ -0,0 +1,15 @@
import { Bank } from '@blockworks-foundation/mango-v4'
import { TOKEN_REDUCE_ONLY_OPTIONS } from './constants'
export const isBankVisibleForUser = (
bank: Bank,
borrowedAmount: number,
balance: number,
) => {
return (
bank.reduceOnly !== TOKEN_REDUCE_ONLY_OPTIONS.ENABLED ||
(bank.reduceOnly === TOKEN_REDUCE_ONLY_OPTIONS.ENABLED &&
borrowedAmount !== 0 &&
balance !== 0)
)
}