Skip to content

@dekz dekz released this Jun 29, 2019 · 3 commits to master since this release

The 0x team is excited to release version 0.0.4 of Launch Kit. This release allows for greater customisation, smaller containers and a number of improvements.

Custom Config

A config file can be used to modify the tokens, trading pairs, themes and general properties of Launch Kit frontend.

Below you will find the default config when starting Launch Kit

Example Config
{
    "general": {
        "title": "Launch Kit"
    },
    "tokens": [
        {
            "symbol": "zrx",
            "name": "0x Protocol Token",
            "primaryColor": "#333333",
            "icon": "assets/icons/zrx.svg",
            "addresses": {
                "1": "0xE41d2489571d322189246DaFA5ebDe1F4699F498",
                "3": "0xff67881f8d12f372d91baae9752eb3631ff0ed00",
                "4": "0x8080c7e4b81ecf23aa6f877cfbfd9b0c228c6ffa",
                "42": "0x2002d3812f58e35f0ea1ffbf80a75a38c32175fa",
                "50": "0x871dd7c2b4b25e1aa18728e9d5f2af4c4e431f5c"
            },
            "decimals": 18,
            "displayDecimals": 2
        },
        {
            "symbol": "weth",
            "name": "Wrapped Ether",
            "primaryColor": "#3333ff",
            "icon": "assets/icons/weth.svg",
            "addresses": {
                "1": "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
                "3": "0xc778417e063141139fce010982780140aa0cd5ab",
                "4": "0xc778417e063141139fce010982780140aa0cd5ab",
                "42": "0xd0a1e359811322d97991e03f863a0c30c2cf029c",
                "50": "0x0b1ba0af832d7c05fd64161e0db78e85978e8082"
            },
            "decimals": 18,
            "displayDecimals": 2
        },
        {
            "decimals": 18,
            "symbol": "dai",
            "name": "Dai",
            "icon": "assets/icons/dai.svg",
            "primaryColor": "#DEA349",
            "addresses": {
                "1": "0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359",
                "3": "0xfc8862446cd3e4a2e7167e7d97df738407fead07",
                "4": "0x6f2d6ff85efca691aad23d549771160a12f0a0fc",
                "42": "0xc4375b7de8af5a38a93548eb8453a498222c4ff2",
                "50": ""
            }
        },
        {
            "decimals": 18,
            "symbol": "mkr",
            "name": "Maker",
            "primaryColor": "#68CCBB",
            "icon": "assets/icons/mkr.svg",
            "addresses": {
                "1": "0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2",
                "3": "0x06732516acd125b6e83c127752ed5f027e1b276e",
                "4": "0xb763e26cd6dd09d16f52dc3c60ebb77e46b03290",
                "42": "0x7B6B10CAa9E8E9552bA72638eA5b47c25afea1f3",
                "50": "0x34d402f14d58e001d8efbe6585051bf9706aa064"
            }
        },
        {
            "decimals": 18,
            "symbol": "rep",
            "name": "Augur",
            "icon": "assets/icons/rep.svg",
            "primaryColor": "#512D80",
            "addresses": {
                "1": "0x1985365e9f78359a9B6AD760e32412f4a445E862",
                "3": "0xb0b443fe0e8a04c4c85e8fda9c5c1ccc057d6653",
                "4": "0x6a732d537daf79d75efaeae286d30fc578fa98d0",
                "42": "0x8CB3971b8EB709C14616BD556Ff6683019E90d9C",
                "50": "0x25b8fe1de9daf8ba351890744ff28cf7dfa8f5e3"
            }
        },
        {
            "decimals": 9,
            "symbol": "dgx",
            "name": "DigixDao",
            "icon": "assets/icons/dgx.svg",
            "primaryColor": "#E1AA3E",
            "addresses": {
                "1": "0xE0B7927c4aF23765Cb51314A0E0521A9645F0E2A",
                "3": "0xc4895a5aafa2708d6bc1294e20ec839aad156b1d",
                "4": "0xc40a46ca4bc8e6057ed571e39cf400f3f935e4d5",
                "42": "0xA4f468c9c692eb6B4b8b06270dAe7A2CfeedcDe9",
                "50": "0xcdb594a32b1cc3479d8746279712c39d18a07fc0"
            }
        },
        {
            "decimals": 18,
            "symbol": "mln",
            "name": "Melon",
            "icon": "assets/icons/mln.svg",
            "primaryColor": "#333333",
            "addresses": {
                "1": "0xec67005c4E498Ec7f55E092bd1d35cbC47C91892",
                "3": "0x823ebe83d39115536274a8617e00a1ff3544fd63",
                "4": "0x521c0941300a18a4edc697368f43a6a870be1f3d",
                "42": "0x17e394D1Df6cE29d042195Ea38411A98ff3Ead94",
                "50": "0x1e2f9e10d02a6b8f8f69fcbf515e75039d2ea30d"
            }
        }
    ],
    "pairs": [
        {
            "base": "zrx",
            "quote": "weth"
        },
        {
            "base": "zrx",
            "quote": "dai"
        },
        {
            "base": "mkr",
            "quote": "weth"
        },
        {
            "base": "mln",
            "quote": "weth"
        },
        {
            "base": "dgx",
            "quote": "weth"
        },
        {
            "base": "rep",
            "quote": "weth"
        }
    ],
    "marketFilters": [
        {
            "text": "ETH",
            "value": "weth"
        },
        {
            "text": "DAI",
            "value": "dai"
        }
    ]
}

