Tokens from config

[dekz]

Config File

Add the ability to modify the internals via a config file.

This config file (src/config.json) must be modified or mounted at build time. Additional Token Icon SVGs must be copied (or mounted) into public and resolved relatively.

{
    "general": {
        "title": "Launch Kit"
    },
    "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": "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"
        }
    ]
}

Update docker-compose.yml with custom config

services:
  frontend:
    image: 0xorg/launch-kit-frontend:6cd3ed4
    environment:
      REACT_APP_NETWORK_ID: 42
      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
        - ./ren.svg:/app/public/assets/icons/ren.svg

Features:

• [x] Add custom token
• [x] Configure pairs
• [x] Set the display decimals for tokens
• [x] Set an icon for a token
• [x] Basic theme overrides

TODO

• [x] JSON schema for config file
• [x] Validate tokens exist for pairs

Docker image

Frontend Latest: 621mb (gzipped) Current: 127mb (gzipped)

Other

Fixes #552 Fixes #522 Fixes #526 Fixes #510 Fixes #544 Fixes #550

Example Customisation

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"
        }
    }
}