Updates

package.json

@@ -28,6 +28,7 @@
     "git-url-parse": "^11.1.2",
     "material-design-icons-iconfont": "^5.0.1",
     "vue": "^2.6.10",
+    "vue-cli-plugin-style-resources-loader": "^0.1.4",
     "vue-router": "^3.0.3",
     "vuetify": "^2.0.0",
     "vuex": "^3.0.1"

src/App.vue

@@ -23,7 +23,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/global.scss";
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
 
 * {

src/assets/styles/basics/_button.scss

@@ -0,0 +1,14 @@
+.v-application {
+  .v-btn {
+    height: 100% !important;
+    width: 100%;
+  }
+
+  .disabled-btn {
+    pointer-events: none;
+
+    .icon {
+      filter: grayscale(100%);
+    }
+  }
+}

src/assets/styles/basics/_input.scss

@@ -0,0 +1,28 @@
+.v-application,
+.v-application--is-ltr {
+
+  .theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot fieldset {
+    color: var(--v-light-grey-base) !important;
+  }
+
+  .v-input {
+    .v-label {
+      color: var(--v-input-label-base);
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+
+    input::placeholder {
+      color: var(--v-input-placeholder-base);
+    }
+    .v-text-field__suffix {
+      color: var(--v-input-placeholder-base) !important;
+    }
+
+    .mdi-chevron-down {
+      color: var(--v-basic-base);
+      cursor: pointer;
+      font-size: 20px;
+    }
+  }
+}

src/assets/styles/global.scss

@@ -0,0 +1,6 @@
+@import "setup/_typography.min.scss";
+
+@import "basics/_input.scss";
+@import "basics/_button.scss";
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

src/components/AddressSelect/AddressSelect.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <v-combobox
+      class="address-select"
+      v-model="addressValue"
+      :items="items"
+      :label="label"
+      :placeholder="placeholder"
+      :menu-props="{ value: autoSelectMenu }"
+      ref="addressInput"
+      outlined
+    >
+      <template v-slot:prepend-inner>
+        <div v-if="!isValidAddress" class="blockie-placeholder"></div>
+        <div v-if="isValidAddress" class="blockie-container">
+          <slot name="blockie" />
+        </div>
+      </template>
+
+      <template v-slot:append>
+        <div class="icon-container">
+          <img
+            @click="copyToClipboard"
+            class="copy-icon"
+            src="@/assets/images/icons/icon-copy-enable.png"
+            alt="copy"
+          />
+          <img
+            @click="saveAddress"
+            class="save-icon"
+            src="@/assets/images/icons/icon-saved-enable.png"
+            alt="save"
+          />
+        </div>
+        <div class="border" />
+        <v-icon @click="toggle">mdi-chevron-down</v-icon>
+      </template>
+    </v-combobox>
+  </div>
+</template>
+<script>
+export default {
+  name: "AddressSelector",
+  props: {
+    /**
+     * Returns if the address is valid or not.
+     */
+    isValidAddress: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The input label.
+     */
+    label: {
+      type: String,
+      default: "To Address"
+    },
+    /**
+     * The saved addresses in address book.
+     */
+    items: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    /**
+     * The input placeholder.
+     */
+    placeholder: {
+      type: String,
+      default: "Please enter an address"
+    },
+    /**
+     * The function applied to save the address.
+     */
+    saveAddress: {
+      type: Function,
+      default: function() {}
+    }
+  },
+  data() {
+    return {
+      addressValue: "",
+      autoSelectMenu: false
+    };
+  },
+  watch: {
+    inputValue(newValue) {
+      console.log("input value:", newValue);
+    }
+  },
+  mounted() {
+    this.addressValue = this.value;
+  },
+  methods: {
+    toggle() {
+      this.autoSelectMenu = !this.autoSelectMenu;
+    },
+    copyToClipboard() {
+      this.$refs.addressInput.$el.querySelector("input").select();
+      document.execCommand("copy");
+      console.log("copied");
+      // Toast.responseHandler(this.$t('common.copied'), Toast.INFO);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.v-application {
+  .address-select {
+    .blockie-placeholder {
+      height: 30px;
+      width: 30px;
+      border-radius: 100px;
+      background-color: var(--v-light-grey-base);
+      margin-bottom: 17px;
+      margin-right: 5px;
+    }
+
+    .blockie-container {
+      max-height: 25px;
+    }
+
+    .icon-container {
+      .copy-icon {
+        height: 23px;
+        margin-right: 5px;
+      }
+
+      .save-icon {
+        height: 25px;
+      }
+
+      img {
+        cursor: pointer;
+      }
+    }
+
+    .border {
+      border-right: 1px solid var(--v-light-grey-base);
+      margin: 0 15px;
+    }
+
+    .mdi-chevron-down {
+      margin-right: 5px;
+    }
+  }
+}
+</style>

src/components/MewButton/MewButton.vue

@@ -108,7 +108,7 @@ export default {
       }
 
       if (this.disabled) {
-        classes.push("disabled-theme");
+        classes.push("disabled-btn");
       }
 
       if (
@@ -135,14 +135,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
-
 .v-application {
   .v-btn {
     border-radius: 6px !important;
     padding: 20px;
-    height: 100%;
-    width: 100%;
 
     .icon {
       height: 27px;
@@ -161,14 +157,6 @@ export default {
     background-color: var(--v-white-base) !important;
   }
 
-  .disabled-theme {
-    pointer-events: none;
-
-    .icon {
-      filter: grayscale(100%);
-    }
-  }
-
   .theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
     color: var(--v-white-base) !important;
   }

src/components/MewInput/MewInput.vue

@@ -114,29 +114,8 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.v-application,
-.v-application--is-ltr {
-  .theme--light.v-label {
-    color: var(--v-input-label-base);
-    font-weight: 500;
-    text-transform: capitalize;
-  }
-
-  .v-input {
-    input::placeholder {
-      color: var(--v-input-placeholder-base);
-    }
-
-    .v-text-field__suffix {
-      color: var(--v-input-placeholder-base) !important;
-    }
-
-    .v-text-field--outlined fieldset:before {
-      border: 1px solid var(--v-form-base);
-    }
-  }
-
+<style lang="scss" scoped>
+.v-application {
   .search-input {
     fieldset {
       background-color: var(--v-primary-silver-base);

src/components/MewSelect/MewSelect.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <v-select
+      class="mew-select"
       color="basic"
       append-icon="mdi-chevron-down"
       :disabled="disabled"
@@ -11,7 +12,7 @@
       v-model="selectModel"
       outlined
     >
-      <template slot="item" slot-scope="data">
+      <template v-slot:item="data">
         <img class="item-img" v-if="data.item.img" :src="data.item.img" />{{
           data.item.name ? data.item.name : data.item
         }}
@@ -72,27 +73,13 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .v-application {
-  .theme--light.v-label {
-    color: var(--v-input-label-base);
-    font-weight: 500;
-    text-transform: capitalize;
-  }
-
-  .v-input {
-    input::placeholder {
-      color: var(--v-input-placeholder-base);
+  .mew-select {
+    .item-img {
+      margin-right: 5px;
+      max-height: 25px;
     }
   }
-
-  .v-text-field--outlined fieldset:before {
-    border: 1px solid var(--v-form-base);
-  }
-
-  .item-img {
-    margin-right: 5px;
-    max-height: 25px;
-  }
 }
 </style>

src/components/MewSuperButton/MewSuperButton.vue

@@ -16,7 +16,7 @@
             <div class="body-2" v-if="titleIcon">
               <img
                 v-if="titleIcon"
-                class="title-icon"
+                class="icon title-icon"
                 :src="titleIcon"
                 alt="Icon"
               />
@@ -35,7 +35,7 @@
           </div>
           <img
             v-if="rightIcon"
-            class="right-icon"
+            class="icon right-icon"
             :src="rightIcon"
             alt="Icon"
           />
@@ -119,7 +119,7 @@ export default {
       }
 
       if (this.disabled) {
-        classes.push("disabled");
+        classes.push("disabled-btn");
       }
 
       if (this.active && !this.disabled) {
@@ -136,21 +136,10 @@ export default {
 .v-application {
   .v-btn {
     border-radius: 12px;
-    height: 100% !important;
-    width: 100%;
   }
 
-  .disabled {
+  .disabled-btn {
     color: var(--v-disabled-super-base) !important;
-    pointer-events: none;
-
-    .right-icon {
-      filter: grayscale(100%);
-    }
-
-    .title-icon {
-      filter: grayscale(100%);
-    }
   }
 
   .green-border {

src/main.js

@@ -1,5 +1,4 @@
 import Vue from "vue";
-import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import vuetify from "./plugins/vuetify";

src/plugins/vuetify.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
+import "@/assets/styles/global.scss";
 
 import Vuetify, {
   VApp,
@@ -27,7 +28,8 @@ import Vuetify, {
   VToolbar,
   VTextField,
   VLayout,
-  VSelect
+  VSelect,
+  VCombobox
 } from "vuetify/lib";
 
 Vue.use(Vuetify, {
@@ -57,7 +59,8 @@ Vue.use(Vuetify, {
     VToolbar,
     VTextField,
     VLayout,
-    VSelect
+    VSelect,
+    VCombobox
   }
 });
 
@@ -99,7 +102,6 @@ export default new Vuetify({
         "dark-blue": "#184f90",
         "light-grey": "#e0e0e0",
         "input-label": "#6d89a6",
-        form: "#cecece",
         "input-placeholder": "#96a8b6",
         "select-border": "#a3b7cf",
         "primary-hover": "#0BAA93",

stories/AddressSelector/AddressSelector.stories.js

@@ -0,0 +1,42 @@
+import {
+  withKnobs,
+  text,
+  array,
+  files
+} from "@storybook/addon-knobs";
+import mewAddressSelector from "@/components/AddressSelect/AddressSelect.vue";
+
+export default {
+  title: "AddressSelector",
+  parameters: {
+    component: AddressSelector
+  },
+  decorators: [withKnobs]
+};
+
+const addressesArray = [
+  "Hello"
+]
+
+export const AddressSelector = () => ({
+  components: { "address-selector": mewAddressSelector },
+  props: {
+    label: {
+      default: text("label", "To Address")
+    },
+    items: {
+      default: array("addresses", addressesArray)
+    },
+    placeholder: {
+      default: text("placeholder", "Please enter an address")
+    }
+  },
+  template: `
+    <div>
+    <br />
+    <address-selector :label="label" :items="items">
+      <template v-slot:blockie>
+      </template>
+    </address-selector>
+  </div>`
+});

vue.config.js

@@ -0,0 +1,10 @@
+const path = require("path");
+
+module.exports = {
+  pluginOptions: {
+    "style-resources-loader": {
+      preProcessor: "scss",
+      patterns: [path.resolve(__dirname, "./src/styles/global.scss")]
+    }
+  }
+};