From 3739a3244878aa285e1ffde383c154c7408ee229 Mon Sep 17 00:00:00 2001
From: Danil Kovtonyuk <danx.kov@gmail.com>
Date: Thu, 5 Nov 2020 17:47:03 +1000
Subject: [PATCH] add tooltips to deploy button

add waiting state
---
 assets/styles/components/_step.scss |  5 +++-
 components/Diamond.vue              | 18 +++++++-----
 components/Step.vue                 | 44 ++++++++++++++++++++---------
 langs/en.json                       |  4 ++-
 package.json                        |  2 +-
 yarn.lock                           | 28 +++++++++---------
 6 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/assets/styles/components/_step.scss b/assets/styles/components/_step.scss
index 08ccca0..fd1da25 100644
--- a/assets/styles/components/_step.scss
+++ b/assets/styles/components/_step.scss
@@ -40,12 +40,15 @@
       @include until(576px) {
         font-size: 0.9rem;
       }
+
+      + .deployed {
+        margin-top: .25rem;
+      }
     }
 
     .deployed {
       font-size: 0.813rem;
       color: #6B6B6B;
-      margin-top: .25rem;
       text-overflow: ellipsis;
       overflow: hidden;
     }
diff --git a/components/Diamond.vue b/components/Diamond.vue
index ec8dde7..93612d6 100644
--- a/components/Diamond.vue
+++ b/components/Diamond.vue
@@ -12,24 +12,24 @@
       cy="30"
       r="29.5"
       fill="#111111"
-      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+      :stroke="waiting ? '#FFB950' : active ? '#44F1A6' : '#3F3F3F'"
     />
     <circle
       cx="30"
       cy="30"
       r="23.5"
-      :fill="active ? '#276C4E' : '#191919'"
-      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+      :fill="waiting ? '#674B21' : active ? '#276C4E' : '#191919'"
+      :stroke="waiting ? '#FFB950' : active ? '#44F1A6' : '#3F3F3F'"
     />
     <path
       d="M34.5801 15.893C34.6485 16.9078 34.4722 17.4907 34.1736 17.886C33.8637 18.2962 33.3621 18.5882 32.5885 18.8921C32.2511 19.0247 31.8702 19.1558 31.4515 19.3C29.9916 19.8026 28.0728 20.4631 25.94 21.8938C23.8639 23.2864 22.4643 25.0309 21.3363 26.4369C20.9682 26.8958 20.6291 27.3186 20.3047 27.6813C19.6245 28.4421 19.0358 28.9193 18.3942 29.0845C17.777 29.2435 17.0037 29.1381 15.8951 28.4718C13.8305 27.2309 13.4688 24.7439 14.399 21.9281C15.3227 19.1318 17.4754 16.2282 20.0662 14.4904C22.6546 12.7541 26.2741 11.849 29.2741 12.0493C30.7723 12.1494 32.0721 12.5223 33.0055 13.1619C33.9217 13.7898 34.4985 14.6808 34.5801 15.893Z"
-      :fill="active ? '#3AC589' : '#2B2B2B'"
-      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+      :fill="waiting ? '#CC9440' : active ? '#3AC589' : '#2B2B2B'"
+      :stroke="waiting ? '#FFB950' : active ? '#44F1A6' : '#3F3F3F'"
     />
     <path
       d="M44.5653 38.8122C44.7443 38.8672 44.8454 38.9473 44.907 39.0292C44.9708 39.1138 45.019 39.2361 45.0317 39.415C45.0583 39.7898 44.922 40.3278 44.6007 40.9715C43.9648 42.2456 42.7203 43.7047 41.3387 44.6648C39.946 45.6324 38.2245 46.3213 36.8574 46.4887C36.1691 46.573 35.6284 46.5179 35.2712 46.3555C34.951 46.21 34.7622 45.9763 34.7271 45.575C34.6742 44.9706 34.7575 44.6626 34.8723 44.4788C34.987 44.2951 35.1852 44.15 35.5682 43.9855C35.7449 43.9096 35.9558 43.8332 36.195 43.7466C36.9544 43.4715 37.999 43.0931 39.141 42.2995C40.2209 41.5492 40.9829 40.7142 41.5823 40.0575C41.809 39.8091 42.0124 39.5862 42.2009 39.403C42.5596 39.0546 42.8671 38.8363 43.2057 38.7332C43.5362 38.6326 43.9552 38.6245 44.5653 38.8122Z"
-      :fill="active ? '#3AC589' : '#2B2B2B'"
-      :stroke="active ? '#44F1A6' : '#3F3F3F'"
+      :fill="waiting ? '#CC9440' : active ? '#3AC589' : '#2B2B2B'"
+      :stroke="waiting ? '#FFB950' : active ? '#44F1A6' : '#3F3F3F'"
     />
   </svg>
 </template>
@@ -41,6 +41,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    waiting: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>
diff --git a/components/Step.vue b/components/Step.vue
index 5f842b5..5c9a4a7 100644
--- a/components/Step.vue
+++ b/components/Step.vue
@@ -1,18 +1,21 @@
 <template>
   <div class="step">
-    <diamond :active="!!data.deployerAddress" />
+    <diamond
+      :active="!!data.deployerAddress"
+      :waiting="!canDeploy(data.domain)"
+    />
     <div class="step-body">
       <h4>{{ data.title }}</h4>
