(add) new contract verification UI js

apps/block_scout_web/assets/css/app.scss

@@ -124,6 +124,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/errors";
 @import "components/new_smart_contract";
 @import "components/radio_big";
+@import "components/btn_no_border";
 
 :export {
   dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;

apps/block_scout_web/assets/css/components/_btn_no_border.scss

@@ -0,0 +1,12 @@
+$btn-no-border-bg: #fff !default;
+$btn-no-border-color: $secondary !default;
+
+.btn-no-border {
+  @include btn-line($btn-no-border-bg, $btn-no-border-color);
+
+  border-color: $btn-no-border-bg;
+
+  &:hover {
+    border-color: $btn-no-border-color;
+  }
+}

apps/block_scout_web/assets/css/components/_new_smart_contract.scss

@@ -121,10 +121,26 @@ $new-smart-contract-center-column-margin-right: 30px;
 }
 
 .smart-contract-form-buttons {
+  align-items: center;
   border-top: 1px solid $base-border-color;
+  display: flex;
   margin-right: $new-smart-contract-center-column-margin-right + $new-smart-contract-tooltips-width;
   margin-top: -1px;
   padding-top: 30px;
+  position: relative;
+
+  [class*="btn-"] {
+    position: relative;
+    z-index: 1;
+  }
+
+  .position-absolute {
+    &,
+    &:hover {
+      opacity: 1;
+      z-index: 12;
+    }
+  }
 }
 
 .smart-contract-libraries-wrapper {

apps/block_scout_web/assets/js/lib/smart_contract/new_smart_contract_form.js

@@ -3,6 +3,26 @@ import $ from 'jquery'
 $(function () {
   $('.js-btn-add-contract-libraries').on('click', function () {
     $('.js-smart-contract-libraries-wrapper').show()
-    $(this).remove()
+    $(this).hide()
+  })
+
+  $('.js-smart-contract-form-reset').on('click', function () {
+    $('.js-contract-library-form-group').removeClass('active')
+    $('.js-contract-library-form-group').first().addClass('active')
+    $('.js-smart-contract-libraries-wrapper').hide()
+    $('.js-btn-add-contract-libraries').show()
+    $('.js-add-contract-library-wrapper').show()
+  })
+
+  $('.js-btn-add-contract-library').on('click', function () {
+    let nextContractLibrary = $('.js-contract-library-form-group.active').next('.js-contract-library-form-group')
+
+    if (nextContractLibrary) {
+      nextContractLibrary.addClass('active')
+    }
+
+    if ($('.js-contract-library-form-group.active').length === $('.js-contract-library-form-group').length) {
+      $('.js-add-contract-library-wrapper').hide()
+    }
   })
 })

apps/block_scout_web/lib/block_scout_web/templates/address_contract_verification/new.html.eex

@@ -111,7 +111,7 @@
         <div class="smart-contract-libraries-wrapper js-smart-contract-libraries-wrapper">
           <h2 class="smart-contract-title margin-bottom-md"><%= gettext "Contract Libraries" %></h2>
 
-          <div class="contract-library-form-group active">
+          <div class="contract-library-form-group js-contract-library-form-group active">
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
                 <%= label :external_libraries, :library1, gettext("Library Name") %>
@@ -133,10 +133,10 @@
             </div>
           </div>
 
-          <div class="contract-library-form-group">
+          <div class="contract-library-form-group js-contract-library-form-group">
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label :external_libraries, :library2, gettext("2 Library Name") %>
+                <%= label :external_libraries, :library2, gettext("Library Name") %>
                 <div class="center-column">
                   <%= text_input :external_libraries, :library2_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -146,7 +146,7 @@
 
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label :external_libraries, :library2, gettext("2 Library Address") %>
+                <%= label :external_libraries, :library2, gettext("Library Address") %>
                 <div class="center-column">
                   <%= text_input :external_libraries, :library2_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -155,10 +155,10 @@
             </div>
           </div>
 
-          <div class="contract-library-form-group">
+          <div class="contract-library-form-group js-contract-library-form-group">
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label :external_libraries, :library3, gettext("3 Library Name") %>
+                <%= label :external_libraries, :library3, gettext("Library Name") %>
                 <div class="center-column">
                   <%= text_input :external_libraries, :library3_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -168,7 +168,7 @@
 
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label :external_libraries, :library3, gettext("3 Library Address") %>
+                <%= label :external_libraries, :library3, gettext("Library Address") %>
                 <div class="center-column">
                   <%= text_input :external_libraries, :library3_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -177,10 +177,10 @@
             </div>
           </div>
 
-          <div class="contract-library-form-group">
+          <div class="contract-library-form-group js-contract-library-form-group">
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label :external_libraries, :library4, gettext("4 Library Name") %>
+                <%= label :external_libraries, :library4, gettext("Library Name") %>
                 <div class="center-column">
                   <%= text_input :external_libraries, :library4_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -190,7 +190,7 @@
 
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label :external_libraries, :library4, gettext("4 Library Address") %>
+                <%= label :external_libraries, :library4, gettext("Library Address") %>
                 <div class="center-column">
                   <%= text_input :external_libraries, :library4_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -199,10 +199,10 @@
             </div>
           </div>
 
-          <div class="contract-library-form-group">
+          <div class="contract-library-form-group js-contract-library-form-group">
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label :external_libraries, :library5, gettext("5 Library Name") %>
+                <%= label :external_libraries, :library5, gettext("Library Name") %>
                 <div class="center-column">
                   <%= text_input :external_libraries, :library5_name, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -212,7 +212,7 @@
 
             <div class="smart-contract-form-group">
               <div class="smart-contract-form-group-inner-wrapper">
-                <%= label f, :library5, gettext("5 Library Address") %>
+                <%= label f, :library5, gettext("Library Address") %>
                 <div class="center-column">
                   <%= text_input f, :library5_address, class: "form-control border-rounded", "aria-describedby": "contract-name-help-block" %>
                 </div>
@@ -220,14 +220,15 @@
               </div>
             </div>
           </div>
-          <div class="add-contract-library-wrapper">
+
+          <div class="add-contract-library-wrapper js-add-contract-library-wrapper">
             <span class="btn-line js-btn-add-contract-library">Add Library</span>
           </div>
         </div>
 
         <div class="smart-contract-form-buttons">
           <button
-            class="d-none px-4 position-absolute button button-primary button-sm mr-2"
+            class="position-absolute btn-full-primary d-none mr-2"
             disabled="true"
             id="loading"
             name="button"
@@ -239,13 +240,14 @@
             </span>
             <%= gettext("Loading....") %>
           </button>
-          <%= submit gettext("Verify & publish"), class: "button button-primary button-sm mr-2", "data-loading": "animation"  %>
+          <%= submit gettext("Verify & publish"), class: "btn-full-primary mr-2", "data-loading": "animation"  %>
-          <%= reset gettext("Reset"), class: "button button-secondary button-sm mr-2" %>
+          <%= reset gettext("Reset"), class: "btn-line mr-2 js-smart-contract-form-reset" %>
           <%=
             link(
               gettext("Cancel"),
-              to: address_contract_path(@conn, :index, @conn.params["address_id"]),
+              class: "btn-no-border",
-              class: "button button-sm")
+              to: address_contract_path(@conn, :index, @conn.params["address_id"])
+              )
           %>
         </div>
       <% end %>