image

With a few tweaks and changes to the tokens listed, the trading pairs and the styling you can quickly create an Exchange for REP as an example.

REP Exchange Config
{
    "general": {
        "title": "REP Exchange",
        "icon": "assets/icons/rep.svg"
    },
    "tokens": [
        {
            "symbol": "zrx",
            "name": "0x Protocol Token",
            "primaryColor": "#333333",
            "icon": "assets/icons/zrx.svg",
            "addresses": {
                "1": "0xE41d2489571d322189246DaFA5ebDe1F4699F498",
                "4": "0x8080c7e4b81ecf23aa6f877cfbfd9b0c228c6ffa",
                "5": "0xff67881f8d12f372d91baae9752eb3631ff0ed00",
                "42": "0x2002d3812f58e35f0ea1ffbf80a75a38c32175fa",
                "50": "0x871dd7c2b4b25e1aa18728e9d5f2af4c4e431f5c"
            },
            "decimals": 18,
            "displayDecimals": 2
        },
        {
            "symbol": "weth",
            "name": "Wrapped Ether",
            "primaryColor": "#3333ff",
            "icon": "assets/icons/weth.svg",
            "addresses": {
                "1": "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
                "4": "0xc778417e063141139fce010982780140aa0cd5ab",
                "5": "0xc778417e063141139fce010982780140aa0cd5ab",
                "42": "0xd0a1e359811322d97991e03f863a0c30c2cf029c",
                "50": "0x0b1ba0af832d7c05fd64161e0db78e85978e8082"
            },
            "decimals": 18,
            "displayDecimals": 2
        },
        {
            "decimals": 18,
            "symbol": "dai",
            "name": "Dai",
            "icon": "assets/icons/dai.svg",
            "primaryColor": "#DEA349",
            "addresses": {
                "1": "0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359",
                "4": "0x6f2d6ff85efca691aad23d549771160a12f0a0fc",
                "5": "0xfc8862446cd3e4a2e7167e7d97df738407fead07",
                "42": "0xc4375b7de8af5a38a93548eb8453a498222c4ff2",
                "50": ""
            }
        },
        {
            "decimals": 18,
            "symbol": "mkr",
            "name": "Maker",
            "primaryColor": "#68CCBB",
            "icon": "assets/icons/mkr.svg",
            "addresses": {
                "1": "0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2",
                "4": "0xb763e26cd6dd09d16f52dc3c60ebb77e46b03290",
                "5": "0x06732516acd125b6e83c127752ed5f027e1b276e",
                "42": "0x7B6B10CAa9E8E9552bA72638eA5b47c25afea1f3",
                "50": "0x34d402f14d58e001d8efbe6585051bf9706aa064"
            }
        },
        {
            "decimals": 18,
            "symbol": "rep",
            "name": "Augur",
            "icon": "assets/icons/rep.svg",
            "primaryColor": "#512D80",
            "addresses": {
                "1": "0x1985365e9f78359a9B6AD760e32412f4a445E862",
                "4": "0x6a732d537daf79d75efaeae286d30fc578fa98d0",
                "5": "0xb0b443fe0e8a04c4c85e8fda9c5c1ccc057d6653",
                "42": "0x8CB3971b8EB709C14616BD556Ff6683019E90d9C",
                "50": "0x25b8fe1de9daf8ba351890744ff28cf7dfa8f5e3"
            }
        },
        {
            "decimals": 9,
            "symbol": "dgx",
            "name": "DigixDao",
            "icon": "assets/icons/dgx.svg",
            "primaryColor": "#E1AA3E",
            "addresses": {
                "1": "0xE0B7927c4aF23765Cb51314A0E0521A9645F0E2A",
                "4": "0xc40a46ca4bc8e6057ed571e39cf400f3f935e4d5",
                "5": "0xc4895a5aafa2708d6bc1294e20ec839aad156b1d",
                "42": "0xA4f468c9c692eb6B4b8b06270dAe7A2CfeedcDe9",
                "50": "0xcdb594a32b1cc3479d8746279712c39d18a07fc0"
            }
        },
        {
            "decimals": 18,
            "symbol": "mln",
            "name": "Melon",
            "icon": "assets/icons/mln.svg",
            "primaryColor": "#333333",
            "addresses": {
                "1": "0xec67005c4E498Ec7f55E092bd1d35cbC47C91892",
                "4": "0x521c0941300a18a4edc697368f43a6a870be1f3d",
                "5": "0x823ebe83d39115536274a8617e00a1ff3544fd63",
                "42": "0x17e394D1Df6cE29d042195Ea38411A98ff3Ead94",
                "50": "0x1e2f9e10d02a6b8f8f69fcbf515e75039d2ea30d"
            }
        }
    ],
    "pairs": [
        {
            "base": "rep",
            "quote": "weth"
        },
        {
            "base": "rep",
            "quote": "dai"
        },
        {
            "base": "rep",
            "quote": "zrx"
        }
    ],
    "marketFilters": [
        {
            "text": "ETH",
            "value": "weth"
        },
        {
            "text": "REP",
            "value": "rep"
        }
    ],
    "theme": {
        "componentsTheme": {
            "background": "#522c80",
            "cardBackgroundColor": "#271a38",
            "topbarBackgroundColor": "#271a38",
            "inactiveTabBackgroundColor": "#1c0f2b"
        }
    }
}

