Better input error UI (#557)

Co-authored-by: Eric Lau <[email protected]>

Author: CoveMB

packages/ui/src/common/error-tooltip.ts

@@ -2,45 +2,30 @@ import tippy from 'tippy.js';
 
 const klass = 'has-error';
 
-export function error(node: HTMLElement, content?: string) {
-  let shown = false;
-
+export function error(node: HTMLElement, initialError?: string) {
   const t = tippy(node, {
     placement: 'right',
     theme: 'light-red border',
-    showOnCreate: false,
-    onShow: () => {
-      shown = true;
-    },
+    trigger: 'manual',
+    hideOnClick: false,
+    interactive: true,
   });
 
-  t.disable();
-  update(content);
-
-  function update(content?: string) {
-    if (content) {
-      t.setContent(content);
-
-      if (!t.state.isEnabled) {
-        shown = false;
-        t.enable();
-        if (document.activeElement !== node) {
-          t.show();
-        } else {
-          setTimeout(() => {
-            if (!shown) {
-              t.show();
-            }
-          }, 1000);
-        }
-      }
-
+  function update(newError?: string) {
+    if (newError) {
+      t.setContent(newError);
+      t.show();
       node.classList.add(klass);
     } else {
-      t.disable();
+      t.hide();
       node.classList.remove(klass);
     }
   }
 
-  return { update };
+  update(initialError);
+
+  return {
+    update,
+    destroy: t.destroy,
+  };
 }

packages/ui/src/solidity/StablecoinControls.svelte

@@ -7,7 +7,6 @@
   import AccessControlSection from './AccessControlSection.svelte';
   import InfoSection from './InfoSection.svelte';
   import ExpandableToggleRadio from '../common/ExpandableToggleRadio.svelte';
-  import ToggleRadio from '../common/inputs/ToggleRadio.svelte';
   import OPIcon from '../common/icons/OPIcon.svelte';
   import { error } from '../common/error-tooltip';
   import { resizeToFit } from '../common/resize-to-fit';