feat: add square chain icons (#2302)

Co-authored-by: neocybereth <[email protected]>

Author: euharrison

apps/namadillo/src/App/Ibc/IbcWithdraw.tsx

@@ -74,7 +74,7 @@ export const IbcWithdraw = ({
   const [amount, setAmount] = useState<BigNumber | undefined>();
   const [customAddress, setCustomAddress] = useState<string>("");
   const [sourceChannel, setSourceChannel] = useState("");
-  const [destinationChain, setDestinationChain] = useState<Chain | undefined>();
+  const [destinationChain] = useState<Chain | undefined>();
   const [completedAt, setCompletedAt] = useState<Date | undefined>();
   const [txHash, setTxHash] = useState<string | undefined>();
   //  ERROR & STATUS STATE
@@ -83,12 +83,8 @@ export const IbcWithdraw = ({
   const [generalErrorMessage, setGeneralErrorMessage] = useState("");
   //  GLOBAL STATE
   const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
-  const {
-    walletAddress: keplrAddress,
-    connectToChainId,
-    chainId,
-    loadWalletAddress,
-  } = useWalletManager(keplrWalletManager);
+  const { walletAddress: keplrAddress, chainId } =
+    useWalletManager(keplrWalletManager);
   const transparentAccount = useAtomValue(defaultAccountAtom);
   const namadaChain = useAtomValue(chainAtom);
   const [ledgerStatus, setLedgerStatusStop] = useAtom(ledgerStatusDataAtom);

apps/namadillo/src/App/Transfer/ChainBadge.tsx

@@ -0,0 +1,38 @@
+import { Chain } from "@chain-registry/types";
+import { twMerge } from "tailwind-merge";
+
+export const ChainBadge = ({
+  chain,
+  className,
+}: {
+  chain?: Chain;
+  className?: string;
+}): JSX.Element => {
+  if (!chain) {
+    return <></>;
+  }
+
+  const image = chain?.images?.find((i) => i.theme?.circle === false);
+  const imageUrl = image?.svg ?? image?.png;
+
+  return (
+    <div
+      className={twMerge(
+        "w-6 h-6 rounded-sm bg-black overflow-hidden",
+        className
+      )}
+    >
+      {imageUrl ?
+        <img
+          src={imageUrl}
+          alt={chain.chain_name}
+          className="w-full h-full object-contain"
+          draggable={false}
+        />
+      : <span className="text-white">
+          {chain.chain_name.charAt(0).toUpperCase()}
+        </span>
+      }
+    </div>
+  );
+};

apps/namadillo/src/App/Transfer/SelectToken.tsx

@@ -1,24 +1,25 @@
 import { Chain } from "@chain-registry/types";
-import namadaChain from "@namada/chain-registry/namada/chain.json";
 import { Modal, Stack } from "@namada/components";
 import { ModalTransition } from "App/Common/ModalTransition";
 import { Search } from "App/Common/Search";
 import {
   connectedWalletsAtom,
   getAvailableChains,
   getChainRegistryByChainName,
+  getNamadaChainRegistry,
   namadaRegistryChainAssetsMapAtom,
 } from "atoms/integrations";
 import { tokenPricesFamily } from "atoms/prices/atoms";
 import clsx from "clsx";
 import { useWalletManager } from "hooks/useWalletManager";
 import { KeplrWalletManager } from "integrations/Keplr";
-import { getChainFromAsset, getChainImageUrl } from "integrations/utils";
+import { getChainFromAsset } from "integrations/utils";
 import { useAtom, useAtomValue } from "jotai";
 import { useMemo, useState } from "react";
 import { IoClose } from "react-icons/io5";
 import { AssetWithAmount } from "types";
 import { AddressDropdown } from "./AddressDropdown";
+import { ChainBadge } from "./ChainBadge";
 import { isNamadaAddress } from "./common";
 
 type SelectTokenProps = {
@@ -51,7 +52,8 @@ export const SelectToken = ({
   const chainAssets = useAtomValue(namadaRegistryChainAssetsMapAtom);
   const chainAssetsMap = Object.values(chainAssets.data ?? {});
   const ibcChains = useMemo(getAvailableChains, []);
-  const allChains = [...ibcChains, namadaChain as unknown as Chain];
+
+  const allChains = [...ibcChains, getNamadaChainRegistry(false).chain];
 
   // Create KeplrWalletManager instance and use with useWalletManager hook
   const keplrWallet = keplrWalletManager ?? new KeplrWalletManager();
@@ -174,17 +176,13 @@ export const SelectToken = ({
 
   const getOverlayChainLogo = (token: AssetWithAmount): JSX.Element | null => {
     const chain = getChainFromAsset(token);
-    const chainImageUrl = getChainImageUrl(chain);
     const isNamada = token.asset.symbol === "NAM";
     if (isNamada) return null;
     return (
-      <div className="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-black border-2 border-neutral-600 flex items-center justify-center overflow-hidden z-10">
-        <img
-          src={chainImageUrl}
-          alt={chain?.chain_name || "chain"}
-          className="w-4 h-4 object-cover rounded-full"
-        />
-      </div>
+      <ChainBadge
+        chain={chain}
+        className="absolute -bottom-0.5 -right-0.5 w-5 h-5 border border-neutral-600"
+      />
     );
   };
 
@@ -237,19 +235,7 @@ export const SelectToken = ({
                         : "hover:bg-neutral-800"
                       }`}
                     >
-                      <div className="w-7 h-7 rounded-sm flex items-center justify-center overflow-hidden">
-                        {network.logo_URIs?.svg ?
-                          <img
-                            src={network.logo_URIs?.svg}
-                            alt={network.chain_name}
-                            className="w-full h-full object-contain !rounded-none"
-                            draggable={false}
-                          />
-                        : <span className="text-white">
-                            {network.chain_name?.charAt(0)}
-                          </span>
-                        }
-                      </div>
+                      <ChainBadge chain={network} />
                       <span
                         className={clsx("capitalize font-normal text-white")}
                       >