From 700b7068a157a0f9d3d6ce3f61150c2961d81617 Mon Sep 17 00:00:00 2001
From: fragosti
Date: Wed, 3 Oct 2018 14:08:08 -0700
Subject: Add styled-components with theme
---
packages/instant/package.json | 5 +++-
.../instant/src/components/zero_ex_instant.tsx | 8 +++++-
packages/instant/src/style/theme.ts | 27 ++++++++++++++++++
yarn.lock | 32 ++++++++++++++++++++++
4 files changed, 70 insertions(+), 2 deletions(-)
create mode 100644 packages/instant/src/style/theme.ts
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 365312a70..9f97b1caa 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -51,7 +51,10 @@
"ethereum-types": "^1.0.8",
"lodash": "^4.17.10",
"react": "^16.5.2",
- "react-dom": "^16.5.2"
+ "react-dom": "^16.5.2",
+ "react-redux": "^5.0.7",
+ "redux": "^4.0.0",
+ "styled-components": "^3.4.9"
},
"devDependencies": {
"@0xproject/tslint-config": "^1.0.7",
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 67e1b683d..43398cf3b 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,5 +1,11 @@
import * as React from 'react';
+import { ThemeProvider } from '../style/theme';
+
export interface ZeroExInstantProps {}
-export const ZeroExInstant: React.StatelessComponent = () => ZeroExInstant
;
+export const ZeroExInstant: React.StatelessComponent = () => (
+
+ ZeroExInstant
+
+);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
new file mode 100644
index 000000000..838378c99
--- /dev/null
+++ b/packages/instant/src/style/theme.ts
@@ -0,0 +1,27 @@
+import * as styledComponents from 'styled-components';
+
+const {
+ default: styled,
+ css,
+ injectGlobal,
+ keyframes,
+ ThemeProvider,
+} = styledComponents as styledComponents.ThemedStyledComponentsModule;
+
+export interface IThemeInterface {
+ primaryColor: string;
+ black: string;
+ white: string;
+ darkGrey: string;
+ lightGrey: string;
+}
+
+export const theme: IThemeInterface = {
+ primaryColor: '#512D80',
+ black: 'black',
+ lightGrey: '#999999',
+ darkGrey: '#333333',
+ white: 'white',
+};
+
+export { styled, css, injectGlobal, keyframes, ThemeProvider };
diff --git a/yarn.lock b/yarn.lock
index b0449b654..eb17d9da9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12742,6 +12742,17 @@ react-redux@^5.0.3:
loose-envify "^1.1.0"
prop-types "^15.6.0"
+react-redux@^5.0.7:
+ version "5.0.7"
+ resolved "http://localhost:4873/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
+ dependencies:
+ hoist-non-react-statics "^2.5.0"
+ invariant "^2.0.0"
+ lodash "^4.17.5"
+ lodash-es "^4.17.5"
+ loose-envify "^1.1.0"
+ prop-types "^15.6.0"
+
react-router-dom@^4.1.1:
version "4.2.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -13126,6 +13137,13 @@ redux@^3.6.0:
loose-envify "^1.1.0"
symbol-observable "^1.0.3"
+redux@^4.0.0:
+ version "4.0.0"
+ resolved "http://localhost:4873/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
+ dependencies:
+ loose-envify "^1.1.0"
+ symbol-observable "^1.2.0"
+
regenerate@^1.2.1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
@@ -14711,6 +14729,20 @@ styled-components@^3.3.3:
stylis-rule-sheet "^0.0.10"
supports-color "^3.2.3"
+styled-components@^3.4.9:
+ version "3.4.9"
+ resolved "http://localhost:4873/styled-components/-/styled-components-3.4.9.tgz#519abeb351b37be5b7de6a15ff9e4efeb9d772da"
+ dependencies:
+ buffer "^5.0.3"
+ css-to-react-native "^2.0.3"
+ fbjs "^0.8.16"
+ hoist-non-react-statics "^2.5.0"
+ prop-types "^15.5.4"
+ react-is "^16.3.1"
+ stylis "^3.5.0"
+ stylis-rule-sheet "^0.0.10"
+ supports-color "^3.2.3"
+
stylis-rule-sheet@^0.0.10:
version "0.0.10"
resolved "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
--
cgit v1.2.3
From 15f20cc18e45d2971be7274bc3c0be36b02091c8 Mon Sep 17 00:00:00 2001
From: fragosti
Date: Wed, 3 Oct 2018 14:28:07 -0700
Subject: Add redux to 0x instant
---
packages/instant/package.json | 2 ++
.../instant/src/components/zero_ex_instant.tsx | 12 +++++---
packages/instant/src/redux/reducer.ts | 23 +++++++++++++++
packages/instant/src/redux/store.ts | 8 ++++++
packages/instant/src/types.ts | 8 ++++++
yarn.lock | 33 ++++++++--------------
6 files changed, 60 insertions(+), 26 deletions(-)
create mode 100644 packages/instant/src/redux/reducer.ts
create mode 100644 packages/instant/src/redux/store.ts
create mode 100644 packages/instant/src/types.ts
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 9f97b1caa..2a1c05f2a 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -64,6 +64,8 @@
"@types/node": "*",
"@types/react": "16.4.7",
"@types/react-dom": "^16.0.8",
+ "@types/react-redux": "^6.0.9",
+ "@types/redux": "^3.6.0",
"awesome-typescript-loader": "^5.2.1",
"copyfiles": "^1.2.0",
"enzyme": "^3.6.0",
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 43398cf3b..9ba390be9 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,11 +1,15 @@
import * as React from 'react';
+import { Provider } from 'react-redux';
-import { ThemeProvider } from '../style/theme';
+import { store } from '../redux/store';
+import { theme, ThemeProvider } from '../style/theme';
export interface ZeroExInstantProps {}
export const ZeroExInstant: React.StatelessComponent = () => (
-
- ZeroExInstant
-
+
+
+ ZeroExInstant
+
+
);
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
new file mode 100644
index 000000000..7efe8aeb0
--- /dev/null
+++ b/packages/instant/src/redux/reducer.ts
@@ -0,0 +1,23 @@
+import * as _ from 'lodash';
+
+import { Action, ActionTypes } from '../types';
+
+export interface State {
+ ethUsdPrice?: string;
+}
+
+export const INITIAL_STATE: State = {
+ ethUsdPrice: undefined,
+};
+
+export function reducer(state: State = INITIAL_STATE, action: Action): State {
+ switch (action.type) {
+ case ActionTypes.UPDATE_ETH_USD_PRICE:
+ return {
+ ...state,
+ ethUsdPrice: action.data,
+ };
+ default:
+ return state;
+ }
+}
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
new file mode 100644
index 000000000..4d80c0383
--- /dev/null
+++ b/packages/instant/src/redux/store.ts
@@ -0,0 +1,8 @@
+import * as _ from 'lodash';
+import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
+
+import { reducer, State } from './reducer';
+
+const ONE_SECOND = 1000;
+
+export const store: ReduxStore = createStore(reducer);
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
new file mode 100644
index 000000000..3ba5a9b94
--- /dev/null
+++ b/packages/instant/src/types.ts
@@ -0,0 +1,8 @@
+export enum ActionTypes {
+ UPDATE_ETH_USD_PRICE,
+}
+
+export interface Action {
+ type: ActionTypes;
+ data?: any;
+}
diff --git a/yarn.lock b/yarn.lock
index eb17d9da9..07d4ce448 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1223,6 +1223,13 @@
"@types/react" "*"
redux "^3.6.0"
+"@types/react-redux@^6.0.9":
+ version "6.0.9"
+ resolved "http://localhost:4873/@types%2freact-redux/-/react-redux-6.0.9.tgz#96aa7f5b0716bcc3bfb36ceaa1223118d509f79a"
+ dependencies:
+ "@types/react" "*"
+ redux "^4.0.0"
+
"@types/react-router-dom@^4.0.4":
version "4.2.6"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.2.6.tgz#9f7eb3c0e6661a9607d878ff8675cc4ea95cd276"
@@ -1275,7 +1282,7 @@
"@types/redux@^3.6.0":
version "3.6.0"
- resolved "https://registry.yarnpkg.com/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
+ resolved "http://localhost:4873/@types%2fredux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
dependencies:
redux "*"
@@ -12731,18 +12738,7 @@ react-popper@^1.0.0-beta.6:
typed-styles "^0.0.5"
warning "^3.0.0"
-react-redux@^5.0.3:
- version "5.0.7"
- resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
- dependencies:
- hoist-non-react-statics "^2.5.0"
- invariant "^2.0.0"
- lodash "^4.17.5"
- lodash-es "^4.17.5"
- loose-envify "^1.1.0"
- prop-types "^15.6.0"
-
-react-redux@^5.0.7:
+react-redux@^5.0.3, react-redux@^5.0.7:
version "5.0.7"
resolved "http://localhost:4873/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
dependencies:
@@ -13121,9 +13117,9 @@ redux-devtools-extension@^2.13.2:
version "2.13.2"
resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.2.tgz#e0f9a8e8dfca7c17be92c7124958a3b94eb2911d"
-redux@*:
+redux@*, redux@^4.0.0:
version "4.0.0"
- resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
+ resolved "http://localhost:4873/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
dependencies:
loose-envify "^1.1.0"
symbol-observable "^1.2.0"
@@ -13137,13 +13133,6 @@ redux@^3.6.0:
loose-envify "^1.1.0"
symbol-observable "^1.0.3"
-redux@^4.0.0:
- version "4.0.0"
- resolved "http://localhost:4873/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
- dependencies:
- loose-envify "^1.1.0"
- symbol-observable "^1.2.0"
-
regenerate@^1.2.1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
--
cgit v1.2.3
From 48e7aa6e77a71f694f75ab8b2fc86f337700113d Mon Sep 17 00:00:00 2001
From: fragosti
Date: Wed, 3 Oct 2018 15:16:59 -0700
Subject: Add Inter UI font
---
packages/instant/src/redux/store.ts | 2 --
packages/instant/src/style/theme.ts | 7 +++++++
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
index 4d80c0383..46c4350b0 100644
--- a/packages/instant/src/redux/store.ts
+++ b/packages/instant/src/redux/store.ts
@@ -3,6 +3,4 @@ import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
import { reducer, State } from './reducer';
-const ONE_SECOND = 1000;
-
export const store: ReduxStore = createStore(reducer);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 838378c99..0af233db2 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -8,12 +8,18 @@ const {
ThemeProvider,
} = styledComponents as styledComponents.ThemedStyledComponentsModule;
+// Inject the inter-ui font into the page
+styledComponents.injectGlobal`
+ @import url('https://rsms.me/inter/inter-ui.css');
+`;
+
export interface IThemeInterface {
primaryColor: string;
black: string;
white: string;
darkGrey: string;
lightGrey: string;
+ fontFamily: string;
}
export const theme: IThemeInterface = {
@@ -22,6 +28,7 @@ export const theme: IThemeInterface = {
lightGrey: '#999999',
darkGrey: '#333333',
white: 'white',
+ fontFamily: 'Inter UI, sans-serif',
};
export { styled, css, injectGlobal, keyframes, ThemeProvider };
--
cgit v1.2.3
From 4b8348da8cc50ef0da6e6b2bb7d276f1246437cf Mon Sep 17 00:00:00 2001
From: fragosti
Date: Wed, 3 Oct 2018 16:20:39 -0700
Subject: Add some ui components
---
packages/instant/package.json | 1 +
packages/instant/src/components/ui/button.tsx | 68 ++++++++++++++++++++
packages/instant/src/components/ui/text.tsx | 75 ++++++++++++++++++++++
.../instant/src/components/zero_ex_instant.tsx | 3 +
packages/instant/src/style/fonts.ts | 10 +++
packages/instant/src/style/theme.ts | 23 +++----
yarn.lock | 6 ++
7 files changed, 172 insertions(+), 14 deletions(-)
create mode 100644 packages/instant/src/components/ui/button.tsx
create mode 100644 packages/instant/src/components/ui/text.tsx
create mode 100644 packages/instant/src/style/fonts.ts
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 2a1c05f2a..57b094626 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -50,6 +50,7 @@
"@0xproject/web3-wrapper": "^3.0.1",
"ethereum-types": "^1.0.8",
"lodash": "^4.17.10",
+ "polished": "^2.2.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
new file mode 100644
index 000000000..ec0a87345
--- /dev/null
+++ b/packages/instant/src/components/ui/button.tsx
@@ -0,0 +1,68 @@
+import { darken, saturate } from 'polished';
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export interface ButtonProps {
+ fontColor: ColorOption;
+ backgroundColor: ColorOption;
+ borderColor?: ColorOption;
+ fontSize?: string;
+ fontFamily?: string;
+ width?: string;
+ padding?: string;
+ type?: string;
+ isDisabled?: boolean;
+ onClick?: (event: React.MouseEvent) => void;
+ className?: string;
+}
+
+const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => (
+
+);
+
+const darkenOnHoverAmount = 0.1;
+const darkenOnActiveAmount = 0.2;
+const saturateOnFocusAmount = 0.2;
+export const Button = styled(PlainButton)`
+ cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
+ font-size: ${props => props.fontSize};
+ color: ${props => props.fontColor};
+ transition: background-color, opacity 0.5s ease;
+ padding: ${props => props.padding};
+ border-radius: 6px;
+ font-weight: 500;
+ outline: none;
+ font-family: ${props => props.fontFamily};
+ width: ${props => props.width};
+ background-color: ${props => props.backgroundColor};
+ border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
+ &:hover {
+ background-color: ${props =>
+ !props.isDisabled ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor]) : ''} !important;
+ }
+ &:active {
+ background-color: ${props =>
+ !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor]) : ''};
+ }
+ &:disabled {
+ opacity: 0.5;
+ }
+ &:focus {
+ background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor])};
+ }
+`;
+
+Button.defaultProps = {
+ fontSize: '12px',
+ fontColor: ColorOption.white,
+ backgroundColor: ColorOption.primaryColor,
+ width: 'auto',
+ fontFamily: 'Inter UI',
+ isDisabled: false,
+ padding: '0.8em 2.2em',
+};
+
+Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
new file mode 100644
index 000000000..a4b9d60d7
--- /dev/null
+++ b/packages/instant/src/components/ui/text.tsx
@@ -0,0 +1,75 @@
+import { darken } from 'polished';
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
+
+export interface TextProps {
+ fontColor: ColorOption;
+ fontFamily: string;
+ fontStyle: string;
+ fontSize: string;
+ lineHeight: string;
+ className?: string;
+ Tag?: TextTag;
+ minHeight?: string;
+ center?: boolean;
+ fontWeight?: number | string;
+ textDecorationLine?: string;
+ onClick?: (event: React.MouseEvent) => void;
+ hoverColor?: string;
+ noWrap?: boolean;
+ display?: string;
+}
+
+const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => (
+
+ {children}
+
+);
+
+const darkenOnHoverAmount = 0.3;
+export const Text = styled(PlainText)`
+ font-family: ${props => props.fontFamily};
+ font-style: ${props => props.fontStyle};
+ font-weight: ${props => props.fontWeight};
+ font-size: ${props => props.fontSize};
+ text-decoration-line: ${props => props.textDecorationLine};
+ ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
+ ${props => (props.center ? 'text-align: center' : '')};
+ color: ${props => props.theme[props.fontColor]};
+ ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
+ ${props => (props.onClick ? 'cursor: pointer' : '')};
+ transition: color 0.5s ease;
+ ${props => (props.noWrap ? 'white-space: nowrap' : '')};
+ ${props => (props.display ? `display: ${props.display}` : '')};
+ &:hover {
+ ${props => (props.onClick ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.fontColor)}` : '')};
+ }
+`;
+
+Text.defaultProps = {
+ fontFamily: 'Inter UI',
+ fontStyle: 'normal',
+ fontWeight: 400,
+ fontColor: ColorOption.black,
+ fontSize: '15px',
+ lineHeight: '1.5em',
+ textDecorationLine: 'none',
+ Tag: 'div',
+ noWrap: false,
+};
+
+Text.displayName = 'Text';
+
+export const Title: React.StatelessComponent = props => ;
+
+Title.defaultProps = {
+ Tag: 'h2',
+ fontSize: '20px',
+ fontWeight: 600,
+ fontColor: ColorOption.primaryColor,
+};
+
+Title.displayName = 'Title';
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 9ba390be9..99f9bb3ba 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -2,8 +2,11 @@ import * as React from 'react';
import { Provider } from 'react-redux';
import { store } from '../redux/store';
+import { fonts } from '../style/fonts';
import { theme, ThemeProvider } from '../style/theme';
+fonts.include();
+
export interface ZeroExInstantProps {}
export const ZeroExInstant: React.StatelessComponent = () => (
diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
new file mode 100644
index 000000000..975a30a61
--- /dev/null
+++ b/packages/instant/src/style/fonts.ts
@@ -0,0 +1,10 @@
+import { injectGlobal } from './theme';
+
+export const fonts = {
+ include: () => {
+ // Inject the inter-ui font into the page
+ return injectGlobal`
+ @import url('https://rsms.me/inter/inter-ui.css');
+ `;
+ },
+};
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 0af233db2..3bced9071 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -6,29 +6,24 @@ const {
injectGlobal,
keyframes,
ThemeProvider,
-} = styledComponents as styledComponents.ThemedStyledComponentsModule;
+} = styledComponents as styledComponents.ThemedStyledComponentsModule;
-// Inject the inter-ui font into the page
-styledComponents.injectGlobal`
- @import url('https://rsms.me/inter/inter-ui.css');
-`;
+export type Theme = { [key in ColorOption]: string };
-export interface IThemeInterface {
- primaryColor: string;
- black: string;
- white: string;
- darkGrey: string;
- lightGrey: string;
- fontFamily: string;
+export enum ColorOption {
+ primaryColor = 'primaryColor',
+ black = 'black',
+ lightGrey = 'lightGrey',
+ darkGrey = 'darkGrey',
+ white = 'white',
}
-export const theme: IThemeInterface = {
+export const theme: Theme = {
primaryColor: '#512D80',
black: 'black',
lightGrey: '#999999',
darkGrey: '#333333',
white: 'white',
- fontFamily: 'Inter UI, sans-serif',
};
export { styled, css, injectGlobal, keyframes, ThemeProvider };
diff --git a/yarn.lock b/yarn.lock
index 07d4ce448..d1f512ac8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11785,6 +11785,12 @@ polished@^1.9.3:
version "1.9.3"
resolved "https://registry.npmjs.org/polished/-/polished-1.9.3.tgz#d61b8a0c4624efe31e2583ff24a358932b6b75e1"
+polished@^2.2.0:
+ version "2.2.0"
+ resolved "http://localhost:4873/polished/-/polished-2.2.0.tgz#5ca7e178cc5352bd7fd1efc45342f7c6d59cc982"
+ dependencies:
+ "@babel/runtime" "^7.0.0"
+
popper.js@1.14.3, popper.js@^1.14.1:
version "1.14.3"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
--
cgit v1.2.3
From 85c34b17aa074e67ed9263094cc0ee75a8f00e60 Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 14:04:56 -0700
Subject: Add Flex and Container component
---
packages/instant/src/components/ui/container.tsx | 47 ++++++++++++++++++++++++
packages/instant/src/components/ui/flex.tsx | 34 +++++++++++++++++
packages/instant/src/style/util.ts | 10 +++++
3 files changed, 91 insertions(+)
create mode 100644 packages/instant/src/components/ui/container.tsx
create mode 100644 packages/instant/src/components/ui/flex.tsx
create mode 100644 packages/instant/src/style/util.ts
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
new file mode 100644
index 000000000..f928ed25b
--- /dev/null
+++ b/packages/instant/src/components/ui/container.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
+
+export interface ContainerProps {
+ display?: string;
+ position?: string;
+ top?: string;
+ right?: string;
+ bottom?: string;
+ left?: string;
+ maxWidth?: string;
+ margin: string;
+ marginTop?: string;
+ marginRight?: string;
+ marginBottom?: string;
+ marginLeft?: string;
+ padding?: string;
+ className?: string;
+ backgroundColor?: ColorOption;
+}
+
+const PlainContainer: React.StatelessComponent = ({ children, className }) => (
+ {children}
+);
+
+export const Container = styled(PlainContainer)`
+ ${props => cssRuleIfExists(props, 'display')}
+ ${props => cssRuleIfExists(props, 'position')}
+ ${props => cssRuleIfExists(props, 'top')}
+ ${props => cssRuleIfExists(props, 'right')}
+ ${props => cssRuleIfExists(props, 'bottom')}
+ ${props => cssRuleIfExists(props, 'left')}
+ ${props => cssRuleIfExists(props, 'max-width')}
+ ${props => cssRuleIfExists(props, 'margin')}
+ ${props => cssRuleIfExists(props, 'margin-top')}
+ ${props => cssRuleIfExists(props, 'margin-right')}
+ ${props => cssRuleIfExists(props, 'margin-bottom')}
+ ${props => cssRuleIfExists(props, 'margin-left')}
+ ${props => cssRuleIfExists(props, 'padding')}
+ background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Container.defaultProps = {
+ display: 'inline-block',
+};
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
new file mode 100644
index 000000000..544d9fe23
--- /dev/null
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export interface FlexProps {
+ direction: 'row' | 'column';
+ flexWrap: 'wrap' | 'nowrap';
+ justify: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ align: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ backgroundColor?: ColorOption;
+ className?: string;
+}
+
+const PlainFlex: React.StatelessComponent = ({ children, className }) => (
+ {children}
+);
+
+export const Flex = styled(PlainFlex)`
+ display: flex;
+ direction: ${props => props.direction};
+ flex-wrap: ${props => props.flexWrap};
+ justify-content: ${props => props.justify};
+ align-items: ${props => props.align};
+ background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Flex.defaultProps = {
+ direction: 'row',
+ flexWrap: 'nowrap',
+ justify: 'center',
+ align: 'center',
+};
+
+Flex.displayName = 'Flex';
diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts
new file mode 100644
index 000000000..7cf13133f
--- /dev/null
+++ b/packages/instant/src/style/util.ts
@@ -0,0 +1,10 @@
+import * as _ from 'lodash';
+
+export const cssRuleIfExists = (props: any, rule: string): string => {
+ const camelCaseRule = _.camelCase(rule);
+ const ruleValueIfExists = props[camelCaseRule];
+ if (!_.isUndefined(ruleValueIfExists)) {
+ return `${rule}: ${ruleValueIfExists};`;
+ }
+ return '';
+};
--
cgit v1.2.3
From a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92 Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 14:59:07 -0700
Subject: Improve utilities and try to use them in simple form component
---
packages/instant/public/index.html | 6 ++++
packages/instant/src/components/ui/container.tsx | 10 +++++-
packages/instant/src/components/ui/flex.tsx | 10 +++---
packages/instant/src/components/ui/index.ts | 4 +++
packages/instant/src/components/ui/text.tsx | 35 +++++++++++---------
.../instant/src/components/zero_ex_instant.tsx | 4 ++-
.../src/components/zero_ex_instant_container.tsx | 38 ++++++++++++++++++++++
packages/instant/tslint.json | 5 ++-
8 files changed, 89 insertions(+), 23 deletions(-)
create mode 100644 packages/instant/src/components/ui/index.ts
create mode 100644 packages/instant/src/components/zero_ex_instant_container.tsx
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 45968a3c9..d673dafd8 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -6,6 +6,12 @@
0x Instant Dev Environment
+
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index f928ed25b..8366d5748 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -10,13 +10,16 @@ export interface ContainerProps {
right?: string;
bottom?: string;
left?: string;
+ width?: string;
maxWidth?: string;
- margin: string;
+ margin?: string;
marginTop?: string;
marginRight?: string;
marginBottom?: string;
marginLeft?: string;
padding?: string;
+ boxShadow?: string;
+ borderRadius?: string;
className?: string;
backgroundColor?: ColorOption;
}
@@ -32,6 +35,7 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'right')}
${props => cssRuleIfExists(props, 'bottom')}
${props => cssRuleIfExists(props, 'left')}
+ ${props => cssRuleIfExists(props, 'width')}
${props => cssRuleIfExists(props, 'max-width')}
${props => cssRuleIfExists(props, 'margin')}
${props => cssRuleIfExists(props, 'margin-top')}
@@ -39,9 +43,13 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'margin-bottom')}
${props => cssRuleIfExists(props, 'margin-left')}
${props => cssRuleIfExists(props, 'padding')}
+ ${props => cssRuleIfExists(props, 'box-shadow')}
+ ${props => cssRuleIfExists(props, 'border-radius')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
`;
Container.defaultProps = {
display: 'inline-block',
};
+
+Container.displayName = 'Container';
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 544d9fe23..f55f5f8ba 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
export interface FlexProps {
- direction: 'row' | 'column';
- flexWrap: 'wrap' | 'nowrap';
- justify: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
- align: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ direction?: 'row' | 'column';
+ flexWrap?: 'wrap' | 'nowrap';
+ justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
backgroundColor?: ColorOption;
className?: string;
}
@@ -17,7 +17,7 @@ const PlainFlex: React.StatelessComponent = ({ children, className })
export const Flex = styled(PlainFlex)`
display: flex;
- direction: ${props => props.direction};
+ flex-direction: ${props => props.direction};
flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify};
align-items: ${props => props.align};
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
new file mode 100644
index 000000000..dca63b65c
--- /dev/null
+++ b/packages/instant/src/components/ui/index.ts
@@ -0,0 +1,4 @@
+export { Text, Title } from './text';
+export { Button } from './button';
+export { Flex } from './flex';
+export { Container } from './container';
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index a4b9d60d7..0bc387644 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -3,16 +3,16 @@ import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
-
export interface TextProps {
- fontColor: ColorOption;
- fontFamily: string;
- fontStyle: string;
- fontSize: string;
- lineHeight: string;
+ fontColor?: ColorOption;
+ fontFamily?: string;
+ fontStyle?: string;
+ fontSize?: string;
+ opacity?: number;
+ letterSpacing?: string;
+ textTransform?: string;
+ lineHeight?: string;
className?: string;
- Tag?: TextTag;
minHeight?: string;
center?: boolean;
fontWeight?: number | string;
@@ -23,10 +23,10 @@ export interface TextProps {
display?: string;
}
-const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => (
-
+const PlainText: React.StatelessComponent = ({ children, className, onClick }) => (
+
{children}
-
+
);
const darkenOnHoverAmount = 0.3;
@@ -35,17 +35,23 @@ export const Text = styled(PlainText)`
font-style: ${props => props.fontStyle};
font-weight: ${props => props.fontWeight};
font-size: ${props => props.fontSize};
+ opacity: ${props => props.opacity};
text-decoration-line: ${props => props.textDecorationLine};
${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
${props => (props.center ? 'text-align: center' : '')};
- color: ${props => props.theme[props.fontColor]};
+ color: ${props => props.fontColor && props.theme[props.fontColor]};
${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
${props => (props.onClick ? 'cursor: pointer' : '')};
transition: color 0.5s ease;
${props => (props.noWrap ? 'white-space: nowrap' : '')};
${props => (props.display ? `display: ${props.display}` : '')};
+ ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
+ ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
&:hover {
- ${props => (props.onClick ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.fontColor)}` : '')};
+ ${props =>
+ props.onClick
+ ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}`
+ : ''};
}
`;
@@ -57,7 +63,6 @@ Text.defaultProps = {
fontSize: '15px',
lineHeight: '1.5em',
textDecorationLine: 'none',
- Tag: 'div',
noWrap: false,
};
@@ -66,9 +71,9 @@ Text.displayName = 'Text';
export const Title: React.StatelessComponent = props => ;
Title.defaultProps = {
- Tag: 'h2',
fontSize: '20px',
fontWeight: 600,
+ opacity: 1,
fontColor: ColorOption.primaryColor,
};
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 99f9bb3ba..0e6230d1b 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -5,6 +5,8 @@ import { store } from '../redux/store';
import { fonts } from '../style/fonts';
import { theme, ThemeProvider } from '../style/theme';
+import { ZeroExInstantContainer } from './zero_ex_instant_container';
+
fonts.include();
export interface ZeroExInstantProps {}
@@ -12,7 +14,7 @@ export interface ZeroExInstantProps {}
export const ZeroExInstant: React.StatelessComponent = () => (
- ZeroExInstant
+
);
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
new file mode 100644
index 000000000..fc936c3f2
--- /dev/null
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface ZeroExInstantContainerProps {}
+
+export const ZeroExInstantContainer: React.StatelessComponent = props => (
+
+
+
+
+ I want to buy
+
+
+
+ 0.00
+ rep
+
+
+ 0 ETH
+ $0.00
+
+
+
+
+ hey
+
+
+
+);
diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json
index ffaefe83a..1ab924e47 100644
--- a/packages/instant/tslint.json
+++ b/packages/instant/tslint.json
@@ -1,3 +1,6 @@
{
- "extends": ["@0xproject/tslint-config"]
+ "extends": ["@0xproject/tslint-config"],
+ "rules": {
+ "custom-no-magic-numbers": false
+ }
}
--
cgit v1.2.3
From ba2ba628e815c996582c6ead81f657a14a00abd0 Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 15:02:06 -0700
Subject: Fix linting problems
---
packages/instant/src/redux/reducer.ts | 4 ++--
packages/instant/src/redux/store.ts | 2 +-
packages/instant/src/style/theme.ts | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 7efe8aeb0..e4578d620 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -10,7 +10,7 @@ export const INITIAL_STATE: State = {
ethUsdPrice: undefined,
};
-export function reducer(state: State = INITIAL_STATE, action: Action): State {
+export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
switch (action.type) {
case ActionTypes.UPDATE_ETH_USD_PRICE:
return {
@@ -20,4 +20,4 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
default:
return state;
}
-}
+};
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
index 46c4350b0..fcd19f9a8 100644
--- a/packages/instant/src/redux/store.ts
+++ b/packages/instant/src/redux/store.ts
@@ -1,5 +1,5 @@
import * as _ from 'lodash';
-import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
+import { createStore, Store as ReduxStore } from 'redux';
import { reducer, State } from './reducer';
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 3bced9071..9eb6ccb56 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -6,7 +6,7 @@ const {
injectGlobal,
keyframes,
ThemeProvider,
-} = styledComponents as styledComponents.ThemedStyledComponentsModule;
+} = styledComponents;
export type Theme = { [key in ColorOption]: string };
--
cgit v1.2.3
From 00eb3211c9909bcdcb354c55bf33ed3f988030eb Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 15:20:06 -0700
Subject: Remove deps we probably dont need
---
packages/instant/package.json | 2 --
yarn.lock | 82 ++++++++++++++++++-------------------------
2 files changed, 35 insertions(+), 49 deletions(-)
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 57b094626..01b1dc6c5 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -43,10 +43,8 @@
},
"homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
"dependencies": {
- "@0xproject/connect": "^2.0.4",
"@0xproject/types": "^1.1.1",
"@0xproject/typescript-typings": "^2.0.2",
- "@0xproject/utils": "^1.0.11",
"@0xproject/web3-wrapper": "^3.0.1",
"ethereum-types": "^1.0.8",
"lodash": "^4.17.10",
diff --git a/yarn.lock b/yarn.lock
index ff0964a09..fcd21ec58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -528,22 +528,6 @@
sinon "^4.0.0"
websocket "^1.0.25"
-"@0xproject/connect@^2.0.4":
- version "2.0.4"
- resolved "https://registry.npmjs.org/@0xproject/connect/-/connect-2.0.4.tgz#d61cd382edbb80120c8efce91dc85d2c668a5c5e"
- dependencies:
- "@0xproject/assert" "^1.0.11"
- "@0xproject/json-schemas" "^1.0.4"
- "@0xproject/order-utils" "^1.0.5"
- "@0xproject/types" "^1.1.1"
- "@0xproject/typescript-typings" "^2.0.2"
- "@0xproject/utils" "^1.0.11"
- lodash "^4.17.5"
- query-string "^5.0.1"
- sinon "^4.0.0"
- uuid "^3.3.2"
- websocket "^1.0.25"
-
"@0xproject/contract-wrappers@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@0xproject/contract-wrappers/-/contract-wrappers-0.1.1.tgz#8108d7ec051f202ef0cfa77c91c4ef994bf89881"
@@ -716,7 +700,7 @@
lodash "4.17.10"
web3 "0.20.6"
-"@0xproject/utils@^1.0.11", "@0xproject/utils@^1.0.4":
+"@0xproject/utils@^1.0.4":
version "1.0.11"
resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-1.0.11.tgz#5b53e7d9d4dbe68e219049218c9db04e97c37429"
dependencies:
@@ -1606,9 +1590,9 @@ aes-js@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
-aes-js@^0.2.3:
- version "0.2.4"
- resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
+aes-js@^3.1.1:
+ version "3.1.1"
+ resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
ajv-errors@^1.0.0:
version "1.0.0"
@@ -2762,10 +2746,6 @@ balanced-match@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-base-x@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/base-x/-/base-x-1.1.0.tgz#42d3d717474f9ea02207f6d1aa1f426913eeb7ac"
-
base-x@^3.0.2:
version "3.0.4"
resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.4.tgz#94c1788736da065edb1d68808869e357c977fa77"
@@ -3204,7 +3184,7 @@ bs-logger@0.x:
dependencies:
fast-json-stable-stringify "^2.0.0"
-bs58@=4.0.1:
+bs58@=4.0.1, bs58@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
dependencies:
@@ -3214,18 +3194,13 @@ bs58@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/bs58/-/bs58-2.0.1.tgz#55908d58f1982aba2008fa1bed8f91998a29bf8d"
-bs58@^3.1.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/bs58/-/bs58-3.1.0.tgz#d4c26388bf4804cac714141b1945aa47e5eb248e"
- dependencies:
- base-x "^1.1.0"
-
-bs58check@^1.0.8:
- version "1.3.4"
- resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-1.3.4.tgz#c52540073749117714fa042c3047eb8f9151cbf8"
+bs58check@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
dependencies:
- bs58 "^3.1.0"
+ bs58 "^4.0.0"
create-hash "^1.1.0"
+ safe-buffer "^5.1.2"
bser@^2.0.0:
version "2.0.0"
@@ -5781,7 +5756,7 @@ ethereumjs-util@5.1.5, ethereumjs-util@^5.0.0, ethereumjs-util@^5.0.1, ethereumj
safe-buffer "^5.1.1"
secp256k1 "^3.0.1"
-ethereumjs-util@^4.0.1, ethereumjs-util@^4.3.0, ethereumjs-util@^4.4.0:
+ethereumjs-util@^4.0.1, ethereumjs-util@^4.3.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-4.5.0.tgz#3e9428b317eebda3d7260d854fddda954b1f1bc6"
dependencies:
@@ -5835,17 +5810,18 @@ ethereumjs-vm@^2.0.2, ethereumjs-vm@^2.1.0, ethereumjs-vm@^2.3.4:
rustbn.js "~0.1.1"
safe-buffer "^5.1.1"
-ethereumjs-wallet@0.6.0:
- version "0.6.0"
- resolved "https://registry.yarnpkg.com/ethereumjs-wallet/-/ethereumjs-wallet-0.6.0.tgz#82763b1697ee7a796be7155da9dfb49b2f98cfdb"
+ethereumjs-wallet@~0.6.0:
+ version "0.6.2"
+ resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
dependencies:
- aes-js "^0.2.3"
- bs58check "^1.0.8"
- ethereumjs-util "^4.4.0"
- hdkey "^0.7.0"
+ aes-js "^3.1.1"
+ bs58check "^2.1.2"
+ ethereumjs-util "^5.2.0"
+ hdkey "^1.0.0"
+ safe-buffer "^5.1.2"
scrypt.js "^0.2.0"
- utf8 "^2.1.1"
- uuid "^2.0.1"
+ utf8 "^3.0.0"
+ uuid "^3.3.2"
ethers@3.0.22:
version "3.0.22"
@@ -6671,7 +6647,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep:
ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default"
ethereumjs-util "^5.2.0"
ethereumjs-vm "2.3.5"
- ethereumjs-wallet "0.6.0"
+ ethereumjs-wallet "~0.6.0"
fake-merkle-patricia-tree "~1.0.1"
heap "~0.2.6"
js-scrypt "^0.2.0"
@@ -7369,13 +7345,21 @@ hawk@~6.0.2:
hoek "4.x.x"
sntp "2.x.x"
-hdkey@^0.7.0, hdkey@^0.7.1:
+hdkey@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-0.7.1.tgz#caee4be81aa77921e909b8d228dd0f29acaee632"
dependencies:
coinstring "^2.0.0"
secp256k1 "^3.0.1"
+hdkey@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
+ dependencies:
+ coinstring "^2.0.0"
+ safe-buffer "^5.1.1"
+ secp256k1 "^3.0.1"
+
he@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -15775,6 +15759,10 @@ utf8@^2.1.1:
version "2.1.2"
resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
+utf8@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
+
util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
--
cgit v1.2.3
From d2e4a150d94ae62fff9c5273e11a12f3ac3bbabd Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 15:47:19 -0700
Subject: Fix currupted yarn lock file
---
yarn.lock | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index fcd21ec58..3d204afe9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1209,7 +1209,7 @@
"@types/react-redux@^6.0.9":
version "6.0.9"
- resolved "http://localhost:4873/@types%2freact-redux/-/react-redux-6.0.9.tgz#96aa7f5b0716bcc3bfb36ceaa1223118d509f79a"
+ resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-6.0.9.tgz#96aa7f5b0716bcc3bfb36ceaa1223118d509f79a"
dependencies:
"@types/react" "*"
redux "^4.0.0"
@@ -1266,7 +1266,7 @@
"@types/redux@^3.6.0":
version "3.6.0"
- resolved "http://localhost:4873/@types%2fredux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
+ resolved "https://registry.npmjs.org/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
dependencies:
redux "*"
@@ -11676,7 +11676,7 @@ polished@^1.9.3:
polished@^2.2.0:
version "2.2.0"
- resolved "http://localhost:4873/polished/-/polished-2.2.0.tgz#5ca7e178cc5352bd7fd1efc45342f7c6d59cc982"
+ resolved "https://registry.npmjs.org/polished/-/polished-2.2.0.tgz#5ca7e178cc5352bd7fd1efc45342f7c6d59cc982"
dependencies:
"@babel/runtime" "^7.0.0"
@@ -12642,7 +12642,7 @@ react-popper@^1.0.0-beta.6:
react-redux@^5.0.3, react-redux@^5.0.7:
version "5.0.7"
- resolved "http://localhost:4873/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
+ resolved "http://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
dependencies:
hoist-non-react-statics "^2.5.0"
invariant "^2.0.0"
@@ -13021,7 +13021,7 @@ redux-devtools-extension@^2.13.2:
redux@*, redux@^4.0.0:
version "4.0.0"
- resolved "http://localhost:4873/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
+ resolved "https://registry.npmjs.org/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
dependencies:
loose-envify "^1.1.0"
symbol-observable "^1.2.0"
@@ -14618,7 +14618,7 @@ styled-components@^3.3.3:
styled-components@^3.4.9:
version "3.4.9"
- resolved "http://localhost:4873/styled-components/-/styled-components-3.4.9.tgz#519abeb351b37be5b7de6a15ff9e4efeb9d772da"
+ resolved "https://registry.npmjs.org/styled-components/-/styled-components-3.4.9.tgz#519abeb351b37be5b7de6a15ff9e4efeb9d772da"
dependencies:
buffer "^5.0.3"
css-to-react-native "^2.0.3"
--
cgit v1.2.3
From 831b4a119393ba6884796ef9b45b7e47965ec046 Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 15:57:48 -0700
Subject: apply prettier
---
packages/instant/src/style/theme.ts | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 9eb6ccb56..02f890492 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,12 +1,6 @@
import * as styledComponents from 'styled-components';
-const {
- default: styled,
- css,
- injectGlobal,
- keyframes,
- ThemeProvider,
-} = styledComponents;
+const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents;
export type Theme = { [key in ColorOption]: string };
--
cgit v1.2.3
From 0cfe5637c048091c9502d49c8526e17cefb1a525 Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 16:27:04 -0700
Subject: Create zrx instant container heading
---
packages/instant/src/components/ui/flex.tsx | 3 ++
packages/instant/src/components/ui/text.tsx | 6 +--
.../src/components/zero_ex_instant_container.tsx | 49 ++++++++++++++--------
3 files changed, 37 insertions(+), 21 deletions(-)
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index f55f5f8ba..327e91926 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,12 +1,14 @@
import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
export interface FlexProps {
direction?: 'row' | 'column';
flexWrap?: 'wrap' | 'nowrap';
justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ width?: string;
backgroundColor?: ColorOption;
className?: string;
}
@@ -21,6 +23,7 @@ export const Flex = styled(PlainFlex)`
flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify};
align-items: ${props => props.align};
+ ${props => cssRuleIfExists(props, 'width')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
`;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 0bc387644..9fb8ea26f 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -24,9 +24,9 @@ export interface TextProps {
}
const PlainText: React.StatelessComponent = ({ children, className, onClick }) => (
-
+
{children}
-
+
);
const darkenOnHoverAmount = 0.3;
@@ -61,9 +61,9 @@ Text.defaultProps = {
fontWeight: 400,
fontColor: ColorOption.black,
fontSize: '15px',
- lineHeight: '1.5em',
textDecorationLine: 'none',
noWrap: false,
+ display: 'inline-block',
};
Text.displayName = 'Text';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index fc936c3f2..b5853594f 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -7,32 +7,45 @@ import { Container, Flex, Text } from './ui';
export interface ZeroExInstantContainerProps {}
export const ZeroExInstantContainer: React.StatelessComponent = props => (
-
-
-
+
+
+
I want to buy
-
-
- 0.00
- rep
+
+
+
+
+ 0.00
+
+
+
+ rep
+
+
+
+
+
+
+ 0 ETH
+
-
- 0 ETH
- $0.00
-
+
+ $0.00
+
-
-
- hey
-
-
-
+
+
+
+ hey
+
+
);
--
cgit v1.2.3
From d9b7aa2e4ba088b4dda1b1d2956de5d267a0674e Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 17:22:36 -0700
Subject: Add faux order details section
---
packages/instant/src/components/ui/container.tsx | 8 +++-
.../src/components/zero_ex_instant_container.tsx | 43 ++--------------------
packages/instant/src/style/theme.ts | 4 ++
3 files changed, 15 insertions(+), 40 deletions(-)
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 8366d5748..4ebaf2af3 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -20,6 +20,9 @@ export interface ContainerProps {
padding?: string;
boxShadow?: string;
borderRadius?: string;
+ border?: string;
+ borderColor?: ColorOption;
+ borderTop?: string;
className?: string;
backgroundColor?: ColorOption;
}
@@ -45,11 +48,14 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'padding')}
${props => cssRuleIfExists(props, 'box-shadow')}
${props => cssRuleIfExists(props, 'border-radius')}
+ ${props => cssRuleIfExists(props, 'border')}
+ ${props => cssRuleIfExists(props, 'border-top')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+ border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
`;
Container.defaultProps = {
- display: 'inline-block',
+ display: 'block',
};
Container.displayName = 'Container';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index b5853594f..efda6ecaf 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,50 +2,15 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { InstantHeading } from './instant_heading';
+import { OrderDetails } from './order_details';
import { Container, Flex, Text } from './ui';
export interface ZeroExInstantContainerProps {}
export const ZeroExInstantContainer: React.StatelessComponent = props => (
-
-
-
- I want to buy
-
-
-
-
-
- 0.00
-
-
-
- rep
-
-
-
-
-
-
- 0 ETH
-
-
-
- $0.00
-
-
-
-
-
- hey
-
+
+
);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 02f890492..cf9da5378 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -8,6 +8,8 @@ export enum ColorOption {
primaryColor = 'primaryColor',
black = 'black',
lightGrey = 'lightGrey',
+ grey = 'grey',
+ feintGrey = 'feintGrey',
darkGrey = 'darkGrey',
white = 'white',
}
@@ -16,6 +18,8 @@ export const theme: Theme = {
primaryColor: '#512D80',
black: 'black',
lightGrey: '#999999',
+ grey: '#666666',
+ feintGrey: '#DEDEDE',
darkGrey: '#333333',
white: 'white',
};
--
cgit v1.2.3
From 98f8c7749433e63d7fea3c4e932db1f251607e4d Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 17:47:32 -0700
Subject: Add BuyButton and other small improvement
---
packages/instant/public/index.html | 9 +++-
packages/instant/src/components/buy_button.tsx | 19 +++++++
.../instant/src/components/instant_heading.tsx | 46 ++++++++++++++++
packages/instant/src/components/order_details.tsx | 62 ++++++++++++++++++++++
packages/instant/src/components/ui/button.tsx | 26 ++++-----
packages/instant/src/components/ui/container.tsx | 2 +
.../src/components/zero_ex_instant_container.tsx | 2 +
7 files changed, 147 insertions(+), 19 deletions(-)
create mode 100644 packages/instant/src/components/buy_button.tsx
create mode 100644 packages/instant/src/components/instant_heading.tsx
create mode 100644 packages/instant/src/components/order_details.tsx
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index d673dafd8..851d155a9 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -8,8 +8,13 @@
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
new file mode 100644
index 000000000..9a70d127f
--- /dev/null
+++ b/packages/instant/src/components/buy_button.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Button, Container, Text } from './ui';
+
+export interface BuyButtonProps {}
+
+export const BuyButton: React.StatelessComponent = props => (
+
+
+
+);
+
+BuyButton.displayName = 'BuyButton';
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
new file mode 100644
index 000000000..5aa82bcda
--- /dev/null
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface InstantHeadingProps {}
+
+export const InstantHeading: React.StatelessComponent = props => (
+
+
+
+ I want to buy
+
+
+
+
+
+ 0.00
+
+
+
+ rep
+
+
+
+
+
+
+ 0 ETH
+
+
+
+ $0.00
+
+
+
+
+);
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
new file mode 100644
index 000000000..f90ee9f6f
--- /dev/null
+++ b/packages/instant/src/components/order_details.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Text } from './ui';
+
+export interface OrderDetailsProps {}
+
+export const OrderDetails: React.StatelessComponent = props => (
+
+
+
+ Order Details
+
+
+
+
+
+
+);
+
+OrderDetails.displayName = 'OrderDetails';
+
+export interface OrderDetailsRowProps {
+ name: string;
+ primaryValue: string;
+ secondaryValue: string;
+ shouldEmphasize?: boolean;
+}
+
+export const OrderDetailsRow: React.StatelessComponent = props => {
+ const fontWeight = props.shouldEmphasize ? 700 : 400;
+ return (
+
+
+
+ {props.name}
+
+
+
+ ({props.secondaryValue})
+
+
+ {props.primaryValue}
+
+
+
+
+ );
+};
+
+OrderDetailsRow.defaultProps = {
+ shouldEmphasize: false,
+};
+
+OrderDetailsRow.displayName = 'OrderDetailsRow';
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx
index ec0a87345..1fcb2591c 100644
--- a/packages/instant/src/components/ui/button.tsx
+++ b/packages/instant/src/components/ui/button.tsx
@@ -4,11 +4,8 @@ import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
export interface ButtonProps {
- fontColor: ColorOption;
- backgroundColor: ColorOption;
+ backgroundColor?: ColorOption;
borderColor?: ColorOption;
- fontSize?: string;
- fontFamily?: string;
width?: string;
padding?: string;
type?: string;
@@ -28,41 +25,36 @@ const darkenOnActiveAmount = 0.2;
const saturateOnFocusAmount = 0.2;
export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
- font-size: ${props => props.fontSize};
- color: ${props => props.fontColor};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
- border-radius: 6px;
- font-weight: 500;
+ border-radius: 3px;
outline: none;
- font-family: ${props => props.fontFamily};
width: ${props => props.width};
- background-color: ${props => props.backgroundColor};
+ background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
&:hover {
background-color: ${props =>
- !props.isDisabled ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor]) : ''} !important;
+ !props.isDisabled
+ ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
+ : ''} !important;
}
&:active {
background-color: ${props =>
- !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor]) : ''};
+ !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
}
&:disabled {
opacity: 0.5;
}
&:focus {
- background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor])};
+ background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
`;
Button.defaultProps = {
- fontSize: '12px',
- fontColor: ColorOption.white,
backgroundColor: ColorOption.primaryColor,
width: 'auto',
- fontFamily: 'Inter UI',
isDisabled: false,
- padding: '0.8em 2.2em',
+ padding: '1em 2.2em',
};
Button.displayName = 'Button';
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 4ebaf2af3..bc47ba0aa 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -25,6 +25,7 @@ export interface ContainerProps {
borderTop?: string;
className?: string;
backgroundColor?: ColorOption;
+ hasBoxShadow?: boolean;
}
const PlainContainer: React.StatelessComponent = ({ children, className }) => (
@@ -50,6 +51,7 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'border-radius')}
${props => cssRuleIfExists(props, 'border')}
${props => cssRuleIfExists(props, 'border-top')}
+ ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
`;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index efda6ecaf..d6df3ccc0 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { BuyButton } from './buy_button';
import { InstantHeading } from './instant_heading';
import { OrderDetails } from './order_details';
import { Container, Flex, Text } from './ui';
@@ -12,5 +13,6 @@ export const ZeroExInstantContainer: React.StatelessComponent
+
);
--
cgit v1.2.3
From 1001dfcc30d9e7a049cc0d7719131adec6344f6c Mon Sep 17 00:00:00 2001
From: fragosti
Date: Thu, 4 Oct 2018 18:02:42 -0700
Subject: Add box shadow and default box-sizing: border-box to container
---
packages/instant/public/index.html | 1 +
packages/instant/src/components/buy_button.tsx | 2 +-
packages/instant/src/components/order_details.tsx | 2 +-
packages/instant/src/components/ui/container.tsx | 3 +--
.../instant/src/components/zero_ex_instant_container.tsx | 12 +++++++-----
5 files changed, 11 insertions(+), 9 deletions(-)
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 851d155a9..044a9137b 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -14,6 +14,7 @@
}
body {
+ margin: 0;
background-color: rgba(0, 0, 0, 0.2);
}
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 9a70d127f..5a32b9575 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -7,7 +7,7 @@ import { Button, Container, Text } from './ui';
export interface BuyButtonProps {}
export const BuyButton: React.StatelessComponent = props => (
-
+