diff --git a/apps/marginfi-v2-ui/src/components/common/AssetList/AssetList.utils.ts b/apps/marginfi-v2-ui/src/components/common/AssetList/AssetList.utils.ts new file mode 100644 index 0000000000..c4da715b07 --- /dev/null +++ b/apps/marginfi-v2-ui/src/components/common/AssetList/AssetList.utils.ts @@ -0,0 +1 @@ +export const SWITCHBOARD_BANKS = ["JLP", "SHDW", "STEP", "GUAC", "BLZE", "OPOS", "LST", "UXD", "DUST", "KIN"]; diff --git a/apps/marginfi-v2-ui/src/components/common/AssetList/index.ts b/apps/marginfi-v2-ui/src/components/common/AssetList/index.ts index 62364d013c..c7537f16a9 100644 --- a/apps/marginfi-v2-ui/src/components/common/AssetList/index.ts +++ b/apps/marginfi-v2-ui/src/components/common/AssetList/index.ts @@ -4,3 +4,4 @@ export * from "./LSTDialog"; export * from "./NewAsssetBanner"; export * from "./AssetListFilters"; export * from "./AssetListFilters.utils"; +export * from "./AssetList.utils"; diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx index 81385dfb0e..b3b6cd7691 100644 --- a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx +++ b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx @@ -14,12 +14,12 @@ import { } from "@mrgnlabs/marginfi-v2-ui-state"; import { MarginfiAccountWrapper, PriceBias } from "@mrgnlabs/marginfi-client-v2"; import { MrgnTooltip } from "~/components/common/MrgnTooltip"; -import { AssetRowInputBox, AssetRowAction, LSTDialogVariants } from "~/components/common/AssetList"; +import { AssetRowInputBox, AssetRowAction, LSTDialogVariants, SWITCHBOARD_BANKS } from "~/components/common/AssetList"; import { useAssetItemData } from "~/hooks/useAssetItemData"; import { useWalletContext } from "~/hooks/useWalletContext"; import { useIsMobile } from "~/hooks/useIsMobile"; import { closeBalance, executeLendingAction, MarginfiActionParams, cn } from "~/utils"; -import { IconAlertTriangle } from "~/components/ui/icons"; +import { IconAlertTriangle, IconPyth, IconSwitchboard } from "~/components/ui/icons"; import { LendingModes } from "~/types"; export const EMISSION_MINT_INFO_MAP = new Map([ @@ -288,44 +288,58 @@ const AssetRow: FC<{ align="right" style={{ fontWeight: 300 }} > - - - Wide oracle price bands - - {`${bank.meta.tokenSymbol} price estimates is +
+ + + Wide oracle price bands + + {`${bank.meta.tokenSymbol} price estimates is ${usdFormatter.format(bank.info.state.price)} ± ${assetPriceOffset.toFixed( - 2 - )}, which is wide. Proceed with caution. marginfi prices assets at the bottom of confidence bands and liabilities at the top.`} -
- - Learn more. - - - } - placement="right" - className={`${assetPriceOffset > assetPrice * 0.1 ? "cursor-pointer" : "hidden"}`} - > - assetPrice * 0.1 ? "⚠️" : ""} - className="bg-transparent" - sx={{ - "& .MuiBadge-badge": { - fontSize: 20, - }, - }} - invisible={assetPriceOffset > assetPrice * 0.1 ? false : true} + 2 + )}, which is wide. Proceed with caution. marginfi prices assets at the bottom of confidence bands and liabilities at the top.`} +
+ + Learn more. + + + } + placement="right" + className={`${assetPriceOffset > assetPrice * 0.1 ? "cursor-pointer" : "hidden"}`} > - {assetPrice >= 0.01 - ? lendZoomLevel < 2 - ? `${ - assetPrice > 9999 ? numeralFormatter(assetPrice) : usdFormatter.format(assetPrice) - } ± ${assetPriceOffset.toFixed(2)}` - : usdFormatter.format(assetPrice) - : `$${assetPrice.toExponential(2)}`} - - + assetPrice * 0.1 ? "⚠️" : ""} + className="bg-transparent flex items-center justify-end gap-1.5" + sx={{ + "& .MuiBadge-badge": { + fontSize: 20, + }, + }} + invisible={assetPriceOffset > assetPrice * 0.1 ? false : true} + > + {assetPrice >= 0.01 + ? lendZoomLevel < 2 + ? `${ + assetPrice > 9999 ? numeralFormatter(assetPrice) : usdFormatter.format(assetPrice) + } ± ${assetPriceOffset.toFixed(2)}` + : usdFormatter.format(assetPrice) + : `$${assetPrice.toExponential(2)}`} + + + +
+ {SWITCHBOARD_BANKS.includes(bank.meta.tokenSymbol) ? ( + + ) : ( + + )} +
+ +
{ Realtime prices - - Powered by Pyth and Switchboard. - +
+

+ Powered by{" "} + + Pyth + {" "} + and{" "} + + Switchboard + + . +

+

Oracle providers have differing implementations that may effect prices.

+
} placement="top" diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx index f339ba52cc..b42357891d 100644 --- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx +++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardHeader.tsx @@ -7,6 +7,9 @@ import { percentFormatter, usdFormatter } from "@mrgnlabs/mrgn-common"; import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state"; import { MrgnTooltip } from "~/components/common/MrgnTooltip"; +import { SWITCHBOARD_BANKS } from "~/components/common/AssetList"; + +import { IconPyth, IconSwitchboard } from "~/components/ui/icons"; export const AssetCardHeader: FC<{ bank: ExtendedBankInfo; @@ -29,7 +32,21 @@ export const AssetCardHeader: FC<{
{bank.meta.tokenSymbol}
-
{usdFormatter.format(bank.info.state.price)}
+
+ {usdFormatter.format(bank.info.state.price)} + +
+ {SWITCHBOARD_BANKS.includes(bank.meta.tokenSymbol) ? ( + + ) : ( + + )} +
+ +
diff --git a/apps/marginfi-v2-ui/src/components/ui/icons.tsx b/apps/marginfi-v2-ui/src/components/ui/icons.tsx index f14404c26b..7a5eeaac09 100644 --- a/apps/marginfi-v2-ui/src/components/ui/icons.tsx +++ b/apps/marginfi-v2-ui/src/components/ui/icons.tsx @@ -114,6 +114,64 @@ const IconCoinbaseWallet = ({ size = 24, className }: IconProps) => ( ); +const IconPyth = ({ size = 24, className }: IconProps) => ( + + + + + + + + + + + +); + +const IconSwitchboard = ({ size = 24, className }: IconProps) => ( + + + + + + + + + + + +); + const IconBrandGoogle = ({ size = 24, className }: IconProps) => (