Token Icon

1"use client";
2 
3import React from "react";
4import { Skeleton } from "@/components/ui/skeleton";
5import { cn } from "@/lib/utils";
6 
7type TokenIconProps = {
8  src: string;
9  alt?: string;
10  width?: number;
11  height?: number;
12  className?: string;
13};
14 
15const TokenIcon = ({
16  alt = "Token",
17  className = "",
18  width,
19  height,
20  ...props
21}: TokenIconProps) => {
22  const [status, setStatus] = React.useState<"loading" | "loaded" | "error">(
23    "loading",
24  );
25 
26  if (status === "error") {
27    const fontSize = typeof width === "number" ? width * 0.35 : "1rem";
28    return (
29      <div
30        className={cn(
31          "rounded-full bg-muted inline-flex items-center justify-center font-medium text-muted-foreground",
32          className,
33        )}
34        style={{ width, height, fontSize }}
35      >
36        {alt.charAt(0).toUpperCase()}
37      </div>
38    );
39  }
40 
41  return (
42    <div className="relative inline-block" style={{ width, height }}>
43      {status === "loading" && (
44        <Skeleton
45          className={cn("rounded-full absolute inset-0", className)}
46          style={{ width, height }}
47        />
48      )}
49      <img
50        alt={alt}
51        className={cn(
52          "rounded-full block",
53          status === "loading" && "opacity-0",
54          className,
55        )}
56        onLoad={() => setStatus("loaded")}
57        onError={() => setStatus("error")}
58        width={width}
59        height={height}
60        {...props}
61      />
62    </div>
63  );
64};
65 
66export type { TokenIconProps };
67export { TokenIcon };