+
{
+ if (!address|| address.length < 42 || !Web3.utils.isHexStrict(address)) {
+ return;
+ }
+
+ el.appendChild(Jazzicon(18, parseInt(address.slice(2), 16)));
+ }}
+ />
+
+ { getText(props.address) }
+
+
+ )
+}
+
+function getText(text) {
+ if (!text || text.length < 42 || !Web3.utils.isHexStrict(text)) {
+ return 'Disconnected';
+ }
+
+ const address = Web3.utils.toChecksumAddress(text)
+
+ return `${address.substring(0, 6)}...${address.substring(38)}`;
+}
+
+Web3Status.propTypes = {
+ isConnected: PropTypes.bool,
+ address: PropTypes.string,
+};
+
+Web3Status.defaultProps = {
+ isConnected: false,
+ address: 'Disconnected',
+};
+
+export default connect()(Web3Status);
diff --git a/src/components/Web3Status/web3-status.scss b/src/components/Web3Status/web3-status.scss
new file mode 100644
index 0000000000..ee7eceeaa6
--- /dev/null
+++ b/src/components/Web3Status/web3-status.scss
@@ -0,0 +1,30 @@
+@import "../../variables.scss";
+
+.web3-status {
+ @extend %row-nowrap;
+ width: 9.5rem;
+ font-size: .75rem;
+ line-height: 1rem;
+ align-items: center;
+ border: 1px solid $mercury-gray;
+ padding: .5rem 1rem;
+ border-radius: 2rem;
+ color: $dove-gray;
+ font-weight: 500;
+ box-sizing: border-box;
+
+ &__identicon {
+ height: 1.125rem;
+ width: 1.125rem;
+ border-radius: 1.125rem;
+ background-color: $silver-gray;
+ }
+
+ &__text {
+ flex: 1 1 auto;
+ width: 0;
+ overflow: hidden;
+ text-align: right;
+ margin-left: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 936c4194c1..d753c0dd55 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ import App from './pages/App';
import { Provider } from 'react-redux';
import store from './store';
-import './index.css';
+import './index.scss';
import registerServiceWorker from './registerServiceWorker';
// provider is going to need a store object passed into it
diff --git a/src/index.css b/src/index.scss
similarity index 83%
rename from src/index.css
rename to src/index.scss
index 0d28093636..f555d37dbc 100644
--- a/src/index.css
+++ b/src/index.scss
@@ -1,4 +1,5 @@
@import url('https://rsms.me/inter/inter-ui.css');
+@import "./variables.scss";
html, body {
margin: 0;
@@ -10,11 +11,12 @@ html, body {
overflow-x: hidden;
}
-.root {
+#root {
display: flex;
flex-flow: column nowrap;
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: auto;
+ background-color: $concrete-gray;
}
diff --git a/src/pages/App.js b/src/pages/App.js
index 705ff2733a..3aa9367574 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -10,6 +10,8 @@ import Purchase from '../components/Purchase';
import About from '../components/About';
import Links from '../components/Links';
import SharePurchase from '../components/SharePurchase';
+
+import Swap from './Swap';
import './App.scss';
class App extends Component {
@@ -61,7 +63,7 @@ class App extends Component {
render() {
return (
- this.renderMain()} />
+
)
}
diff --git a/src/pages/App.scss b/src/pages/App.scss
index 2ee17ace2b..dbd5634a92 100644
--- a/src/pages/App.scss
+++ b/src/pages/App.scss
@@ -1,2 +1,4 @@
+@import "../variables.scss";
+
.app {
}
\ No newline at end of file
diff --git a/src/pages/Swap/index.js b/src/pages/Swap/index.js
new file mode 100644
index 0000000000..c3c4d36bd2
--- /dev/null
+++ b/src/pages/Swap/index.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Header from '../../components/Header';
+
+import "./swap.scss";
+
+class Swap extends Component {
+ render() {
+ return (
+
+ )
+ }
+}
+
+export default connect()(Swap);
diff --git a/src/pages/Swap/swap.scss b/src/pages/Swap/swap.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/variables.scss b/src/variables.scss
new file mode 100644
index 0000000000..81b50518b1
--- /dev/null
+++ b/src/variables.scss
@@ -0,0 +1,18 @@
+// Gray
+$concrete-gray: #F2F2F2;
+$silver-gray: #C4C4C4;
+$mercury-gray: #E1E1E1;
+$dove-gray: #737373;
+
+// Purple
+$wisteria-purple: #AE60B9;
+
+%col-nowrap {
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+%row-nowrap {
+ display: flex;
+ flex-flow: row nowrap;
+}
diff --git a/yarn.lock b/yarn.lock
index dd267a12cd..9cef30043c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2126,6 +2126,10 @@ classnames@^2.2.4:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+classnames@^2.2.6:
+ version "2.2.6"
+ resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
clean-css@4.1.x:
version "4.1.9"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -2237,22 +2241,28 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
+color-convert@^1.3.0, color-convert@^1.9.1:
+ version "1.9.3"
+ resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+ dependencies:
+ color-name "1.1.3"
+
color-convert@^1.9.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
dependencies:
color-name "^1.1.1"
-color-convert@^1.9.1:
- version "1.9.3"
- resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
- dependencies:
- color-name "1.1.3"
-
color-name@1.1.3, color-name@^1.0.0, color-name@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+color-string@^0.3.0:
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+ dependencies:
+ color-name "^1.0.0"
+
color-string@^1.5.2:
version "1.5.3"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
@@ -2260,6 +2270,14 @@ color-string@^1.5.2:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
+color@^0.11.1:
+ version "0.11.4"
+ resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
+ dependencies:
+ clone "^1.0.2"
+ color-convert "^1.3.0"
+ color-string "^0.3.0"
+
color@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
@@ -3849,6 +3867,10 @@ ethjs-unit@0.1.6:
bn.js "4.11.6"
number-to-bn "1.7.0"
+eve-raphael@0.5.0:
+ version "0.5.0"
+ resolved "https://registry.yarnpkg.com/eve-raphael/-/eve-raphael-0.5.0.tgz#17c754b792beef3fa6684d79cf5a47c63c4cda30"
+
eventemitter3@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.1.1.tgz#47786bdaa087caf7b1b75e73abc5c7d540158cd0"
@@ -5705,6 +5727,14 @@ isurl@^1.0.0-alpha5:
has-to-string-tag-x "^1.2.0"
is-object "^1.0.1"
+jazzicon@^1.5.0:
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/jazzicon/-/jazzicon-1.5.0.tgz#d7f36b516023db39ee6eac117f4054e937b65e99"
+ dependencies:
+ color "^0.11.1"
+ mersenne-twister "^1.0.1"
+ raphael "^2.2.0"
+
jest-changed-files@^23.4.2:
version "23.4.2"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-23.4.2.tgz#1eed688370cd5eebafe4ae93d34bb3b64968fe83"
@@ -6674,6 +6704,10 @@ merge@^1.1.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+mersenne-twister@^1.0.1:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a"
+
methods@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -8759,6 +8793,12 @@ range-parser@^1.0.3, range-parser@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+raphael@^2.2.0:
+ version "2.2.7"
+ resolved "https://registry.yarnpkg.com/raphael/-/raphael-2.2.7.tgz#231b19141f8d086986d8faceb66f8b562ee2c810"
+ dependencies:
+ eve-raphael "0.5.0"
+
raw-body@2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"