feat(styling): added pentagon, updated chain icon to use local icons

Author: Kahnix

chains/mainnet/chain.json

@@ -33,15 +33,15 @@
     "coin_type": "118",
     "min_tx_fee": "800",
     "addr_prefix": "cosmos",
-    "logo": "/logos/cosmos.svg",
+    "logo": "/logo.svg",
     "theme_color": "#6e6e6e",
     "assets": [
         {
             "base": "uatom",
             "symbol": "ATOM",
             "exponent": "6",
             "coingecko_id": "cosmos",
-            "logo": "/logos/cosmos.svg"
+            "logo": "/logo.svg"
         }
     ]
-}
+}

src/assets/pentagon.svg

@@ -15,7 +15,10 @@ function changeEndpoint(item: Endpoint) {
   <div class="dropdown">
     <label tabindex="0" class="flex items-center">
       <div class="p-1 relative mr-3 cursor-pointer">
-        <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
+        <div class="relative">
+          <img src='../../assets/pentagon.svg' class="w-9 scale-[1.3] absolute h-9 rounded-full" />
+          <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
+        </div>
         <div class="w-2 h-2 rounded-full absolute right-0 bottom-0 shadow" :class="{
           'bg-success': baseStore.connected,
           'bg-error': !baseStore.connected
@@ -38,13 +41,13 @@ function changeEndpoint(item: Endpoint) {
         </div>
       </div>
     </label>
-    <div tabindex="0" class="dropdown-content -left-6 w-80 menu shadow bg-vector-bg rounded-box overflow-auto">
+    <div tabindex="0" class="dropdown-content -left-6 w-80 menu shadow bg-[#212121]  rounded-box overflow-auto">
       <!-- rest -->
       <div class="px-4 py-2 text-sm text-gray-200" v-if="chainStore.current?.endpoints?.rest">
         Rest Endpoint
       </div>
       <div v-for="(item, index) in chainStore.current?.endpoints?.rest"
-        class="px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-[#212121] cursor-pointer" :key="index"
+        class="px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-[#121212a4] cursor-pointer" :key="index"
         @click="changeEndpoint(item)">
         <div class="flex flex-col">
           <div class="flex items-center justify-between w-full">

src/layouts/components/ChainProfile.vue

@@ -61,7 +61,7 @@ function handleKeyPress(event: KeyboardEvent) {
       </h1>
       <div class="w-full max-w-[600px]">
         <div class="flex w-full max-w-[600px]">
-          <input class="input flex-1 w-full !input-bordered !rounded-r-none" @keypress="handleKeyPress"
+          <input class="input text-center flex-1 w-full !input-bordered !rounded-r-none" @keypress="handleKeyPress"
             v-model="searchQuery" autofocus placeholder="Search for Height/Transaction/Account Address" />
           <div class="">
             <button class=" btn !rounded-l-none btn-primary" @click="confirm">

src/pages/index.vue

@@ -185,7 +185,7 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
     }
   }
   conf.features = lc.features
-  conf.logo = lc.logo.startsWith('http') ? lc.logo : `https://ping.pub${lc.logo}`;
+  conf.logo = lc.logo;
   conf.keplrFeatures = lc.keplr_features;
   conf.keplrPriceStep = lc.keplr_price_step;
   conf.themeColor = lc.theme_color;