chore: update all references to token logos to use gcp bucket

mrgnlabs · Feb 26, 2024 · 200dc8a · 200dc8a
1 parent 2ef8890
commit 200dc8a
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 200 deletions.
diff --git a/apps/marginfi-v2-ui/next.config.js b/apps/marginfi-v2-ui/next.config.js
@@ -25,141 +25,26 @@ let config = withBundleAnalyzer({
       net: false,
       tls: false,
       child_process: false,
-      request: false
+      request: false,
     };
     return config;
   },
   images: {
-    remotePatterns: [{
-        protocol: "https",
-        hostname: "raw.githubusercontent.com",
-        port: "",
-        pathname: "/solana-labs/token-list/main/assets/mainnet/**",
-      },
-      {
-        protocol: "https",
-        hostname: "raw.githubusercontent.com",
-        port: "",
-        pathname: "/certusone/wormhole-token-list/main/assets/**",
-      },
-      {
-        protocol: "https",
-        hostname: "cryptologos.cc",
-        port: "",
-        pathname: "/logos/**",
-      },
-      {
-        protocol: "https",
-        hostname: "s2.coinmarketcap.com",
-        port: "",
-        pathname: "/static/img/coins/64x64/**",
-      },
-      {
-        protocol: "https",
-        hostname: "storage.googleapis.com",
-        port: "",
-        pathname: "/token-metadata/**",
-      },
+    remotePatterns: [
       {
         protocol: "https",
         hostname: "storage.googleapis.com",
-        port: "",
-        pathname: "/static-marginfi/**",
-      },
-      {
-        protocol: "https",
-        hostname: "lh3.googleusercontent.com",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "pbs.twimg.com",
-        port: "",
-        pathname: "/profile_images/**",
-      },
-      {
-        protocol: "https",
-        hostname: "arweave.net",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "shdw-drive.genesysgo.net",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "solblaze.org",
-        port: "",
-        pathname: "/assets/**",
-      },
-      {
-        protocol: "https",
-        hostname: "s.gravatar.com",
-        port: "",
-        pathname: "/avatar/**",
-      },
-      {
-        protocol: "https",
-        hostname: "pyth.network",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "metadata.jito.network",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "static.jup.ag",
-        port: "",
-        pathname: "/jlp/**",
-      },
-      {
-        protocol: "https",
-        hostname: "metadata.jito.network",
-        port: "",
-        pathname: "/token/**",
-      },
-      {
-        protocol: "https",
-        hostname: "static.jup.ag",
-        port: "",
-        pathname: "/jup/**",
-      },
-      {
-        protocol: "https",
-        hostname: "bafkreibk3covs5ltyqxa272uodhculbr6kea6betidfwy3ajsav2vjzyum.ipfs.nftstorage.link",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "static.jup.ag",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "hivemapper-marketing-public.s3.us-west-2.amazonaws.com",
-        port: "",
-        pathname: "/Hivemapper_HONEY_token.png",
+        pathname: "/mrgn-public/mrgn-token-icons/**",
       },
     ],
   },
 });
 
