crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/feature/website/0x-org' into feature/website/0x-org

Browse Source 
# Conflicts:
#	packages/website/ts/@next/components/button.tsx
#	packages/website/ts/@next/components/definition.tsx
#	packages/website/ts/@next/components/hero.tsx
#	packages/website/ts/@next/components/sections/landing/about.tsx
#	packages/website/ts/@next/pages/market_maker.tsx
This commit is contained in:
Fred Carlsen
2018-12-19 23:59:07 +01:00
parent aa5c2c249d 125a940560
commit 5eb316f5d8
106 changed files with 4386 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/stale.yml vendored
View File

@@ -1,7 +1,7 @@
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 30
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
daysUntilClose: 30
# Issues with these labels will never be considered stale
exemptLabels:
- pinned

3
contracts/examples/package.json
View File

@@ -13,7 +13,8 @@
"build": "yarn pre_build && tsc -b",
"build:ci": "yarn build",
"pre_build": "run-s compile generate_contract_wrappers",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../node_modules/@0x/abi-gen-templates/contract.handlebars --partials '../../node_modules/@0x/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",

9
contracts/extensions/CHANGELOG.json
View File

@@ -1,4 +1,13 @@
[
{
"version": "1.1.0",
"changes": [
{
"note": "Added Balance Threshold Filter",
"pr": 1383
}
]
},
{
"timestamp": 1544741676,
"version": "1.0.2",

2
contracts/extensions/compiler.json
View File

@@ -18,5 +18,5 @@
}
}
},
"contracts": ["DutchAuction", "Forwarder"]
"contracts": ["BalanceThresholdFilter", "DutchAuction", "Forwarder"]
}

45
contracts/extensions/contracts/BalanceThresholdFilter/BalanceThresholdFilter.sol Normal file
View File

@@ -0,0 +1,45 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
import "@0x/contracts-interfaces/contracts/protocol/Exchange/IExchange.sol";
import "./interfaces/IThresholdAsset.sol";
import "./MixinBalanceThresholdFilterCore.sol";
contract BalanceThresholdFilter is
MixinBalanceThresholdFilterCore
{
/// @dev Constructs BalanceThresholdFilter.
/// @param exchange Address of 0x exchange.
/// @param thresholdAsset The asset that must be held by makers/takers.
/// @param balanceThreshold The minimum balance of `thresholdAsset` that must be held by makers/takers.
constructor(
address exchange,
address thresholdAsset,
uint256 balanceThreshold
)
public
{
EXCHANGE = IExchange(exchange);
THRESHOLD_ASSET = IThresholdAsset(thresholdAsset);
BALANCE_THRESHOLD = balanceThreshold;
}
}

135
contracts/extensions/contracts/BalanceThresholdFilter/MixinBalanceThresholdFilterCore.sol Normal file
View File

@@ -0,0 +1,135 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
import "@0x/contracts-libs/contracts/libs/LibExchangeSelectors.sol";
import "@0x/contracts-libs/contracts/libs/LibOrder.sol";
import "./mixins/MBalanceThresholdFilterCore.sol";
import "./MixinExchangeCalldata.sol";
contract MixinBalanceThresholdFilterCore is
MBalanceThresholdFilterCore,
MixinExchangeCalldata,
LibOrder,
LibExchangeSelectors
{
/// @dev Executes an Exchange transaction iff the maker and taker meet
/// the hold at least `BALANCE_THRESHOLD` of the asset `THRESHOLD_ASSET` OR
/// the exchange function is a cancellation.
/// Supported Exchange functions:
/// batchFillOrders
/// batchFillOrdersNoThrow
/// batchFillOrKillOrders
/// fillOrder
/// fillOrderNoThrow
/// fillOrKillOrder
/// marketBuyOrders
/// marketBuyOrdersNoThrow
/// marketSellOrders
/// marketSellOrdersNoThrow
/// matchOrders
/// cancelOrder
/// batchCancelOrders
/// cancelOrdersUpTo
/// Trying to call any other exchange function will throw.
/// @param salt Arbitrary number to ensure uniqueness of transaction hash.
/// @param signerAddress Address of transaction signer.
/// @param signedExchangeTransaction AbiV2 encoded calldata.
/// @param signature Proof of signer transaction by signer.
function executeTransaction(
uint256 salt,
address signerAddress,
bytes signedExchangeTransaction,
bytes signature
)
external
{
// Get accounts whose balances must be validated
address[] memory addressesToValidate = getAddressesToValidate(signerAddress);
// Validate account balances
uint256 balanceThreshold = BALANCE_THRESHOLD;
IThresholdAsset thresholdAsset = THRESHOLD_ASSET;
for (uint256 i = 0; i < addressesToValidate.length; ++i) {
uint256 addressBalance = thresholdAsset.balanceOf(addressesToValidate[i]);
require(
addressBalance >= balanceThreshold,
"AT_LEAST_ONE_ADDRESS_DOES_NOT_MEET_BALANCE_THRESHOLD"
);
}
emit ValidatedAddresses(addressesToValidate);
// All addresses are valid. Execute exchange function.
EXCHANGE.executeTransaction(
salt,
signerAddress,
signedExchangeTransaction,
signature
);
}
/// @dev Constructs an array of addresses to be validated.
/// Addresses depend on which Exchange function is to be called
/// (defined by `signedExchangeTransaction` above).
/// @param signerAddress Address of transaction signer.
/// @return addressesToValidate Array of addresses to validate.
function getAddressesToValidate(address signerAddress)
internal pure
returns (address[] memory addressesToValidate)
{
bytes4 exchangeFunctionSelector = bytes4(exchangeCalldataload(0));
// solhint-disable expression-indent
if (
exchangeFunctionSelector == BATCH_FILL_ORDERS_SELECTOR ||
exchangeFunctionSelector == BATCH_FILL_ORDERS_NO_THROW_SELECTOR ||
exchangeFunctionSelector == BATCH_FILL_OR_KILL_ORDERS_SELECTOR ||
exchangeFunctionSelector == MARKET_BUY_ORDERS_SELECTOR ||
exchangeFunctionSelector == MARKET_BUY_ORDERS_NO_THROW_SELECTOR ||
exchangeFunctionSelector == MARKET_SELL_ORDERS_SELECTOR ||
exchangeFunctionSelector == MARKET_SELL_ORDERS_NO_THROW_SELECTOR
) {
addressesToValidate = loadMakerAddressesFromOrderArray(0);
addressesToValidate = addressesToValidate.append(signerAddress);
} else if (
exchangeFunctionSelector == FILL_ORDER_SELECTOR ||
exchangeFunctionSelector == FILL_ORDER_NO_THROW_SELECTOR ||
exchangeFunctionSelector == FILL_OR_KILL_ORDER_SELECTOR
) {
address makerAddress = loadMakerAddressFromOrder(0);
addressesToValidate = addressesToValidate.append(makerAddress);
addressesToValidate = addressesToValidate.append(signerAddress);
} else if (exchangeFunctionSelector == MATCH_ORDERS_SELECTOR) {
address leftMakerAddress = loadMakerAddressFromOrder(0);
addressesToValidate = addressesToValidate.append(leftMakerAddress);
address rightMakerAddress = loadMakerAddressFromOrder(1);
addressesToValidate = addressesToValidate.append(rightMakerAddress);
addressesToValidate = addressesToValidate.append(signerAddress);
} else if (
exchangeFunctionSelector != CANCEL_ORDER_SELECTOR &&
exchangeFunctionSelector != BATCH_CANCEL_ORDERS_SELECTOR &&
exchangeFunctionSelector != CANCEL_ORDERS_UP_TO_SELECTOR
) {
revert("INVALID_OR_BLOCKED_EXCHANGE_SELECTOR");
}
// solhint-enable expression-indent
return addressesToValidate;
}
}

103
contracts/extensions/contracts/BalanceThresholdFilter/MixinExchangeCalldata.sol Normal file
View File

@@ -0,0 +1,103 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
import "./mixins/MExchangeCalldata.sol";
import "@0x/contracts-libs/contracts/libs/LibAddressArray.sol";
contract MixinExchangeCalldata is
MExchangeCalldata
{
using LibAddressArray for address[];
/// @dev Emulates the `calldataload` opcode on the embedded Exchange calldata,
/// which is accessed through `signedExchangeTransaction`.
/// @param offset Offset into the Exchange calldata.
/// @return value Corresponding 32 byte value stored at `offset`.
function exchangeCalldataload(uint256 offset)
internal pure
returns (bytes32 value)
{
assembly {
// Pointer to exchange transaction
// 0x04 for calldata selector
// 0x40 to access `signedExchangeTransaction`, which is the third parameter
let exchangeTxPtr := calldataload(0x44)
// Offset into Exchange calldata
// We compute this by adding 0x24 to the `exchangeTxPtr` computed above.
// 0x04 for calldata selector
// 0x20 for length field of `signedExchangeTransaction`
let exchangeCalldataOffset := add(exchangeTxPtr, add(0x24, offset))
value := calldataload(exchangeCalldataOffset)
}
return value;
}
/// @dev Convenience function that skips the 4 byte selector when loading
/// from the embedded Exchange calldata.
/// @param offset Offset into the Exchange calldata (minus the 4 byte selector)
/// @return value Corresponding 32 byte value stored at `offset` + 4.
function loadExchangeData(uint256 offset)
internal pure
returns (bytes32 value)
{
value = exchangeCalldataload(offset + 4);
return value;
}
/// @dev Extracts the maker address from an order stored in the Exchange calldata
/// (which is embedded in `signedExchangeTransaction`).
/// @param orderParamIndex Index of the order in the Exchange function's signature.
/// @return makerAddress The extracted maker address.
function loadMakerAddressFromOrder(uint256 orderParamIndex)
internal pure
returns (address makerAddress)
{
uint256 orderOffsetInBytes = orderParamIndex * 32;
uint256 orderPtr = uint256(loadExchangeData(orderOffsetInBytes));
makerAddress = address(loadExchangeData(orderPtr));
return makerAddress;
}
/// @dev Extracts the maker addresses from an array of orders stored in the Exchange calldata
/// (which is embedded in `signedExchangeTransaction`).
/// @param orderArrayParamIndex Index of the order array in the Exchange function's signature
/// @return makerAddresses The extracted maker addresses.
function loadMakerAddressesFromOrderArray(uint256 orderArrayParamIndex)
internal pure
returns (address[] makerAddresses)
{
uint256 orderArrayOffsetInBytes = orderArrayParamIndex * 32;
uint256 orderArrayPtr = uint256(loadExchangeData(orderArrayOffsetInBytes));
uint256 orderArrayLength = uint256(loadExchangeData(orderArrayPtr));
uint256 orderArrayLengthInBytes = orderArrayLength * 32;
uint256 orderArrayElementPtr = orderArrayPtr + 32;
uint256 orderArrayElementEndPtr = orderArrayElementPtr + orderArrayLengthInBytes;
for (uint orderPtrOffset = orderArrayElementPtr; orderPtrOffset < orderArrayElementEndPtr; orderPtrOffset += 32) {
uint256 orderPtr = uint256(loadExchangeData(orderPtrOffset));
address makerAddress = address(loadExchangeData(orderPtr + orderArrayElementPtr));
makerAddresses = makerAddresses.append(makerAddress);
}
return makerAddresses;
}
}

55
contracts/extensions/contracts/BalanceThresholdFilter/interfaces/IBalanceThresholdFilterCore.sol Normal file
View File

@@ -0,0 +1,55 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
contract IBalanceThresholdFilterCore {
/// @dev Executes an Exchange transaction iff the maker and taker meet
/// the hold at least `BALANCE_THRESHOLD` of the asset `THRESHOLD_ASSET` OR
/// the exchange function is a cancellation.
/// Supported Exchange functions:
/// - batchFillOrders
/// - batchFillOrdersNoThrow
/// - batchFillOrKillOrders
/// - fillOrder
/// - fillOrderNoThrow
/// - fillOrKillOrder
/// - marketBuyOrders
/// - marketBuyOrdersNoThrow
/// - marketSellOrders
/// - marketSellOrdersNoThrow
/// - matchOrders
/// - cancelOrder
/// - batchCancelOrders
/// - cancelOrdersUpTo
/// Trying to call any other exchange function will throw.
/// @param salt Arbitrary number to ensure uniqueness of transaction hash.
/// @param signerAddress Address of transaction signer.
/// @param signedExchangeTransaction AbiV2 encoded calldata.
/// @param signature Proof of signer transaction by signer.
function executeTransaction(
uint256 salt,
address signerAddress,
bytes signedExchangeTransaction,
bytes signature
)
external;
}

31
contracts/extensions/contracts/BalanceThresholdFilter/interfaces/IThresholdAsset.sol Normal file
View File

@@ -0,0 +1,31 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
contract IThresholdAsset {
/// @param _owner The address from which the balance will be retrieved
/// @return Balance of owner
function balanceOf(address _owner)
external
view
returns (uint256);
}

54
contracts/extensions/contracts/BalanceThresholdFilter/mixins/MBalanceThresholdFilterCore.sol Normal file
View File

@@ -0,0 +1,54 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
import "@0x/contracts-interfaces/contracts/protocol/Exchange/IExchange.sol";
import "../interfaces/IThresholdAsset.sol";
import "../interfaces/IBalanceThresholdFilterCore.sol";
contract MBalanceThresholdFilterCore is
IBalanceThresholdFilterCore
{
// Points to 0x exchange contract
// solhint-disable var-name-mixedcase
IExchange internal EXCHANGE;
// The asset that must be held by makers/takers
IThresholdAsset internal THRESHOLD_ASSET;
// The minimum balance of `THRESHOLD_ASSET` that must be held by makers/takers
uint256 internal BALANCE_THRESHOLD;
// solhint-enable var-name-mixedcase
// Addresses that hold at least `BALANCE_THRESHOLD` of `THRESHOLD_ASSET`
event ValidatedAddresses (
address[] addresses
);
/// @dev Constructs an array of addresses to be validated.
/// Addresses depend on which Exchange function is to be called
/// (defined by `signedExchangeTransaction` above).
/// @param signerAddress Address of transaction signer.
/// @return addressesToValidate Array of addresses to validate.
function getAddressesToValidate(address signerAddress)
internal pure
returns (address[] memory addressesToValidate);
}

56
contracts/extensions/contracts/BalanceThresholdFilter/mixins/MExchangeCalldata.sol Normal file
View File

@@ -0,0 +1,56 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
contract MExchangeCalldata {
/// @dev Emulates the `calldataload` opcode on the embedded Exchange calldata,
/// which is accessed through `signedExchangeTransaction`.
/// @param offset Offset into the Exchange calldata.
/// @return value Corresponding 32 byte value stored at `offset`.
function exchangeCalldataload(uint256 offset)
internal pure
returns (bytes32 value);
/// @dev Convenience function that skips the 4 byte selector when loading
/// from the embedded Exchange calldata.
/// @param offset Offset into the Exchange calldata (minus the 4 byte selector)
/// @return value Corresponding 32 byte value stored at `offset` + 4.
function loadExchangeData(uint256 offset)
internal pure
returns (bytes32 value);
/// @dev Extracts the maker address from an order stored in the Exchange calldata
/// (which is embedded in `signedExchangeTransaction`).
/// @param orderParamIndex Index of the order in the Exchange function's signature.
/// @return makerAddress The extracted maker address.
function loadMakerAddressFromOrder(uint256 orderParamIndex)
internal pure
returns (address makerAddress);
/// @dev Extracts the maker addresses from an array of orders stored in the Exchange calldata
/// (which is embedded in `signedExchangeTransaction`).
/// @param orderArrayParamIndex Index of the order array in the Exchange function's signature
/// @return makerAddresses The extracted maker addresses.
function loadMakerAddressesFromOrderArray(uint256 orderArrayParamIndex)
internal pure
returns (address[] makerAddresses);
}

5
contracts/extensions/package.json
View File

