Merge branch 'development' into feature/instant/buy-quote-heartbeat

This commit is contained in:
Steve Klebanoff 2018-11-09 10:06:22 -08:00
commit df91d34315
143 changed files with 1514 additions and 603 deletions

View File

@ -31,7 +31,7 @@ jobs:
- restore_cache: - restore_cache:
keys: keys:
- repo-{{ .Environment.CIRCLE_SHA1 }} - repo-{{ .Environment.CIRCLE_SHA1 }}
- run: cd packages/website && yarn build - run: cd packages/website && yarn build:prod
test-contracts-ganache: test-contracts-ganache:
docker: docker:
- image: circleci/node:9 - image: circleci/node:9

View File

@ -1,4 +1,13 @@
[ [
{
"version": "2.0.1",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"version": "2.0.0", "version": "2.0.0",
"changes": [ "changes": [

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v2.0.1 - _November 9, 2018_
* Dependencies updated
## v2.0.0 - _October 18, 2018_ ## v2.0.0 - _October 18, 2018_
* Add support for `eth_signTypedData`. (#1102) * Add support for `eth_signTypedData`. (#1102)

View File

@ -1,6 +1,6 @@
{ {
"name": "0x.js", "name": "0x.js",
"version": "2.0.0", "version": "2.0.1",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -42,12 +42,12 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"devDependencies": { "devDependencies": {
"@0x/abi-gen": "^1.0.14", "@0x/abi-gen": "^1.0.15",
"@0x/abi-gen-wrappers": "^1.0.1", "@0x/abi-gen-wrappers": "^1.0.2",
"@0x/contract-addresses": "^1.0.1", "@0x/contract-addresses": "^1.1.0",
"@0x/dev-utils": "^1.0.13", "@0x/dev-utils": "^1.0.14",
"@0x/migrations": "^2.0.0", "@0x/migrations": "^2.0.1",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",
"@types/node": "*", "@types/node": "*",
@ -73,18 +73,18 @@
"webpack": "^4.20.2" "webpack": "^4.20.2"
}, },
"dependencies": { "dependencies": {
"@0x/assert": "^1.0.14", "@0x/assert": "^1.0.15",
"@0x/base-contract": "^3.0.2", "@0x/base-contract": "^3.0.3",
"@0x/contract-wrappers": "^3.0.0", "@0x/contract-wrappers": "^3.0.1",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/order-watcher": "^2.2.0", "@0x/order-watcher": "^2.2.1",
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"@types/web3-provider-engine": "^14.0.0", "@types/web3-provider-engine": "^14.0.0",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethers": "~4.0.4", "ethers": "~4.0.4",
"lodash": "^4.17.5", "lodash": "^4.17.5",
"web3-provider-engine": "14.0.6" "web3-provider-engine": "14.0.6"

View File

@ -1,4 +1,13 @@
[ [
{
"version": "1.0.2",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"timestamp": 1539871071, "timestamp": 1539871071,
"version": "1.0.1", "version": "1.0.1",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.0.2 - _November 9, 2018_
* Dependencies updated
## v1.0.1 - _October 18, 2018_ ## v1.0.1 - _October 18, 2018_
* Dependencies updated * Dependencies updated

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/abi-gen-wrappers", "name": "@0x/abi-gen-wrappers",
"version": "1.0.1", "version": "1.0.2",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -30,17 +30,17 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen-wrappers/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen-wrappers/README.md",
"devDependencies": { "devDependencies": {
"@0x/abi-gen": "^1.0.14", "@0x/abi-gen": "^1.0.15",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethers": "~4.0.4", "ethers": "~4.0.4",
"lodash": "^4.17.5", "lodash": "^4.17.5",
"shx": "^0.2.2" "shx": "^0.2.2"
}, },
"dependencies": { "dependencies": {
"@0x/base-contract": "^3.0.2" "@0x/base-contract": "^3.0.3"
}, },
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"

View File

@ -1,4 +1,13 @@
[ [
{
"version": "1.0.15",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"timestamp": 1539871071, "timestamp": 1539871071,
"version": "1.0.14", "version": "1.0.14",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.0.15 - _November 9, 2018_
* Dependencies updated
## v1.0.14 - _October 18, 2018_ ## v1.0.14 - _October 18, 2018_
* Dependencies updated * Dependencies updated

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/abi-gen", "name": "@0x/abi-gen",
"version": "1.0.14", "version": "1.0.15",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -31,10 +31,10 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen/README.md",
"dependencies": { "dependencies": {
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"chalk": "^2.3.0", "chalk": "^2.3.0",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"glob": "^7.1.2", "glob": "^7.1.2",
"handlebars": "^4.0.11", "handlebars": "^4.0.11",
"lodash": "^4.17.5", "lodash": "^4.17.5",
@ -45,7 +45,7 @@
"yargs": "^10.0.3" "yargs": "^10.0.3"
}, },
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/glob": "5.0.35", "@types/glob": "5.0.35",
"@types/handlebars": "^4.0.36", "@types/handlebars": "^4.0.36",
"@types/mkdirp": "^0.5.1", "@types/mkdirp": "^0.5.1",

View File

@ -1,4 +1,13 @@
[ [
{
"version": "1.0.15",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"timestamp": 1539871071, "timestamp": 1539871071,
"version": "1.0.14", "version": "1.0.14",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.0.15 - _November 9, 2018_
* Dependencies updated
## v1.0.14 - _October 18, 2018_ ## v1.0.14 - _October 18, 2018_
* Dependencies updated * Dependencies updated

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/assert", "name": "@0x/assert",
"version": "1.0.14", "version": "1.0.15",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -29,7 +29,7 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/assert/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/assert/README.md",
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",
"@types/valid-url": "^1.0.2", "@types/valid-url": "^1.0.2",
@ -44,9 +44,9 @@
"typescript": "3.0.1" "typescript": "3.0.1"
}, },
"dependencies": { "dependencies": {
"@0x/json-schemas": "^2.0.0", "@0x/json-schemas": "^2.0.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"lodash": "^4.17.5", "lodash": "^4.17.5",
"valid-url": "^1.0.9" "valid-url": "^1.0.9"
}, },

View File

@ -29,7 +29,8 @@
"note": "Lower default expiry buffer from 5 minutes to 2 minutes", "note": "Lower default expiry buffer from 5 minutes to 2 minutes",
"pr": 1217 "pr": 1217
} }
] ],
"timestamp": 1541740904
}, },
{ {
"version": "2.1.0", "version": "2.1.0",

View File

@ -5,6 +5,15 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v2.2.0 - _November 9, 2018_
* `getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4 (#1187)
* the `OrderProvider` now requires a new method `getAvailableMakerAssetDatasAsync` and the `StandardRelayerAPIOrderProvider` requires the network id at init. (#1203)
* No longer require that provided orders all have the same maker and taker asset data (#1197)
* Fix bug where `BuyQuoteInfo` objects could return `totalEthAmount` and `feeEthAmount` that were not whole numbers (#1207)
* Fix bug where default values for `AssetBuyer` public facing methods could get overriden by `undefined` values (#1207)
* Lower default expiry buffer from 5 minutes to 2 minutes (#1217)
## v2.1.0 - _October 18, 2018_ ## v2.1.0 - _October 18, 2018_
* Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts` * Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts`
@ -13,6 +22,7 @@ CHANGELOG
* Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts` (#1116) * Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts` (#1116)
* Add `docs:json` command to package.json (#1139) * Add `docs:json` command to package.json (#1139)
* Add missing types to public interface (#1139) * Add missing types to public interface (#1139)
* Throw `SignatureRequestDenied` and `TransactionValueTooLow` errors when executing buy (#1147)
## v2.0.0 - _October 4, 2018_ ## v2.0.0 - _October 4, 2018_

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/asset-buyer", "name": "@0x/asset-buyer",
"version": "2.1.0", "version": "2.2.0",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -36,21 +36,21 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/asset-buyer/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/asset-buyer/README.md",
"dependencies": { "dependencies": {
"@0x/assert": "^1.0.14", "@0x/assert": "^1.0.15",
"@0x/connect": "^3.0.2", "@0x/connect": "^3.0.3",
"@0x/contract-wrappers": "^3.0.0", "@0x/contract-wrappers": "^3.0.1",
"@0x/json-schemas": "^2.0.0", "@0x/json-schemas": "^2.0.1",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"lodash": "^4.17.10" "lodash": "^4.17.10"
}, },
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/lodash": "^4.14.116", "@types/lodash": "^4.14.116",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",
"@types/node": "*", "@types/node": "*",

View File

@ -1,4 +1,13 @@
[ [
{
"version": "3.0.3",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"timestamp": 1539871071, "timestamp": 1539871071,
"version": "3.0.2", "version": "3.0.2",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v3.0.3 - _November 9, 2018_
* Dependencies updated
## v3.0.2 - _October 18, 2018_ ## v3.0.2 - _October 18, 2018_
* Dependencies updated * Dependencies updated

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/base-contract", "name": "@0x/base-contract",
"version": "3.0.2", "version": "3.0.3",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -29,7 +29,7 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/base-contract/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/base-contract/README.md",
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"chai": "^4.0.1", "chai": "^4.0.1",
"make-promises-safe": "^1.1.0", "make-promises-safe": "^1.1.0",
@ -40,10 +40,10 @@
"typescript": "3.0.1" "typescript": "3.0.1"
}, },
"dependencies": { "dependencies": {
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethers": "~4.0.4", "ethers": "~4.0.4",
"lodash": "^4.17.5" "lodash": "^4.17.5"
}, },

View File

@ -1,4 +1,13 @@
[ [
{
"version": "3.0.3",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"timestamp": 1539871071, "timestamp": 1539871071,
"version": "3.0.2", "version": "3.0.2",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v3.0.3 - _November 9, 2018_
* Dependencies updated
## v3.0.2 - _October 18, 2018_ ## v3.0.2 - _October 18, 2018_
* Dependencies updated * Dependencies updated

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/connect", "name": "@0x/connect",
"version": "3.0.2", "version": "3.0.3",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -44,12 +44,12 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/connect/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/connect/README.md",
"dependencies": { "dependencies": {
"@0x/assert": "^1.0.14", "@0x/assert": "^1.0.15",
"@0x/json-schemas": "^2.0.0", "@0x/json-schemas": "^2.0.1",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"lodash": "^4.17.5", "lodash": "^4.17.5",
"query-string": "^5.0.1", "query-string": "^5.0.1",
"sinon": "^4.0.0", "sinon": "^4.0.0",
@ -57,7 +57,7 @@
"websocket": "^1.0.25" "websocket": "^1.0.25"
}, },
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/fetch-mock": "^6.0.3", "@types/fetch-mock": "^6.0.3",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",

View File

@ -6,7 +6,8 @@
"pr": 1192, "pr": 1192,
"note": "Update Forwarder addresses" "note": "Update Forwarder addresses"
} }
] ],
"timestamp": 1541740904
}, },
{ {
"version": "1.0.1", "version": "1.0.1",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.1.0 - _November 9, 2018_
* Update Forwarder addresses (#1192)
## v1.0.1 - _October 18, 2018_ ## v1.0.1 - _October 18, 2018_
* Initial release (#1105) * Initial release (#1105)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/contract-addresses", "name": "@0x/contract-addresses",
"version": "1.0.1", "version": "1.1.0",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },

View File

@ -6,7 +6,8 @@
"pr": 1192, "pr": 1192,
"note": "Update Forwarder artifact" "note": "Update Forwarder artifact"
} }
] ],
"timestamp": 1541740904
}, },
{ {
"version": "1.0.1", "version": "1.0.1",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.1.0 - _November 9, 2018_
* Update Forwarder artifact (#1192)
## v1.0.1 - _October 18, 2018_ ## v1.0.1 - _October 18, 2018_
* Initial release (#1105) * Initial release (#1105)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/contract-artifacts", "name": "@0x/contract-artifacts",
"version": "1.0.1", "version": "1.1.0",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },

View File

@ -6,7 +6,8 @@
"note": "Fix bug in `ForwarderWrapper` where `feeRecipientAddress` was not correctly normalized.", "note": "Fix bug in `ForwarderWrapper` where `feeRecipientAddress` was not correctly normalized.",
"pr": 1178 "pr": 1178
} }
] ],
"timestamp": 1541740904
}, },
{ {
"version": "3.0.0", "version": "3.0.0",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v3.0.1 - _November 9, 2018_
* Fix bug in `ForwarderWrapper` where `feeRecipientAddress` was not correctly normalized. (#1178)
## v3.0.0 - _October 18, 2018_ ## v3.0.0 - _October 18, 2018_
* Add optional validation to the forwarder wrapper methods * Add optional validation to the forwarder wrapper methods
@ -15,6 +19,8 @@ CHANGELOG
* Removed `setProvider` method in top-level `ContractWrapper` class and added new `unsubscribeAll` method. (#1105) * Removed `setProvider` method in top-level `ContractWrapper` class and added new `unsubscribeAll` method. (#1105)
* Some properties and methods have been renamed. For example, some methods that previously could throw no longer can, and so their names have been updated accordingly. (#1105) * Some properties and methods have been renamed. For example, some methods that previously could throw no longer can, and so their names have been updated accordingly. (#1105)
* Removed ContractNotFound errors. Checking for this error was somewhat ineffecient. Relevant methods/functions now return the default error from web3-wrapper, which we feel provides enough information. (#1105) * Removed ContractNotFound errors. Checking for this error was somewhat ineffecient. Relevant methods/functions now return the default error from web3-wrapper, which we feel provides enough information. (#1105)
* Add `ForwarderWrapperError` to public interface (#1147)
* Add `ContractWrapperError.SignatureRequestDenied` to public interface (#1147)
## v2.0.2 - _October 4, 2018_ ## v2.0.2 - _October 4, 2018_

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/contract-wrappers", "name": "@0x/contract-wrappers",
"version": "3.0.0", "version": "3.0.1",
"description": "Smart TS wrappers for 0x smart contracts", "description": "Smart TS wrappers for 0x smart contracts",
"keywords": [ "keywords": [
"0xproject", "0xproject",
@ -37,10 +37,10 @@
"node": ">=6.0.0" "node": ">=6.0.0"
}, },
"devDependencies": { "devDependencies": {
"@0x/dev-utils": "^1.0.13", "@0x/dev-utils": "^1.0.14",
"@0x/migrations": "^2.0.0", "@0x/migrations": "^2.0.1",
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",
"@types/node": "*", "@types/node": "*",
@ -65,18 +65,18 @@
"web3-provider-engine": "14.0.6" "web3-provider-engine": "14.0.6"
}, },
"dependencies": { "dependencies": {
"@0x/abi-gen-wrappers": "^1.0.1", "@0x/abi-gen-wrappers": "^1.0.2",
"@0x/assert": "^1.0.14", "@0x/assert": "^1.0.15",
"@0x/contract-addresses": "^1.0.1", "@0x/contract-addresses": "^1.1.0",
"@0x/contract-artifacts": "^1.0.1", "@0x/contract-artifacts": "^1.1.0",
"@0x/fill-scenarios": "^1.0.8", "@0x/fill-scenarios": "^1.0.9",
"@0x/json-schemas": "^2.0.0", "@0x/json-schemas": "^2.0.1",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethereumjs-blockstream": "6.0.0", "ethereumjs-blockstream": "6.0.0",
"ethereumjs-util": "^5.1.1", "ethereumjs-util": "^5.1.1",
"ethers": "~4.0.4", "ethers": "~4.0.4",

View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "contracts", "name": "contracts",
"version": "2.1.50", "version": "2.1.51",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -45,12 +45,12 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/contracts/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/contracts/README.md",
"devDependencies": { "devDependencies": {
"@0x/abi-gen": "^1.0.14", "@0x/abi-gen": "^1.0.15",
"@0x/dev-utils": "^1.0.13", "@0x/dev-utils": "^1.0.14",
"@0x/sol-compiler": "^1.1.8", "@0x/sol-compiler": "^1.1.9",
"@0x/sol-cov": "^2.1.8", "@0x/sol-cov": "^2.1.9",
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/bn.js": "^4.11.0", "@types/bn.js": "^4.11.0",
"@types/ethereumjs-abi": "^0.6.0", "@types/ethereumjs-abi": "^0.6.0",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
@ -71,15 +71,15 @@
"yargs": "^10.0.3" "yargs": "^10.0.3"
}, },
"dependencies": { "dependencies": {
"@0x/base-contract": "^3.0.2", "@0x/base-contract": "^3.0.3",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"@types/js-combinatorics": "^0.5.29", "@types/js-combinatorics": "^0.5.29",
"bn.js": "^4.11.8", "bn.js": "^4.11.8",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethereumjs-abi": "0.6.5", "ethereumjs-abi": "0.6.5",
"ethereumjs-util": "^5.1.1", "ethereumjs-util": "^5.1.1",
"ethers": "~4.0.4", "ethers": "~4.0.4",

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/dev-tools-pages", "name": "@0x/dev-tools-pages",
"version": "0.0.2", "version": "0.0.3",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -16,7 +16,7 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@0x/react-shared": "^1.0.17", "@0x/react-shared": "^1.0.18",
"basscss": "^8.0.3", "basscss": "^8.0.3",
"bowser": "^1.9.3", "bowser": "^1.9.3",
"less": "^2.7.2", "less": "^2.7.2",

View File

@ -1,4 +1,13 @@
[ [
{
"version": "1.0.14",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"version": "1.0.13", "version": "1.0.13",
"changes": [ "changes": [

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.0.14 - _November 9, 2018_
* Dependencies updated
## v1.0.13 - _October 18, 2018_ ## v1.0.13 - _October 18, 2018_
* Make web3-provider-engine types a 'dependency' so it's available to users of the library (#1105) * Make web3-provider-engine types a 'dependency' so it's available to users of the library (#1105)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/dev-utils", "name": "@0x/dev-utils",
"version": "1.0.13", "version": "1.0.14",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -29,7 +29,7 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/dev-utils/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/dev-utils/README.md",
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",
"make-promises-safe": "^1.1.0", "make-promises-safe": "^1.1.0",
@ -41,14 +41,14 @@
"typescript": "3.0.1" "typescript": "3.0.1"
}, },
"dependencies": { "dependencies": {
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"@types/web3-provider-engine": "^14.0.0", "@types/web3-provider-engine": "^14.0.0",
"chai": "^4.0.1", "chai": "^4.0.1",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"lodash": "^4.17.5" "lodash": "^4.17.5"
}, },
"publishConfig": { "publishConfig": {

View File

@ -1,4 +1,13 @@
[ [
{
"version": "1.1.2",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"version": "1.1.1", "version": "1.1.1",
"changes": [ "changes": [

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.1.2 - _November 9, 2018_
* Dependencies updated
## v1.1.1 - _October 18, 2018_ ## v1.1.1 - _October 18, 2018_
* Add `JSONRPCResponseError` and error field on `JSONRPCResponsePayload`. (#1102) * Add `JSONRPCResponseError` and error field on `JSONRPCResponsePayload`. (#1102)

View File

@ -1,6 +1,6 @@
{ {
"name": "ethereum-types", "name": "ethereum-types",
"version": "1.1.1", "version": "1.1.2",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -29,7 +29,7 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/ethereum-types/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/ethereum-types/README.md",
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"make-promises-safe": "^1.1.0", "make-promises-safe": "^1.1.0",
"shx": "^0.2.2", "shx": "^0.2.2",
"tslint": "5.11.0", "tslint": "5.11.0",

View File

@ -1,4 +1,13 @@
[ [
{
"version": "1.0.9",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"version": "1.0.8", "version": "1.0.8",
"changes": [ "changes": [

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v1.0.9 - _November 9, 2018_
* Dependencies updated
## v1.0.8 - _October 18, 2018_ ## v1.0.8 - _October 18, 2018_
* Updated to use new @0xproject/contract-artifacts and @0xproject/abi-gen-wrappers packages (#1105) * Updated to use new @0xproject/contract-artifacts and @0xproject/abi-gen-wrappers packages (#1105)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/fill-scenarios", "name": "@0x/fill-scenarios",
"version": "1.0.8", "version": "1.0.9",
"description": "0x order fill scenario generator", "description": "0x order fill scenario generator",
"main": "lib/index.js", "main": "lib/index.js",
"types": "lib/index.d.ts", "types": "lib/index.d.ts",
@ -20,7 +20,7 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/fill-scenarios/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/fill-scenarios/README.md",
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"make-promises-safe": "^1.1.0", "make-promises-safe": "^1.1.0",
"shx": "^0.2.2", "shx": "^0.2.2",
@ -28,15 +28,15 @@
"typescript": "3.0.1" "typescript": "3.0.1"
}, },
"dependencies": { "dependencies": {
"@0x/abi-gen-wrappers": "^1.0.1", "@0x/abi-gen-wrappers": "^1.0.2",
"@0x/base-contract": "^3.0.2", "@0x/base-contract": "^3.0.3",
"@0x/contract-artifacts": "^1.0.1", "@0x/contract-artifacts": "^1.1.0",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethers": "~4.0.4", "ethers": "~4.0.4",
"lodash": "^4.17.5" "lodash": "^4.17.5"
}, },

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/instant", "name": "@0x/instant",
"version": "0.0.3", "version": "0.0.4",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -45,16 +45,17 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
"dependencies": { "dependencies": {
"@0x/assert": "^1.0.14", "@0x/assert": "^1.0.15",
"@0x/asset-buyer": "^2.1.0", "@0x/asset-buyer": "^2.2.0",
"@0x/json-schemas": "^2.0.0", "@0x/json-schemas": "^2.0.1",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"ethereum-types": "^1.1.1", "copy-to-clipboard": "^3.0.8",
"ethereum-types": "^1.1.2",
"lodash": "^4.17.10", "lodash": "^4.17.10",
"polished": "^2.2.0", "polished": "^2.2.0",
"react": "^16.5.2", "react": "^16.5.2",
@ -66,7 +67,7 @@
"ts-optchain": "^0.1.1" "ts-optchain": "^0.1.1"
}, },
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@static/discharge": "https://github.com/0xProject/discharge.git", "@static/discharge": "https://github.com/0xProject/discharge.git",
"@types/enzyme": "^3.1.14", "@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3", "@types/enzyme-adapter-react-16": "^1.0.3",

View File

@ -0,0 +1,25 @@
/*
CSS file meant to represent an external (integrators) stylesheet and
help ensure that instant looks consistent across environments.
*/
button {
font-size: 50px;
height: 200px;
background-color: red;
}
input {
padding: 100px;
font-size: 50px;
height: 100px;
}
div {
padding: 3px;
}
p {
background-color: green;
margin: 10px;
}

View File

@ -5,6 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>0x Instant Dev Environment</title> <title>0x Instant Dev Environment</title>
<link rel="stylesheet" href="/external.css">
<script type="text/javascript" src="/main.bundle.js" charset="utf-8"></script> <script type="text/javascript" src="/main.bundle.js" charset="utf-8"></script>
<script type="text/javascript" src="https://unpkg.com/jsuri@1.3.1/Uri.js" charset="utf-8"></script> <script type="text/javascript" src="https://unpkg.com/jsuri@1.3.1/Uri.js" charset="utf-8"></script>
<script type="text/javascript" src="https://unpkg.com/bignumber.js@4.1.0/bignumber.js" charset="utf-8"></script> <script type="text/javascript" src="https://unpkg.com/bignumber.js@4.1.0/bignumber.js" charset="utf-8"></script>

View File

@ -1,5 +1,6 @@
import { Keyframes } from 'styled-components'; import { InterpolationValue } from 'styled-components';
import { media, OptionallyScreenSpecific, stylesForMedia } from '../../style/media';
import { css, keyframes, styled } from '../../style/theme'; import { css, keyframes, styled } from '../../style/theme';
export interface TransitionInfo { export interface TransitionInfo {
@ -51,30 +52,59 @@ export interface PositionAnimationSettings {
right?: TransitionInfo; right?: TransitionInfo;
timingFunction: string; timingFunction: string;
duration?: string; duration?: string;
position?: string;
} }
export interface PositionAnimationProps extends PositionAnimationSettings { const generatePositionAnimationCss = (positionSettings: PositionAnimationSettings) => {
position: string; return css`
animation-name: ${slideKeyframeGenerator(
positionSettings.position || 'relative',
positionSettings.top,
positionSettings.bottom,
positionSettings.left,
positionSettings.right,
)};
animation-duration: ${positionSettings.duration || '0.3s'};
animation-timing-function: ${positionSettings.timingFunction};
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: ${positionSettings.position || 'relative'};
width: 100%;
`;
};
export interface PositionAnimationProps {
positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
zIndex?: OptionallyScreenSpecific<number>;
height?: string;
} }
const defaultAnimation = (positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>) => {
const bestDefault = 'default' in positionSettings ? positionSettings.default : positionSettings;
return generatePositionAnimationCss(bestDefault);
};
const animationForSize = (
positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>,
sizeKey: 'sm' | 'md' | 'lg',
mediaFn: (...args: any[]) => InterpolationValue[],
) => {
// checking default makes sure we have a PositionAnimationSettings object
// and then we check to see if we have a setting for the specific `sizeKey`
const animationSettingsForSize = 'default' in positionSettings && positionSettings[sizeKey];
return animationSettingsForSize && mediaFn`${generatePositionAnimationCss(animationSettingsForSize)}`;
};
export const PositionAnimation = export const PositionAnimation =
styled.div < styled.div <
PositionAnimationProps > PositionAnimationProps >
` `
animation-name: ${props => && {
css` ${props => props.zIndex && stylesForMedia<number>('z-index', props.zIndex)}
${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)}; ${props => defaultAnimation(props.positionSettings)}
`}; ${props => animationForSize(props.positionSettings, 'sm', media.small)}
animation-duration: ${props => props.duration || '0.3s'}; ${props => animationForSize(props.positionSettings, 'md', media.medium)}
animation-timing-function: ${props => props.timingFunction}; ${props => animationForSize(props.positionSettings, 'lg', media.large)}
animation-delay: 0s; ${props => (props.height ? `height: ${props.height};` : '')}
animation-iteration-count: 1; }
animation-fill-mode: forwards;
position: ${props => props.position};
height: 100%;
width: 100%;
`; `;
PositionAnimation.defaultProps = {
position: 'relative',
};

View File

@ -1,22 +1,25 @@
import * as React from 'react'; import * as React from 'react';
import { OptionallyScreenSpecific } from '../../style/media';
import { PositionAnimation, PositionAnimationSettings } from './position_animation'; import { PositionAnimation, PositionAnimationSettings } from './position_animation';
export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
export interface SlideAnimationProps { export interface SlideAnimationProps {
position: string;
animationState: SlideAnimationState; animationState: SlideAnimationState;
slideInSettings: PositionAnimationSettings; slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
slideOutSettings: PositionAnimationSettings; slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
zIndex?: OptionallyScreenSpecific<number>;
height?: string;
} }
export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => { export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
if (props.animationState === 'none') { if (props.animationState === 'none') {
return <React.Fragment>{props.children}</React.Fragment>; return <React.Fragment>{props.children}</React.Fragment>;
} }
const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
return ( return (
<PositionAnimation position={props.position} {...propsToUse}> <PositionAnimation height={props.height} positionSettings={positionSettings} zIndex={props.zIndex}>
{props.children} {props.children}
</PositionAnimation> </PositionAnimation>
); );

View File

@ -12,7 +12,6 @@ import { gasPriceEstimator } from '../util/gas_price_estimator';
import { util } from '../util/util'; import { util } from '../util/util';
import { Button } from './ui/button'; import { Button } from './ui/button';
import { Text } from './ui/text';
export interface BuyButtonProps { export interface BuyButtonProps {
accountAddress?: string; accountAddress?: string;
@ -39,10 +38,14 @@ export class BuyButton extends React.Component<BuyButtonProps> {
const { buyQuote, accountAddress } = this.props; const { buyQuote, accountAddress } = this.props;
const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress); const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress);
return ( return (
<Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}> <Button
<Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px"> width="100%"
Buy onClick={this._handleClick}
</Text> isDisabled={shouldDisableButton}
fontColor={ColorOption.white}
fontSize="20px"
>
Buy
</Button> </Button>
); );
} }

View File

@ -12,7 +12,6 @@ import { SecondaryButton } from './secondary_button';
import { Button } from './ui/button'; import { Button } from './ui/button';
import { Flex } from './ui/flex'; import { Flex } from './ui/flex';
import { Text } from './ui/text';
export interface BuyOrderStateButtonProps { export interface BuyOrderStateButtonProps {
accountAddress?: string; accountAddress?: string;
@ -36,10 +35,8 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
if (props.buyOrderProcessingState === OrderProcessState.Failure) { if (props.buyOrderProcessingState === OrderProcessState.Failure) {
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
<Button width="48%" onClick={props.onRetry}> <Button width="48%" onClick={props.onRetry} fontColor={ColorOption.white} fontSize="16px">
<Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px"> Back
Back
</Text>
</Button> </Button>
<SecondaryButton width="48%" onClick={props.onViewTransaction}> <SecondaryButton width="48%" onClick={props.onViewTransaction}>
Details Details

View File

@ -0,0 +1,32 @@
import { INJECTED_DIV_CLASS } from '../constants';
import { createGlobalStyle } from '../style/theme';
export interface CSSResetProps {}
/*
* Derived from
* https://github.com/jtrost/Complete-CSS-Reset
*/
export const CSSReset = createGlobalStyle`
.${INJECTED_DIV_CLASS} {
a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button,
canvas, caption, cite, code, col, colgroup, command, datalist, dd, del,
details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form,
h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img,
input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav,
noscript, object, ol, optgroup, option, output, p, param, pre, progress,
q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup,
table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
background: transparent;
border: 0;
font-size: 100%;
font: inherit;
margin: 0;
outline: none;
padding: 0;
text-align: left;
text-decoration: none;
vertical-align: baseline;
}
}
`;

View File

@ -113,7 +113,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
} }
return ( return (
<Container marginLeft="5px"> <Container marginLeft="5px">
<Icon icon="chevron" width={12} onClick={this._handleSelectAssetClick} /> <Icon icon="chevron" width={12} stroke={ColorOption.white} onClick={this._handleSelectAssetClick} />
</Container> </Container>
); );
}; };

View File

@ -28,14 +28,14 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
public render(): React.ReactNode { public render(): React.ReactNode {
const { tokens, onTokenSelect } = this.props; const { tokens, onTokenSelect } = this.props;
return ( return (
<Container> <Container height="100%">
<SearchInput <SearchInput
placeholder="Search tokens..." placeholder="Search tokens..."
width="100%" width="100%"
value={this.state.searchQuery} value={this.state.searchQuery}
onChange={this._handleSearchInputChange} onChange={this._handleSearchInputChange}
/> />
<Container overflow="scroll" height={{ default: '275px', sm: '75vh' }} marginTop="10px"> <Container overflow="scroll" height="calc(100% - 80px)" marginTop="10px">
{_.map(tokens, token => { {_.map(tokens, token => {
if (!this._isTokenQueryMatch(token)) { if (!this._isTokenQueryMatch(token)) {
return null; return null;
@ -85,7 +85,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
<Container marginLeft="5px"> <Container marginLeft="5px">
<Flex justify="flex-start"> <Flex justify="flex-start">
<Container marginRight="10px"> <Container marginRight="10px">
<Circle diameter={30} fillColor={token.metaData.primaryColor}> <Circle diameter={30} rawColor={token.metaData.primaryColor}>
<Flex height="100%"> <Flex height="100%">
<Text fontColor={ColorOption.white} fontSize="8px"> <Text fontColor={ColorOption.white} fontSize="8px">
{displaySymbol} {displaySymbol}

View File

@ -0,0 +1,45 @@
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
import { Network } from '../types';
import { PaymentMethodDropdown } from './payment_method_dropdown';
import { Circle } from './ui/circle';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Text } from './ui/text';
export interface PaymentMethodProps {}
export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = () => (
<Container padding="20px" width="100%">
<Container marginBottom="10px">
<Flex justify="space-between">
<Text
letterSpacing="1px"
fontColor={ColorOption.primaryColor}
fontWeight={600}
textTransform="uppercase"
fontSize="14px"
>
Payment Method
</Text>
<Flex>
<Circle color={ColorOption.green} diameter={8} />
<Container marginLeft="3px">
<Text fontColor={ColorOption.darkGrey} fontSize="12px">
MetaMask
</Text>
</Container>
</Flex>
</Flex>
</Container>
<PaymentMethodDropdown
accountAddress="0xa1b2c3d4e5f6g7h8j9k10"
accountEthBalanceInWei={new BigNumber(10500000000000000000)}
network={Network.Mainnet}
/>
</Container>
);

View File

@ -0,0 +1,44 @@
import { BigNumber } from '@0x/utils';
import copy from 'copy-to-clipboard';
import * as React from 'react';
import { Network } from '../types';
import { etherscanUtil } from '../util/etherscan';
import { format } from '../util/format';
import { Dropdown, DropdownItemConfig } from './ui/dropdown';
export interface PaymentMethodDropdownProps {
accountAddress: string;
accountEthBalanceInWei?: BigNumber;
network: Network;
}
export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdownProps> {
public render(): React.ReactNode {
const { accountAddress, accountEthBalanceInWei } = this.props;
const value = format.ethAddress(accountAddress);
const label = format.ethBaseAmount(accountEthBalanceInWei, 4, '') as string;
return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
}
private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {
const viewOnEtherscan = {
text: 'View on Etherscan',
onClick: this._handleEtherscanClick,
};
const copyAddressToClipboard = {
text: 'Copy address to clipboard',
onClick: this._handleCopyToClipboardClick,
};
return [viewOnEtherscan, copyAddressToClipboard];
};
private readonly _handleEtherscanClick = (): void => {
const { accountAddress, network } = this.props;
const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(accountAddress, network);
window.open(etherscanUrl, '_blank');
};
private readonly _handleCopyToClipboardClick = (): void => {
const { accountAddress } = this.props;
copy(accountAddress);
};
}

View File

@ -5,15 +5,12 @@ import { ColorOption } from '../style/theme';
import { Button } from './ui/button'; import { Button } from './ui/button';
import { Container } from './ui/container'; import { Container } from './ui/container';
import { Spinner } from './ui/spinner'; import { Spinner } from './ui/spinner';
import { Text } from './ui/text';
export const PlacingOrderButton: React.StatelessComponent<{}> = props => ( export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
<Button isDisabled={true} width="100%"> <Button isDisabled={true} width="100%" fontColor={ColorOption.white} fontSize="20px">
<Container display="inline-block" position="relative" top="3px" marginRight="8px"> <Container display="inline-block" position="relative" top="3px" marginRight="8px">
<Spinner widthPx={20} heightPx={20} /> <Spinner widthPx={20} heightPx={20} />
</Container> </Container>
<Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px"> Placing Order&hellip;
Placing Order&hellip;
</Text>
</Button> </Button>
); );

View File

@ -4,7 +4,6 @@ import * as React from 'react';
import { ColorOption } from '../style/theme'; import { ColorOption } from '../style/theme';
import { Button, ButtonProps } from './ui/button'; import { Button, ButtonProps } from './ui/button';
import { Text } from './ui/text';
export interface SecondaryButtonProps extends ButtonProps {} export interface SecondaryButtonProps extends ButtonProps {}
@ -16,11 +15,11 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
borderColor={ColorOption.lightGrey} borderColor={ColorOption.lightGrey}
width={props.width} width={props.width}
onClick={props.onClick} onClick={props.onClick}
fontColor={ColorOption.primaryColor}
fontSize="16px"
{...buttonProps} {...buttonProps}
> >
<Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px"> {props.children}
{props.children}
</Text>
</Button> </Button>
); );
}; };

View File

@ -1,6 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { ScreenSpecification } from '../style/media';
import { ColorOption } from '../style/theme'; import { ColorOption } from '../style/theme';
import { zIndex } from '../style/z_index';
import { PositionAnimationSettings } from './animations/position_animation'; import { PositionAnimationSettings } from './animations/position_animation';
import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
@ -21,6 +23,7 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
backgroundColor={ColorOption.lightOrange} backgroundColor={ColorOption.lightOrange}
width="100%" width="100%"
borderRadius="6px" borderRadius="6px"
marginTop="10px"
marginBottom="10px" marginBottom="10px"
> >
<Flex justify="flex-start"> <Flex justify="flex-start">
@ -39,25 +42,51 @@ export interface SlidingErrorProps extends ErrorProps {
} }
export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => { export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
const slideAmount = '120px'; const slideAmount = '120px';
const slideUpSettings: PositionAnimationSettings = {
const desktopSlideIn: PositionAnimationSettings = {
timingFunction: 'ease-in', timingFunction: 'ease-in',
top: { top: {
from: slideAmount, from: slideAmount,
to: '0px', to: '0px',
}, },
position: 'relative',
}; };
const slideDownSettings: PositionAnimationSettings = { const desktopSlideOut: PositionAnimationSettings = {
timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)', timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
top: { top: {
from: '0px', from: '0px',
to: slideAmount, to: slideAmount,
}, },
position: 'relative',
}; };
const mobileSlideIn: PositionAnimationSettings = {
duration: '0.5s',
timingFunction: 'ease-in',
top: { from: '-120px', to: '0px' },
position: 'fixed',
};
const moblieSlideOut: PositionAnimationSettings = {
duration: '0.5s',
timingFunction: 'ease-in',
top: { from: '0px', to: '-120px' },
position: 'fixed',
};
const slideUpSettings: ScreenSpecification<PositionAnimationSettings> = {
default: desktopSlideIn,
sm: mobileSlideIn,
};
const slideOutSettings: ScreenSpecification<PositionAnimationSettings> = {
default: desktopSlideOut,
sm: moblieSlideOut,
};
return ( return (
<SlideAnimation <SlideAnimation
position="relative"
slideInSettings={slideUpSettings} slideInSettings={slideUpSettings}
slideOutSettings={slideDownSettings} slideOutSettings={slideOutSettings}
zIndex={{ sm: zIndex.errorPopup, default: zIndex.errorPopBehind }}
animationState={props.animationState} animationState={props.animationState}
> >
<Error icon={props.icon} message={props.message} /> <Error icon={props.icon} message={props.message} />

View File

@ -30,7 +30,9 @@ export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, o
<Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} /> <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
</Container> </Container>
</Flex> </Flex>
<Container marginTop="10px">{children}</Container> <Container marginTop="10px" height="100%">
{children}
</Container>
</Container> </Container>
); );
@ -51,6 +53,7 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
from: slideAmount, from: slideAmount,
to: '0px', to: '0px',
}, },
position: 'absolute',
}; };
const slideDownSettings: PositionAnimationSettings = { const slideDownSettings: PositionAnimationSettings = {
duration: '0.3s', duration: '0.3s',
@ -59,13 +62,14 @@ export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props =
from: '0px', from: '0px',
to: slideAmount, to: slideAmount,
}, },
position: 'absolute',
}; };
return ( return (
<SlideAnimation <SlideAnimation
position="absolute"
slideInSettings={slideUpSettings} slideInSettings={slideUpSettings}
slideOutSettings={slideDownSettings} slideOutSettings={slideDownSettings}
animationState={animationState} animationState={animationState}
height="100%"
> >
<Panel {...rest} /> <Panel {...rest} />
</SlideAnimation> </SlideAnimation>

View File

@ -70,9 +70,11 @@ export const TimedProgress =
styled.div < styled.div <
TimedProgressProps > TimedProgressProps >
` `
background-color: ${props => props.theme[ColorOption.primaryColor]}; && {
border-radius: 6px; background-color: ${props => props.theme[ColorOption.primaryColor]};
height: 6px; border-radius: 6px;
animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)} height: 6px;
${props => props.timeMs}ms linear 1 forwards; animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
`; ${props => props.timeMs}ms linear 1 forwards;
}
`;

View File

@ -6,6 +6,8 @@ import { ColorOption, styled } from '../../style/theme';
export interface ButtonProps { export interface ButtonProps {
backgroundColor?: ColorOption; backgroundColor?: ColorOption;
borderColor?: ColorOption; borderColor?: ColorOption;
fontColor?: ColorOption;
fontSize?: string;
width?: string; width?: string;
padding?: string; padding?: string;
type?: string; type?: string;
@ -24,29 +26,39 @@ const darkenOnHoverAmount = 0.1;
const darkenOnActiveAmount = 0.2; const darkenOnActiveAmount = 0.2;
const saturateOnFocusAmount = 0.2; const saturateOnFocusAmount = 0.2;
export const Button = styled(PlainButton)` export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; && {
transition: background-color, opacity 0.5s ease; all: initial;
padding: ${props => props.padding}; box-sizing: border-box;
border-radius: 3px; font-size: ${props => props.fontSize};
outline: none; font-family: 'Inter UI', sans-serif;
width: ${props => props.width}; font-weight: 600;
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; color: ${props => props.fontColor && props.theme[props.fontColor]};
border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
&:hover { transition: background-color, opacity 0.5s ease;
background-color: ${props => padding: ${props => props.padding};
!props.isDisabled border-radius: 3px;
? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) text-align: center;
: ''} !important; outline: none;
} width: ${props => props.width};
&:active { background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
background-color: ${props => border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
!props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; &:hover {
} background-color: ${props =>
&:disabled { !props.isDisabled
opacity: 0.5; ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
} : ''} !important;
&:focus { }
background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; &:active {
background-color: ${props =>
!props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
}
&:disabled {
opacity: 0.5;
}
&:focus {
background-color: ${props =>
saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
} }
`; `;
@ -55,7 +67,8 @@ Button.defaultProps = {
borderColor: ColorOption.primaryColor, borderColor: ColorOption.primaryColor,
width: 'auto', width: 'auto',
isDisabled: false, isDisabled: false,
padding: '1em 2.2em', padding: '.6em 1.2em',
fontSize: '15px',
}; };
Button.displayName = 'Button'; Button.displayName = 'Button';

View File

@ -1,22 +1,27 @@
import { styled } from '../../style/theme'; import { ColorOption, styled, Theme, withTheme } from '../../style/theme';
export interface CircleProps { export interface CircleProps {
diameter: number; diameter: number;
fillColor?: string; rawColor?: string;
color?: ColorOption;
theme: Theme;
} }
export const Circle = export const Circle = withTheme(
styled.div < styled.div <
CircleProps > CircleProps >
` `
width: ${props => props.diameter}px; && {
height: ${props => props.diameter}px; width: ${props => props.diameter}px;
background-color: ${props => props.fillColor}; height: ${props => props.diameter}px;
border-radius: 50%; background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])};
`; border-radius: 50%;
}
`,
);
Circle.displayName = 'Circle'; Circle.displayName = 'Circle';
Circle.defaultProps = { Circle.defaultProps = {
fillColor: 'white', color: ColorOption.white,
}; };

View File

@ -34,6 +34,7 @@ export interface ContainerProps {
cursor?: string; cursor?: string;
overflow?: string; overflow?: string;
darkenOnHover?: boolean; darkenOnHover?: boolean;
boxShadowOnHover?: boolean;
flexGrow?: string | number; flexGrow?: string | number;
} }
@ -41,42 +42,45 @@ export const Container =
styled.div < styled.div <
ContainerProps > ContainerProps >
` `
box-sizing: border-box; && {
${props => cssRuleIfExists(props, 'flex-grow')} box-sizing: border-box;
${props => cssRuleIfExists(props, 'position')} ${props => cssRuleIfExists(props, 'flex-grow')}
${props => cssRuleIfExists(props, 'top')} ${props => cssRuleIfExists(props, 'position')}
${props => cssRuleIfExists(props, 'right')} ${props => cssRuleIfExists(props, 'top')}
${props => cssRuleIfExists(props, 'bottom')} ${props => cssRuleIfExists(props, 'right')}
${props => cssRuleIfExists(props, 'left')} ${props => cssRuleIfExists(props, 'bottom')}
${props => cssRuleIfExists(props, 'max-width')} ${props => cssRuleIfExists(props, 'left')}
${props => cssRuleIfExists(props, 'margin')} ${props => cssRuleIfExists(props, 'max-width')}
${props => cssRuleIfExists(props, 'margin-top')} ${props => cssRuleIfExists(props, 'margin')}
${props => cssRuleIfExists(props, 'margin-right')} ${props => cssRuleIfExists(props, 'margin-top')}
${props => cssRuleIfExists(props, 'margin-bottom')} ${props => cssRuleIfExists(props, 'margin-right')}
${props => cssRuleIfExists(props, 'margin-left')} ${props => cssRuleIfExists(props, 'margin-bottom')}
${props => cssRuleIfExists(props, 'padding')} ${props => cssRuleIfExists(props, 'margin-left')}
${props => cssRuleIfExists(props, 'border-radius')} ${props => cssRuleIfExists(props, 'padding')}
${props => cssRuleIfExists(props, 'border')} ${props => cssRuleIfExists(props, 'border-radius')}
${props => cssRuleIfExists(props, 'border-top')} ${props => cssRuleIfExists(props, 'border')}
${props => cssRuleIfExists(props, 'border-bottom')} ${props => cssRuleIfExists(props, 'border-top')}
${props => cssRuleIfExists(props, 'z-index')} ${props => cssRuleIfExists(props, 'border-bottom')}
${props => cssRuleIfExists(props, 'white-space')} ${props => cssRuleIfExists(props, 'z-index')}
${props => cssRuleIfExists(props, 'opacity')} ${props => cssRuleIfExists(props, 'white-space')}
${props => cssRuleIfExists(props, 'cursor')} ${props => cssRuleIfExists(props, 'opacity')}
${props => cssRuleIfExists(props, 'overflow')} ${props => cssRuleIfExists(props, 'cursor')}
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; ${props => cssRuleIfExists(props, 'overflow')}
${props => props.display && stylesForMedia('display', props.display)} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
${props => stylesForMedia('width', props.width || 'auto')} ${props => props.display && stylesForMedia<string>('display', props.display)}
${props => stylesForMedia('height', props.height || 'auto')} ${props => props.width && stylesForMedia<string>('width', props.width)}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; ${props => props.height && stylesForMedia<string>('height', props.height)}
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
&:hover { border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
${props => &:hover {
props.darkenOnHover ${props =>
? `background-color: ${ props.darkenOnHover
props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none' ? `background-color: ${
}` props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
: ''}; }`
: ''};
${props => (props.boxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')};
}
} }
`; `;

View File

@ -0,0 +1,134 @@
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption, completelyTransparent } from '../../style/theme';
import { zIndex } from '../../style/z_index';
import { Container } from './container';
import { Flex } from './flex';
import { Icon } from './icon';
import { Overlay } from './overlay';
import { Text } from './text';
export interface DropdownItemConfig {
text: string;
onClick?: () => void;
}
export interface DropdownProps {
value: string;
label?: string;
items: DropdownItemConfig[];
}
export interface DropdownState {
isOpen: boolean;
}
export class Dropdown extends React.Component<DropdownProps, DropdownState> {
public static defaultProps = {
items: [],
};
public state: DropdownState = {
isOpen: false,
};
public render(): React.ReactNode {
const { value, label, items } = this.props;
const { isOpen } = this.state;
const hasItems = !_.isEmpty(items);
const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
return (
<React.Fragment>
{isOpen && (
<Overlay
zIndex={zIndex.dropdownItems - 1}
backgroundColor={completelyTransparent}
onClick={this._closeDropdown}
/>
)}
<Container position="relative">
<Container
cursor={hasItems ? 'pointer' : undefined}
onClick={this._handleDropdownClick}
hasBoxShadow={isOpen}
boxShadowOnHover={true}
borderRadius={borderRadius}
border="1px solid"
borderColor={ColorOption.feintGrey}
padding="0.8em"
>
<Flex justify="space-between">
<Text fontSize="16px" fontColor={ColorOption.darkGrey}>
{value}
</Text>
<Container>
{label && (
<Text fontSize="16px" fontColor={ColorOption.lightGrey}>
{label}
</Text>
)}
{hasItems && (
<Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
<Icon padding="3px" icon="chevron" width={12} stroke={ColorOption.grey} />
</Container>
)}
</Container>
</Flex>
</Container>
{isOpen && (
<Container
width="100%"
position="absolute"
onClick={this._closeDropdown}
backgroundColor={ColorOption.white}
hasBoxShadow={true}
zIndex={zIndex.dropdownItems}
>
{_.map(items, (item, index) => (
<DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
))}
</Container>
)}
</Container>
</React.Fragment>
);
}
private readonly _handleDropdownClick = (): void => {
if (_.isEmpty(this.props.items)) {
return;
}
this.setState({
isOpen: !this.state.isOpen,
});
};
private readonly _closeDropdown = (): void => {
this.setState({
isOpen: false,
});
};
}
export interface DropdownItemProps extends DropdownItemConfig {
text: string;
onClick?: () => void;
isLast: boolean;
}
export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => (
<Container
onClick={onClick}
cursor="pointer"
darkenOnHover={true}
backgroundColor={ColorOption.white}
padding="0.8em"
borderTop="0"
border="1px solid"
borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
width="100%"
borderColor={ColorOption.feintGrey}
>
<Text fontSize="14px" fontColor={ColorOption.darkGrey}>
{text}
</Text>
</Container>
);

View File

@ -18,15 +18,17 @@ export const Flex =
styled.div < styled.div <
FlexProps > FlexProps >
` `
display: ${props => (props.inline ? 'inline-flex' : 'flex')}; && {
flex-direction: ${props => props.direction}; display: ${props => (props.inline ? 'inline-flex' : 'flex')};
flex-wrap: ${props => props.flexWrap}; flex-direction: ${props => props.direction};
${props => cssRuleIfExists(props, 'flexGrow')} flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify}; ${props => cssRuleIfExists(props, 'flexGrow')}
align-items: ${props => props.align}; justify-content: ${props => props.justify};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; align-items: ${props => props.align};
${props => stylesForMedia('width', props.width || 'auto')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
${props => stylesForMedia('height', props.height || 'auto')} ${props => (props.width ? stylesForMedia('width', props.width) : '')}
${props => (props.height ? stylesForMedia('height', props.height) : '')}
}
`; `;
Flex.defaultProps = { Flex.defaultProps = {

View File

@ -9,7 +9,6 @@ interface IconInfo {
path: string; path: string;
fillRule?: svgRule; fillRule?: svgRule;
clipRule?: svgRule; clipRule?: svgRule;
stroke?: string;
strokeOpacity?: number; strokeOpacity?: number;
strokeWidth?: number; strokeWidth?: number;
strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'; strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
@ -47,7 +46,6 @@ const ICONS: IconInfoMapping = {
chevron: { chevron: {
viewBox: '0 0 12 7', viewBox: '0 0 12 7',
path: 'M11 1L6 6L1 1', path: 'M11 1L6 6L1 1',
stroke: 'white',
strokeOpacity: 0.5, strokeOpacity: 0.5,
strokeWidth: 1.5, strokeWidth: 1.5,
strokeLinecap: 'round', strokeLinecap: 'round',
@ -67,6 +65,7 @@ export interface IconProps {
width: number; width: number;
height?: number; height?: number;
color?: ColorOption; color?: ColorOption;
stroke?: ColorOption;
icon: keyof IconInfoMapping; icon: keyof IconInfoMapping;
onClick?: (event: React.MouseEvent<HTMLElement>) => void; onClick?: (event: React.MouseEvent<HTMLElement>) => void;
padding?: string; padding?: string;
@ -75,6 +74,7 @@ export interface IconProps {
const PlainIcon: React.StatelessComponent<IconProps> = props => { const PlainIcon: React.StatelessComponent<IconProps> = props => {
const iconInfo = ICONS[props.icon]; const iconInfo = ICONS[props.icon];
const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color]; const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color];
const strokeValue = _.isUndefined(props.stroke) ? undefined : props.theme[props.stroke];
return ( return (
<div onClick={props.onClick} className={props.className}> <div onClick={props.onClick} className={props.className}>
<svg <svg
@ -89,7 +89,7 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
fill={colorValue} fill={colorValue}
fillRule={iconInfo.fillRule || 'nonzero'} fillRule={iconInfo.fillRule || 'nonzero'}
clipRule={iconInfo.clipRule || 'nonzero'} clipRule={iconInfo.clipRule || 'nonzero'}
stroke={iconInfo.stroke} stroke={strokeValue}
strokeOpacity={iconInfo.strokeOpacity} strokeOpacity={iconInfo.strokeOpacity}
strokeWidth={iconInfo.strokeWidth} strokeWidth={iconInfo.strokeWidth}
strokeLinecap={iconInfo.strokeLinecap} strokeLinecap={iconInfo.strokeLinecap}
@ -101,15 +101,18 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
}; };
export const Icon = withTheme(styled(PlainIcon)` export const Icon = withTheme(styled(PlainIcon)`
cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')}; && {
transition: opacity 0.5s ease; display: inline-block;
padding: ${props => props.padding}; ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')};
opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)}; transition: opacity 0.5s ease;
&:hover { padding: ${props => props.padding};
opacity: 1; opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
} &:hover {
&:active { opacity: 1;
opacity: 1; }
&:active {
opacity: 1;
}
} }
`); `);

View File

@ -16,17 +16,20 @@ export const Input =
styled.input < styled.input <
InputProps > InputProps >
` `
font-size: ${props => props.fontSize}; && {
width: ${props => props.width}; all: initial;
padding: 0.1em 0em; font-size: ${props => props.fontSize};
font-family: 'Inter UI'; width: ${props => props.width};
color: ${props => props.theme[props.fontColor || 'white']}; padding: 0.1em 0em;
background: transparent; font-family: 'Inter UI';
outline: none;
border: none;
&::placeholder {
color: ${props => props.theme[props.fontColor || 'white']}; color: ${props => props.theme[props.fontColor || 'white']};
opacity: 0.5; background: transparent;
outline: none;
border: none;
&::placeholder {
color: ${props => props.theme[props.fontColor || 'white']};
opacity: 0.5;
}
} }
`; `;

View File

@ -1,40 +1,31 @@
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption, overlayBlack, styled } from '../../style/theme'; import { overlayBlack, styled } from '../../style/theme';
import { zIndex } from '../../style/z_index';
import { Container } from './container';
import { Flex } from './flex';
import { Icon } from './icon';
export interface OverlayProps { export interface OverlayProps {
className?: string;
onClose?: () => void;
zIndex?: number; zIndex?: number;
backgroundColor?: string;
} }
const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( export const Overlay =
<Flex height="100vh" className={className}> styled.div <
<Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}> OverlayProps >
<Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> `
</Container> && {
<Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}> position: fixed;
{children} top: 0;
</Container> right: 0;
</Flex> bottom: 0;
); left: 0;
export const Overlay = styled(PlainOverlay)` z-index: ${props => props.zIndex}
position: fixed; background-color: ${props => props.backgroundColor};
top: 0; }
right: 0;
bottom: 0;
left: 0;
z-index: ${props => props.zIndex}
background-color: ${overlayBlack};
`; `;
Overlay.defaultProps = { Overlay.defaultProps = {
zIndex: 100, zIndex: zIndex.overlayDefault,
backgroundColor: overlayBlack,
}; };
Overlay.displayName = 'Overlay'; Overlay.displayName = 'Overlay';

View File

@ -27,25 +27,27 @@ export const Text =
styled.div < styled.div <
TextProps > TextProps >
` `
font-family: ${props => props.fontFamily}; && {
font-style: ${props => props.fontStyle}; font-family: 'Inter UI', sans-serif;
font-weight: ${props => props.fontWeight}; font-style: ${props => props.fontStyle};
font-size: ${props => props.fontSize}; font-weight: ${props => props.fontWeight};
opacity: ${props => props.opacity}; font-size: ${props => props.fontSize};
text-decoration-line: ${props => props.textDecorationLine}; opacity: ${props => props.opacity};
${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; text-decoration-line: ${props => props.textDecorationLine};
${props => (props.center ? 'text-align: center' : '')}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
color: ${props => props.fontColor && props.theme[props.fontColor]}; ${props => (props.center ? 'text-align: center' : '')};
${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; color: ${props => props.fontColor && props.theme[props.fontColor]};
${props => (props.onClick ? 'cursor: pointer' : '')}; ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
transition: color 0.5s ease; ${props => (props.onClick ? 'cursor: pointer' : '')};
${props => (props.noWrap ? 'white-space: nowrap' : '')}; transition: color 0.5s ease;
${props => (props.display ? `display: ${props.display}` : '')}; ${props => (props.noWrap ? 'white-space: nowrap' : '')};
${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')}; ${props => (props.display ? `display: ${props.display}` : '')};
${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
&:hover { ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
${props => &:hover {
props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''}; ${props =>
props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
}
} }
`; `;
@ -61,14 +63,3 @@ Text.defaultProps = {
}; };
Text.displayName = 'Text'; Text.displayName = 'Text';
export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
Title.defaultProps = {
fontSize: '20px',
fontWeight: 600,
opacity: 1,
fontColor: ColorOption.primaryColor,
};
Title.displayName = 'Title';

View File

@ -1,5 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { INJECTED_DIV_CLASS } from '../constants';
import { ZeroExInstantContainer } from './zero_ex_instant_container'; import { ZeroExInstantContainer } from './zero_ex_instant_container';
import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
@ -7,8 +9,10 @@ export type ZeroExInstantProps = ZeroExInstantProviderProps;
export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => { export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => {
return ( return (
<ZeroExInstantProvider {...props}> <div className={INJECTED_DIV_CLASS}>
<ZeroExInstantContainer /> <ZeroExInstantProvider {...props}>
</ZeroExInstantProvider> <ZeroExInstantContainer />
</ZeroExInstantProvider>
</div>
); );
}; };

View File

@ -3,15 +3,14 @@ import * as React from 'react';
import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector'; import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
import { LatestError } from '../containers/latest_error'; import { LatestError } from '../containers/latest_error';
import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
import { ColorOption } from '../style/theme'; import { ColorOption } from '../style/theme';
import { zIndex } from '../style/z_index'; import { zIndex } from '../style/z_index';
import { SlideAnimationState } from './animations/slide_animation'; import { SlideAnimationState } from './animations/slide_animation';
import { CSSReset } from './css_reset';
import { SlidingPanel } from './sliding_panel'; import { SlidingPanel } from './sliding_panel';
import { Container } from './ui/container'; import { Container } from './ui/container';
import { Flex } from './ui/flex'; import { Flex } from './ui/flex';
@ -27,40 +26,43 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
}; };
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<Container <React.Fragment>
width={{ default: '350px', sm: '100%' }} <CSSReset />
height={{ default: 'auto', sm: '100%' }}
position="relative"
>
<Container zIndex={zIndex.errorPopup} position="relative">
<LatestError />
</Container>
<Container <Container
zIndex={zIndex.mainContainer} width={{ default: '350px', sm: '100%' }}
height={{ default: 'auto', sm: '100%' }}
position="relative" position="relative"
backgroundColor={ColorOption.white}
borderRadius="3px"
hasBoxShadow={true}
overflow="hidden"
height="100%"
> >
<Flex direction="column" height="100%" justify="flex-start"> <Container position="relative">
<SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} /> <LatestError />
<SelectedAssetBuyOrderProgress /> </Container>
<LatestBuyQuoteOrderDetails /> <Container
<Container padding="20px" width="100%"> zIndex={zIndex.mainContainer}
<SelectedAssetBuyOrderStateButtons /> position="relative"
</Container> backgroundColor={ColorOption.white}
</Flex> borderRadius="3px"
<SlidingPanel hasBoxShadow={true}
title="Select Token" overflow="hidden"
animationState={this.state.tokenSelectionPanelAnimationState} height="100%"
onClose={this._handlePanelClose}
> >
<AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} /> <Flex direction="column" justify="flex-start" height="100%">
</SlidingPanel> <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
<SelectedAssetBuyOrderProgress />
<LatestBuyQuoteOrderDetails />
<Container padding="20px" width="100%">
<SelectedAssetBuyOrderStateButtons />
</Container>
</Flex>
<SlidingPanel
title="Select Token"
animationState={this.state.tokenSelectionPanelAnimationState}
onClose={this._handlePanelClose}
>
<AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
</SlidingPanel>
</Container>
</Container> </Container>
</Container> </React.Fragment>
); );
} }
private readonly _handleSymbolClick = (): void => { private readonly _handleSymbolClick = (): void => {

View File

@ -1,5 +1,10 @@
import * as React from 'react'; import * as React from 'react';
import { ColorOption } from '../style/theme';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Icon } from './ui/icon';
import { Overlay } from './ui/overlay'; import { Overlay } from './ui/overlay';
import { ZeroExInstantContainer } from './zero_ex_instant_container'; import { ZeroExInstantContainer } from './zero_ex_instant_container';
import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
@ -13,8 +18,22 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
const { onClose, zIndex, ...rest } = props; const { onClose, zIndex, ...rest } = props;
return ( return (
<ZeroExInstantProvider {...rest}> <ZeroExInstantProvider {...rest}>
<Overlay onClose={onClose} zIndex={zIndex}> <Overlay zIndex={zIndex}>
<ZeroExInstantContainer /> <Flex height="100vh">
<Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
<Icon
height={18}
width={18}
color={ColorOption.white}
icon="closeX"
onClick={onClose}
padding="2em 2em"
/>
</Container>
<Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
<ZeroExInstantContainer />
</Container>
</Flex>
</Overlay> </Overlay>
</ZeroExInstantProvider> </ZeroExInstantProvider>
); );

View File

@ -5,6 +5,7 @@ import { AccountNotReady, AccountState, Network } from './types';
export const BIG_NUMBER_ZERO = new BigNumber(0); export const BIG_NUMBER_ZERO = new BigNumber(0);
export const ETH_DECIMALS = 18; export const ETH_DECIMALS = 18;
export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer'; export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
export const INJECTED_DIV_CLASS = 'zeroExInstantResetRoot';
export const INJECTED_DIV_ID = 'zeroExInstant'; export const INJECTED_DIV_ID = 'zeroExInstant';
export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed'; export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
export const GWEI_IN_WEI = new BigNumber(1000000000); export const GWEI_IN_WEI = new BigNumber(1000000000);

View File

@ -12,6 +12,7 @@ import { State } from '../redux/reducer';
import { ColorOption } from '../style/theme'; import { ColorOption } from '../style/theme';
import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types'; import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
import { updateBuyQuoteOrFlashErrorAsync } from '../util/buy_quote_fetcher'; import { updateBuyQuoteOrFlashErrorAsync } from '../util/buy_quote_fetcher';
import { buyQuoteUpdater } from '../util/buy_quote_updater';
export interface SelectedERC20AssetAmountInputProps { export interface SelectedERC20AssetAmountInputProps {
fontColor?: ColorOption; fontColor?: ColorOption;
@ -67,20 +68,10 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
}; };
}; };
const updateBuyQuoteAsync = async ( // TODO: change to set pending to true
assetBuyer: AssetBuyer, const debouncedUpdateBuyQuoteAsync = _.debounce(buyQuoteUpdater.updateBuyQuoteAsync.bind(buyQuoteUpdater), 200, {
dispatch: Dispatch<Action>, trailing: true,
asset: ERC20Asset, });
assetAmount: BigNumber,
affiliateInfo?: AffiliateInfo,
): Promise<void> => {
// mark quote as pending
dispatch(actions.setQuoteRequestStatePending());
// kick of buy quote
updateBuyQuoteOrFlashErrorAsync(assetBuyer, asset, assetAmount, dispatch, affiliateInfo);
};
const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
const mapDispatchToProps = ( const mapDispatchToProps = (
dispatch: Dispatch<Action>, dispatch: Dispatch<Action>,

View File

@ -2,7 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants'; import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_CLASS, INJECTED_DIV_ID } from './constants';
import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index'; import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
import { assert } from './util/assert'; import { assert } from './util/assert';
@ -41,6 +41,7 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
const appendTo = appendToIfExists as Element; const appendTo = appendToIfExists as Element;
const injectedDiv = document.createElement('div'); const injectedDiv = document.createElement('div');
injectedDiv.setAttribute('id', INJECTED_DIV_ID); injectedDiv.setAttribute('id', INJECTED_DIV_ID);
injectedDiv.setAttribute('class', INJECTED_DIV_CLASS);
appendTo.appendChild(injectedDiv); appendTo.appendChild(injectedDiv);
const instantOverlayProps = { const instantOverlayProps = {
...props, ...props,

View File

@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils'; import { BigNumber } from '@0x/utils';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { ActionsUnion, Asset } from '../types'; import { ActionsUnion, AddressAndEthBalanceInWei, Asset } from '../types';
export interface PlainAction<T extends string> { export interface PlainAction<T extends string> {
type: T; type: T;
@ -49,7 +49,8 @@ export const actions = {
setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED), setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED),
setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR), setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR),
setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address), setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address),
updateAccountEthBalance: (balance: BigNumber) => createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, balance), updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance),
updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price), updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE), setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),

View File

@ -1,8 +1,10 @@
import { AssetProxyId } from '@0x/types';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { BIG_NUMBER_ZERO } from '../constants'; import { BIG_NUMBER_ZERO } from '../constants';
import { AccountState } from '../types'; import { AccountState, ERC20Asset } from '../types';
import { assetUtils } from '../util/asset'; import { assetUtils } from '../util/asset';
import { buyQuoteUpdater } from '../util/buy_quote_updater';
import { coinbaseApi } from '../util/coinbase_api'; import { coinbaseApi } from '../util/coinbase_api';
import { errorFlasher } from '../util/error_flasher'; import { errorFlasher } from '../util/error_flasher';
@ -50,7 +52,8 @@ export const asyncData = {
if (!_.isEmpty(availableAddresses)) { if (!_.isEmpty(availableAddresses)) {
const activeAddress = availableAddresses[0]; const activeAddress = availableAddresses[0];
store.dispatch(actions.setAccountStateReady(activeAddress)); store.dispatch(actions.setAccountStateReady(activeAddress));
await asyncData.fetchAccountBalanceAndDispatchToStore(store); // tslint:disable-next-line:no-floating-promises
asyncData.fetchAccountBalanceAndDispatchToStore(store);
} else { } else {
store.dispatch(actions.setAccountStateLocked()); store.dispatch(actions.setAccountStateLocked());
} }
@ -63,11 +66,29 @@ export const asyncData = {
return; return;
} }
try { try {
const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(account.address); const address = account.address;
store.dispatch(actions.updateAccountEthBalance(ethBalanceInWei)); const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address);
store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
} catch (e) { } catch (e) {
// leave balance as is // leave balance as is
return; return;
} }
}, },
fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store) => {
const { providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
const assetBuyer = providerState.assetBuyer;
if (
!_.isUndefined(selectedAssetAmount) &&
!_.isUndefined(selectedAsset) &&
selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
) {
await buyQuoteUpdater.updateBuyQuoteAsync(
assetBuyer,
store.dispatch,
selectedAsset as ERC20Asset,
selectedAssetAmount,
affiliateInfo,
);
}
},
}; };

View File

@ -75,13 +75,14 @@ export const createReducer = (initialState: State) => {
return reduceStateWithAccount(state, account); return reduceStateWithAccount(state, account);
} }
case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: { case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: {
const account = state.providerState.account; const { address, ethBalanceInWei } = action.data;
if (account.state !== AccountState.Ready) { const currentAccount = state.providerState.account;
if (currentAccount.state !== AccountState.Ready || currentAccount.address !== address) {
return state; return state;
} else { } else {
const newAccount: AccountReady = { const newAccount: AccountReady = {
...account, ...currentAccount,
ethBalanceInWei: action.data, ethBalanceInWei,
}; };
return reduceStateWithAccount(state, newAccount); return reduceStateWithAccount(state, newAccount);
} }

View File

@ -14,30 +14,38 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) =>
} }
`; `;
const media = { export const media = {
small: generateMediaWrapper(ScreenWidths.Sm), small: generateMediaWrapper(ScreenWidths.Sm),
medium: generateMediaWrapper(ScreenWidths.Md), medium: generateMediaWrapper(ScreenWidths.Md),
large: generateMediaWrapper(ScreenWidths.Lg), large: generateMediaWrapper(ScreenWidths.Lg),
}; };
export interface ScreenSpecifications { export interface ScreenSpecification<T> {
default: string; default: T;
sm?: string; sm?: T;
md?: string; md?: T;
lg?: string; lg?: T;
} }
export type MediaChoice = string | ScreenSpecifications; export type OptionallyScreenSpecific<T> = T | ScreenSpecification<T>;
export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => { export type MediaChoice = OptionallyScreenSpecific<string>;
if (typeof choice === 'string') { /**
* Given a css property name and a OptionallyScreenSpecific value,
* generates css properties with screen-specific viewport styling
*/
export function stylesForMedia<T extends string | number>(
cssPropertyName: string,
choice: OptionallyScreenSpecific<T>,
): InterpolationValue[] {
if (typeof choice === 'object') {
return css` return css`
${cssPropertyName}: ${choice};
`;
}
return css`
${cssPropertyName}: ${choice.default}; ${cssPropertyName}: ${choice.default};
${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`} ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`}
${choice.md && media.medium`${cssPropertyName}: ${choice.md}`} ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`}
${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`} ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`}
`; `;
}; } else {
return css`
${cssPropertyName}: ${choice};
`;
}
}

View File

@ -1,6 +1,6 @@
import * as styledComponents from 'styled-components'; import * as styledComponents from 'styled-components';
const { default: styled, css, keyframes, withTheme, ThemeProvider } = styledComponents; const { default: styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider } = styledComponents;
export type Theme = { [key in ColorOption]: string }; export type Theme = { [key in ColorOption]: string };
@ -15,6 +15,8 @@ export enum ColorOption {
white = 'white', white = 'white',
lightOrange = 'lightOrange', lightOrange = 'lightOrange',
darkOrange = 'darkOrange', darkOrange = 'darkOrange',
green = 'green',
red = 'red',
} }
export const theme: Theme = { export const theme: Theme = {
@ -28,9 +30,12 @@ export const theme: Theme = {
white: 'white', white: 'white',
lightOrange: '#F9F2ED', lightOrange: '#F9F2ED',
darkOrange: '#F2994C', darkOrange: '#F2994C',
green: '#3CB34F',
red: '#D00000',
}; };
export const transparentWhite = 'rgba(255,255,255,0.3)'; export const transparentWhite = 'rgba(255,255,255,0.3)';
export const overlayBlack = 'rgba(0, 0, 0, 0.6)'; export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
export const completelyTransparent = 'rga(0, 0, 0, 0)';
export { styled, css, keyframes, withTheme, ThemeProvider }; export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider };

View File

@ -1,5 +1,8 @@
export const zIndex = { export const zIndex = {
errorPopup: 1, errorPopBehind: 10,
mainContainer: 2, mainContainer: 20,
panel: 3, dropdownItems: 30,
panel: 40,
errorPopup: 50,
overlayDefault: 100,
}; };

View File

@ -120,3 +120,8 @@ export interface AccountNotReady {
export type Account = AccountReady | AccountNotReady; export type Account = AccountReady | AccountNotReady;
export type OrderSource = string | SignedOrder[]; export type OrderSource = string | SignedOrder[];
export interface AddressAndEthBalanceInWei {
address: string;
ethBalanceInWei: BigNumber;
}

View File

@ -1,4 +1,6 @@
// TODO: rename file and export object // TODO: rename file and export object
// TODO: delete this
import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
import { AssetProxyId } from '@0x/types'; import { AssetProxyId } from '@0x/types';
import { BigNumber } from '@0x/utils'; import { BigNumber } from '@0x/utils';

View File

@ -0,0 +1,56 @@
import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils';
import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import { Dispatch } from 'redux';
import { oc } from 'ts-optchain';
import { Action, actions } from '../redux/actions';
import { AffiliateInfo, ERC20Asset } from '../types';
import { assetUtils } from '../util/asset';
import { errorFlasher } from '../util/error_flasher';
export const buyQuoteUpdater = {
updateBuyQuoteAsync: async (
assetBuyer: AssetBuyer,
dispatch: Dispatch<Action>,
asset: ERC20Asset,
assetAmount: BigNumber,
affiliateInfo?: AffiliateInfo,
): Promise<void> => {
// get a new buy quote.
const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
// mark quote as pending
dispatch(actions.setQuoteRequestStatePending());
const feePercentage = oc(affiliateInfo).feePercentage();
let newBuyQuote: BuyQuote | undefined;
try {
newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
} catch (error) {
dispatch(actions.setQuoteRequestStateFailure());
let errorMessage;
if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
errorMessage = `Not enough ${assetName} available`;
} else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
errorMessage = 'Not enough ZRX available';
} else if (
error.message === AssetBuyerError.StandardRelayerApiError ||
error.message.startsWith(AssetBuyerError.AssetUnavailable)
) {
const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
errorMessage = `${assetName} is currently unavailable`;
}
if (!_.isUndefined(errorMessage)) {
errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
} else {
throw error;
}
return;
}
// We have a successful new buy quote
errorFlasher.clearError(dispatch);
// invalidate the last buy quote.
dispatch(actions.updateLatestBuyQuote(newBuyQuote));
},
};

View File

@ -21,4 +21,11 @@ export const etherscanUtil = {
} }
return `https://${prefix}etherscan.io/tx/${txHash}`; return `https://${prefix}etherscan.io/tx/${txHash}`;
}, },
getEtherScanEthAddressIfExists: (ethAddress: string, networkId: number) => {
const prefix = etherscanPrefix(networkId);
if (_.isUndefined(prefix)) {
return;
}
return `https://${prefix}etherscan.io/address/${ethAddress}`;
},
}; };

View File

@ -50,4 +50,7 @@ export const format = {
} }
return `$${ethUnitAmount.mul(ethUsdPrice).toFixed(decimalPlaces)}`; return `$${ethUnitAmount.mul(ethUsdPrice).toFixed(decimalPlaces)}`;
}, },
ethAddress: (address: string): string => {
return `0x${address.slice(2, 7)}${address.slice(-5)}`;
},
}; };

View File

@ -7,7 +7,8 @@
"Improve schemas by enforcing that amounts that must be whole numbers (e.g Order asset amounts) no longer allow decimal amounts", "Improve schemas by enforcing that amounts that must be whole numbers (e.g Order asset amounts) no longer allow decimal amounts",
"pr": 1173 "pr": 1173
} }
] ],
"timestamp": 1541740904
}, },
{ {
"version": "2.0.0", "version": "2.0.0",

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v2.0.1 - _November 9, 2018_
* Improve schemas by enforcing that amounts that must be whole numbers (e.g Order asset amounts) no longer allow decimal amounts (#1173)
## v2.0.0 - _October 18, 2018_ ## v2.0.0 - _October 18, 2018_
* Convert all schemas to JSON files so that they can be used with `json-schema` implemenations in other programming languages. (#1145) * Convert all schemas to JSON files so that they can be used with `json-schema` implemenations in other programming languages. (#1145)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/json-schemas", "name": "@0x/json-schemas",
"version": "2.0.0", "version": "2.0.1",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -39,14 +39,14 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/json-schemas/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/json-schemas/README.md",
"dependencies": { "dependencies": {
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@types/node": "*", "@types/node": "*",
"jsonschema": "^1.2.0", "jsonschema": "^1.2.0",
"lodash.values": "^4.3.0" "lodash.values": "^4.3.0"
}, },
"devDependencies": { "devDependencies": {
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@types/lodash.foreach": "^4.5.3", "@types/lodash.foreach": "^4.5.3",
"@types/lodash.values": "^4.3.3", "@types/lodash.values": "^4.3.3",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/metacoin", "name": "@0x/metacoin",
"version": "0.0.24", "version": "0.0.25",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -29,25 +29,25 @@
"author": "", "author": "",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@0x/abi-gen": "^1.0.14", "@0x/abi-gen": "^1.0.15",
"@0x/base-contract": "^3.0.2", "@0x/base-contract": "^3.0.3",
"@0x/sol-cov": "^2.1.8", "@0x/sol-cov": "^2.1.9",
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"@types/mocha": "^5.2.2", "@types/mocha": "^5.2.2",
"copyfiles": "^2.0.0", "copyfiles": "^2.0.0",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethers": "~4.0.4", "ethers": "~4.0.4",
"lodash": "^4.17.5", "lodash": "^4.17.5",
"run-s": "^0.0.0" "run-s": "^0.0.0"
}, },
"devDependencies": { "devDependencies": {
"@0x/dev-utils": "^1.0.13", "@0x/dev-utils": "^1.0.14",
"@0x/sol-compiler": "^1.1.8", "@0x/sol-compiler": "^1.1.9",
"chai": "^4.0.1", "chai": "^4.0.1",
"chai-as-promised": "^7.1.0", "chai-as-promised": "^7.1.0",
"chai-bignumber": "^2.0.1", "chai-bignumber": "^2.0.1",

View File

@ -1,4 +1,13 @@
[ [
{
"version": "2.0.1",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"version": "2.0.0", "version": "2.0.0",
"changes": [ "changes": [

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v2.0.1 - _November 9, 2018_
* Dependencies updated
## v2.0.0 - _October 18, 2018_ ## v2.0.0 - _October 18, 2018_
* Contract artifacts have been moved to the new @0xproject/contract-artifacts package. v1 migrations have been removed. `runMigrationsAsync` returns the addresses of the contracts that were deployed. (#1105) * Contract artifacts have been moved to the new @0xproject/contract-artifacts package. v1 migrations have been removed. `runMigrationsAsync` returns the addresses of the contracts that were deployed. (#1105)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/migrations", "name": "@0x/migrations",
"version": "2.0.0", "version": "2.0.1",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -17,9 +17,9 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"devDependencies": { "devDependencies": {
"@0x/dev-utils": "^1.0.13", "@0x/dev-utils": "^1.0.14",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@types/yargs": "^10.0.0", "@types/yargs": "^10.0.0",
"make-promises-safe": "^1.1.0", "make-promises-safe": "^1.1.0",
"npm-run-all": "^4.1.2", "npm-run-all": "^4.1.2",
@ -29,18 +29,18 @@
"yargs": "^10.0.3" "yargs": "^10.0.3"
}, },
"dependencies": { "dependencies": {
"@0x/abi-gen-wrappers": "^1.0.1", "@0x/abi-gen-wrappers": "^1.0.2",
"@0x/base-contract": "^3.0.2", "@0x/base-contract": "^3.0.3",
"@0x/contract-addresses": "^1.0.1", "@0x/contract-addresses": "^1.1.0",
"@0x/contract-artifacts": "^1.0.1", "@0x/contract-artifacts": "^1.1.0",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/sol-compiler": "^1.1.8", "@0x/sol-compiler": "^1.1.9",
"@0x/subproviders": "^2.1.0", "@0x/subproviders": "^2.1.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"@ledgerhq/hw-app-eth": "^4.3.0", "@ledgerhq/hw-app-eth": "^4.3.0",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethers": "~4.0.4", "ethers": "~4.0.4",
"lodash": "^4.17.5" "lodash": "^4.17.5"
}, },

View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"name": "@0x/monorepo-scripts", "name": "@0x/monorepo-scripts",
"version": "1.0.12", "version": "1.0.13",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },

View File

@ -1,4 +1,13 @@
[ [
{
"version": "2.0.1",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"version": "2.0.0", "version": "2.0.0",
"changes": [ "changes": [

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v2.0.1 - _November 9, 2018_
* Dependencies updated
## v2.0.0 - _October 18, 2018_ ## v2.0.0 - _October 18, 2018_
* Added `ecSignOrderAsync` to first sign an order using `eth_signTypedData` and fallback to `eth_sign`. (#1102) * Added `ecSignOrderAsync` to first sign an order using `eth_signTypedData` and fallback to `eth_sign`. (#1102)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/order-utils", "name": "@0x/order-utils",
"version": "2.0.0", "version": "2.0.1",
"engines": { "engines": {
"node": ">=6.12" "node": ">=6.12"
}, },
@ -35,8 +35,8 @@
}, },
"homepage": "https://github.com/0xProject/0x-monorepo/packages/order-utils/README.md", "homepage": "https://github.com/0xProject/0x-monorepo/packages/order-utils/README.md",
"devDependencies": { "devDependencies": {
"@0x/dev-utils": "^1.0.13", "@0x/dev-utils": "^1.0.14",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/bn.js": "^4.11.0", "@types/bn.js": "^4.11.0",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"chai": "^4.0.1", "chai": "^4.0.1",
@ -53,18 +53,18 @@
"typescript": "3.0.1" "typescript": "3.0.1"
}, },
"dependencies": { "dependencies": {
"@0x/abi-gen-wrappers": "^1.0.1", "@0x/abi-gen-wrappers": "^1.0.2",
"@0x/assert": "^1.0.14", "@0x/assert": "^1.0.15",
"@0x/base-contract": "^3.0.2", "@0x/base-contract": "^3.0.3",
"@0x/contract-artifacts": "^1.0.1", "@0x/contract-artifacts": "^1.1.0",
"@0x/json-schemas": "^2.0.0", "@0x/json-schemas": "^2.0.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"@types/node": "*", "@types/node": "*",
"bn.js": "^4.11.8", "bn.js": "^4.11.8",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethereumjs-abi": "0.6.5", "ethereumjs-abi": "0.6.5",
"ethereumjs-util": "^5.1.1", "ethereumjs-util": "^5.1.1",
"ethers": "~4.0.4", "ethers": "~4.0.4",

View File

@ -1,4 +1,13 @@
[ [
{
"version": "2.2.1",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"version": "2.2.0", "version": "2.2.0",
"changes": [ "changes": [

View File

@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
CHANGELOG CHANGELOG
## v2.2.1 - _November 9, 2018_
* Dependencies updated
## v2.2.0 - _October 18, 2018_ ## v2.2.0 - _October 18, 2018_
* Added getStats function and returns a Stats object (#1118) * Added getStats function and returns a Stats object (#1118)

View File

@ -1,6 +1,6 @@
{ {
"name": "@0x/order-watcher", "name": "@0x/order-watcher",
"version": "2.2.0", "version": "2.2.1",
"description": "An order watcher daemon that watches for order validity", "description": "An order watcher daemon that watches for order validity",
"keywords": [ "keywords": [
"0x", "0x",
@ -33,9 +33,9 @@
"node": ">=6.0.0" "node": ">=6.0.0"
}, },
"devDependencies": { "devDependencies": {
"@0x/dev-utils": "^1.0.13", "@0x/dev-utils": "^1.0.14",
"@0x/migrations": "^2.0.0", "@0x/migrations": "^2.0.1",
"@0x/tslint-config": "^1.0.9", "@0x/tslint-config": "^1.0.10",
"@types/bintrees": "^1.0.2", "@types/bintrees": "^1.0.2",
"@types/lodash": "4.14.104", "@types/lodash": "4.14.104",
"@types/mocha": "^2.2.42", "@types/mocha": "^2.2.42",
@ -57,21 +57,21 @@
"typescript": "3.0.1" "typescript": "3.0.1"
}, },
"dependencies": { "dependencies": {
"@0x/abi-gen-wrappers": "^1.0.1", "@0x/abi-gen-wrappers": "^1.0.2",
"@0x/assert": "^1.0.14", "@0x/assert": "^1.0.15",
"@0x/base-contract": "^3.0.2", "@0x/base-contract": "^3.0.3",
"@0x/contract-addresses": "^1.0.1", "@0x/contract-addresses": "^1.1.0",
"@0x/contract-artifacts": "^1.0.1", "@0x/contract-artifacts": "^1.1.0",
"@0x/contract-wrappers": "^3.0.0", "@0x/contract-wrappers": "^3.0.1",
"@0x/fill-scenarios": "^1.0.8", "@0x/fill-scenarios": "^1.0.9",
"@0x/json-schemas": "^2.0.0", "@0x/json-schemas": "^2.0.1",
"@0x/order-utils": "^2.0.0", "@0x/order-utils": "^2.0.1",
"@0x/types": "^1.2.0", "@0x/types": "^1.2.1",
"@0x/typescript-typings": "^3.0.3", "@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.3", "@0x/utils": "^2.0.4",
"@0x/web3-wrapper": "^3.1.0", "@0x/web3-wrapper": "^3.1.1",
"bintrees": "^1.0.2", "bintrees": "^1.0.2",
"ethereum-types": "^1.1.1", "ethereum-types": "^1.1.2",
"ethereumjs-blockstream": "6.0.0", "ethereumjs-blockstream": "6.0.0",
"ethers": "~4.0.4", "ethers": "~4.0.4",
"lodash": "^4.17.5" "lodash": "^4.17.5"

View File

@ -1,4 +1,13 @@
[ [
{
"version": "1.0.15",
"changes": [
{
"note": "Dependencies updated"
}
],
"timestamp": 1541740904
},
{ {
"timestamp": 1539871071, "timestamp": 1539871071,
"version": "1.0.14", "version": "1.0.14",

Some files were not shown because too many files have changed in this diff Show More