@stellar-expert/ui-framework 1.14.10 → 1.14.12

package/controls/button.js

@@ -60,6 +60,10 @@ Button.propTypes = {
      * Whether the button is currently disabled
      */
     disabled: PropTypes.bool,
+    /**
+     * Show loading animation on the button
+     */
+    loading: PropTypes.bool,
     /**
      * Externally provided CSS classes
      */

package/controls/button.scss

@@ -60,6 +60,7 @@ button {
 
   &:hover {
     color: var(--color-bg);
+
     &:before {
       background: var(--color-primary);
       border-color: var(--color-primary);
@@ -112,6 +113,7 @@ button {
       &:hover {
         color: var(--color-highlight);
       }
+
       &:before {
         background: var(--color-bg);
         border-color: var(--color-highlight);
@@ -136,7 +138,7 @@ button {
     }
   }
 
-  .loading:after {
+  &.loading:after {
     content: "";
     display: block;
     position: absolute;
@@ -149,17 +151,17 @@ button {
     transform: skew(-20deg) translateX(0);
     animation: loading-button 3s infinite ease-in-out;
   }
+}
 
-  @keyframes loading-button {
-    0% {
-      left: 0;
-    }
-    50% {
-      left: 80%;
-    }
-    100% {
-      left: 0;
-    }
+@keyframes loading-button {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 80%;
+  }
+  100% {
+    left: 0;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.14.10",
+  "version": "1.14.12",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",

package/tx/op-description-view.js

@@ -407,7 +407,7 @@ function ManageDataDescriptionView({op, compact}) {
     const {name, value, effects} = op.operation
     const dataEntryDesc = <span className="word-break condensed text-small">
         <code>"{name}"</code>
-        {!!value && <> = <code>"{value}"</code></>}
+        {!!value && <> = <code>"{value.toString()}"</code></>}
     </span>
 
     if (op.isEphemeral) {