add pyth logos

2024-01-23 15:22:03 +11:00 · 2024-01-23 15:22:03 +11:00 · 11b57d8548
parent b8517b7903
commit 11b57d8548
9 changed files with 74 additions and 173 deletions
--- a/components/icons/PythIcon.tsx
+++ b/components/icons/PythIcon.tsx
@ -0,0 +1,21 @@
+const PythIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 76 95"
+      fill="none"
+    >
+      <path
+        d="M19.4677 5.5338C24.9839 2.3324 31.3861 0.5 38.2167 0.5C58.9288 0.5 75.7147 17.336 75.7147 38.1004C75.7147 58.8648 58.9288 75.7006 38.2167 75.7006V66.3006C53.7476 66.3006 66.3402 53.6737 66.3402 38.1004C66.3402 22.5271 53.7476 9.90013 38.2167 9.90013C34.9308 9.90013 31.772 10.4655 28.8422 11.5115C25.3485 12.7444 22.1728 14.6575 19.4677 17.0809C13.7142 22.2465 10.0932 29.7505 10.0932 38.1004V75.7006L0.71875 66.3006V38.1004C0.71875 28.5685 4.25909 19.8614 10.0932 13.2333C12.7729 10.1849 15.9358 7.57876 19.4677 5.5338Z"
+        fill="#E6DAFE"
+      />
+      <path
+        d="M38.216 47.4995C43.393 47.4995 47.5905 43.2905 47.5905 38.0994C47.5905 32.9082 43.393 28.6993 38.216 28.6993C33.0391 28.6993 28.8415 32.9082 28.8415 38.0994V94.5L19.467 85.1V38.0994C19.467 31.1397 23.2363 25.0642 28.8415 21.8161C31.5974 20.2133 34.8029 19.2992 38.216 19.2992C48.5699 19.2992 56.965 27.7172 56.965 38.0994C56.965 48.4816 48.5699 56.8995 38.216 56.8995V47.4995Z"
+        fill="#E6DAFE"
+      />
+    </svg>
+  )
+}
+
+export default PythIcon
--- a/components/modals/PerpMarketDetailsModal.tsx
+++ b/components/modals/PerpMarketDetailsModal.tsx
@ -3,13 +3,10 @@ import Modal from '../shared/Modal'
 import { useTranslation } from 'next-i18next'
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import Button from '@components/shared/Button'
-import useOracleProvider from 'hooks/useOracleProvider'
-import {
-  ArrowTopRightOnSquareIcon,
-  ExclamationTriangleIcon,
-} from '@heroicons/react/20/solid'
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import { useRouter } from 'next/router'
+import OracleProvider from '@components/shared/OracleProvider'

 interface PerpMarketDetailsModalProps {
  market: PerpMarket | undefined
@ -23,7 +20,6 @@ const PerpMarketDetailsModal = ({
  market,
 }: ModalCombinedProps) => {
  const { t } = useTranslation(['common', 'trade'])
-  const { oracleProvider, oracleLinkPath } = useOracleProvider()
  const router = useRouter()

  const goToPerpDetails = (marketName: string) => {
@ -86,19 +82,7 @@ const PerpMarketDetailsModal = ({
        </div>
        <div className="flex justify-between">
          <p>{t('trade:oracle')}</p>
-          {oracleLinkPath ? (
-            <a
-              className="flex items-center"
-              href={oracleLinkPath}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="mr-1.5">{oracleProvider}</span>
-              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-            </a>
-          ) : (
-            <p className="text-th-fgd-2">{oracleProvider}</p>
-          )}
+          <OracleProvider />
        </div>
        <div className="flex justify-between">
          <Tooltip
--- a/components/modals/SpotMarketDetailsModal.tsx
+++ b/components/modals/SpotMarketDetailsModal.tsx
@ -4,14 +4,11 @@ import { useTranslation } from 'next-i18next'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import Button from '@components/shared/Button'
-import useOracleProvider from 'hooks/useOracleProvider'
-import {
-  ArrowTopRightOnSquareIcon,
-  ExclamationTriangleIcon,
-} from '@heroicons/react/20/solid'
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useMemo } from 'react'
 import Tooltip from '@components/shared/Tooltip'
+import OracleProvider from '@components/shared/OracleProvider'

 interface SpotMarketDetailsModalProps {
  market: Serum3Market | undefined
@ -26,7 +23,6 @@ const SpotMarketDetailsModal = ({
 }: ModalCombinedProps) => {
  const { t } = useTranslation(['common', 'trade'])
  const { serumOrPerpMarket } = useSelectedMarket()
-  const { oracleProvider, oracleLinkPath } = useOracleProvider()
  const { group } = useMangoGroup()

  const [baseBank, quoteBank] = useMemo(() => {
@ -77,19 +73,7 @@ const SpotMarketDetailsModal = ({
        </div>
        <div className="flex justify-between">
          <p>{t('trade:oracle')}</p>
-          {oracleLinkPath ? (
-            <a
-              className="flex items-center"
-              href={oracleLinkPath}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="mr-1.5">{oracleProvider}</span>
-              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-            </a>
-          ) : (
-            <p className="text-th-fgd-2">{oracleProvider}</p>
-          )}
+          <OracleProvider />
        </div>
        {baseMintInfo ? (
          <div className="flex justify-between">
--- a/components/shared/OracleProvider.tsx
+++ b/components/shared/OracleProvider.tsx
@ -0,0 +1,25 @@
+import PythIcon from '@components/icons/PythIcon'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+import useOracleProvider from 'hooks/useOracleProvider'
+
+const OracleProvider = () => {
+  const { oracleProvider, oracleLinkPath } = useOracleProvider()
+  return oracleLinkPath ? (
+    <a
+      className="flex items-center"
+      href={oracleLinkPath}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {oracleProvider === 'Pyth' ? (
+        <PythIcon className="mr-1.5 h-4 w-4" />
+      ) : null}
+      <span className="mr-1.5">{oracleProvider}</span>
+      <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+    </a>
+  ) : (
+    <p className="text-th-fgd-2">{oracleProvider}</p>
+  )
+}
+
+export default OracleProvider
--- a/components/stats/perps/PerpMarketDetailsTable.tsx
+++ b/components/stats/perps/PerpMarketDetailsTable.tsx
@ -3,19 +3,15 @@ import mangoStore from '@store/mangoStore'
 import ContentBox from '@components/shared/ContentBox'
 import MarketLogos from '@components/trade/MarketLogos'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
-import {
-  ArrowTopRightOnSquareIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-} from '@heroicons/react/20/solid'
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import { Disclosure, Transition } from '@headlessui/react'
-import { getOracleProvider } from 'hooks/useOracleProvider'
 import { NextRouter, useRouter } from 'next/router'
 import { LinkButton } from '@components/shared/Button'
 import SoonBadge from '@components/shared/SoonBadge'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
+import OracleProvider from '@components/shared/OracleProvider'

 export const goToPerpMarketDetails = (
  market: string | undefined,
@ -89,7 +85,6 @@ const PerpMarketDetailsTable = () => {
                publicKey,
              } = market

-              const [oracleProvider, oracleLinkPath] = getOracleProvider(market)
              const isComingSoon = market.oracleLastUpdatedSlot == 0

              return (
@ -144,21 +139,9 @@ const PerpMarketDetailsTable = () => {
                    </p>
                  </Td>
                  <Td>
-                    {oracleLinkPath ? (
-                      <a
-                        className="flex items-center justify-end"
-                        href={oracleLinkPath}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <span className="mr-1.5 font-body">
-                          {oracleProvider}
-                        </span>
-                        <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                      </a>
-                    ) : (
-                      <p className="text-right font-body">{oracleProvider}</p>
-                    )}
+                    <div className="flex justify-end">
+                      <OracleProvider />
+                    </div>
                  </Td>
                  <Td>
                    <div className="flex justify-end">
@ -186,7 +169,6 @@ const PerpMarketDetailsTable = () => {
              maxFunding,
              publicKey,
            } = market
-            const [oracleProvider, oracleLinkPath] = getOracleProvider(market)
            const isComingSoon = market.oracleLastUpdatedSlot == 0
            return (
              <Disclosure key={publicKey.toString()}>
@ -218,7 +200,7 @@ const PerpMarketDetailsTable = () => {
                      enterTo="opacity-100"
                    >
                      <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 py-4">
                          <div className="col-span-1">
                            <p className="text-xs text-th-fgd-3">
                              {t('trade:min-order-size')}
@ -287,23 +269,7 @@ const PerpMarketDetailsTable = () => {
                          </div>
                          <div className="col-span-1">
                            <p className="text-xs">{t('trade:oracle')}</p>
-                            {oracleLinkPath ? (
-                              <a
-                                className="flex items-center"
-                                href={oracleLinkPath}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                <span className="mr-1.5 font-body">
-                                  {oracleProvider}
-                                </span>
-                                <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                              </a>
-                            ) : (
-                              <p className="text-right font-body">
-                                {oracleProvider}
-                              </p>
-                            )}
+                            <OracleProvider />
                          </div>
                          <div className="col-span-1">
                            <Tooltip
--- a/components/stats/perps/PerpMarketParams.tsx
+++ b/components/stats/perps/PerpMarketParams.tsx
@ -1,18 +1,11 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
+import OracleProvider from '@components/shared/OracleProvider'
 import Tooltip from '@components/shared/Tooltip'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
-import { getOracleProvider } from 'hooks/useOracleProvider'
 import { useTranslation } from 'next-i18next'
-import { useMemo } from 'react'

 const PerpMarketParams = ({ market }: { market: PerpMarket }) => {
  const { t } = useTranslation(['common', 'stats', 'token', 'trade'])

-  const [oracleProvider, oracleLinkPath] = useMemo(() => {
-    if (!market) return ['Unavaliable', '']
-    return getOracleProvider(market)
-  }, [market])
-
  const {
    name,
    minOrderSize,
@ -158,15 +151,7 @@ const PerpMarketParams = ({ market }: { market: PerpMarket }) => {
        </div>
        <div className="flex justify-between border-t border-th-bkg-3 py-4">
          <p>{t('token:oracle')}</p>
-          <a
-            className="flex items-center"
-            href={oracleLinkPath}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <span className="mr-1.5">{oracleProvider}</span>
-            <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-          </a>
+          {market ? <OracleProvider /> : <p>Unavailable</p>}
        </div>
        <div className="flex justify-between border-t border-th-bkg-3 py-4">
          <Tooltip content={t('token:tooltip-oracle-confidence')}>
--- a/components/stats/tokens/TokenDetailsTable.tsx
+++ b/components/stats/tokens/TokenDetailsTable.tsx
@ -1,9 +1,5 @@
 import { Disclosure, Transition } from '@headlessui/react'
-import {
-  ArrowTopRightOnSquareIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-} from '@heroicons/react/20/solid'
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
 import { useViewport } from '../../../hooks/useViewport'
 import { breakpoints } from '../../../utils/theme'
@ -28,6 +24,7 @@ import { useCallback } from 'react'
 import { useSortableData } from 'hooks/useSortableData'
 import TableTokenName from '@components/shared/TableTokenName'
 import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
+import OracleProvider from '@components/shared/OracleProvider'

 const TokenDetailsTable = () => {
  const { t } = useTranslation(['common', 'activity', 'token', 'trade'])
@ -178,8 +175,6 @@ const TokenDetailsTable = () => {
                  isInsured,
                  liquidationFee,
                  loanOriginationFee,
-                  oracleLinkPath,
-                  oracleProvider,
                  symbol,
                } = data

@ -211,21 +206,9 @@ const TokenDetailsTable = () => {
                      <p className="text-right">{isInsured}</p>
                    </Td>
                    <Td>
-                      {oracleLinkPath ? (
-                        <a
-                          className="flex items-center justify-end"
-                          href={oracleLinkPath}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          <span className="mr-1.5 font-body">
-                            {oracleProvider}
-                          </span>
-                          <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                        </a>
-                      ) : (
-                        <p className="text-right font-body">{oracleProvider}</p>
-                      )}
+                      <div className="flex justify-end">
+                        <OracleProvider />
+                      </div>
                    </Td>
                    <Td>
                      <div className="flex justify-end">
@ -242,7 +225,6 @@ const TokenDetailsTable = () => {
        <div className="border-b border-th-bkg-3">
          {banks.map((b, i) => {
            const bank = b.bank
-            const [oracleProvider, oracleLinkPath] = getOracleProvider(bank)
            const mintInfo = group.mintInfosMapByMint.get(bank.mint.toString())
            return (
              <Disclosure key={bank.name}>
@ -268,7 +250,7 @@ const TokenDetailsTable = () => {
                      enterTo="opacity-100"
                    >
                      <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 py-4">
                          <div className="col-span-1">
                            <Tooltip
                              content={t('asset-liability-weight-desc')}
@ -325,23 +307,7 @@ const TokenDetailsTable = () => {
                          </div>
                          <div className="col-span-1">
                            <p className="text-xs">{t('trade:oracle')}</p>
-                            {oracleLinkPath ? (
-                              <a
-                                className="flex items-center"
-                                href={oracleLinkPath}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                <span className="mr-1.5 font-body">
-                                  {oracleProvider}
-                                </span>
-                                <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                              </a>
-                            ) : (
-                              <p className="text-right font-body">
-                                {oracleProvider}
-                              </p>
-                            )}
+                            <OracleProvider />
                          </div>
                          <div className="col-span-1">
                            <Tooltip
--- a/components/token/TokenParams.tsx
+++ b/components/token/TokenParams.tsx
@ -5,23 +5,17 @@ import {
  toUiDecimalsForQuote,
 } from '@blockworks-foundation/mango-v4'
 import Tooltip from '@components/shared/Tooltip'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import { BN } from '@coral-xyz/anchor'
 import mangoStore from '@store/mangoStore'
-import { getOracleProvider } from 'hooks/useOracleProvider'
 import { useTranslation } from 'next-i18next'
 import { useMemo } from 'react'
 import { formatCurrencyValue } from 'utils/numbers'
 import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
+import OracleProvider from '@components/shared/OracleProvider'

 const TokenParams = ({ bank }: { bank: Bank }) => {
  const { t } = useTranslation(['common', 'activity', 'token'])

-  const [oracleProvider, oracleLinkPath] = useMemo(() => {
-    if (!bank) return ['Unavaliable', '']
-    return getOracleProvider(bank)
-  }, [bank])
-
  const mintInfo = useMemo(() => {
    const group = mangoStore.getState().group
    if (!bank || !group) return
@ -172,19 +166,7 @@ const TokenParams = ({ bank }: { bank: Bank }) => {
        </div>
        <div className="flex justify-between border-t border-th-bkg-3 py-4">
          <p>{t('token:oracle')}</p>
-          {oracleLinkPath ? (
-            <a
-              className="flex items-center"
-              href={oracleLinkPath}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="mr-1.5">{oracleProvider}</span>
-              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-            </a>
-          ) : (
-            <p className="text-th-fgd-2">{oracleProvider}</p>
-          )}
+          {bank ? <OracleProvider /> : <p>Unavailable</p>}
        </div>
        <div className="flex justify-between border-t border-th-bkg-3 py-4">
          <Tooltip content={t('token:tooltip-oracle-confidence')}>
--- a/components/trade/OraclePrice.tsx
+++ b/components/trade/OraclePrice.tsx
@ -15,8 +15,8 @@ import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import useOracleProvider from 'hooks/useOracleProvider'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import { CURRENCY_SYMBOLS } from './MarketSelectDropdown'
+import OracleProvider from '@components/shared/OracleProvider'

 const OraclePrice = () => {
  const {
@ -33,7 +33,7 @@ const OraclePrice = () => {
  const [oracleLastUpdatedSlot, setOracleLastUpdatedSlot] = useState(0)
  const [highestSlot, setHighestSlot] = useState(0)
  const [isStale, setIsStale] = useState(false)
-  const { oracleProvider, oracleLinkPath } = useOracleProvider()
+  const { oracleProvider } = useOracleProvider()

  const { t } = useTranslation(['common', 'trade'])

@ -126,21 +126,9 @@ const OraclePrice = () => {
          content={
            !isStub ? (
              <>
-                <div className="flex">
+                <div className="flex text-sm">
                  <span className="mr-1">{t('trade:price-provided-by')}</span>
-                  {oracleLinkPath ? (
-                    <a
-                      href={oracleLinkPath}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center"
-                    >
-                      <span className="mr-1">{oracleProvider}</span>
-                      <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                    </a>
-                  ) : (
-                    <span className="text-th-fgd-2">{oracleProvider}</span>
-                  )}
+                  <OracleProvider />
                </div>
                <div className="mt-2">
                  {t('trade:last-updated')}{' '}