-      <h6 v-if="data.domain">
+      <h5 v-if="data.domain" class="deployed">
         ENS:
         <a :href="domainUrl(data.expectedAddress)" target="_blank">{{
           data.domain
         }}</a>
-      </h6>
+      </h5>
       <i18n
         v-if="data.deployerAddress"
         class="deployed"
-        tag="div"
+        tag="h6"
         path="deployedBy"
       >
         <template v-slot:link>
@@ -27,17 +30,32 @@
         <b-icon icon="check" />
         <span>{{ $t('completed') }}</span>
       </div>
-      <b-button
+      <b-tooltip
         v-else
-        type="is-primary"
-        outlined
-        icon-left="tool"
-        :disabled="isNotLoggedIn || !canDeploy(data.domain)"
-        @mousedown="(e) => e.preventDefault()"
-        @click="onDeploy"
+        :label="
+          isNotLoggedIn
+            ? $t('pleaseConnectWallet')
+            : !canDeploy(data.domain)
+            ? $t('dependsOnEns', { ens: data.dependsOn.join(', ') })
+            : ''
+        "
+        position="is-top"
+        multilined
+        :size="isNotLoggedIn ? 'is-small' : 'is-large'"
+        :active="isNotLoggedIn || !canDeploy(data.domain)"
+        append-to-body
       >
-        {{ $t('deploy') }}
-      </b-button>
+        <b-button
+          type="is-primary"
+          outlined
+          icon-left="tool"
+          :disabled="isNotLoggedIn || !canDeploy(data.domain)"
+          @mousedown="(e) => e.preventDefault()"
+          @click="onDeploy"
+        >
+          {{ $t('deploy') }}
+        </b-button>
+      </b-tooltip>
     </div>
   </div>
 </template>
diff --git a/langs/en.json b/langs/en.json
index f874c07..64835c6 100644
--- a/langs/en.json
+++ b/langs/en.json
@@ -22,5 +22,7 @@
   "contractDeployed": "Contract successfully deployed",
   "transactionFailed": "Transaction was failed",
   "sendingTransaction": "Sending transaction",
-  "viewOnEtherscan": "View on Etherscan"
+  "viewOnEtherscan": "View on Etherscan",
+  "pleaseConnectWallet": "Please connect your wallet first",
+  "dependsOnEns": "This action depends on {ens}"
 }
diff --git a/package.json b/package.json
index 6f1de97..94090e2 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "gas-price-oracle": "^0.2.2",
     "node-sass": "^4.14.1",
     "nuxt": "^2.14.6",
-    "nuxt-buefy": "^0.4.3",
+    "nuxt-buefy": "^0.4.4",
     "sass-loader": "^10.0.3",
     "vue-i18n": "^8.22.1",
     "web3": "1.2.6"
diff --git a/yarn.lock b/yarn.lock
index 7b47114..8436e21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2313,12 +2313,12 @@ bs58check@^2.1.2:
     create-hash "^1.1.0"
     safe-buffer "^5.1.2"
 
-buefy@^0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.3.tgz#c33b3309e9458ca5fe3ef14955e4bc2df7a0e3e2"
-  integrity sha512-Xqfo3ppeBo8Fwhb2fLwWnpkIC/1thPErU7DX3HksxTHxrSMixJ2BYkf3f6aWv4Ffx/FWX5UHnUrgtT7o7slnDA==
+buefy@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.4.tgz#01e2e2cf1e61b914239a5f2570e5ea8ed6786927"
+  integrity sha512-LRSIYVNrKTPQhmNRegASkntX+ObtZ7aSSA/3cybDKXzGtPNy8g8cl2tp79Rl8/LBVH/KkRT5rmmzJ21nxz9IcQ==
   dependencies:
-    bulma "0.9.0"
+    bulma "0.9.1"
 
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
@@ -2385,10 +2385,10 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bulma@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.0.tgz#948c5445a49e9d7546f0826cb3820d17178a814f"
-  integrity sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ==
+bulma@0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.1.tgz#2bf0e25062a22166db5c92e8c3dcb4605ab040d8"
+  integrity sha512-LSF69OumXg2HSKl2+rN0/OEXJy7WFEb681wtBlNS/ulJYR27J3rORHibdXZ6GVb/vyUzzYK/Arjyh56wjbFedA==
 
 bytes@3.0.0:
   version "3.0.0"
@@ -6889,12 +6889,12 @@ number-to-bn@1.7.0:
     bn.js "4.11.6"
     strip-hex-prefix "1.0.0"
 
-nuxt-buefy@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/nuxt-buefy/-/nuxt-buefy-0.4.3.tgz#2ecafd9256743f05d123a5487acc3488ea7023f4"
-  integrity sha512-iLOeEvNOefZ5D906MlT8XWLSFr1MoAPLmFWrkCvCz9bfYm55yFT1bXOqxVlLjmt5/ciJ3IKizpg0qU4jEaHCYw==
+nuxt-buefy@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/nuxt-buefy/-/nuxt-buefy-0.4.4.tgz#738415c336a386a61faf4e898d496714493c427d"
+  integrity sha512-bV0k3+S1g8+kQLlLXhx7qam0YC4v6KfO5b6KfgmOWuU6Ro0BvSjKUiFvEsbJdCG5eRoxOIohpLLf48SOoFyDcQ==
   dependencies:
-    buefy "^0.9.3"
+    buefy "^0.9.4"
 
 nuxt@^2.14.6:
   version "2.14.6"