fuse network (blockscout#1)

* v2.0.1-beta modified to fuse

* prepare for deployment

* make docker work

* docker run command

CONTRIBUTING.md

@@ -6,6 +6,7 @@
 4. Commit your changes (`git commit -am 'Add some feature'`)
 5. Push to the branch (`git push origin my-new-feature`)
 6. Create a new Pull Request
+7. Update CHANGELOG.md with the link to PR and description of the changes
 
 ### General
 

PULL_REQUEST_TEMPLATE.md

@@ -18,3 +18,20 @@
 ## Upgrading
 
 *If you have any Incompatible Changes in the above Changelog, outline how users of prior versions can upgrade once this PR lands or when reviewers are testing locally.  A common upgrading step is "Database reset and re-index required".*
+
+## Checklist for your PR
+
+<!--
+  Ideally a PR has all of the checkmarks set.
+
+  If something in this list is irrelevant to your PR, you should still set this
+  checkmark indicating that you are sure it is dealt with (be that by irrelevance).
+
+  If you don't set a checkmark (e. g. don't add a test for new functionality),
+  you must be able to justify that.
+-->
+
+  - [ ] I added an entry to `CHANGELOG.md` with this PR
+  - [ ] If I added new functionality, I added tests covering it.
+  - [ ] If I fixed a bug, I added a regression test to prevent the bug from silently reappearing again.
+  - [ ] I checked whether I should update the docs and did so if necessary

apps/block_scout_web/assets/css/_code.scss

@@ -6,10 +6,26 @@ pre {
   white-space: pre-wrap;
 }
 
+.pre-decompiled code {
+  white-space: pre-wrap;
+  counter-increment: line;
+}
+
+.pre-decompiled code::before {
+  content: counter(line);
+  display: inline-block;
+  width: 3em;
+  border-right: 1px solid #ddd;
+  padding: 0 .5em;
+  margin-right: .5em;
+  color: #888;
+  -webkit-user-select: none;
+}
+
 .pre-scrollable-shorty {
   max-height: $pre-scrollable-max-height / 7;
 }
 
-.tile pre  {
+.tile pre {
   margin-bottom: 0;
 }

apps/block_scout_web/assets/css/_elements.scss

@@ -1,7 +1,9 @@
 hr {
-  margin: 2.75em 0;
-  border-style: solid;
-  border-color: $gray-300 transparent transparent transparent;
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid #f5f6fa;
+  margin: 30px 0;
 }
 
 svg {
@@ -13,3 +15,15 @@ svg {
   text-rendering: auto;
   line-height: 1;
 }
+
+dl {
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

apps/block_scout_web/assets/css/_helpers.scss

@@ -0,0 +1,31 @@
+.pr-0-md {
+  padding-right: 0 !important;
+
+  @include media-breakpoint-down(md) {
+    padding-right: 15px !important;
+  }
+}
+
+.pl-0-md {
+  padding-left: 0 !important;
+
+  @include media-breakpoint-down(md) {
+    padding-left: 15px !important;
+  }
+}
+
+.card-mr-50-md {
+  margin-right: $common-container-margin;
+
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
+}
+
+.clearfix:after {
+  clear: both;
+  content: " "; /* Older browser do not support empty content */
+  display: block;
+  height: 0;
+  visibility: hidden;
+}

apps/block_scout_web/assets/css/_layout.scss

@@ -5,6 +5,6 @@
 
   main {
     flex-grow: 1;
-    background-color: #FBFAFC;
+    background-color: #fbfafc;
   }
 }

apps/block_scout_web/assets/css/_mixins.scss

@@ -0,0 +1,218 @@
+@mixin textfield-placeholder($color: #a3a9b5) {
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+  &::-moz-placeholder {
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &:-moz-placeholder {
+    color: $color;
+  }
+}
+
+@mixin gradient-container() {
+  background-color: $primary;
+  background-image: linear-gradient(
+    to right,
+    $dashboard-banner-gradient-start,
+    $dashboard-banner-gradient-end
+  );
+  box-shadow: 0 5px 40px -5px rgba(#000, 0.25);
+  margin-top: -3rem;
+}
+
+@mixin stats-item($border-color: #fff, $text-color: #fff, $value-color: #fff) {
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: calc(1rem + 4px);
+    padding-right: 1rem;
+    position: relative;
+
+    &::before {
+      background-color: $border-color;
+      border-radius: 2px;
+      content: "";
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 4px;
+    }
+  }
+
+  &-label {
+    color: $text-color;
+    display: block;
+    white-space: nowrap;
+  }
+
+  &-label-item {
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &-value {
+    color: $value-color;
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 200;
+    white-space: nowrap;
+
+    @media (max-width: $breakpoint-lg) {
+      font-size: 1.25rem;
+    }
+  }
+}
+
+@mixin btn-full($bg-color: $primary, $text-color: #fff) {
+  -webkit-appearance: none !important;
+  align-items: center;
+  background-color: $bg-color;
+  border-radius: 2px;
+  border: 1px solid $bg-color;
+  color: $text-color;
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  height: 36px;
+  justify-content: center;
+  outline: none;
+  padding: 0 15px;
+  text-decoration: none;
+  transition: $transition-cont;
+  white-space: nowrap;
+  width: fit-content;
+
+  &:hover {
+    background-color: darken($bg-color, 10%);
+    border-color: darken($bg-color, 10%);
+    text-decoration: none;
+  }
+
+  svg {
+    margin-right: 12px;
+  }
+
+  path {
+    fill: $text-color;
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &[disabled] {
+    &,
+    &:hover {
+      background-color: $bg-color;
+      border-color: $bg-color;
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+}
+
+@mixin btn-line($bg-color: #fff, $text-color: $secondary) {
+  -webkit-appearance: none !important;
+  align-items: center;
+  background-color: $bg-color;
+  border-radius: 2px;
+  border: 1px solid $text-color;
+  color: $text-color;
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  height: 36px;
+  justify-content: center;
+  outline: none;
+  padding: 0 15px;
+  text-decoration: none;
+  transition: $transition-cont;
+  white-space: nowrap;
+  width: fit-content;
+  font-weight: 400;
+
+  &:hover {
+    background-color: $text-color;
+    color: $bg-color;
+    text-decoration: none;
+
+    path {
+      fill: $bg-color;
+    }
+  }
+
+  svg {
+    margin-right: 12px;
+  }
+
+  path {
+    fill: $text-color;
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &[disabled] {
+    &,
+    &:hover {
+      background-color: $bg-color;
+      border-color: $text-color;
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+}
+
+@mixin square-icon-button($color, $dimensions) {
+  align-items: center;
+  border: 1px solid $color;
+  border-radius: 2px;
+  cursor: pointer;
+  display: flex;
+  height: $dimensions;
+  justify-content: center;
+  transition: $transition-cont;
+  width: $dimensions;
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  path {
+    fill: $color;
+    transition: $transition-cont;
+  }
+
+  &:hover {
+    background-color: $color;
+
+    path {
+      fill: #fff;
+    }
+  }
+}
+
+@mixin image-2x($image, $width: 100%, $height: 100%) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+         (-o-min-device-pixel-ratio: 2.6/2),
+         (-webkit-min-device-pixel-ratio: 1.3),
+         (min-device-pixel-ratio: 1.3),
+         (min-resolution: 1.3dppx) {
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}