feat: add pyth / switchboard icons to asset rows

mrgnlabs · Dec 1, 2023 · 3b705d5 · 3b705d5
1 parent ab6acad
commit 3b705d5
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 42 deletions.
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
@@ -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
@@ -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
@@ -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<string, { tokenSymbol: string; tokenLogoUri: string }>([
@@ -288,44 +288,58 @@ const AssetRow: FC<{
           align="right"
           style={{ fontWeight: 300 }}
         >
-          <MrgnTooltip
-            title={
-              <React.Fragment>
-                <Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
-                  Wide oracle price bands
-                </Typography>
-                {`${bank.meta.tokenSymbol} price estimates is
+          <div className="flex items-center justify-end gap-1.5">
+            <MrgnTooltip
+              title={
+                <React.Fragment>
+                  <Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
+                    Wide oracle price bands
+                  </Typography>
+                  {`${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.`}
-                <br />
-                <a href="https://docs.marginfi.com">
-                  <u>Learn more.</u>
-                </a>
-              </React.Fragment>
-            }
-            placement="right"
-            className={`${assetPriceOffset > assetPrice * 0.1 ? "cursor-pointer" : "hidden"}`}
-          >
-            <Badge
-              badgeContent={assetPriceOffset > 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.`}
+                  <br />
+                  <a href="https://docs.marginfi.com">
+                    <u>Learn more.</u>
+                  </a>
+                </React.Fragment>
+              }
+              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)}`}
-            </Badge>
-          </MrgnTooltip>
+              <Badge
+                badgeContent={assetPriceOffset > 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)}`}
+              </Badge>
+            </MrgnTooltip>
+            <MrgnTooltip
+              title={`Powered by ${SWITCHBOARD_BANKS.includes(bank.meta.tokenSymbol) ? "Switchboard" : "Pyth"}`}
+              placement="right"
+            >
+              <div>
+                {SWITCHBOARD_BANKS.includes(bank.meta.tokenSymbol) ? (
+                  <IconSwitchboard size={14} />
+                ) : (
+                  <IconPyth size={14} />
+                )}
+              </div>
+            </MrgnTooltip>
+          </div>
         </TableCell>
 
         <TableCell

diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx
@@ -204,9 +204,20 @@ const AssetsList = () => {
                               <Typography color="inherit" style={{ fontFamily: "Aeonik Pro" }}>
                                 Realtime prices
                               </Typography>
-                              <span style={{ fontFamily: "Aeonik Pro", fontWeight: 400 }}>
-                                Powered by Pyth and Switchboard.
-                              </span>
+                              <div className="space-y-1 mt-1">
+                                <p>
+                                  Powered by{" "}
+                                  <a href="https://pyth.network/" target="_blank" className="border-b border-border">
+                                    Pyth
+                                  </a>{" "}
+                                  and{" "}
+                                  <a href="https://switchboard.xyz/" target="_blank" className="border-b border-border">
+                                    Switchboard
+                                  </a>
+                                  .
+                                </p>
+                                <p>Oracle providers have differing implementations that may effect prices.</p>
+                              </div>
                             </React.Fragment>
                           }
                           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
@@ -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<{
         </div>
         <div className="flex flex-col">
           <div className="text-base">{bank.meta.tokenSymbol}</div>
-          <div className="text-[#A1A1A1]">{usdFormatter.format(bank.info.state.price)}</div>
+          <div className="text-[#A1A1A1] flex items-center gap-1.5">
+            {usdFormatter.format(bank.info.state.price)}
+            <MrgnTooltip
+              title={`Powered by ${SWITCHBOARD_BANKS.includes(bank.meta.tokenSymbol) ? "Switchboard" : "Pyth"}`}
+              placement="right"
+            >
+              <div>
+                {SWITCHBOARD_BANKS.includes(bank.meta.tokenSymbol) ? (
+                  <IconSwitchboard size={14} />
+                ) : (
+                  <IconPyth size={14} />
+                )}
+              </div>
+            </MrgnTooltip>
+          </div>
         </div>
       </div>
       <div className={`${isInLendingMode ? "text-[#75ba80]" : "text-[#e07d6f]"} text-base flex items-center gap-2`}>

diff --git 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) => (
   </svg>
 );
 
+const IconPyth = ({ size = 24, className }: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_8_14)">
+      <path
+        d="M14.4999 10.0002C14.4999 11.3256 13.3805 12.4003 11.9999 12.4003V14.8003C14.7611 14.8003 16.9999 12.651 16.9999 10.0002C16.9999 7.34948 14.7611 5.2002 11.9999 5.2002C11.0897 5.2002 10.2348 5.43358 9.49988 5.84281C8.00507 6.67212 6.99988 8.2233 6.99988 10.0002V22.0004L9.24772 24.1583L9.49988 24.4004V10.0002C9.49988 8.67486 10.6193 7.60023 11.9999 7.60023C13.3805 7.60023 14.4999 8.67486 14.4999 10.0002Z"
+        fill="#E6DAFE"
+      />
+      <path
+        d="M12 0C10.1784 0 8.47105 0.467847 7 1.28522C6.05811 1.80734 5.21461 2.47275 4.5 3.25106C2.94414 4.94333 2 7.16643 2 9.6001V16.8002L4.5 19.2002V9.6001C4.5 7.4682 5.46563 5.5523 7 4.23343C7.72139 3.61469 8.5683 3.12622 9.5 2.81144C10.2813 2.54439 11.1237 2.40003 12 2.40003C16.1418 2.40003 19.5 5.62395 19.5 9.6001C19.5 13.5763 16.1418 16.8002 12 16.8002V19.2002C17.5235 19.2002 22 14.9017 22 9.6001C22 4.29856 17.5235 0 12 0Z"
+        fill="#E6DAFE"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_8_14">
+        <rect width="20" height="24" fill="white" transform="translate(2)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const IconSwitchboard = ({ size = 24, className }: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_8_2)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.37646 9.41978C2.37646 5.61559 5.02977 3.07328 9.12039 3H23.9999C23.1124 4.94922 22.398 5.93753 21.8566 5.96491H8.98822C6.76043 5.97088 5.4193 7.26038 5.4193 9.41978C5.4193 11.5558 6.75623 12.9367 8.91309 12.9453L14.6116 12.9367C15.4392 12.9453 16.1485 13.6553 16.1485 14.5102C16.1485 15.365 15.5027 15.8595 14.6907 15.9005L9.0787 15.907C5.08057 15.907 2.43789 13.2778 2.37752 9.55013L2.37646 9.41978Z"
+        fill="#4C6FFF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.5558 14.4787C21.5558 18.2828 18.9025 20.8252 14.8119 20.8984H-0.0676524C0.819851 18.9492 1.53429 17.9609 2.07568 17.9335H14.944C17.1718 17.9276 18.5129 16.6381 18.5129 14.4787C18.5129 12.3427 17.176 10.9617 15.0192 10.9531L9.32069 10.9617C8.49304 10.9531 7.78374 10.2431 7.78374 9.38826C7.78374 8.5334 8.42952 8.03898 9.2416 7.9979L14.8535 7.99145C18.8517 7.99145 21.4944 10.6206 21.5547 14.3483L21.5558 14.4787Z"
+        fill="#4C6FFF"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_8_2">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
 const IconBrandGoogle = ({ size = 24, className }: IconProps) => (
   <svg
     width={size}
@@ -476,6 +534,8 @@ export {
   IconWalletConnectWallet,
   IconGlowWallet,
   IconTrustWallet,
+  IconPyth,
+  IconSwitchboard,
   IconLoader,
   IconPieChart,
   IconReceiveMoney,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const SWITCHBOARD_BANKS = ["JLP", "SHDW", "STEP", "GUAC", "BLZE", "OPOS", "LST", "UXD", "DUST", "KIN"];