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

collateral fee modal warning (#410) 

* collateral fee warning

* fix

* modal content

* fix to calc

---------

Co-authored-by: saml33 <slam.uke@gmail.com>
Co-authored-by: Finn <finnfierro@gmail.com>
This commit is contained in:
Adrian Brzeziński 2024-04-09 20:20:29 +02:00 committed by GitHub
parent 328dcd4f67
commit 5bb919089b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Layout.tsx
View File

@ -42,6 +42,8 @@ import useUnownedAccount from 'hooks/useUnownedAccount'
import NewListingBanner from './NewListingBanner'
import useIpAddress from 'hooks/useIpAddress'
import RestrictedCountryModal from './modals/RestrictedCountryModal'
import useCollateralFeePositions from 'hooks/useCollateralFeePositions'
import CollateralFeeWarningModal from './modals/CollateralFeeWarningModal'
export const sideBarAnimationDuration = 300
const termsLastUpdated = 1679441610978
@ -49,6 +51,7 @@ const termsLastUpdated = 1679441610978
const Layout = ({ children }: { children: ReactNode }) => {
const themeData = mangoStore((s) => s.themeData)
const { theme } = useTheme()
const { showCollateralFeeWarning } = useCollateralFeePositions()
const [isCollapsed, setIsCollapsed] = useLocalStorageState(
SIDEBAR_COLLAPSE_KEY,
false,
@ -188,6 +191,9 @@ const Layout = ({ children }: { children: ReactNode }) => {
warningLevel={WARNING_LEVEL.FULL}
/>
) : null}
{showCollateralFeeWarning ? (
<CollateralFeeWarningModal isOpen={showCollateralFeeWarning} />
) : null}
</div>
</main>
)

92
components/modals/CollateralFeeWarningModal.tsx Normal file
View File

@ -0,0 +1,92 @@
import useCollateralFeePopupConditions from 'hooks/useCollateralFeePositions'
import Modal from '../shared/Modal'
import Button from '@components/shared/Button'
import { useTranslation } from 'react-i18next'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import TableTokenName from '@components/shared/TableTokenName'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
type WarningProps = {
isOpen: boolean
}
const CollateralFeeWarningModal = ({ isOpen }: WarningProps) => {
const { t } = useTranslation(['account'])
const {
setWasModalOpen,
marginPositionBalanceWithBanks,
collateralFeeBanks,
ltvRatio,
} = useCollateralFeePopupConditions()
console.log(marginPositionBalanceWithBanks)
return (
<Modal
isOpen={isOpen}
onClose={() => setWasModalOpen(true)}
disableOutsideClose
hideClose
>
<h2 className="mb-2 text-center">
{t('collateral-funding-modal-heading')}
</h2>
<a
className="mb-6 flex justify-center text-base font-bold"
href="https://docs.mango.markets/mango-markets/fees"
target="_blank"
rel="noopener noreferrer"
>
{t('whats-this')}
</a>
<Table>
<thead>
<TrHead>
<Th className="text-left">{t('collateral')}</Th>
<Th className="text-right">{t('funding-rate')} (APR)</Th>
<Th>
<div className="flex justify-end">{t('daily-fee')}</div>
</Th>
</TrHead>
</thead>
<tbody>
{collateralFeeBanks.map((b) => {
const { bank, balance } = b
return (
<TrBody key={bank.name}>
<Td>
<TableTokenName bank={bank} symbol={bank.name} />
</Td>
<Td>
<p>
{(ltvRatio * bank.collateralFeePerDay * 365 * 100).toFixed(
2,
)}
</p>
</Td>
<Td>
<div className="flex flex-col items-end">
<BankAmountWithValue
amount={ltvRatio * bank.collateralFeePerDay * balance}
bank={bank}
stacked
/>
</div>
</Td>
</TrBody>
)
})}
</tbody>
</Table>
<Button
className="mt-6 w-full"
onClick={() => {
setWasModalOpen(true)
}}
>
{t('okay-got-it')}
</Button>
</Modal>
)
}
export default CollateralFeeWarningModal

59
hooks/useCollateralFeePositions.ts Normal file
View File

@ -0,0 +1,59 @@
import { COLLATERAL_FEE_KEY } from 'utils/constants'
import useBanksWithBalances from './useBanksWithBalances'
import useLocalStorageState from './useLocalStorageState'
import { useMemo } from 'react'
const useCollateralFeePopupConditions = () => {
const [wasModalOpen, setWasModalOpen] = useLocalStorageState(
COLLATERAL_FEE_KEY,
false,
)
const banks = useBanksWithBalances('balance')
//check if there is at least 100$ active margin position and bank has collateral fee active
const marginPositionBalanceWithBanks = banks.filter(
(x) => x.balance < 0 && Math.abs(x.balance) * x.bank.uiPrice >= 100,
)
const collateralFeeBanks = banks.filter(
(x) => x.balance > 0 && x.bank.collateralFeePerDay > 0,
)
// Use useMemo to recalculate the LTV ratio only when the list of banks changes
const ltvRatio = useMemo(() => {
let totalWeightedAssets = 0
let totalWeightedLiabilities = 0
banks.forEach(({ balance, bank }) => {
const weight =
balance > 0
? Number(bank.maintAssetWeight)
: Number(bank.maintLiabWeight)
const value = Math.abs(balance) * bank.uiPrice * weight
if (balance > 0) {
totalWeightedAssets += value
} else if (balance < 0) {
totalWeightedLiabilities += value
}
})
return totalWeightedAssets > 0
? totalWeightedLiabilities / totalWeightedAssets
: 0
}, [banks])
const showCollateralFeeWarning =
!!marginPositionBalanceWithBanks.length &&
!!collateralFeeBanks.length &&
!wasModalOpen
return {
showCollateralFeeWarning,
setWasModalOpen,
marginPositionBalanceWithBanks,
collateralFeeBanks,
ltvRatio,
}
}
export default useCollateralFeePopupConditions

6
public/locales/en/account.json
View File

@ -5,15 +5,19 @@
"advanced-options-desc": "Mango Accounts have limits on the number of tokens and markets an account can hold at one time. This is due to how accounts on Solana work. Use the sliders to customize the slots for your new account.",
"assets": "Assets",
"assets-liabilities": "Assets & Liabilities",
"collateral": "Collateral",
"collateral-funding-modal-heading": "You'll be charged collateral funding fees in X hours",
"collateral-value": "Collateral Value",
"custom-account-options-saved": "Advanced options set",
"cumulative-interest-chart": "Cumulative Interest Chart",
"daily-fee": "Daily Fee",
"daily-volume": "24h Volume",
"export": "Export {{dataType}}",
"find-accounts": "Find Accounts",
"follow": "Follow",
"followed-accounts": "Followed Accounts",
"funding-chart": "Funding Chart",
"funding-rate": "Funding Rate",
"hide-announcements": "Hide Announcements",
"init-health": "Init Health",
"maint-health": "Maint Health",
@ -28,6 +32,7 @@
"no-data": "No data to display",
"no-pnl-history": "No PnL History",
"not-following-yet": "Your not following any accounts yet...",
"okay-got-it": "Okay, Got It",
"open-settings": "Open Settings",
"pnl-chart": "PnL Chart",
"pnl-history": "PnL History",
@ -58,6 +63,7 @@
"volume-chart": "Volume Chart",
"warning-uninsured": "{{token}} is not insured.",
"week-starting": "Week starting {{week}}",
"whats-this": "What's This?",
"zero-collateral": "Zero Collateral",
"zero-balances": "Show Zero Balances"
}

