style fixes (#667)

cli/src/collector/export.rs

@@ -39,7 +39,7 @@ pub(crate) fn export_specs(config: &AppConfig, fetcher: impl Fetcher) -> Result<
         export_specs.insert(
             chain.portal_id(),
             ExportChainSpec {
-                title: chain.title.as_ref().unwrap_or(&chain.name).clone(),
+                title: chain.formatted_title(),
                 color: chain.color.clone(),
                 rpc_endpoint: chain.rpc_endpoints[0].clone(), // keep only the first one
                 genesis_hash: format!("0x{}", hex::encode(specs.genesis_hash)),

cli/src/config.rs

@@ -127,6 +127,14 @@ impl Chain {
             None => self.name.to_string(),
         }
     }
+
+    pub(crate) fn formatted_title(&self) -> String {
+        let mut title = self.title.as_ref().unwrap_or(&self.name).clone();
+        if let Some(relay) = &self.relay_chain {
+            title = format!("{} {}", relay, title);
+        }
+        title.to_owned()
+    }
 }
 
 fn color_default() -> String {

config.toml

@@ -18,14 +18,14 @@ genesis_hash = "0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90
 
 [[chains]]
 name = "statemint"
-title = "AssetHub"
+title = "Asset Hub"
 rpc_endpoint = "wss://polkadot-asset-hub-rpc.polkadot.io"
 color = "#86e62a"
 relay_chain = "polkadot"
 
 [[chains]]
 name = "bridge-hub-polkadot"
-title = "BridgeHub"
+title = "Bridge Hub"
 rpc_endpoint = "wss://polkadot-bridge-hub-rpc.polkadot.io"
 relay_chain = "polkadot"
 
@@ -48,14 +48,14 @@ genesis_hash = "0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3da
 
 [[chains]]
 name = "statemine"
-title = "AssetHub"
+title = "Asset Hub"
 rpc_endpoint = "wss://kusama-asset-hub-rpc.polkadot.io"
 color = "#113911"
 relay_chain = "kusama"
 
 [[chains]]
 name = "bridge-hub-kusama"
-title = "BridgeHub"
+title = "Bridge Hub"
 rpc_endpoint = "wss://kusama-bridge-hub-rpc.polkadot.io"
 relay_chain = "kusama"
 
@@ -78,7 +78,7 @@ genesis_hash = "0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f342
 
 [[chains]]
 name = "westmint"
-title = "AssetHub"
+title = "Asset Hub"
 rpc_endpoint = "wss://westend-asset-hub-rpc.polkadot.io"
 color = "#77bb77"
 relay_chain = "westend"
@@ -96,14 +96,14 @@ color = "#6f36dc"
 
 [[chains]]
 name = "statemine"
-title = "AssetHub"
+title = "Asset Hub"
 rpc_endpoint = "wss://rococo-asset-hub-rpc.polkadot.io"
 color = "#77bb77"
 relay_chain = "rococo"
 
 [[chains]]
 name = "bridge-hub-rococo"
-title = "BridgeHub"
+title = "Bridge Hub"
 rpc_endpoint = "wss://rococo-bridge-hub-rpc.polkadot.io"
 relay_chain = "rococo"
 

src/components/Network.tsx

@@ -1,7 +1,7 @@
 import { Tab } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import { ChainSpec, RpcSource, WasmSource } from "../scheme";
-import { capitalizeFirstLetter, cn } from "../utils";
+import { cn, formatTitle } from "../utils";
 import Copyable, { hashSlicer, keepHeadSlicer } from "./Copyable";
 import { Hr } from "./Hr";
 import { Links } from "./Links";
@@ -69,11 +69,7 @@ export const Network = ({
             src={icon(chainPortalId)}
             className="w-14 h-14 rounded-full bg-neutral-200"
           />
-          <span>
-            {capitalizeFirstLetter(
-              spec.relayChain ? spec.relayChain + " " : "",
-            ) + capitalizeFirstLetter(spec.title)}
-          </span>
+          <span>{formatTitle(spec.title)}</span>
         </div>
         <Links />
       </div>

src/components/NetworkAndPortalSelectMobile.tsx

@@ -2,7 +2,7 @@ import { Listbox } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { icon } from "../icons";
 import { Chains, Portals } from "../scheme";
-import { capitalizeFirstLetter, cn, currentPortalKey } from "../utils";
+import { cn, currentPortalKey, formatTitle } from "../utils";
 import { ChevronIcon } from "./ChevronIcon";
 import { Hr } from "./Hr";
 
@@ -81,7 +81,7 @@ export const NetworkAndPortalSelectMobile = ({
               Selected Network
             </div>
             <div className="flex items-center justify-between w-full text-lg">
-              <span>{capitalizeFirstLetter(chains[currentChain]?.title)}</span>
+              <span>{formatTitle(chains[currentChain]?.title)}</span>
               <ChevronIcon />
             </div>
           </Listbox.Button>
@@ -98,12 +98,13 @@ export const NetworkAndPortalSelectMobile = ({
                   <div
                     className={cn(
                       "flex items-center space-x-2 px-2 py-1",
+                      chains[chain].relayChain && "pl-8",
                       selected && "bg-neutral-100 rounded-full",
                     )}
                   >
                     <img src={icon(chain)} className="w-8 rounded-full" />
                     <div className="text-xl">
-                      {capitalizeFirstLetter(chains[chain].title)}
+                      {formatTitle(chains[chain].title)}
                     </div>
                   </div>
                 )}

src/components/NetworkSelect.tsx

@@ -1,7 +1,7 @@
 import { Listbox } from "@headlessui/react";
 import { icon } from "../icons";
 import { Chains } from "../scheme";
-import { capitalizeFirstLetter, cn } from "../utils";
+import { cn, formatTitle } from "../utils";
 import { useState } from "react";
 import { SearchBar } from "./SearchBar";
 
@@ -49,7 +49,7 @@ export const NetworkSelect = ({
                 >
                   <img src={icon(chain)} className="w-8 rounded-full" />
                   <div className="text-lg">
-                    {capitalizeFirstLetter(chains[chain].title)}
+                    {formatTitle(chains[chain].title)}
                   </div>
                 </div>
               )}

src/utils.ts

@@ -4,6 +4,13 @@ export function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+export function formatTitle(title: string) {
+  return title
+    .split(" ")
+    .map((v) => capitalizeFirstLetter(v))
+    .join(" ");
+}
+
 export function cn(...classes: (string | boolean | undefined)[]) {
   return classes.filter(Boolean).join(" ");
 }