Add Header
This commit is contained in:
Chi Kei Chan
parent
6b894511c4
commit
e0cc2b59d1
@ -5,9 +5,12 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"classnames": "^2.2.6",
|
||||
"d3": "^4.13.0",
|
||||
"jazzicon": "^1.5.0",
|
||||
"node-sass": "^4.9.3",
|
||||
"npm": "^6.0.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.2.0",
|
||||
"react-cookies": "^0.1.0",
|
||||
"react-dom": "^16.2.0",
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Uniswap</title>
|
||||
<title>Uniswap - ERC20 Market Maker</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import NetworkStatus from '../components/NetworkStatus';
|
||||
|
||||
function Header (props){
|
||||
return (
|
||||
<section className="title">
|
||||
<div className="logo border pa2">
|
||||
<span role="img" aria-label="Unicorn">🦄</span>
|
||||
</div>
|
||||
<NetworkStatus metamask={props.metamask}/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header;
|
||||
20
src/components/Header/header.scss
Normal file
20
src/components/Header/header.scss
Normal file
@ -0,0 +1,20 @@
|
||||
@import "../../variables.scss";
|
||||
|
||||
.header {
|
||||
@extend %row-nowrap;
|
||||
padding: 1.5rem;
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
font-size: 1rem;
|
||||
margin-left: 1rem;
|
||||
line-height: 1.5rem;
|
||||
color: $wisteria-purple;
|
||||
}
|
||||
|
||||
&__center-group {
|
||||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
17
src/components/Header/index.js
Normal file
17
src/components/Header/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import Logo from '../Logo';
|
||||
import Web3Status from '../Web3Status';
|
||||
|
||||
import "./header.scss";
|
||||
|
||||
export default function Header (props) {
|
||||
return (
|
||||
<div className="header">
|
||||
<Logo />
|
||||
<div className="header__center-group">
|
||||
<span className="header__title">Uniswap</span>
|
||||
</div>
|
||||
<Web3Status address="0xcf1de0b4d1e492080336909f70413a5f4e7eec62" isConnected />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
8
src/components/Logo/index.js
Normal file
8
src/components/Logo/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import "./logo.scss";
|
||||
|
||||
export default function Logo(props) {
|
||||
return (
|
||||
<div className="logo">🦄</div>
|
||||
);
|
||||
}
|
||||
4
src/components/Logo/logo.scss
Normal file
4
src/components/Logo/logo.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
55
src/components/Web3Status/index.js
Normal file
55
src/components/Web3Status/index.js
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import classnames from 'classnames';
|
||||
import Web3 from 'web3';
|
||||
import Jazzicon from 'jazzicon';
|
||||
import './web3-status.scss';
|
||||
|
||||
function Web3Status(props) {
|
||||
const { address } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames("web3-status", {
|
||||
'web3-status__connected': props.isConnected,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className="web3-status__identicon"
|
||||
ref={el => {
|
||||
if (!address|| address.length < 42 || !Web3.utils.isHexStrict(address)) {
|
||||
return;
|
||||
}
|
||||
|
||||
el.appendChild(Jazzicon(18, parseInt(address.slice(2), 16)));
|
||||
}}
|
||||
/>
|
||||
<div className="web3-status__text">
|
||||
{ getText(props.address) }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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);
|
||||
30
src/components/Web3Status/web3-status.scss
Normal file
30
src/components/Web3Status/web3-status.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 (
|
||||
<Switch>
|
||||
<Route exact path="/" component={() => this.renderMain()} />
|
||||
<Route exact path="/swap" component={Swap} />
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,2 +1,4 @@
|
||||
@import "../variables.scss";
|
||||
|
||||
.app {
|
||||
}
|
||||
19
src/pages/Swap/index.js
Normal file
19
src/pages/Swap/index.js
Normal file
@ -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 (
|
||||
<div className="swap">
|
||||
<Header />
|
||||
<div className="swap__content">
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(Swap);
|
||||
0
src/pages/Swap/swap.scss
Normal file
0
src/pages/Swap/swap.scss
Normal file
18
src/variables.scss
Normal file
18
src/variables.scss
Normal file
@ -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;
|
||||
}
|
||||
52
yarn.lock
52
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user