6
public/locales/es/account.json
View File

@ -5,15 +5,19 @@
"advanced-options-desc": "Mango Accounts have limits on the number of tokens and markets an account can hold at one time. This is due to how accounts on Solana work. Use the sliders to customize the slots for your new account.",
"assets": "Assets",
"assets-liabilities": "Assets & Liabilities",
"collateral": "Collateral",
"collateral-funding-modal-heading": "You'll be charged collateral funding fees in X hours",
"collateral-value": "Collateral Value",
"custom-account-options-saved": "Advanced options set",
"cumulative-interest-chart": "Cumulative Interest Chart",
"daily-fee": "Daily Fee",
"daily-volume": "24h Volume",
"export": "Export {{dataType}}",
"find-accounts": "Find Accounts",
"follow": "Follow",
"followed-accounts": "Followed Accounts",
"funding-chart": "Funding Chart",
"funding-rate": "Funding Rate",
"hide-announcements": "Hide Announcements",
"init-health": "Init Health",
"maint-health": "Maint Health",
@ -28,6 +32,7 @@
"no-data": "No data to display",
"no-pnl-history": "No PnL History",
"not-following-yet": "Your not following any accounts yet...",
"okay-got-it": "Okay, Got It",
"open-settings": "Open Settings",
"pnl-chart": "PnL Chart",
"pnl-history": "PnL History",
@ -58,6 +63,7 @@
"volume-chart": "Volume Chart",
"warning-uninsured": "{{token}} is not insured.",
"week-starting": "Week starting {{week}}",
"whats-this": "What's This?",
"zero-collateral": "Zero Collateral",
"zero-balances": "Show Zero Balances"
}

