Add website to mono repo, update packages to align with existing sub-packages, use new subscribeAsync 0x.js method

2 files changed, 549 insertions, 0 deletions

diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
new file mode 100644
index 000000000..3c65d1042
--- /dev/null
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -0,0 +1,497 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as DocumentTitle from 'react-document-title';
+import RaisedButton from 'material-ui/RaisedButton';
+import {colors} from 'material-ui/styles';
+import {Styles, FAQSection, FAQQuestion, WebsitePaths} from 'ts/types';
+import {Link} from 'react-router-dom';
+import {Footer} from 'ts/components/footer';
+import {TopBar} from 'ts/components/top_bar';
+import {Question} from 'ts/pages/faq/question';
+import {configs} from 'ts/utils/configs';
+import {constants} from 'ts/utils/constants';
+
+export interface FAQProps {
+    source: string;
+    location: Location;
+}
+
+interface FAQState {}
+
+const styles: Styles = {
+    thin: {
+        fontWeight: 100,
+    },
+};
+
+const sections: FAQSection[] = [
+    {
+        name: '0x Protocol',
+        questions: [
+            {
+                prompt: 'What is 0x?',
+                answer: (
+                    <div>
+                        At its core, 0x is an open and non-rent seeking protocol that facilitates trustless,
+                        low friction exchange of Ethereum-based assets. Developers can use 0x as a platform
+                        to build exchange applications on top of{' '}
+                        (<a href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} target="blank">0x.js</a>
+                        {' '}is a Javascript library for interacting with the 0x protocol). For end users, 0x will be
+                        the infrastructure of a wide variety of user-facing applications i.e.{' '}
+                        <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank">0x Portal</a>,
+                        a decentralized application that facilitates trustless trading of Ethereum-based tokens
+                        between known counterparties.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'What problem does 0x solve?',
+                answer: (
+                    <div>
+                        In the two years since the Ethereum blockchain’s genesis block, numerous decentralized
+                        applications (dApps) have created Ethereum smart contracts for peer-to-peer exchange.
+                        Rapid iteration and a lack of best practices have left the blockchain scattered with
+                        proprietary and application-specific implementations. As a result, end users are
+                        exposed to numerous smart contracts of varying quality and security, with unique
+                        configuration processes and learning curves, all of which implement the same
+                        functionality. This approach imposes unnecessary costs on the network by fragmenting
+                        end users according to the particular dApp each user happens to be using, eliminating
+                        valuable network effects around liquidity. 0x is the solution to this problem by
+                        acting as modular, unopinionated building blocks that may be assembled and reconfigured.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'How is 0x different from a centralized exchange like Poloniex or ShapeShift?',
+                answer: (
+                    <div>
+                        <ul>
+                            <li>
+                                0x is a protocol for exchange, not a user-facing exchange application.
+                            </li>
+                            <li>
+                                0x is decentralized and trustless; there is no central party which can be
+                                hacked, run away with customer funds or be subjected to government regulations.
+                                Hacks of Mt. Gox, Shapeshift and Bitfinex have demonstrated that these types of
+                                systemic risks are palpable.
+                            </li>
+                            <li>
+                                Rather than a proprietary system that exists to extract rent for its owners,
+                                0x is public infrastructure that is funded by a globally distributed community
+                                of stakeholders. While the protocol is free to use, it enables for-profit
+                                user-facing exchange applications to be built on top of the protocol.
+                            </li>
+                        </ul>
+                    </div>
+                ),
+            },
+            {
+                prompt: 'If 0x protocol is free to use, where do transaction fees come in?',
+                answer: (
+                    <div>
+                        0x protocol uses off-chain order books to massively reduce friction costs for
+                        market makers and ensure that the blockchain is only used for trade settlement.
+                        Hosting and maintaining an off-chain order book is a service; to incent “Relayers”
+                        to provide this service they must be able to charge transaction fees on trading
+                        activity. Relayers are free to set their transaction fees to any value they desire.
+                        We expect Relayers to be highly competitive and transaction fees to approach an
+                        efficient economic equilibrium over time.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'What are the differences between 0x protocol and state channels?',
+                answer: (
+                    <div>
+                        <div>
+                            Participants in a state channel pass cryptographically signed messages back and
+                            forth, accumulating intermediate state changes without publishing them to the
+                            canonical chain until the channel is closed. State channels are ideal for “bar tab”
+                            applications where numerous intermediate state changes may be accumulated off-chain
+                            before being settled by a final on-chain transaction (i.e. day trading, poker,
+                            turn-based games).
+                        </div>
+                        <ul>
+                            <li>
+                                While state channels drastically reduce the number of on-chain transactions
+                                for specific use cases, numerous on-chain transactions and a security deposit
+                                are required to open and safely close a state channel making them less efficient
+                                than 0x for executing one-time trades.
+                            </li>
+                            <li>
+                                State channels are isolated from the Ethereum blockchain meaning that
+                                they cannot interact with smart contracts. 0x is designed to be integrated
+                                directly into smart contracts so trades can be executed programmatically
+                                in a single line of Solidity code.
+                            </li>
+                        </ul>
+                    </div>
+                ),
+            },
+            {
+                prompt: 'What types of digital assets are supported by 0x?',
+                answer: (
+                    <div>
+                        0x supports all Ethereum-based assets that adhere to the ERC20 token standard.
+                        There are many ERC20 tokens, worth a combined $2.2B, and more tokens are created
+                        each month. We believe that, by 2020, thousands of assets will be tokenized and
+                        moved onto the Ethereum blockchain including traditional securities such as equities,
+                        bonds and derivatives, fiat currencies and scarce digital goods such as video game
+                        items. In the future, cross-blockchain solutions such as{' '}
+                        <a href="https://cosmos.network/" target="_blank">Cosmos</a> and{' '}
+                        <a href="http://polkadot.io/" target="_blank">Polkadot</a> will allow cryptocurrencies
+                        to freely move between blockchains and, naturally, currencies such as Bitcoin will
+                        end up being represented as ERC20 tokens on the Ethereum blockchain.
+                    </div>
+                ),
+            },
+            {
+                prompt: '0x is open source: what prevents someone from forking the protocol?',
+                answer: (
+                    <div>
+                        Ethereum and Bitcoin are both open source protocols. Each protocol has been forked,
+                        but the resulting clone networks have seen little adoption (as measured by transaction
+                        count or market cap). This is because users have little to no incentive to switch
+                        over to a clone network if the original has initial network effects and a talented
+                        developer team behind it.
+                        An exception is in the case that a protocol includes a controversial feature such as
+                        a method of rent extraction or a monetary policy that favors one group of users over
+                        another (Zcash developer subsidy - for better or worse - resulted in Zclassic).
+                        Perceived inequality can provide a strong enough incentive that users will fork the
+                        original protocol’s codebase and spin up a new network that eliminates the controversial
+                        feature. In the case of 0x, there is no rent extraction and no users are given
+                        special permissions.
+
+                        0x protocol is upgradable. Cutting-edge technical capabilities can be integrated
+                        into 0x via decentralized governance (see section below), eliminating incentives
+                        to fork off of the original protocol and sacrifice the network effects surrounding
+                        liquidity that result from the shared protocol and settlement layer.
+                    </div>
+                ),
+            },
+        ],
+    },
+    {
+        name: '0x Token (ZRX)',
+        questions: [
+            {
+                prompt: 'Explain how the 0x protocol token (zrx) works.',
+                answer: (
+                    <div>
+                        <div>
+                            0x protocol token (ZRX) is utilized in two ways: 1) to solve the{' '}
+                            <a href="https://en.wikipedia.org/wiki/Coordination_game" target="_blank">
+                                coordination problem
+                            </a> and drive network effects around liquidity, creating a feedback loop
+                            where early adopters of the protocol benefit from wider adoption and 2) to
+                            be used for decentralized governance over 0x protocol's update mechanism.
+                            In more detail:
+                        </div>
+                        <ul>
+                            <li>
+                                ZRX tokens are used by Makers and Takers (market participants that generate
+                                and consume orders, respectively) to pay transaction fees to Relayers
+                                (entities that host and maintain public order books).
+                            </li>
+                            <li>
+                                ZRX tokens are used for decentralized governance over 0x protocol’s update
+                                mechanism which allows its underlying smart contracts to be replaced and
+                                improved over time. An update mechanism is needed because 0x is built upon
+                                Ethereum’s rapidly evolving technology stack, decentralized governance is
+                                needed because 0x protocol’s smart contracts will have access to user funds
+                                and numerous dApps will need to plug into 0x smart contracts. Decentralized
+                                governance ensures that this update process is secure and minimizes disruption
+                                to the network.
+                            </li>
+                        </ul>
+                    </div>
+                ),
+            },
+            {
+                prompt: 'Why must transaction fees be denominated in 0x token (ZRX) rather than ETH?',
+                answer: (
+                    <div>
+                        0x protocol’s decentralized update mechanism is analogous to proof-of-stake.
+                        To maximize the alignment of stakeholder and end user incentives, the staked
+                        asset must provide utility within the protocol.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'How will decentralized governance work?',
+                answer: (
+                    <div>
+                        Decentralized governance is an ongoing focus of research; it will involve token
+                        voting with ZRX. Ultimately the solution will maximize security while also maximizing
+                        the protocol’s ability to absorb new innovations. Until the governance structure is
+                        formalized and encoded within 0x DAO, a multi-sig will be used as a placeholder.
+                    </div>
+                ),
+            },
+        ],
+    },
+    {
+        name: 'ZRX Token Launch and Fund Use',
+        questions: [
+            {
+                prompt: 'What is the total supply of ZRX tokens?',
+                answer: (
+                    <div>
+                        1,000,000,000 ZRX. Fixed supply.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'When is the Token Launch? will there be a pre-sale?',
+                answer: (
+                    <div>
+                        The token launch will be on August 15th, 2017. There will not be a pre-sale.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'What will the token launch proceeds be used for?',
+                answer: (
+                    <div>
+                        100% of the proceeds raised in the token launch will be used to fund the development
+                        of free and open source software, tools and infrastructure that support the protocol
+                        and surrounding ecosystem. Check out our{' '}
+                        <a
+                            href="https://docs.google.com/document/d/1_RVa-_bkU92fWRsC8eNy4vYjcTt-WC8GtqyyjbTd-oY"
+                            target="_blank"
+                        >
+                            development roadmap
+                        </a>.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'What will be the initial distribution of ZRX tokens?',
+                answer: (
+                    <div>
+                        <div className="center" style={{width: '100%'}}>
+                            <img
+                                style={{width: 350}}
+                                src="/images/zrx_pie_chart.png"
+                            />
+                        </div>
+                        <div className="py1">
+                            <div className="bold pb1">
+                                Token Launch (50%)
+                            </div>
+                            <div>
+                                ZRX is inherently a governance token that plays a critical role in the
+                                process of upgrading 0x protocol. We are fully committed to formulating
+                                a functional and theoretically sound governance model and we plan to dedicate
+                                significant resources to R&D.
+                            </div>
+                        </div>
+                        <div className="py1">
+                            <div className="bold pb1">
+                                Retained by 0x (15%)
+                            </div>
+                            <div>
+                                The 0x core development team will be able to sustain itself for approximately
+                                five years using funds raised through the token launch. If 0x protocol
+                                proves to be as foundational a technology as we believe it to be, the
+                                retained ZRX tokens will allow the 0x core development team to sustain
+                                operations beyond the first 5 years.
+                            </div>
+                        </div>
+                        <div className="py1">
+                            <div className="bold pb1">
+                                Developer Fund (15%)
+                            </div>
+                            <div>
+                                The Developer Fund will be used to make targeted capital injections
+                                into high potential projects and teams that are attempting to grow
+                                the 0x ecosystem, strategic partnerships, hackathon prizes and community
+                                development activities.
+                            </div>
+                        </div>
+                        <div className="py1">
+                            <div className="bold pb1">
+                                Founding Team (10%)
+                            </div>
+                            <div>
+                                The founding team’s allocation of ZRX will vest over a traditional 4
+                                year vesting schedule with a one year cliff. We believe this should
+                                be standard practice for any team that is committed to making their
+                                project a long term success.
+                            </div>
+                        </div>
+                        <div className="py1">
+                            <div className="bold pb1">
+                                Early Backers & Advisors (10%)
+                            </div>
+                            <div>
+                                Our backers and advisors have provided capital, resources and guidance
+                                that have allowed us to fill out our team, setup a robust legal entity
+                                and build a fully functional product before launching a token. As a result,
+                                we have a proven track record and can offer a token that holds genuine utility.
+                            </div>
+                        </div>
+                    </div>
+                ),
+            },
+            {
+                prompt: 'Can I mine ZRX tokens?',
+                answer: (
+                    <div>
+                        No, the total supply of ZRX tokens is fixed and there is no continuous issuance
+                        model. Users that facilitate trading over 0x protocol by operating a Relayer
+                        earn transaction fees denominated in ZRX; as more trading activity is generated,
+                        more transaction fees are earned.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'Will there be a lockup period for ZRX tokens sold in the token launch?',
+                answer: (
+                    <div>
+                        No, ZRX tokens sold in the token launch will immediately be liquid.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'Will there be a lockup period for tokens allocated to the founding team?',
+                answer: (
+                    <div>
+                        Yes. ZRX tokens allocated to founders, advisors and staff members will be released
+                        over a 4 year vesting schedule with a 25% cliff upon completion of the initial
+                        token launch and 25% released each subsequent year in monthly installments. Staff
+                        members hired after the token launch will have a 4 year vesting schedule with a
+                        one year cliff.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'Which cryptocurrencies will be accepted in the token launch?',
+                answer: (
+                    <div>ETH.</div>
+                ),
+            },
+            {
+                prompt: 'When will 0x be live?',
+                answer: (
+                    <div>
+                        An alpha version of 0x has been live on our private test network since January
+                        2017. Version 1.0 of 0x protocol will be deployed to the canonical Ethereum
+                        blockchain after a round of security audits and prior to the public token launch.
+                        0x will be using the 0x protocol during our token launch.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'Where can I find a development roadmap?',
+                answer: (
+                    <div>
+                        Check it out{' '}
+                        <a
+                            href="https://drive.google.com/open?id=14IP1N8mt3YdsAoqYTyruMnZswpklUs3THyS1VXx71fo"
+                            target="_blank"
+                        >
+                            here
+                        </a>.
+                    </div>
+                ),
+            },
+        ],
+    },
+    {
+        name: 'Team',
+        questions: [
+            {
+                prompt: 'Where is 0x based?',
+                answer: (
+                    <div>
+                        0x was founded in SF and is driven by a diverse group of contributors.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'How can I get involved?',
+                answer: (
+                    <div>
+                        Join our <a href={constants.ZEROEX_CHAT_URL} target="_blank">Rocket.chat</a>!
+                        As an open source project, 0x will rely on a worldwide community of passionate
+                        developers to contribute proposals, ideas and code.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'Why the name 0x?',
+                answer: (
+                    <div>
+                        0x is the prefix for hexadecimal numeric constants including Ethereum addresses.
+                        In a more abstract context, as the first open protocol for exchange 0x represents
+                        the beginning of the end for the exchange industry’s rent seeking oligopoly:
+                        zero exchange.
+                    </div>
+                ),
+            },
+            {
+                prompt: 'How do you pronounce 0x?',
+                answer: (
+                    <div>
+                        We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please.
+                    </div>
+                ),
+            },
+        ],
+    },
+];
+
+export class FAQ extends React.Component<FAQProps, FAQState> {
+    public componentDidMount() {
+        window.scrollTo(0, 0);
+    }
+    public render() {
+        return (
+            <div>
+                <DocumentTitle title="0x FAQ"/>
+                <TopBar
+                    blockchainIsLoaded={false}
+                    location={this.props.location}
+                />
+                <div
+                    id="faq"
+                    className="mx-auto max-width-4 pt4"
+                    style={{color: colors.grey800}}
+                >
+                    <h1 className="center" style={{...styles.thin}}>0x FAQ</h1>
+                    <div className="sm-px2 md-px2 lg-px0 pb4">
+                        {this.renderSections()}
+                    </div>
+                </div>
+                <Footer location={this.props.location} />
+            </div>
+        );
+    }
+    private renderSections() {
+        const renderedSections = _.map(sections, (section: FAQSection, i: number) => {
+            const isFirstSection = i === 0;
+            return (
+                <div key={section.name}>
+                    <h3>{section.name}</h3>
+                    {this.renderQuestions(section.questions, isFirstSection)}
+                </div>
+            );
+        });
+        return renderedSections;
+    }
+    private renderQuestions(questions: FAQQuestion[], isFirstSection: boolean) {
+        const renderedQuestions = _.map(questions, (question: FAQQuestion, i: number) => {
+            const isFirstQuestion = i === 0;
+            return (
+                <Question
+                    key={question.prompt}
+                    prompt={question.prompt}
+                    answer={question.answer}
+                    shouldDisplayExpanded={isFirstSection && isFirstQuestion}
+                />
+            );
+        });
+        return renderedQuestions;
+    }
+}
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
new file mode 100644
index 000000000..4ed198b91
--- /dev/null
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -0,0 +1,52 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {Card, CardHeader, CardText} from 'material-ui/Card';
+
+export interface QuestionProps {
+    prompt: string;
+    answer: React.ReactNode;
+    shouldDisplayExpanded: boolean;
+}
+
+interface QuestionState {
+    isExpanded: boolean;
+}
+
+export class Question extends React.Component<QuestionProps, QuestionState> {
+    constructor(props: QuestionProps) {
+        super(props);
+        this.state = {
+            isExpanded: props.shouldDisplayExpanded,
+        };
+    }
+    public render() {
+        return (
+            <div
+                className="py1"
+            >
+                <Card
+                    initiallyExpanded={this.props.shouldDisplayExpanded}
+                    onExpandChange={this.onExchangeChange.bind(this)}
+                >
+                    <CardHeader
+                        title={this.props.prompt}
+                        style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
+                        titleStyle={{color: 'rgb(66, 66, 66)'}}
+                        actAsExpander={true}
+                        showExpandableButton={true}
+                    />
+                    <CardText expandable={true}>
+                        <div style={{lineHeight: 1.4}}>
+                            {this.props.answer}
+                        </div>
+                    </CardText>
+                </Card>
+            </div>
+        );
+    }
+    private onExchangeChange() {
+        this.setState({
+            isExpanded: !this.state.isExpanded,
+        });
+    }
+}