Merge pull request #376 from poanetwork/address-pg-redesign-#231

Address pg redesign #231

apps/explorer/package-lock.json

@@ -18,7 +18,7 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "requires": {
-        "balanced-match": "^1.0.0",
+        "balanced-match": "1.0.0",
         "concat-map": "0.0.1"
       }
     },
@@ -37,9 +37,9 @@
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
       "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
       "requires": {
-        "string-width": "^1.0.1",
+        "string-width": "1.0.2",
-        "strip-ansi": "^3.0.1",
+        "strip-ansi": "3.0.1",
-        "wrap-ansi": "^2.0.0"
+        "wrap-ansi": "2.1.0"
       }
     },
     "code-point-at": {
@@ -62,7 +62,7 @@
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
       "requires": {
-        "is-arrayish": "^0.2.1"
+        "is-arrayish": "0.2.1"
       }
     },
     "find-up": {
@@ -70,8 +70,8 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
       "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
       "requires": {
-        "path-exists": "^2.0.0",
+        "path-exists": "2.1.0",
-        "pinkie-promise": "^2.0.0"
+        "pinkie-promise": "2.0.1"
       }
     },
     "fs-extra": {
@@ -79,11 +79,11 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
       "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
       "requires": {
-        "graceful-fs": "^4.1.2",
+        "graceful-fs": "4.1.11",
-        "jsonfile": "^2.1.0",
+        "jsonfile": "2.4.0",
-        "klaw": "^1.0.0",
+        "klaw": "1.3.1",
-        "path-is-absolute": "^1.0.0",
+        "path-is-absolute": "1.0.1",
-        "rimraf": "^2.2.8"
+        "rimraf": "2.6.2"
       }
     },
     "fs.realpath": {
@@ -101,12 +101,12 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
       "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
       "requires": {
-        "fs.realpath": "^1.0.0",
+        "fs.realpath": "1.0.0",
-        "inflight": "^1.0.4",
+        "inflight": "1.0.6",
-        "inherits": "2",
+        "inherits": "2.0.3",
-        "minimatch": "^3.0.4",
+        "minimatch": "3.0.4",
-        "once": "^1.3.0",
+        "once": "1.4.0",
-        "path-is-absolute": "^1.0.0"
+        "path-is-absolute": "1.0.1"
       }
     },
     "graceful-fs": {
@@ -124,8 +124,8 @@
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
       "requires": {
-        "once": "^1.3.0",
+        "once": "1.4.0",
-        "wrappy": "1"
+        "wrappy": "1.0.2"
       }
     },
     "inherits": {
@@ -148,7 +148,7 @@
       "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
       "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
       "requires": {
-        "builtin-modules": "^1.0.0"
+        "builtin-modules": "1.1.1"
       }
     },
     "is-fullwidth-code-point": {
@@ -156,7 +156,7 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
       "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
       "requires": {
-        "number-is-nan": "^1.0.0"
+        "number-is-nan": "1.0.1"
       }
     },
     "is-utf8": {
@@ -169,7 +169,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
       "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
       "requires": {
-        "graceful-fs": "^4.1.6"
+        "graceful-fs": "4.1.11"
       }
     },
     "klaw": {
@@ -177,7 +177,7 @@
       "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
       "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
       "requires": {
-        "graceful-fs": "^4.1.9"
+        "graceful-fs": "4.1.11"
       }
     },
     "lcid": {
@@ -185,7 +185,7 @@
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
       "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
       "requires": {
-        "invert-kv": "^1.0.0"
+        "invert-kv": "1.0.0"
       }
     },
     "load-json-file": {
@@ -193,11 +193,11 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "requires": {
-        "graceful-fs": "^4.1.2",
+        "graceful-fs": "4.1.11",
-        "parse-json": "^2.2.0",
+        "parse-json": "2.2.0",
-        "pify": "^2.0.0",
+        "pify": "2.3.0",
-        "pinkie-promise": "^2.0.0",
+        "pinkie-promise": "2.0.1",
-        "strip-bom": "^2.0.0"
+        "strip-bom": "2.0.0"
       }
     },
     "lodash.assign": {
@@ -215,7 +215,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
       "requires": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "1.1.11"
       }
     },
     "normalize-package-data": {
@@ -223,10 +223,10 @@
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
       "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
       "requires": {
-        "hosted-git-info": "^2.1.4",
+        "hosted-git-info": "2.6.1",
-        "is-builtin-module": "^1.0.0",
+        "is-builtin-module": "1.0.0",
-        "semver": "2 || 3 || 4 || 5",
+        "semver": "5.5.0",
-        "validate-npm-package-license": "^3.0.1"
+        "validate-npm-package-license": "3.0.3"
       }
     },
     "number-is-nan": {
@@ -239,7 +239,7 @@
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
       "requires": {
-        "wrappy": "1"
+        "wrappy": "1.0.2"
       }
     },
     "os-locale": {
@@ -247,7 +247,7 @@
       "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "requires": {
-        "lcid": "^1.0.0"
+        "lcid": "1.0.0"
       }
     },
     "parse-json": {
@@ -255,7 +255,7 @@
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
       "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
       "requires": {
-        "error-ex": "^1.2.0"
+        "error-ex": "1.3.2"
       }
     },
     "path-exists": {
@@ -263,7 +263,7 @@
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
       "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
       "requires": {
-        "pinkie-promise": "^2.0.0"
+        "pinkie-promise": "2.0.1"
       }
     },
     "path-is-absolute": {
@@ -276,9 +276,9 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
       "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
       "requires": {
-        "graceful-fs": "^4.1.2",
+        "graceful-fs": "4.1.11",
-        "pify": "^2.0.0",
+        "pify": "2.3.0",
-        "pinkie-promise": "^2.0.0"
+        "pinkie-promise": "2.0.1"
       }
     },
     "pify": {
@@ -296,7 +296,7 @@
       "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
       "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
       "requires": {
-        "pinkie": "^2.0.0"
+        "pinkie": "2.0.4"
       }
     },
     "read-pkg": {
@@ -304,9 +304,9 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "requires": {
-        "load-json-file": "^1.0.0",
+        "load-json-file": "1.1.0",
-        "normalize-package-data": "^2.3.2",
+        "normalize-package-data": "2.4.0",
-        "path-type": "^1.0.0"
+        "path-type": "1.1.0"
       }
     },
     "read-pkg-up": {
@@ -314,8 +314,8 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "requires": {
-        "find-up": "^1.0.0",
+        "find-up": "1.1.2",
-        "read-pkg": "^1.0.0"
+        "read-pkg": "1.1.0"
       }
     },
     "require-directory": {
@@ -338,7 +338,7 @@
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
       "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
       "requires": {
-        "glob": "^7.0.5"
+        "glob": "7.1.2"
       }
     },
     "semver": {
@@ -356,11 +356,11 @@
       "resolved": "https://registry.npmjs.org/solc-js/-/solc-js-0.4.20.tgz",
       "integrity": "sha1-tjCVsPcatkx6fi+C7YUtCzUxTlg=",
       "requires": {
-        "fs-extra": "^0.30.0",
+        "fs-extra": "0.30.0",
-        "memorystream": "^0.3.1",
+        "memorystream": "0.3.1",
-        "require-from-string": "^1.1.0",
+        "require-from-string": "1.2.1",
-        "semver": "^5.3.0",
+        "semver": "5.5.0",
-        "yargs": "^4.7.1"
+        "yargs": "4.8.1"
       }
     },
     "spdx-correct": {
@@ -368,8 +368,8 @@
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
       "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
       "requires": {
-        "spdx-expression-parse": "^3.0.0",
+        "spdx-expression-parse": "3.0.0",
-        "spdx-license-ids": "^3.0.0"
+        "spdx-license-ids": "3.0.0"
       }
     },
     "spdx-exceptions": {
@@ -382,8 +382,8 @@
       "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
       "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
       "requires": {
-        "spdx-exceptions": "^2.1.0",
+        "spdx-exceptions": "2.1.0",
-        "spdx-license-ids": "^3.0.0"
+        "spdx-license-ids": "3.0.0"
       }
     },
     "spdx-license-ids": {
@@ -396,9 +396,9 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
       "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
       "requires": {
-        "code-point-at": "^1.0.0",
+        "code-point-at": "1.1.0",
-        "is-fullwidth-code-point": "^1.0.0",
+        "is-fullwidth-code-point": "1.0.0",
-        "strip-ansi": "^3.0.0"
+        "strip-ansi": "3.0.1"
       }
     },
     "strip-ansi": {
@@ -406,7 +406,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "requires": {
-        "ansi-regex": "^2.0.0"
+        "ansi-regex": "2.1.1"
       }
     },
     "strip-bom": {
@@ -414,7 +414,7 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "requires": {
-        "is-utf8": "^0.2.0"
+        "is-utf8": "0.2.1"
       }
     },
     "validate-npm-package-license": {
@@ -422,8 +422,8 @@
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
       "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==",
       "requires": {
-        "spdx-correct": "^3.0.0",
+        "spdx-correct": "3.0.0",
-        "spdx-expression-parse": "^3.0.0"
+        "spdx-expression-parse": "3.0.0"
       }
     },
     "which-module": {
@@ -441,8 +441,8 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "requires": {
-        "string-width": "^1.0.1",
+        "string-width": "1.0.2",
-        "strip-ansi": "^3.0.1"
+        "strip-ansi": "3.0.1"
       }
     },
     "wrappy": {
@@ -460,20 +460,20 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-4.8.1.tgz",
       "integrity": "sha1-wMQpJMpKqmsObaFznfshZDn53cA=",
       "requires": {
-        "cliui": "^3.2.0",
+        "cliui": "3.2.0",
-        "decamelize": "^1.1.1",
+        "decamelize": "1.2.0",
-        "get-caller-file": "^1.0.1",
+        "get-caller-file": "1.0.2",
-        "lodash.assign": "^4.0.3",
+        "lodash.assign": "4.2.0",
-        "os-locale": "^1.4.0",
+        "os-locale": "1.4.0",
-        "read-pkg-up": "^1.0.1",
+        "read-pkg-up": "1.0.1",
-        "require-directory": "^2.1.1",
+        "require-directory": "2.1.1",
-        "require-main-filename": "^1.0.1",
+        "require-main-filename": "1.0.1",
-        "set-blocking": "^2.0.0",
+        "set-blocking": "2.0.0",
-        "string-width": "^1.0.1",
+        "string-width": "1.0.2",
-        "which-module": "^1.0.0",
+        "which-module": "1.0.0",
-        "window-size": "^0.2.0",
+        "window-size": "0.2.0",
-        "y18n": "^3.2.1",
+        "y18n": "3.2.1",
-        "yargs-parser": "^2.4.1"
+        "yargs-parser": "2.4.1"
       }
     },
     "yargs-parser": {
@@ -481,8 +481,8 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz",
       "integrity": "sha1-hVaN488VD/SfpRgl8DqMiA3cxcQ=",
       "requires": {
-        "camelcase": "^3.0.0",
+        "camelcase": "3.0.0",
-        "lodash.assign": "^4.0.6"
+        "lodash.assign": "4.2.0"
       }
     }
   }

