Merge pull request #2640 from poanetwork/vb-network-icons-svg

SVG network icons

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [#2497](https://github.com/poanetwork/blockscout/pull/2497) - Add generic Ordered Cache behaviour and implementation
 
 ### Fixes
+- [#2640](https://github.com/poanetwork/blockscout/pull/2640) - SVG network icons
 - [#2626](https://github.com/poanetwork/blockscout/pull/2626) - Fixing 2 Mobile UI Issues
 - [#2623](https://github.com/poanetwork/blockscout/pull/2623) - fix a blinking test
 - [#2616](https://github.com/poanetwork/blockscout/pull/2616) - deduplicate coin history records by delta

apps/block_scout_web/assets/css/_images-preload.scss

@@ -1,16 +1,16 @@
 body:after {
 	position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
 	content:
-		url(/images/network-selector-icons/callisto-mainnet.png)
-		url(/images/network-selector-icons/ethereum-mainnet.png)
-		url(/images/network-selector-icons/ethereum-classic.png)
-		url(/images/network-selector-icons/goerli-testnet.png)
-		url(/images/network-selector-icons/kovan-testnet.png)
-		url(/images/network-selector-icons/poa-core.png)
-		url(/images/network-selector-icons/poa-sokol.png)
-		url(/images/network-selector-icons/rinkeby-testnet.png)
-		url(/images/network-selector-icons/rsk-mainnet.png)
-		url(/images/network-selector-icons/ropsten-testnet.png)
-		url(/images/network-selector-icons/xdai-chain.png)
-		url(/images/network-selector-icons/lukso-l14-testnet.png)
+		url(/images/network-selector-icons/callisto-mainnet.svg)
+		url(/images/network-selector-icons/ethereum-mainnet.svg)
+		url(/images/network-selector-icons/ethereum-classic.svg)
+		url(/images/network-selector-icons/goerli-testnet.svg)
+		url(/images/network-selector-icons/kovan-testnet.svg)
+		url(/images/network-selector-icons/poa-core.svg)
+		url(/images/network-selector-icons/poa-sokol.svg)
+		url(/images/network-selector-icons/rinkeby-testnet.svg)
+		url(/images/network-selector-icons/rsk-mainnet.svg)
+		url(/images/network-selector-icons/ropsten-testnet.svg)
+		url(/images/network-selector-icons/xdai-chain.svg)
+		url(/images/network-selector-icons/lukso-l14-testnet.svg)
 };

apps/block_scout_web/assets/css/components/_network-selector.scss

@@ -245,40 +245,40 @@ $network-selector-item-icon-dimensions: 30px !default;
   width: $network-selector-item-icon-dimensions;
 
   &-callisto-mainnet {
-    background-image: url(/images/network-selector-icons/callisto-mainnet.png)
+    background-image: url(/images/network-selector-icons/callisto-mainnet.svg)
   }
   &-ethereum-mainnet {
-    background-image: url(/images/network-selector-icons/ethereum-mainnet.png)
+    background-image: url(/images/network-selector-icons/ethereum-mainnet.svg)
   }
   &-ethereum-classic {
-    background-image: url(/images/network-selector-icons/ethereum-classic.png)
+    background-image: url(/images/network-selector-icons/ethereum-classic.svg)
   }
   &-goerli-testnet {
-    background-image: url(/images/network-selector-icons/goerli-testnet.png)
+    background-image: url(/images/network-selector-icons/goerli-testnet.svg)
   }
   &-kovan-testnet {
-    background-image: url(/images/network-selector-icons/kovan-testnet.png)
+    background-image: url(/images/network-selector-icons/kovan-testnet.svg)
   }
   &-poa-core {
-    background-image: url(/images/network-selector-icons/poa-core.png)
+    background-image: url(/images/network-selector-icons/poa-core.svg)
   }
   &-poa-sokol {
-    background-image: url(/images/network-selector-icons/poa-sokol.png)
+    background-image: url(/images/network-selector-icons/poa-sokol.svg)
   }
   &-rinkeby-testnet {
-    background-image: url(/images/network-selector-icons/rinkeby-testnet.png)
+    background-image: url(/images/network-selector-icons/rinkeby-testnet.svg)
   }
   &-rsk-mainnet {
-    background-image: url(/images/network-selector-icons/rsk-mainnet.png)
+    background-image: url(/images/network-selector-icons/rsk-mainnet.svg)
   }
   &-ropsten-testnet {
-    background-image: url(/images/network-selector-icons/ropsten-testnet.png)
+    background-image: url(/images/network-selector-icons/ropsten-testnet.svg)
   }
   &-xdai-chain {
-    background-image: url(/images/network-selector-icons/xdai-chain.png)
+    background-image: url(/images/network-selector-icons/xdai-chain.svg)
   }
   &-lukso-l14-testnet {
-    background-image: url(/images/network-selector-icons/lukso-l14-testnet.png)
+    background-image: url(/images/network-selector-icons/lukso-l14-testnet.svg)
   }
 }
 

apps/block_scout_web/assets/package-lock.json

@@ -4555,7 +4555,6 @@
           "version": "2.2.4",
           "resolved": false,
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4773,8 +4772,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "resolved": false,
-          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "optional": true
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4877,8 +4875,7 @@
         "yallist": {
           "version": "3.0.2",
           "resolved": false,
-          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "optional": true
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
         }
       }
     },
@@ -5989,7 +5986,7 @@
         },
         "callsites": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+          "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
           "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
           "dev": true
         },
