[CORE-652] Add chain icon in SingleNetworkSelector + other chain icon related fixes

MananTank · MananTank · commit 46a959de0c28 · 2024-12-18T21:39:59.000+05:30
diff --git a/apps/dashboard/src/@/components/blocks/Img.tsx b/apps/dashboard/src/@/components/blocks/Img.tsx
@@ -65,6 +65,7 @@ export function Img(props: imgElementProps) {
           "fade-in-0 object-cover transition-opacity duration-300",
           className,
         )}
+        decoding="async"
       />
 
       {status !== "loaded" && (
diff --git a/apps/dashboard/src/@/components/blocks/MultiNetworkSelector.stories.tsx b/apps/dashboard/src/@/components/blocks/MultiNetworkSelector.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { MultiNetworkSelector } from "./NetworkSelectors";
+
+const meta = {
+  title: "blocks/Cards/MultiNetworkSelector",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+      <Variant label="No Chains selected by default" selectedChainIds={[]} />
+      <Variant
+        label="Polygon, Ethereum selected by default"
+        selectedChainIds={[1, 137]}
+      />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  selectedChainIds: number[];
+}) {
+  const [chainIds, setChainIds] = useState<number[]>(props.selectedChainIds);
+  return (
+    <BadgeContainer label={props.label}>
+      <MultiNetworkSelector
+        selectedChainIds={chainIds}
+        onChange={setChainIds}
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
@@ -4,6 +4,7 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
+import { ChainIcon } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 function cleanChainName(chainName: string) {
@@ -51,7 +52,7 @@ export function MultiNetworkSelector(props: {
 
       return (
         <div className="flex justify-between gap-4">
-          <span className="grow truncate text-left">
+          <span className="flex grow gap-2 truncate text-left">
             {cleanChainName(chain.name)}
           </span>
           <Badge variant="outline" className="gap-2">
@@ -133,8 +134,15 @@ export function SingleNetworkSelector(props: {
 
       return (
         <div className="flex justify-between gap-4">
-          <span className="grow truncate text-left">{chain.name}</span>
-          <Badge variant="outline" className="gap-2">
+          <span className="flex grow gap-2 truncate text-left">
+            <ChainIcon
+              className="size-5"
+              ipfsSrc={chain.icon?.url}
+              loading="lazy"
+            />
+            {chain.name}
+          </span>
+          <Badge variant="outline" className="gap-2 max-sm:hidden">
             <span className="text-muted-foreground">Chain ID</span>
             {chain.chainId}
           </Badge>
diff --git a/apps/dashboard/src/@/components/blocks/SingleNetworkSelector.stories.tsx b/apps/dashboard/src/@/components/blocks/SingleNetworkSelector.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { SingleNetworkSelector } from "./NetworkSelectors";
+
+const meta = {
+  title: "blocks/Cards/SingleNetworkSelector",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+      <Variant label="No Chain ID selected by default" chainId={undefined} />
+      <Variant label="Polygon selected by default" chainId={137} />
+      <Variant
+        label="Show certain chains only"
+        chainId={undefined}
+        chainIds={[1, 137, 10]}
+      />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  chainId: number | undefined;
+  chainIds?: number[];
+}) {
+  const [chainId, setChainId] = useState<number | undefined>(props.chainId);
+  return (
+    <BadgeContainer label={props.label}>
+      <SingleNetworkSelector
+        chainId={chainId}
+        onChange={setChainId}
+        chainIds={props.chainIds}
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
@@ -85,7 +85,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 href={`/${chain.slug}`}
                 className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-muted/50 px-2.5 py-1.5 hover:bg-muted"
               >
-                <ChainIcon ipfsSrc={chain.icon?.url} size={16} />
+                <ChainIcon ipfsSrc={chain.icon?.url} className="size-4" />
                 {cleanedChainName && (
                   <span className="text-xs">{cleanedChainName}</span>
                 )}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/components/server/chain-icon.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/components/server/chain-icon.tsx
@@ -4,20 +4,25 @@ import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/env";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { cn } from "@/lib/utils";
-
-const fallbackChainIcon =
-  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTY4LjE1MTkgNzUuNzM3MkM2Mi4yOTQzIDc5Ljk5MyA1NS4yMzk3IDgyLjI4NTIgNDcuOTk5MyA4Mi4yODUyQzQwLjc1ODkgODIuMjg1MiAzMy43MDQzIDc5Ljk5MyAyNy44NDY2IDc1LjczNzJNNjMuMDI5MSAxNy4xODM3QzY5LjUzNjggMjAuMzU3NyA3NC44NzI2IDI1LjUxMDQgNzguMjcxOCAzMS45MDMzQzgxLjY3MDkgMzguMjk2MiA4Mi45NTkgNDUuNjAxMiA4MS45NTEzIDUyLjc3MTFNMTQuMDQ3NiA1Mi43NzA4QzEzLjAzOTkgNDUuNjAwOCAxNC4zMjggMzguMjk1OSAxNy43MjcxIDMxLjkwM0MyMS4xMjYzIDI1LjUxMDEgMjYuNDYyMSAyMC4zNTczIDMyLjk2OTggMTcuMTgzM000Ni4wNTk4IDI5LjM2NzVMMjkuMzY3MyA0Ni4wNkMyOC42ODg1IDQ2LjczODkgMjguMzQ5IDQ3LjA3ODMgMjguMjIxOCA0Ny40Njk3QzI4LjExIDQ3LjgxNCAyOC4xMSA0OC4xODQ5IDI4LjIyMTggNDguNTI5MkMyOC4zNDkgNDguOTIwNiAyOC42ODg1IDQ5LjI2MDEgMjkuMzY3MyA0OS45MzlMNDYuMDU5OCA2Ni42MzE0QzQ2LjczODcgNjcuMzEwMyA0Ny4wNzgxIDY3LjY0OTcgNDcuNDY5NSA2Ny43NzY5QzQ3LjgxMzggNjcuODg4OCA0OC4xODQ3IDY3Ljg4ODggNDguNTI5IDY3Ljc3NjlDNDguOTIwNCA2Ny42NDk3IDQ5LjI1OTkgNjcuMzEwMyA0OS45Mzg4IDY2LjYzMTRMNjYuNjMxMiA0OS45MzlDNjcuMzEwMSA0OS4yNjAxIDY3LjY0OTUgNDguOTIwNiA2Ny43NzY3IDQ4LjUyOTJDNjcuODg4NiA0OC4xODQ5IDY3Ljg4ODYgNDcuODE0IDY3Ljc3NjcgNDcuNDY5N0M2Ny42NDk1IDQ3LjA3ODMgNjcuMzEwMSA0Ni43Mzg5IDY2LjYzMTIgNDYuMDZMNDkuOTM4OCAyOS4zNjc1QzQ5LjI1OTkgMjguNjg4NyA0OC45MjA0IDI4LjM0OTIgNDguNTI5IDI4LjIyMkM0OC4xODQ3IDI4LjExMDIgNDcuODEzOCAyOC4xMTAyIDQ3LjQ2OTUgMjguMjIyQzQ3LjA3ODEgMjguMzQ5MiA0Ni43Mzg3IDI4LjY4ODcgNDYuMDU5OCAyOS4zNjc1WiIgc3Ryb2tlPSIjNDA0MDQwIiBzdHJva2Utd2lkdGg9IjYuODU3MTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
+import {
+  fallbackChainIcon,
+  iconsToReplace,
+} from "../../../../../utils/chain-icons";
 
 export async function ChainIcon(props: {
   iconUrl?: string;
   className?: string;
 }) {
   if (props.iconUrl) {
     let imageLink = fallbackChainIcon;
+    const modifiedIconUrl =
+      props.iconUrl && props.iconUrl in iconsToReplace
+        ? iconsToReplace[props.iconUrl]
+        : props.iconUrl;
 
     const resolved = resolveSchemeWithErrorHandler({
       client: getThirdwebClient(),
-      uri: props.iconUrl,
+      uri: modifiedIconUrl,
     });
 
     if (resolved) {
@@ -35,6 +40,11 @@ export async function ChainIcon(props: {
 
       if (res?.status === 200) {
         imageLink = resolved;
+        // check that its an image
+        const contentType = res.headers.get("content-type");
+        if (!contentType?.startsWith("image")) {
+          imageLink = fallbackChainIcon;
+        }
       }
     }
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
@@ -81,7 +81,7 @@ export const ContractSubscriptionTable: React.FC<
         const chain = idToChain.get(cell.getValue());
         return (
           <Flex align="center" gap={2}>
-            <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
+            <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
             <Text>{chain?.name ?? "N/A"}</Text>
           </Flex>
         );
@@ -399,7 +399,7 @@ const RemoveModal = ({
               <FormControl>
                 <FormLabel>Chain</FormLabel>
                 <Flex align="center" gap={2}>
-                  <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
+                  <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
                   <Text>{chain?.name ?? "N/A"}</Text>
                 </Flex>
               </FormControl>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
@@ -541,7 +541,7 @@ const SendFundsModal = ({
             <FormControl>
               <FormLabel>Chain</FormLabel>
               <Flex align="center" gap={2}>
-                <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
+                <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
                 <Text>{chain?.name}</Text>
               </Flex>
             </FormControl>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
@@ -128,7 +128,7 @@ export const TransactionsTable: React.FC<TransactionsTableProps> = ({
         if (chain) {
           return (
             <Flex align="center" gap={2} className="py-2">
-              <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
+              <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
               <Text maxW={150} isTruncated>
                 {chain?.name ?? "N/A"}
               </Text>
@@ -359,7 +359,7 @@ const TransactionDetailsDrawer = ({
           <FormControl>
             <FormLabel>Chain</FormLabel>
             <Flex align="center" gap={2}>
-              <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
+              <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
               <Text>{chain?.name}</Text>
             </Flex>
           </FormControl>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
@@ -71,7 +71,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
         const chain = idToChain.get(Number.parseInt(cell.getValue()));
         return (
           <Flex align="center" gap={2}>
-            <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
+            <ChainIcon className="size-3" ipfsSrc={chain?.icon?.url} />
             <Text>{chain?.name ?? "N/A"}</Text>
           </Flex>
         );
@@ -405,7 +405,7 @@ const RemoveModal = ({
               <FormLabel>Chain</FormLabel>
               <Flex align="center" gap={2}>
                 <ChainIcon
-                  size={12}
+                  className="size-3"
                   ipfsSrc={
                     idToChain.get(Number.parseInt(relayer.chainId))?.icon?.url
                   }
diff --git a/apps/dashboard/src/components/cmd-k-search/index.tsx b/apps/dashboard/src/components/cmd-k-search/index.tsx
@@ -326,9 +326,8 @@ const SearchResult: React.FC<SearchResultProps> = ({
       )}
     >
       <ChainIcon
-        size={24}
+        className="size-6 shrink-0"
         ipfsSrc={result.chainMetadata?.icon?.url}
-        className="shrink-0"
       />
       <div className="flex flex-col gap-1">
         <h3 className="line-clamp-2 font-semibold text-foreground">
diff --git a/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx b/apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx
@@ -366,7 +366,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             label="Icon"
           >
             <div className="flex items-center gap-1">
-              <ChainIcon size={20} ipfsSrc={form.watch("icon")} />
+              <ChainIcon className="size-5" ipfsSrc={form.watch("icon")} />
               <IconUpload
                 onUpload={(uri) => {
                   form.setValue("icon", uri, { shouldDirty: true });
diff --git a/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx b/apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx
@@ -194,7 +194,7 @@ const ContractTable: React.FC<ContractTableProps> = ({
             `Unknown Network (#${cell.row.original.chainId})`;
           return (
             <div className="flex items-center gap-2">
-              <ChainIcon size={24} ipfsSrc={data?.icon?.url} />
+              <ChainIcon className="size-5" ipfsSrc={data?.icon?.url} />
               <SkeletonContainer
                 loadedData={data ? cleanedChainName : undefined}
                 skeletonData={`Chain ID ${cell.row.original.chainId}`}
diff --git a/apps/dashboard/src/components/icons/ChainIcon.tsx b/apps/dashboard/src/components/icons/ChainIcon.tsx
@@ -1,49 +1,33 @@
 "use client";
 
+import { Img } from "@/components/blocks/Img";
 /* eslint-disable @next/next/no-img-element */
 import { replaceIpfsUrl } from "lib/sdk";
-import { forwardRef } from "react";
-
-const fallbackIcon = replaceIpfsUrl(
-  "ipfs://QmU1r24UsmGg2w2RePz98zV5hR3CnjvakLZzB6yH4prPFh/globe.svg",
-);
+import { cn } from "../../@/lib/utils";
+import { fallbackChainIcon, iconsToReplace } from "../../utils/chain-icons";
 
 type ImageProps = React.ComponentProps<"img">;
 
 type ChainIconProps = ImageProps & {
   ipfsSrc?: string;
-  size: ImageProps["width"];
 };
 
-export const ChainIcon = forwardRef<HTMLImageElement, ChainIconProps>(
-  ({ ipfsSrc, size, ...restProps }, ref) => {
-    const src = ipfsSrc ? replaceIpfsUrl(ipfsSrc) : fallbackIcon;
-    // treat size of number as "px"
-    size = typeof size === "number" ? `${size}px` : size;
+export const ChainIcon = ({ ipfsSrc, ...restProps }: ChainIconProps) => {
+  const modifiedIPFS =
+    ipfsSrc && ipfsSrc in iconsToReplace ? iconsToReplace[ipfsSrc] : ipfsSrc;
+  const src = modifiedIPFS ? replaceIpfsUrl(modifiedIPFS) : fallbackChainIcon;
 
-    return (
-      <img
-        {...restProps}
-        ref={ref}
-        // render different image element if src changes to avoid showing old image while loading new one
-        key={src}
-        src={src}
-        width={size}
-        height={size}
-        style={{
-          objectFit: "contain",
-          width: size,
-          height: size,
-        }}
-        loading={restProps.loading || "lazy"}
-        decoding="async"
-        alt=""
-        // fallbackSrc is not working
-        onError={(event) => {
-          event.currentTarget.srcset = `${fallbackIcon} 1x`;
-          event.currentTarget.src = fallbackIcon;
-        }}
-      />
-    );
-  },
-);
+  return (
+    <Img
+      {...restProps}
+      // render different image element if src changes to avoid showing old image while loading new one
+      key={src}
+      className={cn("object-contain", restProps.className)}
+      src={src}
+      loading={restProps.loading || "lazy"}
+      alt=""
+      fallback={<img src={fallbackChainIcon} alt="" />}
+      skeleton={<div className="animate-pulse rounded-full bg-border" />}
+    />
+  );
+};
diff --git a/apps/dashboard/src/components/selects/CustomChainRenderer.tsx b/apps/dashboard/src/components/selects/CustomChainRenderer.tsx
@@ -49,7 +49,7 @@ export const CustomChainRenderer = ({
             }
           }}
         >
-          <ChainIcon ipfsSrc={chain.icon?.url} size={32} />
+          <ChainIcon ipfsSrc={chain.icon?.url} className="size-8" />
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2">
               <p
diff --git a/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx b/apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx
diff --git a/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx b/apps/dashboard/src/components/selects/NetworkSelectorButton.tsx
diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
diff --git a/apps/dashboard/src/utils/chain-icons.ts b/apps/dashboard/src/utils/chain-icons.ts

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({`
`85`	`85`	href={`/${chain.slug}`}
`86`	`86`	`className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-muted/50 px-2.5 py-1.5 hover:bg-muted"`
`87`	`87`	`>`
`88`		`- <ChainIcon ipfsSrc={chain.icon?.url} size={16} />`
	`88`	`+ <ChainIcon ipfsSrc={chain.icon?.url} className="size-4" />`
`89`	`89`	`{cleanedChainName && (`
`90`	`90`	`<span className="text-xs">{cleanedChainName}</span>`
`91`	`91`	`)}`