Repository: chrisleekr/binance-trading-bot
File: public/js/CoinWrapperBuySignal.js (JavaScript)

Code before:
    const {
      symbolInfo: {
        symbolInfo: {
          symbol,
          filterPrice: { tickSize }
        },
        quoteAssetBalance: { asset: quoteAsset },
        symbolConfiguration,
        buy,
        sell
      },
      sendWebSocket,
      isAuthenticated
    } = this.props;
    const { collapsed } = this.state;

    const precision = parseFloat(tickSize) === 1 ? 0 : tickSize.indexOf(1) - 1;

    const {
      buy: { currentGridTradeIndex, gridTrade }
    } = symbolConfiguration;

    const buyGridRows = gridTrade.map((grid, i) => {
      const modifiedGridTradeIndex = Math.min( Math.max ( currentGridTradeIndex , 7 ) , gridTrade.length - 4 );
      return i >= 5 && ( i <= modifiedGridTradeIndex - 3 || i >= modifiedGridTradeIndex + 3 ) && i !== gridTrade.length - 1 ? ('') : (
        <React.Fragment key={'coin-wrapper-buy-grid-row-' + symbol + '-' + i}>
          <div className='coin-info-column-grid'>
            <div className='coin-info-column coin-info-column-price'>
              <div className='coin-info-label'>Grid Trade #{i + 1}</div>

              <div className='coin-info-value'>
                {buy.openOrders.length === 0 &&
                sell.openOrders.length === 0 &&
                currentGridTradeIndex === i ? (
                  <SymbolTriggerBuyIcon
                    symbol={symbol}
                    sendWebSocket={sendWebSocket}
                    isAuthenticated={isAuthenticated}></SymbolTriggerBuyIcon>
                ) : (
                  ''
                )}

                <OverlayTrigger
                  trigger='click'
                  key={'buy-signal-' + symbol + '-' + i + '-overlay'}
                  placement='bottom'
                  overlay={
                    <Popover
                      id={'buy-signal-' + symbol + '-' + i + '-overlay-right'}>
                      <Popover.Content>
                        {grid.executed ? (

Review comment (suggestion):
I am not sure about this change.

Are you saying you have a grid settings of more than 10? Wow...
I am not sure there are traders who are using that many grid settings.

Ok, let's say you do have lots of grid settings, the below screenshot made me so confused "Where is my Grid 11?"

<img width="329" alt="Screen Shot 2022-08-02 at 22 08 44" src="https://user-images.githubusercontent.com/5715919/182371119-920bd574-cb94-4b91-b2c3-1b932c0a4289.png">

Is it possible you can display a collapsed indicator such as `...5 grid trade hidden...` for hidden grid settings?
And when click the column, it shows the hidden columns. 

I just don't want to hide without any indicator.

I know I am asking for more changes (So sorry 🙏). 
If you don't have time, let's keep it original. We can merge without this change.

Again, sorry to ask for changes. @uhliksk 
 
Other changes are good to go!

Code after:
    const {
      symbolInfo: {
        symbolInfo: {
          symbol,
          filterPrice: { tickSize }
        },
        quoteAssetBalance: { asset: quoteAsset },
        symbolConfiguration,
        buy,
        sell
      },
      sendWebSocket,
      isAuthenticated
    } = this.props;
    const { collapsed } = this.state;

    const precision = parseFloat(tickSize) === 1 ? 0 : tickSize.indexOf(1) - 1;

    const {
      buy: { currentGridTradeIndex, gridTrade }
    } = symbolConfiguration;

    let hiddenCount = 0;

    const buyGridRows = gridTrade.map((grid, i) => {
      const modifiedGridTradeIndex = Math.min( Math.max ( currentGridTradeIndex , 5 ) , gridTrade.length - 5 );

      function hiddenRow(i) {
        return i >= 3 && ( i <= modifiedGridTradeIndex - 3 || i >= modifiedGridTradeIndex + 4 ) && i < gridTrade.length - 1;
      }

      const isNextHidden = hiddenRow( i + 1 );
      const isHidden = isNextHidden || hiddenRow( i );

      if ( isHidden === true ) {
        hiddenCount++;

        return isNextHidden === true ? ('') : (
        <React.Fragment key={'coin-wrapper-buy-grid-row-hidden-' + symbol + '-' + (i - 1)}>
          <div className='coin-info-column-grid'>
            <div className='coin-info-column coin-info-column-price'>
              <div className='coin-info-label text-center'>... {hiddenCount} grid trade{hiddenCount === 1 ? '' : 's'} hidden ...</div>
            </div>
          </div>
        </React.Fragment>
        );
      } else {
        hiddenCount = 0;
      }

      return (