-const {
-  withSentryConfig
-} = require("@sentry/nextjs");
+const { withSentryConfig } = require("@sentry/nextjs");
 
 config = withSentryConfig(
-  config, {
+  config,
+  {
     // For all available options, see:
     // https://github.com/getsentry/sentry-webpack-plugin#options
 
@@ -168,7 +53,8 @@ config = withSentryConfig(
 
     org: "mrgn-labs",
     project: "marginfi-v2-ui",
-  }, {
+  },
+  {
     // For all available options, see:
     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
@@ -189,4 +75,4 @@ config = withSentryConfig(
   }
 );
 
-module.exports = withPWA(config);
+module.exports = withPWA(config);
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx
@@ -9,7 +9,7 @@ import { ExtendedBankInfo, Emissions } from "@mrgnlabs/marginfi-v2-ui-state";
 
 import { LendingModes } from "~/types";
 import { useMrgnlendStore, useUiStore } from "~/store";
-import { cn } from "~/utils";
+import { cn, getTokenImageURL } from "~/utils";
 import { useWalletContext } from "~/hooks/useWalletContext";
 
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
@@ -438,7 +438,13 @@ type SelectedBankItemProps = {
 const SelectedBankItem = ({ rate, bank, lendingMode }: SelectedBankItemProps) => {
   return (
     <>
-      <Image src={bank.meta.tokenLogoUri!} alt={bank.meta.tokenName} width={30} height={30} className="rounded-full" />
+      <Image
+        src={getTokenImageURL(bank.meta.tokenSymbol)}
+        alt={bank.meta.tokenName}
+        width={30}
+        height={30}
+        className="rounded-full"
+      />
       <div className="flex flex-col gap-1 mr-auto xs:mr-0">
         <p className="leading-none text-sm">{bank.meta.tokenSymbol}</p>
         <p
@@ -482,15 +488,13 @@ const ActionBoxItem = ({ rate, lendingMode, bank, nativeSolBalance, showBalanceO
   return (
     <>
       <div className="flex items-center gap-3">
-        {bank.meta.tokenLogoUri && (
-          <Image
-            src={bank.meta.tokenLogoUri}
-            alt={bank.meta.tokenName}
-            width={28}
-            height={28}
-            className="rounded-full"
-          />
-        )}
+        <Image
+          src={getTokenImageURL(bank.meta.tokenSymbol)}
+          alt={bank.meta.tokenName}
+          width={28}
+          height={28}
+          className="rounded-full"
+        />
         <div>
           <p className="inline-flex gap-1 justify">{bank.meta.tokenSymbol}</p>
           <p

diff --git a/apps/marginfi-v2-ui/src/components/common/ActionComplete/ActionComplete.tsx b/apps/marginfi-v2-ui/src/components/common/ActionComplete/ActionComplete.tsx
@@ -7,7 +7,7 @@ import Confetti from "react-confetti";
 import { useWindowSize } from "@uidotdev/usehooks";
 import { numeralFormatter, shortenAddress } from "@mrgnlabs/mrgn-common";
 
-import { cn } from "~/utils";
+import { cn, getTokenImageURL } from "~/utils";
 import { useUiStore } from "~/store";
 import { useAssetItemData } from "~/hooks/useAssetItemData";
 import { useIsMobile } from "~/hooks/useIsMobile";
@@ -63,7 +63,7 @@ export const ActionComplete = () => {
                 </h3>
                 <Image
                   className="rounded-full w-9 h-9"
-                  src={previousTxn?.bank.meta.tokenLogoUri || ""}
+                  src={getTokenImageURL(previousTxn?.bank.meta.tokenSymbol)}
                   alt={(previousTxn?.bank.meta.tokenSymbol || "Token") + "  logo"}
                   width={36}
                   height={36}

diff --git a/apps/marginfi-v2-ui/src/components/common/AssetList/LSTDialog.tsx b/apps/marginfi-v2-ui/src/components/common/AssetList/LSTDialog.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { useMrgnlendStore } from "~/store";
+import { getTokenImageURL } from "~/utils";
 
 import { Dialog, DialogContent } from "~/components/ui/dialog";
 import { Button } from "~/components/ui/button";
@@ -26,7 +27,7 @@ const LSTDialog = ({ variant, open, onClose }: LSTDialogProps) => {
     const bank = sortedBanks.find((bank) => bank.meta.tokenSymbol === variant);
     if (!bank) return null;
 
-    return bank.meta.tokenLogoUri;
+    return getTokenImageURL(bank.meta.tokenSymbol);
   }, [variant, sortedBanks]);
 
   return (

diff --git a/apps/marginfi-v2-ui/src/components/common/AssetList/NewAssetBanner.tsx b/apps/marginfi-v2-ui/src/components/common/AssetList/NewAssetBanner.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { LendingModes } from "~/types";
+import { getTokenImageURL } from "~/utils";
 
 import { ActionBoxDialog } from "../ActionBox";
 import { Button } from "~/components/ui/button";
@@ -33,7 +34,12 @@ export const NewAssetBanner = ({ bankInfo }: NewAssetBannerProps) => {
     <div className="bg-muted text-white/80 py-4 pl-5 pr-12 rounded-sm max-w-fit relative">
       <div className="flex gap-6 items-center">
         <div className="mr-auto flex items-start">
-          <Image src={bankInfo.meta.tokenLogoUri!} alt={bankInfo.meta.tokenSymbol} width={50} height={50} />
+          <Image
+            src={getTokenImageURL(bankInfo.meta.tokenSymbol)}
+            alt={bankInfo.meta.tokenSymbol}
+            width={50}
+            height={50}
+          />
         </div>
         <div className="space-y-2.5">
           <h2 className="font-medium">${bankInfo.meta.tokenSymbol} is now available on margnfi</h2>

diff --git a/apps/marginfi-v2-ui/src/components/common/Portfolio/PortfolioAssetCard.tsx b/apps/marginfi-v2-ui/src/components/common/Portfolio/PortfolioAssetCard.tsx
@@ -8,7 +8,7 @@ import { usdFormatter, numeralFormatter } from "@mrgnlabs/mrgn-common";
 import { ActiveBankInfo, ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
 
 import { LendingModes } from "~/types";
-import { cn } from "~/utils";
+import { cn, getTokenImageURL } from "~/utils";
 import { useUiStore } from "~/store";
 import { useAssetItemData } from "~/hooks/useAssetItemData";
 
@@ -56,15 +56,13 @@ export const PortfolioAssetCard = ({ bank, isInLendingMode }: PortfolioAssetCard
           <div className="flex justify-between items-center w-full gap-2">
             <div className="flex text-left gap-3">
               <div className="flex items-center">
-                {bank.meta.tokenLogoUri && (
-                  <Image
-                    src={bank.meta.tokenLogoUri}
-                    className="rounded-full"
-                    alt={bank.meta.tokenSymbol}
-                    height={40}
-                    width={40}
-                  />
-                )}
+                <Image
+                  src={getTokenImageURL(bank.meta.tokenSymbol)}
+                  className="rounded-full"
+                  alt={bank.meta.tokenSymbol}
+                  height={40}
+                  width={40}
+                />
               </div>
               <dl>
                 <dt className="font-medium text-lg">{bank.meta.tokenSymbol}</dt>

diff --git a/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingCard.tsx b/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingCard.tsx
@@ -36,7 +36,7 @@ import { useConnection } from "~/hooks/useConnection";
 import { capture } from "~/utils/analytics";
 import { SwapMode, useJupiter } from "@jup-ag/react-hook";
 import JSBI from "jsbi";
-import { StakeData, usePrevious } from "~/utils";
+import { StakeData, usePrevious, getTokenImageURL } from "~/utils";
 import { createJupiterApiClient } from "@jup-ag/api";
 import { SettingsModal } from "./SettingsModal";
 import { SettingsIcon } from "./SettingsIcon";
@@ -615,17 +615,11 @@ const DropDownButton: FC<DropDownButtonProps> = ({
 
   const [iconUrl, optionName] = useMemo(() => {
     if (depositOption.type === "native") {
-      return [
-        "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png",
-        "SOL",
-      ];
+      return [getTokenImageURL("SOL"), "SOL"];
     } else if (depositOption.type === "stake") {
-      return [
-        "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png",
-        "Stake",
-      ];
+      return [getTokenImageURL("SOL"), "Stake"];
     } else {
-      return [depositOption.tokenData.iconUrl, depositOption.tokenData.symbol];
+      return [getTokenImageURL(depositOption.tokenData.symbol), depositOption.tokenData.symbol];
     }
   }, [depositOption]);
 

diff --git a/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingModal.tsx b/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingModal.tsx
@@ -9,7 +9,7 @@ import { DepositOption } from "./StakingCard";
 import BN from "bn.js";
 import { PublicKey } from "@solana/web3.js";
 import InfoIcon from "@mui/icons-material/Info";
-import { StakeData } from "~/utils";
+import { StakeData, getTokenImageURL } from "~/utils";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
 
 interface StakingModalProps {
@@ -132,15 +132,7 @@ const TokenList: FC<{
         } hover:text-white hover:bg-gray-700 cursor-pointer`}
       >
         <div className="flex flex-row items-center gap-2">
-          <Image
-            src={
-              "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png"
-            }
-            alt="token logo"
-            height={35}
-            width={35}
-            className="rounded-full"
-          />
+          <Image src={getTokenImageURL("SOL")} alt="token logo" height={35} width={35} className="rounded-full" />
 
           <div className="flex flex-col justify-start">
             <Typography className="text-[15px]">{"SOL (native)"}</Typography>
@@ -184,7 +176,13 @@ const TokenList: FC<{
               }`}
             >
               <div className="flex flex-row items-center gap-2">
-                <Image src={token.iconUrl} alt="token logo" height={35} width={35} className="rounded-full" />
+                <Image
+                  src={getTokenImageURL(token.symbol)}
+                  alt="token logo"
+                  height={35}
+                  width={35}
+                  className="rounded-full"
+                />
                 <div className="flex flex-col justify-start">
                   <Typography className="text-[15px]">
                     {token.address === SOL_MINT.toBase58() ? "SOL (wrapped)" : token.symbol}

diff --git a/apps/marginfi-v2-ui/src/components/common/Wallet/Wallet.tsx b/apps/marginfi-v2-ui/src/components/common/Wallet/Wallet.tsx
@@ -6,6 +6,7 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import { shortenAddress, usdFormatter, numeralFormatter, groupedNumberFormatterDyn } from "@mrgnlabs/mrgn-common";
 
 import { useMrgnlendStore, useUiStore, useUserProfileStore } from "~/store";
+import { getTokenImageURL } from "~/utils";
 import { useConnection } from "~/hooks/useConnection";
 import { useWalletContext } from "~/hooks/useWalletContext";
 import { useIsMobile } from "~/hooks/useIsMobile";
@@ -86,7 +87,7 @@ export const Wallet = () => {
 
         return {
           name: isSolBank ? "Solana" : bank.meta.tokenName,
-          image: bank.meta.tokenLogoUri,
+          image: getTokenImageURL(bank.meta.tokenSymbol),
           symbol: bank.meta.tokenSymbol,
           value: value,
           valueUSD: valueUSD,