6
public/locales/pt/account.json
View File

@ -5,15 +5,19 @@
"advanced-options-desc": "As contas Mango têm limites no número de tokens e mercados que uma conta pode conter de cada vez. Isso se deve à forma como as contas no Solana funcionam. Use os controles deslizantes para personalizar os slots para sua nova conta.",
"assets": "Ativos",
"assets-liabilities": "Ativos e Passivos",
"collateral": "Collateral",
"collateral-funding-modal-heading": "You'll be charged collateral funding fees in X hours",
"collateral-value": "Valor do Colateral",
"custom-account-options-saved": "Opções avançadas definidas",
"cumulative-interest-chart": "Gráfico de Juros Acumulados",
"daily-fee": "Daily Fee",
"daily-volume": "Volume de 24h",
"export": "Exportar {{dataType}}",
"find-accounts": "Encontrar Contas",
"follow": "Seguir",
"followed-accounts": "Contas Seguidas",
"funding-chart": "Gráfico de Financiamento",
"funding-rate": "Funding Rate",
"hide-announcements": "Hide Announcements",
"init-health": "Saúde Inicial",
"maint-health": "Saúde de Manutenção",
@ -28,6 +32,7 @@
"no-data": "Sem dados para exibir",
"no-pnl-history": "Sem Histórico de PnL",
"not-following-yet": "Ainda não está seguindo nenhuma conta...",
"okay-got-it": "Okay, Got It",
"open-settings": "Abrir Configurações",
"pnl-chart": "Gráfico de PnL",
"pnl-history": "Histórico de PnL",
@ -57,6 +62,7 @@
"volume-chart": "Gráfico de Volume",
"warning-uninsured": "{{token}} não está segurado. No caso de uma perda socializada envolvendo {{token}}, você poderia perder fundos.",
"week-starting": "Semana começando {{week}}",
"whats-this": "What's This?",
"zero-collateral": "Colateral Zero",
"zero-balances": "Mostrar Saldos Zerados"
}

6
public/locales/ru/account.json
View File

@ -5,15 +5,19 @@
"advanced-options-desc": "Mango Accounts have limits on the number of tokens and markets an account can hold at one time. This is due to how accounts on Solana work. Use the sliders to customize the slots for your new account.",
"assets": "Assets",
"assets-liabilities": "Assets & Liabilities",
"collateral": "Collateral",
"collateral-funding-modal-heading": "You'll be charged collateral funding fees in X hours",
"collateral-value": "Collateral Value",
"custom-account-options-saved": "Advanced options set",
"cumulative-interest-chart": "Cumulative Interest Chart",
"daily-fee": "Daily Fee",
"daily-volume": "24h Volume",
"export": "Export {{dataType}}",
"find-accounts": "Find Accounts",
"follow": "Follow",
"followed-accounts": "Followed Accounts",
"funding-chart": "Funding Chart",
"funding-rate": "Funding Rate",
"hide-announcements": "Hide Announcements",
"init-health": "Init Health",
"maint-health": "Maint Health",
@ -28,6 +32,7 @@
"no-data": "No data to display",
"no-pnl-history": "No PnL History",
"not-following-yet": "Your not following any accounts yet...",
"okay-got-it": "Okay, Got It",
"open-settings": "Open Settings",
"pnl-chart": "PnL Chart",
"pnl-history": "PnL History",
@ -58,6 +63,7 @@
"volume-chart": "Volume Chart",
"warning-uninsured": "{{token}} is not insured.",
"week-starting": "Week starting {{week}}",
"whats-this": "What's This?",
"zero-collateral": "Zero Collateral",
"zero-balances": "Show Zero Balances"
}

