config variable

.env.template

@@ -9,6 +9,8 @@ NEXT_PUBLIC_AUTH_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_AUTH_URL__
 # network config
 NEXT_PUBLIC_NETWORK_NAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_NAME__
 NEXT_PUBLIC_NETWORK_SHORT_NAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_SHORT_NAME__
+NEXT_PUBLIC_NETWORK_LOGO=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_LOGO__
+NEXT_PUBLIC_NETWORK_SMALL_LOGO=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_SMALL_LOGO__
 NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME__
 NEXT_PUBLIC_NETWORK_TYPE=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_TYPE__
 NEXT_PUBLIC_NETWORK_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_ID__

README.md

@@ -52,6 +52,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS | `string` | Address of network's native token | `0x029a799563238d0e75e20be2f4bda0ea68d00172` |
 | NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME | `string` *(optional)* | Network name for constructing url of token logos according to template `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${assetsNamePath}/assets/${tokenAddress}/logo.png`. It should match network name in TrustWallet assets repo, see the full list [here](https://github.com/trustwallet/assets/tree/master/blockchains) | `ethereum` |
 | NEXT_PUBLIC_NETWORK_LOGO | `string` *(optional)* | Network logo; if not provided, will fallback to logo predefined in the project; if the project doesn't have logo for such network then the common placeholder will be shown; *Note* that logo height should be 20px and width less than 120px | `https://www.fillmurray.com/240/40` |
+| NEXT_PUBLIC_NETWORK_SMALL_LOGO | `string` *(optional)* | Small version of network logo; if not provided, will fallback to logo predefined in the project; if the project doesn't have logo for such network then the common placeholder will be shown; *Note* that logo should have square format (e.g 60px by 60px) | `https://www.fillmurray.com/60/60` |
 | NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED | `boolean` *(optional)* | Set to true if network has account feature | `true` |
 
 ### UI configuration

configs/app/config.ts

@@ -54,6 +54,7 @@ const config = Object.freeze({
   network: {
     type: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_TYPE) as PreDefinedNetwork | undefined,
     logo: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_LOGO),
+    smallLogo: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_SMALL_LOGO),
     name: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_NAME),
     id: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_ID),
     shortName: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_SHORT_NAME),

configs/envs/.env.poa_core

@@ -5,6 +5,7 @@ NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Gnosis Chain','url':'https://blockscout
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address'}}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cup']
 NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=radial-gradient(at 12% 37%, hsla(324,73%,67%,1) 0px, transparent 50%), radial-gradient(at 62% 14%, hsla(256,87%,73%,1) 0px, transparent 50%), radial-gradient(at 84% 80%, hsla(128,75%,73%,1) 0px, transparent 50%), radial-gradient(at 57% 46%, hsla(285,63%,72%,1) 0px, transparent 50%), radial-gradient(at 37% 30%, hsla(174,70%,61%,1) 0px, transparent 50%), radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%), radial-gradient(at 67% 57%, hsla(14,95%,76%,1) 0px, transparent 50%)
+#NEXT_PUBLIC_NETWORK_SMALL_LOGO=https://placekitten.com/300/300
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=POA

lib/networks/networkAssets.ts

@@ -28,7 +28,7 @@ import sokolLogo from 'icons/networks/logos/sokol.svg';
 interface NetworkAssets {
   icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   logo?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  shortLogo?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  smallLogo?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 }
 
 const networkAssets: Partial<Record<PreDefinedNetwork, NetworkAssets>> = {

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -2,7 +2,7 @@ import { Icon, Box, Image, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
-import shortLogoPlaceholder from 'icons/networks/icons/placeholder.svg';
+import smallLogoPlaceholder from 'icons/networks/icons/placeholder.svg';
 import logoPlaceholder from 'icons/networks/logos/blockscout.svg';
 import link from 'lib/link/link';
 import ASSETS from 'lib/networks/networkAssets';
@@ -21,13 +21,24 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
 
   const logoEl = (() => {
     if (isCollapsed) {
-      const shortLogo = appConfig.network.type ? ASSETS[appConfig.network.type]?.shortLogo || ASSETS[appConfig.network.type]?.icon : undefined;
+      if (appConfig.network.smallLogo) {
+        return (
+          <Image
+            w="auto"
+            h="100%"
+            src={ appConfig.network.smallLogo }
+            alt={ `${ appConfig.network.name } network logo` }
+          />
+        );
+      }
+
+      const smallLogo = appConfig.network.type ? ASSETS[appConfig.network.type]?.smallLogo || ASSETS[appConfig.network.type]?.icon : undefined;
       return (
         <Icon
-          as={ shortLogo || shortLogoPlaceholder }
+          as={ smallLogo || smallLogoPlaceholder }
           width="auto"
           height="100%"
-          color={ shortLogo ? undefined : logoColor }
+          color={ smallLogo ? undefined : logoColor }
           { ...getDefaultTransitionProps() }
           style={ style }
         />
@@ -40,7 +51,7 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
           w="auto"
           h="100%"
           src={ appConfig.network.logo }
-          alt={ `${ appConfig.network.name } network icon` }
+          alt={ `${ appConfig.network.name } network logo` }
         />
       );
     }