CryptoRank Exchange

  • + 0 comments

    Lazy solution and not really optimized, I know:

    import React from "react";
    import { cryptocurrencyList } from "../cryptocurrency-list";
    
    const bal = 17042.67
    
    function roundTo8Decimals(num) {
      return Number(num.toFixed(8));
    }
    
    function isNumber(value) {
      return typeof value === 'number';
    }
    
    function Main() {
      const [val, setVal] = React.useState()
      const [error, setError] = React.useState()
      const isFirstRenderRef = React.useRef(true);
    
      React.useEffect(() => {
        if (isFirstRenderRef.current) {
          isFirstRenderRef.current = false;
          return
        }
    
        if (val === '') { 
          setError('Amount cannot be empty'); 
        } else if (val < 0.01) { 
          setError('Amount cannot be less than $0.01'); 
        } else if (val > 17042.67) {
          setError('Amount cannot exceed the available balance');
        } else {
          setError(); 
        }
      }, [val])
    
      return (
        <div className="layout-column align-items-center mx-auto">
          <h1>CryptoRank Exchange</h1>
          <section>
            <div className="card-text layout-column align-items-center mt-12 px-8 flex text-center">
              <label>
                I want to exchange $ <input className="w-10" data-testid="amount-input" required type="number" placeholder="USD" onChange={(e) => setVal(e.target.value)} value={val} /> of my $
                <span>{bal}</span>:
              </label>
    
              {error && <p data-testid="error" className="form-hint error-text mt-3 pl-0 ml-0">
                {error}
              </p>}
            </div>
          </section>
    
          <div className="card card-text mt-10 mx-4">
            <table className="mb-0">
              <thead>
                <tr>
                  <th>Cryptocurrency</th>
                  <th>Exchange Rate</th>
                  <th>Number of Coins</th>
                </tr>
              </thead>
              <tbody data-testid="exchange-data">
                {cryptocurrencyList.map((crypto, idx) => {
                  return (<tr key={idx}>
                    <td>{crypto.name}</td>
                    <td>1 USD = {crypto.rate} {crypto.code}</td>
                    <td>
                      {val && !error && roundTo8Decimals(val * crypto.rate)}
                      {!val && !error && '0.00000000'}
                      {error && 'n/a'}
                    </td>
                  </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
    
        </div>
      );
    }
    
    export default Main;