diff --git a/package.json b/package.json index a012fe53a..34517fec4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mars-v2-frontend", - "version": "2.7.4", + "version": "2.7.5", "homepage": "./", "private": false, "license": "SEE LICENSE IN LICENSE FILE", @@ -22,7 +22,7 @@ "dependencies": { "@cosmjs/cosmwasm-stargate": "^0.32.4", "@delphi-labs/shuttle-react": "^3.29.0", - "@keplr-wallet/cosmos": "^0.12.141", + "@keplr-wallet/cosmos": "^0.12.152", "@tailwindcss/container-queries": "^0.1.1", "@tanstack/react-table": "^8.20.5", "@tippyjs/react": "^4.2.6", @@ -35,7 +35,7 @@ "lodash.throttle": "^4.1.1", "mobx": "^6.13.5", "moment": "^2.30.1", - "next": "^14.2.15", + "next": "^15.0.2", "react": "18.3.1", "react-device-detect": "^2.2.3", "react-dom": "^18.3.1", @@ -46,7 +46,7 @@ "react-spring": "^9.7.4", "react-toastify": "^10.0.6", "react-use-clipboard": "^1.0.9", - "recharts": "^2.13.0", + "recharts": "^2.13.3", "sharp": "^0.33.5", "starknet": "^6.11.0", "swr": "^2.2.5", @@ -54,27 +54,27 @@ "zustand": "4.5.5" }, "devDependencies": { - "@babel/eslint-parser": "^7.25.8", - "@eslint/compat": "^1.2.1", + "@babel/eslint-parser": "^7.25.9", + "@eslint/compat": "^1.2.2", "@svgr/webpack": "^8.1.0", "@types/debounce-promise": "^3.1.9", "@types/lodash.debounce": "^4.0.9", "@types/lodash.throttle": "^4.1.9", - "@types/node": "^22.7.7", - "@types/react": "18.3.11", + "@types/node": "^22.9.0", + "@types/react": "18.3.12", "@types/react-dom": "18.3.1", "@types/react-helmet": "^6.1.11", - "@typescript-eslint/eslint-plugin": "^8.10.0", - "@typescript-eslint/parser": "^8.10.0", + "@typescript-eslint/eslint-plugin": "^8.13.0", + "@typescript-eslint/parser": "^8.13.0", "autoprefixer": "^10.4.20", "dotenv": "^16.4.5", "dotenv-cli": "^7.4.2", - "eslint": "^9.13.0", + "eslint": "^9.14.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-functional": "^7.1.0", "eslint-plugin-import": "^2.31.0", "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-react": "^7.37.1", + "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "husky": "^9.1.6", "identity-obj-proxy": "^3.0.0", @@ -84,7 +84,7 @@ "shelljs": "^0.8.5", "tailwindcss": "^3.4.14", "typescript": "^5.6.3", - "typescript-eslint": "^8.10.0" + "typescript-eslint": "^8.13.0" }, "engines": { "npm": "please-use-yarn", diff --git a/public/images/bridges/discord.png b/public/images/bridges/discord.png new file mode 100644 index 000000000..5c7435662 Binary files /dev/null and b/public/images/bridges/discord.png differ diff --git a/public/images/bridges/skip.png b/public/images/bridges/skip.png new file mode 100644 index 000000000..e6f6d72c3 Binary files /dev/null and b/public/images/bridges/skip.png differ diff --git a/public/images/bridges/telegram.png b/public/images/bridges/telegram.png new file mode 100644 index 000000000..be9cef6f3 Binary files /dev/null and b/public/images/bridges/telegram.png differ diff --git a/public/tradingview.css b/public/tradingview.css index 80e8755f6..54804f7cf 100644 --- a/public/tradingview.css +++ b/public/tradingview.css @@ -328,11 +328,21 @@ button[class^='button-'][class*='secondary-']:hover { background-image: linear-gradient(0deg, var(--tv-background), transparent) !important; } +[class^='valuesWrapper-'] { + background: transparent !important; +} + [class^='noWrapWrapper-'] * { - pointer-events: none !important; - border: none !important; + pointer-events: none !important; background: transparent !important; - outline: none !important; +} + +[class^='noWrapWrapper-'] [class^='button-'], +[class^='noWrapWrapper-'] [class^='removeButton-'], +[class^='noWrapWrapper-'] [class^='editButton-'] { + pointer-events: auto !important; + background: var(--tv-background) !important; + cursor: pointer !important; } html.theme-dark ::selection { diff --git a/public/tradingview_default.css b/public/tradingview_default.css index fe327cf6e..253cadfb4 100644 --- a/public/tradingview_default.css +++ b/public/tradingview_default.css @@ -328,11 +328,21 @@ button[class^='button-'][class*='secondary-']:hover { background-image: linear-gradient(0deg, var(--tv-background), transparent) !important; } +[class^='valuesWrapper-'] { + background: transparent !important; +} + [class^='noWrapWrapper-'] * { - pointer-events: none !important; - border: none !important; + pointer-events: none !important; background: transparent !important; - outline: none !important; +} + +[class^='noWrapWrapper-'] [class^='button-'], +[class^='noWrapWrapper-'] [class^='removeButton-'], +[class^='noWrapWrapper-'] [class^='editButton-'] { + pointer-events: auto !important; + background: var(--tv-background) !important; + cursor: pointer !important; } html.theme-dark ::selection { diff --git a/src/api/accounts/getAccount.ts b/src/api/accounts/getAccount.ts index b65156a31..fb8f31646 100644 --- a/src/api/accounts/getAccount.ts +++ b/src/api/accounts/getAccount.ts @@ -1,4 +1,3 @@ -import { cacheFn, positionsCache, vaultPositionResponse } from 'api/cache' import { getCreditManagerQueryClient, getPerpsQueryClient } from 'api/cosmwasm-client' import getDepositedVaults from 'api/vaults/getDepositedVaults' import { Positions } from 'types/generated/mars-credit-manager/MarsCreditManager.types' @@ -16,19 +15,12 @@ export default async function getAccount( const isPerpsEnabled = chainConfig.perps const creditManagerQueryClient = await getCreditManagerQueryClient(chainConfig) - const accountPosition: Positions = await cacheFn( - () => creditManagerQueryClient.positions({ accountId }), - positionsCache, - `${chainConfig.id}/account/${accountId}`, - ) + const accountPosition: Positions = await creditManagerQueryClient.positions({ accountId }) + let perpsVaultPosition = null if (isPerpsEnabled && address) { const perpsQueryClient = await getPerpsQueryClient(chainConfig) - perpsVaultPosition = await cacheFn( - () => perpsQueryClient.vaultPosition({ accountId, userAddress: address }), - vaultPositionResponse, - `${chainConfig.id}/perpsVaultPosition/account/${accountId}`, - ) + perpsVaultPosition = await perpsQueryClient.vaultPosition({ accountId, userAddress: address }) } const accountKind = await creditManagerQueryClient.accountKind({ accountId: accountId }) diff --git a/src/api/assets/getDexAssets.ts b/src/api/assets/getDexAssets.ts index 180f98525..d2a743979 100644 --- a/src/api/assets/getDexAssets.ts +++ b/src/api/assets/getDexAssets.ts @@ -6,9 +6,10 @@ export default async function getDexAssets(chainConfig: ChainConfig) { const uri = new URL(chainConfig.endpoints.dexAssets) try { const assets = await fetch(uri.toString()).then(async (res) => { - const data = (await res.json()) as AstroportAsset[] - if (chainConfig.perps) data.push(...PERPS_ASSETS) - return convertAstroportAssetsResponse(data) + const data = (await res.json()) as AstroportAssetsCached + + if (chainConfig.perps) data.tokens.push(...PERPS_ASSETS) + return convertAstroportAssetsResponse(data.tokens) }) return assets } catch (e) { diff --git a/src/api/assets/getDexPools.ts b/src/api/assets/getDexPools.ts index a622cbffb..2326b6bf8 100644 --- a/src/api/assets/getDexPools.ts +++ b/src/api/assets/getDexPools.ts @@ -5,8 +5,8 @@ export default async function getDexPools(chainConfig: ChainConfig) { const uri = new URL(chainConfig.endpoints.dexPools) try { const pools = await fetch(uri.toString()).then(async (res) => { - const data = (await res.json()) as AstroportPool[] - return data + const data = (await res.json()) as AstroportPoolsCached + return data.pools }) return pools } catch (e) { diff --git a/src/api/campaign/getCampaignApys.ts b/src/api/campaign/getCampaignApys.ts index c0ea514ef..69067d27a 100644 --- a/src/api/campaign/getCampaignApys.ts +++ b/src/api/campaign/getCampaignApys.ts @@ -18,29 +18,31 @@ export default async function getCampaignApys( try { await fetchWithTimeout(url.toString(), FETCH_TIMEOUT).then(async (res) => { const data = (await res.json()) as any - if (Array.isArray(data[apyStructure[0]])) { - if (apyStructure[0] === denomStructure[0]) - data[apyStructure[0]].forEach((apyData: any) => { + const dataObject = data[apyStructure[0]] + if (Array.isArray(dataObject[apyStructure[1]])) { + if (apyStructure[1] === denomStructure[0]) + dataObject[apyStructure[1]].forEach((apyData: any) => { apys.push({ - apy: processApyData(apyData[apyStructure[1]], isApr, isPercent), + apy: processApyData(apyData[apyStructure[2]], isApr, isPercent), denom: apyData[denomStructure[1]], }) }) - } else if (Array.isArray(data)) { - data.forEach((campaign: any) => { + } else if (Array.isArray(dataObject)) { + dataObject.forEach((campaign: any) => { apys.push({ - apy: processApyData(campaign[apyStructure[0]], isApr, isPercent), + apy: processApyData(campaign[apyStructure[1]], isApr, isPercent), denom: campaign[denomStructure[0]], }) }) } else { const apyData = - apyStructure.length === 1 ? data[apyStructure[0]] : data[apyStructure[0]][apyStructure[1]] + apyStructure.length === 2 + ? dataObject[apyStructure[1]] + : dataObject[apyStructure[1]][apyStructure[2]] const denomData = denomStructure.length === 1 - ? data[denomStructure[0]] - : data[denomStructure[0]][denomStructure[1]] - + ? dataObject[denomStructure[0]] + : dataObject[denomStructure[0]][denomStructure[1]] apys.push({ apy: processApyData(apyData, isApr, isPercent), denom: denomData, diff --git a/src/api/vaults/getDepositedVaults.ts b/src/api/vaults/getDepositedVaults.ts index fd16327bf..ca7fea257 100644 --- a/src/api/vaults/getDepositedVaults.ts +++ b/src/api/vaults/getDepositedVaults.ts @@ -1,12 +1,5 @@ import moment from 'moment' -import { - cacheFn, - estimateWithdrawCache, - positionsCache, - previewRedeemCache, - unlockPositionsCache, -} from 'api/cache' import { getClient, getCreditManagerQueryClient, getVaultQueryClient } from 'api/cosmwasm-client' import getVaults from 'api/vaults/getVaults' import { BN_ZERO } from 'constants/math' @@ -28,15 +21,9 @@ async function getUnlocksAtTimestamp( ) { try { const client = await getClient(getUrl(chainConfig.endpoints.rpc)) - const vaultExtension = (await cacheFn( - () => - client.queryContractSmart(vaultAddress, { - vault_extension: { lockup: { unlocking_position: { lockup_id: unlockingId } } }, - }), - unlockPositionsCache, - `unlockPositions/${vaultAddress}.id/${unlockingId}`, - 60, - )) as VaultExtensionResponse + const vaultExtension = (await client.queryContractSmart(vaultAddress, { + vault_extension: { lockup: { unlocking_position: { lockup_id: unlockingId } } }, + })) as VaultExtensionResponse return Number(vaultExtension.release_at.at_time) / 1e6 } catch (ex) { @@ -101,28 +88,16 @@ export async function getLpTokensForVaultPosition( const amounts = flatVaultPositionAmount(vaultPosition.amount) const totalAmount = amounts.locked.plus(amounts.unlocked).plus(amounts.unlocking).toString() - const lpAmount = await cacheFn( - () => - vaultQueryClient.previewRedeem({ - amount: totalAmount, - }), - previewRedeemCache, - `previewRedeem/vaults/${vault.address}/amount/${totalAmount}`, - 60, - ) + const lpAmount = await vaultQueryClient.previewRedeem({ + amount: totalAmount, + }) - const lpTokens = await cacheFn( - () => - creditManagerQueryClient.estimateWithdrawLiquidity({ - lpToken: { - amount: lpAmount, - denom: vault.denoms.lp, - }, - }), - estimateWithdrawCache, - `lpToken/${vault.denoms.lp}/amount/${lpAmount}`, - 60, - ) + const lpTokens = await creditManagerQueryClient.estimateWithdrawLiquidity({ + lpToken: { + amount: lpAmount, + denom: vault.denoms.lp, + }, + }) const primaryLpToken = lpTokens.find((t) => t.denom === vault.denoms.primary) ?? { amount: '0', @@ -184,12 +159,7 @@ async function getDepositedVaults( try { const creditManagerQueryClient = await getCreditManagerQueryClient(chainConfig) - if (!positions) - positions = await cacheFn( - () => creditManagerQueryClient.positions({ accountId }), - positionsCache, - `depositedVaults/${accountId}`, - ) + if (!positions) positions = await creditManagerQueryClient.positions({ accountId }) if (!positions.vaults.length) return [] diff --git a/src/api/vaults/getVaults.ts b/src/api/vaults/getVaults.ts index 2e50b40be..52562f43e 100644 --- a/src/api/vaults/getVaults.ts +++ b/src/api/vaults/getVaults.ts @@ -1,16 +1,11 @@ -import getAssetParams from 'api/params/getAssetParams' import { getVaultConfigs } from 'api/vaults/getVaultConfigs' import { getVaultUtilizations } from 'api/vaults/getVaultUtilizations' import { BN } from 'utils/helpers' -import { resolveHlsStrategies } from 'utils/resolvers' export default async function getVaults(chainConfig: ChainConfig): Promise { - const assetParams = await getAssetParams(chainConfig) const vaultConfigs = await getVaultConfigs(chainConfig) const $vaultUtilizations = getVaultUtilizations(chainConfig, vaultConfigs) const vaultMetaDatas = chainConfig.vaults - const HlsAssets = assetParams.filter((asset) => asset.credit_manager.hls) - const hlsStrategies = resolveHlsStrategies('vault', HlsAssets) const vaults: Vault[] = [] await $vaultUtilizations.then((vaultUtilizations) => { @@ -38,17 +33,6 @@ export default async function getVaults(chainConfig: ChainConfig): Promise strategy.denoms.deposit === vaultConfig.addr, - ) - if (hlsStrategy) { - vault.hls = { - maxLTV: hlsStrategy.maxLTV, - maxLeverage: hlsStrategy.maxLeverage, - borrowDenom: hlsStrategy.denoms.borrow, - } - } - vaults.push(vault) }) }) diff --git a/src/chains/neutron/neutron-1.ts b/src/chains/neutron/neutron-1.ts index 952325057..b800753b1 100644 --- a/src/chains/neutron/neutron-1.ts +++ b/src/chains/neutron/neutron-1.ts @@ -84,12 +84,11 @@ const Neutron1: ChainConfig = { rest: process.env.NEXT_PUBLIC_NEUTRON_REST ?? 'https://rest-kralum.neutron-1.neutron.org', swap: 'https://neutron.astroport.fi/swap', explorer: 'https://mintscan.io/neutron', - dexAssets: 'https://api.astroport.fi/api/tokens?chainId=neutron-1', - dexPools: 'https://api.astroport.fi/api/pools?chainId=neutron-1', + dexAssets: 'https://neutron-cache-api.onrender.com/neutron-1/tokens', + dexPools: 'https://neutron-cache-api.onrender.com/neutron-1/pools', gasPrices: '/feemarket/v1/gas_price/untrn', aprs: { vaults: '', - stride: 'https://edge.stride.zone/api/stake-stats', }, }, network: NETWORK.MAINNET, diff --git a/src/chains/neutron/pion-1.ts b/src/chains/neutron/pion-1.ts index 07adefaaa..a48e50f52 100644 --- a/src/chains/neutron/pion-1.ts +++ b/src/chains/neutron/pion-1.ts @@ -13,13 +13,13 @@ const Pion1: ChainConfig = { sell: 'factory/neutron1ke0vqqzyymlp5esr8gjwuzh94ysnpvj8er5hm7/USDC', }, contracts: { - redBank: 'neutron14zjmuel0t8q9rqezp2vtj706ckl8eqtrkc2cjexsssh8vgpuzxdqjuqydr', - incentives: 'neutron1lkk4e6y9pjkev9patc3t6lwey7032f3eqh577v8dvk9ws8awsv4sk0t45a', - oracle: 'neutron1hkggq76w07x53z9hu2hhq8kn8n9e77vc0nztrl2h3sn4cgz9v0ps577a53', - params: 'neutron15tdtcemvkj3g7vuuz83twcekg86j3f58jet9lv08u0j7j8ztymsqd47l9z', - creditManager: 'neutron1gtqq647nrkgwxr3anrdty6fqfvfqav9kkwuu7el0gw754yx42dgs0s92zx', - accountNft: 'neutron128pgfadzvmck5qccgpcjwew4lgsn5e4ha82cu7rrnyg45rrpxessuqdnmt', - perps: 'neutron1mmjd5gz5943s4nnd5929s5hxfzw6lv3jrp3zthkxkanve70qax4qwyyzt5', + redBank: 'neutron1ecxhzp2d3jszlnlnu4rvt2aj4hsktmt9wwmc08vwqsxfc0t37huqxz5nzy', + incentives: 'neutron1ngls5thsvu0ekzrua6pq0ajtg0k48sfy68qsdyzu48eayj9xd3lssc988h', + oracle: 'neutron1s7l3zqg22zyn5rq7zv67um5qrtnulh33mwm28t5a3kdlrjq4z4lq5a4dte', + params: 'neutron1rljzsheama2w3hxx4z5g29wwxyh9gfc70mym5z4c6ep8a0vjjn4qmv3dzj', + creditManager: 'neutron1kejmclkxufzyrp38555g67je4parahqvw6xkhm523eysuhurf9tq388x60', + accountNft: 'neutron18axnu2zashqqrfy85f6w6l3p37w90m2ez242z7ptkgktscfx36asrssx0m', + perps: 'neutron1wmdenmmhjhhys9mz208v47l3a9uhx8hn6nkftf3588ccr0dajjcq9pqg4x', pyth: 'neutron15ldst8t80982akgr8w8ekcytejzkmfpgdkeq4xgtge48qs7435jqp87u3t', }, endpoints: { @@ -29,12 +29,11 @@ const Pion1: ChainConfig = { rest: process.env.NEXT_PUBLIC_NEUTRON_TEST_REST ?? 'https://rest-palvus.pion-1.ntrn.tech', swap: 'https://testnet-neutron.astroport.fi/swap', explorer: 'https://www.mintscan.io/neutron-testnet', - dexAssets: 'https://testnet.astroport.fi/api/tokens?chainId=pion-1', - dexPools: 'https://testnet.astroport.fi/api/pools?chainId=pion-1', + dexAssets: 'https://neutron-cache-api.onrender.com/pion-1/tokens', + dexPools: 'https://neutron-cache-api.onrender.com/pion-1/pools', gasPrices: '/feemarket/v1/gas_price/untrn', aprs: { vaults: '', - stride: 'https://edge.stride.zone/api/stake-stats', perpsVault: 'https://testnet-api.marsprotocol.io/v2/perps_vault?chain=neutron', }, }, diff --git a/src/chains/osmosis/osmosis-1.ts b/src/chains/osmosis/osmosis-1.ts index deb7d1bb8..a7ab7673a 100644 --- a/src/chains/osmosis/osmosis-1.ts +++ b/src/chains/osmosis/osmosis-1.ts @@ -115,11 +115,10 @@ const Osmosis1: ChainConfig = { process.env.NEXT_PUBLIC_OSMOSIS_REST ?? 'https://lcd-osmosis.blockapsis.com', 'osmosis/gamm/v1beta1/pools/POOL_ID', ), - dexAssets: 'https://api.astroport.fi/api/tokens?chainId=osmosis-1', + dexAssets: 'https://neutron-cache-api.onrender.com/osmosis-1/tokens', gasPrices: 'https://osmosis-api.polkachu.com/osmosis/txfees/v1beta1/cur_eip_base_fee', aprs: { vaults: 'https://api.marsprotocol.io/v1/vaults/osmosis', - stride: 'https://edge.stride.zone/api/stake-stats', }, }, dexName: 'Osmosis Dex', diff --git a/src/components/Modals/Account/AccountDeleteModal.tsx b/src/components/Modals/Account/AccountDeleteModal.tsx index 53af6c87c..b841dd505 100644 --- a/src/components/Modals/Account/AccountDeleteModal.tsx +++ b/src/components/Modals/Account/AccountDeleteModal.tsx @@ -1,6 +1,5 @@ import { useCallback, useMemo } from 'react' import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom' -import { useSWRConfig } from 'swr' import AccountAlertDialog from 'components/Modals/Account/AccountAlertDialog' import { ArrowRight, ExclamationMarkCircled } from 'components/common/Icons' @@ -28,11 +27,10 @@ export default function AccountDeleteController() { function AccountDeleteModal(props: Props) { const modal = props.modal - const chainConfig = useChainConfig() const deleteAccount = useStore((s) => s.deleteAccount) - const { mutate } = useSWRConfig() const { address: urlAddress } = useParams() const navigate = useNavigate() + const chainChonfig = useChainConfig() const { pathname } = useLocation() const { address } = useParams() const { debts, vaults, id: accountId } = modal || {} @@ -45,10 +43,9 @@ function AccountDeleteModal(props: Props) { const deleteAccountHandler = useCallback(async () => { useStore.setState({ accountDeleteModal: null }) const options = { accountId: modal.id, lends: modal.lends } - const path = getPage(pathname) + const path = getPage(pathname, chainChonfig) const isDeleted = await deleteAccount(options) if (isDeleted) { - mutate(`chains/${chainConfig.id}/wallets/${urlAddress}/account-ids`) if (path.includes('portfolio')) { // If the current page is the portfolio accounts detail page. Reroute the user to the portfolio overview page. navigate(getRoute('portfolio', searchParams, urlAddress)) @@ -60,15 +57,14 @@ function AccountDeleteModal(props: Props) { }, [ modal.id, modal.lends, + pathname, + chainChonfig, deleteAccount, + closeDeleteAccountModal, navigate, - pathname, searchParams, - address, urlAddress, - chainConfig.id, - mutate, - closeDeleteAccountModal, + address, ]) const depositsAndLends = useMemo( diff --git a/src/components/Modals/AstroLp/AstroLpWithdraw.tsx b/src/components/Modals/AstroLp/AstroLpWithdraw.tsx index 9e45333b5..25e8e9e19 100644 --- a/src/components/Modals/AstroLp/AstroLpWithdraw.tsx +++ b/src/components/Modals/AstroLp/AstroLpWithdraw.tsx @@ -10,10 +10,10 @@ import Text from 'components/common/Text' import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider' import { BN_ZERO } from 'constants/math' import useAssets from 'hooks/assets/useAssets' +import useChainConfig from 'hooks/chain/useChainConfig' import useHealthComputer from 'hooks/health-computer/useHealthComputer' import useStakedAstroLpRewards from 'hooks/incentives/useStakedAstroLpRewards' import useStore from 'store' -import { useSWRConfig } from 'swr' import { BNCoin } from 'types/classes/BNCoin' import { byDenom } from 'utils/array' import checkAutoLendEnabled from 'utils/checkAutoLendEnabled' @@ -34,13 +34,12 @@ interface Props { export default function AstroLpWithdraw(props: Props) { const { account, astroLp, simulateUnstakeAstroLp } = props const isHls = account.kind === 'high_levered_strategy' - const { mutate } = useSWRConfig() const { data: assets } = useAssets() const astroLpAsset = assets.find(byDenom(astroLp.denoms.lp)) const [withdrawAmount, setWithdrawAmount] = useState(BN_ZERO) const withdrawFromAstroLps = useStore((s) => s.withdrawFromAstroLps) const { computeMaxWithdrawAmount } = useHealthComputer(account) - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const isAutoLend = checkAutoLendEnabled(account.id, chainConfig.id) const astroLpPosition = useMemo( () => @@ -89,18 +88,7 @@ export default function AstroLpWithdraw(props: Props) { toWallet: isHls, rewards: currentLpRewards, }) - await mutate(`chains/${chainConfig.id}/accounts/${account.id}`) - await mutate(`chains/${chainConfig.id}/astroLps/${account.id}/staked-astro-lp-rewards`) - }, [ - account.id, - chainConfig.id, - currentLpRewards, - isHls, - mutate, - props.astroLp, - withdrawAmount, - withdrawFromAstroLps, - ]) + }, [account.id, currentLpRewards, isHls, props.astroLp, withdrawAmount, withdrawFromAstroLps]) if (!astroLpAsset) return null diff --git a/src/components/Modals/Farm/FarmBorrowings.tsx b/src/components/Modals/Farm/FarmBorrowings.tsx index 380726c82..86e983ff1 100644 --- a/src/components/Modals/Farm/FarmBorrowings.tsx +++ b/src/components/Modals/Farm/FarmBorrowings.tsx @@ -1,4 +1,3 @@ -import BigNumber from 'bignumber.js' import React, { useEffect, useMemo, useState } from 'react' import Button from 'components/common/Button' @@ -19,7 +18,6 @@ import useMarkets from 'hooks/markets/useMarkets' import useSlippage from 'hooks/settings/useSlippage' import useAutoLend from 'hooks/wallet/useAutoLend' import useStore from 'store' -import { useSWRConfig } from 'swr' import { BNCoin } from 'types/classes/BNCoin' import { removeEmptyBNCoins } from 'utils/accounts' import { byDenom } from 'utils/array' @@ -30,7 +28,6 @@ import { formatPercent } from 'utils/formatters' import { mergeBNCoinArrays } from 'utils/helpers' export default function FarmBorrowings(props: FarmBorrowingsProps) { - const { mutate } = useSWRConfig() const assets = useDepositEnabledAssets() const { borrowings, onChangeBorrowings, type } = props const isAstroLp = type === 'astroLp' @@ -189,8 +186,6 @@ export default function FarmBorrowings(props: FarmBorrowingsProps) { borrowings: props.borrowings, kind: 'default' as AccountKind, }) - await mutate(`chains/${chainConfig.id}/accounts/${updatedAccount.id}`) - await mutate(`chains/${chainConfig.id}/astroLps/${updatedAccount.id}/staked-astro-lp-rewards`) } return ( diff --git a/src/components/Modals/Farm/FarmDeposits.tsx b/src/components/Modals/Farm/FarmDeposits.tsx index 5e5e5962e..487d9c255 100644 --- a/src/components/Modals/Farm/FarmDeposits.tsx +++ b/src/components/Modals/Farm/FarmDeposits.tsx @@ -1,4 +1,3 @@ -import BigNumber from 'bignumber.js' import { useCallback, useMemo, useState } from 'react' import Button from 'components/common/Button' @@ -92,7 +91,7 @@ export default function FarmDeposits(props: Props) { }, [primaryValue, totalValue]) const secondaryValuePercentage = useMemo( - () => new BigNumber(100).minus(primaryValuePercentage).integerValue(2).toNumber() ?? 50, + () => BN(100).minus(primaryValuePercentage).integerValue(2).toNumber() ?? 50, [primaryValuePercentage], ) diff --git a/src/components/Modals/Farm/FarmDepositsSubTitle.tsx b/src/components/Modals/Farm/FarmDepositsSubTitle.tsx index 078772012..2e2c1df6a 100644 --- a/src/components/Modals/Farm/FarmDepositsSubTitle.tsx +++ b/src/components/Modals/Farm/FarmDepositsSubTitle.tsx @@ -1,4 +1,3 @@ -import BigNumber from 'bignumber.js' import classNames from 'classnames' import { useMemo } from 'react' diff --git a/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx b/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx index cd40f0d22..f2cc24ef8 100644 --- a/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx +++ b/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx @@ -1,4 +1,3 @@ -import BigNumber from 'bignumber.js' import { useCallback, useMemo, useState } from 'react' import Button from 'components/common/Button' diff --git a/src/components/Modals/Hls/Deposit/CreateAccount.tsx b/src/components/Modals/Hls/Deposit/CreateAccount.tsx index 7f65580e8..420d6bb3b 100644 --- a/src/components/Modals/Hls/Deposit/CreateAccount.tsx +++ b/src/components/Modals/Hls/Deposit/CreateAccount.tsx @@ -1,5 +1,4 @@ import { useState } from 'react' -import { mutate } from 'swr' import Button from 'components/common/Button' import DocsLink from 'components/common/DocsLink' @@ -20,7 +19,6 @@ export default function CreateAccount() { setIsTxPending(false) return } - await mutate('accounts/high_levered_strategy') } return ( diff --git a/src/components/Modals/Hls/Deposit/FarmLeverage.tsx b/src/components/Modals/Hls/Deposit/FarmLeverage.tsx index 5c55b6657..6d60c1ed8 100644 --- a/src/components/Modals/Hls/Deposit/FarmLeverage.tsx +++ b/src/components/Modals/Hls/Deposit/FarmLeverage.tsx @@ -1,4 +1,3 @@ -import BigNumber from 'bignumber.js' import React, { useEffect, useMemo } from 'react' import Button from 'components/common/Button' diff --git a/src/components/Modals/Hls/Deposit/Summary/HlsFarmingSummary.tsx b/src/components/Modals/Hls/Deposit/Summary/HlsFarmingSummary.tsx index 15cee354a..d78494f9d 100644 --- a/src/components/Modals/Hls/Deposit/Summary/HlsFarmingSummary.tsx +++ b/src/components/Modals/Hls/Deposit/Summary/HlsFarmingSummary.tsx @@ -11,7 +11,6 @@ import useChainConfig from 'hooks/chain/useChainConfig' import useSlippage from 'hooks/settings/useSlippage' import { useCallback, useMemo, useState } from 'react' import useStore from 'store' -import { useSWRConfig } from 'swr' import { BNCoin } from 'types/classes/BNCoin' import { removeEmptyBNCoins } from 'utils/accounts' import { byDenom } from 'utils/array' @@ -36,7 +35,6 @@ export default function HlsFarmingSummary(props: Props) { const { data: assets } = useAssets() const chainConfig = useChainConfig() const [slippage] = useSlippage() - const { mutate } = useSWRConfig() const depositIntoFarm = useStore((s) => s.depositIntoFarm) const updatedAccount = useStore((s) => s.updatedAccount) const [isCalculating, setIsCaluclating] = useState(false) @@ -74,8 +72,6 @@ export default function HlsFarmingSummary(props: Props) { borrowings: borrowings, kind: 'high_levered_strategy' as AccountKind, }) - await mutate(`chains/${chainConfig.id}/accounts/${account.id}`) - await mutate(`chains/${chainConfig.id}/astroLps/${account.id}/staked-astro-lp-rewards`) }, [ astroLp, deposits, @@ -86,7 +82,6 @@ export default function HlsFarmingSummary(props: Props) { depositIntoFarm, account.id, borrowings, - mutate, ]) const newTotalValue = useMemo(() => { diff --git a/src/components/Modals/Hls/Manage/Deposit.tsx b/src/components/Modals/Hls/Manage/Deposit.tsx index 973d6dbc7..5d8bdb0e5 100644 --- a/src/components/Modals/Hls/Manage/Deposit.tsx +++ b/src/components/Modals/Hls/Manage/Deposit.tsx @@ -1,4 +1,3 @@ -import BigNumber from 'bignumber.js' import { useCallback, useMemo } from 'react' import Button from 'components/common/Button' diff --git a/src/components/Modals/KeeperFeeModal.tsx b/src/components/Modals/KeeperFeeModal.tsx index cd2bfc4ba..e72f4b847 100644 --- a/src/components/Modals/KeeperFeeModal.tsx +++ b/src/components/Modals/KeeperFeeModal.tsx @@ -8,7 +8,7 @@ import { Callout, CalloutType } from 'components/common/Callout' import Text from 'components/common/Text' import { getDefaultChainSettings } from 'constants/defaultSettings' import { LocalStorageKeys } from 'constants/localStorageKeys' -import { BN_ONE } from 'constants/math' +import { BN_ZERO_ONE } from 'constants/math' import useAsset from 'hooks/assets/useAsset' import useChainConfig from 'hooks/chain/useChainConfig' import useLocalStorage from 'hooks/localStorage/useLocalStorage' @@ -71,9 +71,9 @@ export default function KeeperFeeModal() { asset={USD} isUSD /> - {amount.isLessThan(BN_ONE) && ( + {amount.isLessThan(BN_ZERO_ONE) && ( - You can not set the Keeper Fee to less than $1.00 as it is the minimum amount for the + You can not set the Keeper Fee to less than $0.10 as it is the minimum amount for the Keeper Fee. )} @@ -84,7 +84,7 @@ export default function KeeperFeeModal() { - + {props.modal.type === 'deposit' && perpsVault && ( + <> + +
+
+ Deposit from Wallet + + Deposit directly from your wallet + +
+ +
+ + + {`Please note there is an unlocking period of ${perpsVault.lockup.duration} ${perpsVault.lockup.timeframe} when depositing into this + vault.`} + + + Your overall leverage may be increased as any deposits into this vault are removed + from your total collateral value. + + + )} + } header={
} diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx index 3c2ded159..92e1acce1 100644 --- a/src/components/Modals/Settings/index.tsx +++ b/src/components/Modals/Settings/index.tsx @@ -396,7 +396,11 @@ export default function SettingsModal() { textSize='extraSmall' className='leading-4 text-white hover:underline' onClick={() => { - useStore.setState({ settingsModal: false, getStartedModal: true }) + useStore.setState({ + settingsModal: false, + // TODO: update docs to reflect the current state of v2 + //getStartedModal: true + }) }} > Get Started. diff --git a/src/components/Modals/v1/Borrow.tsx b/src/components/Modals/v1/Borrow.tsx index 9620efb00..26889c9b2 100644 --- a/src/components/Modals/v1/Borrow.tsx +++ b/src/components/Modals/v1/Borrow.tsx @@ -16,7 +16,7 @@ import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSli import Modal from 'components/Modals/Modal' import { BN_ZERO } from 'constants/math' import { useUpdatedAccount } from 'hooks/accounts/useUpdatedAccount' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import useBaseAsset from 'hooks/assets/useBaseAsset' import useHealthComputer from 'hooks/health-computer/useHealthComputer' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' diff --git a/src/components/Modals/v1/Deposit.tsx b/src/components/Modals/v1/Deposit.tsx index 516e4b992..eef22e029 100644 --- a/src/components/Modals/v1/Deposit.tsx +++ b/src/components/Modals/v1/Deposit.tsx @@ -5,7 +5,7 @@ import DetailsHeader from 'components/Modals/LendAndReclaim/DetailsHeader' import WalletBridges from 'components/Wallet/WalletBridges' import { BN_ZERO } from 'constants/math' import { useUpdatedAccount } from 'hooks/accounts/useUpdatedAccount' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import useBaseAsset from 'hooks/assets/useBaseAsset' import useCurrentWalletBalance from 'hooks/wallet/useCurrentWalletBalance' import useWalletBalances from 'hooks/wallet/useWalletBalances' import useStore from 'store' diff --git a/src/components/Modals/v1/Repay.tsx b/src/components/Modals/v1/Repay.tsx index 90c72ee9f..d5821f6ac 100644 --- a/src/components/Modals/v1/Repay.tsx +++ b/src/components/Modals/v1/Repay.tsx @@ -16,7 +16,7 @@ import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSli import Modal from 'components/Modals/Modal' import { BN_ZERO } from 'constants/math' import { useUpdatedAccount } from 'hooks/accounts/useUpdatedAccount' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import useBaseAsset from 'hooks/assets/useBaseAsset' import useMarkets from 'hooks/markets/useMarkets' import useCurrentWalletBalance from 'hooks/wallet/useCurrentWalletBalance' import useStore from 'store' diff --git a/src/components/Modals/v1/V1BorrowAndRepay.tsx b/src/components/Modals/v1/V1BorrowAndRepay.tsx index 31588b78b..7b4255cc4 100644 --- a/src/components/Modals/v1/V1BorrowAndRepay.tsx +++ b/src/components/Modals/v1/V1BorrowAndRepay.tsx @@ -1,11 +1,11 @@ import Borrow from 'components/Modals/v1/Borrow' import Repay from 'components/Modals/v1/Repay' -import useAccount from 'hooks/accounts/useAccount' +import useV1Account from 'hooks/v1/useV1Account' import useStore from 'store' export default function V1BorrowAndRepayModal() { - const address = useStore((s) => s.address) - const { data: account } = useAccount(address) + const { data: account } = useV1Account() + const modal = useStore((s) => s.v1BorrowAndRepayModal) const isBorrow = modal?.type === 'borrow' diff --git a/src/components/Modals/v1/V1DepositAndWithdraw.tsx b/src/components/Modals/v1/V1DepositAndWithdraw.tsx index 67c5303a2..bf9b68772 100644 --- a/src/components/Modals/v1/V1DepositAndWithdraw.tsx +++ b/src/components/Modals/v1/V1DepositAndWithdraw.tsx @@ -1,11 +1,10 @@ import Deposit from 'components/Modals/v1/Deposit' import Withdraw from 'components/Modals/v1/Withdraw' -import useAccount from 'hooks/accounts/useAccount' +import useV1Account from 'hooks/v1/useV1Account' import useStore from 'store' export default function V1DepositAndWithdraw() { - const address = useStore((s) => s.address) - const { data: account } = useAccount(address) + const { data: account } = useV1Account() const modal = useStore((s) => s.v1DepositAndWithdrawModal) const isDeposit = modal?.type === 'deposit' diff --git a/src/components/Modals/v1/Withdraw.tsx b/src/components/Modals/v1/Withdraw.tsx index b78671278..1d4098cf3 100644 --- a/src/components/Modals/v1/Withdraw.tsx +++ b/src/components/Modals/v1/Withdraw.tsx @@ -4,7 +4,7 @@ import AssetAmountSelectActionModal from 'components/Modals/AssetAmountSelectAct import DetailsHeader from 'components/Modals/LendAndReclaim/DetailsHeader' import { BN_ZERO } from 'constants/math' import { useUpdatedAccount } from 'hooks/accounts/useUpdatedAccount' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import useBaseAsset from 'hooks/assets/useBaseAsset' import useHealthComputer from 'hooks/health-computer/useHealthComputer' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' diff --git a/src/components/Wallet/WalletBridges.tsx b/src/components/Wallet/WalletBridges.tsx index 4677bc273..514fd59d4 100644 --- a/src/components/Wallet/WalletBridges.tsx +++ b/src/components/Wallet/WalletBridges.tsx @@ -8,13 +8,14 @@ import { ChevronRight } from 'components/common/Icons' import Text from 'components/common/Text' import WalletFetchBalancesAndAccounts from 'components/Wallet/WalletFetchBalancesAndAccounts' import WalletSelect from 'components/Wallet/WalletSelect' -import { BRIDGES } from 'constants/bridges' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import { BRIDGES, NTRN_FAUCETS } from 'constants/bridges' +import useBaseAsset from 'hooks/assets/useBaseAsset' import useChainConfig from 'hooks/chain/useChainConfig' import useToggle from 'hooks/common/useToggle' import useCurrentWallet from 'hooks/wallet/useCurrentWallet' import useWalletBalances from 'hooks/wallet/useWalletBalances' import useStore from 'store' +import { ChainInfoID } from 'types/enums' import { byDenom } from 'utils/array' import { defaultFee } from 'utils/constants' import { BN } from 'utils/helpers' @@ -69,12 +70,27 @@ export default function WalletBridges() { setHasFunds(true) }, [baseBalance, isLoading, hasFunds, setHasFunds, chainConfig]) + const isNeutronTestnet = useMemo(() => chainConfig.id === ChainInfoID.Pion1, [chainConfig]) + const [bridges, introText] = useMemo( + () => + isNeutronTestnet + ? [ + NTRN_FAUCETS, + `To get started, you'll need at least a small amount of NTRN to cover transaction fees. You can get testnet funds from the Neutron Faucets in Discord or Telegram.`, + ] + : [ + BRIDGES, + `To get started, you'll need at least a small amount of ${ + chainConfig.defaultCurrency?.coinDenom ?? 'the current chains gas token' + } to cover transaction fees on Mars. Fund your wallet or bridge some in from another chain.`, + ], + [chainConfig.defaultCurrency?.coinDenom, isNeutronTestnet], + ) + return (
- {BRIDGES.map((bridge) => ( + {bridges.map((bridge) => ( ))}
diff --git a/src/components/Wallet/WalletConnectedButton.tsx b/src/components/Wallet/WalletConnectedButton.tsx index 0bec97bb4..78ef4b3a5 100644 --- a/src/components/Wallet/WalletConnectedButton.tsx +++ b/src/components/Wallet/WalletConnectedButton.tsx @@ -17,7 +17,7 @@ import { Check, Copy, ExternalLink, Wallet } from 'components/common/Icons' import Overlay from 'components/common/Overlay' import Text from 'components/common/Text' import { BN_ZERO } from 'constants/math' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import useBaseAsset from 'hooks/assets/useBaseAsset' import useChainConfig from 'hooks/chain/useChainConfig' import useToggle from 'hooks/common/useToggle' import useCurrentWallet from 'hooks/wallet/useCurrentWallet' @@ -87,7 +87,7 @@ export default function WalletConnectedButton() { }) } - navigate(getRoute(getPage(pathname), new URLSearchParams())) + navigate(getRoute(getPage(pathname, chainConfig), new URLSearchParams())) } useEffect(() => { diff --git a/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx b/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx index 5fc46093a..a79196c4a 100644 --- a/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx +++ b/src/components/Wallet/WalletFetchBalancesAndAccounts.tsx @@ -7,7 +7,8 @@ import FullOverlayContent from 'components/common/FullOverlayContent' import WalletBridges from 'components/Wallet/WalletBridges' import useAccountId from 'hooks/accounts/useAccountId' import useAccountIds from 'hooks/accounts/useAccountIds' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import useBaseAsset from 'hooks/assets/useBaseAsset' +import useChainConfig from 'hooks/chain/useChainConfig' import useWalletBalances from 'hooks/wallet/useWalletBalances' import useStore from 'store' import { byDenom } from 'utils/array' @@ -31,6 +32,7 @@ function Content() { const isV1 = useStore((s) => s.isV1) const { address: urlAddress } = useParams() const urlAccountId = useAccountId() + const chainConfig = useChainConfig() const navigate = useNavigate() const { pathname } = useLocation() const { data: accountIds, isLoading: isLoadingAccounts } = useAccountIds( @@ -47,7 +49,7 @@ function Content() { ) useEffect(() => { - const page = getPage(pathname) + const page = getPage(pathname, chainConfig) if (page === 'portfolio' && urlAddress && urlAddress !== address) { navigate(getRoute(page, searchParams, urlAddress as string)) @@ -74,6 +76,7 @@ function Content() { urlAccountId, searchParams, isV1, + chainConfig, ]) if (isLoadingAccounts || isLoadingBalances) return diff --git a/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx b/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx index a0a90c4f6..5c947be9f 100644 --- a/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx +++ b/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx @@ -6,6 +6,7 @@ import Text from 'components/common/Text' import { Tooltip } from 'components/common/Tooltip' import useLiquidationPrice from 'hooks/prices/useLiquidationPrice' import { BNCoin } from 'types/classes/BNCoin' +import { getPerpsPriceDecimals } from 'utils/formatters' import { LiquidationPriceKind } from 'utils/health_computer' import { BN } from 'utils/helpers' @@ -27,21 +28,33 @@ interface Props { export default function LiqPrice(props: Props) { const { denom, type, amount, account, computeLiquidationPrice, isWhitelisted } = props const hasDebt = account.debts.length > 0 + const isPerp = type === 'perp' const liqPrice = useMemo(() => { if (type === 'vault' || amount === 0) return 0 - return computeLiquidationPrice(denom, type === 'borrow' ? 'debt' : 'asset') + return computeLiquidationPrice( + denom, + type === 'borrow' ? 'debt' : type === 'perp' ? 'perp' : 'asset', + ) }, [amount, computeLiquidationPrice, denom, type]) const { liquidationPrice } = useLiquidationPrice(liqPrice) const tooltipText = useMemo(() => { if (type === 'vault') - return 'Liquidation prices cannot be calculated for farm positions. But it a drop in price of the underlying assets can still cause a liquidation.' + return 'Liquidation prices cannot be calculated for farm positions. But a drop in price of the underlying assets can still cause a liquidation.' if (!isWhitelisted) return 'This asset is not collateral and can not be liquidated.' - if (!hasDebt) return 'Your position cannot be liquidated as you currently have no debt.' + if (!hasDebt && !isPerp) + return 'Your position cannot be liquidated as you currently have no debt.' return 'The position size is too small to liquidate the account, even if the price goes to $0.00.' - }, [isWhitelisted, type, hasDebt]) + }, [type, isWhitelisted, hasDebt, isPerp]) + + if (amount === 0) + return ( + + - + + ) if (!liqPrice || (liquidationPrice === 0 && liqPrice === 0)) return ( @@ -57,7 +70,12 @@ export default function LiqPrice(props: Props) { ) } diff --git a/src/components/account/AccountBalancesTable/Columns/Price.tsx b/src/components/account/AccountBalancesTable/Columns/Price.tsx index 6669cd6fc..b3e0efb08 100644 --- a/src/components/account/AccountBalancesTable/Columns/Price.tsx +++ b/src/components/account/AccountBalancesTable/Columns/Price.tsx @@ -1,6 +1,7 @@ import DisplayCurrency from 'components/common/DisplayCurrency' import usePrice from 'hooks/prices/usePrice' import { BNCoin } from 'types/classes/BNCoin' +import { getSpotPriceDecimals } from 'utils/formatters' import { BN } from 'utils/helpers' export const PRICE_META = { id: 'price', header: 'Price', meta: { className: 'w-30' } } @@ -14,13 +15,19 @@ interface Props { export default function Price(props: Props) { const price = usePrice(props.denom) + const priceDecimals = getSpotPriceDecimals(BN(price)) if (props.amount === 0 || props.type === 'vault') return null return ( ) } diff --git a/src/components/account/AccountBalancesTable/index.tsx b/src/components/account/AccountBalancesTable/index.tsx index 38a2e339e..729b6bfde 100644 --- a/src/components/account/AccountBalancesTable/index.tsx +++ b/src/components/account/AccountBalancesTable/index.tsx @@ -14,6 +14,7 @@ import useWhitelistedAssets from 'hooks/assets/useWhitelistedAssets' import { useMemo } from 'react' import useStore from 'store' import { getPage, getRoute } from 'utils/route' +import useChainConfig from 'hooks/chain/useChainConfig' interface Props { account: Account @@ -36,6 +37,7 @@ export default function AccountBalancesTable(props: Props) { showLiquidationPrice, isUsersAccount, } = props + const chainConfig = useChainConfig() const currentAccount = useCurrentAccount() const navigate = useNavigate() const { pathname } = useLocation() @@ -83,13 +85,16 @@ export default function AccountBalancesTable(props: Props) { color='tertiary' onClick={() => { if (currentAccount?.id !== account.id) { - navigate(getRoute(getPage(pathname), searchParams, address, account.id)) + navigate( + getRoute(getPage(pathname, chainConfig), searchParams, address, account.id), + ) } useStore.setState({ focusComponent: { component: , onClose: () => { - useStore.setState({ getStartedModal: true }) + // TODO: update docs to reflect the current state of v2 + //useStore.setState({ getStartedModal: true }) }, }, }) @@ -122,6 +127,7 @@ export default function AccountBalancesTable(props: Props) { spacingClassName='p-2' hideCard={hideCard} type='balances' + isBalancesTable /> ) } diff --git a/src/components/account/AccountComposition.tsx b/src/components/account/AccountComposition.tsx index aeecefb61..f70cf2e77 100644 --- a/src/components/account/AccountComposition.tsx +++ b/src/components/account/AccountComposition.tsx @@ -1,4 +1,3 @@ -import BigNumber from 'bignumber.js' import classNames from 'classnames' import { useMemo } from 'react' @@ -9,24 +8,22 @@ import { FormattedNumber } from 'components/common/FormattedNumber' import { ArrowRight } from 'components/common/Icons' import Text from 'components/common/Text' import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData' -import { BN_ZERO, MAX_AMOUNT_DECIMALS } from 'constants/math' +import { MAX_AMOUNT_DECIMALS } from 'constants/math' import { ORACLE_DENOM } from 'constants/oracle' -import useWhitelistedAssets from 'hooks/assets/useWhitelistedAssets' +import useAssets from 'hooks/assets/useAssets' import useAstroLpAprs from 'hooks/astroLp/useAstroLpAprs' import useChainConfig from 'hooks/chain/useChainConfig' +import useAssetParams from 'hooks/params/useAssetParams' +import usePerpsVault from 'hooks/perps/usePerpsVault' import useVaultAprs from 'hooks/vaults/useVaultAprs' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' -import { - calculateAccountApy, - getAccountDebtValue, - getAccountTotalValue, - getAccountUnrealizedPnlValue, -} from 'utils/accounts' +import { getAccountSummaryStats, getAccountUnrealizedPnlValue } from 'utils/accounts' interface Props { account: Account } + interface ItemProps { title: string current: BigNumber @@ -46,9 +43,11 @@ export default function AccountComposition(props: Props) { account, updatedAccount, }) + const astroLpAprs = useAstroLpAprs() - const assets = useWhitelistedAssets() + const { data: assets } = useAssets() const data = useBorrowMarketAssetsTableData() + const { data: perpsVault } = usePerpsVault() const borrowAssetsData = useMemo(() => data?.allAssets || [], [data]) const { availableAssets: lendingAvailableAssets, accountLentAssets } = useLendingMarketAssetsTableData() @@ -56,18 +55,77 @@ export default function AccountComposition(props: Props) { () => [...lendingAvailableAssets, ...accountLentAssets], [lendingAvailableAssets, accountLentAssets], ) + const assetParams = useAssetParams() - const debtsBalance = useMemo(() => getAccountDebtValue(account, assets), [account, assets]) - const totalBalance = useMemo(() => getAccountTotalValue(account, assets), [account, assets]) - const updatedDebtsBalance = useMemo( - () => getAccountDebtValue(updatedAccount ?? account, assets), - [updatedAccount, account, assets], - ) - const updatedPositionValue = useMemo( - () => getAccountTotalValue(updatedAccount ?? account, assets), - [updatedAccount, account, assets], + const { positionValue, debts, netWorth, collateralValue, apy, leverage } = useMemo( + () => + getAccountSummaryStats( + account, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data || [], + perpsVault?.apy || 0, + ), + [ + account, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data, + perpsVault?.apy, + ], ) + const { + positionValue: updatedPositionValue, + debts: updatedDebts, + netWorth: updatedNetWorth, + collateralValue: updatedCollateralValue, + apy: updatedApy, + leverage: updatedLeverage, + } = useMemo(() => { + if (!updatedAccount) { + return { + positionValue, + debts, + netWorth, + collateralValue, + apy, + leverage, + } + } + return getAccountSummaryStats( + updatedAccount, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data || [], + perpsVault?.apy || 0, + ) + }, [ + updatedAccount, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data, + perpsVault?.apy, + positionValue, + debts, + netWorth, + collateralValue, + apy, + leverage, + ]) + const totalUnrealizedPnl = useMemo( () => getAccountUnrealizedPnlValue(account, assets), [account, assets], @@ -78,45 +136,24 @@ export default function AccountComposition(props: Props) { [updatedAccount, account, assets], ) - const apy = useMemo( - () => - calculateAccountApy( - account, - borrowAssetsData, - lendingAssetsData, - assets, - vaultAprs, - astroLpAprs, - ), - [account, assets, borrowAssetsData, lendingAssetsData, vaultAprs, astroLpAprs], - ) - const updatedApy = useMemo( - () => - updatedAccount - ? calculateAccountApy( - updatedAccount, - borrowAssetsData, - lendingAssetsData, - assets, - vaultAprs, - astroLpAprs, - ) - : BN_ZERO, - [updatedAccount, borrowAssetsData, lendingAssetsData, assets, vaultAprs, astroLpAprs], - ) - return (
+ diff --git a/src/components/account/AccountCreateFirst.tsx b/src/components/account/AccountCreateFirst.tsx index fd475862c..f0e481e47 100644 --- a/src/components/account/AccountCreateFirst.tsx +++ b/src/components/account/AccountCreateFirst.tsx @@ -4,6 +4,7 @@ import { useLocation, useNavigate, useSearchParams } from 'react-router-dom' import AccountFundFullPage from 'components/account/AccountFund/AccountFundFullPage' import FullOverlayContent from 'components/common/FullOverlayContent' import WalletSelect from 'components/Wallet/WalletSelect' +import useChainConfig from 'hooks/chain/useChainConfig' import useToggle from 'hooks/common/useToggle' import useEnableAutoLendGlobal from 'hooks/localStorage/useEnableAutoLendGlobal' import useStore from 'store' @@ -13,6 +14,7 @@ export default function AccountCreateFirst() { const navigate = useNavigate() const { pathname } = useLocation() const address = useStore((s) => s.address) + const chainConfig = useChainConfig() const createAccount = useStore((s) => s.createAccount) const [isCreating, setIsCreating] = useToggle(false) const [searchParams] = useSearchParams() @@ -27,17 +29,27 @@ export default function AccountCreateFirst() { const accountId = await createAccount('default', isAutoLendEnabled) setIsCreating(false) if (accountId) { - navigate(getRoute(getPage(pathname), searchParams, address, accountId)) + navigate(getRoute(getPage(pathname, chainConfig), searchParams, address, accountId)) useStore.setState({ focusComponent: { component: , onClose: () => { - useStore.setState({ getStartedModal: true }) + // TODO: update docs to reflect the current state of v2 + //useStore.setState({ getStartedModal: true }) }, }, }) } - }, [setIsCreating, createAccount, isAutoLendEnabled, navigate, pathname, searchParams, address]) + }, [ + setIsCreating, + createAccount, + isAutoLendEnabled, + navigate, + pathname, + chainConfig, + searchParams, + address, + ]) return ( s.focusComponent) const isOwnAccount = accountId && accountIds?.includes(accountId) @@ -68,6 +67,7 @@ function AccountDetails(props: Props) { const { account } = props const location = useLocation() const { data: vaultAprs } = useVaultAprs() + const { data: perpsVault } = usePerpsVault() const astroLpAprs = useAstroLpAprs() const [reduceMotion] = useLocalStorage( LocalStorageKeys.REDUCE_MOTION, @@ -79,27 +79,20 @@ function AccountDetails(props: Props) { const { health: updatedHealth, healthFactor: updatedHealthFactor } = useHealthComputer( updatedAccount || account, ) - const whitelistedAssets = useWhitelistedAssets() - const perpsAssets = usePerpsEnabledAssets() + const { data: assets } = useAssets() const accountBalanceValue = useMemo( - () => calculateAccountBalanceValue(updatedAccount ?? account, whitelistedAssets), - [updatedAccount, account, whitelistedAssets], + () => calculateAccountBalanceValue(updatedAccount ?? account, assets), + [updatedAccount, account, assets], ) const coin = BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, accountBalanceValue) - const leverage = useMemo( - () => calculateAccountLeverage(account, [...whitelistedAssets, ...perpsAssets]), - [account, whitelistedAssets, perpsAssets], - ) + const leverage = useMemo(() => calculateAccountLeverage(account, assets), [account, assets]) const updatedLeverage = useMemo(() => { if (!updatedAccount) return null - const updatedLeverage = calculateAccountLeverage(updatedAccount, [ - ...whitelistedAssets, - ...perpsAssets, - ]) + const updatedLeverage = calculateAccountLeverage(updatedAccount, assets) if (updatedLeverage.eq(leverage)) return null return updatedLeverage - }, [updatedAccount, leverage, whitelistedAssets, perpsAssets]) + }, [updatedAccount, assets, leverage]) const data = useBorrowMarketAssetsTableData() const borrowAssetsData = useMemo(() => data?.allAssets || [], [data]) @@ -117,18 +110,20 @@ function AccountDetails(props: Props) { updatedAccount ?? account, borrowAssetsData, lendingAssetsData, - whitelistedAssets, + assets, vaultAprs, astroLpAprs, + perpsVault?.apy || 0, ), [ + updatedAccount, account, - whitelistedAssets, borrowAssetsData, lendingAssetsData, - updatedAccount, + assets, vaultAprs, astroLpAprs, + perpsVault?.apy, ], ) const isFullWidth = @@ -201,7 +196,7 @@ function AccountDetails(props: Props) { Leverage
@@ -212,7 +207,7 @@ function AccountDetails(props: Props) { diff --git a/src/components/account/AccountFund/AccountFundContent.tsx b/src/components/account/AccountFund/AccountFundContent.tsx index 9472c5eda..90c44c79a 100644 --- a/src/components/account/AccountFund/AccountFundContent.tsx +++ b/src/components/account/AccountFund/AccountFundContent.tsx @@ -10,7 +10,7 @@ import SwitchAutoLend from 'components/common/Switch/SwitchAutoLend' import Text from 'components/common/Text' import { BN_ZERO } from 'constants/math' import { useUpdatedAccount } from 'hooks/accounts/useUpdatedAccount' -import useBaseAsset from 'hooks/assets/useBasetAsset' +import useBaseAsset from 'hooks/assets/useBaseAsset' import useMarkets from 'hooks/markets/useMarkets' import useAutoLend from 'hooks/wallet/useAutoLend' import useWalletBalances from 'hooks/wallet/useWalletBalances' diff --git a/src/components/account/AccountList/AccountStats.tsx b/src/components/account/AccountList/AccountStats.tsx index 805ee9957..01a6d6558 100644 --- a/src/components/account/AccountList/AccountStats.tsx +++ b/src/components/account/AccountList/AccountStats.tsx @@ -11,6 +11,7 @@ import useAccount from 'hooks/accounts/useAccount' import useWhitelistedAssets from 'hooks/assets/useWhitelistedAssets' import useAstroLpAprs from 'hooks/astroLp/useAstroLpAprs' import useHealthComputer from 'hooks/health-computer/useHealthComputer' +import usePerpsVault from 'hooks/perps/usePerpsVault' import useVaultAprs from 'hooks/vaults/useVaultAprs' import useStore from 'store' import { calculateAccountApy, calculateAccountBalanceValue } from 'utils/accounts' @@ -27,6 +28,7 @@ export default function AccountStats(props: Props) { const assets = useWhitelistedAssets() const { data: account } = useAccount(accountId) const { data: vaultAprs } = useVaultAprs() + const { data: perpsVault } = usePerpsVault() const astroLpAprs = useAstroLpAprs() const positionBalance = useMemo( () => (!account ? null : calculateAccountBalanceValue(account, assets)), @@ -41,7 +43,7 @@ export default function AccountStats(props: Props) { () => [...lendingAvailableAssets, ...accountLentAssets], [lendingAvailableAssets, accountLentAssets], ) - const apr = useMemo( + const apy = useMemo( () => !account ? null @@ -52,8 +54,9 @@ export default function AccountStats(props: Props) { assets, vaultAprs, astroLpAprs, + perpsVault?.apy || 0, ), - [account, assets, borrowAssetsData, lendingAssetsData, vaultAprs, astroLpAprs], + [account, borrowAssetsData, lendingAssetsData, assets, vaultAprs, astroLpAprs, perpsVault?.apy], ) const deleteAccountHandler = useCallback(() => { @@ -67,7 +70,7 @@ export default function AccountStats(props: Props) { health={health ?? 0} healthFactor={healthFactor ?? 0} positionBalance={positionBalance} - apr={apr} + apy={apy} /> {isActive && setShowMenu && (
@@ -85,7 +88,8 @@ export default function AccountStats(props: Props) { focusComponent: { component: , onClose: () => { - useStore.setState({ getStartedModal: true }) + // TODO: update docs to reflect the current state of v2 + //useStore.setState({ getStartedModal: true }) }, }, }) diff --git a/src/components/account/AccountList/Skeleton.tsx b/src/components/account/AccountList/Skeleton.tsx index da9fe0861..9f897d5f9 100644 --- a/src/components/account/AccountList/Skeleton.tsx +++ b/src/components/account/AccountList/Skeleton.tsx @@ -12,11 +12,11 @@ interface Props { health: number healthFactor: number positionBalance: BigNumber | null - apr: BigNumber | null + apy: BigNumber | null } export default function Skeleton(props: Props) { - const { positionBalance, apr, health, healthFactor } = props + const { positionBalance, apy, health, healthFactor } = props return (
{positionBalance ? ( @@ -31,11 +31,17 @@ export default function Skeleton(props: Props) {
- {apr ? ( + {apy ? ( ) : ( diff --git a/src/components/account/AccountList/index.tsx b/src/components/account/AccountList/index.tsx index 2a82ff7d7..16dbfdcea 100644 --- a/src/components/account/AccountList/index.tsx +++ b/src/components/account/AccountList/index.tsx @@ -1,14 +1,15 @@ import classNames from 'classnames' import { useEffect } from 'react' -import { useLocation, useNavigate, useSearchParams } from 'react-router-dom' import { isMobile } from 'react-device-detect' +import { useLocation, useNavigate, useSearchParams } from 'react-router-dom' import AccountStats from 'components/account/AccountList/AccountStats' import Card from 'components/common/Card' import Radio from 'components/common/Radio' import Text from 'components/common/Text' -import useAccountIds from 'hooks/accounts/useAccountIds' import useAccountId from 'hooks/accounts/useAccountId' +import useAccountIds from 'hooks/accounts/useAccountIds' +import useChainConfig from 'hooks/chain/useChainConfig' import useStore from 'store' import { getPage, getRoute } from 'utils/route' @@ -26,6 +27,7 @@ export default function AccountList(props: Props) { const { setShowMenu } = props const navigate = useNavigate() const { pathname } = useLocation() + const chainConfig = useChainConfig() const currentAccountId = useAccountId() const address = useStore((s) => s.address) const { data: accountIds } = useAccountIds(address, true, true) @@ -57,7 +59,7 @@ export default function AccountList(props: Props) { if (isActive) return if (isMobile) setShowMenu(false) useStore.setState({ accountDeleteModal: null }) - navigate(getRoute(getPage(pathname), searchParams, address, accountId)) + navigate(getRoute(getPage(pathname, chainConfig), searchParams, address, accountId)) }} title={
, onClose: () => { - useStore.setState({ getStartedModal: true }) + // TODO: update docs to reflect the current state of v2 + //useStore.setState({ getStartedModal: true }) }, }, }) @@ -70,12 +73,13 @@ export default function AccountMenuContent(props: Props) { setShowMenu, setIsCreating, createAccount, + isAutoLendEnabled, navigate, pathname, + chainConfig, searchParams, address, enableAutoLendGlobal, - isAutoLendEnabled, enableAutoLendAccountId, ]) diff --git a/src/components/account/AccountPerpPositionTable/Columns/Asset.tsx b/src/components/account/AccountPerpPositionTable/Columns/Asset.tsx index 6fdc92073..4c93473f0 100644 --- a/src/components/account/AccountPerpPositionTable/Columns/Asset.tsx +++ b/src/components/account/AccountPerpPositionTable/Columns/Asset.tsx @@ -5,6 +5,7 @@ import DisplayCurrency from 'components/common/DisplayCurrency' import { FormattedNumber } from 'components/common/FormattedNumber' import Text from 'components/common/Text' import { Tooltip } from 'components/common/Tooltip' +import CloseLabel from 'components/perps/BalancesTable/Columns/CloseLabel' import TradeDirection from 'components/perps/BalancesTable/Columns/TradeDirection' import usePerpsEnabledAssets from 'hooks/assets/usePerpsEnabledAssets' import { demagnify } from 'utils/formatters' @@ -88,7 +89,11 @@ export default function Asset(props: Props) { {row.symbol} - + {row.amount.isZero() ? ( + + ) : ( + + )} ) diff --git a/src/components/account/AccountPerpPositionTable/index.tsx b/src/components/account/AccountPerpPositionTable/index.tsx index b36297ec5..15d8ec55b 100644 --- a/src/components/account/AccountPerpPositionTable/index.tsx +++ b/src/components/account/AccountPerpPositionTable/index.tsx @@ -32,6 +32,7 @@ export default function AccountPerpPositionTable(props: Props) { spacingClassName='p-2' hideCard={hideCard} type='perps' + isBalancesTable /> ) } diff --git a/src/components/account/AccountStrategiesTable/Columns/LiqPrice.tsx b/src/components/account/AccountStrategiesTable/Columns/LiqPrice.tsx deleted file mode 100644 index 0ca4f407e..000000000 --- a/src/components/account/AccountStrategiesTable/Columns/LiqPrice.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useEffect, useMemo, useState } from 'react' - -import DisplayCurrency from 'components/common/DisplayCurrency' -import { InfoCircle } from 'components/common/Icons' -import Text from 'components/common/Text' -import { Tooltip } from 'components/common/Tooltip' -import useLiquidationPrice from 'hooks/prices/useLiquidationPrice' -import { BNCoin } from 'types/classes/BNCoin' -import { LiquidationPriceKind } from 'utils/health_computer' -import { BN } from 'utils/helpers' - -export const LIQ_META = { - accessorKey: 'symbol', - header: 'Liquidation Price', - id: 'liqPrice', - meta: { className: 'w-40' }, -} - -interface Props { - amount: number - computeLiquidationPrice: (denom: string, kind: LiquidationPriceKind) => number | null - denom: string - type: PositionType - account: Account -} - -export default function LiqPrice(props: Props) { - const { denom, type, amount, account, computeLiquidationPrice } = props - const [lastLiquidationPrice, setLastLiquidationPrice] = useState(null) - const hasDebt = account.debts.length > 0 - - const liqPrice = useMemo(() => { - if (type === 'vault' || amount === 0) return 0 - return computeLiquidationPrice(denom, type === 'borrow' ? 'debt' : 'asset') - }, [amount, computeLiquidationPrice, denom, type]) - - const { liquidationPrice } = useLiquidationPrice(liqPrice) - - useEffect(() => { - if (lastLiquidationPrice !== liqPrice && liqPrice !== null) setLastLiquidationPrice(liqPrice) - }, [liqPrice, lastLiquidationPrice]) - - const tooltipText = useMemo(() => { - if (type === 'vault') - return 'Liquidation prices cannot be calculated for farm positions. But it a drop in price of the underlying assets can still cause a liquidation.' - if (!hasDebt) return 'Your position cannot be liquidated as you currently have no debt.' - return 'The position size is too small to liquidate the account, even if the price goes to $0.00.' - }, [type, hasDebt]) - - if (!lastLiquidationPrice || (liquidationPrice === 0 && lastLiquidationPrice === 0)) - return ( - - N/A - - - - - ) - - return ( - - ) -} diff --git a/src/components/account/AccountStrategiesTable/functions.ts b/src/components/account/AccountStrategiesTable/functions.ts index c6a17ec38..571115839 100644 --- a/src/components/account/AccountStrategiesTable/functions.ts +++ b/src/components/account/AccountStrategiesTable/functions.ts @@ -114,7 +114,9 @@ export function getPerpsVaultAccountStrategiesRow( coinsChange: { primary: BNCoin.fromDenomAndBigNumber( vault.denoms.primary, - vault.amounts.primary.minus(previousAmount), + vault.status === VaultStatus.UNLOCKING + ? BN_ZERO + : vault.amounts.primary.minus(previousAmount), ), }, } diff --git a/src/components/account/AccountStrategiesTable/index.tsx b/src/components/account/AccountStrategiesTable/index.tsx index 97702812d..9c222efc7 100644 --- a/src/components/account/AccountStrategiesTable/index.tsx +++ b/src/components/account/AccountStrategiesTable/index.tsx @@ -33,6 +33,7 @@ export default function AccountStrategiesTable(props: Props) { spacingClassName='p-2' hideCard={hideCard} type='strategies' + isBalancesTable /> ) } diff --git a/src/components/account/AccountSummary/AccountSummaryLeverage.tsx b/src/components/account/AccountSummary/AccountSummaryLeverage.tsx index 31da4892a..3e84c7ce3 100644 --- a/src/components/account/AccountSummary/AccountSummaryLeverage.tsx +++ b/src/components/account/AccountSummary/AccountSummaryLeverage.tsx @@ -13,7 +13,6 @@ interface Props { export default function AccountSummaryLeverage(props: Props) { const { leverage, updatedLeverage } = props - if (!updatedLeverage) { return ( s.updatedAccount) + const { data: perpsVault } = usePerpsVault() const data = useBorrowMarketAssetsTableData() const borrowAssetsData = useMemo(() => data?.allAssets || [], [data]) const { availableAssets: lendingAvailableAssets, accountLentAssets } = @@ -56,21 +60,58 @@ export default function AccountSummary(props: Props) { const { health: updatedHealth, healthFactor: updatedHealthFactor } = useHealthComputer( updatedAccount || account, ) - const leverage = useMemo( + const assetParams = useAssetParams() + const { leverage } = useMemo( () => - account ? calculateAccountLeverage(account, [...whitelistedAssets, ...perpsAssets]) : BN_ZERO, - [account, perpsAssets, whitelistedAssets], + getAccountSummaryStats( + updatedAccount ?? account, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data || [], + perpsVault?.apy || 0, + ), + [ + updatedAccount, + account, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data, + perpsVault?.apy, + ], ) + const updatedLeverage = useMemo(() => { if (!updatedAccount) return null - const updatedLeverage = calculateAccountLeverage(updatedAccount, [ - ...whitelistedAssets, - ...perpsAssets, - ]) + const { leverage: updatedLeverage } = getAccountSummaryStats( + updatedAccount, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data || [], + perpsVault?.apy || 0, + ) if (updatedLeverage.eq(leverage)) return null return updatedLeverage - }, [updatedAccount, whitelistedAssets, perpsAssets, leverage]) + }, [ + updatedAccount, + borrowAssetsData, + lendingAssetsData, + assets, + vaultAprs, + astroLpAprs, + assetParams.data, + perpsVault?.apy, + leverage, + ]) const handleToggle = useCallback( (index: number) => { @@ -92,16 +133,18 @@ export default function AccountSummary(props: Props) { [...whitelistedAssets, ...perpsAssets], vaultAprs, astroLpAprs, + perpsVault?.apy || 0, ), [ - account, updatedAccount, + account, borrowAssetsData, lendingAssetsData, whitelistedAssets, perpsAssets, vaultAprs, astroLpAprs, + perpsVault?.apy, ], ) @@ -178,8 +221,8 @@ export default function AccountSummary(props: Props) { void isUSD?: boolean onClosing?: () => void - isLimitOrder?: boolean - hasActivePosition?: boolean + showCloseButton?: boolean + isMaxSelected?: boolean + capMax?: boolean } export default function AssetAmountInput(props: Props) { @@ -40,9 +40,10 @@ export default function AssetAmountInput(props: Props) { onFocus, onBlur, isUSD, - isLimitOrder, - hasActivePosition, onClosing, + showCloseButton, + isMaxSelected, + capMax, } = props const handleMaxClick = useCallback(() => { @@ -65,6 +66,12 @@ export default function AssetAmountInput(props: Props) { setAmount(BN_ZERO) }, [disabled, setAmount]) + useEffect(() => { + if (isMaxSelected && max) { + setAmount(max) + } + }, [isMaxSelected, max, setAmount]) + return (
- {isLimitOrder && hasActivePosition && onClosing && ( + {showCloseButton && onClosing && (
[page.split('-')[0] === 'hls', page === 'v1'], [page]) useEffect(() => { diff --git a/src/components/common/Banner.tsx b/src/components/common/Banner.tsx index 3c9b303ee..98b4b94c3 100644 --- a/src/components/common/Banner.tsx +++ b/src/components/common/Banner.tsx @@ -16,7 +16,7 @@ export default function Banner(props: Props) { return (
-
- {asset && } -
+
+ {asset && } +
{title} {description} diff --git a/src/components/common/Callout.tsx b/src/components/common/Callout.tsx index ff88f7bc1..4624c91ef 100644 --- a/src/components/common/Callout.tsx +++ b/src/components/common/Callout.tsx @@ -8,6 +8,7 @@ import Text from 'components/common/Text' interface Props { children: string | React.ReactNode className?: string + iconClassName?: string type: CalloutType } @@ -33,7 +34,7 @@ export function Callout(props: Props) { props.className, )} > -
+
{props.children} diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx index cb6572ce9..73fefce49 100644 --- a/src/components/common/Footer.tsx +++ b/src/components/common/Footer.tsx @@ -1,9 +1,22 @@ import { TextLink } from 'components/common/TextLink' import { DocURL } from 'types/enums' +import useAssets from 'hooks/assets/useAssets' +import usePerpsVault from 'hooks/perps/usePerpsVault' +import useStore from 'store' import packageInfo from '../../../package.json' export default function Footer() { + // Set the global State to have assets and perpsBaseDenom in it + const { data: assets, isLoading: isLoadingAssets } = useAssets() + const { data: vault, isLoading: isLoadingVault } = usePerpsVault() + const storeAssets = useStore((s) => s.assets) + const perpsBaseDenom = useStore((s) => s.perpsBaseDenom) + + if (storeAssets.length === 0 && !isLoadingAssets) useStore.setState({ assets }) + if (!perpsBaseDenom && !isLoadingVault && vault) + useStore.setState({ perpsBaseDenom: vault.denom }) + const version = `v${packageInfo.version}` return (