apps/explorer_web/assets/css/_layout.scss

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

apps/explorer_web/assets/css/_tooltip.scss

@@ -0,0 +1,3 @@
+.tooltip {
+  min-width: 100px;
+}

apps/explorer_web/assets/css/_typography.scss

@@ -4,19 +4,18 @@ body {
 }
 
 h1 {
-  font-size: 18px;
+  font-size: 26px;
-  font-family: $font-family-sans-serif;
+  font-weight: 200;
-  font-weight: 600;
 }
 
 h2 {
   font-size: 18px;
-  font-weight: 300;
+  font-weight: 200;
 }
 
 h3 {
-  font-size: 15px;
+  font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 h4 {

apps/explorer_web/assets/css/app.scss

@@ -42,6 +42,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/card";
 @import "node_modules/bootstrap/scss/forms";
 @import "node_modules/bootstrap/scss/tooltip";
+@import "node_modules/bootstrap/scss/badge";
+@import "node_modules/bootstrap/scss/alert";
 
 //Custom theme
 @import "theme/fonts";
@@ -66,6 +68,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/card";
 @import "components/tile";
 @import "components/dashboard-banner";
+@import "components/icon-link";
+@import "components/badge";
 
 
 :export {

apps/explorer_web/assets/css/components/_badge.scss

@@ -0,0 +1,3 @@
+.badge {
+  color: $white;
+}

apps/explorer_web/assets/css/components/_card.scss

@@ -4,3 +4,20 @@
   border-radius: 0;
   margin-bottom: 3rem;
 }
+
+.card-header {
+  background-color: $white;
+
+  &-tabs {
+    margin: (-$card-spacer-y) (-$card-spacer-x);
+  }
+}
+
+.card-title {
+  line-height: 2.2rem;
+  margin-bottom: 2rem;
+}
+
+.card-body {
+  padding: 2.25rem 1.25rem;
+}

apps/explorer_web/assets/css/components/_dashboard-banner.scss

@@ -1,5 +1,6 @@
 .dashboard-banner-container {
   position: relative;
+  margin-top: -3rem;
   background-color: $white;
   box-shadow: 0 5px 40px -5px rgba($black, 0.25);
 

apps/explorer_web/assets/css/components/_footer.scss

@@ -23,35 +23,13 @@ $footer-text-color: rgba($white, 0.7);
   position: relative;
 }
 
-.footer .social-links {
+.footer .icon-links {
   position: absolute;
   right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
 
   @media (max-width: 768px) {
     position: static;
     justify-content: center;
     margin-bottom: 5px;
   }
-
-  & > a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $social-link-size;
-    height: $social-link-size;
-    margin: 0 $footer-padding;
-    color: $footer-text-color;
-    background-color: rgba($white, 0.25);
-    border-radius: 50%;
-    transition: all 0.1s ease;
-
-    &:hover {
-      background-color: $white;
-      color: $primary;
-      text-decoration: none;
-    }
-  }
 }

apps/explorer_web/assets/css/components/_icon-link.scss

@@ -0,0 +1,39 @@
+.icon-links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin: 0 .25rem;
+    color: $text-muted;
+    background-color: $gray-200;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.1s ease;
+
+    &:hover {
+      background-color: $primary;
+      color: $white;
+      text-decoration: none;
+    }
+  }
+
+  &.icon-links-primary {
+
+    .icon-link {
+      color: $footer-text-color;
+      background-color: rgba($white, 0.25);
+
+      &:hover {
+        background-color: $white;
+        color: $primary;
+      }
+    }
+  }
+}

apps/explorer_web/assets/css/components/_nav_tabs.scss

@@ -1,8 +1,31 @@
 .nav-tabs {
-  border-bottom: none;
 
   .nav-link {
-    border-color: $border-color $border-color $border-color;
+    padding: 1.25rem 3rem;
-    margin-right: 5px;
+    color: $text-muted;
+    font-size: 14px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    &:hover {
+      color: $primary;
+    }
+
+    &.active {
+      color: $white;
+      background-color: $primary;
+      border-color: $primary;
+    }
+
+    &:hover {
+      border-color: transparent;
     }
   }
+}
+
+
+.nav-tabs .nav-item.show .nav-link {
+  color: $white;
+  background-color: darken($primary, 10%);
+  border-color: darken($primary, 10%);
+}

apps/explorer_web/assets/css/components/_navbar.scss

@@ -1,3 +1,8 @@
+.navbar {
+  position: relative;
+  z-index: 10;
+}
+
 .navbar-logo {
   height: 36px;
 }
@@ -9,6 +14,10 @@
   }
 }
 
+.navbar .nav-item {
+  font-size: 14px;
+}
+
 .navbar .nav-link {
   color: $white;
 }
@@ -47,23 +56,21 @@
     content: "";
     position: absolute;
     display: block;
-    bottom: -0.25rem;
+    bottom: 0;
     left: 50%;
-    width: 0.25rem;
+    width: 100%;
-    height: 0.25rem;
+    height: 0.2rem;
     background-color: $white;
     opacity: 0;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(-0.5rem);
-    transition: bottom 0.2s ease-in, opacity 0.2s ease, width 0.2s 0.3s ease-in-out, height 0.3s 0.1s ease-in-out;
+    transition: all 0.3s ease;
   }
 
   &:hover {
     color: $white;
 
     &:before {
-      bottom: 0.25rem;
+      transform: translateX(-50%) translateY(-0.25rem);
-      width: 100%;
-      height: 0.1rem;
       opacity: 1;
     }
   }