6
public/locales/zh/account.json
View File

@ -5,15 +5,19 @@
"advanced-options-desc": "Mango帐户对帐户一次可以持有的币种数量和市场数量有限制。 这是Solana 帐户的特征之一。 使用滑杆为你的新帐户自订币种以市场位置。",
"assets": "资产",
"assets-liabilities": "资产和债务",
"collateral": "Collateral",
"collateral-funding-modal-heading": "You'll be charged collateral funding fees in X hours",
"collateral-value": "质押品价值",
"custom-account-options-saved": "已改高级设定",
"cumulative-interest-chart": "累积利息图表",
"daily-fee": "Daily Fee",
"daily-volume": "24小时交易量",
"export": "导出{{dataType}}",
"find-accounts": "寻找帐户",
"follow": "关注",
"followed-accounts": "你关注的帐户",
"funding-chart": "资金费图表",
"funding-rate": "Funding Rate",
"hide-announcements": "隐藏通知",
"health-contributions": "健康度贡献",
"init-health": "初始健康度",
@ -28,6 +32,7 @@
"no-data": "无数据可显示",
"no-pnl-history": "无盈亏历史",
"not-following-yet": "你尚未关注任何帐户...",
"okay-got-it": "Okay, Got It",
"open-settings": "打开设定",
"pnl-chart": "盈亏图表",
"pnl-history": "盈亏历史",
@ -58,6 +63,7 @@
"volume-chart": "交易量图表",
"warning-uninsured": "{{token}}不受保证。",
"week-starting": "从{{week}}来算的一周",
"whats-this": "What's This?",
"zero-balances": "显示等于零的余额",
"zero-collateral": "无质押品"
}

6
public/locales/zh_tw/account.json
View File

@ -5,15 +5,19 @@
"advanced-options-desc": "Mango帳戶對帳戶一次可以持有的幣種數量和市場數量有限制。 這是 Solana 帳戶的特徵之一。 使用滑桿為你的新帳戶自訂幣種以市場位置。",
"assets": "資產",
"assets-liabilities": "資產和債務",
"collateral": "Collateral",
"collateral-funding-modal-heading": "You'll be charged collateral funding fees in X hours",
"collateral-value": "質押品價值",
"custom-account-options-saved": "已改高級設定",
"cumulative-interest-chart": "累積利息圖表",
"daily-fee": "Daily Fee",
"daily-volume": "24小時交易量",
"export": "導出{{dataType}}",
"find-accounts": "尋找帳戶",
"follow": "關注",
"followed-accounts": "你關注的帳戶",
"funding-chart": "資金費圖表",
"funding-rate": "Funding Rate",
"hide-announcements": "隱藏通知",
"health-contributions": "健康度貢獻",
"init-health": "初始健康度",
@ -28,6 +32,7 @@
"no-data": "無數據可顯示",
"no-pnl-history": "無盈虧歷史",
"not-following-yet": "你尚未關注任何帳戶...",
"okay-got-it": "Okay, Got It",
"open-settings": "打開設定",
"pnl-chart": "盈虧圖表",
"pnl-history": "盈虧歷史",
@ -58,6 +63,7 @@
"volume-chart": "交易量圖表",
"warning-uninsured": "{{token}}不受保證。",
"week-starting": "從{{week}}來算的一周",
"whats-this": "What's This?",
"zero-balances": "顯示等於零的餘額",
"zero-collateral": "無質押品"
}

2
utils/constants.ts
View File

@ -227,3 +227,5 @@ export const MANGO_MAINNET_GROUP = new PublicKey(
)
export const MAX_PERP_SLIPPAGE = 0.025
export const COLLATERAL_FEE_KEY = 'collateral_fee_modal_v1'