Displaying Quotes

Hello,

I’m trying to get past the part displaying quotes, but I always get the same error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘split’)
at HTMLButtonElement.formSubmitted (api.js:34:51)*
formSubmitted @ api.js:34

This is my code:

async function getTop10Tokens(){
    const response = await fetch('https://api.coinpaprika.com/v1/coins'); 
    const tokens = await response.json();        

    return tokens
            .filter(token => token.rank >= 1 && token.rank <= 10) 
            .map(token => token.symbol)
}


async function getTickerData(tickerList){
    const response = await fetch('https://api.1inch.exchange/v3.0/56/tokens');
    const tokens = await response.json();
    const tokenList = Object.values(tokens.tokens);

    return tokenList.filter(token => tickerList.includes(token.symbol))
}


function renderForm(tokens){
    const options = tokens.map(token => 
        `<option value="${token.decimals}-${token.address}">${token.name} (${token.symbol})</option>`)
    document.querySelector('[name=from-token]').innerHTML = options;
    document.querySelector('[name=to-token]').innerHTML = options;
    document.querySelector('.js-submit-quote').removeAttribute('disabled') 
    
}


async function formSubmitted(event){
    event.preventDefault();
    const fromToken = document.querySelector('[name=from-token]').innerHTML.value;
    const toToken = document.querySelector('[name=to-token]').innerHTML.value;
    const [fromDecimals, fromAddress] = fromToken.split('-');
    const [Todecimals, toAddress] = toToken.split('-');
    const fromUnit = 10 ** fromDecimals;

    const url = `https://api.1inch.io/v4.0/56/quote?fromTokenAddress=${fromAddress}&toTokenAddress=${toAddress}&amount=${fromUnit}`;
 

    try{
    const response = await fetch(url);
    const quote = await response.join();
    const exchange_rate = Number(quote.toTokenAmount) / Number(quote.fromTokenAmount);
    document.querySelector('.js-quote-container').innerHTML = `
        <p>1 ${quote.fromToken.symbol} = ${exchange_rate} ${quote.toToken.symbol}</p>
        <p>Gas fee: ${quote.estimatedGas}</p>
    `;
    } catch(e){
        document.querySelector('.js-quote-container').innerHTML = `The conversion didn't succeed`;
    }
    

}

document
    .querySelector('.js-submit-quote')
    .addEventListener('click', formSubmitted);


getTop10Tokens()
    .then(getTickerData)
    .then(renderForm);

Can you please tell me where it went wrong?

Thanks in advance!

// to get the value 
 const fromToken = document.querySelector('[name=from-token]').value;
 const toToken = document.querySelector('[name=to-token]').value;
const quote = await response.json()

Thanks a lot! Everything works.

1 Like