add oracle links (#47)

* add pyth logo, oracle url * tokenlogo refactor * explorer urls * bw * add price id
solendprotocol · May 10, 2024 · ce96ea4 · ce96ea4
1 parent a13c46e
commit ce96ea4
Show file tree

Hide file tree

Showing 30 changed files with 270 additions and 151 deletions.
diff --git a/frontend/public/assets/pyth.png b/frontend/public/assets/pyth.png
diff --git a/frontend/public/assets/wormhole.png b/frontend/public/assets/wormhole.png
diff --git a/frontend/src/components/admin/CoinPopover.tsx b/frontend/src/components/admin/CoinPopover.tsx
@@ -4,7 +4,7 @@ import { ChevronsUpDown } from "lucide-react";
 
 import Button from "@/components/shared/Button";
 import Popover from "@/components/shared/Popover";
-import TokenIcon from "@/components/shared/TokenIcon";
+import TokenLogo from "@/components/shared/TokenLogo";
 import { TLabel, TLabelSans } from "@/components/shared/Typography";
 import { Command, CommandGroup, CommandItem } from "@/components/ui/command";
 import { ParsedCoinBalance } from "@/lib/coinBalance";
@@ -68,11 +68,11 @@ export default function CoinPopover({
               className="flex cursor-pointer flex-row items-center text-foreground aria-selected:text-foreground"
             >
               <div className="mr-2">
-                <TokenIcon
+                <TokenLogo
                   className="h-4 w-4"
                   coinType={cb.coinType}
                   symbol={cb.symbol}
-                  url={cb.iconUrl}
+                  src={cb.iconUrl}
                 />
               </div>
 

diff --git a/frontend/src/components/admin/ReserveConfigDialog.tsx b/frontend/src/components/admin/ReserveConfigDialog.tsx
@@ -171,8 +171,9 @@ export default function ReserveConfigDialog({
           <TBody>{reserve.symbol}</TBody>
           <Value
             value={reserve.id}
-            url={explorer.buildObjectUrl(reserve.id)}
             isId
+            url={explorer.buildObjectUrl(reserve.id)}
+            isExplorerUrl
           />
         </div>
       }

diff --git a/frontend/src/components/admin/ReservePropertiesDialog.tsx b/frontend/src/components/admin/ReservePropertiesDialog.tsx
@@ -38,8 +38,9 @@ export default function ReservePropertiesDialog({
           <TBody>{reserve.symbol}</TBody>
           <Value
             value={reserve.id}
-            url={explorer.buildObjectUrl(reserve.id)}
             isId
+            url={explorer.buildObjectUrl(reserve.id)}
+            isExplorerUrl
           />
         </div>
       }
@@ -50,14 +51,16 @@ export default function ReservePropertiesDialog({
         <LabelWithValue
           label="id"
           value={reserve.id}
-          url={explorer.buildObjectUrl(reserve.id)}
           isId
+          url={explorer.buildObjectUrl(reserve.id)}
+          isExplorerUrl
         />
         <LabelWithValue
           label="coinType"
           value={reserve.coinType}
-          url={explorer.buildCoinUrl(reserve.coinType)}
           isType
+          url={explorer.buildCoinUrl(reserve.coinType)}
+          isExplorerUrl
         />
         <LabelWithValue label="mintDecimals" value={reserve.mintDecimals} />
         <LabelWithValue

diff --git a/frontend/src/components/admin/ReserveRewardsDialog.tsx b/frontend/src/components/admin/ReserveRewardsDialog.tsx
@@ -156,8 +156,9 @@ export default function ReserveRewardsDialog({
           <TBody>{reserve.symbol}</TBody>
           <Value
             value={reserve.id}
-            url={explorer.buildObjectUrl(reserve.id)}
             isId
+            url={explorer.buildObjectUrl(reserve.id)}
+            isExplorerUrl
           />
         </div>
       }

diff --git a/frontend/src/components/dashboard/AccountAssetTable.tsx b/frontend/src/components/dashboard/AccountAssetTable.tsx
@@ -10,7 +10,7 @@ import DataTable, {
   decimalSortingFn,
   tableHeader,
 } from "@/components/dashboard/DataTable";
-import TokenIcon from "@/components/shared/TokenIcon";
+import TokenLogo from "@/components/shared/TokenLogo";
 import { TBody, TLabel } from "@/components/shared/Typography";
 import { formatPrice, formatToken, formatUsd } from "@/lib/format";
 import { reserveSort } from "@/lib/utils";
@@ -51,7 +51,7 @@ export default function AccountAssetTable({
 
           return (
             <div className="flex flex-row items-center gap-3">
-              <TokenIcon coinType={coinType} symbol={symbol} url={iconUrl} />
+              <TokenLogo coinType={coinType} symbol={symbol} src={iconUrl} />
 
               <div className="flex flex-col gap-1">
                 <TBody>{symbol}</TBody>

diff --git a/frontend/src/components/dashboard/AprWithRewardsBreakdown.tsx b/frontend/src/components/dashboard/AprWithRewardsBreakdown.tsx
@@ -5,7 +5,7 @@ import { ParsedReserve } from "@suilend/sdk/parsers/reserve";
 import { Side } from "@suilend/sdk/types";
 
 import RewardChip from "@/components/shared/RewardChip";
-import TokenIcon from "@/components/shared/TokenIcon";
+import TokenLogo from "@/components/shared/TokenLogo";
 import Tooltip from "@/components/shared/Tooltip";
 import {
   TBody,
@@ -125,11 +125,11 @@ function AprRewardRow({
       />
 
       <div className="flex flex-row items-center gap-1.5">
-        <TokenIcon
+        <TokenLogo
           className="h-4 w-4"
           coinType={reward.stats.rewardCoinType}
           symbol={reward.stats.rewardSymbol}
-          url={reward.stats.iconUrl}
+          src={reward.stats.iconUrl}
         />
         <TBody className="text-primary-foreground">
           {formatApr(
@@ -168,11 +168,11 @@ function DailyRewardRow({
 
       <div className="flex flex-col items-end gap-0.5">
         <div className="flex flex-row items-center gap-1.5">
-          <TokenIcon
+          <TokenLogo
             className="h-4 w-4"
             coinType={reward.stats.rewardCoinType}
             symbol={reward.stats.rewardSymbol}
-            url={reward.stats.iconUrl}
+            src={reward.stats.iconUrl}
           />
           <TBody className="text-primary-foreground">
             {(isSuilendPoints(reward.stats.rewardCoinType)
@@ -396,12 +396,12 @@ export default function AprWithRewardsBreakdown({
           {[...pointsDailyRewards, ...aprRewards, ...nonPointsDailyRewards].map(
             (reward, index) => {
               return (
-                <TokenIcon
+                <TokenLogo
                   key={index}
                   className="h-4 w-4"
                   coinType={reward.stats.rewardCoinType}
                   symbol={reward.stats.rewardSymbol}
-                  url={reward.stats.iconUrl}
+                  src={reward.stats.iconUrl}
                 />
               );
             },

diff --git a/frontend/src/components/dashboard/MarketCardList.tsx b/frontend/src/components/dashboard/MarketCardList.tsx
@@ -20,7 +20,7 @@ import { ReservesRowData } from "@/components/dashboard/MarketTable";
 import Button from "@/components/shared/Button";
 import LabelWithTooltip from "@/components/shared/LabelWithTooltip";
 import Select from "@/components/shared/Select";
-import TokenIcon from "@/components/shared/TokenIcon";
+import TokenLogo from "@/components/shared/TokenLogo";
 import { TBody, TLabel, TLabelSans } from "@/components/shared/Typography";
 import { SelectTrigger } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
@@ -42,10 +42,10 @@ function MarketCard({ rowData, onClick }: MarketCardProps) {
       <div className="flex w-full flex-col items-center gap-4 p-4">
         <div className="flex w-full flex-col items-center gap-2">
           <div className="flex flex-row items-center gap-2">
-            <TokenIcon
+            <TokenLogo
               coinType={rowData.coinType}
               symbol={rowData.symbol}
-              url={rowData.iconUrl}
+              src={rowData.iconUrl}
             />
             <TBody>{rowData.symbol}</TBody>
           </div>

diff --git a/frontend/src/components/dashboard/ProtocolRewardsCard.tsx b/frontend/src/components/dashboard/ProtocolRewardsCard.tsx
@@ -10,7 +10,7 @@ import PointsRank from "@/components/points/PointsRank";
 import Button from "@/components/shared/Button";
 import Spinner from "@/components/shared/Spinner";
 import TextLink from "@/components/shared/TextLink";
-import TokenIcon from "@/components/shared/TokenIcon";
+import TokenLogo from "@/components/shared/TokenLogo";
 import Tooltip from "@/components/shared/Tooltip";
 import {
   TBody,
@@ -42,11 +42,11 @@ function PendingRewards({ totalSuiRewards, isCentered }: PendingRewardsProps) {
     <div className={cn("flex flex-col gap-1", isCentered && "items-center")}>
       <TLabel className="uppercase">Pending rewards</TLabel>
       <div className="flex flex-row items-center gap-1.5">
-        <TokenIcon
+        <TokenLogo
           className="h-4 w-4"
           coinType={NORMALIZED_SUI_COINTYPE}
           symbol="SUI"
-          url={LOGO_MAP[NORMALIZED_SUI_COINTYPE]}
+          src={LOGO_MAP[NORMALIZED_SUI_COINTYPE]}
         />
         <Tooltip title={formatToken(totalSuiRewards, { dp: 9 })}>
           <TBody>{formatToken(totalSuiRewards)}</TBody>

diff --git a/frontend/src/components/dashboard/account-details/AccountDetailsDialog.tsx b/frontend/src/components/dashboard/account-details/AccountDetailsDialog.tsx
@@ -13,7 +13,7 @@ import Dialog from "@/components/dashboard/Dialog";
 import ObligationSwitcherPopover from "@/components/dashboard/ObligationSwitcherPopover";
 import Button from "@/components/shared/Button";
 import Tabs from "@/components/shared/Tabs";
-import TokenIcon from "@/components/shared/TokenIcon";
+import TokenLogo from "@/components/shared/TokenLogo";
 import Tooltip from "@/components/shared/Tooltip";
 import { TBody } from "@/components/shared/Typography";
 import { Separator } from "@/components/ui/separator";
@@ -55,24 +55,24 @@ interface TokenAmountProps {
   amount?: BigNumber;
   coinType: string;
   symbol: string;
-  iconUrl?: string | null;
+  src?: string | null;
   decimals: number;
 }
 
 export function TokenAmount({
   amount,
   coinType,
   symbol,
-  iconUrl,
+  src,
   decimals,
 }: TokenAmountProps) {
   return (
     <div className="flex w-max flex-row items-center gap-2">
-      <TokenIcon
+      <TokenLogo
         className="h-4 w-4"
         coinType={coinType}
         symbol={symbol}
-        url={iconUrl}
+        src={src}
       />
 
       <Tooltip

diff --git a/frontend/src/components/dashboard/account-details/EarningsTabContent.tsx b/frontend/src/components/dashboard/account-details/EarningsTabContent.tsx
@@ -11,7 +11,7 @@ import {
   getCtokenExchangeRate,
 } from "@/components/dashboard/account-details/AccountDetailsDialog";
 import DataTable, { tableHeader } from "@/components/dashboard/DataTable";
-import TokenIcon from "@/components/shared/TokenIcon";
+import TokenLogo from "@/components/shared/TokenLogo";
 import Tooltip from "@/components/shared/Tooltip";
 import { TBody, TLabelSans, TTitle } from "@/components/shared/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -322,11 +322,11 @@ export default function EarningsTabContent({
 
           return (
             <div className="flex w-max flex-row items-center gap-2">
-              <TokenIcon
+              <TokenLogo
                 className="h-4 w-4"
                 coinType={coinType}
                 symbol={coinMetadata.symbol}
-                url={coinMetadata.iconUrl}
+                src={coinMetadata.iconUrl}
               />
 
               <TBody className="w-max">{coinMetadata.symbol}</TBody>
@@ -373,7 +373,7 @@ export default function EarningsTabContent({
                       amount={earned}
                       coinType={coinType}
                       symbol={coinMetadata.symbol}
-                      iconUrl={coinMetadata.iconUrl}
+                      src={coinMetadata.iconUrl}
                       decimals={coinMetadata.decimals}
                     />
                   );

diff --git a/frontend/src/components/dashboard/account-details/HistoryTabContent.tsx b/frontend/src/components/dashboard/account-details/HistoryTabContent.tsx
@@ -129,7 +129,7 @@ export default function HistoryTabContent({
                 amount={amount}
                 coinType={depositEvent.coinType}
                 symbol={coinMetadata.symbol}
-                iconUrl={coinMetadata.iconUrl}
+                src={coinMetadata.iconUrl}
                 decimals={coinMetadata.decimals}
               />
             );
@@ -151,7 +151,7 @@ export default function HistoryTabContent({
                   amount={amount}
                   coinType={borrowEvent.coinType}
                   symbol={coinMetadata.symbol}
-                  iconUrl={coinMetadata.iconUrl}
+                  src={coinMetadata.iconUrl}
                   decimals={coinMetadata.decimals}
                 />
 
@@ -181,7 +181,7 @@ export default function HistoryTabContent({
                 amount={amount}
                 coinType={withdrawEvent.coinType}
                 symbol={coinMetadata.symbol}
-                iconUrl={coinMetadata.iconUrl}
+                src={coinMetadata.iconUrl}
                 decimals={coinMetadata.decimals}
               />
             );
@@ -198,7 +198,7 @@ export default function HistoryTabContent({
                 amount={amount}
                 coinType={repayEvent.coinType}
                 symbol={coinMetadata.symbol}
-                iconUrl={coinMetadata.iconUrl}
+                src={coinMetadata.iconUrl}
                 decimals={coinMetadata.decimals}
               />
             );
@@ -272,7 +272,7 @@ export default function HistoryTabContent({
                     amount={withdrawAmount}
                     coinType={withdrawReserve.coinType}
                     symbol={withdrawReserve.symbol}
-                    iconUrl={withdrawReserve.iconUrl}
+                    src={withdrawReserve.iconUrl}
                     decimals={withdrawReserve.mintDecimals}
                   />
                 </div>
@@ -282,7 +282,7 @@ export default function HistoryTabContent({
                     amount={repayAmount}
                     coinType={repayReserve.coinType}
                     symbol={repayReserve.symbol}
-                    iconUrl={repayReserve.iconUrl}
+                    src={repayReserve.iconUrl}
                     decimals={repayReserve.mintDecimals}
                   />
                 </div>
@@ -302,7 +302,7 @@ export default function HistoryTabContent({
                 amount={claimedAmount}
                 coinType={claimRewardEvent.coinType}
                 symbol={coinMetadata.symbol}
-                iconUrl={coinMetadata.iconUrl}
+                src={coinMetadata.iconUrl}
                 decimals={coinMetadata.decimals}
               />
             );

diff --git a/frontend/src/components/dashboard/account/AccountBreakdown.tsx b/frontend/src/components/dashboard/account/AccountBreakdown.tsx
@@ -160,7 +160,8 @@ export default function AccountBreakdown() {
               },
               { title: "×" },
               {
-                title: "Weight",
+                title: "BW",
+                titleTooltip: "Borrow weight",
                 data: sortedBorrows.map((b) =>
                   (b.reserve.config.borrowWeightBps / 10000).toString(),
                 ),