Fix TokenImage component

balancer · Aug 6, 2024 · 54344c0 · 54344c0
1 parent 70e352e
commit 54344c0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/packages/nextjs/components/common/TokenImage.tsx b/packages/nextjs/components/common/TokenImage.tsx
@@ -3,12 +3,14 @@ import { type Token } from "~~/hooks/token";
 export const TokenImage = ({ token }: { token: Token }) => {
   if (!token.logoURI || token.logoURI === "") {
     return (
-      <div className="flex flex-col items-center justify-center w-6 h-6 rounded-full bg-white text-neutral-400">?</div>
+      <div className="flex flex-col items-center justify-center w-7 h-7 rounded-full bg-base-100 text-neutral-400">
+        ?
+      </div>
     );
   } else {
-    {
-      /* eslint-disable-next-line @next/next/no-img-element */
-    }
-    return <img src={token.logoURI} alt={token.symbol} className="w-6 h-6 rounded-full" />;
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img src={token.logoURI} alt={token.symbol} className="w-7 h-7 rounded-full" />
+    );
   }
 };
diff --git a/packages/nextjs/components/common/TokenSelectModal.tsx b/packages/nextjs/components/common/TokenSelectModal.tsx
@@ -1,6 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
 import VirtualList from "react-tiny-virtual-list";
 import { XMarkIcon } from "@heroicons/react/24/outline";
+import { TokenImage } from "~~/components/common/";
 import { type Token } from "~~/hooks/token";
 
 type ModalProps = {
@@ -55,13 +56,7 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
                     className="flex w-full rounded-lg hover:bg-base-200 p-2 h-[64px] px-4"
                   >
                     <div className="flex w-full gap-5 items-center">
-                      {token.logoURI === "" ? (
-                        <div className="flex flex-col items-center justify-center w-8 h-8 rounded-full bg-base-100 text-neutral-400">
-                          ?
-                        </div>
-                      ) : (
-                        <img src={token.logoURI} alt={token.symbol} className="w-8 h-8 rounded-full" />
-                      )}
+                      <TokenImage token={token} />
                       <div className="text-start flex-1">
                         <div>{token.symbol && token.symbol}</div>
                         <div>