---

const contractsInstrumentName = useWidgetHeaderName(currentSymbolInfo.symbolId);

const chartSymbolInfo: SymbolInfoInput | undefined = indicativeData
  ? {
      symbolId: indicativeData.key,
      symbol: indicativeData.secId,
      symbolName: `${indicativeData.instrumentName} ${indicativeData.settlement} - ${indicativeData.firmName}`,
    }
  : currentSymbolInfo.symbolId === DEFAULT_SYMBOL
    ? undefined
    : currentSymbolInfo;

const instrumentName =
  chartSymbolInfo?.symbolName ||
  contractsInstrumentName ||
  chartSymbolInfo?.symbol ||
  '';

return (
  <DNDWrapper
    ref={dropRef}
    isOver={isOver}
    canDrop
  >
    <WidgetHeader
      {...props}
      dropdownOpen={dropDownOpen}
      setDropdownOpen={setDropdownOpen}
      itemsSearchIcon={[true]}
      handlerSaveAsExcel={null}
      addToWidgetNamePrefix={instrumentName}
      setIsOpenContextMenuFromWidget={setIsWidgetHeaderContextMenuOpen}
      isOpenContextMenuFromWidget={isWidgetHeaderContextMenuOpen}
      openInstrumentsModal={openInstrumentModal}
    />

    <WidgetContentWrapper {...props}>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          height: '100%',
          pointerEvents: isDraggedOver ? 'none' : 'inherit',
        }}
      >
        <MoexChart
          symbolInfo={chartSymbolInfo}
          indicativeData={indicativeData}
          widgetId={props.widgetId}
          addInstrumentFromModal={addInstrumentFromModal}
        />

        {isOpenEmptyAction && (
          <InstrumentSearch
            setOpen={setIsOpenEmptyAction}
            isOpen={isOpenEmptyAction}
            variant="single"
            widgetId={props.widgetId}
            // withNRD={false}
            addInstruments={addInstrumentFromModal}
          />
        )}
      </div>
    </WidgetContentWrapper>
  </DNDWrapper>
);