Screen Shot 2019-06-27 at 12 53 19 pm

The new config and additional assets need to be mounted into the frontend container when using the docker-compose file generated by the wizard.

services:
  frontend:
    image: 0xorg/launch-kit-frontend
    environment:
      REACT_APP_NETWORK_ID: 1
      REACT_APP_DEFAULT_BASE_PATH: '/erc20'
      REACT_APP_THEME_NAME: 'DARK_THEME'
      REACT_APP_RELAYER_URL: 'http://localhost:3000/v2'
    command: yarn build
    volumes:
        - frontend-assets:/app/build
        # Mount in the custom config
        - ./config.json:/app/src/config.json
        # Mount in any custom icons into public assets
        - ./custom_token.svg:/app/public/assets/icons/custom_token.svg

For more information on Customising Launch Kit with a config file, please see the documentation.

Smaller Containers

We have made a number of optimisations in the Launch Kit containers. This reduces the time to getting started by an order of magnitude.

container before size after size
frontend 621MB 127MB
backend 543MB 91MB
total 1,164MB 218MB

Getting started with a 30Mbps connection is down from over 6 minutes to less than a minute.

Persistent Backend

A Docker volume can now be attached to the backend to allow for persistent orders through restarts

backend:
    ...
    volumes:
      - backend-database:/usr/app/src/db

Improvements

Frontend

Backend

Wizard

Upgrading to 0.0.4

If you have already used the wizard and wish to upgrade the docker containers, simply run docker-compose pull to pull the latest containers.

Assets 2
You can’t perform that action at this time.