@@ -6191,7 +6188,7 @@
             },
             "jest-get-type": {
               "version": "22.4.3",
-              "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
+              "resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
               "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
               "dev": true
             },

apps/block_scout_web/assets/static/images/network-selector-icons/callisto-mainnet.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#164059" fill-rule="evenodd" d="M30 14.999V30H0V0h30v14.999z"/>
+    <path fill="#34C88A" fill-rule="evenodd" d="M15.678 14.092c-.384 0-.386-.386-.386-.386s1.424-2.53 1.654-2.917c.23-.387.661-.055.661-.055s5.111 2.961 5.899 3.413c1.111.853 0 1.706 0 1.706l-5.899 3.413s-.441.26-.606 0c-.165-.26-1.544-2.752-1.544-2.752s-.354-.526.221-.661h1.102c.368 0 .386.441.386.441v.605s.037.33.331.33h.496l1.764-1.981s.299-.276 0-.551c-.299-.274-1.543-1.761-1.543-1.761l-.276-.165h-.386s-.386-.009-.386.495v.495s.001.331-.33.331h-1.158zM11.943 13.756c.192.333-.141.527-.141.527s-2.9.034-3.35.029c-.45-.006-.378-.545-.378-.545s.013-5.904.011-6.812c.183-1.388 1.477-.853 1.477-.853l5.897 3.396s.445.252.303.525c-.143.273-1.612 2.712-1.612 2.712s-.279.571-.682.14l-.55-.954c-.184-.318.188-.554.188-.554l.524-.303s.268-.197.121-.451l-.247-.43-2.596-.535s-.388-.121-.476.276c-.089.396-.755 2.217-.755 2.217l-.005.321.192.334s.185.338.622.086l.429-.248s.285-.166.451.121l.577 1.001z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M11.887 16.244c.192-.333-.141-.527-.141-.527s-2.899-.034-3.349-.029c-.45.006-.378.545-.378.545s.013 5.904.011 6.812c.183 1.388 1.476.853 1.476.853l5.896-3.396s.445-.252.303-.525c-.142-.273-1.612-2.712-1.612-2.712s-.278-.571-.682-.14l-.55.954c-.183.318.189.554.189.554l.524.303s.267.197.121.451l-.248.43-2.595.535s-.387.121-.476-.276c-.088-.396-.754-2.217-.754-2.217l-.006-.321.193-.334s.185-.338.621-.086l.429.248s.285.166.451-.121l.577-1.001z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/callisto.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 60 60">
-  <g>
-    <path d="M.87,4h0V26.18a1.35,1.35,0,0,0,1.35,1.37l9.91,0a1.37,1.37,0,0,0,1.16-2L12,23.19h0a2,2,0,0,0-2.75-.75h0l-.14.08h0a2,2,0,0,1-2.72-.74,2.06,2.06,0,0,1-.16-1.65h0l2.06-6.28h0a2,2,0,0,1,2.31-1.36h0L17,13.8h0a2,2,0,0,1,1.33,1,2,2,0,0,1-.73,2.77h0l-.14.08h0a2.07,2.07,0,0,0-.74,2.8h0L18,22.65a1.34,1.34,0,0,0,2.32,0l5-8.66a1.37,1.37,0,0,0-.49-1.86L5.9,1.06h0A3.36,3.36,0,0,0,.87,4Z"/>
-    <path d="M50.9,26.32h0L30.58,14.37a1.34,1.34,0,0,0-1.85.5L23.4,24.36a1.47,1.47,0,0,0,1.25,2.19h3.48a1.45,1.45,0,0,0,1.44-1.47V24A1.34,1.34,0,0,1,30.9,22.6h.92a1.33,1.33,0,0,1,1,.46l4.84,5.56a1.38,1.38,0,0,1,0,1.81L32.83,36a1.33,1.33,0,0,1-1,.46H30.9a1.34,1.34,0,0,1-1.33-1.35V34a1.45,1.45,0,0,0-1.44-1.47H24.7a1.47,1.47,0,0,0-1.25,2.19l5.29,9.43a1.33,1.33,0,0,0,1.83.49L50.9,32.67h0A3.7,3.7,0,0,0,50.9,26.32Z"/>
-    <path d="M5.9,58.94h0L24.76,47.87a1.39,1.39,0,0,0,.5-1.88l-5-8.71a1.34,1.34,0,0,0-2.32,0l-1.62,2.86a1.38,1.38,0,0,0,.5,1.87l1.27.75a1.38,1.38,0,0,1,.5,1.86l-.48.84a1.34,1.34,0,0,1-.89.65L10,47.61a1.34,1.34,0,0,1-1.54-.91L6.08,39.56a1.39,1.39,0,0,1,.11-1.12l.47-.83a1.34,1.34,0,0,1,1.84-.49l1.27.75a1.33,1.33,0,0,0,1.83-.49l1.61-2.83a1.37,1.37,0,0,0-1.16-2l-9.84,0A1.35,1.35,0,0,0,.87,33.82V56h0A3.36,3.36,0,0,0,5.9,58.94Z"/>
-  </g>
-</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/core.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
-    <path fill="#5C34A2" fill-rule="evenodd" d="M15 0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z"/>
-    <path fill="#FFF" fill-rule="evenodd" d="M8.438 16.812h-.313v.875h-.007c.001.007.007.01.007.016 0 .164-.14.297-.313.297h-2.5A.305.305 0 0 1 5 17.703c0-.006.006-.009.007-.016H5v-5.374h.007c-.001-.007-.007-.01-.007-.016 0-.164.14-.297.312-.297h3.126c1.38 0 2.5 1.077 2.5 2.406 0 1.329-1.12 2.406-2.5 2.406zM14.688 12c1.725 0 3.125 1.343 3.125 3s-1.4 3-3.125 3c-1.726 0-3.126-1.343-3.126-3s1.4-3 3.126-3zM25 17.81a.19.19 0 0 1-.193.185h-7.108c-.004.001-.007.005-.011.005a.188.188 0 0 1-.188-.188c0-.039.021-.07.042-.101l-.007-.012 3.52-5.549h.016c.02-.082.086-.148.177-.148.092 0 .158.066.178.148h.016L25 17.736l-.02.027c.005.017.02.029.02.047z"/>
-</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/dai.svg

