add warning when opening upgradeable contracts to remix

OpenZeppelin · Nov 14, 2021 · c5c84fa · c5c84fa
1 parent 3386b75
commit c5c84fa
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/packages/ui/src/App.svelte b/packages/ui/src/App.svelte
@@ -16,6 +16,7 @@
     import ForumIcon from './icons/ForumIcon.svelte';
     import Dropdown from './Dropdown.svelte';
     import OverflowMenu from './OverflowMenu.svelte';
+    import Tooltip from './Tooltip.svelte';
 
     import type { KindedOptions, Kind, Contract, OptionsErrorMessages } from '@openzeppelin/wizard';
     import { ContractBuilder, buildGeneric, printContract, printContractVersioned, sanitizeKind, OptionsError } from '@openzeppelin/wizard';
@@ -118,10 +119,15 @@
         Copy to Clipboard
       </button>
 
-      <button class="action-button" on:click={remixHandler}>
-        <RemixIcon />
-        Open in Remix
-      </button>
+      <Tooltip let:trigger theme="light-red border" disabled={!opts?.upgradeable}>
+        <button use:trigger class="action-button" on:click={remixHandler}>
+          <RemixIcon />
+          Open in Remix
+        </button>
+        <span slot="content">
+          Upgradeable contracts are not supported on Remix.
+        </span>
+      </Tooltip>
 
       <Dropdown let:active>
         <button class="action-button" class:active slot="button">

diff --git a/packages/ui/src/Tooltip.svelte b/packages/ui/src/Tooltip.svelte
@@ -1,19 +1,33 @@
 <script lang="ts">
-  import tippy from 'tippy.js';
+  import tippy, { Instance as TippyInstance } from 'tippy.js';
 
   import { onMount } from 'svelte';
 
   export let text = '';
+  export let disabled = false;
 
-  let target: Element;
+  let target: Element | undefined;
   let content: HTMLElement;
+  let instance: TippyInstance | undefined;
 
   const trigger = (node: Element) => { target = node; };
 
   onMount(() => {
-    tippy(target, { ...$$restProps, content });
-    content.style.removeProperty('display');
+    if (target) {
+      instance = tippy(target, { ...$$restProps, content });
+      content.style.removeProperty('display');
+    }
   });
+
+  $: {
+    if (instance) {
+      if (disabled) {
+        instance.disable();
+      } else {
+        instance.enable();
+      }
+    }
+  }
 </script>
 
 <slot {trigger}></slot>