@@ -19,7 +19,8 @@
"test:profiler": "SOLIDITY_PROFILER=true run-s build run_mocha profiler:report:html",
"test:trace": "SOLIDITY_REVERT_TRACE=true run-s build run_mocha",
"run_mocha": "mocha --require source-map-support/register --require make-promises-safe 'lib/test/**/*.js' --timeout 100000 --bail --exit",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../node_modules/@0x/abi-gen-templates/contract.handlebars --partials '../../node_modules/@0x/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",
@@ -31,7 +32,7 @@
"lint-contracts": "solhint -c ../.solhint.json contracts/**/**/**/**/*.sol"
},
"config": {
"abis": "generated-artifacts/@(DutchAuction|Forwarder).json"
"abis": "generated-artifacts/@(BalanceThresholdFilter|DutchAuction|Forwarder).json"
},
"repository": {
"type": "git",

2
contracts/extensions/src/artifacts/index.ts
View File

@@ -1,9 +1,11 @@
import { ContractArtifact } from 'ethereum-types';
import * as BalanceThresholdFilter from '../../generated-artifacts/BalanceThresholdFilter.json';
import * as DutchAuction from '../../generated-artifacts/DutchAuction.json';
import * as Forwarder from '../../generated-artifacts/Forwarder.json';
export const artifacts = {
BalanceThresholdFilter: BalanceThresholdFilter as ContractArtifact,
DutchAuction: DutchAuction as ContractArtifact,
Forwarder: Forwarder as ContractArtifact,
};

1
contracts/extensions/src/wrappers/index.ts
View File

@@ -1,2 +1,3 @@
export * from '../../generated-wrappers/balance_threshold_filter';
export * from '../../generated-wrappers/dutch_auction';
export * from '../../generated-wrappers/forwarder';

1644
contracts/extensions/test/extensions/balance_threshold_filter.ts Normal file
View File

File diff suppressed because it is too large Load Diff

283
contracts/extensions/test/utils/balance_threshold_wrapper.ts Normal file
View File

@@ -0,0 +1,283 @@
import { artifacts as protocolArtifacts, ExchangeContract } from '@0x/contracts-protocol';
import {
FillResults,
formatters,
LogDecoder,
OrderInfo,
orderUtils,
TransactionFactory,
} from '@0x/contracts-test-utils';
import { artifacts as tokensArtifacts } from '@0x/contracts-tokens';
import { SignedOrder } from '@0x/types';
import { BigNumber } from '@0x/utils';
import { Web3Wrapper } from '@0x/web3-wrapper';
import { Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types';
import * as _ from 'lodash';
import { BalanceThresholdFilterContract } from '../../generated-wrappers/balance_threshold_filter';
import { artifacts } from '../../src/artifacts';
export class BalanceThresholdWrapper {
private readonly _balanceThresholdFilter: BalanceThresholdFilterContract;
private readonly _signerTransactionFactory: TransactionFactory;
private readonly _exchange: ExchangeContract;
private readonly _web3Wrapper: Web3Wrapper;
private readonly _logDecoder: LogDecoder;
constructor(
balanceThresholdFilter: BalanceThresholdFilterContract,
exchangeContract: ExchangeContract,
signerTransactionFactory: TransactionFactory,
provider: Provider,
) {
this._balanceThresholdFilter = balanceThresholdFilter;
this._exchange = exchangeContract;
this._signerTransactionFactory = signerTransactionFactory;
this._web3Wrapper = new Web3Wrapper(provider);
this._logDecoder = new LogDecoder(this._web3Wrapper, {
...artifacts,
...tokensArtifacts,
...protocolArtifacts,
});
}
public async fillOrderAsync(
signedOrder: SignedOrder,
from: string,
opts: { takerAssetFillAmount?: BigNumber } = {},
): Promise<TransactionReceiptWithDecodedLogs> {
const params = orderUtils.createFill(signedOrder, opts.takerAssetFillAmount);
const data = this._exchange.fillOrder.getABIEncodedTransactionData(
params.order,
params.takerAssetFillAmount,
params.signature,
);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async fillOrKillOrderAsync(
signedOrder: SignedOrder,
from: string,
opts: { takerAssetFillAmount?: BigNumber } = {},
): Promise<TransactionReceiptWithDecodedLogs> {
const params = orderUtils.createFill(signedOrder, opts.takerAssetFillAmount);
const data = this._exchange.fillOrKillOrder.getABIEncodedTransactionData(
params.order,
params.takerAssetFillAmount,
params.signature,
);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async fillOrderNoThrowAsync(
signedOrder: SignedOrder,
from: string,
opts: { takerAssetFillAmount?: BigNumber; gas?: number } = {},
): Promise<TransactionReceiptWithDecodedLogs> {
const params = orderUtils.createFill(signedOrder, opts.takerAssetFillAmount);
const data = this._exchange.fillOrderNoThrow.getABIEncodedTransactionData(
params.order,
params.takerAssetFillAmount,
params.signature,
);
const txReceipt = this._executeTransactionAsync(data, from, opts.gas);
return txReceipt;
}
public async batchFillOrdersAsync(
orders: SignedOrder[],
from: string,
opts: { takerAssetFillAmounts?: BigNumber[] } = {},
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createBatchFill(orders, opts.takerAssetFillAmounts);
const data = this._exchange.batchFillOrders.getABIEncodedTransactionData(
params.orders,
params.takerAssetFillAmounts,
params.signatures,
);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async batchFillOrKillOrdersAsync(
orders: SignedOrder[],
from: string,
opts: { takerAssetFillAmounts?: BigNumber[] } = {},
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createBatchFill(orders, opts.takerAssetFillAmounts);
const data = this._exchange.batchFillOrKillOrders.getABIEncodedTransactionData(
params.orders,
params.takerAssetFillAmounts,
params.signatures,
);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async batchFillOrdersNoThrowAsync(
orders: SignedOrder[],
from: string,
opts: { takerAssetFillAmounts?: BigNumber[]; gas?: number } = {},
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createBatchFill(orders, opts.takerAssetFillAmounts);
const data = this._exchange.batchFillOrKillOrders.getABIEncodedTransactionData(
params.orders,
params.takerAssetFillAmounts,
params.signatures,
);
const txReceipt = this._executeTransactionAsync(data, from, opts.gas);
return txReceipt;
}
public async marketSellOrdersAsync(
orders: SignedOrder[],
from: string,
opts: { takerAssetFillAmount: BigNumber },
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createMarketSellOrders(orders, opts.takerAssetFillAmount);
const data = this._exchange.marketSellOrders.getABIEncodedTransactionData(
params.orders,
params.takerAssetFillAmount,
params.signatures,
);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async marketSellOrdersNoThrowAsync(
orders: SignedOrder[],
from: string,
opts: { takerAssetFillAmount: BigNumber; gas?: number },
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createMarketSellOrders(orders, opts.takerAssetFillAmount);
const data = this._exchange.marketSellOrdersNoThrow.getABIEncodedTransactionData(
params.orders,
params.takerAssetFillAmount,
params.signatures,
);
const txReceipt = this._executeTransactionAsync(data, from, opts.gas);
return txReceipt;
}
public async marketBuyOrdersAsync(
orders: SignedOrder[],
from: string,
opts: { makerAssetFillAmount: BigNumber },
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createMarketBuyOrders(orders, opts.makerAssetFillAmount);
const data = this._exchange.marketBuyOrders.getABIEncodedTransactionData(
params.orders,
params.makerAssetFillAmount,
params.signatures,
);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async marketBuyOrdersNoThrowAsync(
orders: SignedOrder[],
from: string,
opts: { makerAssetFillAmount: BigNumber; gas?: number },
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createMarketBuyOrders(orders, opts.makerAssetFillAmount);
const data = this._exchange.marketBuyOrdersNoThrow.getABIEncodedTransactionData(
params.orders,
params.makerAssetFillAmount,
params.signatures,
);
const txReceipt = this._executeTransactionAsync(data, from, opts.gas);
return txReceipt;
}
public async cancelOrderAsync(signedOrder: SignedOrder, from: string): Promise<TransactionReceiptWithDecodedLogs> {
const params = orderUtils.createCancel(signedOrder);
const data = this._exchange.cancelOrder.getABIEncodedTransactionData(params.order);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async batchCancelOrdersAsync(
orders: SignedOrder[],
from: string,
): Promise<TransactionReceiptWithDecodedLogs> {
const params = formatters.createBatchCancel(orders);
const data = this._exchange.batchCancelOrders.getABIEncodedTransactionData(params.orders);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async cancelOrdersUpToAsync(salt: BigNumber, from: string): Promise<TransactionReceiptWithDecodedLogs> {
const data = this._exchange.cancelOrdersUpTo.getABIEncodedTransactionData(salt);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async getTakerAssetFilledAmountAsync(orderHashHex: string): Promise<BigNumber> {
const filledAmount = await this._exchange.filled.callAsync(orderHashHex);
return filledAmount;
}
public async isCancelledAsync(orderHashHex: string): Promise<boolean> {
const isCancelled = await this._exchange.cancelled.callAsync(orderHashHex);
return isCancelled;
}
public async getOrderEpochAsync(makerAddress: string, senderAddress: string): Promise<BigNumber> {
const orderEpoch = await this._exchange.orderEpoch.callAsync(makerAddress, senderAddress);
return orderEpoch;
}
public async getOrderInfoAsync(signedOrder: SignedOrder): Promise<OrderInfo> {
const orderInfo = await this._exchange.getOrderInfo.callAsync(signedOrder);
return orderInfo;
}
public async getOrdersInfoAsync(signedOrders: SignedOrder[]): Promise<OrderInfo[]> {
const ordersInfo = (await this._exchange.getOrdersInfo.callAsync(signedOrders)) as OrderInfo[];
return ordersInfo;
}
public async matchOrdersAsync(
signedOrderLeft: SignedOrder,
signedOrderRight: SignedOrder,
from: string,
): Promise<TransactionReceiptWithDecodedLogs> {
const params = orderUtils.createMatchOrders(signedOrderLeft, signedOrderRight);
const data = await this._exchange.matchOrders.getABIEncodedTransactionData(
params.left,
params.right,
params.leftSignature,
params.rightSignature,
);
const txReceipt = this._executeTransactionAsync(data, from);
return txReceipt;
}
public async getFillOrderResultsAsync(
signedOrder: SignedOrder,
from: string,
opts: { takerAssetFillAmount?: BigNumber } = {},
): Promise<FillResults> {
const params = orderUtils.createFill(signedOrder, opts.takerAssetFillAmount);
const fillResults = await this._exchange.fillOrder.callAsync(
params.order,
params.takerAssetFillAmount,
params.signature,
{ from },
);
return fillResults;
}
public abiEncodeFillOrder(signedOrder: SignedOrder, opts: { takerAssetFillAmount?: BigNumber } = {}): string {
const params = orderUtils.createFill(signedOrder, opts.takerAssetFillAmount);
const data = this._exchange.fillOrder.getABIEncodedTransactionData(
params.order,
params.takerAssetFillAmount,
params.signature,
);
return data;
}
public getBalanceThresholdAddress(): string {
return this._balanceThresholdFilter.address;
}
public getExchangeAddress(): string {
return this._exchange.address;
}
private async _executeTransactionAsync(
abiEncodedExchangeTxData: string,
from: string,
gas?: number,
): Promise<TransactionReceiptWithDecodedLogs> {
const signedExchangeTx = this._signerTransactionFactory.newSignedTransaction(abiEncodedExchangeTxData);
const txOpts = _.isUndefined(gas) ? { from } : { from, gas };
const txHash = await this._balanceThresholdFilter.executeTransaction.sendTransactionAsync(
signedExchangeTx.salt,
signedExchangeTx.signerAddress,
signedExchangeTx.data,
signedExchangeTx.signature,
txOpts,
);
const txReceipt = await this._logDecoder.getTxWithDecodedLogsAsync(txHash);
return txReceipt;
}
}

6
contracts/extensions/tsconfig.json
View File

@@ -6,6 +6,10 @@
"resolveJsonModule": true
},
"include": ["./src/**/*", "./test/**/*", "./generated-wrappers/**/*"],
"files": ["./generated-artifacts/DutchAuction.json", "./generated-artifacts/Forwarder.json"],
"files": [
"./generated-artifacts/BalanceThresholdFilter.json",
"./generated-artifacts/DutchAuction.json",
"./generated-artifacts/Forwarder.json"
],
"exclude": ["./deploy/solc/solc_bin"]
}

3
contracts/interfaces/package.json
View File

@@ -10,7 +10,8 @@
"build": "yarn pre_build && tsc -b",
"build:ci": "yarn build",
"pre_build": "run-s compile generate_contract_wrappers",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../node_modules/@0x/abi-gen-templates/contract.handlebars --partials '../../node_modules/@0x/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",

11
contracts/libs/compiler.json
View File

@@ -18,5 +18,14 @@
}
}
},
"contracts": ["TestLibs", "LibOrder", "LibMath", "LibFillResults", "LibAbiEncoder", "LibEIP712"]
"contracts": [
"TestLibs",
"LibOrder",
"LibMath",
"LibFillResults",
"LibAbiEncoder",
"LibEIP712",
"LibAssetProxyErrors",
"LibConstants"
]
}

84
contracts/libs/contracts/libs/LibAddressArray.sol Normal file
View File

@@ -0,0 +1,84 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
import "@0x/contracts-utils/contracts/utils/LibBytes/LibBytes.sol";
library LibAddressArray {
/// @dev Append a new address to an array of addresses.
/// The `addressArray` may need to be reallocated to make space
/// for the new address. Because of this we return the resulting
/// memory location of `addressArray`.
/// @param addressToAppend Address to append.
/// @return Array of addresses: [... addressArray, addressToAppend]
function append(address[] memory addressArray, address addressToAppend)
internal pure
returns (address[])
{
// Get stats on address array and free memory
uint256 freeMemPtr = 0;
uint256 addressArrayBeginPtr = 0;
uint256 addressArrayEndPtr = 0;
uint256 addressArrayLength = addressArray.length;
uint256 addressArrayMemSizeInBytes = 32 + (32 * addressArrayLength);
assembly {
freeMemPtr := mload(0x40)
addressArrayBeginPtr := addressArray
addressArrayEndPtr := add(addressArray, addressArrayMemSizeInBytes)
}
// Cases for `freeMemPtr`:
// `freeMemPtr` == `addressArrayEndPtr`: Nothing occupies memory after `addressArray`
// `freeMemPtr` > `addressArrayEndPtr`: Some value occupies memory after `addressArray`
// `freeMemPtr` < `addressArrayEndPtr`: Memory has not been managed properly.
require(
freeMemPtr >= addressArrayEndPtr,
"INVALID_FREE_MEMORY_PTR"
);
// If free memory begins at the end of `addressArray`
// then we can append `addressToAppend` directly.
// Otherwise, we must copy the array to free memory
// before appending new values to it.
if (freeMemPtr > addressArrayEndPtr) {
LibBytes.memCopy(freeMemPtr, addressArrayBeginPtr, addressArrayMemSizeInBytes);
assembly {
addressArray := freeMemPtr
addressArrayBeginPtr := addressArray
}
}
// Append `addressToAppend`
addressArrayLength += 1;
addressArrayMemSizeInBytes += 32;
addressArrayEndPtr = addressArrayBeginPtr + addressArrayMemSizeInBytes;
freeMemPtr = addressArrayEndPtr;
assembly {
// Store new array length
mstore(addressArray, addressArrayLength)
// Update `freeMemPtr`
mstore(0x40, freeMemPtr)
}
addressArray[addressArrayLength - 1] = addressToAppend;
return addressArray;
}
}

152
contracts/libs/contracts/libs/LibExchangeSelectors.sol Normal file
View File

@@ -0,0 +1,152 @@
/*
Copyright 2018 ZeroEx Intl.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
pragma solidity 0.4.24;
contract LibExchangeSelectors {
// solhint-disable max-line-length
// allowedValidators
bytes4 constant public ALLOWED_VALIDATORS_SELECTOR = 0x7b8e3514;
bytes4 constant public ALLOWED_VALIDATORS_SELECTOR_GENERATOR = bytes4(keccak256("allowedValidators(address,address)"));
// assetProxies
bytes4 constant public ASSET_PROXIES_SELECTOR = 0x3fd3c997;
bytes4 constant public ASSET_PROXIES_SELECTOR_GENERATOR = bytes4(keccak256("assetProxies(bytes4)"));
// batchCancelOrders
bytes4 constant public BATCH_CANCEL_ORDERS_SELECTOR = 0x4ac14782;
bytes4 constant public BATCH_CANCEL_ORDERS_SELECTOR_GENERATOR = bytes4(keccak256("batchCancelOrders((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[])"));
// batchFillOrKillOrders
bytes4 constant public BATCH_FILL_OR_KILL_ORDERS_SELECTOR = 0x4d0ae546;
bytes4 constant public BATCH_FILL_OR_KILL_ORDERS_SELECTOR_GENERATOR = bytes4(keccak256("batchFillOrKillOrders((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[],uint256[],bytes[])"));
// batchFillOrders
bytes4 constant public BATCH_FILL_ORDERS_SELECTOR = 0x297bb70b;
bytes4 constant public BATCH_FILL_ORDERS_SELECTOR_GENERATOR = bytes4(keccak256("batchFillOrders((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[],uint256[],bytes[])"));
// batchFillOrdersNoThrow
bytes4 constant public BATCH_FILL_ORDERS_NO_THROW_SELECTOR = 0x50dde190;
bytes4 constant public BATCH_FILL_ORDERS_NO_THROW_SELECTOR_GENERATOR = bytes4(keccak256("batchFillOrdersNoThrow((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[],uint256[],bytes[])"));
// cancelOrder
bytes4 constant public CANCEL_ORDER_SELECTOR = 0xd46b02c3;
bytes4 constant public CANCEL_ORDER_SELECTOR_GENERATOR = bytes4(keccak256("cancelOrder((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes))"));
// cancelOrdersUpTo
bytes4 constant public CANCEL_ORDERS_UP_TO_SELECTOR = 0x4f9559b1;
bytes4 constant public CANCEL_ORDERS_UP_TO_SELECTOR_GENERATOR = bytes4(keccak256("cancelOrdersUpTo(uint256)"));
// cancelled
bytes4 constant public CANCELLED_SELECTOR = 0x2ac12622;
bytes4 constant public CANCELLED_SELECTOR_GENERATOR = bytes4(keccak256("cancelled(bytes32)"));
// currentContextAddress
bytes4 constant public CURRENT_CONTEXT_ADDRESS_SELECTOR = 0xeea086ba;
bytes4 constant public CURRENT_CONTEXT_ADDRESS_SELECTOR_GENERATOR = bytes4(keccak256("currentContextAddress()"));
// executeTransaction
bytes4 constant public EXECUTE_TRANSACTION_SELECTOR = 0xbfc8bfce;
bytes4 constant public EXECUTE_TRANSACTION_SELECTOR_GENERATOR = bytes4(keccak256("executeTransaction(uint256,address,bytes,bytes)"));
// fillOrKillOrder
bytes4 constant public FILL_OR_KILL_ORDER_SELECTOR = 0x64a3bc15;
bytes4 constant public FILL_OR_KILL_ORDER_SELECTOR_GENERATOR = bytes4(keccak256("fillOrKillOrder((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes),uint256,bytes)"));
// fillOrder
bytes4 constant public FILL_ORDER_SELECTOR = 0xb4be83d5;
bytes4 constant public FILL_ORDER_SELECTOR_GENERATOR = bytes4(keccak256("fillOrder((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes),uint256,bytes)"));
// fillOrderNoThrow
bytes4 constant public FILL_ORDER_NO_THROW_SELECTOR = 0x3e228bae;
bytes4 constant public FILL_ORDER_NO_THROW_SELECTOR_GENERATOR = bytes4(keccak256("fillOrderNoThrow((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes),uint256,bytes)"));
// filled
bytes4 constant public FILLED_SELECTOR = 0x288cdc91;
bytes4 constant public FILLED_SELECTOR_GENERATOR = bytes4(keccak256("filled(bytes32)"));
// getAssetProxy
bytes4 constant public GET_ASSET_PROXY_SELECTOR = 0x60704108;
bytes4 constant public GET_ASSET_PROXY_SELECTOR_GENERATOR = bytes4(keccak256("getAssetProxy(bytes4)"));
// getOrderInfo
bytes4 constant public GET_ORDER_INFO_SELECTOR = 0xc75e0a81;
bytes4 constant public GET_ORDER_INFO_SELECTOR_GENERATOR = bytes4(keccak256("getOrderInfo((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes))"));
// getOrdersInfo
bytes4 constant public GET_ORDERS_INFO_SELECTOR = 0x7e9d74dc;
bytes4 constant public GET_ORDERS_INFO_SELECTOR_GENERATOR = bytes4(keccak256("getOrdersInfo((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[])"));
// isValidSignature
bytes4 constant public IS_VALID_SIGNATURE_SELECTOR = 0x93634702;
bytes4 constant public IS_VALID_SIGNATURE_SELECTOR_GENERATOR = bytes4(keccak256("isValidSignature(bytes32,address,bytes)"));
// marketBuyOrders
bytes4 constant public MARKET_BUY_ORDERS_SELECTOR = 0xe5fa431b;
bytes4 constant public MARKET_BUY_ORDERS_SELECTOR_GENERATOR = bytes4(keccak256("marketBuyOrders((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[],uint256,bytes[])"));
// marketBuyOrdersNoThrow
bytes4 constant public MARKET_BUY_ORDERS_NO_THROW_SELECTOR = 0xa3e20380;
bytes4 constant public MARKET_BUY_ORDERS_NO_THROW_SELECTOR_GENERATOR = bytes4(keccak256("marketBuyOrdersNoThrow((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[],uint256,bytes[])"));
// marketSellOrders
bytes4 constant public MARKET_SELL_ORDERS_SELECTOR = 0x7e1d9808;
bytes4 constant public MARKET_SELL_ORDERS_SELECTOR_GENERATOR = bytes4(keccak256("marketSellOrders((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[],uint256,bytes[])"));
// marketSellOrdersNoThrow
bytes4 constant public MARKET_SELL_ORDERS_NO_THROW_SELECTOR = 0xdd1c7d18;
bytes4 constant public MARKET_SELL_ORDERS_NO_THROW_SELECTOR_GENERATOR = bytes4(keccak256("marketSellOrdersNoThrow((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes)[],uint256,bytes[])"));
// matchOrders
bytes4 constant public MATCH_ORDERS_SELECTOR = 0x3c28d861;
bytes4 constant public MATCH_ORDERS_SELECTOR_GENERATOR = bytes4(keccak256("matchOrders((address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes),(address,address,address,address,uint256,uint256,uint256,uint256,uint256,uint256,bytes,bytes),bytes,bytes)"));
// orderEpoch
bytes4 constant public ORDER_EPOCH_SELECTOR = 0xd9bfa73e;
bytes4 constant public ORDER_EPOCH_SELECTOR_GENERATOR = bytes4(keccak256("orderEpoch(address,address)"));
// owner
bytes4 constant public OWNER_SELECTOR = 0x8da5cb5b;
bytes4 constant public OWNER_SELECTOR_GENERATOR = bytes4(keccak256("owner()"));
// preSign
bytes4 constant public PRE_SIGN_SELECTOR = 0x3683ef8e;
bytes4 constant public PRE_SIGN_SELECTOR_GENERATOR = bytes4(keccak256("preSign(bytes32,address,bytes)"));
// preSigned
bytes4 constant public PRE_SIGNED_SELECTOR = 0x82c174d0;
bytes4 constant public PRE_SIGNED_SELECTOR_GENERATOR = bytes4(keccak256("preSigned(bytes32,address)"));
// registerAssetProxy
bytes4 constant public REGISTER_ASSET_PROXY_SELECTOR = 0xc585bb93;
bytes4 constant public REGISTER_ASSET_PROXY_SELECTOR_GENERATOR = bytes4(keccak256("registerAssetProxy(address)"));
// setSignatureValidatorApproval
bytes4 constant public SET_SIGNATURE_VALIDATOR_APPROVAL_SELECTOR = 0x77fcce68;
bytes4 constant public SET_SIGNATURE_VALIDATOR_APPROVAL_SELECTOR_GENERATOR = bytes4(keccak256("setSignatureValidatorApproval(address,bool)"));
// transactions
bytes4 constant public TRANSACTIONS_SELECTOR = 0x642f2eaf;
bytes4 constant public TRANSACTIONS_SELECTOR_GENERATOR = bytes4(keccak256("transactions(bytes32)"));
// transferOwnership
bytes4 constant public TRANSFER_OWNERSHIP_SELECTOR = 0xf2fde38b;
bytes4 constant public TRANSFER_OWNERSHIP_SELECTOR_GENERATOR = bytes4(keccak256("transferOwnership(address)"));
}

3
contracts/libs/package.json
View File

@@ -19,7 +19,8 @@
"test:profiler": "SOLIDITY_PROFILER=true run-s build run_mocha profiler:report:html",
"test:trace": "SOLIDITY_REVERT_TRACE=true run-s build run_mocha",
"run_mocha": "mocha --require source-map-support/register --require make-promises-safe 'lib/test/**/*.js' --timeout 100000 --bail --exit",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../node_modules/@0x/abi-gen-templates/contract.handlebars --partials '../../node_modules/@0x/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",

3
contracts/multisig/package.json
View File

@@ -19,7 +19,8 @@
"test:profiler": "SOLIDITY_PROFILER=true run-s build run_mocha profiler:report:html",
"test:trace": "SOLIDITY_REVERT_TRACE=true run-s build run_mocha",
"run_mocha": "mocha --require source-map-support/register --require make-promises-safe 'lib/test/**/*.js' --timeout 100000 --bail --exit",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../packages/abi-gen-templates/contract.handlebars --partials '../../packages/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",

2
contracts/multisig/src/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './artifacts';
export * from './wrappers';

9
contracts/protocol/CHANGELOG.json
View File

@@ -1,4 +1,13 @@
[
{
"version": "2.2.0",
"changes": [
{
"note": "Added LibAddressArray",
"pr": 1383
}
]
},
{
"timestamp": 1544741676,
"version": "2.1.59",

5
contracts/protocol/package.json
View File

@@ -19,7 +19,8 @@
"test:profiler": "SOLIDITY_PROFILER=true run-s build run_mocha profiler:report:html",
"test:trace": "SOLIDITY_REVERT_TRACE=true run-s build run_mocha",
"run_mocha": "mocha --require source-map-support/register --require make-promises-safe 'lib/test/**/*.js' --timeout 100000 --bail --exit",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../node_modules/@0x/abi-gen-templates/contract.handlebars --partials '../../node_modules/@0x/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",
@@ -44,7 +45,6 @@
"homepage": "https://github.com/0xProject/0x-monorepo/contracts/protocol/README.md",
"devDependencies": {
"@0x/abi-gen": "^1.0.19",
"@0x/contracts-test-utils": "^1.0.2",
"@0x/dev-utils": "^1.0.21",
"@0x/sol-compiler": "^1.1.16",
"@0x/sol-cov": "^2.1.16",
@@ -75,6 +75,7 @@
"@0x/contracts-interfaces": "^1.0.2",
"@0x/contracts-libs": "^1.0.2",
"@0x/contracts-multisig": "^1.0.2",
"@0x/contracts-test-utils": "^1.0.2",
"@0x/contracts-tokens": "^1.0.2",
"@0x/contracts-utils": "^1.0.2",
"@0x/order-utils": "^3.0.7",

1
contracts/test-utils/src/types.ts
View File

@@ -104,6 +104,7 @@ export enum ContractName {
Authorizable = 'Authorizable',
Whitelist = 'Whitelist',
Forwarder = 'Forwarder',
BalanceThresholdFilter = 'BalanceThresholdFilter',
}
export interface SignedTransaction {

3
contracts/tokens/package.json
View File

@@ -19,7 +19,8 @@
"test:profiler": "SOLIDITY_PROFILER=true run-s build run_mocha profiler:report:html",
"test:trace": "SOLIDITY_REVERT_TRACE=true run-s build run_mocha",
"run_mocha": "mocha --require source-map-support/register --require make-promises-safe 'lib/test/**/*.js' --timeout 100000 --bail --exit",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../node_modules/@0x/abi-gen-templates/contract.handlebars --partials '../../node_modules/@0x/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",

3
contracts/utils/package.json
View File

@@ -19,7 +19,8 @@
"test:profiler": "SOLIDITY_PROFILER=true run-s build run_mocha profiler:report:html",
"test:trace": "SOLIDITY_REVERT_TRACE=true run-s build run_mocha",
"run_mocha": "mocha --require source-map-support/register --require make-promises-safe 'lib/test/**/*.js' --timeout 100000 --bail --exit",
"compile": "sol-compiler --contracts-dir contracts",
"compile": "sol-compiler",
"watch": "sol-compiler -w",
"clean": "shx rm -rf lib generated-artifacts generated-wrappers",
"generate_contract_wrappers": "abi-gen --abis ${npm_package_config_abis} --template ../../node_modules/@0x/abi-gen-templates/contract.handlebars --partials '../../node_modules/@0x/abi-gen-templates/partials/**/*.handlebars' --output generated-wrappers --backend ethers",
"lint": "tslint --format stylish --project . --exclude ./generated-wrappers/**/* --exclude ./generated-artifacts/**/* --exclude **/lib/**/* && yarn lint-contracts",

52
packages/json-schemas/schemas/order_watcher_web_socket_request_schema.json Normal file
View File

@@ -0,0 +1,52 @@
{
"id": "/orderWatcherWebSocketRequestSchema",
"type": "object",
"definitions": {
"signedOrderParam": {
"type": "object",
"properties": {
"signedOrder": { "$ref": "/signedOrderSchema" }
},
"required": ["signedOrder"]
},
"orderHashParam": {
"type": "object",
"properties": {
"orderHash": { "$ref": "/hexSchema" }
},
"required": ["orderHash"]
}
},
"oneOf": [
{
"type": "object",
"properties": {
"id": { "type": "number" },
"jsonrpc": { "type": "string" },
"method": { "enum": ["ADD_ORDER"] },
"params": { "$ref": "#/definitions/signedOrderParam" }
},
"required": ["id", "jsonrpc", "method", "params"]
},
{
"type": "object",
"properties": {
"id": { "type": "number" },
"jsonrpc": { "type": "string" },
"method": { "enum": ["REMOVE_ORDER"] },
"params": { "$ref": "#/definitions/orderHashParam" }
},
"required": ["id", "jsonrpc", "method", "params"]
},
{
"type": "object",
"properties": {
"id": { "type": "number" },
"jsonrpc": { "type": "string" },
"method": { "enum": ["GET_STATS"] },
"params": {}
},
"required": ["id", "jsonrpc", "method"]
}
]
}

10
packages/json-schemas/schemas/order_watcher_web_socket_utf8_message_schema.json Normal file
View File

@@ -0,0 +1,10 @@
{
"id": "/orderWatcherWebSocketUtf8MessageSchema",
"properties": {
"utf8Data": { "type": "string" }
},
"required": [
"utf8Data"
],
"type": "object"
}

4
packages/json-schemas/src/schemas.ts
View File

@@ -16,6 +16,8 @@ import * as orderFillOrKillRequestsSchema from '../schemas/order_fill_or_kill_re
import * as orderFillRequestsSchema from '../schemas/order_fill_requests_schema.json';
import * as orderHashSchema from '../schemas/order_hash_schema.json';
import * as orderSchema from '../schemas/order_schema.json';
import * as orderWatcherWebSocketRequestSchema from '../schemas/order_watcher_web_socket_request_schema.json';
import * as orderWatcherWebSocketUtf8MessageSchema from '../schemas/order_watcher_web_socket_utf8_message_schema.json';
import * as orderBookRequestSchema from '../schemas/orderbook_request_schema.json';
import * as ordersRequestOptsSchema from '../schemas/orders_request_opts_schema.json';
import * as ordersSchema from '../schemas/orders_schema.json';
@@ -66,6 +68,8 @@ export const schemas = {
jsNumber,
requestOptsSchema,
pagedRequestOptsSchema,
orderWatcherWebSocketRequestSchema,
orderWatcherWebSocketUtf8MessageSchema,
ordersRequestOptsSchema,
orderBookRequestSchema,
orderConfigRequestSchema,

2
packages/json-schemas/tsconfig.json
View File

@@ -23,6 +23,8 @@
"./schemas/order_schema.json",
"./schemas/signed_order_schema.json",
"./schemas/orders_schema.json",
"./schemas/order_watcher_web_socket_request_schema.json",
"./schemas/order_watcher_web_socket_utf8_message_schema.json",
"./schemas/paginated_collection_schema.json",
"./schemas/relayer_api_asset_data_pairs_response_schema.json",
"./schemas/relayer_api_asset_data_pairs_schema.json",

10
packages/order-watcher/CHANGELOG.json
View File

@@ -1,4 +1,14 @@
[
{
"version": "2.3.0",
"changes": [
{
"note":
"Added a WebSocket interface to OrderWatcher so that it can be used by a client written in any language",
"pr": 1427
}
]
},
{
"version": "2.2.8",
"changes": [

88
packages/order-watcher/README.md
View File

@@ -4,6 +4,9 @@ An order watcher daemon that watches for order validity.
#### Read the wiki [article](https://0xproject.com/wiki#0x-OrderWatcher).
OrderWatcher also comes with a WebSocket server to provide language-agnostic access
to order watching functionality. We used the [WebSocket Client and Server Implementation for Node](https://www.npmjs.com/package/websocket). The server sends and receives messages that conform to the [JSON RPC specifications](https://www.jsonrpc.org/specification).
## Installation
**Install**
@@ -26,6 +29,91 @@ If your project is in [TypeScript](https://www.typescriptlang.org/), add the fol
}
```
## Using the WebSocket Server
**Setup**
**Environmental Variables**
Several environmental variables can be set to configure the server:
* `ORDER_WATCHER_HTTP_PORT` specifies the port that the http server will listen on
and accept connections from. When this is not set, we default to 8080.
**Requests**
The server accepts three types of requests: `ADD_ORDER`, `REMOVE_ORDER` and `GET_STATS`. These mirror what the underlying OrderWatcher does. You can read more in the [wiki](https://0xproject.com/wiki#0x-OrderWatcher). Unlike the OrderWatcher, it does not expose any `subscribe` or `unsubscribe` functionality because the WebSocket server keeps a single subscription open for all clients.
The first step for making a request is establishing a connection with the server. In Javascript:
```
var W3CWebSocket = require('websocket').w3cwebsocket;
wsClient = new W3CWebSocket('ws://127.0.0.1:8080');
```
In Python, you could use the [websocket-client library](http://pypi.python.org/pypi/websocket-client/) and run:
```
from websocket import create_connection
wsClient = create_connection("ws://127.0.0.1:8080")
```
With the connection established, you prepare the payload for your request. The payload is a json object with a format established by the [JSON RPC specification](https://www.jsonrpc.org/specification):
* `id`: All requests require you to specify a numerical `id`. When the server responds to the request, the response will have the same `id` as the one supplied with your request.
* `jsonrpc`: This is always the string `'2.0'`.
* `method`: This specifies the OrderWatcher method you want to call. I.e., `'ADD_ORDER'`, `'REMOVE_ORDER'` or `'GET_STATS'`.
* `params`: These contain the parameters needed by OrderWatcher to execute the method you called. For `ADD_ORDER`, provide `{ signedOrder: <your signedOrder> }`. For `REMOVE_ORDER`, provide `{ orderHash: <your orderHash> }`. For `GET_STATS`, no parameters are needed, so you may leave this empty.
Next, convert the payload to a string and send it through the connection.
In Javascript:
```
const addOrderPayload = {
id: 1,
jsonrpc: '2.0',
method: 'ADD_ORDER',
params: { signedOrder: <your signedOrder> },
};
wsClient.send(JSON.stringify(addOrderPayload));
```
In Python:
```
import json
remove_order_payload = {
'id': 1,
'jsonrpc': '2.0',
'method': 'REMOVE_ORDER',
'params': {'orderHash': '0x6edc16bf37fde79f5012088c33784c730e2f103d9ab1caf73060c386ad107b7e'},
}
wsClient.send(json.dumps(remove_order_payload));
```
**Response**
The server responds to all requests in a similar format. In the data field, you'll find another object containing the following fields:
* `id`: The id corresponding to the request that the server is responding to. `UPDATE` responses are not based on any requests so the `id` field is omitted`.
* `jsonrpc`: Always `'2.0'`.
* `method`: The method the server is responding to. Eg. `ADD_ORDER`. When order states change the server may also initiate a response. In this case, method will be listed as `UPDATE`.
* `result`: This field varies based on the method. `UPDATE` responses contain the new order state. `GET_STATS` responses contain the current order count. When there are errors, this field is omitted.
* `error`: When there is an error executing a request, the [JSON RPC](https://www.jsonrpc.org/specification) error object is listed here. When the server responds successfully, this field is omitted.
In Javascript, the responses can be parsed using the `onmessage` callback:
```
wsClient.onmessage = (msg) => {
const responseData = JSON.parse(msg.data);
const method = responseData.method
};
```
In Python, `recv` is a lightweight way to receive a response:
```
result = wsClient.recv()
method = result.method
```
## Contributing
We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository.

3
packages/order-watcher/package.json
View File

@@ -74,7 +74,8 @@
"ethereum-types": "^1.1.4",
"ethereumjs-blockstream": "6.0.0",
"ethers": "~4.0.4",
"lodash": "^4.17.5"
"lodash": "^4.17.5",
"websocket": "^1.0.25"
},
"publishConfig": {
"access": "public"

1
packages/order-watcher/src/index.ts
View File

@@ -1,4 +1,5 @@
export { OrderWatcher } from './order_watcher/order_watcher';
export { OrderWatcherWebSocketServer } from './order_watcher/order_watcher_web_socket_server';
export { ExpirationWatcher } from './order_watcher/expiration_watcher';
export {

200
packages/order-watcher/src/order_watcher/order_watcher_web_socket_server.ts Normal file
View File

@@ -0,0 +1,200 @@
import { ContractAddresses } from '@0x/contract-addresses';
import { schemas } from '@0x/json-schemas';
import { OrderStateInvalid, OrderStateValid, SignedOrder } from '@0x/types';
import { BigNumber, logUtils } from '@0x/utils';
import { Provider } from 'ethereum-types';
import * as http from 'http';
import * as WebSocket from 'websocket';
import { GetStatsResult, OrderWatcherConfig, OrderWatcherMethod, WebSocketRequest, WebSocketResponse } from '../types';
import { assert } from '../utils/assert';
import { OrderWatcher } from './order_watcher';
const DEFAULT_HTTP_PORT = 8080;
const JSON_RPC_VERSION = '2.0';
// Wraps the OrderWatcher functionality in a WebSocket server. Motivations:
// 1) Users can watch orders via non-typescript programs.
// 2) Better encapsulation so that users can work
export class OrderWatcherWebSocketServer {
private readonly _orderWatcher: OrderWatcher;
private readonly _httpServer: http.Server;
private readonly _connectionStore: Set<WebSocket.connection>;
private readonly _wsServer: WebSocket.server;
private readonly _isVerbose: boolean;
/**
* Recover types lost when the payload is stringified.
*/
private static _parseSignedOrder(rawRequest: any): SignedOrder {
const bigNumberFields = [
'salt',
'makerFee',
'takerFee',
'makerAssetAmount',
'takerAssetAmount',
'expirationTimeSeconds',
];
for (const field of bigNumberFields) {
rawRequest[field] = new BigNumber(rawRequest[field]);
}
return rawRequest;
}
/**
* Instantiate a new WebSocket server which provides OrderWatcher functionality
* @param provider Web3 provider to use for JSON RPC calls.
* @param networkId NetworkId to watch orders on.
* @param contractAddresses Optional contract addresses. Defaults to known
* addresses based on networkId.
* @param orderWatcherConfig OrderWatcher configurations. isVerbose sets the verbosity for the WebSocket server aswell.
* @param isVerbose Whether to enable verbose logging. Defaults to true.
*/
constructor(
provider: Provider,
networkId: number,
contractAddresses?: ContractAddresses,
orderWatcherConfig?: Partial<OrderWatcherConfig>,
) {
this._isVerbose =
orderWatcherConfig !== undefined && orderWatcherConfig.isVerbose !== undefined
? orderWatcherConfig.isVerbose
: true;
this._orderWatcher = new OrderWatcher(provider, networkId, contractAddresses, orderWatcherConfig);
this._connectionStore = new Set();
this._httpServer = http.createServer();
this._wsServer = new WebSocket.server({
httpServer: this._httpServer,
// Avoid setting autoAcceptConnections to true as it defeats all
// standard cross-origin protection facilities built into the protocol
// and the browser.
// Source: https://www.npmjs.com/package/websocket#server-example
// Also ensures that a request event is emitted by
// the server whenever a new WebSocket request is made.
autoAcceptConnections: false,
});
this._wsServer.on('request', async (request: any) => {
// Designed for usage pattern where client and server are run on the same
// machine by the same user. As such, no security checks are in place.
const connection: WebSocket.connection = request.accept(null, request.origin);
this._log(`${new Date()} [Server] Accepted connection from origin ${request.origin}.`);
connection.on('message', this._onMessageCallbackAsync.bind(this, connection));
connection.on('close', this._onCloseCallback.bind(this, connection));
this._connectionStore.add(connection);
});
}
/**
* Activates the WebSocket server by subscribing to the OrderWatcher and
* starting the WebSocket's HTTP server
*/
public start(): void {
// Have the WebSocket server subscribe to the OrderWatcher to receive updates.
// These updates are then broadcast to clients in the _connectionStore.
this._orderWatcher.subscribe(this._broadcastCallback.bind(this));
const port = process.env.ORDER_WATCHER_HTTP_PORT || DEFAULT_HTTP_PORT;
this._httpServer.listen(port, () => {
this._log(`${new Date()} [Server] Listening on port ${port}`);
});
}
/**
* Deactivates the WebSocket server by stopping the HTTP server from accepting
* new connections and unsubscribing from the OrderWatcher
*/
public stop(): void {
this._httpServer.close();
this._orderWatcher.unsubscribe();
}
private _log(...args: any[]): void {
if (this._isVerbose) {
logUtils.log(...args);
}
}
private async _onMessageCallbackAsync(connection: WebSocket.connection, message: any): Promise<void> {
let response: WebSocketResponse;
let id: number | null = null;
try {
assert.doesConformToSchema('message', message, schemas.orderWatcherWebSocketUtf8MessageSchema);
const request: WebSocketRequest = JSON.parse(message.utf8Data);
id = request.id;
assert.doesConformToSchema('request', request, schemas.orderWatcherWebSocketRequestSchema);
assert.isString(request.jsonrpc, JSON_RPC_VERSION);
response = {
id,
jsonrpc: JSON_RPC_VERSION,
method: request.method,
result: await this._routeRequestAsync(request),
};
} catch (err) {
response = {
id,
jsonrpc: JSON_RPC_VERSION,
method: null,
error: err.toString(),
};
}
this._log(`${new Date()} [Server] OrderWatcher output: ${JSON.stringify(response)}`);
connection.sendUTF(JSON.stringify(response));
}
private _onCloseCallback(connection: WebSocket.connection): void {
this._connectionStore.delete(connection);
this._log(`${new Date()} [Server] Client ${connection.remoteAddress} disconnected.`);
}
private async _routeRequestAsync(request: WebSocketRequest): Promise<GetStatsResult | undefined> {
this._log(`${new Date()} [Server] Request received: ${request.method}`);
switch (request.method) {
case OrderWatcherMethod.AddOrder: {
const signedOrder: SignedOrder = OrderWatcherWebSocketServer._parseSignedOrder(
request.params.signedOrder,
);
await this._orderWatcher.addOrderAsync(signedOrder);
break;
}
case OrderWatcherMethod.RemoveOrder: {
this._orderWatcher.removeOrder(request.params.orderHash || 'undefined');
break;
}
case OrderWatcherMethod.GetStats: {
return this._orderWatcher.getStats();
}
default:
// Should never reach here. Should be caught by JSON schema check.
throw new Error(`Unexpected default case hit for request.method`);
}
return undefined;
}
/**
* Broadcasts OrderState changes to ALL connected clients. At the moment,
* we do not support clients subscribing to only a subset of orders. As such,
* Client B will be notified of changes to an order that Client A added.
*/
private _broadcastCallback(err: Error | null, orderState?: OrderStateValid | OrderStateInvalid | undefined): void {
const method = OrderWatcherMethod.Update;
const response =
err === null
? {
jsonrpc: JSON_RPC_VERSION,
method,
result: orderState,
}
: {
jsonrpc: JSON_RPC_VERSION,
method,
error: {
code: -32000,
message: err.message,
},
};
this._connectionStore.forEach((connection: WebSocket.connection) => {
connection.sendUTF(JSON.stringify(response));
});
}
}

66
packages/order-watcher/src/types.ts
View File

@@ -1,4 +1,4 @@
import { OrderState } from '@0x/types';
import { OrderState, SignedOrder } from '@0x/types';
import { LogEntryEvent } from 'ethereum-types';
export enum OrderWatcherError {
@@ -31,3 +31,67 @@ export enum InternalOrderWatcherError {
ZrxNotInTokenRegistry = 'ZRX_NOT_IN_TOKEN_REGISTRY',
WethNotInTokenRegistry = 'WETH_NOT_IN_TOKEN_REGISTRY',
}
export enum OrderWatcherMethod {
// Methods initiated by the user.
GetStats = 'GET_STATS',
AddOrder = 'ADD_ORDER',
RemoveOrder = 'REMOVE_ORDER',
// These are spontaneous; they are primarily orderstate changes.
Update = 'UPDATE',
// `subscribe` and `unsubscribe` are methods of OrderWatcher, but we don't
// need to expose them to the WebSocket server user because the user implicitly
// subscribes and unsubscribes by connecting and disconnecting from the server.
}
// Users have to create a json object of this format and attach it to
// the data field of their WebSocket message to interact with the server.
export type WebSocketRequest = AddOrderRequest | RemoveOrderRequest | GetStatsRequest;
export interface AddOrderRequest {
id: number;
jsonrpc: string;
method: OrderWatcherMethod.AddOrder;
params: { signedOrder: SignedOrder };
}
export interface RemoveOrderRequest {
id: number;
jsonrpc: string;
method: OrderWatcherMethod.RemoveOrder;
params: { orderHash: string };
}
export interface GetStatsRequest {
id: number;
jsonrpc: string;
method: OrderWatcherMethod.GetStats;
}
// Users should expect a json object of this format in the data field
// of the WebSocket messages that the server sends out.
export type WebSocketResponse = SuccessfulWebSocketResponse | ErrorWebSocketResponse;
export interface SuccessfulWebSocketResponse {
id: number;
jsonrpc: string;
method: OrderWatcherMethod;
result: OrderState | GetStatsResult | undefined; // result is undefined for ADD_ORDER and REMOVE_ORDER
}
export interface ErrorWebSocketResponse {
id: number | null;
jsonrpc: string;
method: null;
error: JSONRPCError;
}
export interface JSONRPCError {
code: number;
message: string;
data?: string | object;
}
export interface GetStatsResult {
orderCount: number;
}

308
packages/order-watcher/test/order_watcher_web_socket_server_test.ts Normal file
View File

@@ -0,0 +1,308 @@
import { ContractWrappers } from '@0x/contract-wrappers';
import { tokenUtils } from '@0x/contract-wrappers/lib/test/utils/token_utils';
import { BlockchainLifecycle } from '@0x/dev-utils';
import { FillScenarios } from '@0x/fill-scenarios';
import { assetDataUtils, orderHashUtils } from '@0x/order-utils';
import { ExchangeContractErrs, OrderStateInvalid, OrderStateValid, SignedOrder } from '@0x/types';
import { BigNumber, logUtils } from '@0x/utils';
import { Web3Wrapper } from '@0x/web3-wrapper';
import * as chai from 'chai';
import 'mocha';
import * as WebSocket from 'websocket';
import { OrderWatcherWebSocketServer } from '../src/order_watcher/order_watcher_web_socket_server';
import { AddOrderRequest, OrderWatcherMethod, RemoveOrderRequest } from '../src/types';
import { chaiSetup } from './utils/chai_setup';
import { constants } from './utils/constants';
import { migrateOnceAsync } from './utils/migrate';
import { provider, web3Wrapper } from './utils/web3_wrapper';
chaiSetup.configure();
const expect = chai.expect;
const blockchainLifecycle = new BlockchainLifecycle(web3Wrapper);
interface WsMessage {
data: string;
}
describe.only('OrderWatcherWebSocketServer', async () => {
let contractWrappers: ContractWrappers;
let wsServer: OrderWatcherWebSocketServer;
let wsClient: WebSocket.w3cwebsocket;
let wsClientTwo: WebSocket.w3cwebsocket;
let fillScenarios: FillScenarios;
let userAddresses: string[];
let makerAssetData: string;
let takerAssetData: string;
let makerTokenAddress: string;
let takerTokenAddress: string;
let makerAddress: string;
let takerAddress: string;
let zrxTokenAddress: string;
let signedOrder: SignedOrder;
let orderHash: string;
let addOrderPayload: AddOrderRequest;
let removeOrderPayload: RemoveOrderRequest;
const decimals = constants.ZRX_DECIMALS;
const fillableAmount = Web3Wrapper.toBaseUnitAmount(new BigNumber(5), decimals);
before(async () => {
// Set up constants
const contractAddresses = await migrateOnceAsync();
await blockchainLifecycle.startAsync();
const networkId = constants.TESTRPC_NETWORK_ID;
const config = {
networkId,
contractAddresses,
};
contractWrappers = new ContractWrappers(provider, config);
userAddresses = await web3Wrapper.getAvailableAddressesAsync();
zrxTokenAddress = contractAddresses.zrxToken;
[makerAddress, takerAddress] = userAddresses;
[makerTokenAddress, takerTokenAddress] = tokenUtils.getDummyERC20TokenAddresses();
[makerAssetData, takerAssetData] = [
assetDataUtils.encodeERC20AssetData(makerTokenAddress),
assetDataUtils.encodeERC20AssetData(takerTokenAddress),
];
fillScenarios = new FillScenarios(
provider,
userAddresses,
zrxTokenAddress,
contractAddresses.exchange,
contractAddresses.erc20Proxy,
contractAddresses.erc721Proxy,
);
signedOrder = await fillScenarios.createFillableSignedOrderAsync(
makerAssetData,
takerAssetData,
makerAddress,
takerAddress,
fillableAmount,
);
orderHash = orderHashUtils.getOrderHashHex(signedOrder);
addOrderPayload = {
id: 1,
jsonrpc: '2.0',
method: OrderWatcherMethod.AddOrder,
params: { signedOrder },
};
removeOrderPayload = {
id: 1,
jsonrpc: '2.0',
method: OrderWatcherMethod.RemoveOrder,
params: { orderHash },
};
// Prepare OrderWatcher WebSocket server
const orderWatcherConfig = {
isVerbose: true,
};
wsServer = new OrderWatcherWebSocketServer(provider, networkId, contractAddresses, orderWatcherConfig);
});
after(async () => {
await blockchainLifecycle.revertAsync();
});
beforeEach(async () => {
wsServer.start();
await blockchainLifecycle.startAsync();
wsClient = new WebSocket.w3cwebsocket('ws://127.0.0.1:8080/');
logUtils.log(`${new Date()} [Client] Connected.`);
});
afterEach(async () => {
wsClient.close();
await blockchainLifecycle.revertAsync();
wsServer.stop();
logUtils.log(`${new Date()} [Client] Closed.`);
});
it('responds to getStats requests correctly', (done: any) => {
const payload = {
id: 1,
jsonrpc: '2.0',
method: 'GET_STATS',
};
wsClient.onopen = () => wsClient.send(JSON.stringify(payload));
wsClient.onmessage = (msg: any) => {
const responseData = JSON.parse(msg.data);
expect(responseData.id).to.be.eq(1);
expect(responseData.jsonrpc).to.be.eq('2.0');
expect(responseData.method).to.be.eq('GET_STATS');
expect(responseData.result.orderCount).to.be.eq(0);
done();
};
});
it('throws an error when an invalid method is attempted', async () => {
const invalidMethodPayload = {
id: 1,
jsonrpc: '2.0',
method: 'BAD_METHOD',
};
wsClient.onopen = () => wsClient.send(JSON.stringify(invalidMethodPayload));
const errorMsg = await onMessageAsync(wsClient, null);
const errorData = JSON.parse(errorMsg.data);
// tslint:disable-next-line:no-unused-expression
expect(errorData.id).to.be.null;
// tslint:disable-next-line:no-unused-expression
expect(errorData.method).to.be.null;
expect(errorData.jsonrpc).to.be.eq('2.0');
expect(errorData.error).to.match(/^Error: Expected request to conform to schema/);
});
it('throws an error when jsonrpc field missing from request', async () => {
const noJsonRpcPayload = {
id: 1,
method: 'GET_STATS',
};
wsClient.onopen = () => wsClient.send(JSON.stringify(noJsonRpcPayload));
const errorMsg = await onMessageAsync(wsClient, null);
const errorData = JSON.parse(errorMsg.data);
// tslint:disable-next-line:no-unused-expression
expect(errorData.method).to.be.null;
expect(errorData.jsonrpc).to.be.eq('2.0');
expect(errorData.error).to.match(/^Error: Expected request to conform to schema/);
});
it('throws an error when we try to add an order without a signedOrder', async () => {
const noSignedOrderAddOrderPayload = {
id: 1,
jsonrpc: '2.0',
method: 'ADD_ORDER',
orderHash: '0x7337e2f2a9aa2ed6afe26edc2df7ad79c3ffa9cf9b81a964f707ea63f5272355',
};
wsClient.onopen = () => wsClient.send(JSON.stringify(noSignedOrderAddOrderPayload));
const errorMsg = await onMessageAsync(wsClient, null);
const errorData = JSON.parse(errorMsg.data);
// tslint:disable-next-line:no-unused-expression
expect(errorData.id).to.be.null;
// tslint:disable-next-line:no-unused-expression
expect(errorData.method).to.be.null;
expect(errorData.jsonrpc).to.be.eq('2.0');
expect(errorData.error).to.match(/^Error: Expected request to conform to schema/);
});
it('throws an error when we try to add a bad signedOrder', async () => {
const invalidAddOrderPayload = {
id: 1,
jsonrpc: '2.0',
method: 'ADD_ORDER',
signedOrder: {
makerAddress: '0x0',
},
};
wsClient.onopen = () => wsClient.send(JSON.stringify(invalidAddOrderPayload));
const errorMsg = await onMessageAsync(wsClient, null);
const errorData = JSON.parse(errorMsg.data);
// tslint:disable-next-line:no-unused-expression
expect(errorData.id).to.be.null;
// tslint:disable-next-line:no-unused-expression
expect(errorData.method).to.be.null;
expect(errorData.error).to.match(/^Error: Expected request to conform to schema/);
});
it('executes addOrder and removeOrder requests correctly', async () => {
wsClient.onopen = () => wsClient.send(JSON.stringify(addOrderPayload));
const addOrderMsg = await onMessageAsync(wsClient, OrderWatcherMethod.AddOrder);
const addOrderData = JSON.parse(addOrderMsg.data);
expect(addOrderData.method).to.be.eq('ADD_ORDER');
expect((wsServer as any)._orderWatcher._orderByOrderHash).to.deep.include({
[orderHash]: signedOrder,
});
const clientOnMessagePromise = onMessageAsync(wsClient, OrderWatcherMethod.RemoveOrder);
wsClient.send(JSON.stringify(removeOrderPayload));
const removeOrderMsg = await clientOnMessagePromise;
const removeOrderData = JSON.parse(removeOrderMsg.data);
expect(removeOrderData.method).to.be.eq('REMOVE_ORDER');
expect((wsServer as any)._orderWatcher._orderByOrderHash).to.not.deep.include({
[orderHash]: signedOrder,
});
});
it('broadcasts orderStateInvalid message when makerAddress allowance set to 0 for watched order', async () => {
// Add the regular order
wsClient.onopen = () => wsClient.send(JSON.stringify(addOrderPayload));
// We register the onMessage callback before calling `setProxyAllowanceAsync` which we
// expect will cause a message to be emitted. We do now "await" here, since we want to
// check for messages _after_ calling `setProxyAllowanceAsync`
const clientOnMessagePromise = onMessageAsync(wsClient, OrderWatcherMethod.Update);
// Set the allowance to 0
await contractWrappers.erc20Token.setProxyAllowanceAsync(makerTokenAddress, makerAddress, new BigNumber(0));
// We now await the `onMessage` promise to check for the message
const orderWatcherUpdateMsg = await clientOnMessagePromise;
const orderWatcherUpdateData = JSON.parse(orderWatcherUpdateMsg.data);
expect(orderWatcherUpdateData.method).to.be.eq('UPDATE');
const invalidOrderState = orderWatcherUpdateData.result as OrderStateInvalid;
expect(invalidOrderState.isValid).to.be.false();
expect(invalidOrderState.orderHash).to.be.eq(orderHash);
expect(invalidOrderState.error).to.be.eq(ExchangeContractErrs.InsufficientMakerAllowance);
});
it('broadcasts to multiple clients when an order backing ZRX allowance changes', async () => {
// Prepare order
const makerFee = Web3Wrapper.toBaseUnitAmount(new BigNumber(2), decimals);
const takerFee = Web3Wrapper.toBaseUnitAmount(new BigNumber(0), decimals);
const nonZeroMakerFeeSignedOrder = await fillScenarios.createFillableSignedOrderWithFeesAsync(
makerAssetData,
takerAssetData,
makerFee,
takerFee,
makerAddress,
takerAddress,
fillableAmount,
takerAddress,
);
const nonZeroMakerFeeOrderPayload = {
id: 1,
jsonrpc: '2.0',
method: 'ADD_ORDER',
signedOrder: nonZeroMakerFeeSignedOrder,
};
// Set up a second client and have it add the order
wsClientTwo = new WebSocket.w3cwebsocket('ws://127.0.0.1:8080/');
logUtils.log(`${new Date()} [Client] Connected.`);
wsClientTwo.onopen = () => wsClientTwo.send(JSON.stringify(nonZeroMakerFeeOrderPayload));
// Setup the onMessage callbacks, but don't await them yet
const clientOneOnMessagePromise = onMessageAsync(wsClient, OrderWatcherMethod.Update);
const clientTwoOnMessagePromise = onMessageAsync(wsClientTwo, OrderWatcherMethod.Update);
// Change the allowance
await contractWrappers.erc20Token.setProxyAllowanceAsync(zrxTokenAddress, makerAddress, new BigNumber(0));
// Check that both clients receive the emitted event by awaiting the onMessageAsync promises
let updateMsg = await clientOneOnMessagePromise;
let updateData = JSON.parse(updateMsg.data);
let orderState = updateData.result as OrderStateValid;
expect(orderState.isValid).to.be.true();
expect(orderState.orderRelevantState.makerFeeProxyAllowance).to.be.eq('0');
updateMsg = await clientTwoOnMessagePromise;
updateData = JSON.parse(updateMsg.data);
orderState = updateData.result as OrderStateValid;
expect(orderState.isValid).to.be.true();
expect(orderState.orderRelevantState.makerFeeProxyAllowance).to.be.eq('0');
wsClientTwo.close();
logUtils.log(`${new Date()} [Client] Closed.`);
});
});
// HACK: createFillableSignedOrderAsync is Promise-based, which forces us
// to use Promises instead of the done() callbacks for tests.
// onmessage callback must thus be wrapped as a Promise.
async function onMessageAsync(client: WebSocket.w3cwebsocket, method: string | null): Promise<WsMessage> {
return new Promise<WsMessage>(resolve => {
client.onmessage = (msg: WsMessage) => {
const data = JSON.parse(msg.data);
if (data.method === method) {
resolve(msg);
}
};
});
}

13
packages/sol-compiler/CHANGELOG.json
View File

@@ -1,4 +1,17 @@
[
{
"version": "2.0.0",
"changes": [
{
"note": "Add sol-compiler watch mode with -w flag",
"pr": 1461
},
{
"note": "Make error and warning colouring more visually pleasant and consistent with other compilers",
"pr": 1461
}
]
},
{
"version": "1.1.16",
"changes": [

4
packages/sol-compiler/package.json
View File

@@ -44,7 +44,9 @@
"devDependencies": {
"@0x/dev-utils": "^1.0.21",
"@0x/tslint-config": "^2.0.0",
"@types/chokidar": "^1.7.5",
"@types/mkdirp": "^0.5.2",
"@types/pluralize": "^0.0.29",
"@types/require-from-string": "^1.2.0",
"@types/semver": "^5.5.0",
"chai": "^4.0.1",
@@ -74,10 +76,12 @@
"@0x/web3-wrapper": "^3.2.1",
"@types/yargs": "^11.0.0",
"chalk": "^2.3.0",
"chokidar": "^2.0.4",
"ethereum-types": "^1.1.4",
"ethereumjs-util": "^5.1.1",
"lodash": "^4.17.5",
"mkdirp": "^0.5.1",
"pluralize": "^7.0.0",
"require-from-string": "^2.0.1",
"semver": "5.5.0",
"solc": "^0.4.23",

10
packages/sol-compiler/src/cli.ts
View File

@@ -25,6 +25,10 @@ const SEPARATOR = ',';
type: 'string',
description: 'comma separated list of contracts to compile',
})
.option('watch', {
alias: 'w',
default: false,
})
.help().argv;
const contracts = _.isUndefined(argv.contracts)
? undefined
@@ -37,7 +41,11 @@ const SEPARATOR = ',';
contracts,
};
const compiler = new Compiler(opts);
await compiler.compileAsync();
if (argv.watch) {
await compiler.watchAsync();
} else {
await compiler.compileAsync();
}
})().catch(err => {
logUtils.log(err);
process.exit(1);

258
packages/sol-compiler/src/compiler.ts
View File

@@ -6,26 +6,29 @@ import {
NPMResolver,
RelativeFSResolver,
Resolver,
SpyResolver,
URLResolver,
} from '@0x/sol-resolver';
import { fetchAsync, logUtils } from '@0x/utils';
import chalk from 'chalk';
import { logUtils } from '@0x/utils';
import * as chokidar from 'chokidar';
import { CompilerOptions, ContractArtifact, ContractVersionData, StandardOutput } from 'ethereum-types';
import * as ethUtil from 'ethereumjs-util';
import * as fs from 'fs';
import * as _ from 'lodash';
import * as path from 'path';
import * as requireFromString from 'require-from-string';
import * as pluralize from 'pluralize';
import * as semver from 'semver';
import solc = require('solc');
import { compilerOptionsSchema } from './schemas/compiler_options_schema';
import { binPaths } from './solc/bin_paths';
import {
addHexPrefixToContractBytecode,
compile,
createDirIfDoesNotExistAsync,
getContractArtifactIfExistsAsync,
getNormalizedErrMsg,
parseDependencies,
getSolcAsync,
getSourcesWithDependencies,
getSourceTreeHash,
parseSolidityVersionRange,
} from './utils/compiler';
import { constants } from './utils/constants';
@@ -35,7 +38,6 @@ import { utils } from './utils/utils';
type TYPE_ALL_FILES_IDENTIFIER = '*';
const ALL_CONTRACTS_IDENTIFIER = '*';
const ALL_FILES_IDENTIFIER = '*';
const SOLC_BIN_DIR = path.join(__dirname, '..', '..', 'solc_bin');
const DEFAULT_CONTRACTS_DIR = path.resolve('contracts');
const DEFAULT_ARTIFACTS_DIR = path.resolve('artifacts');
// Solc compiler settings cannot be configured from the commandline.
@@ -82,49 +84,6 @@ export class Compiler {
private readonly _artifactsDir: string;
private readonly _solcVersionIfExists: string | undefined;
private readonly _specifiedContracts: string[] | TYPE_ALL_FILES_IDENTIFIER;
private static async _getSolcAsync(
solcVersion: string,
): Promise<{ solcInstance: solc.SolcInstance; fullSolcVersion: string }> {
const fullSolcVersion = binPaths[solcVersion];
if (_.isUndefined(fullSolcVersion)) {
throw new Error(`${solcVersion} is not a known compiler version`);
}
const compilerBinFilename = path.join(SOLC_BIN_DIR, fullSolcVersion);
let solcjs: string;
if (await fsWrapper.doesFileExistAsync(compilerBinFilename)) {
solcjs = (await fsWrapper.readFileAsync(compilerBinFilename)).toString();
} else {
logUtils.warn(`Downloading ${fullSolcVersion}...`);
const url = `${constants.BASE_COMPILER_URL}${fullSolcVersion}`;
const response = await fetchAsync(url);
const SUCCESS_STATUS = 200;
if (response.status !== SUCCESS_STATUS) {
throw new Error(`Failed to load ${fullSolcVersion}`);
}
solcjs = await response.text();
await fsWrapper.writeFileAsync(compilerBinFilename, solcjs);
}
if (solcjs.length === 0) {
throw new Error('No compiler available');
}
const solcInstance = solc.setupMethods(requireFromString(solcjs, compilerBinFilename));
return { solcInstance, fullSolcVersion };
}
private static _addHexPrefixToContractBytecode(compiledContract: solc.StandardContractOutput): void {
if (!_.isUndefined(compiledContract.evm)) {
if (!_.isUndefined(compiledContract.evm.bytecode) && !_.isUndefined(compiledContract.evm.bytecode.object)) {
compiledContract.evm.bytecode.object = ethUtil.addHexPrefix(compiledContract.evm.bytecode.object);
}
if (
!_.isUndefined(compiledContract.evm.deployedBytecode) &&
!_.isUndefined(compiledContract.evm.deployedBytecode.object)
) {
compiledContract.evm.deployedBytecode.object = ethUtil.addHexPrefix(
compiledContract.evm.deployedBytecode.object,
);
}
}
}
/**
* Instantiates a new instance of the Compiler class.
* @param opts Optional compiler options
@@ -158,7 +117,7 @@ export class Compiler {
*/
public async compileAsync(): Promise<void> {
await createDirIfDoesNotExistAsync(this._artifactsDir);
await createDirIfDoesNotExistAsync(SOLC_BIN_DIR);
await createDirIfDoesNotExistAsync(constants.SOLC_BIN_DIR);
await this._compileContractsAsync(this._getContractNamesToCompile(), true);
}
/**
@@ -173,6 +132,54 @@ export class Compiler {
const promisedOutputs = this._compileContractsAsync(this._getContractNamesToCompile(), false);
return promisedOutputs;
}
public async watchAsync(): Promise<void> {
console.clear(); // tslint:disable-line:no-console
logUtils.logWithTime('Starting compilation in watch mode...');
const MATCH_NOTHING_REGEX = '^$';
const IGNORE_DOT_FILES_REGEX = /(^|[\/\\])\../;
// Initially we watch nothing. We'll add the paths later.
const watcher = chokidar.watch(MATCH_NOTHING_REGEX, { ignored: IGNORE_DOT_FILES_REGEX });
const onFileChangedAsync = async () => {
watcher.unwatch('*'); // Stop watching
try {
await this.compileAsync();
logUtils.logWithTime('Found 0 errors. Watching for file changes.');
} catch (err) {
if (err.typeName === 'CompilationError') {
logUtils.logWithTime(
`Found ${err.errorsCount} ${pluralize('error', err.errorsCount)}. Watching for file changes.`,
);
} else {
logUtils.logWithTime('Found errors. Watching for file changes.');
}
}
const pathsToWatch = this._getPathsToWatch();
watcher.add(pathsToWatch);
};
await onFileChangedAsync();
watcher.on('change', (changedFilePath: string) => {
console.clear(); // tslint:disable-line:no-console
logUtils.logWithTime('File change detected. Starting incremental compilation...');
// NOTE: We can't await it here because that's a callback.
// Instead we stop watching inside of it and start it again when we're finished.
onFileChangedAsync(); // tslint:disable-line no-floating-promises
});
}
private _getPathsToWatch(): string[] {
const contractNames = this._getContractNamesToCompile();
const spyResolver = new SpyResolver(this._resolver);
for (const contractName of contractNames) {
const contractSource = spyResolver.resolve(contractName);
// NOTE: We ignore the return value here. We don't want to compute the source tree hash.
// We just want to call a SpyResolver on each contracts and it's dependencies and
// this is a convenient way to reuse the existing code that does that.
// We can then get all the relevant paths from the `spyResolver` below.
getSourceTreeHash(spyResolver, contractSource.path);
}
const pathsToWatch = _.uniq(spyResolver.resolvedContractSources.map(cs => cs.absolutePath));
return pathsToWatch;
}
private _getContractNamesToCompile(): string[] {
let contractNamesToCompile;
if (this._specifiedContracts === ALL_CONTRACTS_IDENTIFIER) {
@@ -201,12 +208,14 @@ export class Compiler {
for (const contractName of contractNames) {
const contractSource = this._resolver.resolve(contractName);
const sourceTreeHashHex = getSourceTreeHash(
this._resolver,
path.join(this._contractsDir, contractSource.path),
).toString('hex');
const contractData = {
contractName,
currentArtifactIfExists: await getContractArtifactIfExistsAsync(this._artifactsDir, contractName),
sourceTreeHashHex: `0x${this._getSourceTreeHash(
path.join(this._contractsDir, contractSource.path),
).toString('hex')}`,
sourceTreeHashHex: `0x${sourceTreeHashHex}`,
};
if (!this._shouldCompile(contractData)) {
continue;
@@ -244,9 +253,8 @@ export class Compiler {
}) with Solidity v${solcVersion}...`,
);
const { solcInstance, fullSolcVersion } = await Compiler._getSolcAsync(solcVersion);
const compilerOutput = this._compile(solcInstance, input.standardInput);
const { solcInstance, fullSolcVersion } = await getSolcAsync(solcVersion);
const compilerOutput = compile(this._resolver, solcInstance, input.standardInput);
compilerOutputs.push(compilerOutput);
for (const contractPath of input.contractsToCompile) {
@@ -259,7 +267,7 @@ export class Compiler {
);
}
Compiler._addHexPrefixToContractBytecode(compiledContract);
addHexPrefixToContractBytecode(compiledContract);
if (shouldPersist) {
await this._persistCompiledContractAsync(
@@ -298,10 +306,14 @@ export class Compiler {
const compiledContract = compilerOutput.contracts[contractPath][contractName];
// need to gather sourceCodes for this artifact, but compilerOutput.sources (the list of contract modules)
// contains listings for for every contract compiled during the compiler invocation that compiled the contract
// contains listings for every contract compiled during the compiler invocation that compiled the contract
// to be persisted, which could include many that are irrelevant to the contract at hand. So, gather up only
// the relevant sources:
const { sourceCodes, sources } = this._getSourcesWithDependencies(contractPath, compilerOutput.sources);
const { sourceCodes, sources } = getSourcesWithDependencies(
this._resolver,
contractPath,
compilerOutput.sources,
);
const contractVersion: ContractVersionData = {
compilerOutput: compiledContract,
@@ -336,130 +348,4 @@ export class Compiler {
await fsWrapper.writeFileAsync(currentArtifactPath, artifactString);
logUtils.warn(`${contractName} artifact saved!`);
}
/**
* For the given @param contractPath, populates JSON objects to be used in the ContractVersionData interface's
* properties `sources` (source code file names mapped to ID numbers) and `sourceCodes` (source code content of
* contracts) for that contract. The source code pointed to by contractPath is read and parsed directly (via
* `this._resolver.resolve().source`), as are its imports, recursively. The ID numbers for @return `sources` are
* taken from the corresponding ID's in @param fullSources, and the content for @return sourceCodes is read from
* disk (via the aforementioned `resolver.source`).
*/
private _getSourcesWithDependencies(
contractPath: string,
fullSources: { [sourceName: string]: { id: number } },
): { sourceCodes: { [sourceName: string]: string }; sources: { [sourceName: string]: { id: number } } } {
const sources = { [contractPath]: { id: fullSources[contractPath].id } };
const sourceCodes = { [contractPath]: this._resolver.resolve(contractPath).source };
this._recursivelyGatherDependencySources(
contractPath,
sourceCodes[contractPath],
fullSources,
sources,
sourceCodes,
);
return { sourceCodes, sources };
}
private _recursivelyGatherDependencySources(
contractPath: string,
contractSource: string,
fullSources: { [sourceName: string]: { id: number } },
sourcesToAppendTo: { [sourceName: string]: { id: number } },
sourceCodesToAppendTo: { [sourceName: string]: string },
): void {
const importStatementMatches = contractSource.match(/\nimport[^;]*;/g);
if (importStatementMatches === null) {
return;
}
for (const importStatementMatch of importStatementMatches) {
const importPathMatches = importStatementMatch.match(/\"([^\"]*)\"/);
if (importPathMatches === null || importPathMatches.length === 0) {
continue;
}
let importPath = importPathMatches[1];
// HACK(ablrow): We have, e.g.:
//
// importPath = "../../utils/LibBytes/LibBytes.sol"
// contractPath = "2.0.0/protocol/AssetProxyOwner/AssetProxyOwner.sol"
//
// Resolver doesn't understand "../" so we want to pass
// "2.0.0/utils/LibBytes/LibBytes.sol" to resolver.
//
// This hack involves using path.resolve. But path.resolve returns
// absolute directories by default. We trick it into thinking that
// contractPath is a root directory by prepending a '/' and then
// removing the '/' the end.
//
// path.resolve("/a/b/c", ""../../d/e") === "/a/d/e"
//
const lastPathSeparatorPos = contractPath.lastIndexOf('/');
const contractFolder = lastPathSeparatorPos === -1 ? '' : contractPath.slice(0, lastPathSeparatorPos + 1);
if (importPath.startsWith('.')) {
/**
* Some imports path are relative ("../Token.sol", "./Wallet.sol")
* while others are absolute ("Token.sol", "@0x/contracts/Wallet.sol")
* And we need to append the base path for relative imports.
*/
importPath = path.resolve(`/${contractFolder}`, importPath).replace('/', '');
}
if (_.isUndefined(sourcesToAppendTo[importPath])) {
sourcesToAppendTo[importPath] = { id: fullSources[importPath].id };
sourceCodesToAppendTo[importPath] = this._resolver.resolve(importPath).source;
this._recursivelyGatherDependencySources(
importPath,
this._resolver.resolve(importPath).source,
fullSources,
sourcesToAppendTo,
sourceCodesToAppendTo,
);
}
}
}
private _compile(solcInstance: solc.SolcInstance, standardInput: solc.StandardInput): solc.StandardOutput {
const compiled: solc.StandardOutput = JSON.parse(
solcInstance.compileStandardWrapper(JSON.stringify(standardInput), importPath => {
const sourceCodeIfExists = this._resolver.resolve(importPath);
return { contents: sourceCodeIfExists.source };
}),
);
if (!_.isUndefined(compiled.errors)) {
const SOLIDITY_WARNING = 'warning';
const errors = _.filter(compiled.errors, entry => entry.severity !== SOLIDITY_WARNING);
const warnings = _.filter(compiled.errors, entry => entry.severity === SOLIDITY_WARNING);
if (!_.isEmpty(errors)) {
errors.forEach(error => {
const normalizedErrMsg = getNormalizedErrMsg(error.formattedMessage || error.message);
logUtils.warn(chalk.red(normalizedErrMsg));
});
throw new Error('Compilation errors encountered');
} else {
warnings.forEach(warning => {
const normalizedWarningMsg = getNormalizedErrMsg(warning.formattedMessage || warning.message);
logUtils.warn(chalk.yellow(normalizedWarningMsg));
});
}
}
return compiled;
}
/**
* Gets the source tree hash for a file and its dependencies.
* @param fileName Name of contract file.
*/
private _getSourceTreeHash(importPath: string): Buffer {
const contractSource = this._resolver.resolve(importPath);
const dependencies = parseDependencies(contractSource);
const sourceHash = ethUtil.sha3(contractSource.source);
if (dependencies.length === 0) {
return sourceHash;
} else {
const dependencySourceTreeHashes = _.map(dependencies, (dependency: string) =>
this._getSourceTreeHash(dependency),
);
const sourceTreeHashesBuffer = Buffer.concat([sourceHash, ...dependencySourceTreeHashes]);
const sourceTreeHash = ethUtil.sha3(sourceTreeHashesBuffer);
return sourceTreeHash;
}
}
}

217
packages/sol-compiler/src/utils/compiler.ts
View File

@@ -1,10 +1,18 @@
import { ContractSource } from '@0x/sol-resolver';
import { logUtils } from '@0x/utils';
import { ContractSource, Resolver } from '@0x/sol-resolver';
import { fetchAsync, logUtils } from '@0x/utils';
import chalk from 'chalk';
import { ContractArtifact } from 'ethereum-types';
import * as ethUtil from 'ethereumjs-util';
import * as _ from 'lodash';
import * as path from 'path';
import * as requireFromString from 'require-from-string';
import * as solc from 'solc';
import { binPaths } from '../solc/bin_paths';
import { constants } from './constants';
import { fsWrapper } from './fs_wrapper';
import { CompilationError } from './types';
/**
* Gets contract data on network or returns if an artifact does not exist.
@@ -106,3 +114,208 @@ export function parseDependencies(contractSource: ContractSource): string[] {
});
return dependencies;
}
/**
* Compiles the contracts and prints errors/warnings
* @param resolver Resolver
* @param solcInstance Instance of a solc compiler
* @param standardInput Solidity standard JSON input
*/
export function compile(
resolver: Resolver,
solcInstance: solc.SolcInstance,
standardInput: solc.StandardInput,
): solc.StandardOutput {
const standardInputStr = JSON.stringify(standardInput);
const standardOutputStr = solcInstance.compileStandardWrapper(standardInputStr, importPath => {
const sourceCodeIfExists = resolver.resolve(importPath);
return { contents: sourceCodeIfExists.source };
});
const compiled: solc.StandardOutput = JSON.parse(standardOutputStr);
if (!_.isUndefined(compiled.errors)) {
printCompilationErrorsAndWarnings(compiled.errors);
}
return compiled;
}
/**
* Separates errors from warnings, formats the messages and prints them. Throws if there is any compilation error (not warning).
* @param solcErrors The errors field of standard JSON output that contains errors and warnings.
*/
function printCompilationErrorsAndWarnings(solcErrors: solc.SolcError[]): void {
const SOLIDITY_WARNING = 'warning';
const errors = _.filter(solcErrors, entry => entry.severity !== SOLIDITY_WARNING);
const warnings = _.filter(solcErrors, entry => entry.severity === SOLIDITY_WARNING);
if (!_.isEmpty(errors)) {
errors.forEach(error => {
const normalizedErrMsg = getNormalizedErrMsg(error.formattedMessage || error.message);
logUtils.log(chalk.red('error'), normalizedErrMsg);
});
throw new CompilationError(errors.length);
} else {
warnings.forEach(warning => {
const normalizedWarningMsg = getNormalizedErrMsg(warning.formattedMessage || warning.message);
logUtils.log(chalk.yellow('warning'), normalizedWarningMsg);
});
}
}
/**
* Gets the source tree hash for a file and its dependencies.
* @param fileName Name of contract file.
*/
export function getSourceTreeHash(resolver: Resolver, importPath: string): Buffer {
const contractSource = resolver.resolve(importPath);
const dependencies = parseDependencies(contractSource);
const sourceHash = ethUtil.sha3(contractSource.source);
if (dependencies.length === 0) {
return sourceHash;
} else {
const dependencySourceTreeHashes = _.map(dependencies, (dependency: string) =>
getSourceTreeHash(resolver, dependency),
);
const sourceTreeHashesBuffer = Buffer.concat([sourceHash, ...dependencySourceTreeHashes]);
const sourceTreeHash = ethUtil.sha3(sourceTreeHashesBuffer);
return sourceTreeHash;
}
}
/**
* For the given @param contractPath, populates JSON objects to be used in the ContractVersionData interface's
* properties `sources` (source code file names mapped to ID numbers) and `sourceCodes` (source code content of
* contracts) for that contract. The source code pointed to by contractPath is read and parsed directly (via
* `resolver.resolve().source`), as are its imports, recursively. The ID numbers for @return `sources` are
* taken from the corresponding ID's in @param fullSources, and the content for @return sourceCodes is read from
* disk (via the aforementioned `resolver.source`).
*/
export function getSourcesWithDependencies(
resolver: Resolver,
contractPath: string,
fullSources: { [sourceName: string]: { id: number } },
): { sourceCodes: { [sourceName: string]: string }; sources: { [sourceName: string]: { id: number } } } {
const sources = { [contractPath]: { id: fullSources[contractPath].id } };
const sourceCodes = { [contractPath]: resolver.resolve(contractPath).source };
recursivelyGatherDependencySources(
resolver,
contractPath,
sourceCodes[contractPath],
fullSources,
sources,
sourceCodes,
);
return { sourceCodes, sources };
}
function recursivelyGatherDependencySources(
resolver: Resolver,
contractPath: string,
contractSource: string,
fullSources: { [sourceName: string]: { id: number } },
sourcesToAppendTo: { [sourceName: string]: { id: number } },
sourceCodesToAppendTo: { [sourceName: string]: string },
): void {
const importStatementMatches = contractSource.match(/\nimport[^;]*;/g);
if (importStatementMatches === null) {
return;
}
for (const importStatementMatch of importStatementMatches) {
const importPathMatches = importStatementMatch.match(/\"([^\"]*)\"/);
if (importPathMatches === null || importPathMatches.length === 0) {
continue;
}
let importPath = importPathMatches[1];
// HACK(albrow): We have, e.g.:
//
// importPath = "../../utils/LibBytes/LibBytes.sol"
// contractPath = "2.0.0/protocol/AssetProxyOwner/AssetProxyOwner.sol"
//
// Resolver doesn't understand "../" so we want to pass
// "2.0.0/utils/LibBytes/LibBytes.sol" to resolver.
//
// This hack involves using path.resolve. But path.resolve returns
// absolute directories by default. We trick it into thinking that
// contractPath is a root directory by prepending a '/' and then
// removing the '/' the end.
//
// path.resolve("/a/b/c", ""../../d/e") === "/a/d/e"
//
const lastPathSeparatorPos = contractPath.lastIndexOf('/');
const contractFolder = lastPathSeparatorPos === -1 ? '' : contractPath.slice(0, lastPathSeparatorPos + 1);
if (importPath.startsWith('.')) {
/**
* Some imports path are relative ("../Token.sol", "./Wallet.sol")
* while others are absolute ("Token.sol", "@0x/contracts/Wallet.sol")
* And we need to append the base path for relative imports.
*/
importPath = path.resolve(`/${contractFolder}`, importPath).replace('/', '');
}
if (_.isUndefined(sourcesToAppendTo[importPath])) {
sourcesToAppendTo[importPath] = { id: fullSources[importPath].id };
sourceCodesToAppendTo[importPath] = resolver.resolve(importPath).source;
recursivelyGatherDependencySources(
resolver,
importPath,
resolver.resolve(importPath).source,
fullSources,
sourcesToAppendTo,
sourceCodesToAppendTo,
);
}
}
}
/**
* Gets the solidity compiler instance and full version name. If the compiler is already cached - gets it from FS,
* otherwise - fetches it and caches it.
* @param solcVersion The compiler version. e.g. 0.5.0
*/
export async function getSolcAsync(
solcVersion: string,
): Promise<{ solcInstance: solc.SolcInstance; fullSolcVersion: string }> {
const fullSolcVersion = binPaths[solcVersion];
if (_.isUndefined(fullSolcVersion)) {
throw new Error(`${solcVersion} is not a known compiler version`);
}
const compilerBinFilename = path.join(constants.SOLC_BIN_DIR, fullSolcVersion);
let solcjs: string;
if (await fsWrapper.doesFileExistAsync(compilerBinFilename)) {
solcjs = (await fsWrapper.readFileAsync(compilerBinFilename)).toString();
} else {
logUtils.warn(`Downloading ${fullSolcVersion}...`);
const url = `${constants.BASE_COMPILER_URL}${fullSolcVersion}`;
const response = await fetchAsync(url);
const SUCCESS_STATUS = 200;
if (response.status !== SUCCESS_STATUS) {
throw new Error(`Failed to load ${fullSolcVersion}`);
}
solcjs = await response.text();
await fsWrapper.writeFileAsync(compilerBinFilename, solcjs);
}
if (solcjs.length === 0) {
throw new Error('No compiler available');
}
const solcInstance = solc.setupMethods(requireFromString(solcjs, compilerBinFilename));
return { solcInstance, fullSolcVersion };
}
/**
* Solidity compiler emits the bytecode without a 0x prefix for a hex. This function fixes it if bytecode is present.
* @param compiledContract The standard JSON output section for a contract. Geth modified in place.
*/
export function addHexPrefixToContractBytecode(compiledContract: solc.StandardContractOutput): void {
if (!_.isUndefined(compiledContract.evm)) {
if (!_.isUndefined(compiledContract.evm.bytecode) && !_.isUndefined(compiledContract.evm.bytecode.object)) {
compiledContract.evm.bytecode.object = ethUtil.addHexPrefix(compiledContract.evm.bytecode.object);
}
if (
!_.isUndefined(compiledContract.evm.deployedBytecode) &&
!_.isUndefined(compiledContract.evm.deployedBytecode.object)
) {
compiledContract.evm.deployedBytecode.object = ethUtil.addHexPrefix(
compiledContract.evm.deployedBytecode.object,
);
}
}
}

3
packages/sol-compiler/src/utils/constants.ts
View File

@@ -1,5 +1,8 @@
import * as path from 'path';
export const constants = {
SOLIDITY_FILE_EXTENSION: '.sol',
BASE_COMPILER_URL: 'https://ethereum.github.io/solc-bin/bin/',
LATEST_ARTIFACT_VERSION: '2.0.0',
SOLC_BIN_DIR: path.join(__dirname, '..', '..', 'solc_bin'),
};

9
packages/sol-compiler/src/utils/types.ts
View File

@@ -29,3 +29,12 @@ export interface Token {
}
export type DoneCallback = (err?: Error) => void;
export class CompilationError extends Error {
public errorsCount: number;
public typeName = 'CompilationError';
constructor(errorsCount: number) {
super('Compilation errors encountered');
this.errorsCount = errorsCount;
}
}

6
packages/sol-compiler/test/compiler_utils_test.ts
View File

@@ -52,7 +52,7 @@ describe('Compiler utils', () => {
const source = await fsWrapper.readFileAsync(path, {
encoding: 'utf8',
});
const dependencies = parseDependencies({ source, path });
const dependencies = parseDependencies({ source, path, absolutePath: path });
const expectedDependencies = [
'zeppelin-solidity/contracts/token/ERC20/ERC20.sol',
'packages/sol-compiler/lib/test/fixtures/contracts/TokenTransferProxy.sol',
@@ -68,7 +68,7 @@ describe('Compiler utils', () => {
const source = await fsWrapper.readFileAsync(path, {
encoding: 'utf8',
});
expect(parseDependencies({ source, path })).to.be.deep.equal([
expect(parseDependencies({ source, path, absolutePath: path })).to.be.deep.equal([
'zeppelin-solidity/contracts/ownership/Ownable.sol',
'zeppelin-solidity/contracts/token/ERC20/ERC20.sol',
]);
@@ -77,7 +77,7 @@ describe('Compiler utils', () => {
it.skip('correctly parses commented out dependencies', async () => {
const path = '';
const source = `// import "./TokenTransferProxy.sol";`;
expect(parseDependencies({ path, source })).to.be.deep.equal([]);
expect(parseDependencies({ path, source, absolutePath: path })).to.be.deep.equal([]);
});
});
});

13
packages/sol-resolver/CHANGELOG.json
View File

@@ -1,4 +1,17 @@
[
{
"version": "1.2.1",
"changes": [
{
"note": "Add `absolutePath` to `ContractSource` type",
"pr": 1461
},
{
"note": "Add `SpyResolver` that records all resolved contracts data",
"pr": 1461
}
]
},
{
"version": "1.1.1",
"changes": [

1
packages/sol-resolver/src/index.ts
View File

@@ -5,5 +5,6 @@ export { NPMResolver } from './resolvers/npm_resolver';
export { FSResolver } from './resolvers/fs_resolver';
export { RelativeFSResolver } from './resolvers/relative_fs_resolver';
export { NameResolver } from './resolvers/name_resolver';
export { SpyResolver } from './resolvers/spy_resolver';
export { EnumerableResolver } from './resolvers/enumerable_resolver';
export { Resolver } from './resolvers/resolver';

5
packages/sol-resolver/src/resolvers/fs_resolver.ts
View File

@@ -9,10 +9,7 @@ export class FSResolver extends Resolver {
public resolveIfExists(importPath: string): ContractSource | undefined {
if (fs.existsSync(importPath) && fs.lstatSync(importPath).isFile()) {
const fileContent = fs.readFileSync(importPath).toString();
return {
source: fileContent,
path: importPath,
};
return { source: fileContent, path: importPath, absolutePath: importPath };
}
return undefined;
}

10
packages/sol-resolver/src/resolvers/name_resolver.ts
View File

@@ -20,10 +20,7 @@ export class NameResolver extends EnumerableResolver {
if (contractName === lookupContractName) {
const absoluteContractPath = path.join(this._contractsDir, filePath);
const source = fs.readFileSync(absoluteContractPath).toString();
contractSource = {
source,
path: filePath,
};
contractSource = { source, path: filePath, absolutePath: absoluteContractPath };
return true;
}
return undefined;
@@ -36,10 +33,7 @@ export class NameResolver extends EnumerableResolver {
const onFile = (filePath: string) => {
const absoluteContractPath = path.join(this._contractsDir, filePath);
const source = fs.readFileSync(absoluteContractPath).toString();
const contractSource = {
source,
path: filePath,
};
const contractSource = { source, path: filePath, absolutePath: absoluteContractPath };
contractSources.push(contractSource);
};
this._traverseContractsDir(this._contractsDir, onFile);

5
packages/sol-resolver/src/resolvers/npm_resolver.ts
View File

@@ -32,10 +32,7 @@ export class NPMResolver extends Resolver {
const lookupPath = path.join(currentPath, 'node_modules', packagePath, pathWithinPackage);
if (fs.existsSync(lookupPath) && fs.lstatSync(lookupPath).isFile()) {
const fileContent = fs.readFileSync(lookupPath).toString();
return {
source: fileContent,
path: lookupPath,
};
return { source: fileContent, path: importPath, absolutePath: lookupPath };
}
currentPath = path.dirname(currentPath);
}

7
packages/sol-resolver/src/resolvers/relative_fs_resolver.ts
View File

@@ -13,13 +13,10 @@ export class RelativeFSResolver extends Resolver {
}
// tslint:disable-next-line:prefer-function-over-method
public resolveIfExists(importPath: string): ContractSource | undefined {
const filePath = path.join(this._contractsDir, importPath);
const filePath = path.resolve(path.join(this._contractsDir, importPath));
if (fs.existsSync(filePath) && !fs.lstatSync(filePath).isDirectory()) {
const fileContent = fs.readFileSync(filePath).toString();
return {
source: fileContent,
path: importPath,
};
return { source: fileContent, path: importPath, absolutePath: filePath };
}
return undefined;
}

25
packages/sol-resolver/src/resolvers/spy_resolver.ts Normal file
View File

@@ -0,0 +1,25 @@
import * as _ from 'lodash';
import { ContractSource } from '../types';
import { Resolver } from './resolver';
/**
* This resolver is a passthrough proxy to any resolver that records all the resolved contracts sources.
* You can access them later using the `resolvedContractSources` public field.
*/
export class SpyResolver extends Resolver {
public resolvedContractSources: ContractSource[] = [];
private readonly _resolver: Resolver;
constructor(resolver: Resolver) {
super();
this._resolver = resolver;
}
public resolveIfExists(importPath: string): ContractSource | undefined {
const contractSourceIfExists = this._resolver.resolveIfExists(importPath);
if (!_.isUndefined(contractSourceIfExists)) {
this.resolvedContractSources.push(contractSourceIfExists);
}
return contractSourceIfExists;
}
}

5
packages/sol-resolver/src/resolvers/url_resolver.ts
View File

@@ -11,10 +11,7 @@ export class URLResolver extends Resolver {
if (importPath.startsWith(FILE_URL_PREXIF)) {
const filePath = importPath.substr(FILE_URL_PREXIF.length);
const fileContent = fs.readFileSync(filePath).toString();
return {
source: fileContent,
path: importPath,
};
return { source: fileContent, path: importPath, absolutePath: filePath };
}
return undefined;
}

1
packages/sol-resolver/src/types.ts
View File

@@ -1,6 +1,7 @@
export interface ContractSource {
source: string;
path: string;
absolutePath: string;
}
export interface ContractSources {

4
packages/types/src/index.ts
View File

@@ -243,6 +243,10 @@ export enum RevertReason {
AuctionNotStarted = 'AUCTION_NOT_STARTED',
AuctionInvalidBeginTime = 'INVALID_BEGIN_TIME',
InvalidAssetData = 'INVALID_ASSET_DATA',
// Balance Threshold Filter
InvalidOrBlockedExchangeSelector = 'INVALID_OR_BLOCKED_EXCHANGE_SELECTOR',
BalanceQueryFailed = 'BALANCE_QUERY_FAILED',
AtLeastOneAddressDoesNotMeetBalanceThreshold = 'AT_LEAST_ONE_ADDRESS_DOES_NOT_MEET_BALANCE_THRESHOLD',
}
export enum StatusCodes {

3
packages/typescript-typings/tsconfig.json
View File

@@ -3,5 +3,6 @@
"compilerOptions": {
"outDir": "lib",
"rootDir": "."
}
},
"include": ["types"]
}

9
packages/utils/CHANGELOG.json
View File

@@ -1,4 +1,13 @@
[
{
"version": "2.1.0",
"changes": [
{
"note": "Add `logWithTime` to `logUtils`",
"pr": 1461
}
]
},
{
"version": "2.0.8",
"changes": [

1
packages/utils/package.json
View File

@@ -49,6 +49,7 @@
"@types/node": "*",
"abortcontroller-polyfill": "^1.1.9",
"bignumber.js": "~4.1.0",
"chalk": "^2.4.1",
"detect-node": "2.0.3",
"ethereum-types": "^1.1.4",
"ethereumjs-util": "^5.1.1",

5
packages/utils/src/log_utils.ts
View File

@@ -1,3 +1,5 @@
import chalk from 'chalk';
export const logUtils = {
log(...args: any[]): void {
console.log(...args); // tslint:disable-line:no-console
@@ -5,4 +7,7 @@ export const logUtils = {
warn(...args: any[]): void {
console.warn(...args); // tslint:disable-line:no-console
},
logWithTime(arg: string): void {
logUtils.log(`[${chalk.gray(new Date().toLocaleTimeString())}] ${arg}`);
},
};

70
packages/website/ts/@next/components/animatedChatIcon.tsx
View File

@@ -4,28 +4,69 @@ import styled, { keyframes } from 'styled-components';
export const AnimatedChatIcon = () => (
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask30" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
<circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3"/>
<circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3" />
</mask>
<g mask="url(#mask30)">
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3" />
<Rays>
<path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M37 73.5L37 12M113 137.5L113 75" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M49.087 47.5264L92.574 4.03932" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M58.2793 145.814L101.766 102.327" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3" />
<path
vector-effect="non-scaling-stroke"
d="M37 73.5L37 12M113 137.5L113 75"
stroke="#00AE99"
stroke-width="3"
/>
<path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3" />
<path
vector-effect="non-scaling-stroke"
d="M49.087 47.5264L92.574 4.03932"
stroke="#00AE99"
stroke-width="3"
/>
<path
vector-effect="non-scaling-stroke"
d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335"
stroke="#00AE99"
stroke-width="3"
/>
<path
vector-effect="non-scaling-stroke"
d="M58.2793 145.814L101.766 102.327"
stroke="#00AE99"
stroke-width="3"
/>
</Rays>
<Bubble>
<path vector-effect="non-scaling-stroke" d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z" stroke="#00AE99" strokeWidth="3"/>
<path
vector-effect="non-scaling-stroke"
d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z"
stroke="#00AE99"
strokeWidth="3"
/>
</Bubble>
<Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
<Dot delay={4.4} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
<Dot delay={-4.6} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
<Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
<Dot
delay={4.4}
vector-effect="non-scaling-stroke"
cx="91"
cy="75"
r="4"
stroke="#00AE99"
strokeWidth="3"
/>
<Dot
delay={-4.6}
vector-effect="non-scaling-stroke"
cx="59"
cy="75"
r="4"
stroke="#00AE99"
strokeWidth="3"
/>
</g>
</svg>
);
@@ -57,6 +98,9 @@ const Rays = styled.g`
transform-origin: 50% 50%;
`;
const Dot = styled.circle<{ delay: number }>`
const Dot =
styled.circle <
{ delay: number } >
`
animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
`;

22
packages/website/ts/@next/components/animatedCompassIcon.tsx
View File

@@ -4,17 +4,21 @@ import styled, { keyframes } from 'styled-components';
export const AnimatedCompassIcon = () => (
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
<circle cx="75" cy="75" r="58" stroke="#00AE99" stroke-width="3"/>
<Needle d="M62.9792 62.9792L36.6447 113.355L87.0208 87.0208M62.9792 62.9792L113.355 36.6447L87.0208 87.0208M62.9792 62.9792L87.0208 87.0208" stroke="#00AE99" strokeWidth="3"/>
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3" />
<circle cx="75" cy="75" r="58" stroke="#00AE99" stroke-width="3" />
<Needle
d="M62.9792 62.9792L36.6447 113.355L87.0208 87.0208M62.9792 62.9792L113.355 36.6447L87.0208 87.0208M62.9792 62.9792L87.0208 87.0208"
stroke="#00AE99"
strokeWidth="3"
/>
<Dial>
<path d="M75 2V17M75 133V148" stroke="#00AE99" stroke-width="3"/>
<path d="M2 75L17 75M133 75L148 75" stroke="#00AE99" stroke-width="3"/>
<path d="M11.7801 38.5L24.7705 46M125.229 104L138.22 111.5" stroke="#00AE99" stroke-width="3"/>
<path d="M38.5001 11.7801L46.0001 24.7705M104 125.229L111.5 138.22" stroke="#00AE99" stroke-width="3"/>
<path d="M111.5 11.7801L104 24.7705M46 125.229L38.5 138.22" stroke="#00AE99" stroke-width="3"/>
<path d="M138.22 38.5L125.229 46M24.7705 104L11.7801 111.5" stroke="#00AE99" stroke-width="3"/>
<path d="M75 2V17M75 133V148" stroke="#00AE99" stroke-width="3" />
<path d="M2 75L17 75M133 75L148 75" stroke="#00AE99" stroke-width="3" />
<path d="M11.7801 38.5L24.7705 46M125.229 104L138.22 111.5" stroke="#00AE99" stroke-width="3" />
<path d="M38.5001 11.7801L46.0001 24.7705M104 125.229L111.5 138.22" stroke="#00AE99" stroke-width="3" />
<path d="M111.5 11.7801L104 24.7705M46 125.229L38.5 138.22" stroke="#00AE99" stroke-width="3" />
<path d="M138.22 38.5L125.229 46M24.7705 104L11.7801 111.5" stroke="#00AE99" stroke-width="3" />
</Dial>
</g>
</svg>

40
packages/website/ts/@next/components/blockIconLink.tsx
View File

@@ -1,9 +1,9 @@
import * as React from 'react';
import {withRouter} from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import {Button} from 'ts/@next/components/button';
import {Icon} from 'ts/@next/components/icon';
import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
interface Props {
icon?: string;
@@ -16,48 +16,26 @@ interface Props {
class BaseComponent extends React.PureComponent<Props> {
public onClick = (): void => {
const {
linkAction,
linkUrl,
} = this.props;
const { linkAction, linkUrl } = this.props;
if (linkAction) {
linkAction();
} else {
this.props.history.push(linkUrl);
}
}
};
public render(): React.ReactNode {
const {
icon,
iconComponent,
linkUrl,
linkAction,
title,
linkLabel,
} = this.props;
const { icon, iconComponent, linkUrl, linkAction, title, linkLabel } = this.props;
return (
<Wrap onClick={this.onClick}>
<div>
<Icon
name={icon}
component={iconComponent}
size="large"
margin={[0, 0, 'default', 0]}
/>
<Icon name={icon} component={iconComponent} size="large" margin={[0, 0, 'default', 0]} />
<Title>
{title}
</Title>
<Title>{title}</Title>
<Button
isWithArrow={true}
isTransparent={true}
href={linkUrl}
onClick={linkAction}
>
<Button isWithArrow={true} isTransparent={true} href={linkUrl} onClick={linkAction}>
{linkLabel}
</Button>
</div>

6
packages/website/ts/@next/components/button.tsx
View File

@@ -23,14 +23,14 @@ interface ButtonInterface {
to?: string;
onClick?: () => any;
theme?: ThemeInterface;
useAnchorTag?: boolean;
shouldUseAnchorTag?: boolean;
}
export const Button = (props: ButtonInterface) => {
const { children, href, isWithArrow, to, useAnchorTag, target } = props;
const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props;
let linkElem;
if (href || useAnchorTag) {
if (href || shouldUseAnchorTag) {
linkElem = 'a';
}
if (to) {

8
packages/website/ts/@next/components/definition.tsx
View File

@@ -9,7 +9,7 @@ interface Action {
label: string;
url?: string;
onClick?: () => void;
useAnchorTag?: boolean;
shouldUseAnchorTag?: boolean;
}
interface Props {
@@ -41,7 +41,9 @@ export const Definition = (props: Props) => (
</Heading>
{typeof props.description === 'string' ? (
<Paragraph isMuted={true} size={props.fontSize || 'default'}>{props.description}</Paragraph>
<Paragraph isMuted={true} size={props.fontSize || 'default'}>
{props.description}
</Paragraph>
) : (
<>{props.description}</>
)}
@@ -55,7 +57,7 @@ export const Definition = (props: Props) => (
onClick={item.onClick}
isWithArrow={true}
isAccentColor={true}
useAnchorTag={item.useAnchorTag}
shouldUseAnchorTag={item.shouldUseAnchorTag}
target="_blank"
>
{item.label}

1
packages/website/ts/@next/components/footer.tsx
View File

@@ -2,7 +2,6 @@ import { Link as SmartLink } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import MediaQuery from 'react-responsive';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { Logo } from 'ts/@next/components/logo';

9
packages/website/ts/@next/components/hamburger.tsx
View File

@@ -16,7 +16,10 @@ export const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
);
};
const StyledHamburger = styled.button<Props>`
const StyledHamburger =
styled.button <
Props >
`
background: none;
border: 0;
width: 22px;
@@ -50,7 +53,9 @@ const StyledHamburger = styled.button<Props>`
//transform-origin: 0% 100%;
}
${props => props.isOpen && `
${props =>
props.isOpen &&
`
opacity: 1;
transform: rotate(45deg) translate(0, 1px);

96
packages/website/ts/@next/components/hero.tsx
View File

@@ -1,7 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
import {addFadeInAnimation} from 'ts/@next/constants/animations';
import { addFadeInAnimation } from 'ts/@next/constants/animations';
interface Props {
title: string;
@@ -15,38 +15,6 @@ interface Props {
actions?: React.ReactNode;
}
export const Hero = (props: Props) => (
<Section>
<Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}>
{props.figure &&
<Content width="400px">
{props.figure}
</Content>
}
<Content width={props.maxWidth ? props.maxWidth : (props.figure ? '546px' : '678px')}>
<Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}>
{props.title}
</Title>
<Description>
{props.description}
</Description>
{props.actions &&
<ButtonWrap>
{props.actions}
</ButtonWrap>
}
</Content>
</Wrap>
</Section>
);
Hero.defaultProps = {
isCenteredMobile: true,
};
const Section = styled.section`
padding: 120px 0;
@@ -55,26 +23,41 @@ const Section = styled.section`
}
`;
const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean; isCenteredMobile?: boolean }>`
interface WrapProps {
isCentered?: boolean;
isFullWidth?: boolean;
isCenteredMobile?: boolean;
}
const Wrap =
styled.div <
WrapProps >
`
width: calc(100% - 60px);
margin: 0 auto;
@media (min-width: 768px) {
max-width: ${props => !props.isFullWidth ? '895px' : '1136px'};
max-width: ${props => (!props.isFullWidth ? '895px' : '1136px')};
flex-direction: row-reverse;
display: flex;
align-items: center;
text-align: ${props => props.isCentered && 'center'};
justify-content: ${props => props.isCentered ? 'center' : 'space-between'};
justify-content: ${props => (props.isCentered ? 'center' : 'space-between')};
}
@media (max-width: 768px) {
text-align: ${props => props.isCenteredMobile ? `center` : 'left'};
text-align: ${props => (props.isCenteredMobile ? `center` : 'left')};
}
`;
const Title = styled.h1<{ isLarge?: any; maxWidth?: string }>`
font-size: ${props => props.isLarge ? '80px' : '50px'};
interface TitleProps {
isLarge?: any;
maxWidth?: string;
}
const Title =
styled.h1 <
TitleProps >
`
font-size: ${props => (props.isLarge ? '80px' : '50px')};
font-weight: 300;
line-height: 1.1;
margin-left: auto;
@@ -99,14 +82,15 @@ const Description = styled.p`
padding: 0;
margin-bottom: 50px;
color: ${props => props.theme.introTextColor};
${addFadeInAnimation('0.5s', '0.15s')}
@media (max-width: 1024px) {
${addFadeInAnimation('0.5s', '0.15s')} @media (max-width: 1024px) {
margin-bottom: 30px;
}
`;
const Content = styled.div<{ width: string }>`
const Content =
styled.div <
{ width: string } >
`
width: 100%;
@media (min-width: 768px) {
@@ -123,10 +107,10 @@ const ButtonWrap = styled.div`
}
> *:nth-child(1) {
${addFadeInAnimation('0.6s', '0.3s')}
${addFadeInAnimation('0.6s', '0.3s')};
}
> *:nth-child(2) {
${addFadeInAnimation('0.6s', '0.4s')}
${addFadeInAnimation('0.6s', '0.4s')};
}
@media (max-width: 500px) {
@@ -144,3 +128,25 @@ const ButtonWrap = styled.div`
}
}
`;
export const Hero: React.StatelessComponent<Props> = (props: Props) => (
<Section>
<Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}>
{props.figure && <Content width="400px">{props.figure}</Content>}
<Content width={props.maxWidth ? props.maxWidth : props.figure ? '546px' : '678px'}>
<Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}>
{props.title}
</Title>
<Description>{props.description}</Description>
{props.actions && <ButtonWrap>{props.actions}</ButtonWrap>}
</Content>
</Wrap>
</Section>
);
Hero.defaultProps = {
isCenteredMobile: true,
};

47
packages/website/ts/@next/components/heroAnimation.tsx
View File

File diff suppressed because one or more lines are too long

6
packages/website/ts/@next/components/heroImage.tsx
View File

@@ -5,11 +5,7 @@ interface Props {
image: React.ReactNode;
}
export const LandingAnimation = (props: Props) => (
<Wrap>
{props.image}
</Wrap>
);
export const LandingAnimation = (props: Props) => <Wrap>{props.image}</Wrap>;
const Wrap = styled.figure`
display: inline-block;

22
packages/website/ts/@next/components/icon.tsx
View File

@@ -2,8 +2,8 @@ import * as React from 'react';
import Loadable from 'react-loadable';
import styled from 'styled-components';
import {Paragraph} from 'ts/@next/components/text';
import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
import { Paragraph } from 'ts/@next/components/text';
import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
interface IconProps extends PaddingInterface {
name?: string;
@@ -14,7 +14,7 @@ interface IconProps extends PaddingInterface {
export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
if (props.name && !props.component) {
const IconSVG = Loadable({
loader: async () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
loader: async () => import(/* webpackChunkName: "icon" */ `ts/@next/icons/illustrations/${props.name}.svg`),
loading: () => <Paragraph>Loading</Paragraph>,
});
@@ -26,17 +26,16 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
}
if (props.component) {
return (
<StyledIcon {...props}>
{props.component}
</StyledIcon>
);
return <StyledIcon {...props}>{props.component}</StyledIcon>;
}
return null;
};
export const InlineIconWrap = styled.div<PaddingInterface>`
export const InlineIconWrap =
styled.div <
PaddingInterface >
`
margin: ${props => getCSSPadding(props.margin)};
display: flex;
align-items: center;
@@ -55,7 +54,10 @@ const _getSize = (size: string | number = 'small'): string => {
return `${size}px`;
};
const StyledIcon = styled.figure<IconProps>`
const StyledIcon =
styled.figure <
IconProps >
`
width: ${props => _getSize(props.size)};
height: ${props => _getSize(props.size)};
margin: ${props => getCSSPadding(props.margin)};

9
packages/website/ts/@next/components/image.tsx
View File

@@ -9,11 +9,12 @@ interface Props {
}
const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
return (
<img {...props} />
);
return <img {...props} />;
};
export const Image = styled(ImageClass)<Props>`
export const Image =
styled(ImageClass) <
Props >
`
margin: ${props => props.isCentered && `0 auto`};
`;

39
packages/website/ts/@next/components/layout.tsx
View File

@@ -1,5 +1,5 @@
import styled from 'styled-components';
import {getCSSPadding, PADDING_SIZES, PaddingInterface} from 'ts/@next/constants/utilities';
import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/@next/constants/utilities';
interface WrapWidths {
default: string;
@@ -51,8 +51,8 @@ export interface WrapStickyInterface {
const _getColumnWidth = (args: GetColWidthArgs): string => {
const { span = 1, columns } = args;
const percentWidth = (span / columns) * 100;
const gutterDiff = (GUTTER * (columns - 1)) / columns;
const percentWidth = span / columns * 100;
const gutterDiff = GUTTER * (columns - 1) / columns;
return `calc(${percentWidth}% - ${gutterDiff}px)`;
};
@@ -87,8 +87,11 @@ export const Main = styled.main`
// passing a asElement (same patter nas Heading) so we dont have to
// make a const on every route to withComponent-size it.
// just <Section asElement?="div/section/footer/header/whatever" /> ?
export const Section = styled.section<SectionProps>`
width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
export const Section =
styled.section <
SectionProps >
`
width: ${props => (props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%')};
padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large}` : PADDING_SIZES.default)};
background-color: ${props => props.bgColor};
position: ${props => props.isRelative && 'relative'};
@@ -102,11 +105,15 @@ export const Section = styled.section<SectionProps>`
@media (max-width: ${BREAKPOINTS.mobile}) {
margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`};
padding: ${props => props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default};
padding: ${props =>
props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default};
}
`;
const WrapBase = styled.div<WrapProps>`
const WrapBase =
styled.div <
WrapProps >
`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
padding: ${props => props.padding && getCSSPadding(props.padding)};
background-color: ${props => props.bgColor};
@@ -130,7 +137,10 @@ export const WrapCentered = styled(WrapBase)`
text-align: center;
`;
export const WrapSticky = styled.div<WrapStickyInterface>`
export const WrapSticky =
styled.div <
WrapStickyInterface >
`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
@@ -138,16 +148,21 @@ export const WrapSticky = styled.div<WrapStickyInterface>`
export const WrapGrid = styled(WrapBase)`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => props.isCentered ? `center` : 'space-between'};
justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
`;
export const Column = styled.div<ColumnProps>`
export const Column =
styled.div <
ColumnProps >
`
background-color: ${props => props.bgColor};
flex-grow: ${props => props.isFlexGrow && 1};
@media (min-width: ${BREAKPOINTS.mobile}) {
padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
padding: ${props =>
!props.isNoPadding &&
(props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
width: ${props => (props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%')};
}
@media (max-width: ${BREAKPOINTS.mobile}) {

5
packages/website/ts/@next/components/logo.tsx
View File

@@ -23,7 +23,10 @@ const StyledLogo = styled.div`
}
`;
const Icon = styled(LogoIcon)<LogoInterface>`
const Icon =
styled(LogoIcon) <
LogoInterface >
`
flex-shrink: 0;
path {

17
packages/website/ts/@next/components/modals/input.tsx
View File

@@ -15,10 +15,6 @@ interface InputProps {
isErrors?: boolean;
}
interface LabelProps {
string: boolean;
}
interface ErrorProps {
[key: string]: string;
}
@@ -47,7 +43,7 @@ Input.defaultProps = {
const StyledInput = styled.input`
appearance: none;
background-color: #fff;
border: 1px solid #D5D5D5;
border: 1px solid #d5d5d5;
color: #000;
font-size: 1.294117647rem;
padding: 16px 15px 14px;
@@ -59,11 +55,14 @@ const StyledInput = styled.input`
border-color: ${(props: InputProps) => props.isErrors && `#FD0000`};
&::placeholder {
color: #C3C3C3;
color: #c3c3c3;
}
`;
const InputWrapper = styled.div<InputProps>`
const InputWrapper =
styled.div <
InputProps >
`
position: relative;
flex-grow: ${props => props.width === InputWidth.Full && 1};
width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`};
@@ -83,8 +82,8 @@ const Label = styled.label`
`;
const Error = styled.span`
color: #FD0000;
font-size: .833333333rem;
color: #fd0000;
font-size: 0.833333333rem;
line-height: 1em;
display: inline-block;
position: absolute;

5
packages/website/ts/@next/components/modals/modal_contact.tsx
View File

@@ -161,6 +161,8 @@ export class ModalContact extends React.Component<Props> {
this.setState({ ...this.state, errors: [], isSubmitting: true });
try {
// Disabling no-unbound method b/c no reason for _.isEmpty to be bound
// tslint:disable:no-unbound-method
const response = await fetch('https://website-api.0xproject.com/leads', {
method: 'post',
mode: 'cors',
@@ -185,6 +187,7 @@ export class ModalContact extends React.Component<Props> {
}
}
private _parseErrors(errors: ErrorResponseProps[]): ErrorProps {
const initialValue: {} = {};
return _.reduce(
errors,
(hash: ErrorProps, error: ErrorResponseProps) => {
@@ -194,7 +197,7 @@ export class ModalContact extends React.Component<Props> {
return hash;
},
{},
initialValue,
);
}
}

36
packages/website/ts/@next/components/newLayout.tsx
View File

@@ -49,14 +49,15 @@ export interface ColumnProps {
export const Section: React.FunctionComponent<SectionProps> = (props: SectionProps) => {
return (
<SectionBase {...props}>
<Wrap {...props}>
{props.children}
</Wrap>
<Wrap {...props}>{props.children}</Wrap>
</SectionBase>
);
};
export const Column = styled.div<ColumnProps>`
export const Column =
styled.div <
ColumnProps >
`
width: ${props => props.width};
max-width: ${props => props.maxWidth};
padding: ${props => props.padding};
@@ -70,7 +71,10 @@ export const Column = styled.div<ColumnProps>`
}
`;
export const FlexWrap = styled.div<FlexProps>`
export const FlexWrap =
styled.div <
FlexProps >
`
max-width: 1500px;
margin: 0 auto;
padding: ${props => props.padding};
@@ -81,12 +85,18 @@ export const FlexWrap = styled.div<FlexProps>`
}
`;
export const WrapSticky = styled.div<WrapProps>`
export const WrapSticky =
styled.div <
WrapProps >
`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
const SectionBase = styled.section<SectionProps>`
const SectionBase =
styled.section <
SectionProps >
`
width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
max-width: 1500px;
margin: 0 auto;
@@ -100,7 +110,10 @@ const SectionBase = styled.section<SectionProps>`
}
`;
const Wrap = styled(FlexWrap)<WrapProps>`
const Wrap =
styled(FlexWrap) <
WrapProps >
`
width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
width: ${props => props.bgColor && 'calc(100% - 60px)'};
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
@@ -108,10 +121,13 @@ const Wrap = styled(FlexWrap)<WrapProps>`
margin: 0 auto;
`;
export const WrapGrid = styled(Wrap)<WrapProps>`
export const WrapGrid =
styled(Wrap) <
WrapProps >
`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => props.isCentered ? `center` : 'space-between'};
justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
@media (max-width: 768px) {
width: 100%;

2
packages/website/ts/@next/components/newsletter_form.tsx
View File

@@ -91,7 +91,7 @@ class Form extends React.Component<FormProps> {
}
try {
const response = await fetch('https://website-api.0x.org/newsletter_subscriber/substack', {
await fetch('https://website-api.0x.org/newsletter_subscriber/substack', {
method: 'post',
mode: 'cors',
headers: {

10
packages/website/ts/@next/components/sections/landing/about.tsx
View File

@@ -57,11 +57,11 @@ const Figure = (props: FigureProps) => (
);
const DeveloperLink = styled(Button)`
@media (max-width: 500px) {
&& {
white-space: pre-wrap;
line-height: 1.3;
}
@media (max-width: 500px) {
&& {
white-space: pre-wrap;
line-height: 1.3;
}
}
`;

18
packages/website/ts/@next/components/sections/landing/clients.tsx
View File

@@ -1,9 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import {Heading} from 'ts/@next/components/text';
import { Heading } from 'ts/@next/components/text';
import {Section, WrapGrid} from 'ts/@next/components/newLayout';
import { Section, WrapGrid } from 'ts/@next/components/newLayout';
interface ProjectLogo {
name: string;
@@ -58,16 +58,11 @@ const projects: ProjectLogo[] = [
export const SectionLandingClients = () => (
<Section isTextCentered={true}>
<Heading size="small">
Join the growing number of projects developing on 0x
</Heading>
<Heading size="small">Join the growing number of projects developing on 0x</Heading>
<WrapGrid isWrapped={true}>
{_.map(projects, (item: ProjectLogo, index) => (
<StyledProject
key={`client-${index}`}
isOnMobile={item.persistOnMobile}
>
<StyledProject key={`client-${index}`} isOnMobile={item.persistOnMobile}>
<img src={item.imageUrl} alt={item.name} />
</StyledProject>
))}
@@ -75,7 +70,10 @@ export const SectionLandingClients = () => (
</Section>
);
const StyledProject = styled.div<StyledProjectInterface>`
const StyledProject =
styled.div <
StyledProjectInterface >
`
flex-shrink: 0;
img {

8
packages/website/ts/@next/components/sections/landing/hero.tsx
View File

@@ -1,10 +1,10 @@
import * as React from 'react';
import {Button} from 'ts/@next/components/button';
import {Hero} from 'ts/@next/components/hero';
import {LandingAnimation} from 'ts/@next/components/heroImage';
import { Button } from 'ts/@next/components/button';
import { Hero } from 'ts/@next/components/hero';
import { LandingAnimation } from 'ts/@next/components/heroImage';
import {HeroAnimation} from 'ts/@next/components/heroAnimation';
import { HeroAnimation } from 'ts/@next/components/heroAnimation';
import { WebsitePaths } from 'ts/types';
export const SectionLandingHero = () => (

2
packages/website/ts/@next/components/separator.tsx
View File

@@ -1,7 +1,7 @@
import styled from 'styled-components';
export const Separator = styled.hr`
background: #EAEAEA;
background: #eaeaea;
height: 1px;
border: 0;
`;

23
packages/website/ts/@next/components/siteWrap.tsx
View File

@@ -115,13 +115,10 @@ export class SiteWrap extends React.Component<Props, State> {
this.setState({
isMobileNavOpen: !this.state.isMobileNavOpen,
});
}
};
public render(): React.ReactNode {
const {
children,
theme = 'dark',
} = this.props;
const { children, theme = 'dark' } = this.props;
const { isMobileNavOpen } = this.state;
const currentTheme = GLOBAL_THEMES[theme];
@@ -131,16 +128,11 @@ export class SiteWrap extends React.Component<Props, State> {
<>
<GlobalStyles />
<Header
isNavToggled={isMobileNavOpen}
toggleMobileNav={this.toggleMobileNav}
/>
<Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} />
<Main isNavToggled={isMobileNavOpen}>
{children}
</Main>
<Main isNavToggled={isMobileNavOpen}>{children}</Main>
<Footer/>
<Footer />
</>
</ThemeProvider>
</>
@@ -148,7 +140,10 @@ export class SiteWrap extends React.Component<Props, State> {
}
}
const Main = styled.main<MainProps>`
const Main =
styled.main <
MainProps >
`
transition: transform 0.5s, opacity 0.5s;
opacity: ${props => props.isNavToggled && '0.5'};
`;

14
packages/website/ts/@next/components/slider/slider.tsx
View File

@@ -7,8 +7,7 @@ import { colors } from 'ts/style/colors';
import { Icon } from 'ts/@next/components/icon';
import { Heading, Paragraph } from 'ts/@next/components/text';
interface SliderProps {
}
interface SliderProps {}
interface SlideProps {
icon: string;
@@ -20,7 +19,8 @@ interface SlideProps {
const flickityOptions = {
initialIndex: 0,
cellAlign: 'left',
arrowShape: 'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z',
arrowShape:
'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z',
prevNextButtons: true,
};
@@ -33,7 +33,9 @@ export const Slide: React.StatelessComponent<SlideProps> = (props: SlideProps) =
<Icon name={icon} size="large" />
</SlideHead>
<SlideContent>
<Heading asElement="h4" size="small" marginBottom="15px">{heading}</Heading>
<Heading asElement="h4" size="small" marginBottom="15px">
{heading}
</Heading>
<Paragraph isMuted={true}>{text}</Paragraph>
</SlideContent>
</StyledSlide>
@@ -93,7 +95,7 @@ const StyledSlider = styled.div`
top: calc(50% - 37px);
border: 0;
padding: 0;
transition: background-color .40s ease-in-out, visibility .40s ease-in-out, opacity .40s ease-in-out;
transition: background-color 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out;
&:disabled {
opacity: 0;
@@ -130,7 +132,7 @@ const StyledSlide = styled.div`
height: 520px;
flex: 0 0 auto;
opacity: 0.3;
transition: opacity .40s ease-in-out;
transition: opacity 0.4s ease-in-out;
& + & {
margin-left: 30px;

38
packages/website/ts/@next/components/text.tsx
View File

@@ -1,6 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
interface BaseTextInterface extends PaddingInterface {
size?: 'default' | 'medium' | 'large' | 'small' | number;
@@ -9,7 +9,7 @@ interface BaseTextInterface extends PaddingInterface {
}
interface HeadingProps extends BaseTextInterface {
asElement?: 'h1'| 'h2'| 'h3'| 'h4';
asElement?: 'h1' | 'h2' | 'h3' | 'h4';
maxWidth?: string;
fontWeight?: string;
isCentered?: boolean;
@@ -27,38 +27,33 @@ interface ParagraphProps extends BaseTextInterface {
fontWeight?: string | number;
}
const StyledHeading = styled.h1<HeadingProps>`
const StyledHeading =
styled.h1 <
HeadingProps >
`
max-width: ${props => props.maxWidth};
color: ${props => props.color || props.theme.textColor};
display: ${props => props.isFlex && `inline-flex`};
align-items: center;
justify-content: ${props => props.isFlex && `space-between`};
font-size: ${props => typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
font-size: ${props =>
typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
text-align: ${props => props.isCentered && 'center'};
padding: ${props => props.padding && getCSSPadding(props.padding)};
margin-left: ${props => props.isCentered && 'auto'};
margin-right: ${props => props.isCentered && 'auto'};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
font-weight: ${props => props.fontWeight ? props.fontWeight : (['h4'].includes(props.asElement) ? 400 : 300)};
opacity: ${props => (typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted)};
font-weight: ${props => (props.fontWeight ? props.fontWeight : ['h4'].includes(props.asElement) ? 400 : 300)};
width: ${props => props.isFlex && `100%`};
`;
export const Heading: React.StatelessComponent<HeadingProps> = props => {
const {
asElement = 'h1',
children,
} = props;
const { asElement = 'h1', children } = props;
const Component = StyledHeading.withComponent(asElement);
return (
<Component
{...props}
>
{children}
</Component>
);
return <Component {...props}>{children}</Component>;
};
Heading.defaultProps = {
@@ -69,14 +64,17 @@ Heading.defaultProps = {
// Note: this would be useful to be implemented the same way was "Heading"
// and be more generic. e.g. <Text /> with a props asElement so we can use it
// for literally anything =
export const Paragraph = styled.p<ParagraphProps>`
export const Paragraph =
styled.p <
ParagraphProps >
`
font-size: ${props => `var(--${props.size || 'default'}Paragraph)`};
font-weight: ${props => props.fontWeight || 300};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
padding: ${props => props.padding && getCSSPadding(props.padding)};
color: ${props => props.color || props.theme.paragraphColor};
opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
text-align: ${props => props.textAlign ? props.textAlign : props.isCentered && 'center'};
opacity: ${props => (typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted)};
text-align: ${props => (props.textAlign ? props.textAlign : props.isCentered && 'center')};
line-height: 1.4;
`;

12
packages/website/ts/@next/constants/globalStyle.tsx
View File

@@ -1,5 +1,5 @@
import {createGlobalStyle, withTheme} from 'styled-components';
import {cssReset} from 'ts/@next/constants/cssReset';
import { createGlobalStyle, withTheme } from 'styled-components';
import { cssReset } from 'ts/@next/constants/cssReset';
export interface GlobalStyle {
theme: {
@@ -10,7 +10,10 @@ export interface GlobalStyle {
};
}
const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
const GlobalStyles = withTheme(
createGlobalStyle <
GlobalStyle >
`
${cssReset};
html {
@@ -100,6 +103,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
img + p {
padding-top: 30px;
}
`);
`,
);
export { GlobalStyles };

6
packages/website/ts/@next/constants/utilities.tsx
View File

@@ -8,9 +8,9 @@ interface PaddingSizes {
}
export const PADDING_SIZES: PaddingSizes = {
'default': '30px',
'large': '60px',
'small': '15px',
default: '30px',
large: '60px',
small: '15px',
};
export const getCSSPadding = (value: number | Array<string | number> = 0): string => {

61
packages/website/ts/@next/pages/community.tsx
View File

@@ -98,14 +98,12 @@ export class NextCommunity extends React.Component {
Community
</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
The 0x community is a global, passionate group of crypto developers and enthusiasts. The official channels below provide a great forum for connecting and engaging with the community.
The 0x community is a global, passionate group of crypto developers and enthusiasts. The
official channels below provide a great forum for connecting and engaging with the
community.
</Paragraph>
<LinkWrap>
<Button
to="#"
isWithArrow={true}
isAccentColor={true}
>
<Button to="#" isWithArrow={true} isAccentColor={true}>
Join the 0x community
</Button>
</LinkWrap>
@@ -113,7 +111,13 @@ export class NextCommunity extends React.Component {
</Section>
<Section isFullWidth={true}>
<WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1151px">
<WrapGrid
isTextCentered={true}
isWrapped={true}
isFullWidth={false}
isCentered={false}
maxWidth="1151px"
>
{_.map(communityLinks, (link: CommunityLinkProps, index: number) => (
<CommunityLink
key={`cl-${index}`}
@@ -126,32 +130,37 @@ export class NextCommunity extends React.Component {
</WrapGrid>
</Section>
<EventsWrapper bgColor={colors.backgroundLight} isFullWidth={true} isCentered={true} isTextCentered={true}>
<EventsWrapper
bgColor={colors.backgroundLight}
isFullWidth={true}
isCentered={true}
isTextCentered={true}
>
<Column maxWidth="720px">
<Heading size="medium" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="30px">
Upcoming Events
</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true}>
0x meetups happen all over the world on a monthly basis and are hosted by devoted members of the community. Want to host a meetup in your city? Reach out for help finding a venue, connecting with local 0x mentors, and promoting your events.
0x meetups happen all over the world on a monthly basis and are hosted by devoted members of
the community. Want to host a meetup in your city? Reach out for help finding a venue,
connecting with local 0x mentors, and promoting your events.
</Paragraph>
<LinkWrap>
<Button
to="#"
isWithArrow={true}
isAccentColor={true}
>
<Button to="#" isWithArrow={true} isAccentColor={true}>
Get in Touch
</Button>
<Button
to="#"
isWithArrow={true}
isAccentColor={true}
>
<Button to="#" isWithArrow={true} isAccentColor={true}>
Join Newsletter
</Button>
</LinkWrap>
</Column>
<WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1149px">
<WrapGrid
isTextCentered={true}
isWrapped={true}
isFullWidth={false}
isCentered={false}
maxWidth="1149px"
>
{_.map(events, (ev: EventProps, index: number) => (
<Event
key={`event-${index}`}
@@ -177,17 +186,17 @@ export class NextCommunity extends React.Component {
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}
const Event: React.FunctionComponent<EventProps> = (event: EventProps) => (
<StyledEvent>
<EventIcon name="logo-mark" size={30} margin={0} />
<EventImage src={event.imageUrl} alt=""/>
<EventImage src={event.imageUrl} alt="" />
<EventContent>
<Heading color={colors.white} size="small" marginBottom="0">
{event.title}
@@ -195,11 +204,7 @@ const Event: React.FunctionComponent<EventProps> = (event: EventProps) => (
<Paragraph color={colors.white} isMuted={0.65}>
{event.date}
</Paragraph>
<Button
color={colors.white}
href={event.signupUrl}
isWithArrow={true}
>
<Button color={colors.white} href={event.signupUrl} isWithArrow={true}>
Sign Up
</Button>
</EventContent>

4
packages/website/ts/@next/pages/ecosystem.tsx
View File

@@ -69,7 +69,7 @@ export const NextEcosystem = () => (
href={constants.URL_ECOSYSTEM_APPLY}
isWithArrow={true}
isAccentColor={true}
useAnchorTag={true}
shouldUseAnchorTag={true}
>
Apply now
</Button>
@@ -77,7 +77,7 @@ export const NextEcosystem = () => (
href={constants.URL_ECOSYSTEM_BLOG_POST}
isWithArrow={true}
isAccentColor={true}
useAnchorTag={true}
shouldUseAnchorTag={true}
target="_blank"
>
Learn More

9
packages/website/ts/@next/pages/instant.tsx
View File

@@ -3,19 +3,18 @@ import * as _ from 'lodash';
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import { colors } from 'ts/style/colors';
import { Banner } from 'ts/@next/components/banner';
import { Hero } from 'ts/@next/components/hero';
import { Button } from 'ts/@next/components/button';
import { Definition } from 'ts/@next/components/definition';
import { Hero } from 'ts/@next/components/hero';
import { Section, SectionProps } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
import { Configurator } from 'ts/@next/pages/instant/configurator';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { utils } from 'ts/utils/utils';
import { ModalContact } from '../components/modals/modal_contact';
const CONFIGURATOR_MIN_WIDTH_PX = 1050;
@@ -39,7 +38,7 @@ const featuresData = [
{
label: 'Get Started',
onClick: getStartedClick,
useAnchorTag: true,
shouldUseAnchorTag: true,
},
{
label: 'Explore the Docs',

6
packages/website/ts/@next/pages/instant/code_demo.tsx
View File

@@ -22,7 +22,7 @@ const CustomPre = styled.pre`
border: none;
}
code:first-of-type {
background-color: #060D0D !important;
background-color: #060d0d !important;
color: #999;
min-height: 100%;
text-align: center;
@@ -161,9 +161,7 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
<Container position="relative" height="100%">
<Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
<CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
<StyledButton>
{copyButtonText}
</StyledButton>
<StyledButton>{copyButtonText}</StyledButton>
</CopyToClipboard>
</Container>
<SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>

2
packages/website/ts/@next/pages/instant/config_generator.tsx
View File

@@ -65,7 +65,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
<Container minWidth="350px">
<ConfigGeneratorSection title="Liquidity Source">
<Select
includeEmpty={false}
shouldIncludeEmpty={false}
id=""
value={value.orderSource}
items={this._generateItems()}

6
packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
View File

@@ -43,11 +43,7 @@ export class ConfigGeneratorAddressInput extends React.Component<
const hasError = !_.isEmpty(errMsg);
return (
<Container height="80px">
<Input
value={this.props.value}
onChange={this._handleChange}
placeholder="0xe99...aa8da4"
/>
<Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" />
<Container marginTop="5px" isHidden={!hasError} height="25px">
<Paragraph size="small" isNoMargin={true}>
{errMsg}

2
packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
View File

@@ -58,7 +58,7 @@ const StyledSlider = styled(SliderWithTooltip)`
top: 7px;
&:after {
border: solid transparent;
content: " ";
content: ' ';
height: 0;
width: 0;
position: absolute;

8
packages/website/ts/@next/pages/instant/select.tsx
View File

@@ -13,21 +13,21 @@ interface SelectProps {
items: SelectItemConfig[];
emptyText?: string;
onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
includeEmpty: boolean;
shouldIncludeEmpty: boolean;
}
export const Select: React.FunctionComponent<SelectProps> = ({
value,
id,
items,
includeEmpty,
shouldIncludeEmpty,
emptyText,
onChange,
}) => {
return (
<Container>
<StyledSelect id={id} onChange={onChange}>
{includeEmpty && <option value="">{emptyText}</option>}
{shouldIncludeEmpty && <option value="">{emptyText}</option>}
{items.map((item, index) => (
<option
key={`${id}-item-${index}`}
@@ -48,7 +48,7 @@ export const Select: React.FunctionComponent<SelectProps> = ({
Select.defaultProps = {
emptyText: 'Select...',
includeEmpty: true,
shouldIncludeEmpty: true,
};
const Container = styled.div`

16
packages/website/ts/@next/pages/landing.tsx
View File

@@ -1,10 +1,10 @@
import * as React from 'react';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients';
import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
import { SectionLandingAbout } from 'ts/@next/components/sections/landing/about';
import { SectionLandingClients } from 'ts/@next/components/sections/landing/clients';
import { SectionLandingCta } from 'ts/@next/components/sections/landing/cta';
import { SectionLandingHero } from 'ts/@next/components/sections/landing/hero';
import { ModalContact } from 'ts/@next/components/modals/modal_contact';
@@ -21,7 +21,7 @@ export class NextLanding extends React.Component<Props> {
isContactModalOpen: false,
};
public render(): React.ReactNode {
return (
return (
<SiteWrap theme="dark">
<SectionLandingHero />
<SectionLandingAbout />
@@ -34,9 +34,9 @@ export class NextLanding extends React.Component<Props> {
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}

50
packages/website/ts/@next/pages/market_maker.tsx
View File

@@ -1,25 +1,20 @@
import * as _ from 'lodash';
import * as React from 'react';
import { colors } from 'ts/style/colors';
import { Banner } from 'ts/@next/components/banner';
import { Button } from 'ts/@next/components/button';
import { Definition } from 'ts/@next/components/definition';
import { Hero } from 'ts/@next/components/hero';
import { Icon } from 'ts/@next/components/icon';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { ModalContact } from 'ts/@next/components/modals/modal_contact';
import {Section} from 'ts/@next/components/newLayout';
import { WebsitePaths } from 'ts/types';
import { Section } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
const offersData = [
{
icon: 'supportForAllEthereumStandards',
title: 'Comprehensive Tutorials',
description: 'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.',
description:
'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.',
},
{
icon: 'generateRevenueForYourBusiness-large',
@@ -34,7 +29,8 @@ const offersData = [
{
icon: 'getInTouch',
title: 'Personalized Support',
description: 'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.',
description:
'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.',
},
];
@@ -53,14 +49,10 @@ export class NextMarketMaker extends React.Component {
isCenteredMobile={false}
title="Bring liquidity to the exchanges of the future"
description="Market makers (MMs) are important stakeholders in the 0x ecosystem. The Market Making Program provides a set of resources that help onboard MMs bring liquidity to the 0x network. The program includes tutorials, a robust data platform, trade compensation, and 1:1 support from our MM Success Manager."
actions={<HeroActions/>}
actions={<HeroActions />}
/>
<Section
bgColor="light"
isFlex={true}
maxWidth="1170px"
>
<Section bgColor="light" isFlex={true} maxWidth="1170px">
<Definition
title="Secure"
titleSize="small"
@@ -90,17 +82,17 @@ export class NextMarketMaker extends React.Component {
</Section>
<Section>
{_.map(offersData, (item, index) => (
<Definition
key={`offers-${index}`}
icon={item.icon}
title={item.title}
description={item.description}
isInlineIcon={true}
iconSize={240}
fontSize="medium"
/>
))}
{_.map(offersData, (item, index) => (
<Definition
key={`offers-${index}`}
icon={item.icon}
title={item.title}
description={item.description}
isInlineIcon={true}
iconSize={240}
fontSize="medium"
/>
))}
</Section>
<Banner
@@ -116,11 +108,11 @@ export class NextMarketMaker extends React.Component {
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}
const HeroActions = () => (

114
packages/website/ts/@next/pages/why.tsx
View File

@@ -1,20 +1,18 @@
import * as _ from 'lodash';
import * as React from 'react';
import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
import styled from 'styled-components';
import {Hero} from 'ts/@next/components/hero';
import { Banner } from 'ts/@next/components/banner';
import { Button } from 'ts/@next/components/button';
import {Definition} from 'ts/@next/components/definition';
import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
import { Definition } from 'ts/@next/components/definition';
import { Hero } from 'ts/@next/components/hero';
import { Column, Section, WrapSticky } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Slide, Slider } from 'ts/@next/components/slider/slider';
import { Heading } from 'ts/@next/components/text';
import { ModalContact } from '../components/modals/modal_contact';
import { Heading } from 'ts/@next/components/text';
const offersData = [
{
@@ -48,7 +46,8 @@ const functionalityData = [
{
icon: 'buildBusiness',
title: 'Build a Business',
description: 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.',
description:
'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.',
},
];
@@ -56,27 +55,32 @@ const useCaseSlides = [
{
icon: 'gamingAndCollectibles',
title: 'Games & Collectibles',
description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.',
description:
'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.',
},
{
icon: 'predictionMarkets',
title: 'Prediction Markets',
description: 'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.',
description:
'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.',
},
{
icon: 'orderBooks',
title: 'Order Books',
description: 'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.',
description:
'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.',
},
{
icon: 'decentralisedLoans',
title: 'Decentralized Loans',
description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.',
description:
'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.',
},
{
icon: 'stableTokens',
title: 'Stable Tokens',
description: 'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.',
description:
'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.',
},
];
@@ -87,27 +91,20 @@ export class NextWhy extends React.Component {
isContactModalOpen: false,
};
public render(): React.ReactNode {
const buildAction = (
<Button href="/docs" isWithArrow={true} isAccentColor={true}>
Build on 0x
</Button>
);
return (
<SiteWrap theme="dark">
<Hero
title="The exchange layer for the crypto economy"
description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastracture that developers and businesses utilize to build products that enable the purchasing and trading of crypto tokens."
actions={
<Button
href="/docs"
isWithArrow={true}
isAccentColor={true}
>
Build on 0x
</Button>
}
actions={buildAction}
/>
<Section
bgColor="dark"
isFlex={true}
maxWidth="1170px"
>
<Section bgColor="dark" isFlex={true} maxWidth="1170px">
<Definition
title="Support for all Ethereum Standards"
titleSize="small"
@@ -136,20 +133,22 @@ export class NextWhy extends React.Component {
/>
</Section>
<Section maxWidth="1170px" isFlex={true} isFullWidth={true}>
<Column>
<NavStickyWrap offsetTop="130px">
<ChapterLink href="#benefits">Benefits</ChapterLink>
<ChapterLink href="#cases">Use Cases</ChapterLink>
<ChapterLink href="#functionality">Features</ChapterLink>
</NavStickyWrap>
</Column>
<Section maxWidth="1170px" isFlex={true} isFullWidth={true}>
<Column>
<NavStickyWrap offsetTop="130px">
<ChapterLink href="#benefits">Benefits</ChapterLink>
<ChapterLink href="#cases">Use Cases</ChapterLink>
<ChapterLink href="#functionality">Features</ChapterLink>
</NavStickyWrap>
</Column>
<Column width="55%" maxWidth="826px">
<Column width="100%" maxWidth="560px" padding="0 30px 0 0">
<ScrollableAnchor id="benefits">
<SectionWrap>
<SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>What 0x offers</SectionTitle>
<SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>
What 0x offers
</SectionTitle>
{_.map(offersData, (item, index) => (
<Definition
@@ -166,7 +165,9 @@ export class NextWhy extends React.Component {
<ScrollableAnchor id="cases">
<SectionWrap isNotRelative={true}>
<SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle>
<SectionTitle size="medium" marginBottom="60px">
Use Cases
</SectionTitle>
<Slider>
{_.map(useCaseSlides, (item, index) => (
<Slide
@@ -182,7 +183,9 @@ export class NextWhy extends React.Component {
<ScrollableAnchor id="functionality">
<SectionWrap>
<SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle>
<SectionTitle size="medium" marginBottom="60px">
Exchange Functionality
</SectionTitle>
{_.map(functionalityData, (item, index) => (
<Definition
@@ -198,33 +201,36 @@ export class NextWhy extends React.Component {
</ScrollableAnchor>
</Column>
</Column>
</Section>
</Section>
<Banner
heading="Ready to get started?"
subline="Dive into our docs, or contact us if needed"
mainCta={{ text: 'Get Started', href: '/docs' }}
secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
/>
<ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
<Banner
heading="Ready to get started?"
subline="Dive into our docs, or contact us if needed"
mainCta={{ text: 'Get Started', href: '/docs' }}
secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
/>
<ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
</SiteWrap>
);
}
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}
interface SectionProps {
isNotRelative?: boolean;
}
const SectionWrap = styled.div<SectionProps>`
const SectionWrap =
styled.div <
SectionProps >
`
position: ${props => !props.isNotRelative && 'relative'};
& + & {
@@ -247,10 +253,18 @@ const SectionWrap = styled.div<SectionProps>`
}
`;
const SectionTitle = styled(Heading)<{ isNoBorder?: boolean }>`
interface SectionTitleProps {
isNoBorder?: boolean;
}
const SectionTitle =
styled(Heading) <
SectionTitleProps >
`
position: relative;
${props => !props.isNoBorder && `
${props =>
!props.isNoBorder &&
`
&:before {
content: '';
width: 100vw;

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