Dapp_Pocket_0x_hackathon_code_snippet.js

/**
 * These are the code snippets we wrote and used in the 0x-Coinlist hackathon.
 * We integrate 0x into our product - Dapp Pocket, which is a blockchain wallet app for Dapp users.
 * Our product is not ready for open source, so we provide our code snippets.
 */

/**
 * Radar Relay API URLs
 */
export const ZEROX_API = {
    RELAYERS: {
        RADAR: 'https://api.radarrelay.com/0x/v2/orderbook',
    },
};

/**
 * Fetch token rate from 0x Radar Relayer
 */
export const fetch0xRadarTokenRate = async (from, to) => {
    const ERC20ProxyID = '0xf47261b0';
    let redirectFrom = from;
    let radarTokenRate;

    /**
     * The 0x Instant work flow:
     *      forwarder contract          radar relayer
     * ETH         -->         WETH         -->         Token
     */
  
    // The 0x Instant only support ETH -> Token. Rule out Token -> ETH
    if (to === 'ETH' || to === 'WETH') {
        radarTokenRate = 0;
        return new Promise((resolve) => {
            resolve({ radarTokenRate });
        });
    }
  
    // Radar relay API provide WETH <-> Token price data, so it need to redirect to WETH <-> ETH
    if (from === 'ETH') { redirectFrom = 'WETH'; }
    if (from === 'WETH') { redirectFrom = 'ETH'; }
  
    // TOKEN_INFO_ALL is all available token's data pre-fetched from Radar relay API
    const fromTokenAddress = TOKEN_INFO_ALL[redirectFrom].address.toLowerCase();
    const toTokenAddress = TOKEN_INFO_ALL[to].address.toLowerCase();
    const encodingFromAddress = ERC20ProxyID + web3.utils.leftPad(stripHexPrefix(fromTokenAddress), 64, '0');
    const encodingToAddress = ERC20ProxyID + web3.utils.leftPad(stripHexPrefix(toTokenAddress), 64, '0');

    try {
        const url = `${ZEROX_API.RELAYERS.RADAR}?baseAssetData=${encodingFromAddress}&quoteAssetData=${encodingToAddress}`;
        const result = await (await fetch(url)).json();
        const bid = result.bids.records[0];
        // const ask = result.asks.records[0];
        radarTokenRate = bid.order.takerAssetAmount / bid.order.makerAssetAmount;
        radarTokenRate = toFixedNumberLength(radarTokenRate, 8);
    } catch (e) {
        radarTokenRate = 0;
    }

    radarTokenRate = roundDecimal(radarTokenRate, 8);
    return new Promise((resolve) => {
        resolve({ radarTokenRate });
    });
};

/****************
 * Util functions
 ***************/

/**
 * Round number with N decimal
 * @param {number} number
 * @param {number} decimal
 * @returns {number}
 */
export function roundDecimal(number, decimal) {
    if (Number.isNaN(number)) {
        return 0;
    }
    if (Number.isNaN(decimal) || decimal < 0) {
        return number;
    }
    return Math.round(number * (10 ** decimal)) / (10 ** decimal);
}

/**
 * Let the number be fixed to the desired length
 * @param {number} number
 * @param {number} length
 */
export const toFixedNumberLength = (number, len) => Number(number.toPrecision(len));

/**
 * Get token's assetData
 * @param {string} token
 * @returns {string}
 */
export getAssetData = (token) => {
    const ERC20ProxyID = '0xf47261b0';
    const tokenAddress = TOKEN_INFO_ALL[token].address;
    return ERC20ProxyID + web3.utils.leftPad(stripHexPrefix(tokenAddress), 64, '0');
}

/************************
 * Custom 0x instant page
 ***********************/

export renderZeroExInstant() {
  const config = { 
    orderSource: 'https://api.radarrelay.com/0x/v2/',
    walletDisplayName: 'Dapp Pocket',
  };
  const { token } = this.$route.query;
    if (token) {
        config.availableAssetDatas = [token];
        config.defaultSelectedAssetData = token;
    }
  zeroExInstant.render(config, 'body');
};