Updates

src/assets/styles/basics/_base.scss

@@ -0,0 +1,8 @@
+* {
+  color: var(--v-info-base);
+}
+
+html,
+body {
+  font-family: "Roboto", sans-serif;
+}

src/assets/styles/basics/_input.scss

@@ -6,6 +6,9 @@
   }
 
   .v-input {
+    input {
+      color: var(--v-info-base) !important;
+    }
     .v-label {
       color: var(--v-input-label-base);
       font-weight: 500;

src/assets/styles/global.scss

@@ -1,5 +1,6 @@
 @import "setup/_typography.min.scss";
 
+@import "basics/_base.scss";
 @import "basics/_input.scss";
 @import "basics/_button.scss";
 

src/components/AddressSelect/AddressSelect.vue

@@ -4,9 +4,11 @@
       class="address-select"
       v-model="addressValue"
       :items="items"
+      item-text="address"
+      item-value="address"
       :label="label"
       :placeholder="placeholder"
-      :menu-props="{ value: autoSelectMenu }"
+      :menu-props="{ value: autoSelectMenu, closeOnClick: true }"
       ref="addressInput"
       outlined
     >
@@ -35,6 +37,15 @@
         <div class="border" />
         <v-icon @click="toggle">mdi-chevron-down</v-icon>
       </template>
+
+      <template v-slot:item="data">
+        <div class="item-container" @click="selectAddress(data.item)">
+          <div class="address-container">
+            <div class="address">{{ data.item.address }}</div>
+          </div>
+          <div class="nickname">{{ data.item.nickname }}</div>
+        </div>
+      </template>
     </v-combobox>
   </div>
 </template>
@@ -103,13 +114,38 @@ export default {
       document.execCommand("copy");
       console.log("copied");
       // Toast.responseHandler(this.$t('common.copied'), Toast.INFO);
+    },
+    selectAddress(data) {
+      this.autoSelectMenu = false;
+      this.addressValue = data.address;
+      console.error('addr', this.addressValue)
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .v-application {
+  .item-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    .address-container {
+      .address {
+        color: var(--v-basic-base);
+      }
+    }
+
+    .nickname {
+      font-size: 10px;
+      font-weight: 700;
+      text-align: right;
+      color: var(--v-primary-base);
+    }
+  }
+
   .address-select {
     .blockie-placeholder {
       height: 30px;
@@ -136,6 +172,9 @@ export default {
 
       img {
         cursor: pointer;
+        &:hover {
+          opacity: 0.5;
+        }
       }
     }
 

stories/AddressSelector/AddressSelector.stories.js

@@ -1,9 +1,4 @@
-import {
-  withKnobs,
-  text,
-  array,
-  files
-} from "@storybook/addon-knobs";
+import { withKnobs, text, array } from "@storybook/addon-knobs";
 import mewAddressSelector from "@/components/AddressSelect/AddressSelect.vue";
 
 export default {
@@ -15,8 +10,13 @@ export default {
 };
 
 const addressesArray = [
-  "Hello"
-]
+  {
+    address: "123",
+    currency: "ETH",
+    nickname: "nickname",
+    resolverAddr: "123"
+  }
+];
 
 export const AddressSelector = () => ({
   components: { "address-selector": mewAddressSelector },