@@ -71,8 +78,8 @@
   &:active {
 
     &:before {
-      width: 80%;
+      transition: all 0.1s ease-out;
-      transition: width 0.1s ease;
+      transform: translateX(-50%) translateY(-0.5rem);
     }
   }
 }

apps/explorer_web/assets/css/components/_qr-code.scss

@@ -3,5 +3,4 @@
   margin-right: auto;
   margin-left: auto;
   width: 100%;
-  max-width: 60px;
 }

apps/explorer_web/assets/css/components/_tile.scss

@@ -7,7 +7,7 @@
   border-left: 4px solid $primary;
   border-radius: 2px;
   padding: 1rem;
-  box-shadow: 0 2px 5px rgba($black, 0.15);
+  box-shadow: 0 1px 5px rgba($black, 0.15);
 
   & + & {
     margin-top: 1rem;
@@ -22,7 +22,7 @@
     &-transaction {
       border-left: 4px solid $blue;
 
-      .tile-label {
+      .tile-label, .tile-text-highlight {
         color: $blue;
       }
     }
@@ -30,7 +30,7 @@
     &-contract {
       border-left: 4px solid $green;
 
-      .tile-label {
+      .tile-label, .tile-text-highlight {
         color: $green;
       }
     }
@@ -38,7 +38,7 @@
     &-contract-creation {
       border-left: 4px solid $pink;
 
-      .tile-label {
+      .tile-label, .tile-text-highlight {
         color: $pink;
       }
     }
@@ -46,10 +46,18 @@
     &-token {
       border-left: 4px solid $orange;
 
-      .tile-label {
+      .tile-label, .tile-text-highlight {
         color: $orange;
       }
     }
+
+    &-internal-transaction {
+      border-left: 4px solid $teal;
+
+      .tile-label, .tile-text-highlight {
+        color: $teal;
+      }
+    }
   }
 
   .tile-title {
@@ -60,3 +68,18 @@
     display: block;
   }
 }
+
+.tile-badge {
+  margin-bottom: 0.1rem;
+  padding: 0;
+  width: 2.5rem;
+  line-height: 1.25rem;
+  text-align: center;
+}
+
+.tile-muted {
+  border-left: 1px solid $border-color;
+  background-color: $gray-100;
+  color: $text-muted;
+  box-shadow: none;
+}

apps/explorer_web/assets/css/theme/_poa_variables.scss

@@ -39,10 +39,10 @@ $indigo:  #5b33a1 !default;
 $purple:  #9987fc !default;
 $pink:    #e83e8c !default;
 $red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
+$orange:  #ef9a60 !default;
 $yellow:  #ffc107 !default;
 $green:   #20b760 !default;
-$teal:            !default;
+$teal:    #009097 !default;
 $cyan:    #90e1d8 !default;
 
 $colors: () !default;
@@ -68,7 +68,7 @@ $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $orange !default;
 $danger:        $red !default;
-$light:         $gray-100 !default;
+$light:         $gray-400 !default;
 $dark:          $gray-800 !default;
 
 $theme-colors: () !default;
@@ -208,7 +208,7 @@ $line-height-sm:              1.5 !default;
 $border-width:                1px !default;
 $border-color:                $gray-300 !default;
 
-$border-radius:               .25rem !default;
+$border-radius:               .1rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-sm:            .2rem !default;
 

apps/explorer_web/lib/explorer_web/channels/address_channel.ex

@@ -13,7 +13,7 @@ defmodule ExplorerWeb.AddressChannel do
     {:ok, %{}, socket}
   end
 
-  def handle_out("transaction", %{transaction: transaction}, socket) do
+  def handle_out("transaction", %{address: address, transaction: transaction}, socket) do
     Gettext.put_locale(ExplorerWeb.Gettext, socket.assigns.locale)
 
     rendered =
@@ -21,6 +21,7 @@ defmodule ExplorerWeb.AddressChannel do
         AddressTransactionView,
         "_transaction.html",
         locale: socket.assigns.locale,
+        address: address,
         transaction: transaction
       )
 

apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex

@@ -1,11 +1,11 @@
 <%= if @address_hash do %>
-  <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address_hash), "data-address-hash": @address_hash do %>
+  <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address_hash), "data-address-hash": @address_hash, "data-test": "address_hash_link" do %>
     <%= if @contract do %>
-      <span class="tile-text-highlight d-none d-md-none d-lg-inline"><%= @address_hash %></span>
+      <span class="tile-text-highlight">
-      <span class="tile-text-highlight d-md-block d-lg-none "><%= @address_hash |> to_string() |> String.slice(0..5) %>&ndash;<%= @address_hash |> to_string() |> String.slice(-6..-1) %></span>
+        <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @address_hash %>
+      </span>
     <% else %>
-      <span class="d-none d-md-none d-lg-inline"> <%= @address_hash %></span>
+      <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @address_hash %>
-      <span class="d-lg-none"><%= @address_hash |> to_string() |> String.slice(0..5) %>&ndash;<%= @address_hash |> to_string() |> String.slice(-6..-1) %></span>
     <% end %>
   <% end %>
 <% end %>

apps/explorer_web/lib/explorer_web/templates/address/_responsive_hash.html.eex

@@ -0,0 +1,2 @@
+<span class="d-none d-md-none d-lg-inline"><%= @address_hash %></span>
+<span class="d-md-block d-lg-none "><%= @address_hash |> to_string() |> String.slice(0..5) %>&ndash;<%= @address_hash |> to_string() |> String.slice(-6..-1) %></span>

apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex

@@ -1,27 +1,60 @@
 <section>
-  <div class="row mb-3">
+  <div class="row" data-selector='overview'>
-    <div class="col-md-2 col-lg-1 order-last order-sm-first">
+    <div class="col-md-12 col-lg-8">
-      <div class="card mt-3 mt-sm-0">
+      <div class="card">
-        <div class="card-body px-2 py-2">
+        <div class="card-body">
-          <img src="data:image/png;base64, <%= qr_code(@address) %>" class="qr-code" alt="qr_code" title="<%= @address %>" />
+          <div class="icon-links float-right">
+            <span data-clipboard-text="<%= @address %>">
+              <button type="button" class="icon-link" id="button" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>" aria-label="Copy Address">
+                <i class="fas fa-clone"></i>
+              </button>
+            </span>
+            <span data-toggle="modal" data-target="#qrModal">
+              <button type="button" class="icon-link"  data-toggle="tooltip" data-placement="top" title="<%= gettext("QR Code") %>" aria-label="Show QR Code">
+                <i class="fas fa-qrcode"></i>
+              </button>
+            </span>
           </div>
+          <h1 class="card-title"><%= address_title(@address) %> Details </h1>
+          <h3 class="" data-test="address_detail_hash"><%= @address %></h3>
+          <div class="d-flex flex-row justify-content-start text-muted">
+            <span class="mr-4" data-test="transaction_count"><%= Cldr.Number.to_string!(@transaction_count) %> <%= gettext "Transactions" %></span>
           </div>
         </div>
-    <div class="col-sm-10 align-self-center">
-      <h1><%= address_title(@address) %></h1>
-      <p class="mb-0" data-test="address_detail_hash"><%= @address %></p>
       </div>
     </div>
-
+    <div class="col-md-6 col-lg-4">
-  <div class="card mb-3">
+      <div class="card bg-primary">
         <div class="card-body">
-      <div class="row">
+          <h2 class="card-title text-white">Balance</h2>
-        <div class="col-sm-6">
+          <span></span>
-          <table class="table table-font table-responsive-sm table-horizontal" data-selector='overview'>
+          <div class="text-right">
-            <%= render "_values.html", address: @address, exchange_rate: @exchange_rate, transaction_count: @transaction_count %>
+            <h3 class="text-white" data-test="address_balance"><%= balance(@address) %></h3>
-          </table>
+            <span class="text-light"><%= formatted_usd(@address, @exchange_rate) %></span>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </section>
+
+
+<!-- Modal -->
+<div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title" id="qrModalLabel">QR Code</h2>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <img src="data:image/png;base64, <%= qr_code(@address) %>" class="qr-code" alt="qr_code" title="<%= @address %>" />
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>

apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex

@@ -0,0 +1,31 @@
+<div class="tile tile-type-internal-transaction fade-in" data-test="internal_transaction" data-internal-transaction-id="<%= @internal_transaction.id %>">
+  <div class="row">
+    <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
+      <%=  gettext("Internal Transaction") %>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column">
+      <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %>
+      <span>
+        <%= if @address.hash == @internal_transaction.from_address_hash do %>
+          <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @internal_transaction.from_address_hash %>
+        <% else %>
+          <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@internal_transaction.from_address), address_hash: @internal_transaction.from_address_hash %>
+        <% end %>
+        &rarr;
+        <%= if @address.hash == ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction) do %>
+          <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction) %>
+        <% else %>
+          <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@internal_transaction.to_address), address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction) %>
+        <% end %>
+      </span>
+      <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> POA
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column align-items-end justify-content-center text-md-right">
+      <%= if @address.hash == @internal_transaction.from_address_hash do %>
+        <span class="badge badge-danger tile-badge">OUT</span>
+      <% else %>
+        <span class="badge badge-success tile-badge">IN</span>
+      <% end %>
+    </div>
+  </div>
+</div>

apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex

@@ -1,11 +1,13 @@
-<section class="container-fluid">
+<section class="container">
 
   <%= render ExplorerWeb.AddressView, "overview.html", assigns %>
 
   <section>
     <div class="card">
       <div class="card-header">
-        <ul class="nav nav-tabs card-header-tabs">
+
+        <!-- DESKTOP TAB NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
           <li class="nav-item">
             <%= link(
                   gettext("Transactions"),
@@ -35,6 +37,37 @@
             </li>
           <% end %>
         </ul>
+
+        <!-- MOBILE DROPDOWN NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-md-none">
+          <li class="nav-item dropdown flex-fill text-center">
+            <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Internal Transactions</a>
+            <div class="dropdown-menu">
+              <%= link(
+                    gettext("Transactions"),
+                    class: "dropdown-item",
+                    to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                  ) %>
+              <%= link(
+                    gettext("Internal Transactions"),
+                    class: "dropdown-item",
+                    "data-test": "internal_transactions_tab_link",
+                    to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                  ) %>
+              <%= if contract?(@address) do %>
+                <%= link(
+                    to: address_contract_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
+                    class: "dropdown-item") do %>
+                  <%= gettext("Code") %>
+
+                  <%= if smart_contract_verified?(@address) do %>
+                    <i class="far fa-check-circle"></i>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          </li>
+        </ul>
       </div>
       <div class="card-body">
         <div class="dropdown float-right u-push-sm">
@@ -75,52 +108,15 @@
             ) %>
           </div>
         </div>
+        <h2 class="card-title"><%= gettext "Internal Transactions" %></h2>
         <%= if Enum.count(@internal_transactions) > 0 do %>
-          <table class="table table-responsive-sm table-font">
-            <thead>
-              <th><%= gettext "Parent Tx Hash" %></th>
-              <th><%= gettext "Block" %></th>
-              <th><%= gettext "Age" %></th>
-              <th><%= gettext "From" %></th>
-              <th><%= gettext "To" %></th>
-              <th><%= gettext "Value" %> (<%= gettext "Ether" %>)</th>
-            </thead>
           <%= for internal_transaction <- @internal_transactions do %>
-              <tgroup>
+            <%= render "_internal_transaction.html", locale: @locale, address: @address, internal_transaction: internal_transaction %>
-                <tr data-test="internal_transaction">
-                  <td>
-                    <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: internal_transaction.transaction_hash %>
-                  </td>
-                  <td>
-                    <%= link(internal_transaction.transaction.block,
-                      to: block_path(@conn, :show, @conn.assigns.locale, internal_transaction.transaction.block)
-                      ) %>
-                  </td>
-                  <td data-from-now="<%= internal_transaction.transaction.block.timestamp %>"></td>
-                  <td>
-                    <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(internal_transaction.from_address), address_hash: internal_transaction.from_address_hash %>
-                  </td>
-                  <td>
-                    <%= if ExplorerWeb.InternalTransactionView.create?(internal_transaction) do %>
-                      <i class="fas fa-plus-square"></i>
-                      <%= link(
-                        gettext("Contract Creation"),
-                        class: "transaction__link",
-                        "data-address-hash": internal_transaction.created_contract_address_hash,
-                        to: address_path(ExplorerWeb.Endpoint, :show, @locale, internal_transaction.created_contract_address_hash),
-                        title: internal_transaction.created_contract_address_hash
-                      ) %>
-                    <% else %>
-                      <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(internal_transaction.to_address), address_hash: internal_transaction.to_address_hash %>
-                    <% end %>
-                  </td>
-                  <td><%= ExplorerWeb.TransactionView.value(internal_transaction, include_label: false) %></td>
-                </tr>
-              </tgroup>
           <% end %>
-          </table>
         <% else %>
-          <p><%= gettext "There are no Internal Transactions" %></p>
+          <div class="tile tile-muted text-center">
+            <span><%= gettext "There are no internal transactions for this address." %></span>
+          </div>
         <% end %>
       </div>
     </div>

apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex

@@ -1,35 +1,36 @@
-<tr class="fade-in">
+<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> fade-in" data-transaction-hash="<%= @transaction.hash %>">
-  <td><div class="transaction__dot transaction__dot--<%= status(@transaction) %>"></div></td>
+  <div class="row">
-  <td>
+    <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
+      <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column">
       <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
-  </td>
+      <span>
-  <td>
+        <%= if @address.hash == @transaction.from_address_hash do %>
-    <%= link(
+          <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @transaction.from_address_hash %>
-          @transaction.block,
+        <% else %>
-          to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
-        ) %>
-  </td>
-  <td data-from-now="<%= @transaction.block.timestamp %>"></td>
-  <td class="address-cell">
           <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), address_hash: @transaction.from_address_hash %>
-  </td>
+        <% end %>
-  <td class="u-text-center"><i class="fas fa-arrow-circle-right"></i></td>
+        &rarr;
-  <td>
+        <%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %>
-    <%= cond do %>
+          <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction) %>
-      <% @transaction.to_address_hash != nil -> %>
+        <% else %>
-        <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), address_hash: @transaction.to_address_hash %>
+          <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction) %>
-      <% @transaction.created_contract_address_hash != nil -> %>
+        <% end %>
-        <i class="fas fa-plus-square"></i>
+      </span>
+      <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> POA
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start justify-content-md-end align-items-end text-md-right">
+      <%= if @address.hash == @transaction.from_address_hash do %>
+        <span class="badge badge-warning tile-badge  mr-2 mr-md-0">OUT</span>
+      <% else %>
+        <span class="badge badge-success tile-badge mr-2 mr-md-0">IN</span>
+      <% end %>
+      <span class="mr-2 mr-sm-0" data-from-now="<%= @transaction.block.timestamp %>"></span>
       <%= link(
-          gettext("Contract Creation"),
+        gettext("Block #") <> "#{@transaction.block.number}",
-          class: "transaction__link",
+        to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
-          "data-address-hash": @transaction.created_contract_address_hash,
-          to: address_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.created_contract_address_hash),
-          title: @transaction.created_contract_address_hash
       ) %>
-      <% true -> %>
+    </div>
-    <% end %>
+  </div>
-  </td>
+</div>
-  <td><%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %></td>
-  <td><%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %></td>
-</tr>

apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex

@@ -1,11 +1,13 @@
-<section class="container-fluid">
+<section class="container">
 
   <%= render ExplorerWeb.AddressView, "overview.html", assigns %>
 
   <section>
     <div class="card">
       <div class="card-header">
