a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change default token icon

This commit is contained in:
Willian Mitsuda 2021-11-26 05:13:23 -03:00
parent 1431b449cc
commit 380ef96225
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/eth-diamond-black.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

23
src/components/TokenLogo.tsx
View File

@ -1,32 +1,31 @@
import React, { Suspense, useContext } from "react"; import React, { useContext } from "react";
import { useImage } from "react-image"; import { useImage } from "react-image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
import { tokenLogoURL } from "../url"; import { tokenLogoURL } from "../url";
import { RuntimeContext } from "../useRuntime"; import { RuntimeContext } from "../useRuntime";
import { ChecksummedAddress } from "../types";
type TokenLogoProps = { type TokenLogoProps = {
address: string; address: ChecksummedAddress;
name: string; name: string;
}; };
const TokenLogo: React.FC<TokenLogoProps> = (props) => ( const TokenLogo: React.FC<TokenLogoProps> = ({ address, name }) => {
<Suspense fallback={null}>
<InternalTokenLogo {...props} />
</Suspense>
);
const InternalTokenLogo: React.FC<TokenLogoProps> = ({ address, name }) => {
const { config } = useContext(RuntimeContext); const { config } = useContext(RuntimeContext);
const srcList: string[] = []; const srcList: string[] = [];
if (config) { if (config) {
srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", address)); srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", address));
} }
srcList.push("/eth-diamond-black.png"); const { src, isLoading } = useImage({ srcList, useSuspense: false });
const { src } = useImage({ srcList });
return ( return (
<div className="flex items-center justify-center w-5 h-5"> <div className="flex items-center justify-center text-gray-400 w-5 h-5">
{src && (
<img className="max-w-full max-h-full" src={src} alt={`${name} logo`} /> <img className="max-w-full max-h-full" src={src} alt={`${name} logo`} />
)}
{!src && !isLoading && <FontAwesomeIcon icon={faCoins} size="1x" />}
</div> </div>
); );
}; };