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

[WIP] porting indexing to typescript, ts-node

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-28 23:10:16 +02:00
committed by fabioberger
parent 11026fe36a
commit 6c792e89f9
11 changed files with 193 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/website/mdx/constants.js → packages/website/mdx/constants.ts
View File

@@ -2,17 +2,12 @@ const algoliasearch = require('algoliasearch');
const algoliaAppId = 'T7V7WKELRY';
const algoliaAdminKey = 'ccc472dee2aa991ca4bc935975e76b5d';
const adminClient = algoliasearch(algoliaAppId, algoliaAdminKey);
export const adminClient = algoliasearch(algoliaAppId, algoliaAdminKey);
const sharedSettings = {
export const sharedSettings = {
distinct: true,
attributeForDistinct: 'id',
attributesToSnippet: ['description', 'textContent:20'], // attribute:nbWords (number of words to show in a snippet)
searchableAttributes: ['title', 'textContent', 'description'],
snippetEllipsisText: '…',
};
module.exports = {
adminClient,
sharedSettings,
};

4
packages/website/mdx/guides.js → packages/website/mdx/guides.ts
View File

@@ -1,5 +1,5 @@
const { adminClient, sharedSettings } = require('./constants');
const { indexFiles, setIndexSettings } = require('./helpers');
import { adminClient, sharedSettings } from './constants';
import { indexFiles, setIndexSettings } from './helpers';
const index = adminClient.initIndex('0x_guides_test');
const dirName = 'guides';

73
packages/website/mdx/guides/build-a-relayer.mdx
View File

@@ -1,11 +1,10 @@
export const meta = {
id: 3523532,
title: 'Build a relayer',
description:
'A relayer is any party or entity which hosts an off-chain orderbook.',
tags: ['Relayer', 'Trader', 'Protocol Developer'],
topics: ['Coordinator Model', 'Mesh'],
difficulty: 'Advanced'
id: 3523532,
title: 'Build a relayer',
description: 'A relayer is any party or entity which hosts an off-chain orderbook.',
tags: ['Relayer', 'Trader', 'Protocol Developer'],
topics: ['Coordinator Model', 'Mesh'],
difficulty: 'Advanced',
};
They provide a way for users to add, remove and update this orderbook through an API, GUI or both. In doing so, relayers help traders discover counter-parties and ferry cryptographically signed orders between them. Once two parties agree on the terms of an order, the order is settled directly on the Ethereum blockchain via the 0x protocol smart contracts.
@@ -21,11 +20,11 @@ In 0x protocol, orders are transported off-chain over any arbitrary medium, mass
The simplest example of a relayer is a website allowing users to create, discover and fill orders. The relayer must build out a UI and host a backend database to provide this functionality.
<div align="center">
<img
src="https://s3.eu-west-2.amazonaws.com/0x-wiki-images/relayer_diagram.png"
style="padding-bottom: 20px; padding-top: 20px; max-width: 342px;"
width="80%"
/>
<img
src="https://s3.eu-west-2.amazonaws.com/0x-wiki-images/relayer_diagram.png"
style={{ paddingBottom: '20px', paddingTop: '20px', maxWidth: '342px' }}
width="80%"
/>
</div>
To simplify the process of interacting with the 0x protocol, we have written a Javascript/Typescript library called [0x.js](http://0x.org/docs/0x.js). This library helps relayers interact with the 0x protocol smart contracts through a higher-level, easier to use interface. It also provides many useful utilities for hashing, signing, validating, and serializing 0x orders. Additionally, we have built the [0x-launch-kit](https://github.com/0xproject/0x-launch-kit), an open-source, free-to-use API-only 0x relayer template that you can use as a starting point for your own project.
@@ -38,31 +37,31 @@ Below is an interface description of the 0x protocol order format:
```typescript
interface Order {
senderAddress: string;
// Ethereum address of the Maker
makerAddress: string;
// Ethereum address of the Taker. If no address specified, anyone can fill the order.
takerAddress: string;
// How many ZRX the Maker will pay as a fee to the relayer
makerFee: BigNumber;
// How many ZRX the Taker will pay as a fee to the relayer
takerFee: BigNumber;
// The amount of an asset the Maker is offering to exchange
makerAssetAmount: BigNumber;
// The amount of an asset the Maker is willing to accept in return
takerAssetAmount: BigNumber;
// The identifying data about the asset the Maker is offering
makerAssetData: string;
// The identifying data about the asset the Maker is requesting in return
takerAssetData: string;
// A salt to guarantee OrderHash uniqueness. Usually a milisecond timestamp of when order was made
salt: BigNumber;
// The address of the 0x protocol exchange smart contract
exchangeAddress: string;
// The address (user or smart contract) that will receive the fees
feeRecipientAddress: string;
// When the order will expire (unix timestamp in seconds)
expirationTimeSeconds: BigNumber;
senderAddress: string;
// Ethereum address of the Maker
makerAddress: string;
// Ethereum address of the Taker. If no address specified, anyone can fill the order.
takerAddress: string;
// How many ZRX the Maker will pay as a fee to the relayer
makerFee: BigNumber;
// How many ZRX the Taker will pay as a fee to the relayer
takerFee: BigNumber;
// The amount of an asset the Maker is offering to exchange
makerAssetAmount: BigNumber;
// The amount of an asset the Maker is willing to accept in return
takerAssetAmount: BigNumber;
// The identifying data about the asset the Maker is offering
makerAssetData: string;
// The identifying data about the asset the Maker is requesting in return
takerAssetData: string;
// A salt to guarantee OrderHash uniqueness. Usually a milisecond timestamp of when order was made
salt: BigNumber;
// The address of the 0x protocol exchange smart contract
exchangeAddress: string;
// The address (user or smart contract) that will receive the fees
feeRecipientAddress: string;
// When the order will expire (unix timestamp in seconds)
expirationTimeSeconds: BigNumber;
}
```

46
packages/website/mdx/guides/develop-on-ethereum.mdx
View File

@@ -1,14 +1,13 @@
export const meta = {
id: '513',
title: 'Develop on Ethereum',
description:
'Welcome to the exciting world of building applications on the Ethereum Blockchain',
tags: ['Relayer', 'Trader'],
topics: ['Mesh', 'Protocol Developer'],
difficulty: 'Beginner'
id: '513',
title: 'Develop on Ethereum',
description: 'Welcome to the exciting world of building applications on the Ethereum Blockchain',
tags: ['Relayer', 'Trader'],
topics: ['Mesh', 'Protocol Developer'],
difficulty: 'Beginner',
};
# Ethereum Intro
## Ethereum Intro
Welcome to the exciting world of building applications on the [Ethereum Blockchain](https://www.ethereum.org/). With Ethereum you can deploy applications or "Smart Contracts" that perform operations and persist state using a decentralized network of computers. Ethereum is often described as a platform for programming digital money. A transaction executes and is confirmed and verified by hundreds of different machines (nodes) distributed around the world. If you want to understand the how blockchains fundamentally work checkout [this visual explanation](https://anders.com/blockchain/). If you'd like to read more about Ethereum specifically, visit this [beginners guide to Ethereum](https://blog.coinbase.com/a-beginners-guide-to-ethereum-46dd486ceecf).
@@ -24,39 +23,16 @@ As web browsers do not natively support interacting with the Ethereum Blockchain
In order to interact with dApps (distributed applications) a user must have Ether in a wallet they control. The user cannot interact with dApps from an exchange such as Coinbase. They must control the private keys associated with their Ethereum address.
### Development
## Development
<div align="center">
<a
href="https://codesandbox.io/s/github/0xproject/0x-codesandbox"
target="_blank"
rel="Sandbox">
<img
src="https://s3.eu-west-2.amazonaws.com/0x-wiki-images/sandbox.png"
style="padding-bottom: 20px; padding-top: 20px; max-width: 761px;"
width="80%"
/>
</a>
</div>
### Test networks
#### Test networks
Development and testing are aided by running in your own local test Ethereum node. This allows you to quickly deploy and interact with contracts without spending real ETH. [Ganache](https://github.com/trufflesuite/ganache) simulates an Ethereum node locally and provides the same JSON RPC interface as a real node. Since there can still be small differences between it and a real Ethereum node (e.g [Geth](https://github.com/ethereum/go-ethereum) or [Parity](https://github.com/paritytech/parity-ethereum)) so we recommend you also test your application on a live testnet (i.e Kovan, Rinkeby, or Ropsten) before deploying on to the main Ethereum network.
Development and testing are aided by running in your own local test Ethereum node. This allows you to quickly deploy and interact with contracts without spending real ETH. [Ganache](https://github.com/trufflesuite/ganache) simulates an Ethereum node locally and provides the same JSON RPC interface as a real node. Since there can still be small differences between it and a real Ethereum node (e.g [Geth](https://github.com/ethereum/go-ethereum) or [Parity](https://github.com/paritytech/parity-ethereum) so we recommend you also test your application on a live testnet (i.e Kovan, Rinkeby, or Ropsten) before deploying on to the main Ethereum network.
Rather than spinning up your own Ethereum node infrastructure to connect to the network, many developers use [INFURA](https://infura.io/). They provide public, scalable Ethereum nodes as a service. Since Ethereum nodes were not designed to handle thousands of requests per second, Infura has built out infrastructure around the nodes to make them more performant.
It can be difficult to get a sufficient amount of test Ether to deploy your contracts on test networks and begin testing them. Because of this, we have created a faucet which can dispense small amounts of Ether to your account. Navigate over to the [0x Portal](https://0x.org/portal/balances) with Metamask installed and click "Request" to receive some free test Ether (make sure you're connected to a testnet)!
<div align="center">
<a href="https://0x.org/portal/balances">
<img
src="https://s3.eu-west-2.amazonaws.com/0x-wiki-images/network_screenshot.png"
style="padding-bottom: 20px; padding-top: 20px; max-width: 761px;"
width="80%"
/>
</a>
</div>
### Wrapped ETH
By now you are likely familiar with the ERC20 standard, Ether (aka ETH) and the plethora of ERC20 tokens out there. Unfortunately, ETH is not an ERC20 token and because of this cannot interact directly with the 0x protocol. What we can do however, is deposit ETH into an ERC20-compliant smart contract which credits your account with the same amount of WETH (wrapped Ether) tokens as the amount of ETH you deposited. These tokens are also redeemable 1-to-1 for Ether. In this ERC20-compliant form, Ether can be traded for other tokens using 0x protocol. This work-around for Ether is becoming increasingly common in the entire ecosystem. More information on WETH and how it works can be found [here](https://weth.io/).
@@ -65,4 +41,4 @@ Now that you have a high-level overview of Ethereum Blockchain development, it i
### Next steps
Now that you've got a basic understanding of what is involved when developing on Ethereum, you're now ready to go onto the next step of [Building a Relayer](#Build-A-Relayer). If you'd rather jump right in, you can skip straight to learning how to [Create, Validate and Fill Orders](https://0x.org/wiki#Create,-Validate,-Fill-Order) on 0x.
Now that you've got a basic understanding of what is involved when developing on Ethereum, you're now ready to go onto the next step of [Building a Relayer](/docs/guides/build-a-relayer). If you'd rather jump right in, you can skip straight to learning how to [Create, Validate and Fill Orders](https://0x.org/wiki#Create,-Validate,-Fill-Order) on 0x.

0
packages/website/mdx/page_template.mdx → packages/website/mdx/guides/page-template.mdx
View File

106
packages/website/mdx/helpers.js
View File

@@ -1,106 +0,0 @@
const fs = require('fs');
const path = require('path');
const { read } = require('to-vfile');
const remark = require('remark');
const mdx = require('remark-mdx');
const filter = require('unist-util-filter');
const { selectAll } = require('unist-util-select');
const extractMdxMeta = require('extract-mdx-metadata');
function processContentTree(tree, url, meta, index) {
const filteredTree = filter(tree, node => {
return node => node.type === 'heading' || node.type === 'paragraph';
});
const textNodes = selectAll('text', filteredTree);
if (textNodes) {
const formattedTextNodes = formatTextNodes(textNodes);
const content = getContent(meta, url, formattedTextNodes);
pushObjectsToAlgolia(index, content);
}
}
function setIndexSettings(index, settings) {
index.setSettings(settings, (err, content) => {
if (err) console.error(`Error: ${err}`);
});
}
function pushObjectsToAlgolia(index, content) {
index
.saveObjects(content)
.then(({ objectIDs }) =>
console.log(
'Pushed content to Algolia with Object IDs:' + objectIDs.join(', ')
)
)
.catch(err => console.error(`Error: ${err}`));
}
function getContent(meta, url, formattedTextNodes) {
// META SHAPE TOOLS // const { description, difficulty, id, isCommunity, tags, title, type } = meta;
// META SHAPE GUIDES // const { description, difficulty, id, tags, title, topics } = meta;
let content = [];
formattedTextNodes.forEach((node, index) => {
content.push({
...meta,
url,
textContent: node.textContent,
objectID: `${meta.id}_${index}`
});
});
return content;
}
function formatTextNodes(textNodes) {
const formattedTextNodes = []; // array structure: [ { line: [LINE_NUMBER], textContent: [MERGED_TEXT_VALUE] } ]
textNodes.map(textNode => {
const { position, value } = textNode;
const { line } = position.start; // Line at which textnode starts (and for paragraphs, headings, ends).
const nodeIndex = formattedTextNodes.findIndex(node => node.line === line);
const indexExists = nodeIndex > -1;
if (indexExists) {
formattedTextNodes[nodeIndex].textContent += value; // Merge value with existing text at the given line
} else {
formattedTextNodes.push({ line, textContent: value }); // Create text and its start line
}
});
return formattedTextNodes;
}
async function processMdx(index, dirName, fileName) {
const filePath = `${dirName}/${fileName}`;
const { name } = path.parse(filePath); // Name without file extension
const url = `/docs/${dirName}/${name}`;
const rawContent = fs.readFileSync(filePath);
const file = await read(filePath);
const meta = await extractMdxMeta(rawContent);
await remark()
.use(mdx)
.use(() => tree => processContentTree(tree, url, meta, index))
.process(file);
}
async function indexFiles(index, dirName) {
fs.readdir(dirName, async (err, items) => {
for (var i = 0; i < items.length; i++) {
const fileName = items[i];
await processMdx(index, dirName, fileName);
}
});
}
module.exports = {
indexFiles,
setIndexSettings
};

106
packages/website/mdx/helpers.ts Normal file
View File

@@ -0,0 +1,106 @@
const fs = require('fs');
const path = require('path');
const { read } = require('to-vfile');
const remark = require('remark');
const mdx = require('remark-mdx');
const filter = require('unist-util-filter');
const { selectAll } = require('unist-util-select');
const extractMdxMeta = require('extract-mdx-metadata');
function processContentTree(tree: any, url: any, meta: any, index: any) {
const filteredTree = filter(tree, () => {
return (node: any) => node.type === 'heading' || node.type === 'paragraph';
});
const textNodes = selectAll('text', filteredTree);
if (textNodes) {
const formattedTextNodes = formatTextNodes(textNodes);
const content = getContent(meta, url, formattedTextNodes);
pushObjectsToAlgolia(index, content);
}
}
export function setIndexSettings(index: any, settings: any) {
index.setSettings(settings, (err: any) => {
if (err) {
throw Error(`Error: ${err}`);
}
});
}
function pushObjectsToAlgolia(index: any, content: any) {
index
.saveObjects(content)
.then(({ objectIDs }: { objectIDs: string[] }) =>
console.log(
`✨ Pushed content to Algolia with Object IDs ${objectIDs[0]} to ${objectIDs[objectIDs.length - 1]}`,
),
)
.catch((err: string) => {
throw Error(`Error: ${err}`);
});
}
function getContent(meta: any, url: any, formattedTextNodes: any) {
// META SHAPE TOOLS // const { description, difficulty, id, isCommunity, tags, title, type } = meta;
// META SHAPE GUIDES // const { description, difficulty, id, tags, title, topics } = meta;
const content: any = [];
formattedTextNodes.forEach((node: any, index: any) => {
content.push({
...meta,
url,
textContent: node.textContent,
objectID: `${meta.id}_${index}`,
});
});
return content;
}
function formatTextNodes(textNodes: any) {
const formattedTextNodes: any = []; // array structure: [ { line: [LINE_NUMBER], textContent: [MERGED_TEXT_VALUE] } ]
textNodes.map((textNode: any) => {
const { position, value } = textNode;
const { line } = position.start; // Line at which textnode starts (and for paragraphs, headings, ends).
const nodeIndex = formattedTextNodes.findIndex((node: any) => node.line === line);
const isIndexPresent = nodeIndex > -1;
if (isIndexPresent) {
formattedTextNodes[nodeIndex].textContent += value; // Merge value with existing text at the given line
} else {
formattedTextNodes.push({ line, textContent: value }); // Create text and its start line
}
});
return formattedTextNodes;
}
async function processMdx(index: any, dirName: any, fileName: any) {
const filePath = `${dirName}/${fileName}`;
const { name } = path.parse(filePath); // Name without file extension
const url = `/docs/${dirName}/${name}`;
const rawContent = fs.readFileSync(filePath);
const file = await read(filePath);
const meta = await extractMdxMeta(rawContent);
await remark()
.use(mdx)
.use(() => (tree: any) => processContentTree(tree, url, meta, index))
.process(file);
}
export async function indexFiles(index: any, dirName: any) {
fs.readdir(dirName, async (err: string, items: any) => {
// @ts-ignore
for (var i = 0; i < items.length; i++) {
const fileName = items[i];
await processMdx(index, dirName, fileName);
}
});
}

1
packages/website/package.json
View File

@@ -148,6 +148,7 @@
"style-loader": "0.23.x",
"terser-webpack-plugin": "^1.1.0",
"to-vfile": "^6.0.0",
"ts-node": "^8.3.0",
"tslint": "5.11.0",
"tslint-config-0xproject": "^0.0.2",
"typescript": "3.0.1",

5
packages/website/ts/index.tsx
View File

@@ -221,11 +221,10 @@ render(
path={`${WebsitePaths.AssetSwapperDocs}/:version?`}
component={LazyAssetSwapperDocumentation}
/>
<Route path={`${WebsitePaths.Docs}/:type/:page`} component={DocsView as any} />
<Route exact={true} path={WebsitePaths.DocsGuides} component={DocsGuides as any} />
<Route exact={true} path={WebsitePaths.DocsTools} component={DocsTools as any} />
<Route path={`${WebsitePaths.DocsGuides}/:page`} component={DocsView as any} />
<Route path={`${WebsitePaths.DocsTools}/:page`} component={DocsView as any} />
<Route path={WebsitePaths.Docs} component={DocsHome as any} />
<Route exact={true} path={WebsitePaths.Docs} component={DocsHome as any} />
{/* Legacy endpoints */}
<Route
path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`}

17
packages/website/ts/pages/docs/view.tsx
View File

@@ -35,7 +35,7 @@ interface IDocsViewState {
title: string;
}
export const DocsView: React.FC<IDocsViewProps> = props => {
export const DocsView: React.FC<IDocsViewProps> = ({ match }) => {
const [state, setState] = useState<IDocsViewState>({
Component: null,
contents: [],
@@ -43,17 +43,14 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
});
const { Component, contents, title } = state;
const { page } = props.match.params;
const { page, type } = match.params;
useEffect(
() => {
void loadPageAsync(page);
},
[page],
);
useEffect(() => {
void loadPageAsync(page, type);
}, [page, type]);
const loadPageAsync = async (fileName: string) => {
const component = await import(`../../../md/new-docs/${fileName}.mdx`);
const loadPageAsync = async (fileName: string, dirName: string) => {
const component = await import(`../../../mdx/${dirName}/${fileName}.mdx`);
if (component) {
setState({

26
yarn.lock
View File

@@ -3431,6 +3431,11 @@ are-we-there-yet@~1.1.2:
delegates "^1.0.0"
readable-stream "^2.0.6"
arg@^4.1.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.1.tgz#485f8e7c390ce4c5f78257dbea80d4be11feda4c"
integrity sha512-SlmP3fEA88MBv0PypnXZ8ZfJhwmDeIE3SP71j37AiXQBXYosPV0x6uISAaHYSlSVhmHOVkomen0tbGk6Anlebw==
argparse@^1.0.7:
version "1.0.10"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -7040,6 +7045,11 @@ diff@3.5.0, diff@^3.1.0, diff@^3.2.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
diff@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
integrity sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==
diffie-hellman@^5.0.0:
version "5.0.3"
resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -19098,6 +19108,17 @@ ts-node@^7.0.0:
source-map-support "^0.5.6"
yn "^2.0.0"
ts-node@^8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.3.0.tgz#e4059618411371924a1fb5f3b125915f324efb57"
integrity sha512-dyNS/RqyVTDcmNM4NIBAeDMpsAdaQ+ojdf0GOLqE6nwJOgzEkdRNzJywhDfwnuvB10oa6NLVG1rUJQCpRN7qoQ==
dependencies:
arg "^4.1.0"
diff "^4.0.1"
make-error "^1.1.1"
source-map-support "^0.5.6"
yn "^3.0.0"
ts-optchain@^0.1.1:
version "0.1.1"
resolved "https://registry.npmjs.org/ts-optchain/-/ts-optchain-0.1.1.tgz#9d45e2c3fc6201c2f9be82edad4c76fefb2a36d9"
@@ -21288,6 +21309,11 @@ yn@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
yn@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.0.tgz#fcbe2db63610361afcc5eb9e0ac91e976d046114"
integrity sha512-kKfnnYkbTfrAdd0xICNFw7Atm8nKpLcLv9AZGEt+kczL/WQVai4e2V6ZN8U/O+iI6WrNuJjNNOyu4zfhl9D3Hg==
z-schema@^3.19.1:
version "3.22.0"
resolved "https://registry.npmjs.org/z-schema/-/z-schema-3.22.0.tgz#e1326063cb438f348c648350770258ff5e20a22b"