-        <ul class="nav nav-tabs card-header-tabs">
+
+        <!-- DESKTOP TAB NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-none d-md-inline-flex">
           <li class="nav-item">
             <%= link(
                   gettext("Transactions"),
@@ -35,17 +37,49 @@
             </li>
           <% end %>
         </ul>
+
+        <!-- MOBILE DROPDOWN NAV -->
+        <ul class="nav nav-tabs card-header-tabs d-md-none">
+          <li class="nav-item dropdown flex-fill text-center">
+            <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Transactions</a>
+            <div class="dropdown-menu">
+              <%= link(
+                    gettext("Transactions"),
+                    class: "dropdown-item",
+                    to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                  ) %>
+              <%= link(
+                    gettext("Internal Transactions"),
+                    class: "dropdown-item",
+                    "data-test": "internal_transactions_tab_link",
+                    to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"])
+                  ) %>
+              <%= if contract?(@address) do %>
+                <%= link(
+                    to: address_contract_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]),
+                    class: "dropdown-item") do %>
+                  <%= gettext("Code") %>
+
+                  <%= if smart_contract_verified?(@address) do %>
+                    <i class="far fa-check-circle"></i>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          </li>
+        </ul>
       </div>
+
       <div class="card-body">
         <div data-selector="channel-batching-message" style="display:none;">
-          <button data-selector="reload-button">
+          <div data-selector="reload-button" class="alert alert-info">
-            <span data-selector="channel-batching-count"></span> <%= gettext "more messages have come in" %>
+            <a href="#" class="alert-link" data-selector="channel-batching-count"><%= gettext "More messages have come in" %></a>
-          </button>
+          </div>
         </div>
         <div data-selector="channel-disconnected-message" style="display:none;">
-          <button data-selector="reload-button">
+          <div data-selector="reload-button" class="alert alert-danger">
-            <%= gettext "connection lost, click to load newer transactions" %>
+            <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>
-          </button>
+          </div>
         </div>
         <div class="dropdown float-right u-push-sm">
           <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
@@ -86,30 +120,16 @@
           </div>
         </div>
         <%= if Enum.count(@transactions) > 0 do %>
-          <table class="table table-responsive table-font">
+          <h2 class="card-title"><%= gettext "Transactions" %></h2>
-            <thead>
+          <span data-selector="transactions-list">
-              <tr>
-                <th class="transactions__column-header transactions__column-header--status">
-                  <span class="transactions__column-title transactions__column-title--status"><%= gettext "Status" %></span>
-                </th>
-                <th><%= gettext "Hash" %></th>
-                <th><%= gettext "Block" %></th>
-                <th><%= gettext "Age" %></th>
-                <th><%= gettext "From" %></th>
-                <th></th>
-                <th><%= gettext "To" %></th>
-                <th><%= gettext "Value" %> (<%= gettext "Ether" %>)</th>
-                <th><%= gettext "Fee" %></th>
-              </tr>
-            </thead>
-            <tbody data-selector='transactions-list'>
             <%= for transaction <- @transactions do %>
-                <%= render "_transaction.html", locale: @locale, transaction: transaction %>
+              <%= render "_transaction.html", locale: @locale, address: @address, transaction: transaction %>
             <% end %>
-            </tbody>
+          </span>
-          </table>
         <% else %>
-          <p data-selector="empty-transactions-list"><%= gettext "There are no Transactions" %></p>
+          <div class="tile tile-muted text-center">
+            <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this address." %></span>
+          </div>
         <% end %>
       </div>
     </div>

apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex

@@ -147,7 +147,7 @@
             </thead>
             <tbody>
               <%= for transaction <- @transactions do %>
-                <tr>
+                <tr data-transaction-hash="<%= transaction.hash %>">
                   <td>
                     <div class="transaction__dot transaction__dot--<%= status(transaction) %>"></div>
                   </td>

apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex

@@ -3,7 +3,7 @@
     <%= link(gettext("View All Transactions →"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Transactions" %></h2>
     <%= for transaction <- @chain.transactions do %>
-    <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>">
+    <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>">
       <div class="row" data-test="chain_transaction">
         <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
           <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %>
@@ -13,7 +13,7 @@
           <span>
             <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), address_hash: transaction.from_address_hash %>
             &rarr;
-            <%= render ExplorerWeb.AddressView, "_link.html", ExplorerWeb.TransactionView.display_to_address(transaction, locale: @locale, contract: ExplorerWeb.AddressView.contract?(transaction.to_address)) %>
+            <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(transaction.to_address), address_hash: ExplorerWeb.TransactionView.to_address_hash(transaction) %>
           </span>
           <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
         </div>

apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex

@@ -1,16 +1,16 @@
 <footer class="footer">
   <div class="footer-body container">
-    <div class="social-links">
+    <div class="icon-links icon-links-primary">
-      <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Facebook") %>">
+      <a href="https://www.facebook.com/PoaNetwork/" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Facebook") %>">
         <i class="fab fa-facebook-f"></i>
       </a>
-      <a href="https://www.instagram.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Instagram") %>">
+      <a href="https://www.instagram.com/PoaNetwork/" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Instagram") %>">
         <i class="fab fa-instagram"></i>
       </a>
-      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Twitter") %>">
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Twitter") %>">
         <i class="fab fa-twitter"></i>
       </a>
-      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Telegram") %>">
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Telegram") %>">
         <i class="fab fa-telegram-plane"></i>
       </a>
     </div>

apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex

@@ -11,7 +11,7 @@
   <body>
     <div class="layout-container">
       <%= render ExplorerWeb.LayoutView, "_topnav.html", assigns %>
-      <main class="mt-3">
+      <main class="pt-5">
         <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
         <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
         <%= render @view_module, @view_template, assigns %>

apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex

@@ -41,7 +41,7 @@
         </thead>
         <tbody>
           <%= for transaction <- @transactions do %>
-            <tr>
+            <tr data-transaction-hash="<%= transaction.hash %>">
               <td>
                 <div class="transaction__dot transaction__dot--pending"></div>
               </td>

apps/explorer_web/lib/explorer_web/templates/transaction/_link.html.eex

@@ -1,5 +1,4 @@
 <%= link(@transaction_hash,
     to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, @transaction_hash),
-    "data-test": "transaction_hash",
+    "data-test": "transaction_hash_link",
-    "data-transaction-hash": @transaction_hash,
     "class": "tile-title text-truncate") %>

apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex

@@ -42,7 +42,7 @@
           </thead>
           <tbody>
             <%= for transaction <- @transactions do %>
-              <tr>
+              <tr data-transaction-hash="<%= transaction.hash %>">
                 <td>
                   <div class="transaction__dot transaction__dot--<%= status(transaction) %>"></div>
                 </td>

apps/explorer_web/lib/explorer_web/views/internal_transaction_view.ex

@@ -6,4 +6,9 @@ defmodule ExplorerWeb.InternalTransactionView do
 
   def create?(%InternalTransaction{type: :create}), do: true
   def create?(_), do: false
+
+  # This is the address to be shown in the to field
+  def to_address_hash(%InternalTransaction{to_address_hash: nil, created_contract_address_hash: hash}), do: hash
+
+  def to_address_hash(%InternalTransaction{to_address_hash: hash}), do: hash
 end

apps/explorer_web/lib/explorer_web/views/transaction_view.ex

@@ -20,15 +20,9 @@ defmodule ExplorerWeb.TransactionView do
   end
 
   # This is the address to be shown in the to field
-  def display_to_address(transaction, opts \\ [])
+  def to_address_hash(%Transaction{to_address_hash: nil, created_contract_address_hash: address_hash}), do: address_hash
 
-  def display_to_address(%Transaction{to_address_hash: nil, created_contract_address_hash: address_hash}, opts) do
+  def to_address_hash(%Transaction{to_address: %Address{hash: address_hash}}), do: address_hash
-    Keyword.merge(opts, address_hash: address_hash)
-  end
-
-  def display_to_address(%Transaction{to_address: %Address{hash: address_hash}}, opts) do
-    Keyword.merge(opts, address_hash: address_hash)
-  end
 
   def formatted_fee(%Transaction{} = transaction, opts) do
     transaction

apps/explorer_web/priv/gettext/default.pot

@@ -1,5 +1,3 @@
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:83
-#: lib/explorer_web/templates/address_transaction/index.html.eex:97
 #: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:141
 #: lib/explorer_web/templates/transaction/index.html.eex:37
@@ -7,8 +5,6 @@
 msgid "Age"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:82
-#: lib/explorer_web/templates/address_transaction/index.html.eex:96
 #: lib/explorer_web/templates/block_transaction/index.html.eex:140
 #: lib/explorer_web/templates/transaction/index.html.eex:36
 msgid "Block"
