Added search in chooser

src/components/Search.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="search">
+        <input type="text" class="input" v-model="query" :placeholder="$t('message.search_placeholder')" @input="setEvent()">
+
+        <svg class="icon"><use xlink:href="@/assets/sprite.svg#ic_search"></use></svg>
+    </div>
+</template>
+
+
+<script setup>
+    import { ref, inject } from 'vue'
+
+
+    const emitter = inject('emitter'),
+        query = ref('')
+
+
+    // Set event
+    function setEvent() {
+        emitter.emit('search', { query: query.value })
+    }
+</script>

src/components/ibc_recovery/ChooseNetwork.vue

@@ -14,8 +14,11 @@
 
 
         <div class="mini_modal" v-show="showDropdown">
-            <div class="scroll">
-                <div v-for="(network, index) in networks" :key="index"
+            <!-- Search -->
+            <Search />
+
+            <div class="scroll" v-if="searchResult.length">
+                <div v-for="(network, index) in searchResult" :key="index"
                     :class="{ favorited: store.IBCRecoveryFavorites[network.chain_id] }"
                 >
                     <button class="network" :class="{ active: currentNetwork.chain_id == network.chain_id }" @click.prevent="setCurrentNetwork(index)">
@@ -35,6 +38,10 @@
                     </button>
                 </div>
             </div>
+
+            <div class="empty" v-else>
+                {{ $t('message.search_empty') }}
+            </div>
         </div>
     </div>
 </template>
@@ -47,14 +54,18 @@
     import { getNetworkLogo } from '@/utils'
     import { chains } from 'chain-registry'
 
+    // Components
+    import Search from '@/components/Search.vue'
+
 
     const store = useGlobalStore(),
         emitter = inject('emitter'),
         networks = ref([]),
         currentNetwork = ref({}),
         loading = ref(true),
         showDropdown = ref(false),
-        target = ref(null)
+        target = ref(null),
+        searchResult = ref(null)
 
 
     onBeforeMount(async () => {
@@ -80,6 +91,9 @@
             })
         })
 
+        // Default search result
+        searchResult.value = networks.value
+
         // Set current network
         setCurrentNetwork(0)
 
@@ -107,6 +121,20 @@
     }
 
 
+    // Event "search"
+    emitter.on('search', ({ query }) => {
+        // Clear search result
+        searchResult.value = []
+
+        // Set new result
+        networks.value.forEach(network => {
+            if (network.pretty_name.toLocaleLowerCase().includes(query.toLocaleLowerCase())) {
+                searchResult.value.push(network)
+            }
+        })
+    })
+
+
     // Click outside
     onClickOutside(target, e => showDropdown.value = false)
 </script>
@@ -244,43 +272,138 @@
     }
 
 
-    .choose_network .mini_modal .scroll
+    .choose_network .search
+    {
+        position: relative;
+
+        margin-bottom: 10px;
+    }
+
+
+    .choose_network .search ::-webkit-input-placeholder
+    {
+        color: rgba(255, 255, 255, .40);
+    }
+
+    .choose_network .search :-moz-placeholder
+    {
+        color: rgba(255, 255, 255, .40);
+    }
+
+    .choose_network .search ::-moz-placeholder
+    {
+        opacity: 1;
+        color: rgba(255, 255, 255, .40);
+    }
+
+    .choose_network .search :-ms-input-placeholder
+    {
+        color: rgba(255, 255, 255, .40);
+    }
+
+
+    .choose_network .search .input
+    {
+        font-family: var(--font_family);
+        font-size: 16px;
+        font-size: var(--font_size);
+        font-weight: 600;
+
+        display: block;
+
+        width: 100%;
+        height: 29px;
+        padding: 0 39px 0 14px;
+
+        transition: .2s linear;
+
+        color: var(--text_color);
+        border: 1px solid #7544ff;
+        border-radius: 20px;
+        background: rgba(215, 171, 255, .40);
+    }
+
+
+    .choose_network .search .icon
+    {
+        position: absolute;
+        z-index: 3;
+        top: 0;
+        right: 10px;
+        bottom: 0;
+
+        display: block;
+
+        width: 18px;
+        height: 19px;
+        margin: auto 0;
+
+        transition: opacity .2s linear;
+        pointer-events: none;
+
+        opacity: .4;
+    }
+
+
+    .choose_network .search .input:focus
+    {
+        background: rgba(0, 0, 0, .40);
+    }
+
+    .choose_network .search .input:focus .icon
+    {
+        opacity: 1;
+    }
+
+
+    .choose_network .empty
+    {
+        font-size: 16px;
+        font-weight: 500;
+        font-style: normal;
+        line-height: 120%;
+
+        padding: 24px 20px;
+
+        color: rgba(255,255,255,.4);
+        border-radius: 20px;
+        background: #141414;
+    }
+
+
+    .choose_network .scroll
     {
         display: flex;
         overflow: auto;
         flex-direction: column;
 
         max-height: 345px;
-        padding: 10px;
+        padding: 5px 10px 10px;
 
         border-radius: 20px;
         background: #141414;
 
         overscroll-behavior-y: contain;
     }
 
-    .choose_network .mini_modal .scroll::-webkit-scrollbar
+    .choose_network .scroll::-webkit-scrollbar
     {
         width: 4px;
         height: 4px;
     }
 
 
-    .choose_network .mini_modal .scroll > *
+    .choose_network .scroll > *
     {
         order: 3;
+        margin-top: 5px;
     }
 
-    .choose_network .mini_modal .scroll > *.favorited
+    .choose_network .scroll > *.favorited
     {
         order: 1;
     }
 
-    .choose_network .mini_modal .scroll > * + *
-    {
-        margin-top: 5px;
-    }
-
 
     .choose_network .network
     {