Adding new custom tokens

[dekz]

Currently a launch-kit backend can support WHITELIST_ALL_TOKENS='*' this means all orders for any token will be stored.

Querying the SRA endpoint for supported tokens won't list, all tokens in existence as the backend doesn't know of them, it only knows of the tokens it has orders for.

The front end contains a list of tokens it supports, which is currently limited. The ability to add new tokens requires changing 2 files and rebuilding.

Let's try and get these steps down to as little as possible and document the way to change this behaviour. ENV vars are hard to configure this with but when using containers it is also hard to modify a file (for the non advanced users).

Easy mode

Can we mount a config file in?

Can we supply via ENV vars:

SUPPORTED_TOKENS='0xabcd,0x1234,0xbeef'
SUPPORTED_PAIRS='DAI/ETH,ZRX/ETH,ZRX/DAI'

Where the symbol is looked up via the contract addresses supplied.

Advanced mode

Document the files that need to be changes and the way to re-build with those changes given the wizard or some other option. Can we mount a config file in?

src/common/markets.ts
src/common/tokens_meta_data.ts

Adding a new token

For example, let's say we wish to add a new token called DEKZ.

Firstly add the token symbol to the types.ts file:

export enum TokenSymbol {
    Weth = 'weth',
    Zrx = 'zrx',
    Dai = 'dai',
    Mkr = 'mkr',
    Rep = 'rep',
    Dgd = 'dgd',
    Mln = 'mln',
    Dekz = 'dekz', // Note the usage of lowercase here
}

Add to the list of KNOWN TOKENS in the tokens_meta_data.ts file:

export const KNOWN_TOKENS_META_DATA: TokenMetaData[] = [
    {
        decimals: 18,
        symbol: TokenSymbol.Weth,
        name: 'Wrapped Ether',
        primaryColor: '#3333ff',
        addresses: {
            1: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
            4: '0xc778417e063141139fce010982780140aa0cd5ab',
            42: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
            50: '0x0b1ba0af832d7c05fd64161e0db78e85978e8082',
        },
    },
    {
        decimals: 18,
        symbol: TokenSymbol.Zrx,
        name: '0x',
        primaryColor: '#333333',
        addresses: {
            1: '0xE41d2489571d322189246DaFA5ebDe1F4699F498',
            4: '0x8080c7e4b81ecf23aa6f877cfbfd9b0c228c6ffa',
            42: '0x2002d3812f58e35f0ea1ffbf80a75a38c32175fa',
            50: '0x871dd7c2b4b25e1aa18728e9d5f2af4c4e431f5c',
        },
    },
    {
        decimals: 18,
        symbol: TokenSymbol.Mkr,
        name: 'Maker',
        primaryColor: '#68CCBB',
        addresses: {
            1: '0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2',
            42: '0x7B6B10CAa9E8E9552bA72638eA5b47c25afea1f3',
            50: '0x10add991de718a69dec2117cb6aa28098836511b',
        },
    },
    {
        decimals: 18,
        symbol: TokenSymbol.Dai,
        name: 'Dai',
        primaryColor: '#512D80',
        addresses: {
            1: '0x1985365e9f78359a9B6AD760e32412f4a445E862',
            42: '0x8CB3971b8EB709C14616BD556Ff6683019E90d9C',
            50: '0x6dfff22588be9b3ef8cf0ad6dc9b84796f9fb45f',
        },
    },
    {
        decimals: 18,
        symbol: TokenSymbol.Dekz,
        name: 'Dekz',
        primaryColor: '#E1AA3E',
        addresses: {
            1: 'MAINNET ADDRESS',
            42: 'KOVAN ADDRESS',
            50: 'GANACHE ADDRESS',
        },
    },
...
}

Add it to the available markets file markets.ts:

export const availableMarkets: CurrencyPair[] = [
    {
        base: TokenSymbol.Dai,
        quote: TokenSymbol.Weth,
    },
    {
        base: TokenSymbol.Dai,
        quote: TokenSymbol.Zrx,
    },
    {
        base: TokenSymbol.Weth,
        quote: TokenSymbol.Dai,
    },
    {
        base: TokenSymbol.Dekz,
        quote: TokenSymbol.Weth,
    },
    {
        base: TokenSymbol.Dai,
        quote: TokenSymbol.Dekz,
    },
];

[fvictorio]

Some thoughts on this.

The way we configure the tokens right now requires a lot of information (unnecessarily). For example, instead of having an address, we have a map of network ids to addresses. This also connects with something we've been wanting to do for some time now: add an env var indicating which network id is supported by the frontend. This makes sense because the relayer only supports one network, and it would make it much easier to show a "wrong network" message. And it simplifes the information needed for each token

We also have things like symbol and decimals (not needed at all, it could be queried) and name and "primary color" (this can't be queried, but we could have this information for a bunch of known tokens, and use some defaults for unknown ones).

[icinsight]

It is only the frontend that requires configuration, if all tokens ('*') are whitelisted at the backend. Tested and holds true!

[icinsight]

This is also related: #517

[icinsight]

Here is a comprehensive view and "workflow" to manage these edits.

https://github.com/0xbitcoin-exchange/0x-launch-kit-frontend-configs