@@ -30,7 +26,6 @@ msgstr ""
 msgid "Gas Used"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:95
 #: lib/explorer_web/templates/block_transaction/index.html.eex:30
 #: lib/explorer_web/templates/block_transaction/index.html.eex:139
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:35
@@ -46,9 +41,13 @@ msgstr ""
 msgid "POA Network Explorer"
 msgstr ""
 
+#: lib/explorer_web/templates/address/overview.html.eex:21
 #: lib/explorer_web/templates/address_contract/index.html.eex:10
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:11
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:13
-#: lib/explorer_web/templates/address_transaction/index.html.eex:11
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_transaction/index.html.eex:13
+#: lib/explorer_web/templates/address_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_transaction/index.html.eex:123
 #: lib/explorer_web/templates/block/index.html.eex:19
 #: lib/explorer_web/templates/block_transaction/index.html.eex:124
 #: lib/explorer_web/templates/chain/_transactions.html.eex:4
@@ -56,8 +55,6 @@ msgstr ""
 msgid "Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
-#: lib/explorer_web/templates/address_transaction/index.html.eex:101
 #: lib/explorer_web/templates/block_transaction/index.html.eex:145
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
@@ -149,10 +146,8 @@ msgstr ""
 msgid "Address"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:65
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:98
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:84
+#: lib/explorer_web/templates/address_transaction/index.html.eex:109
-#: lib/explorer_web/templates/address_transaction/index.html.eex:75
-#: lib/explorer_web/templates/address_transaction/index.html.eex:98
 #: lib/explorer_web/templates/block_transaction/index.html.eex:142
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:37
 #: lib/explorer_web/templates/transaction/index.html.eex:38
@@ -168,14 +163,12 @@ msgstr ""
 msgid "Overview"
 msgstr ""
 
-#: lib/explorer_web/views/transaction_view.ex:76
+#: lib/explorer_web/views/transaction_view.ex:70
 msgid "Success"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:53
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:85
+#: lib/explorer_web/templates/address_transaction/index.html.eex:97
-#: lib/explorer_web/templates/address_transaction/index.html.eex:63
-#: lib/explorer_web/templates/address_transaction/index.html.eex:100
 #: lib/explorer_web/templates/block_transaction/index.html.eex:144
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:38
 #: lib/explorer_web/templates/transaction/index.html.eex:39
@@ -225,8 +218,8 @@ msgstr ""
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/overview.html.eex:57
-#: lib/explorer_web/views/transaction_view.ex:44
+#: lib/explorer_web/views/transaction_view.ex:38
-#: lib/explorer_web/views/transaction_view.ex:75
+#: lib/explorer_web/views/transaction_view.ex:69
 msgid "Pending"
 msgstr ""
 
@@ -288,15 +281,14 @@ msgstr ""
 msgid "Next Page"
 msgstr ""
 
-#: lib/explorer_web/views/transaction_view.ex:73
+#: lib/explorer_web/views/transaction_view.ex:67
 msgid "Failed"
 msgstr ""
 
-#: lib/explorer_web/views/transaction_view.ex:74
+#: lib/explorer_web/views/transaction_view.ex:68
 msgid "Out of Gas"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:93
 #: lib/explorer_web/templates/block_transaction/index.html.eex:137
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:33
 #: lib/explorer_web/templates/transaction/index.html.eex:34
@@ -312,8 +304,6 @@ msgid "Showing #%{number}"
 msgstr ""
 
 #: lib/explorer_web/templates/address/_values.html.eex:4
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
-#: lib/explorer_web/templates/address_transaction/index.html.eex:101
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
 #: lib/explorer_web/templates/transaction/overview.html.eex:63
@@ -329,8 +319,11 @@ msgid "Gwei"
 msgstr ""
 
 #: lib/explorer_web/templates/address_contract/index.html.eex:17
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:18
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:20
-#: lib/explorer_web/templates/address_transaction/index.html.eex:18
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:52
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:111
+#: lib/explorer_web/templates/address_transaction/index.html.eex:20
+#: lib/explorer_web/templates/address_transaction/index.html.eex:52
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:11
 #: lib/explorer_web/templates/transaction_log/index.html.eex:11
 msgid "Internal Transactions"
@@ -340,7 +333,6 @@ msgstr ""
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:123
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:64
 msgid "There are no Internal Transactions"
 msgstr ""
@@ -369,8 +361,8 @@ msgstr ""
 msgid "Wei"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:80
-#: lib/explorer_web/templates/address_transaction/index.html.eex:57
+#: lib/explorer_web/templates/address_transaction/index.html.eex:91
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
 #: lib/explorer_web/views/address_transaction_view.ex:12
 msgid "All"
@@ -453,7 +445,7 @@ msgid "Total Gas Used"
 msgstr ""
 
 #: lib/explorer_web/templates/block_transaction/index.html.eex:22
-#: lib/explorer_web/views/transaction_view.ex:119
+#: lib/explorer_web/views/transaction_view.ex:113
 msgid "Transaction"
 msgstr ""
 
@@ -471,7 +463,7 @@ msgstr ""
 msgid "TX Fee"
 msgstr ""
 
-#: lib/explorer_web/views/transaction_view.ex:118
+#: lib/explorer_web/views/transaction_view.ex:112
 msgid "Contract"
 msgstr ""
 
@@ -483,13 +475,12 @@ msgstr ""
 msgid "Contract bytecode"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:112
 #: lib/explorer_web/templates/block_transaction/index.html.eex:192
 msgid "There are no Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:129
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:125
-#: lib/explorer_web/templates/address_transaction/index.html.eex:118
+#: lib/explorer_web/templates/address_transaction/index.html.eex:138
 #: lib/explorer_web/templates/block/index.html.eex:60
 #: lib/explorer_web/templates/block_transaction/index.html.eex:198
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:73
@@ -506,8 +497,10 @@ msgid "Verify and Publish"
 msgstr ""
 
 #: lib/explorer_web/templates/address_contract/index.html.eex:27
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:29
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:31
-#: lib/explorer_web/templates/address_transaction/index.html.eex:29
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:61
+#: lib/explorer_web/templates/address_transaction/index.html.eex:31
+#: lib/explorer_web/templates/address_transaction/index.html.eex:61
 msgid "Code"
 msgstr ""
 
@@ -530,12 +523,10 @@ msgid "Newer"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:107
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:24
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:59
 #: lib/explorer_web/templates/transaction/overview.html.eex:109
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:47
-#: lib/explorer_web/views/transaction_view.ex:117
+#: lib/explorer_web/views/transaction_view.ex:111
 msgid "Contract Creation"
 msgstr ""
 
@@ -575,16 +566,7 @@ msgid "Twitter"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:31
-msgid "connection lost, click to load newer transactions"
-msgstr ""
-
-#, elixir-format
-#: lib/explorer_web/templates/address_transaction/index.html.eex:42
-msgid "more messages have come in"
-msgstr ""
-
-#, elixir-format
 #: lib/explorer_web/templates/chain/_transactions.html.eex:23
 msgid "Block #"
 msgstr ""
@@ -618,3 +600,39 @@ msgstr ""
 #: lib/explorer_web/templates/transaction/overview.html.eex:46
 msgid "block confirmations"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address_transaction/index.html.eex:81
+msgid "Connection Lost, click to load newer transactions"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address/overview.html.eex:8
+msgid "Copy Address"
+msgstr ""
+
+#, elixir-format
+#:
+#: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:4
+msgid "Internal Transaction"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address_transaction/index.html.eex:76
+msgid "More messages have come in"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address/overview.html.eex:13
+msgid "QR Code"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:118
+msgid "There are no internal transactions for this address."
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address_transaction/index.html.eex:131
+msgid "There are no transactions for this address."
+msgstr ""

apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -10,8 +10,6 @@ msgid ""
 msgstr ""
 "Language: en\n"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:83
-#: lib/explorer_web/templates/address_transaction/index.html.eex:97
 #: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:141
 #: lib/explorer_web/templates/transaction/index.html.eex:37
@@ -19,8 +17,6 @@ msgstr ""
 msgid "Age"
 msgstr "Age"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:82