@@ -1,33 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="0 0 43.5 43.5">
-  <defs>
-    <style>
-      .a {
-        fill: #fff;
-        filter: url(#b);
-      }
-
-      .b {
-        fill: url(#a);
-      }
-    </style>
-    <linearGradient id="a" x1="21" y1="12.89" x2="21" y2="28.58" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#fec54c"/>
-      <stop offset="1" stop-color="#fe9314"/>
-    </linearGradient>
-    <filter  filterUnits="userSpaceOnUse" height="49" id="b" width="43" x="0" y="0">
-    	<feOffset  dy="3" in="SourceAlpha"></feOffset>
-    	<feGaussianBlur  result="blurOut" stdDeviation="2.236"></feGaussianBlur>
-    	<feFlood  flood-color="#ABBAC7" result="floodOut"></feFlood>
-    	<feComposite  in="floodOut" in2="blurOut" operator="atop"></feComposite>
-    	<feComponentTransfer>
-    		<feFuncA  slope=".2" type="linear"></feFuncA>
-    	</feComponentTransfer>
-    	<feMerge>
-    		<feMergeNode></feMergeNode>
-    		<feMergeNode  in="SourceGraphic"></feMergeNode>
-    	</feMerge>
-    </filter>
-  </defs>
-  <path class="a" d="M17.2,38.8,6,32.1a4.34,4.34,0,0,1-2-3.4V12.9A4.11,4.11,0,0,1,6,9.5L17.2,2.8C21,.5,21,.5,24.9,2.8L36,9.4a4.22,4.22,0,0,1,2,3.4V28.6A4.22,4.22,0,0,1,36,32L24.9,38.7C21,41.1,21,41.1,17.2,38.8Z"/>
-  <polygon class="b" points="30.03 12.89 24.97 12.89 21.03 17.64 17.03 12.89 11.97 12.89 18.53 20.82 11.97 28.7 17.03 28.7 20.97 23.95 24.97 28.7 30.03 28.7 23.47 20.76 30.03 12.89"/>
-</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/ethereum-classic.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#0C133C" fill-rule="evenodd" d="M30 15v15H0V0h30v15z"/>
+    <path fill="#34FA99" fill-rule="evenodd" d="M15.437 25h-.874L8 15.217v-.434L14.563 5h.874L22 14.783v.434L15.437 25zM15 22.826l3.937-5.869L15 18.913l-3.937-1.956L15 22.826zm0-15.652l-3.937 5.869L15 11.087l3.937 1.956L15 7.174zm0 5.543L10.516 15 15 17.283 19.484 15 15 12.717z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/ethereum-mainnet.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#E8E8E8" fill-rule="evenodd" d="M30 15v15H15 0V0h30v15z"/>
+    <path fill="#828384" fill-rule="evenodd" d="M9 15.169l6-2.711V5L9 15.169z"/>
+    <path fill="#343535" fill-rule="evenodd" d="M9 15.169l6-2.796v6.441l-6-3.645z"/>
+    <path fill="#808182" fill-rule="evenodd" d="M9 16.441l6 3.644V25l-6-8.559z"/>
+    <path fill="#2F3030" fill-rule="evenodd" d="M21 15.169l-6-2.711V5l6 10.169z"/>
+    <path fill="#131313" fill-rule="evenodd" d="M21 15.169l-6-2.796v6.441l6-3.645z"/>
+    <path fill="#2F3030" fill-rule="evenodd" d="M21 16.441l-6 3.644V25l6-8.559z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/goerli-testnet.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#1C1C1C" fill-rule="evenodd" d="M0 30V0h30v30H0z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M23.73 18.983c-.18.61-.442 1.14-.786 1.589a3.63 3.63 0 0 1-1.271 1.051c-.504.252-1.076.378-1.716.378-.647 0-1.223-.126-1.728-.378a3.66 3.66 0 0 1-1.28-1.051 4.782 4.782 0 0 1-.79-1.589 7.03 7.03 0 0 1-.27-1.998v-.191c0-.716.09-1.379.27-1.988.18-.61.443-1.14.79-1.589a3.725 3.725 0 0 1 1.272-1.056c.5-.254 1.073-.382 1.72-.382.646 0 1.22.128 1.724.382.503.255.928.607 1.275 1.056.347.449.61.979.79 1.589a6.99 6.99 0 0 1 .271 1.988v.191a7.03 7.03 0 0 1-.271 1.998zm-1.946-2.189c0-.4-.035-.779-.103-1.137a3.37 3.37 0 0 0-.322-.947 1.771 1.771 0 0 0-.568-.646c-.233-.158-.517-.237-.85-.237-.329 0-.609.079-.843.237a1.809 1.809 0 0 0-.572.646 3.28 3.28 0 0 0-.325.947 6.002 6.002 0 0 0-.103 1.137v.191c0 .413.034.8.103 1.161.069.361.177.677.325.947a1.8 1.8 0 0 0 .576.641c.236.158.521.237.855.237.323 0 .601-.079.834-.237.233-.157.422-.371.568-.641.145-.27.253-.586.322-.947.068-.361.103-.748.103-1.161v-.191zm.858-6.835a1.005 1.005 0 0 1-.342.241 1.075 1.075 0 0 1-.437.086c-.159 0-.304-.028-.437-.086a1.011 1.011 0 0 1-.341-.241 1.105 1.105 0 0 1-.223-.364 1.276 1.276 0 0 1-.079-.455c0-.158.026-.307.079-.446a1.048 1.048 0 0 1 .564-.597c.133-.057.278-.086.437-.086.159 0 .305.029.437.086a1.038 1.038 0 0 1 .564.597c.053.139.08.288.08.446 0 .163-.027.315-.08.455a1.12 1.12 0 0 1-.222.364zm-3.814-.014a1.044 1.044 0 0 1-.778.323 1.048 1.048 0 0 1-.779-.323c-.095-.1-.169-.22-.222-.359a1.25 1.25 0 0 1-.08-.446c0-.158.027-.307.08-.446.053-.14.127-.261.222-.365.096-.103.209-.183.342-.241.132-.057.278-.086.437-.086.159 0 .304.029.437.086.132.058.246.138.341.241.096.104.17.225.223.365.053.139.079.288.079.446 0 .157-.026.306-.079.446a1.053 1.053 0 0 1-.223.359zm-6.002 11.487a5.775 5.775 0 0 1-2.515.56c-.656 0-1.25-.134-1.779-.401a3.837 3.837 0 0 1-1.359-1.156c-.376-.504-.666-1.121-.87-1.852-.204-.731-.306-1.561-.306-2.49v-1.802c0-.928.108-1.758.322-2.489.215-.731.511-1.352.89-1.862a3.938 3.938 0 0 1 1.335-1.165 3.552 3.552 0 0 1 1.664-.4c.652 0 1.22.094 1.704.282.485.188.894.46 1.228.815.334.355.594.787.782 1.297.188.509.312 1.083.37 1.72h-2.177c-.074-.679-.253-1.191-.536-1.534-.284-.342-.722-.514-1.315-.514-.286 0-.551.084-.795.25-.243.167-.455.412-.635.733-.18.322-.323.721-.429 1.197a7.657 7.657 0 0 0-.159 1.652v1.82c.005 1.238.185 2.187.54 2.845.355.658.898.99 1.629.996a2.955 2.955 0 0 0 .993-.172c.148-.055.279-.117.393-.187.114-.07.2-.144.258-.223l.008-2.403h-1.914v-1.911h4.139l.008 5.224c-.143.2-.339.404-.588.61a4.438 4.438 0 0 1-.886.56z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/kovan-testnet.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#1F857F" fill-rule="evenodd" d="M30 14.999V30H0V0h30v14.999z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M18.938 21.316l1.312 1.263V23H9.75v-.421l1.312-1.263C9.4 21.316 8 19.968 8 18.368v-8C8 7.421 11.15 7 15 7s7 .421 7 3.368v8c0 1.6-1.4 2.948-3.062 2.948zm-7.759-2.01c.709 0 1.283-.554 1.283-1.237 0-.682-.574-1.236-1.283-1.236s-1.283.554-1.283 1.236c0 .683.574 1.237 1.283 1.237zm3.179-9.223H9.896v4.306h4.462v-4.306zm5.746 0h-4.462v4.306h4.462v-4.306zm-1.283 6.75c-.709 0-1.283.554-1.283 1.236 0 .683.574 1.237 1.283 1.237s1.283-.554 1.283-1.237c0-.682-.574-1.236-1.283-1.236z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/lukso-l14-testnet.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#FF8086" fill-rule="evenodd" d="M0 30V0h30v30H0z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M5.008 15h10.601l4.387-8.012h-9.87L5.008 15z"/>
+    <path fill="#DADBDA" fill-rule="evenodd" d="M5.008 15h10.601l4.387 8.012h-9.87L5.008 15z"/>
+    <path fill="#EFEEEE" fill-rule="evenodd" d="M13.992 15l5.295-7.992L24.99 15l-5.703 7.992L13.992 15z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/poa-core.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#5C34A2" fill-rule="evenodd" d="M30 14.999V30H0V0h30v14.999z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M8.438 16.812h-.313v.875h-.007c.001.006.007.01.007.016 0 .164-.14.297-.313.297h-2.5A.305.305 0 0 1 5 17.703c0-.006.006-.01.007-.016H5v-5.375h.007c-.001-.006-.007-.009-.007-.015 0-.164.14-.297.312-.297h3.126c1.38 0 2.5 1.077 2.5 2.406 0 1.329-1.12 2.406-2.5 2.406zM14.687 12c1.726 0 3.126 1.343 3.126 3s-1.4 3-3.126 3c-1.725 0-3.125-1.343-3.125-3s1.4-3 3.125-3zM25 17.81a.19.19 0 0 1-.193.185h-7.108c-.004.001-.007.005-.011.005a.188.188 0 0 1-.188-.187c0-.04.021-.071.042-.102l-.007-.012 3.52-5.549h.016c.02-.082.086-.148.177-.148.092 0 .158.066.178.148h.016L25 17.736l-.02.027c.005.017.02.029.02.047z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/poa-sokol.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#71C8B9" fill-rule="evenodd" d="M30 14.999V30H0V0h30v14.999z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M24.22 20h-6.449c-.089 0-.178-.034-.266-.06l.013.06h-2.781l-.835-3.681H5.437v-.084C5.192 16.197 5 15.959 5 15.66v-4.48h.003c.008-.646.449-1.166.997-1.176V10h15.949c.559 0 1.134.535 1.283 1.194l1.729 7.612c.149.659-.182 1.194-.741 1.194zM9.054 11.84H6.776l.61 2.637h2.279l-.611-2.637zm3.78 0h-2.279l.611 2.637h2.278l-.61-2.637zm6.226 6.841h1.05l-.282-1.308h-1.05l.282 1.308zm2.761-6.841h-4.375l1.175 5.001h4.376l-1.176-5.001zm1.343 5.533h-1.05l.282 1.308h1.05l-.282-1.308zm-17.727-.012h6.907v.011h.772L13.668 20H6.125v-.026c-.038.005-.071.026-.109.026-.514 0-.922-.457-.989-1.042H5v-.798h.086c-.041-.081-.086-.159-.086-.261 0-.297.196-.538.437-.538z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/ropsten-testnet.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#38A9F5" fill-rule="evenodd" d="M30 15v15H15 0V0h30v15z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M20.235 24h1.772l-3.149-4.492a2.452 2.452 0 0 0 1.502-.8 2.26 2.26 0 0 0 .599-1.567V8.367c0-.65-.241-1.207-.724-1.672C19.75 6.23 19.156 6 18.46 6h-6.92c-.703 0-1.292.23-1.775.695-.483.465-.724 1.022-.724 1.672v8.774c0 .603.205 1.131.617 1.583.41.453.905.714 1.484.783L7.993 24h1.772l.303-.431h9.863l.304.431zm-1.054-5.954c-.214.208-.496.314-.831.314-.315 0-.58-.106-.797-.314a1.062 1.062 0 0 1-.328-.801c0-.301.11-.562.328-.783.217-.22.482-.33.797-.33.336 0 .617.111.831.33.217.221.327.482.327.783 0 .326-.11.591-.327.801zm-8.618-9.459c0-.325.109-.591.326-.802.216-.208.494-.312.832-.312h6.556c.339 0 .622.104.852.312.232.211.346.477.346.802v2.808c0 .326-.116.593-.346.802a1.22 1.22 0 0 1-.852.312h-6.558c-.337 0-.615-.104-.831-.312a1.063 1.063 0 0 1-.325-.802V8.587zm.253 9.459a1.058 1.058 0 0 1-.327-.801c0-.301.108-.562.327-.783.219-.22.495-.332.834-.332.312 0 .578.112.797.331.217.222.327.483.327.784 0 .326-.11.591-.328.801a1.113 1.113 0 0 1-.796.314c-.339 0-.615-.106-.834-.314zm.266 4.072l.821-1.18h6.194l.824 1.18h-7.839z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/ropsten.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
-    <path fill="#38A9F5" fill-rule="evenodd" d="M15 0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z"/>
-    <path fill="#FFF" fill-rule="evenodd" d="M24.22 20h-6.449c-.089 0-.178-.034-.266-.06l.013.06h-2.781l-.836-3.687H5.437v-.078c-.245-.038-.437-.277-.437-.579v-4.469h.003c.007-.65.448-1.173.997-1.183V10h15.95c.558 0 1.133.535 1.282 1.194l1.729 7.612c.149.659-.182 1.194-.741 1.194zM9.054 11.84H6.776l.61 2.638h2.279l-.611-2.638zm3.78 0h-2.279l.611 2.638h2.278l-.61-2.638zm6.226 6.841h1.05l-.282-1.308h-1.05l.282 1.308zm2.761-6.841h-4.375l1.175 5.001h4.376l-1.176-5.001zm1.343 5.533h-1.05l.282 1.308h1.05l-.282-1.308zm-17.727.002H11.664v-.003h1.452L13.668 20H6.125v-.026c-.038.005-.071.026-.109.026-.51 0-.914-.452-.987-1.031H5v-.813h.082c-.038-.077-.082-.153-.082-.25 0-.293.196-.531.437-.531z"/>
-</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/rsk-mainnet.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#27AA8B" fill-rule="evenodd" d="M30 14.999V30H0V0h30v14.999z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M23.403 12.767v4.466A2.206 2.206 0 0 1 25 19.354a2.206 2.206 0 0 1-2.197 2.215c-.594 0-1.131-.24-1.526-.626l-4.152 2.41c.029.143.072.28.072.432A2.206 2.206 0 0 1 15 26a2.206 2.206 0 0 1-2.197-2.215c0-.154.043-.294.073-.439l-4.151-2.404a2.178 2.178 0 0 1-1.528.627A2.206 2.206 0 0 1 5 19.354c0-1.012.677-1.856 1.597-2.121v-4.466A2.206 2.206 0 0 1 5 10.646c0-1.224.984-2.215 2.197-2.215.653 0 1.233.292 1.635.748L12.9 6.805a2.234 2.234 0 0 1-.087-.588C12.813 4.993 13.792 4 15 4c1.208 0 2.187.993 2.187 2.217 0 .173-.024.34-.061.502l4.101 2.387c.4-.415.957-.675 1.576-.675 1.213 0 2.197.991 2.197 2.215a2.206 2.206 0 0 1-1.597 2.121zm-.6 7.58a.989.989 0 0 0 .985-.993.99.99 0 0 0-.985-.993.99.99 0 0 0-.985.993c0 .549.441.993.985.993zm-6.239 1.927l4.113-2.388a2.216 2.216 0 0 1-.071-.532c0-.151.016-.298.044-.441l-3.754-2.174a8.367 8.367 0 0 1-1.288 1.661v3.266c.375.109.692.333.956.608zM15 12.632s-1.515 1.253-1.515 2.444c0 .676.485 1.364.907 1.84v-1.377a.608.608 0 1 1 1.216 0v1.377c.422-.476.907-1.164.907-1.84 0-1.191-1.515-2.444-1.515-2.444zm0 12.146a.99.99 0 0 0 .985-.993.989.989 0 0 0-.985-.993.989.989 0 0 0-.985.993.99.99 0 0 0 .985.993zm-1.561-2.506c.264-.274.579-.497.953-.606V18.4a8.513 8.513 0 0 1-1.251-1.598l-3.783 2.196c.019.117.036.234.036.356 0 .185-.029.362-.072.534l4.117 2.384zm-7.227-2.918c0 .549.441.993.985.993a.989.989 0 0 0 .985-.993.99.99 0 0 0-.985-.993.99.99 0 0 0-.985.993zm.985-9.701a.989.989 0 0 0-.985.993.99.99 0 0 0 .985.993.99.99 0 0 0 .985-.993.989.989 0 0 0-.985-.993zm1.528 2.581a2.198 2.198 0 0 1-.912.527v4.479c.4.122.755.346 1.025.655l3.825-2.22a2.572 2.572 0 0 1-.087-.599c0-.188.039-.376.082-.565l-3.933-2.277zm.633-1.946c.019.117.036.235.036.358 0 .185-.029.362-.072.534l3.802 2.201c.378-.65.878-1.223 1.268-1.624V8.335a2.195 2.195 0 0 1-.859-.483l-4.175 2.436zM15 5.069a.99.99 0 0 0-.985.993.99.99 0 0 0 .985.994.99.99 0 0 0 .985-.994.99.99 0 0 0-.985-.993zm5.655 5.116L16.541 7.79a2.186 2.186 0 0 1-.933.547v3.42c.391.401.892.975 1.27 1.626l3.799-2.205a2.223 2.223 0 0 1-.071-.532c0-.158.018-.312.049-.461zm-3.312 4.333c.042.186.081.373.081.558 0 .175-.039.35-.076.525l3.861 2.236c.264-.281.602-.484.978-.597v-4.479a2.194 2.194 0 0 1-.91-.526l-3.934 2.283zm5.46-4.865a.968.968 0 0 0-.825.483l-.089.155a.998.998 0 0 0-.071.355.99.99 0 0 0 .985.993.99.99 0 0 0 .985-.993.989.989 0 0 0-.985-.993z"/>
+</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/sokol.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
-    <path fill="#6EC9B9" fill-rule="evenodd" d="M15 0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z"/>
-    <path fill="#FFF" fill-rule="evenodd" d="M24.22 20h-6.449c-.089 0-.178-.034-.266-.06l.013.06h-2.781l-.836-3.687H5.437v-.078c-.245-.038-.437-.277-.437-.579v-4.469h.003c.007-.65.448-1.173.997-1.183V10h15.95c.558 0 1.133.535 1.282 1.194l1.729 7.612c.149.659-.182 1.194-.741 1.194zM9.054 11.84H6.776l.61 2.637h2.279l-.611-2.637zm3.78 0h-2.279l.611 2.637h2.278l-.61-2.637zm6.226 6.841h1.05l-.282-1.308h-1.05l.282 1.308zm2.761-6.841h-4.375l1.175 5.001h4.376l-1.176-5.001zm1.343 5.533h-1.05l.282 1.308h1.05l-.282-1.308zm-17.727.002H11.664v-.003h1.452L13.668 20H6.125v-.026c-.038.005-.071.026-.109.026-.51 0-.914-.452-.987-1.031H5v-.813h.082c-.038-.077-.082-.153-.082-.25 0-.293.196-.531.437-.531z"/>
-</svg>

apps/block_scout_web/assets/static/images/network-selector-icons/xdai-chain.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
+    <path fill="#12AC97" fill-rule="evenodd" d="M30 14.999V30H0V0h30v14.999z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M17.172 14.999l5.828 7h-4.344v-.001h.775c-.497 0-.926-.228-1.223-.568l-.015.012-2.655-3.188h-.019a.681.681 0 0 0-.519-.246.681.681 0 0 0-.519.246h-.019l-2.655 3.188-.015-.012c-.297.34-.726.568-1.223.568h.775v.001H7l5.828-7-5.828-7h3.569c.497 0 .926.228 1.223.568l.015-.011 2.651 3.184h.019a.682.682 0 0 0 .523.252.682.682 0 0 0 .523-.252h.018l2.652-3.184.015.011c.297-.34.726-.568 1.223-.568H23l-5.828 7z"/>
+</svg>