Replace logo and main theme

22 files changed, 399 insertions, 276 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 7669a5db..5fe96042 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -203,12 +203,8 @@ class App extends Component {
 
     if (providerName === 'mainnet') {
       name = this.context.t('connectingToMainnet')
-    } else if (providerName === 'ropsten') {
-      name = this.context.t('connectingToRopsten')
-    } else if (providerName === 'kovan') {
-      name = this.context.t('connectingToKovan')
-    } else if (providerName === 'rinkeby') {
-      name = this.context.t('connectingToRinkeby')
+    } else if (providerName === 'testnet') {
+      name = this.context.t('connectingToTestnet')
     } else {
       name = this.context.t('connectingToUnknown')
     }
@@ -224,12 +220,8 @@ class App extends Component {
 
     if (providerName === 'mainnet') {
       name = this.context.t('mainnet')
-    } else if (providerName === 'ropsten') {
-      name = this.context.t('ropsten')
-    } else if (providerName === 'kovan') {
-      name = this.context.t('kovan')
-    } else if (providerName === 'rinkeby') {
-      name = this.context.t('rinkeby')
+    } else if (providerName === 'testnet') {
+      name = this.context.t('testnet')
     } else {
       name = this.context.t('unknownNetwork')
     }
diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
index b7c01154..b799ba9f 100644
--- a/ui/app/components/app-header/app-header.component.js
+++ b/ui/app/components/app-header/app-header.component.js
@@ -120,14 +120,14 @@ export default class AppHeader extends PureComponent {
           >
             <img
               className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
+              src="/images/dekusan.svg"
+              height={40}
             />
             <img
               className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/cobinhood.svg"
-              height={42}
-              width={42}
+              src="/images/dekusan.svg"
+              height={36}
+              width={36}
             />
           </div>
           <div className="app-header__account-menu-container">
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index 2d7413b5..fc37fd66 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { GWEI } from '../../constants/common'
+import { ETH, DEX, GWEI } from '../../constants/common'
 
 export default class CurrencyDisplay extends PureComponent {
   static propTypes = {
@@ -12,7 +12,7 @@ export default class CurrencyDisplay extends PureComponent {
     style: PropTypes.object,
     suffix: PropTypes.string,
     // Used in container
-    currency: PropTypes.string,
+    currency: PropTypes.oneOf([ETH, DEX]),
     denomination: PropTypes.oneOf([GWEI]),
     value: PropTypes.string,
     numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index d4cc695a..28e3a5cf 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -126,7 +126,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#29B6AF', // $java
+          backgroundColor: '#954A97', // $dexon-purple
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -140,66 +140,22 @@ NetworkDropdown.prototype.render = function () {
     h(
       DropdownMenuItem,
       {
-        key: 'ropsten',
+        key: 'testnet',
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setProviderType('ropsten'),
+        onClick: () => props.setProviderType('testnet'),
         style: dropdownMenuItemStyle,
       },
       [
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#ff4a8d', // $wild-strawberry
-          isSelected: providerType === 'ropsten',
+          backgroundColor: '#aeaeae', // $silver-chalice
+          isSelected: providerType === 'testnet',
         }),
         h('span.network-name-item', {
           style: {
-            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
+            color: providerType === 'testnet' ? '#ffffff' : '#9b9b9b',
           },
-        }, this.context.t('ropsten')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'kovan',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setProviderType('kovan'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#7057ff', // $cornflower-blue
-          isSelected: providerType === 'kovan',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('kovan')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'rinkeby',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setProviderType('rinkeby'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#f6c343', // $saffron
-          isSelected: providerType === 'rinkeby',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('rinkeby')),
+        }, this.context.t('testnet')),
       ]
     ),
 
@@ -261,12 +217,8 @@ NetworkDropdown.prototype.getNetworkName = function () {
 
   if (providerName === 'mainnet') {
     name = this.context.t('mainnet')
-  } else if (providerName === 'ropsten') {
-    name = this.context.t('ropsten')
-  } else if (providerName === 'kovan') {
-    name = this.context.t('kovan')
-  } else if (providerName === 'rinkeby') {
-    name = this.context.t('rinkeby')
+  } else if (providerName === 'testnet') {
+    name = this.context.t('testnet')
   } else {
     name = provider.nickname || this.context.t('unknownNetwork')
   }
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
new file mode 100644
index 00000000..48de233a
--- /dev/null
+++ b/ui/app/components/identicon.js
@@ -0,0 +1,124 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const isNode = require('detect-node')
+const findDOMNode = require('react-dom').findDOMNode
+const jazzicon = require('jazzicon')
+const iconFactoryGen = require('../../lib/icon-factory')
+const iconFactory = iconFactoryGen(jazzicon)
+const { toDataUrl } = require('../../lib/blockies')
+
+module.exports = connect(mapStateToProps)(IdenticonComponent)
+
+inherits(IdenticonComponent, Component)
+function IdenticonComponent () {
+  Component.call(this)
+
+  this.defaultDiameter = 46
+}
+
+function mapStateToProps (state) {
+  return {
+    useBlockie: state.metamask.useBlockie,
+  }
+}
+
+IdenticonComponent.prototype.render = function () {
+  var props = this.props
+  const { className = '', address, image } = props
+  var diameter = props.diameter || this.defaultDiameter
+  const style = {
+    height: diameter,
+    width: diameter,
+    borderRadius: diameter / 2,
+  }
+  if (image) {
+    return h('img', {
+      className: `${className} identicon`,
+      src: image,
+      style: {
+        ...style,
+      },
+    })
+  } else if (address) {
+    return h('div', {
+      className: `${className} identicon`,
+      key: 'identicon-' + address,
+      style: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style,
+        overflow: 'hidden',
+      },
+    })
+  } else {
+    return h('img.balance-icon', {
+      className,
+      src: './images/dexon_logo.svg',
+      style: {
+        ...style,
+      },
+    })
+  }
+}
+
+IdenticonComponent.prototype.componentDidMount = function () {
+  var props = this.props
+  const { address, useBlockie } = props
+
+  if (!address) return
+
+  if (!isNode) {
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
+  }
+}
+
+IdenticonComponent.prototype.componentDidUpdate = function () {
+  var props = this.props
+  const { address, useBlockie } = props
+
+  if (!address) return
+
+  if (!isNode) {
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    var children = container.children
+    for (var i = 0; i < children.length; i++) {
+      container.removeChild(children[i])
+    }
+
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
+  }
+}
+
+function _generateBlockie (container, address, diameter) {
+  const img = new Image()
+  img.src = toDataUrl(address)
+  img.height = diameter
+  img.width = diameter
+  container.appendChild(img)
+}
+
+function _generateJazzicon (container, address, diameter) {
+  const img = iconFactory.iconForAddress(address, diameter)
+  container.appendChild(img)
+}
diff --git a/ui/app/components/menu-bar/index.scss b/ui/app/components/menu-bar/index.scss
index f699f409..13cbbe69 100644
--- a/ui/app/components/menu-bar/index.scss
+++ b/ui/app/components/menu-bar/index.scss
@@ -6,7 +6,7 @@
   flex: 0 0 auto;
   margin-bottom: 16px;
   padding: 5px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid $geyser;
 
   &__sidebar-button {
     font-size: 1.25rem;
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss
index 9d9a127d..873eb9ff 100644
--- a/ui/app/components/modal/index.scss
+++ b/ui/app/components/modal/index.scss
@@ -1,23 +1,28 @@
-@import './modal-content/index';
+@import "./modal-content/index";
+
 .modal-container {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: $dark-gray;
   display: flex;
   flex-flow: column;
   border-radius: 8px;
+
   @media screen and (max-width: 575px) {
     max-height: 450px;
   }
+
   &__content {
     overflow-y: auto;
     flex: 1;
     padding: 16px 32px;
+
     @media screen and (max-width: 575px) {
       justify-content: center;
       padding: 28px 20px;
     }
   }
+
   &__header {
     position: relative;
     display: flex;
@@ -26,6 +31,7 @@
     border-bottom: 1px solid $geyser;
     flex: 0 0 auto;
   }
+
   &__header-close::after {
     content: '\00D7';
     font-size: 40px;
@@ -35,6 +41,7 @@
     right: 10px;
     cursor: pointer;
   }
+
   &__footer {
     display: flex;
     flex-flow: row;
@@ -42,12 +49,14 @@
     border-top: 1px solid $geyser;
     padding: 16px;
     flex: 0 0 auto;
+
     &-button {
       min-width: 0;
       margin-right: 16px;
+
       &:last-of-type {
         margin-right: 0;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 09137d39..99e79a42 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -133,7 +133,7 @@ DepositEtherModal.prototype.render = function () {
 
     h('div.page-container__header', [
 
-      h('div.page-container__title', [this.context.t('depositEther')]),
+      h('div.page-container__title', [this.context.t('depositDex')]),
 
       h('div.page-container__subtitle', [
         this.context.t('needEtherInWallet'),
@@ -172,41 +172,6 @@ DepositEtherModal.prototype.render = function () {
           onButtonClick: () => toFaucet(network),
           hide: !isTestNetwork || buyingWithShapeshift,
         }),
-
-        this.renderRow({
-          logo: h('div.deposit-ether-modal__logo', {
-            style: {
-              backgroundImage: 'url(\'./images/coinbase logo.png\')',
-              height: '40px',
-            },
-          }),
-          title: COINBASE_ROW_TITLE,
-          text: COINBASE_ROW_TEXT,
-          buttonLabel: this.context.t('continueToCoinbase'),
-          onButtonClick: () => toCoinbase(address),
-          hide: isTestNetwork || buyingWithShapeshift,
-        }),
-
-        this.renderRow({
-          logo: h('div.deposit-ether-modal__logo', {
-            style: {
-              backgroundImage: 'url(\'./images/shapeshift logo.png\')',
-            },
-          }),
-          title: SHAPESHIFT_ROW_TITLE,
-          text: SHAPESHIFT_ROW_TEXT,
-          buttonLabel: this.context.t('shapeshiftBuy'),
-          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
-          hide: isTestNetwork,
-          hideButton: buyingWithShapeshift,
-          hideTitle: buyingWithShapeshift,
-          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
-          showBackButton: this.state.buyingWithShapeshift,
-          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
-        }),
-
-        buyingWithShapeshift && h(ShapeshiftForm),
-
       ]),
 
     ]),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 071bc706..8227fec3 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -34,7 +34,7 @@ const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
   border: '1px solid #CCCFD1',
   borderRadius: '8px',
-  backgroundColor: '#FFFFFF',
+  backgroundColor: '#222222',
   boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
 }
 
diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss
index 6fa81d51..c882d940 100644
--- a/ui/app/components/modals/qr-scanner/index.scss
+++ b/ui/app/components/modals/qr-scanner/index.scss
@@ -1,7 +1,7 @@
 .qr-scanner {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: $dark-gray;
   display: flex;
   flex-flow: column;
   border-radius: 8px;
@@ -80,4 +80,3 @@
     font-weight: 300;
   }
 }
-
diff --git a/ui/app/components/network-display/index.scss b/ui/app/components/network-display/index.scss
index e9f2f205..970fde30 100644
--- a/ui/app/components/network-display/index.scss
+++ b/ui/app/components/network-display/index.scss
@@ -12,19 +12,11 @@
     }
 
     &--mainnet {
-      background-color: lighten($blue-lagoon, 68%);
+      background-color: lighten($dexon-purple, 68%);
     }
 
-    &--ropsten {
-      background-color: lighten($crimson, 45%);
-    }
-
-    &--kovan {
-      background-color: lighten($purple, 65%);
-    }
-
-    &--rinkeby {
-      background-color: lighten($tulip-tree, 35%);
+    &--testnet {
+      background-color: lighten($silver-chalice, 68%);
     }
   }
 
@@ -39,19 +31,11 @@
     border-radius: 10px;
 
     &--mainnet {
-      background-color: $blue-lagoon;
-    }
-
-    &--ropsten {
-      background-color: $crimson;
-    }
-
-    &--kovan {
-      background-color: $purple;
+      background-color: $dexon-purple;
     }
 
-    &--rinkeby {
-      background-color: $tulip-tree;
+    &--testnet {
+      background-color: $silver-chalice;
     }
   }
 }
diff --git a/ui/app/components/network-display/network-display.component.js b/ui/app/components/network-display/network-display.component.js
index 22d61709..c9a9162a 100644
--- a/ui/app/components/network-display/network-display.component.js
+++ b/ui/app/components/network-display/network-display.component.js
@@ -3,16 +3,12 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
   MAINNET_CODE,
-  ROPSTEN_CODE,
-  RINKEYBY_CODE,
-  KOVAN_CODE,
+  TESTNET_CODE,
 } from '../../../../app/scripts/controllers/network/enums'
 
 const networkToClassHash = {
   [MAINNET_CODE]: 'mainnet',
-  [ROPSTEN_CODE]: 'ropsten',
-  [RINKEYBY_CODE]: 'rinkeby',
-  [KOVAN_CODE]: 'kovan',
+  [TESTNET_CODE]: 'testnet',
 }
 
 export default class NetworkDisplay extends Component {
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 611aadb7..2c73496a 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -51,19 +51,10 @@ Network.prototype.render = function () {
     ])
   } else if (providerName === 'mainnet') {
     hoverText = context.t('mainnet')
-    iconName = 'ethereum-network'
-  } else if (providerName === 'ropsten') {
-    hoverText = context.t('ropsten')
-    iconName = 'ropsten-test-network'
-  } else if (parseInt(networkNumber) === 3) {
-    hoverText = context.t('ropsten')
-    iconName = 'ropsten-test-network'
-  } else if (providerName === 'kovan') {
-    hoverText = context.t('kovan')
-    iconName = 'kovan-test-network'
-  } else if (providerName === 'rinkeby') {
-    hoverText = context.t('rinkeby')
-    iconName = 'rinkeby-test-network'
+    iconName = 'dexon-network'
+  } else if (providerName === 'testnet') {
+    hoverText = context.t('testnet')
+    iconName = 'dexon-test-network'
   } else {
     hoverText = context.t('unknownNetwork')
     iconName = 'unknown-private-network'
@@ -73,10 +64,8 @@ Network.prototype.render = function () {
     h('div.network-component.pointer', {
       className: classnames({
         'network-component--disabled': this.props.disabled,
-        'ethereum-network': providerName === 'mainnet',
-        'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
-        'kovan-test-network': providerName === 'kovan',
-        'rinkeby-test-network': providerName === 'rinkeby',
+        'dexon-network': providerName === 'mainnet',
+        'dexon-test-network': providerName === 'testnet',
       }),
       title: hoverText,
       onClick: (event) => {
@@ -87,40 +76,22 @@ Network.prototype.render = function () {
     }, [
       (function () {
         switch (iconName) {
-          case 'ethereum-network':
+          case 'dexon-network':
             return h('.network-indicator', [
               h(NetworkDropdownIcon, {
-                backgroundColor: '#038789', // $blue-lagoon
-                nonSelectBackgroundColor: '#15afb2',
+                backgroundColor: '#954A97', // $blue-lagoon
+                nonSelectBackgroundColor: '#954A97',
               }),
               h('.network-name', context.t('mainnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
-          case 'ropsten-test-network':
+          case 'dexon-test-network':
             return h('.network-indicator', [
               h(NetworkDropdownIcon, {
-                backgroundColor: '#e91550', // $crimson
-                nonSelectBackgroundColor: '#ec2c50',
+                backgroundColor: '#aeaeae', // $crimson
+                nonSelectBackgroundColor: '#aeaeae',
               }),
-              h('.network-name', context.t('ropsten')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
-            ])
-          case 'kovan-test-network':
-            return h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#690496', // $purple
-                nonSelectBackgroundColor: '#b039f3',
-              }),
-              h('.network-name', context.t('kovan')),
-              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
-            ])
-          case 'rinkeby-test-network':
-            return h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#ebb33f', // $tulip-tree
-                nonSelectBackgroundColor: '#ecb23e',
-              }),
-              h('.network-name', context.t('rinkeby')),
+              h('.network-name', context.t('testnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index c929f61f..1a2db5f9 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -1,52 +1,57 @@
 .page-container {
   width: 408px;
   background-color: $dark-gray;
-  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   z-index: 25;
   display: flex;
   flex-flow: column;
   border-radius: 8px;
-  overflow-y: auto;
 
   &__header {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
-    padding: 16px;
+    padding: 24px;
     flex: 0 0 auto;
     position: relative;
+
     &--no-padding-bottom {
       padding-bottom: 0;
     }
   }
+
   &__header-close {
-    color: $tundora;
+    color: $white;
     position: absolute;
     top: 16px;
     right: 16px;
     cursor: pointer;
     overflow: hidden;
+
     &::after {
       content: '\00D7';
       font-size: 40px;
       line-height: 20px;
     }
   }
+
   &__header-row {
     padding-bottom: 10px;
     display: flex;
     justify-content: space-between;
   }
+
   &__footer {
     display: flex;
     flex-flow: column;
     justify-content: center;
     border-top: 1px solid $geyser;
     flex: 0 0 auto;
+
     .btn-default,
     .btn-confirm {
       font-size: 1rem;
     }
+
     header {
       display: flex;
       flex-flow: row;
@@ -54,12 +59,14 @@
       padding: 16px;
       flex: 0 0 auto;
     }
+
     footer {
       display: flex;
       flex-flow: row;
       justify-content: space-around;
       padding: 0 16px 16px;
       flex: 0 0 auto;
+
       a,
       a:hover {
         text-decoration: none;
@@ -70,38 +77,44 @@
       }
     }
   }
+
   &__footer-button {
     height: 55px;
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 16px;
+
     &:last-of-type {
       margin-right: 0;
     }
   }
+
   &__back-button {
     color: #2f9ae0;
     font-size: 1rem;
     cursor: pointer;
     font-weight: 400;
   }
+
   &__title {
-    color: $black;
-    font-size: 2rem;
-    font-weight: 500;
-    line-height: 2rem;
-    margin-right: 1.5rem;
+    color: $dexon-purple;
+    font-size: 1.5rem;
+    font-weight: 800;
+    line-height: 1.5rem;
   }
+
   &__subtitle {
     padding-top: .5rem;
     line-height: initial;
     font-size: .9rem;
-    color: $gray;
+    color: $gallery;
   }
+
   &__tabs {
     display: flex;
     margin-top: 16px;
   }
+
   &__tab {
     min-width: 5rem;
     padding: 8px;
@@ -112,38 +125,47 @@
     cursor: pointer;
     border-bottom: none;
     margin-right: 16px;
+
     &:last-of-type {
       margin-right: 0;
     }
+
     &--selected {
       color: $curious-blue;
       border-bottom: 2px solid $curious-blue;
     }
   }
+
   &--full-width {
     width: 100% !important;
   }
+
   &--full-height {
     height: 100% !important;
     max-height: initial !important;
     min-height: initial !important;
   }
+
   &__content {
     overflow-y: auto;
     flex: 1;
   }
+
   &__warning-container {
     background: $linen;
     padding: 20px;
     display: flex;
     align-items: start;
   }
+
   &__warning-message {
     padding-left: 15px;
   }
+
   &__warning-title {
     font-weight: 500;
   }
+
   &__warning-icon {
     padding-top: 5px;
   }
@@ -154,10 +176,12 @@
     &__footer {
       flex-flow: column-reverse;
     }
+
     &__footer-button {
       width: 100%;
       margin-bottom: 1rem;
       margin-right: 0;
+
       &:first-of-type {
         margin-bottom: 0;
       }
@@ -184,4 +208,4 @@
     margin-right: auto;
     margin-left: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
index ab36b5b8..846f68ab 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/transaction-list/index.scss
@@ -1,50 +1,50 @@
 .transaction-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: hidden;
+  margin-top: 8px;
+  border-top: 1px solid $geyser;
+
+  &__completed-transactions {
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow-y: hidden;
-    margin-top: 8px;
-    border-top: 1px solid $geyser;
-
-    &__completed-transactions {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-    }
+  }
 
-    &__header {
-        flex: 0 0 auto;
-        font-size: .875rem;
-        text-align: center;
-        color: $white;
-        border-bottom: 1px solid $geyser;
-        padding: 8px 0 8px 20px;
+  &__header {
+    flex: 0 0 auto;
+    font-size: .875rem;
+    text-align: center;
+    color: $white;
+    border-bottom: 1px solid $geyser;
+    padding: 8px 0 8px 20px;
 
-        @media screen and (max-width: $break-small) {
-            padding: 8px 0 8px 16px;
-        }
+    @media screen and (max-width: $break-small) {
+      padding: 8px 0 8px 16px;
     }
+  }
 
-    &__transactions {
-        flex: 1;
-        overflow-y: auto;
-    }
+  &__transactions {
+    flex: 1;
+    overflow-y: auto;
+  }
 
-    &__pending-transactions {
-        margin-bottom: 16px;
-    }
+  &__pending-transactions {
+    margin-bottom: 16px;
+  }
 
-    &__empty {
-        flex: 1;
-        display: grid;
-        grid-template-rows: 35% 1fr;
-        padding-top: 8px;
-    }
+  &__empty {
+    flex: 1;
+    display: grid;
+    grid-template-rows: 35% 1fr;
+    padding-top: 8px;
+  }
 
-    &__empty-text {
-        grid-row-start: 2;
-        display: flex;
-        justify-content: center;
-        color: $geyser;
-    }
+  &__empty-text {
+    grid-row-start: 2;
+    display: flex;
+    justify-content: center;
+    color: $geyser;
+  }
 }
diff --git a/ui/app/constants/common.js b/ui/app/constants/common.js
index 4ff4dc83..3472ae0a 100644
--- a/ui/app/constants/common.js
+++ b/ui/app/constants/common.js
@@ -1,4 +1,5 @@
 export const ETH = 'ETH'
+export const DEX = 'DEX'
 export const GWEI = 'GWEI'
 export const WEI = 'WEI'
 
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 3e016a5b..0fe46752 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -1,4 +1,4 @@
-.modal>div:focus {
+.modal > div:focus {
   outline: none !important;
 }
 
@@ -31,19 +31,23 @@
     width: 100%;
     height: 100px;
   }
+
   .buy-modal-content-title {
     font-size: 26px;
     margin-top: 15px;
   }
+
   .buy-modal-content-options {
     flex-direction: column;
     padding: 5% 33%;
   }
+
   .buy-modal-content-footer {
     text-transform: uppercase;
     width: 100%;
     height: 50px;
   }
+
   div.buy-modal-content-option {
     display: flex;
     flex-direction: column;
@@ -55,9 +59,11 @@
     border: 1px solid $black;
     padding: 0% 7%;
     justify-content: center;
+
     div.buy-modal-content-option-title {
       font-size: 20px;
     }
+
     div.buy-modal-content-option-subtitle {
       font-size: 16px;
     }
@@ -70,19 +76,23 @@
     width: 100%;
     height: 110px;
   }
+
   .buy-modal-content-title {
     font-size: 26px;
     margin-top: 15px;
   }
+
   .buy-modal-content-footer {
     text-transform: uppercase;
     width: 100%;
     height: 50px;
   }
+
   .buy-modal-content-options {
     flex-direction: row;
     margin: 20px 0 60px;
   }
+
   div.buy-modal-content-option {
     display: flex;
     flex-direction: column;
@@ -93,36 +103,44 @@
     border: 1px solid $black;
     margin: 0 8px;
     padding: 18px 0;
+
     div.buy-modal-content-option-title {
       font-size: 20px;
       margin-bottom: 12px;
+
       @media screen and (max-width: 679px) {
         font-size: 14px;
       }
+
       @media screen and (min-width: 1281px) {
         font-size: 20px;
       }
     }
+
     div.buy-modal-content-option-subtitle {
       font-size: 16px;
       padding: 0 10px;
       height: 25%;
+
       @media screen and (max-width: 679px) {
         font-size: 10px;
         padding: 0 10px;
         margin-bottom: 5px;
         line-height: 15px;
       }
+
       @media screen and (min-width: 680px) {
         font-size: 14px;
         padding: 0 4px;
         margin-bottom: 2px;
       }
+
       @media screen and (min-width: 1281px) {
         font-size: 16px;
         padding: 0;
       }
     }
+
     div.buy-modal-content-footer {
       margin-top: 8vh;
     }
@@ -177,6 +195,7 @@
   border: 1px solid $silver;
   border-radius: 4px;
   font-family: Roboto;
+
   button {
     cursor: pointer;
   }
@@ -188,6 +207,7 @@
   top: 13px;
   left: 17px;
   cursor: pointer;
+
   &__text {
     margin-top: 2px;
     font-family: Roboto;
@@ -221,9 +241,11 @@
     margin-top: 9px;
     font-size: 20px;
   }
+
   .qr-wrapper {
     margin-top: 5px;
   }
+
   .ellip-address-wrapper {
     display: flex;
     justify-content: center;
@@ -233,6 +255,7 @@
     margin-top: 7px;
     width: 286px;
   }
+
   .account-modal__button {
     margin-top: 17px;
     padding: 10px 22px;
@@ -459,16 +482,19 @@
   min-height: 250.72px;
   border-radius: 4px;
   background-color: $dark-gray;
-  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5);
+  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5);
+
   &__container {
     padding: 24px 27px 21px;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
+
   &__identicon {
     margin-bottom: 10px;
   }
+
   &__symbol {
     color: $tundora;
     font-family: Roboto;
@@ -477,6 +503,7 @@
     text-align: center;
     margin-bottom: 7.5px;
   }
+
   &__title {
     height: 30px;
     width: 271.28px;
@@ -487,6 +514,7 @@
     text-align: center;
     margin-bottom: 10.5px;
   }
+
   &__copy {
     height: 41px;
     width: 318px;
@@ -496,6 +524,7 @@
     line-height: 18px;
     text-align: center;
   }
+
   &__buttons {
     display: flex;
     flex-direction: row;
@@ -503,6 +532,7 @@
     margin-top: 15px;
     width: 100%;
   }
+
   &__button {
     width: 141px;
     margin: 0 5px;
@@ -521,6 +551,7 @@
     box-shadow: 0 0 2px 2px $alto;
     font-family: Roboto;
   }
+
   &__header {
     background: $wild-sand;
     width: 100%;
@@ -530,6 +561,7 @@
     font-size: 22px;
     color: $nile-blue;
   }
+
   &__message {
     padding: 20px;
     width: 100%;
@@ -538,16 +570,19 @@
     font-size: 17px;
     color: $nile-blue;
   }
+
   &__buttons {
     display: flex;
     justify-content: space-evenly;
     width: 100%;
     margin-bottom: 24px;
     padding: 0px 42px;
+
     &__btn {
       cursor: pointer;
     }
   }
+
   &__link {
     color: $curious-blue;
   }
@@ -560,6 +595,7 @@
   display: flex;
   flex-flow: column;
   height: 100%;
+
   &__header {
     width: 100%;
     border-radius: 8px 8px 0 0;
@@ -569,17 +605,20 @@
     padding: 25px;
     flex-flow: column;
     align-items: flex-start;
+
     &__title {
       color: $white;
       font-size: 24px;
       line-height: 32px;
     }
+
     &__description {
       color: $white;
       font-size: 16px;
       line-height: 22px;
       margin-top: 10px;
     }
+
     &__close::after {
       content: '\00D7';
       font-size: 2em;
@@ -590,6 +629,7 @@
       cursor: pointer;
     }
   }
+
   &__buy-rows {
     width: 100%;
     padding: 0 30px;
@@ -597,21 +637,25 @@
     flex-flow: column nowrap;
     flex: 1;
     align-items: center;
+
     @media screen and (max-width: 575px) {
       height: 0;
     }
+
     .shapeshift-form-wrapper {
       display: flex;
       flex-flow: column;
       justify-content: center;
       align-items: center;
       flex: 1 0 auto;
+
       .shapeshift-form,
       .modal-shapeshift-form {
         border-radius: 8px;
-        background-color: rgba(0, 0, 0, .05);
+        background-color: rgba(0, 0, 0, 0.05);
         padding: 17px 15px;
         margin-bottom: 10px;
+
         &__caret {
           width: auto;
           flex: 1;
@@ -619,6 +663,7 @@
       }
     }
   }
+
   &__logo {
     height: 60px;
     background-repeat: no-repeat;
@@ -629,27 +674,32 @@
     justify-content: center;
     align-items: center;
   }
+
   &__buy-row {
-    border-bottom: 1px solid $alto;
+    border-bottom: 1px solid $geyser;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex: 1 0 auto;
     padding: 30px 0 20px;
     min-height: 170px;
+
     @media screen and (max-width: 575px) {
       min-height: 270px;
       flex-flow: column;
       justify-content: flex-start;
     }
+
     &__back {
       position: absolute;
       top: 10px;
       left: 0px;
     }
+
     &__shapeshift-buy {
       padding-top: 25px;
       position: relative;
+
       @media screen and (max-width: 575px) {
         display: flex;
         justify-content: space-between;
@@ -663,61 +713,76 @@
         border: none;
       }
     }
+
     &__logo-container {
       display: flex;
       justify-content: center;
       flex: 0 0 auto;
       padding: 0 20px;
+
       @media screen and (min-width: 576px) {
         width: 12rem;
       }
+
       @media screen and (max-width: 575px) {
         width: 100%;
         max-height: 6rem;
         padding-bottom: 20px;
       }
     }
+
     &__coinbase-logo {
       height: 40px;
     }
+
     &__shapeshift-logo {
       height: 60px;
     }
+
     &__right {
       display: flex;
     }
+
     &__description {
-      color: $cape-cod;
+      color: $white;
       padding-bottom: 20px;
       align-self: flex-start;
+
       @media screen and (min-width: 575px) {
         width: 15rem;
       }
+
       &__title {
         font-size: 20px;
         line-height: 30px;
       }
+
       &__text {
         font-size: 14px;
         line-height: 22px;
         margin-top: 7px;
       }
     }
+
     &__button {
       display: flex;
       justify-content: flex-end;
+
       @media screen and (min-width: 575px) {
         min-width: 300px;
       }
     }
   }
+
   &__buy-row:last-of-type {
     border-bottom: 0px;
   }
+
   &__deposit-button,
   .shapeshift-form__shapeshift-buy-btn {
     width: 257px;
   }
+
   .shapeshift-form-wrapper {
     display: flex;
     flex-flow: column;
@@ -725,20 +790,24 @@
     align-items: center;
     margin-top: 28px;
     flex: 1 0 auto;
+
     .shapeshift-form,
     .modal-shapeshift-form {
       border-radius: 8px;
-      background-color: rgba(0, 0, 0, .05);
+      background-color: rgba(0, 0, 0, 0.05);
       padding: 17px 15px;
+
       &__caret {
         width: auto;
         flex: 1;
       }
     }
   }
+
   .shapeshift-form__shapeshift-buy-btn {
     margin-top: 10px;
   }
+
   .simple-dropdown {
     color: #5B5D67;
     font-size: 16px;
@@ -751,6 +820,7 @@
     line-height: 44px;
     font-family: Montserrat Light;
   }
+
   .simple-dropdown__selected {
     text-align: center;
   }
@@ -789,4 +859,4 @@
   justify-content: center;
   font-size: 17px;
   color: $nile-blue;
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 1b3db8d0..8ae2fba9 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -1,6 +1,6 @@
 .network-component--disabled {
   // border-color: transparent !important;
-  cursor: not-allowed;
+  cursor: default;
 
   .fa-caret-down {
     opacity: 0;
@@ -13,17 +13,13 @@
   padding: 7px 3px;
   flex: 0 0 auto;
   display: flex;
-  &.ethereum-network .menu-icon-circle div {
-    background-color: rgba(3, 135, 137, .7) !important;
-  }
-  &.ropsten-test-network .menu-icon-circle div {
-    background-color: rgba(233, 21, 80, .7) !important;
-  }
-  &.kovan-test-network .menu-icon-circle div {
-    background-color: rgba(105, 4, 150, .7) !important;
+
+  &.dexon-network .menu-icon-circle div {
+    background-color: rgba(149, 74, 151, 0.7) !important;
   }
-  &.rinkeby-test-network .menu-icon-circle div {
-    background-color: rgba(235, 179, 63, .7) !important;
+
+  &.dexon-test-network .menu-icon-circle div {
+    background-color: rgba(174, 174, 174, 0.7) !important;
   }
 }
 
@@ -38,6 +34,7 @@
   display: flex;
   align-items: center;
   font-size: .6em;
+
   .fa-caret-down {
     line-height: 15px;
     font-size: 12px;
@@ -65,12 +62,15 @@
 
 .network-droppo {
   right: 2px;
+
   @media screen and (min-width: 576px) {
     right: calc(((100% - 85vw) / 2) + 2px);
   }
+
   @media screen and (min-width: 769px) {
     right: calc(((100% - 80vw) / 2) + 2px);
   }
+
   @media screen and (min-width: 1281px) {
     right: calc(((100% - 65vw) / 2) + 2px);
   }
@@ -109,7 +109,7 @@
 
 .menu-icon-circle--active {
   border: 1px solid $white;
-  background: rgba(100, 100, 100, .4);
+  background: rgba(100, 100, 100, 0.4);
 }
 
 .menu-icon-circle div,
@@ -158,4 +158,5 @@
 
 .network-caret {
   margin: 0 8px 2px;
-}
\ No newline at end of file
+  color: $dexon-purple;
+}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 688fbdf2..9dc11042 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -1,11 +1,13 @@
 $sub-mid-size-breakpoint: 667px;
 $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
+
 /*
   NewUI Container Elements
  */
 
 // Component Colors
 $wallet-view-bg: $muddy-gray;
+
 // Main container
 .main-container {
   // position: absolute;
@@ -42,21 +44,26 @@ $wallet-view-bg: $muddy-gray;
   background: $wallet-view-bg;
   z-index: 200;
   position: relative;
+
   @media screen and (min-width: 576px) {
     overflow-y: scroll;
     overflow-x: hidden;
   }
+
   @media #{$sub-mid-size-breakpoint-range} {
     min-width: 160px;
   }
+
   .wallet-view-account-details {
     flex: 0 0 auto;
   }
+
   &__name-container {
     flex: 0 0 auto;
     cursor: pointer;
     width: 100%;
   }
+
   &__keyring-label {
     height: 50px;
     color: $dusty-gray;
@@ -66,6 +73,7 @@ $wallet-view-bg: $muddy-gray;
     padding: 17px 20px 0;
     box-sizing: border-box;
   }
+
   &__details-button {
     font-size: 10px;
     border-radius: 17px;
@@ -74,12 +82,14 @@ $wallet-view-bg: $muddy-gray;
     padding: 4px 12px;
     flex: 0 0 auto;
   }
+
   &__tooltip {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 24px;
   }
+
   &__address {
     border-radius: 3px;
     background-color: $alto;
@@ -89,10 +99,12 @@ $wallet-view-bg: $muddy-gray;
     padding: 4px 12px;
     cursor: pointer;
     flex: 0 0 auto;
+
     &__pressed {
-      background-color: $manatee,
+      background-color: ($manatee,);
     }
   }
+
   &__sidebar-close {
     @media screen and (max-width: 575px) {
       &::after {
@@ -106,12 +118,14 @@ $wallet-view-bg: $muddy-gray;
       }
     }
   }
+
   &__add-token-button {
     flex: 0 0 auto;
     margin: 36px auto;
     background: none;
     transition: border-color .3s ease;
     width: 150px;
+
     &:hover {
       border-color: $white;
     }
@@ -138,7 +152,7 @@ $wallet-view-bg: $muddy-gray;
 
 .wallet-view.sidebar-right {
   flex: 1 0 230px;
-  background: rgb(250, 250, 250);
+  background: $muddy-gray;
   z-index: $sidebar-z-index;
   position: fixed;
   top: 66px;
@@ -149,7 +163,7 @@ $wallet-view-bg: $muddy-gray;
   visibility: visible;
   will-change: transform;
   overflow-y: auto;
-  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
+  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
   width: 85%;
   height: calc(100% - 56px);
 }
@@ -159,9 +173,11 @@ $wallet-view-bg: $muddy-gray;
   .lap-visible {
     display: flex;
   }
+
   .phone-visible {
     display: none;
   }
+
   .main-container {
     // margin-top: 6.9vh;
     width: 85vw;
@@ -191,9 +207,11 @@ $wallet-view-bg: $muddy-gray;
   .lap-visible {
     display: none;
   }
+
   .phone-visible {
     display: flex;
   }
+
   .main-container {
     // margin-top: 41px;
     height: 100%;
@@ -201,6 +219,7 @@ $wallet-view-bg: $muddy-gray;
     overflow-y: auto;
     background-color: $dark-gray;
   }
+
   .main-container-wrapper {
     flex: 1;
     min-height: 0;
@@ -242,15 +261,19 @@ $wallet-view-bg: $muddy-gray;
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
+
   @media screen and (max-width: 575px) {
     height: 100%;
   }
+
   @media screen and (min-width: 576px) {
     width: 85vw;
   }
+
   @media screen and (min-width: 769px) {
     width: 80vw;
   }
+
   @media screen and (min-width: 1281px) {
     width: 62vw;
   }
@@ -263,7 +286,7 @@ $wallet-view-bg: $muddy-gray;
   justify-content: center;
   align-items: center;
   flex: 1 0 auto;
-  background: #f7f7f7;
+  background: $dark-gray;
   width: 100%;
 }
 
@@ -282,4 +305,4 @@ $wallet-view-bg: $muddy-gray;
   justify-content: center;
   padding: 0 10px;
   background: white;
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index 9737e717..235f551b 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -1,5 +1,6 @@
 $wallet-balance-breakpoint: 890px;
 $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
+
 .token-list-item {
   display: flex;
   flex-flow: row nowrap;
@@ -11,6 +12,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   position: relative;
   flex: 1;
   min-width: 0;
+
   &__token-balance {
     margin-right: 4px;
     white-space: nowrap;
@@ -19,48 +21,59 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     min-width: 0;
     max-width: 100%;
   }
+
   &__token-balance,
   &__token-symbol {
     font-size: 1.5rem;
     flex: 0 0 auto;
+
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
     }
   }
+
   &__fiat-amount {
     margin-top: .25%;
     font-size: 105%;
     width: 100%;
     text-transform: uppercase;
+
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
     }
   }
+
   @media #{$wallet-balance-breakpoint-range} {
     padding: 10% 4%;
   }
+
   &--active {
     background-color: $geyser;
     color: $white;
   }
+
   &__identicon {
     margin-right: 15px;
     border: '1px solid #dedede';
     min-width: 50px;
+
     @media #{$wallet-balance-breakpoint-range} {
       margin-right: 4%;
     }
   }
+
   &__balance-ellipsis {
     display: flex;
     align-items: center;
     min-width: 0;
     flex: 1;
   }
+
   &__ellipsis {
     line-height: 45px;
     margin-left: 5px;
   }
+
   &__balance-wrapper {
     flex: 1;
     flex-flow: row wrap;
@@ -75,9 +88,11 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   top: 52px;
   right: 25px;
   z-index: 2000;
+
   @media #{$wallet-balance-breakpoint-range} {
     right: 18px;
   }
+
   &__close-area {
     position: fixed;
     top: 0;
@@ -87,16 +102,19 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     height: 100%;
     cursor: default;
   }
+
   &__container {
     padding: 16px;
     z-index: 2200;
     position: relative;
   }
+
   &__options {
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
+
   &__option {
     color: $white;
     font-family: Roboto;
@@ -104,4 +122,4 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     line-height: 21px;
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 3ff5979c..3b5e2411 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -4,11 +4,12 @@
 
 // Base Colors
 $white: #fff;
-$white-transparent: unquote('#ffffff88');
+$white-transparent: unquote("#ffffff88");
 $black: #000;
 $orange: #ffa500;
 $red: #f00;
 $gray: #808080;
+
 /*
   Colors
   http://chir.ag/projects/name-that-color
@@ -63,6 +64,7 @@ $mischka: #dddee9;
 $dexon-purple: #954A97;
 $dark-gray: #222222;
 $muddy-gray: #303030;
+
 /*
   Z-Indicies
  */
@@ -76,6 +78,7 @@ $main-container-z-index: 18;
 $send-card-z-index: 20;
 $sidebar-z-index: 26;
 $sidebar-overlay-z-index: 25;
+
 /*
   Z Indicies - Current
   app - 11
@@ -92,4 +95,4 @@ $sidebar-overlay-z-index: 25;
 $break-small: 575px;
 $break-midpoint: 780px;
 $break-large: 576px;
-$primary-font-type: Roboto;
\ No newline at end of file
+$primary-font-type: Roboto;
diff --git a/ui/lib/account-link.js b/ui/lib/account-link.js
index 037d990f..93697b13 100644
--- a/ui/lib/account-link.js
+++ b/ui/lib/account-link.js
@@ -5,18 +5,9 @@ module.exports = function (address, network) {
     case 1: // main net
       link = `https://etherscan.io/address/${address}`
       break
-    case 2: // morden test net
+    case 2: // test net
       link = `https://morden.etherscan.io/address/${address}`
       break
-    case 3: // ropsten test net
-      link = `https://ropsten.etherscan.io/address/${address}`
-      break
-    case 4: // rinkeby test net
-      link = `https://rinkeby.etherscan.io/address/${address}`
-      break
-    case 42: // kovan test net
-      link = `https://kovan.etherscan.io/address/${address}`
-      break
     default:
       link = ''
       break