-#: lib/explorer_web/templates/address_transaction/index.html.eex:96
 #: lib/explorer_web/templates/block_transaction/index.html.eex:140
 #: lib/explorer_web/templates/transaction/index.html.eex:36
 msgid "Block"
@@ -42,7 +38,6 @@ msgstr "%{year} POA Network Ltd. All rights reserved"
 msgid "Gas Used"
 msgstr "Gas Used"
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:95
 #: lib/explorer_web/templates/block_transaction/index.html.eex:30
 #: lib/explorer_web/templates/block_transaction/index.html.eex:139
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:35
@@ -58,9 +53,13 @@ msgstr "Height"
 msgid "POA Network Explorer"
 msgstr "POA Network Explorer"
 
+#: lib/explorer_web/templates/address/overview.html.eex:21
 #: lib/explorer_web/templates/address_contract/index.html.eex:10
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:11
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:13
-#: lib/explorer_web/templates/address_transaction/index.html.eex:11
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_transaction/index.html.eex:13
+#: lib/explorer_web/templates/address_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_transaction/index.html.eex:123
 #: lib/explorer_web/templates/block/index.html.eex:19
 #: lib/explorer_web/templates/block_transaction/index.html.eex:124
 #: lib/explorer_web/templates/chain/_transactions.html.eex:4
@@ -68,8 +67,6 @@ msgstr "POA Network Explorer"
 msgid "Transactions"
 msgstr "Transactions"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
-#: lib/explorer_web/templates/address_transaction/index.html.eex:101
 #: lib/explorer_web/templates/block_transaction/index.html.eex:145
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
@@ -161,10 +158,8 @@ msgstr "%{count} transactions in this block"
 msgid "Address"
 msgstr "Address"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:65
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:98
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:84
+#: lib/explorer_web/templates/address_transaction/index.html.eex:109
-#: lib/explorer_web/templates/address_transaction/index.html.eex:75
-#: lib/explorer_web/templates/address_transaction/index.html.eex:98
 #: lib/explorer_web/templates/block_transaction/index.html.eex:142
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:37
 #: lib/explorer_web/templates/transaction/index.html.eex:38
@@ -180,14 +175,12 @@ msgstr "From"
 msgid "Overview"
 msgstr "Overview"
 
-#: lib/explorer_web/views/transaction_view.ex:76
+#: lib/explorer_web/views/transaction_view.ex:70
 msgid "Success"
 msgstr "Success"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:53
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:85
+#: lib/explorer_web/templates/address_transaction/index.html.eex:97
-#: lib/explorer_web/templates/address_transaction/index.html.eex:63
-#: lib/explorer_web/templates/address_transaction/index.html.eex:100
 #: lib/explorer_web/templates/block_transaction/index.html.eex:144
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:38
 #: lib/explorer_web/templates/transaction/index.html.eex:39
@@ -237,8 +230,8 @@ msgstr "Showing %{count} Transactions"
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/overview.html.eex:57
-#: lib/explorer_web/views/transaction_view.ex:44
+#: lib/explorer_web/views/transaction_view.ex:38
-#: lib/explorer_web/views/transaction_view.ex:75
+#: lib/explorer_web/views/transaction_view.ex:69
 msgid "Pending"
 msgstr "Pending"
 
@@ -300,15 +293,14 @@ msgstr ""
 msgid "Next Page"
 msgstr ""
 
-#: lib/explorer_web/views/transaction_view.ex:73
+#: lib/explorer_web/views/transaction_view.ex:67
 msgid "Failed"
 msgstr ""
 
-#: lib/explorer_web/views/transaction_view.ex:74
+#: lib/explorer_web/views/transaction_view.ex:68
 msgid "Out of Gas"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:93
 #: lib/explorer_web/templates/block_transaction/index.html.eex:137
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:33
 #: lib/explorer_web/templates/transaction/index.html.eex:34
@@ -324,8 +316,6 @@ msgid "Showing #%{number}"
 msgstr ""
 
 #: lib/explorer_web/templates/address/_values.html.eex:4
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
-#: lib/explorer_web/templates/address_transaction/index.html.eex:101
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
 #: lib/explorer_web/templates/transaction/overview.html.eex:63
@@ -341,8 +331,11 @@ msgid "Gwei"
 msgstr ""
 
 #: lib/explorer_web/templates/address_contract/index.html.eex:17
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:18
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:20
-#: lib/explorer_web/templates/address_transaction/index.html.eex:18
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:52
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:111
+#: lib/explorer_web/templates/address_transaction/index.html.eex:20
+#: lib/explorer_web/templates/address_transaction/index.html.eex:52
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:11
 #: lib/explorer_web/templates/transaction_log/index.html.eex:11
 msgid "Internal Transactions"
@@ -352,7 +345,6 @@ msgstr ""
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:123
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:64
 msgid "There are no Internal Transactions"
 msgstr ""
@@ -381,8 +373,8 @@ msgstr ""
 msgid "Wei"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:80
-#: lib/explorer_web/templates/address_transaction/index.html.eex:57
+#: lib/explorer_web/templates/address_transaction/index.html.eex:91
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
 #: lib/explorer_web/views/address_transaction_view.ex:12
 msgid "All"
@@ -465,7 +457,7 @@ msgid "Total Gas Used"
 msgstr ""
 
 #: lib/explorer_web/templates/block_transaction/index.html.eex:22
-#: lib/explorer_web/views/transaction_view.ex:119
+#: lib/explorer_web/views/transaction_view.ex:113
 msgid "Transaction"
 msgstr ""
 
@@ -483,7 +475,7 @@ msgstr ""
 msgid "TX Fee"
 msgstr ""
 
-#: lib/explorer_web/views/transaction_view.ex:118
+#: lib/explorer_web/views/transaction_view.ex:112
 msgid "Contract"
 msgstr ""
 
@@ -495,13 +487,12 @@ msgstr ""
 msgid "Contract bytecode"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:112
 #: lib/explorer_web/templates/block_transaction/index.html.eex:192
 msgid "There are no Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:129
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:125
-#: lib/explorer_web/templates/address_transaction/index.html.eex:118
+#: lib/explorer_web/templates/address_transaction/index.html.eex:138
 #: lib/explorer_web/templates/block/index.html.eex:60
 #: lib/explorer_web/templates/block_transaction/index.html.eex:198
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:73
@@ -518,8 +509,10 @@ msgid "Verify and Publish"
 msgstr ""
 
 #: lib/explorer_web/templates/address_contract/index.html.eex:27
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:29
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:31
-#: lib/explorer_web/templates/address_transaction/index.html.eex:29
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:61
+#: lib/explorer_web/templates/address_transaction/index.html.eex:31
+#: lib/explorer_web/templates/address_transaction/index.html.eex:61
 msgid "Code"
 msgstr ""
 
@@ -542,12 +535,10 @@ msgid "Newer"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:107
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:24
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:59
 #: lib/explorer_web/templates/transaction/overview.html.eex:109
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:47
-#: lib/explorer_web/views/transaction_view.ex:117
+#: lib/explorer_web/views/transaction_view.ex:111
 msgid "Contract Creation"
 msgstr ""
 
@@ -587,16 +578,7 @@ msgid "Twitter"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_transaction/index.html.eex:47
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:31
-msgid "connection lost, click to load newer transactions"
-msgstr ""
-
-#, elixir-format
-#: lib/explorer_web/templates/address_transaction/index.html.eex:42
-msgid "more messages have come in"
-msgstr ""
-
-#, elixir-format
 #: lib/explorer_web/templates/chain/_transactions.html.eex:23
 msgid "Block #"
 msgstr ""
@@ -630,3 +612,39 @@ msgstr ""
 #: lib/explorer_web/templates/transaction/overview.html.eex:46
 msgid "block confirmations"
 msgstr ""
+
+#, elixir-format, fuzzy
+#: lib/explorer_web/templates/address_transaction/index.html.eex:81
+msgid "Connection Lost, click to load newer transactions"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address/overview.html.eex:8
+msgid "Copy Address"
+msgstr ""
+
+#, elixir-format
+#:
+#: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:4
+msgid "Internal Transaction"
+msgstr ""
+
+#, elixir-format, fuzzy
+#: lib/explorer_web/templates/address_transaction/index.html.eex:76
+msgid "More messages have come in"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address/overview.html.eex:13
+msgid "QR Code"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:118
+msgid "There are no internal transactions for this address."
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address_transaction/index.html.eex:131
+msgid "There are no transactions for this address."
+msgstr ""

