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/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/_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,31 @@
+.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 {
+    input {
+      color: var(--v-info-base) !important;
+    }
+    .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,7 @@
+@import "setup/_typography.min.scss";
+
+@import "basics/_base.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,213 @@
+<template>
+  <div>
+    <v-combobox
+      class="address-select"
+      v-model="addressValue"
+      :items="items"
+      item-text="address"
+      item-value="address"
+      :label="label"
+      :placeholder="placeholder"
+      :menu-props="{ value: autoSelectMenu, closeOnClick: true }"
+      ref="addressInput"
+      return-object
+      outlined
+    >
+      <template v-slot:prepend-inner>
+        <div v-if="!isValidAddress" class="blockie-placeholder"></div>
+        <div v-if="isValidAddress" class="blockie-container">
+          <blockie :address="addressValue" width="30px" height="30px" />
+        </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>
+
+      <template v-slot:item="data">
+        <div class="item-container" @click="selectAddress(data.item)">
+          <div class="address-container">
+            <blockie
+              class="blockie"
+              :address="data.item.address"
+              width="30px"
+              height="30px"
+            />
+            <div class="address">{{ data.item.address }}</div>
+          </div>
+          <div class="nickname">{{ data.item.nickname }}</div>
+        </div>
+      </template>
+    </v-combobox>
+  </div>
+</template>
+
+<script>
+import Blockie from "@/components/Blockie/Blockie.vue";
+
+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() {}
+    }
+  },
+  components: {
+    blockie: Blockie
+  },
+  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);
+    },
+    selectAddress(data) {
+      this.autoSelectMenu = false;
+      this.addressValue = data;
+      this.$emit("emitSelectedValue", data);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.v-application {
+  .item-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    .address-container {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+
+      .blockie {
+        margin-right: 5px;
+      }
+      .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;
+      width: 30px;
+      border-radius: 100px;
+      background-color: var(--v-light-grey-base);
+      margin-bottom: 17px;
+      margin-right: 5px;
+    }
+
+    .blockie-container {
+      margin-bottom: 17px;
+      margin-right: 5px;
+      max-height: 25px;
+    }
+
+    .icon-container {
+      .copy-icon {
+        height: 23px;
+        margin-right: 5px;
+      }
+
+      .save-icon {
+        height: 25px;
+      }
+
+      img {
+        cursor: pointer;
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+    }
+
+    .border {
+      border-right: 1px solid var(--v-light-grey-base);
+      margin: 0 15px;
+    }
+
+    .mdi-chevron-down {
+      margin-right: 5px;
+    }
+  }
+}
+</style>

src/components/Blockie/Blockie.vue

@@ -0,0 +1,78 @@
+<template lang="html">
+  <div ref="identicon" class="address-identicon" />
+</template>
+<script>
+import Blockies from "@/helpers/blockies.js";
+export default {
+  name: "Blockie",
+  props: {
+    address: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: String,
+      default: "64px"
+    },
+    height: {
+      type: String,
+      default: "64px"
+    },
+    size: {
+      type: Number,
+      default: 8
+    },
+    scale: {
+      type: Number,
+      default: 16
+    }
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    address() {
+      this.setBlockie();
+    },
+    width() {
+      this.setBlockie();
+    },
+    height() {
+      this.setBlockie();
+    },
+    scale() {
+      this.setBlockie();
+    },
+    size() {
+      this.setBlockie();
+    }
+  },
+  mounted() {
+    this.setBlockie();
+  },
+  methods: {
+    setBlockie() {
+      console.error('this', this.address)
+      const data = Blockies({
+        seed: this.address ? this.address.toLowerCase() : "",
+        size: this.size,
+        scale: this.scale
+      }).toDataURL();
+      this.$refs.identicon.style.width = this.width;
+      this.$refs.identicon.style.height = this.height;
+      this.$refs.identicon.style.backgroundImage = `url('${data}')`;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.address-identicon {
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 50%;
+  box-shadow: inset rgba(255, 255, 255, 0.25) 0 2px 2px,
+    inset rgba(0, 0, 0, 0.6) 0 -1px 8px;
+  height: 100%;
+  width: 100%;
+}
+</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/App.vue → src/delete/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/helpers/blockies.js

@@ -0,0 +1,99 @@
+const randseed = new Array(4); // Xorshift: [x, y, z, w] 32 bit values
+
+function seedrand(seed) {
+  for (let i = 0; i < randseed.length; i++) {
+    randseed[i] = 0;
+  }
+  for (let j = 0; j < seed.length; j++) {
+    randseed[j % 4] =
+      (randseed[j % 4] << 5) - randseed[j % 4] + seed.charCodeAt(j);
+  }
+}
+
+function rand() {
+  // based on Java's String.hashCode(), expanded to 4 32bit values
+  const t = randseed[0] ^ (randseed[0] << 11);
+
+  randseed[0] = randseed[1];
+  randseed[1] = randseed[2];
+  randseed[2] = randseed[3];
+  randseed[3] = randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8);
+
+  return (randseed[3] >>> 0) / ((1 << 31) >>> 0);
+}
+
+function createColor() {
+  // saturation is the whole color spectrum
+  const h = Math.floor(rand() * 360);
+  // saturation goes from 40 to 100, it avoids greyish colors
+  const s = rand() * 60 + 40 + "%";
+  // lightness can be anything from 0 to 100, but probabilities are a bell curve around 50%
+  const l = (rand() + rand() + rand() + rand()) * 25 + "%";
+
+  const color = "hsl(" + h + "," + s + "," + l + ")";
+  return color;
+}
+
+function createImageData(size) {
+  const width = size; // Only support square icons for now
+  const height = size;
+
+  const dataWidth = Math.ceil(width / 2);
+  const mirrorWidth = width - dataWidth;
+
+  const data = [];
+  for (let y = 0; y < height; y++) {
+    let row = [];
+    for (let x = 0; x < dataWidth; x++) {
+      // this makes foreground and background color to have a 43% (1/2.3) probability
+      // spot color has 13% chance
+      row[x] = Math.floor(rand() * 2.3);
+    }
+    const r = row.slice(0, mirrorWidth);
+    r.reverse();
+    row = row.concat(r);
+
+    for (let i = 0; i < row.length; i++) {
+      data.push(row[i]);
+    }
+  }
+
+  return data;
+}
+
+function createCanvas(imageData, color, scale, bgcolor, spotcolor) {
+  const width = Math.sqrt(imageData.length);
+  const c = document.createElement("canvas");
+  c.width = c.height = width * scale;
+  const cc = c.getContext("2d");
+  cc.fillStyle = bgcolor;
+  cc.fillRect(0, 0, c.width, c.height);
+  cc.fillStyle = color;
+
+  for (let i = 0; i < imageData.length; i++) {
+    const row = Math.floor(i / width);
+    const col = i % width;
+    cc.fillStyle = imageData[i] === 1 ? color : spotcolor;
+    if (imageData[i]) {
+      cc.fillRect(col * scale, row * scale, scale, scale);
+    }
+  }
+  return c;
+}
+
+function createIcon(opts) {
+  opts = opts || {};
+  const size = opts.size || 8;
+  const scale = opts.scale || 4;
+  const seed =
+    opts.seed || Math.floor(Math.random() * Math.pow(10, 16)).toString(16);
+  seedrand(seed);
+  const color = opts.color || createColor();
+  const bgcolor = opts.bgcolor || createColor();
+  const spotcolor = opts.spotcolor || createColor();
+  const imageData = createImageData(size);
+  const canvas = createCanvas(imageData, color, scale, bgcolor, spotcolor);
+
+  return canvas;
+}
+export default createIcon;

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,50 @@
+import { withKnobs, text, array, boolean } from "@storybook/addon-knobs";
+import mewAddressSelector from "@/components/AddressSelect/AddressSelect.vue";
+
+export default {
+  title: "AddressSelector",
+  parameters: {
+    component: AddressSelector
+  },
+  decorators: [withKnobs]
+};
+
+const addressesArray = [
+  {
+    address: "0xDECAF9CD2367cdbb726E904cD6397eDFcAe6068D",
+    currency: "ETH",
+    nickname: "nickname",
+    resolverAddr: "0xDECAF9CD2367cdbb726E904cD6397eDFcAe6068D"
+  }
+];
+
+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")
+    },
+    isValidAddress: {
+      default: boolean("is-valid-address", false)
+    }
+  },
+  template: `
+    <div>
+    <br />
+    <address-selector @emitSelectedValue="getSelectedValue" :is-valid-address="isValidAddress" :label="label" :items="items">
+      <template v-slot:blockie>
+      </template>
+    </address-selector>
+  </div>`,
+  methods: {
+    getSelectedValue(value) {
+      console.log("selected value:", value);
+    }
+  }
+});