devop: add loading state

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.4.7
+
+- add loading state to max button [#344](https://github.com/MyEtherWallet/mew-components/pull/344)
+
 ### 1.4.6
 
 - fix error on console for color code [#343](https://github.com/MyEtherWallet/mew-components/pull/343)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myetherwallet/mew-components",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "MEW Components",
   "main": "dist/mew-components.umd.js",
   "module": "dist/mew-components.esm.js",

src/components/MewInput/MewInput.vue

@@ -94,13 +94,14 @@
           maxBtnObj.disabled
             ? 'disabled--text no-pointer-events'
             : 'textDarkWhite--text',
-          'rounded-lg mt-n2 mew-caption font-weight-medium'
+          'rounded-lg mt-n2 mew-caption font-weight-medium',
         ]"
         min-width="40"
         min-height="40"
         height="40"
         width="40"
         depressed
+        :loading="maxBtnObj.loading"
         color="maxButton"
         @click="maxBtnObj.method"
       >
@@ -120,85 +121,85 @@ export default {
   name: 'MewInput',
   components: {
     MewBlockie,
-    MewTokenContainer
+    MewTokenContainer,
   },
   props: {
     /**
      * Error messages to display at the bottom of the input.
      */
     errorMessages: {
       type: [String, Array],
-      default: ''
+      default: '',
     },
     /**
      * Input becomes read only.
      */
     isReadOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Prepends the blockie to the beginning of the input.
      */
     showBlockie: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Removes the input border and adds a box shadow.
      */
     hasNoBorder: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Disables the input.
      */
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * The input label.
      */
     label: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * The input placeholder.
      */
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * The input value.
      */
     value: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * The input id.
      */
     id: {
       type: Number,
-      default: null
+      default: null,
     },
     /**
      * Displays text on the right inner side of the input.
      */
     rightLabel: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * Hides input clear functionality. Clear symbol will be displayed on the right side.
      */
     hideClearBtn: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * For validating your input - accepts an array of functions that take an input value as an argument and returns either true / false
@@ -208,81 +209,81 @@ export default {
       type: Array,
       default: () => {
         return [];
-      }
+      },
     },
     /**
      * The resolved address.
      */
     resolvedAddr: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * Enables persistent hint.
      */
     persistentHint: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Hint text (will be displayed at the bottom of the input).
      */
     hint: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * Sets input type.
      */
     type: {
       type: String,
-      default: 'text'
+      default: 'text',
     },
     /**
      * Prepends an image to the beginning of the input.
      */
     image: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * Adds a "Buy more" string to the end of the first index of the errorMessages prop.
      */
     buyMoreStr: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * Displays a button to the right inner side of the input.
      * Takes an object.
-     * i.e. {title: 'Max', disabled: false, method: () => {}}.
+     * i.e. {title: 'Max', disabled: false, method: () => {}, loading: false}.
      */
     maxBtnObj: {
       type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     /**
      * Autofocuses the input.
      */
     autofocus: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Hides the toggle show password icon on the right
      * when input type is password.
      */
     hidePasswordIcon: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       inputValue: '',
-      showPassword: false
+      showPassword: false,
     };
   },
   computed: {
@@ -300,7 +301,7 @@ export default {
         return types[1];
       }
       return this.type;
-    }
+    },
   },
   watch: {
     inputValue(newVal, oldVal) {
@@ -312,7 +313,7 @@ export default {
       if (newVal !== oldVal) {
         this.inputValue = newVal;
       }
-    }
+    },
   },
   mounted() {
     this.inputValue = this.value;
@@ -328,13 +329,13 @@ export default {
     },
     /*eslint-disable */
     clear(val) {
-      this.inputValue = val ? val : '';
+      this.inputValue = val ? val : "";
     },
     /*eslint-enable */
     preventCharE(e) {
       if (this.type === 'number' && e.key === 'e') e.preventDefault();
-    }
-  }
+    },
+  },
 };
 </script>
 

stories/MewInput/MewInput.stories.js

@@ -17,8 +17,8 @@ export default {
     component: MewInput,
     docs: {
       page: MewInputDoc,
-      inlineStories: true
-    }
+      inlineStories: true,
+    },
   },
   decorators: [withKnobs],
 };
@@ -46,6 +46,7 @@ const maxBtnObj = {
   title: 'Max',
   disabled: false,
   method: onClick,
+  loading: false,
 };
 
 function onClick() {
@@ -119,8 +120,8 @@ export const MEWInput = () => ({
       default: object('max-btn-obj', maxBtnObj),
     },
     hidePasswordIcon: {
-      default: boolean('hide-password-icon', false)
-    }
+      default: boolean('hide-password-icon', false),
+    },
   },
   watch: {
     enableDarkMode(newVal) {