apps/explorer_web/test/explorer_web/controllers/address_internal_transaction_controller_test.exs

@@ -180,28 +180,5 @@ defmodule ExplorerWeb.AddressInternalTransactionControllerTest do
 
       refute conn.assigns.next_page_params
     end
-
-    test "returns parent transaction for a contract address", %{conn: conn} do
-      address = insert(:address, contract_code: data(:address_contract_code))
-      block = insert(:block)
-
-      transaction =
-        :transaction
-        |> insert(to_address: nil)
-        |> with_block(block)
-
-      internal_transaction =
-        insert(
-          :internal_transaction_create,
-          index: 0,
-          created_contract_address: address,
-          to_address: nil,
-          transaction: transaction
-        )
-
-      conn = get(conn, address_internal_transaction_path(conn, :index, :en, address))
-
-      assert internal_transaction.id == hd(conn.assigns.internal_transactions).id
-    end
   end
 end

apps/explorer_web/test/explorer_web/features/pages/address_page.ex

@@ -20,7 +20,7 @@ defmodule ExplorerWeb.AddressPage do
   end
 
   def contract_creation(%InternalTransaction{created_contract_address_hash: hash}) do
-    css("[data-address-hash='#{hash}']", text: "Contract Creation")
+    css("[data-address-hash='#{hash}']", text: to_string(hash))
   end
 
   def detail_hash(%Address{hash: address_hash}) do
@@ -31,6 +31,14 @@ defmodule ExplorerWeb.AddressPage do
     css("[data-test='internal_transaction']", count: count)
   end
 
+  def internal_transaction_address_link(%InternalTransaction{id: id, to_address_hash: address_hash}, :to) do
+    css("[data-internal-transaction-id='#{id}'] [data-address-hash='#{address_hash}'][data-test='address_hash_link']")
+  end
+
+  def internal_transaction_address_link(%InternalTransaction{id: id, from_address_hash: address_hash}, :from) do
+    css("[data-internal-transaction-id='#{id}'] [data-address-hash='#{address_hash}'][data-test='address_hash_link']")
+  end
+
   def transaction(%Transaction{hash: transaction_hash}), do: transaction(transaction_hash)
 
   def transaction(%Hash{} = hash) do
@@ -40,7 +48,15 @@ defmodule ExplorerWeb.AddressPage do
   end
 
   def transaction(transaction_hash) do
-    css("[data-test='transaction_hash'][data-transaction-hash='#{transaction_hash}']")
+    css("[data-transaction-hash='#{transaction_hash}']")
+  end
+
+  def transaction_address_link(%Transaction{hash: hash, to_address_hash: address_hash}, :to) do
+    css("[data-transaction-hash='#{hash}'] [data-address-hash='#{address_hash}'][data-test='address_hash_link']")
+  end
+
+  def transaction_address_link(%Transaction{hash: hash, from_address_hash: address_hash}, :from) do
+    css("[data-transaction-hash='#{hash}'] [data-address-hash='#{address_hash}'][data-test='address_hash_link']")
   end
 
   def transaction_count do

apps/explorer_web/test/explorer_web/features/pages/transaction_list_page.ex

@@ -8,7 +8,7 @@ defmodule ExplorerWeb.TransactionListPage do
   alias Explorer.Chain.{InternalTransaction, Transaction}
 
   def click_transaction(session, %Transaction{hash: transaction_hash}) do
-    click(session, css("[data-test='transaction_hash'][data-transaction-hash='#{transaction_hash}']"))
+    click(session, css("[data-transaction-hash='#{transaction_hash}'] [data-test='transaction_hash_link']"))
   end
 
   def click_pending(session) do
@@ -20,7 +20,7 @@ defmodule ExplorerWeb.TransactionListPage do
   end
 
   def transaction(%Transaction{hash: transaction_hash}) do
-    css("[data-test='transaction_hash'][data-transaction-hash='#{transaction_hash}']")
+    css("[data-transaction-hash='#{transaction_hash}']")
   end
 
   def visit_page(session) do

apps/explorer_web/test/explorer_web/features/viewing_addresses_test.exs

@@ -2,14 +2,15 @@ defmodule ExplorerWeb.ViewingAddressesTest do
   use ExplorerWeb.FeatureCase, async: true
 
   alias Explorer.Chain
-  alias Explorer.Chain.Address
+  alias Explorer.Chain.{Address, Wei}
   alias Explorer.ExchangeRates.Token
   alias ExplorerWeb.{AddressPage, HomePage}
 
   setup do
     block = insert(:block)
 
-    lincoln = insert(:address)
+    {:ok, balance} = Wei.cast(5)
+    lincoln = insert(:address, fetched_balance: balance)
     taft = insert(:address)
 
     from_taft =
@@ -107,15 +108,28 @@ defmodule ExplorerWeb.ViewingAddressesTest do
       |> AddressPage.visit_page(addresses.lincoln)
       |> assert_has(AddressPage.contract_creation(internal_transaction))
     end
+
+    test "only addresses not matching the page are links", %{
+      addresses: addresses,
+      session: session,
+      transactions: transactions
+    } do
+      session
+      |> AddressPage.visit_page(addresses.lincoln)
+      |> assert_has(AddressPage.transaction_address_link(transactions.from_lincoln, :to))
+    end
   end
 
   describe "viewing internal transactions" do
     setup %{addresses: addresses, transactions: transactions} do
       address = addresses.lincoln
       transaction = transactions.from_lincoln
+
+      internal_transaction_lincoln_to_address =
         insert(:internal_transaction, transaction: transaction, to_address: address, index: 0)
+
       insert(:internal_transaction, transaction: transaction, from_address: address, index: 1)
-      :ok
+      {:ok, %{internal_transaction_lincoln_to_address: internal_transaction_lincoln_to_address}}
     end
 
     test "can see internal transactions for an address", %{addresses: addresses, session: session} do
@@ -140,6 +154,17 @@ defmodule ExplorerWeb.ViewingAddressesTest do
       |> AddressPage.apply_filter("To")
       |> assert_has(AddressPage.internal_transactions(count: 1))
     end
+
+    test "only addresses not matching the page are links", %{
+      addresses: addresses,
+      internal_transaction_lincoln_to_address: internal_transaction,
+      session: session
+    } do
+      session
+      |> AddressPage.visit_page(addresses.lincoln)
+      |> AddressPage.click_internal_transactions()
+      |> assert_has(AddressPage.internal_transaction_address_link(internal_transaction, :from))
+    end
   end
 
   test "viewing transaction count", %{addresses: addresses, session: session} do
@@ -162,7 +187,10 @@ defmodule ExplorerWeb.ViewingAddressesTest do
       |> with_block()
       |> Repo.preload([:block, :from_address, :to_address])
 
-    ExplorerWeb.Endpoint.broadcast!("addresses:#{addresses.lincoln.hash}", "transaction", %{transaction: transaction})
+    ExplorerWeb.Endpoint.broadcast!("addresses:#{addresses.lincoln.hash}", "transaction", %{
+      address: addresses.lincoln,
+      transaction: transaction
+    })
 
     assert_has(session, AddressPage.transaction(transaction))
   end
@@ -193,4 +221,30 @@ defmodule ExplorerWeb.ViewingAddressesTest do
 
     assert_text(session, AddressPage.balance(), "0.0000000000000001 POA")
   end
+
+  test "contract creation is shown for to_address on list page", %{
+    addresses: addresses,
+    block: block,
+    session: session
+  } do
+    lincoln = addresses.lincoln
+
+    from_lincoln =
+      :transaction
+      |> insert(from_address: lincoln, to_address: nil)
+      |> with_block(block)
+
+    internal_transaction =
+      insert(
+        :internal_transaction_create,
+        transaction: from_lincoln,
+        from_address: lincoln,
+        index: 0
+      )
+
+    session
+    |> AddressPage.visit_page(addresses.lincoln)
+    |> AddressPage.click_internal_transactions()
+    |> assert_has(AddressPage.contract_creation(internal_transaction))
+  end
 end