Added new networks (#36)

* Added
Bit.Country Pioneer
Astar
Parallel
Clover
Statemint
Subsocial
Robonomics
Encointer
Robonomics
Kintsugi
Picasso
Zeitgeist

Changed network logo style
Fixed case sensitive search

README.md

@@ -7,22 +7,34 @@ Parity will host its own version of the page for all chains for which we sign th
 External users (chain owners) will be able to deploy their versions of metadata portal if they want.
 
 #  Supported Chains
-| Chain name       | Type               |
-|------------------|--------------------|
-| Acala            | Polkadot parachain |
-| Bifrost          | Kusama parachain   |
-| Statemine        | Kusama parachain   |
-| Karura           | Kusama parachain   |
-| Parallel Heiko   | Kusama parachain   |
-| Shiden           | Kusama parachain   |
-| Basilisk         | Kusama parachain   |
-| Khala            | Kusama parachain   |
-| Altari           | Kusama parachain   |
-| KILT Spiritnet   | Kusama parachain   |
-| Calamari         | Kusama parachain   |
-| Quartz           | Kusama parachain   |
-| Westmint         | Westend parachain  |
-| Mandala          | Solo test network  |
+ | Number | Chain name          | Type               |
+|--------|---------------------|--------------------|
+| 1      | Acala               | Polkadot parachain |
+| 2      | Bifrost             | Kusama parachain   |
+| 3      | Statemine           | Kusama parachain   |
+| 4      | Karura              | Kusama parachain   |
+| 5      | Parallel Heiko      | Kusama parachain   |
+| 6      | Shiden              | Kusama parachain   |
+| 7      | Basilisk            | Kusama parachain   |
+| 8      | Khala               | Kusama parachain   |
+| 9      | Altari              | Kusama parachain   |
+| 10     | KILT Spiritnet      | Kusama parachain   |
+| 11     | Calamari            | Kusama parachain   |
+| 12     | Quartz              | Kusama parachain   |
+| 13     | Bit.Country Pioneer | Kusama parachain   |
+| 14     | Astar               | Polkadot parachai  |
+| 15     | Parallel            | Polkadot parachain |
+| 16     | Clover              | Polkadot parachain |
+| 17     | Statemint           | Polkadot parachain |
+| 18     | Subsocial           | Solo chain         |
+| 19     | Robonomics          | Kusama parachain   |
+| 20     | Encointer           | Kusama parachain   |
+| 21     | Robonomics          | Kusama parachain   |
+| 22     | Kintsugi            | Kusama parachain   |
+| 23     | Picasso             | Kusama parachain   |
+| 24     | Zeitgeist           | Kusama parachain   |
+| 25     | Westmint            | Westend parachain  |
+| 26     | Mandala             | Solo test chain    |
 
 
 ## How does it work?

config.toml

@@ -87,6 +87,72 @@ color = "#FF4D6A"
 logo = "Quartz.svg"
 rpc_endpoint = "wss://quartz.unique.network"
 
+[[chains]]
+name = "pioneer-runtime"
+color = "#000000"
+logo = "Bit.Country_Pioneer.svg"
+rpc_endpoint = "wss://pioneer.api.onfinality.io/public-ws"
+
+[[chains]]
+name = "astar"
+color = "#1b6dc1d9"
+logo = "Astar.svg"
+rpc_endpoint = "wss://rpc.astar.network"
+
+[[chains]]
+name = "parallel"
+color = "#ef18ac"
+logo = "Parallel.svg"
+rpc_endpoint = "wss://rpc.parallel.fi"
+
+[[chains]]
+name = "clover-mainnet"
+color = "linear-gradient(to right, #52ad75, #7cc773)"
+logo = "CLV_Parachain.svg"
+rpc_endpoint = "wss://rpc-para.clover.finance"
+
+[[chains]]
+name = "statemint"
+color = "#86e62a"
+logo = "Statemint.svg"
+rpc_endpoint = "wss://statemint-rpc.polkadot.io"
+
+[[chains]]
+name = "subsocial"
+color = "#b9018c"
+logo = "Subsocial_Solochain.svg"
+rpc_endpoint = "wss://arch.subsocial.network"
+
+[[chains]]
+name = "robonomics"
+color = "#2949d3"
+logo = "Robonomics.svg"
+rpc_endpoint = "wss://kusama.rpc.robonomics.network/"
+
+[[chains]]
+name = "encointer-parachain"
+color = "#0000cc"
+logo = "Encointer.svg"
+rpc_endpoint = "wss://api.kusama.encointer.org"
+
+[[chains]]
+name = "kintsugi-parachain"
+color = "#1a0a2d"
+logo = "Kintsugi.svg"
+rpc_endpoint = "wss://api-kusama.interlay.io/parachain"
+
+[[chains]]
+name = "picasso"
+color = "#000000"
+logo = "Picasso.svg"
+rpc_endpoint = "wss://picasso-rpc.composable.finance"
+
+[[chains]]
+name = "zeitgeist"
+color = "linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,138,1) 50%, rgba(13,36,69,1) 100%)"
+logo = "Zeitgeist.svg"
+rpc_endpoint = "wss://zeitgeist-rpc.dwellir.com"
+
 # Test networks
 [[chains]]
 name = "westmint"

src/components/App.css

@@ -13,9 +13,14 @@
 }
 
 .network_icon {
-  font-family: "Web3-Regular";
-  width: 3rem;
-  @apply text-center text-3xl mr-2;
+  display: inline-block;
+  height: 24px;
+  margin-right: 0.75rem;
+  vertical-align: middle;
+  width: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border-style: none;
 }
 
 .network_name {

src/components/App.tsx

@@ -47,7 +47,8 @@ export default function App() {
   const [currentNetwork, setCurrentNetwork] = useState<string>(
     (Object.keys(allChains).includes(location) && location) ||
       (localStorageNetwork && localStorageNetwork.toLowerCase()) ||
-      Object.keys(allChains)[0] || "bifrost"
+      Object.keys(allChains)[0] ||
+      "bifrost"
   );
 
   const specs = allChains[currentNetwork];

src/components/Sidebar.tsx

@@ -15,7 +15,7 @@ interface Props {
 const searchStringInArray = (str: string, strArray: string[]) => {
   const a = [];
   for (let j = 0; j < strArray.length; j++) {
-    if (strArray[j].match(str)) a.push(strArray[j]);
+    if (strArray[j].toUpperCase().match(str.toUpperCase())) a.push(strArray[j]);
   }
   return a;
 };
@@ -73,7 +73,7 @@ export default function Sidebar({
                   style={{ backgroundColor: specs.color }}
                 >
                   <div className="flex items-center text-xl text-white font-inter">
-                    <div>
+                    <div className="network_icon">
                       <img
                         src={
                           process.env.PUBLIC_URL +
@@ -97,7 +97,7 @@ export default function Sidebar({
                   }}
                 >
                   <div className="flex items-center text-xl font-inter">
-                    <div className="text-[#9E9E9E]">
+                    <div className="network_icon">
                       <img
                         src={
                           process.env.PUBLIC_URL +