Add logos in chain config

packages/starksheet-webapp/src/components/Footer/Footer.tsx

@@ -8,11 +8,9 @@ import { useChainProvider } from "../../hooks/useChainProvider";
 import { chainConfig } from "../../provider/chains";
 import GreyCell from "../GreyCell/GreyCell";
 import { SheetButton } from "../SheetButton/SheetButton";
-import githubLogo from "./github.svg";
-import mintSquareLogo from "./mintsquare.svg";
-import starknetLogo from "./starknet.svg";
-import telegramLogo from "./telegram.svg";
-import twitterLogo from "./twitter.svg";
+import githubLogo from "./../../assets/github.svg";
+import telegramLogo from "./../../assets/telegram.svg";
+import twitterLogo from "./../../assets/twitter.svg";
 
 export type FooterProps = {
   sx?: BoxProps["sx"];
@@ -103,7 +101,11 @@ function Footer({ sx }: FooterProps) {
             )
           }
         >
-          <img src={starknetLogo} alt="" />
+          <img
+            src={chainConfig.explorerLogo}
+            style={{ height: "18px" }}
+            alt=""
+          />
         </GreyCell>
         <GreyCell
           sx={{
@@ -161,7 +163,7 @@ function Footer({ sx }: FooterProps) {
             )
           }
         >
-          <img src={mintSquareLogo} style={{ height: "18px" }} alt="" />
+          <img src={chainConfig.nftLogo} style={{ height: "18px" }} alt="" />
         </GreyCell>
       </Box>
     </GreyCell>

packages/starksheet-webapp/src/provider/chains.ts

@@ -1,6 +1,15 @@
 import { Abi } from "starknet";
 import contractData from "../contracts/contractData.json";
 import { ChainConfig, ChainId, ChainType } from "../types";
+import elementLogo from "./../assets/element.png";
+import etherscanLogo from "./../assets/etherscan.svg";
+import flexLogo from "./../assets/flex.svg";
+import lineaLogo from "./../assets/linea.png";
+import openseaLogo from "./../assets/opensea.svg";
+import optimismLogo from "./../assets/optimism.svg";
+import starknetLogo from "./../assets/starknet.svg";
+import wenmoonLogo from "./../assets/wenmoon.png";
+
 import { EVMProvider } from "./EVMProvider";
 import { StarknetProvider } from "./StarknetProvider";
 
@@ -27,7 +36,9 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     explorerBaseUrl: "https://goerli.etherscan.io/address/",
     explorerApiUrl: "https://api-goerli.etherscan.io/api",
     explorerApiKey: `${process.env.REACT_APP_GOERLI_EXPLORER_KEY}`,
+    explorerLogo: etherscanLogo,
     nftBaseUrl: "https://testnets.opensea.io/assets/goerli/",
+    nftLogo: openseaLogo,
     rpcUrl: `https://goerli.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
   },
   optimismMainnet: {
@@ -37,7 +48,9 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     explorerBaseUrl: "https://optimistic.etherscan.io/address/",
     explorerApiUrl: "https://api-optimistic.etherscan.io/api",
     explorerApiKey: `${process.env.REACT_APP_OPTIMISM_EXPLORER_KEY}`,
+    explorerLogo: optimismLogo,
     nftBaseUrl: "https://wenmoon.market/collection/optimism/",
+    nftLogo: wenmoonLogo,
     rpcUrl: `https://optimism-mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
   },
   linea: {
@@ -47,7 +60,9 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     explorerBaseUrl: "https://lineascan.build/address/",
     explorerApiUrl: "https://api.lineascan.build/api",
     explorerApiKey: `${process.env.REACT_APP_LINEA_EXPLORER_KEY}`,
+    explorerLogo: lineaLogo,
     nftBaseUrl: "https://element.market/assets/linea/",
+    nftLogo: elementLogo,
     rpcUrl: `https://linea-mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
   },
   anvil: {
@@ -56,15 +71,19 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.EVM,
     explorerBaseUrl: "https://goerli.etherscan.io/address/",
     explorerApiUrl: "https://api-goerli.etherscan.io/api",
+    explorerLogo: etherscanLogo,
     nftBaseUrl: "https://testnets.opensea.io/assets/goerli/",
+    nftLogo: openseaLogo,
     rpcUrl: "http://0.0.0.0:8545",
   },
   kakarot: {
     appName: "Kakasheet",
     chainId: ChainId.STARKNET_TESTNET,
     chainType: ChainType.EVM,
     explorerBaseUrl: "",
+    explorerLogo: starknetLogo,
     nftBaseUrl: "",
+    nftLogo: flexLogo,
     rpcUrl: "http://127.0.0.1:3030",
   },
   // Starknet chains
@@ -74,6 +93,8 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.STARKNET,
     explorerBaseUrl: "https://starkscan.co/contract/",
     nftBaseUrl: "https://flexing.gg/starknet/collection/",
+    explorerLogo: starknetLogo,
+    nftLogo: flexLogo,
     rpcUrl: `https://starknet-mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
   },
   testnet: {
@@ -82,6 +103,8 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.STARKNET,
     explorerBaseUrl: "https://testnet.starkscan.co/contract/",
     nftBaseUrl: "https://mintsquare.io/collection/starknet-testnet/",
+    explorerLogo: starknetLogo,
+    nftLogo: flexLogo,
     rpcUrl: `https://starknet-goerli.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
   },
   testnet2: {
@@ -90,6 +113,8 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.STARKNET,
     explorerBaseUrl: "https://testnet-2.starkscan.co/contract/",
     nftBaseUrl: "",
+    explorerLogo: starknetLogo,
+    nftLogo: flexLogo,
     rpcUrl: `https://starknet-goerli2.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
   },
   starknetDevnet: {
@@ -98,6 +123,8 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.STARKNET,
     explorerBaseUrl: "https://devnet.starkscan.co/contract/",
     nftBaseUrl: "",
+    explorerLogo: starknetLogo,
+    nftLogo: flexLogo,
     rpcUrl: "http://127.0.0.1:5050/rpc",
   },
   katana: {
@@ -106,6 +133,8 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.STARKNET,
     explorerBaseUrl: "",
     nftBaseUrl: "",
+    explorerLogo: starknetLogo,
+    nftLogo: flexLogo,
     rpcUrl: "http://127.0.0.1:5050",
   },
   madara: {
@@ -114,6 +143,8 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.STARKNET,
     explorerBaseUrl: "",
     nftBaseUrl: "",
+    explorerLogo: starknetLogo,
+    nftLogo: flexLogo,
     rpcUrl: "http://127.0.0.1:9944",
   },
   sharingan: {
@@ -122,6 +153,8 @@ const chainConfigs: Record<SupportedChains, Omit<ChainConfig, "addresses">> = {
     chainType: ChainType.STARKNET,
     explorerBaseUrl: "",
     nftBaseUrl: "",
+    explorerLogo: starknetLogo,
+    nftLogo: flexLogo,
     rpcUrl: process.env.REACT_APP_SHARINGAN_URL!,
   },
 };

packages/starksheet-webapp/src/types/provider/ChainConfig.ts

@@ -7,7 +7,9 @@ export interface ChainConfig {
   explorerBaseUrl: string;
   explorerApiUrl?: string;
   explorerApiKey?: string;
+  explorerLogo: string;
   nftBaseUrl: string;
+  nftLogo: string;
   rpcUrl: string;
   appName: string;
   addresses: {