smartxtrader 3.8.1-xm.0

package/src/templates/app/trade/trading.jsx

@@ -0,0 +1,1829 @@
+import React from "react";
+import {
+  IconAdjustments,
+  IconBinary,
+  IconChartCandle,
+  IconChartDots,
+  IconChartLine,
+  IconHexagon,
+  IconSettings,
+  IconStepInto,
+  IconX,
+  IconTable,
+} from "@tabler/icons-react";
+import Analysis from "./analysis.jsx";
+import Loading from "../../_common/components/loading.jsx";
+
+const Trading = () => (
+  <div id="trading_socket_container">
+    <section className="trading-container">
+      <div className="contained-section">
+        <div>
+          <div id="notifications_wrapper" />
+          <div id="loading_container" className="overlay_container" />
+
+          <div className="market-chart-card">
+            <div className="market-chart-card__row">
+              <div className="market-chart-card__selectors">
+                <div id="markets-dropdown-container" />
+              </div>
+              <div className="market-chart-card__chart">
+                <div className="market-navigation-container">
+                  <div className="sub-navigation-container">
+                    <div id="underlying_details">
+                      <div className="worm-chart-panel">
+                        <div className="worm-chart-panel__chart">
+                          <span
+                            id="trading_worm_chart"
+                            className="worm-chart-panel__canvas"
+                            style={{ backgroundColor: "transparent" }}
+                          />
+                        </div>
+
+                        <div className="tick-table-panel">
+                          <div
+                            id="tick_table_compact_tape_container"
+                            className="tick-table-tape"
+                          >
+                            <div
+                              id="tick_table_compact_tape"
+                              className="tick-table-compact__tape tick-table-compact__tape--empty"
+                              aria-hidden="true"
+                            >
+                              {Array.from({ length: 10 }, (_, index) => (
+                                <div
+                                  key={index}
+                                  data-role="tick-compact-tape-cell"
+                                  className="tick-table-compact__tape-cell"
+                                />
+                              ))}
+                            </div>
+                            <div
+                              id="tick_table_compact_headline"
+                              className="tick-table-compact__headline tick-table-compact__headline--hidden"
+                              aria-hidden="true"
+                            />
+                          </div>
+                          <div
+                            id="tick_table_compact"
+                            className="tick-table-compact"
+                            aria-hidden="false"
+                          >
+                            <div
+                              id="tick_table_compact_columns"
+                              className="tick-table-compact__columns"
+                            >
+                              {Array.from({ length: 10 }, (_, index) => (
+                                <div
+                                  key={index}
+                                  data-role="tick-compact-column"
+                                  className="tick-table-compact__column"
+                                >
+                                  <div
+                                    data-role="tick-compact-upper"
+                                    className="tick-table-compact__cell tick-table-compact__cell--upper"
+                                  />
+                                  <div
+                                    data-role="tick-compact-lower"
+                                    className="tick-table-compact__cell tick-table-compact__cell--lower"
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                          <div
+                            id="tick_table_parity"
+                            className="tick-table-compact tick-table-compact--parity tick-table-compact--hidden aui-animated"
+                            aria-hidden="true"
+                          >
+                            <div
+                              id="tick_table_parity_columns"
+                              className="tick-table-compact__columns"
+                            >
+                              {Array.from({ length: 10 }, (_, index) => (
+                                <div
+                                  key={index}
+                                  data-role="tick-compact-parity-column"
+                                  className="tick-table-compact__column"
+                                >
+                                  <div
+                                    data-role="tick-compact-parity-cell"
+                                    className="tick-table-compact__cell tick-table-compact__cell--upper"
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                          <div
+                            id="tick_table_container"
+                            className="tick-table tick-table--hidden"
+                            aria-live="polite"
+                          >
+                            <table className="tick-table__table">
+                              <thead className="tick-table__header">
+                                <tr>
+                                  <th scope="col">{it.L("Tick")}</th>
+                                  <th scope="col">{it.L("Spot value")}</th>
+                                  <th scope="col">{it.L("Last digit")}</th>
+                                  <th scope="col">{it.L("Direction")}</th>
+                                </tr>
+                              </thead>
+                              <tbody
+                                id="tick_table_body"
+                                className="tick-table__body"
+                              >
+                                {Array.from({ length: 10 }, (_, index) => (
+                                  <tr
+                                    key={index}
+                                    data-role="tick-row"
+                                    className="tick-table__row tick-table__row--empty"
+                                  >
+                                    <td
+                                      data-role="tick-sequence"
+                                      className="tick-table__cell tick-table__cell--sequence"
+                                    />
+                                    <td
+                                      data-role="tick-value"
+                                      className="tick-table__cell tick-table__cell--value"
+                                    />
+                                    <td
+                                      data-role="tick-digit"
+                                      className="tick-table__cell tick-table__cell--digit"
+                                    />
+                                    <td
+                                      data-role="tick-direction"
+                                      className="tick-table__cell tick-table__cell--direction"
+                                    >
+                                      <span
+                                        data-role="tick-direction-label"
+                                        className="tick-table__direction-label"
+                                      />
+                                    </td>
+                                  </tr>
+                                ))}
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+
+                        <div className="worm-chart-panel__actions">
+                          <div className="worm-chart-panel__action-group worm-chart-panel__action-group--chart">
+                            <div
+                              id="worm_chart_mode_toggle"
+                              className="worm-chart-panel__mode-dropdown"
+                            >
+                              <button
+                                type="button"
+                                className="worm-chart-panel__action-button worm-chart-panel__action-button--mode"
+                                data-role="worm-mode-trigger"
+                                aria-haspopup="dialog"
+                                aria-expanded="false"
+                                aria-controls="worm_chart_mode_menu"
+                                aria-label={it.L("Chart mode: Neon line")}
+                              >
+                                <IconChartDots
+                                  aria-hidden="true"
+                                  data-mode-icon="tick"
+                                  className="worm-chart-panel__action-icon worm-chart-panel__mode-icon"
+                                  size={18}
+                                />
+                                <IconChartCandle
+                                  aria-hidden="true"
+                                  data-mode-icon="candlestick"
+                                  className="worm-chart-panel__action-icon worm-chart-panel__mode-icon"
+                                  size={18}
+                                />
+                                <IconChartLine
+                                  aria-hidden="true"
+                                  data-mode-icon="neon-line"
+                                  className="worm-chart-panel__action-icon worm-chart-panel__mode-icon worm-chart-panel__mode-icon--active"
+                                  size={18}
+                                />
+                                <span
+                                  data-role="worm-mode-label"
+                                  className="worm-chart-panel__visually-hidden"
+                                >
+                                  {it.L("Neon line")}
+                                </span>
+                              </button>
+
+                            </div>
+                          </div>
+
+                          <div className="worm-chart-panel__action-group worm-chart-panel__action-group--settings">
+                            <button
+                              type="button"
+                              id="worm_chart_settings_btn"
+                              className="worm-chart-panel__action-button"
+                              aria-label={it.L("Chart settings")}
+                            >
+                              <IconSettings
+                                aria-hidden="true"
+                                className="worm-chart-panel__action-icon"
+                                size={18}
+                              />
+                            </button>
+                            <button
+                              type="button"
+                              id="candle_settings_btn"
+                              className="worm-chart-panel__action-button"
+                              aria-label={it.L("Candle settings")}
+                            >
+                              <IconAdjustments
+                                aria-hidden="true"
+                                className="worm-chart-panel__action-icon"
+                                size={18}
+                              />
+                            </button>
+                          </div>
+
+                          <div className="worm-chart-panel__action-group worm-chart-panel__action-group--tables">
+                            <button
+                              type="button"
+                              id="tick_table_parity_toggle"
+                              className="tick-table__toggle worm-chart-panel__action-button"
+                              aria-expanded="false"
+                              aria-controls="tick_table_parity"
+                              aria-label={it.L("Expand binary tick table")}
+                            >
+                              <IconBinary
+                                aria-hidden="true"
+                                className="worm-chart-panel__action-icon"
+                                size={18}
+                              />
+                            </button>
+                            <button
+                              type="button"
+                              id="tick_table_toggle"
+                              className="tick-table__toggle worm-chart-panel__action-button"
+                              aria-expanded="false"
+                              aria-controls="tick_table_container tick_table_compact tick_table_compact_tape_container"
+                              aria-label={it.L("Expand tick table")}
+                            >
+                              <IconTable
+                                aria-hidden="true"
+                                className="worm-chart-panel__action-icon"
+                                size={18}
+                              />
+                            </button>
+                          </div>
+                        </div>
+
+                        <div
+                          id="parity_logic_menu"
+                          className="parity-logic-menu parity-logic-menu--hidden"
+                          role="dialog"
+                          aria-modal="true"
+                          aria-labelledby="parity_logic_menu_title"
+                        >
+                          <div className="parity-logic-menu__content">
+                            <div className="parity-logic-menu__header">
+                              <div className="parity-logic-menu__title-wrap">
+                                <IconHexagon
+                                  aria-hidden="true"
+                                  className="parity-logic-menu__title-icon"
+                                  size={22}
+                                />
+                                <h3
+                                  id="parity_logic_menu_title"
+                                  className="parity-logic-menu__title"
+                                >
+                                  {it.L("Choose binary coloring logic")}
+                                </h3>
+                              </div>
+                              <button
+                                type="button"
+                                id="parity_logic_menu_close"
+                                className="parity-logic-menu__close"
+                                aria-label={it.L("Close binary options")}
+                              >
+                                <IconX aria-hidden="true" size={18} />
+                              </button>
+                            </div>
+                            <div className="parity-logic-menu__options">
+                              <label className="parity-logic-menu__option">
+                                <input
+                                  type="radio"
+                                  name="parity_logic_mode"
+                                  value="direct"
+                                  defaultChecked
+                                />
+                                <span
+                                  className="parity-logic-menu__option-glow"
+                                  aria-hidden="true"
+                                />
+                                <span
+                                  className="parity-logic-menu__option-icon"
+                                  aria-hidden="true"
+                                >
+                                  <IconBinary size={22} />
+                                </span>
+                                <span className="parity-logic-menu__option-body">
+                                  <span className="parity-logic-menu__option-label">
+                                    {it.L("Direct coloring")}
+                                  </span>
+                                  <span className="parity-logic-menu__option-hint">
+                                    {it.L(
+                                      "Keep the original up/down zones for 0/1 digits.",
+                                    )}
+                                  </span>
+                                </span>
+                              </label>
+                              <label className="parity-logic-menu__option">
+                                <input
+                                  type="radio"
+                                  name="parity_logic_mode"
+                                  value="step"
+                                />
+                                <span
+                                  className="parity-logic-menu__option-glow"
+                                  aria-hidden="true"
+                                />
+                                <span
+                                  className="parity-logic-menu__option-icon"
+                                  aria-hidden="true"
+                                >
+                                  <IconStepInto size={22} />
+                                </span>
+                                <span className="parity-logic-menu__option-body">
+                                  <span className="parity-logic-menu__option-label">
+                                    {it.L("Directional parity coloring")}
+                                  </span>
+                                  <span className="parity-logic-menu__option-hint">
+                                    {it.L(
+                                      "Convert digits to parity bits and color them by signed direction changes between ticks.",
+                                    )}
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                            <div className="parity-logic-menu__footer">
+                              <button
+                                type="button"
+                                id="parity_logic_menu_cancel"
+                                className="button-secondary parity-logic-menu__action"
+                              >
+                                {it.L("Cancel")}
+                              </button>
+                              <button
+                                type="button"
+                                id="parity_logic_menu_apply"
+                                className="button parity-logic-menu__action parity-logic-menu__action--primary"
+                              >
+                                {it.L("Apply")}
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div
+                          className="worm-chart-panel__spot"
+                          aria-live="polite"
+                        >
+                          <span id="spot" />
+                        </div>
+
+                        <div
+                          className="worm-chart-panel__progress"
+                          id="worm_progress_panel"
+                        >
+                          <div
+                            className="worm-chart-panel__progress-bar"
+                            role="progressbar"
+                            aria-valuemin="0"
+                            aria-valuemax="100"
+                            aria-valuenow="0"
+                          >
+                            <span
+                              id="worm_progress_fill"
+                              className="worm-chart-panel__progress-fill"
+                            />
+                            <div
+                              className="worm-chart-panel__progress-inline"
+                              aria-live="polite"
+                            >
+                              <span
+                                id="worm_progress_label"
+                                className="worm-chart-panel__progress-percentage"
+                              >
+                                0%
+                              </span>
+                              <span
+                                id="worm_progress_compact"
+                                className="worm-chart-panel__stat"
+                              >
+                                0/0
+                              </span>
+                            </div>
+                            <div
+                              className="worm-chart-panel__progress-tooltip"
+                              role="tooltip"
+                              aria-live="polite"
+                            >
+                              <span id="worm_progress_success_detail" />
+                              <span id="worm_progress_total_detail" />
+                              <span id="worm_progress_expectancy_detail" />
+                              <span id="worm_progress_avg_pnl_detail" />
+                            </div>
+                          </div>
+                          <div className="worm-chart-panel__progress-controls">
+                            <select
+                              id="worm_progress_indicator"
+                              className="worm-chart-panel__progress-input worm-chart-panel__progress-selector"
+                              aria-label={it.L("Progress indicator")}
+                              defaultValue="winrate"
+                            >
+                              <optgroup label={it.L("Trading progress")}>
+                                <option value="winrate">
+                                  {it.L("Win rate")}
+                                </option>
+                                <option value="expectancy">
+                                  {it.L("Expectancy")}
+                                </option>
+                              </optgroup>
+                              <optgroup label={it.L("Money management")}>
+                                <option value="profit_factor">
+                                  {it.L("Profit factor")}
+                                </option>
+                              </optgroup>
+                              <optgroup label={it.L("Risk management")}>
+                                <option value="risk_compliance">
+                                  {it.L("Risk per trade")}
+                                </option>
+                              </optgroup>
+                              <optgroup label={it.L("Custom")}>
+                                <option value="custom_metric">
+                                  {it.L("Custom")}
+                                </option>
+                              </optgroup>
+                            </select>
+                          </div>
+                          <button
+                            type="button"
+                            id="worm_progress_settings_toggle"
+                            className="worm-chart-panel__progress-settings"
+                            aria-label={it.L("Progress settings")}
+                          >
+                            <IconSettings size={14} stroke={1.25} />
+                          </button>
+                          <div
+                            id="worm_progress_settings"
+                            className="worm-chart-panel__progress-settings-panel"
+                            role="dialog"
+                            aria-modal="false"
+                            aria-hidden="true"
+                          >
+                            <div className="worm-chart-panel__progress-mode">
+                              <label className="worm-chart-panel__progress-mode-option">
+                                <input
+                                  type="radio"
+                                  name="worm_progress_mode"
+                                  id="worm_progress_mode_trades"
+                                  value="trades"
+                                  defaultChecked
+                                />
+                                {it.L("Last trades")}
+                              </label>
+                              <label className="worm-chart-panel__progress-mode-option">
+                                <input
+                                  type="radio"
+                                  name="worm_progress_mode"
+                                  id="worm_progress_mode_period"
+                                  value="period"
+                                />
+                                {it.L("By period")}
+                              </label>
+                            </div>
+                            <label
+                              htmlFor="worm_progress_window"
+                              className="worm-chart-panel__progress-settings-label"
+                            >
+                              {it.L("Window size")}
+                            </label>
+                            <input
+                              id="worm_progress_window"
+                              type="number"
+                              min="1"
+                              max="200"
+                              className="worm-chart-panel__progress-input"
+                              defaultValue="20"
+                            />
+                            <label
+                              htmlFor="worm_progress_period_unit"
+                              className="worm-chart-panel__progress-settings-label"
+                            >
+                              {it.L("Period unit")}
+                            </label>
+                            <select
+                              id="worm_progress_period_unit"
+                              className="worm-chart-panel__progress-input"
+                              defaultValue="hours"
+                            >
+                              <option value="hours">{it.L("Hours")}</option>
+                              <option value="days">{it.L("Days")}</option>
+                            </select>
+                            <div className="worm-chart-panel__progress-custom">
+                              <label
+                                htmlFor="worm_progress_custom_target"
+                                className="worm-chart-panel__progress-settings-label"
+                              >
+                                {it.L("Custom target (%)")}
+                              </label>
+                              <input
+                                id="worm_progress_custom_target"
+                                type="number"
+                                min="0"
+                                max="100"
+                                className="worm-chart-panel__progress-input"
+                                defaultValue="70"
+                              />
+                              <label
+                                htmlFor="worm_progress_custom_floor"
+                                className="worm-chart-panel__progress-settings-label"
+                              >
+                                {it.L("Custom floor (%)")}
+                              </label>
+                              <input
+                                id="worm_progress_custom_floor"
+                                type="number"
+                                min="0"
+                                max="100"
+                                className="worm-chart-panel__progress-input"
+                                defaultValue="30"
+                              />
+                            </div>
+                            <button
+                              type="button"
+                              id="worm_progress_settings_apply"
+                              className="button-secondary worm-chart-panel__progress-apply"
+                            >
+                              {it.L("Apply")}
+                            </button>
+                          </div>
+                          </div>
+                        </div>
+
+                        <div
+                          id="worm_chart_mode_menu"
+                          className="worm-chart-panel__mode-modal"
+                          role="dialog"
+                          aria-modal="true"
+                          aria-labelledby="worm_chart_mode_menu_title"
+                          aria-hidden="true"
+                          data-role="worm-mode-menu"
+                        >
+                          <div className="worm-chart-panel__mode-modal__dialog">
+                            <div className="worm-chart-panel__mode-modal__header">
+                              <h3
+                                id="worm_chart_mode_menu_title"
+                                className="worm-chart-panel__mode-modal__title"
+                              >
+                                {it.L("Chart mode")}
+                              </h3>
+                              <button
+                                type="button"
+                                className="worm-chart-panel__mode-modal__close"
+                                data-role="worm-mode-close"
+                                aria-label={it.L("Close chart mode")}
+                              >
+                                <IconX aria-hidden="true" size={18} />
+                              </button>
+                            </div>
+
+                            <div className="worm-chart-panel__mode-modal__body">
+                              <div
+                                className="worm-chart-panel__mode-options"
+                                role="group"
+                                aria-label={it.L("Chart type")}
+                              >
+                                <button
+                                  type="button"
+                                  data-worm-mode="tick"
+                                  className="worm-chart-panel__mode-option"
+                                  role="menuitemradio"
+                                  aria-checked="false"
+                                >
+                                  <IconChartDots
+                                    aria-hidden="true"
+                                    className="worm-chart-panel__mode-option-icon"
+                                    size={16}
+                                  />
+
+                                  <span className="worm-chart-panel__mode-option-label">
+                                    {it.L("Neon ticks")}
+                                  </span>
+                                </button>
+
+                                <button
+                                  type="button"
+                                  data-worm-mode="candlestick"
+                                  className="worm-chart-panel__mode-option"
+                                  role="menuitemradio"
+                                  aria-checked="false"
+                                >
+                                  <IconChartCandle
+                                    aria-hidden="true"
+                                    className="worm-chart-panel__mode-option-icon"
+                                    size={16}
+                                  />
+
+                                  <span className="worm-chart-panel__mode-option-label">
+                                    {it.L("Neon candles")}
+                                  </span>
+                                </button>
+
+                                <button
+                                  type="button"
+                                  data-worm-mode="neon-line"
+                                  className="worm-chart-panel__mode-option"
+                                  role="menuitemradio"
+                                  aria-checked="true"
+                                >
+                                  <IconChartLine
+                                    aria-hidden="true"
+                                    className="worm-chart-panel__mode-option-icon"
+                                    size={16}
+                                  />
+
+                                  <span className="worm-chart-panel__mode-option-label">
+                                    {it.L("Neon line")}
+                                  </span>
+                                </button>
+                              </div>
+
+                              <hr
+                                className="worm-chart-panel__divider"
+                                role="separator"
+                                aria-hidden="true"
+                              />
+
+                              <div
+                                className="worm-chart-panel__mode-controls"
+                                aria-label={it.L("Chart display toggles")}
+                              >
+                                <label className="worm-chart-panel__mode-control">
+                                  <span className="worm-chart-panel__mode-control-label">
+                                    {it.L("Last breakout only")}
+                                  </span>
+                                  <span className="worm-chart-panel__mode-switch">
+                                    <input
+                                      id="tick_table_headline_last_tick_only"
+                                      type="checkbox"
+                                      className="worm-chart-panel__mode-checkbox"
+                                    />
+                                    <span
+                                      className="worm-chart-panel__mode-switch-track"
+                                      aria-hidden="true"
+                                    >
+                                      <span className="worm-chart-panel__mode-switch-thumb" />
+                                    </span>
+                                  </span>
+                                </label>
+                                <label className="worm-chart-panel__mode-control">
+                                  <span className="worm-chart-panel__mode-control-label">
+                                    {it.L("Show in-range marks")}
+                                  </span>
+                                  <span className="worm-chart-panel__mode-switch">
+                                    <input
+                                      id="tick_table_headline_show_inrange"
+                                      type="checkbox"
+                                      className="worm-chart-panel__mode-checkbox"
+                                    />
+                                    <span
+                                      className="worm-chart-panel__mode-switch-track"
+                                      aria-hidden="true"
+                                    >
+                                      <span className="worm-chart-panel__mode-switch-thumb" />
+                                    </span>
+                                  </span>
+                                </label>
+                                <div
+                                  className="worm-chart-panel__mode-control-group"
+                                  aria-label={it.L("Marker label mode")}
+                                >
+                                  <span className="worm-chart-panel__mode-control-title">
+                                    {it.L("Labels")}
+                                  </span>
+                                  <label className="worm-chart-panel__mode-control">
+                                    <span className="worm-chart-panel__mode-control-label">
+                                      {it.L("Last digit")}
+                                    </span>
+                                    <span className="worm-chart-panel__mode-switch">
+                                      <input
+                                        type="checkbox"
+                                        value="last"
+                                        data-role="worm-marker-label-mode"
+                                        className="worm-chart-panel__mode-checkbox"
+                                      />
+                                      <span
+                                        className="worm-chart-panel__mode-switch-track"
+                                        aria-hidden="true"
+                                      >
+                                        <span className="worm-chart-panel__mode-switch-thumb" />
+                                      </span>
+                                    </span>
+                                  </label>
+                                  <label className="worm-chart-panel__mode-control">
+                                    <span className="worm-chart-panel__mode-control-label">
+                                      {it.L("Full spot")}
+                                    </span>
+                                    <span className="worm-chart-panel__mode-switch">
+                                      <input
+                                        type="checkbox"
+                                        value="full"
+                                        data-role="worm-marker-label-mode"
+                                        className="worm-chart-panel__mode-checkbox"
+                                      />
+                                      <span
+                                        className="worm-chart-panel__mode-switch-track"
+                                        aria-hidden="true"
+                                      >
+                                        <span className="worm-chart-panel__mode-switch-thumb" />
+                                      </span>
+                                    </span>
+                                  </label>
+                                  <label className="worm-chart-panel__mode-control">
+                                    <span className="worm-chart-panel__mode-control-label">
+                                      {it.L("Head & extremes")}
+                                    </span>
+                                    <span className="worm-chart-panel__mode-switch">
+                                      <input
+                                        type="checkbox"
+                                        value="extremes"
+                                        data-role="worm-marker-label-mode"
+                                        className="worm-chart-panel__mode-checkbox"
+                                      />
+                                      <span
+                                        className="worm-chart-panel__mode-switch-track"
+                                        aria-hidden="true"
+                                      >
+                                        <span className="worm-chart-panel__mode-switch-thumb" />
+                                      </span>
+                                    </span>
+                                  </label>
+                                  <label className="worm-chart-panel__mode-control">
+                                    <span className="worm-chart-panel__mode-control-label">
+                                      {it.L("No labels")}
+                                    </span>
+                                    <span className="worm-chart-panel__mode-switch">
+                                      <input
+                                        type="checkbox"
+                                        value="none"
+                                        data-role="worm-marker-label-mode"
+                                        className="worm-chart-panel__mode-checkbox"
+                                      />
+                                      <span
+                                        className="worm-chart-panel__mode-switch-track"
+                                        aria-hidden="true"
+                                      >
+                                        <span className="worm-chart-panel__mode-switch-thumb" />
+                                      </span>
+                                    </span>
+                                  </label>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div
+                          id="worm_chart_settings_modal"
+                          className="worm-chart-settings-modal worm-chart-settings-modal--top-aligned"
+                          role="dialog"
+                          aria-modal="true"
+                          aria-hidden="true"
+                          aria-labelledby="worm_chart_settings_title"
+                        >
+                          <div className="worm-chart-settings-modal__content">
+                            <div className="worm-chart-settings-modal__header">
+                              <h2
+                                id="worm_chart_settings_title"
+                                className="worm-chart-settings-modal__title"
+                              >
+                                {it.L("Chart settings")}
+                              </h2>
+                              <button
+                                type="button"
+                                id="worm_chart_settings_close"
+                                className="worm-chart-settings-modal__close"
+                                aria-label={it.L("Close")}
+                              >
+                                ×
+                              </button>
+                            </div>
+                            <div className="worm-chart-settings-modal__body">
+                              <label htmlFor="worm_chart_tick_count">
+                                {it.L("Number of displayed ticks")}
+                              </label>
+                              <input
+                                id="worm_chart_tick_count"
+                                type="number"
+                              min="1"
+                              max="20"
+                              className="worm-chart-settings-modal__input"
+                            />
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L("Enter a value between 1 and 20 ticks.")}
+                            </p>
+                            <label htmlFor="worm_chart_pre_display_ticks">
+                              {it.L("Ticks to show before trade start")}
+                            </label>
+                            <input
+                              id="worm_chart_pre_display_ticks"
+                              type="number"
+                              min="0"
+                              max="20"
+                              className="worm-chart-settings-modal__input"
+                            />
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Add extra ticks for context without changing the trade result length.",
+                              )}
+                            </p>
+                            <div className="worm-chart-settings-modal__toggle">
+                              <input
+                                id="worm_chart_tooltip_toggle"
+                                type="checkbox"
+                                className="worm-chart-settings-modal__checkbox"
+                              />
+                              <label htmlFor="worm_chart_tooltip_toggle">
+                                {it.L("Show spot tooltips")}
+                              </label>
+                            </div>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Toggle to display or hide spot values in tooltips.",
+                              )}
+                            </p>
+                            <div className="worm-chart-settings-modal__toggle">
+                              <input
+                                id="worm_chart_spot_value_toggle"
+                                type="checkbox"
+                                className="worm-chart-settings-modal__checkbox"
+                              />
+                              <label htmlFor="worm_chart_spot_value_toggle">
+                                {it.L("Show spot value under the chart")}
+                              </label>
+                            </div>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Toggle to display or hide the spot value label below the chart.",
+                              )}
+                            </p>
+                            <div className="worm-chart-settings-modal__toggle">
+                              <input
+                                id="worm_chart_auto_close_toggle"
+                                type="checkbox"
+                                className="worm-chart-settings-modal__checkbox"
+                              />
+                              <label htmlFor="worm_chart_auto_close_toggle">
+                                {it.L("Auto close trade results window")}
+                              </label>
+                            </div>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Automatically close the trade result window after the selected delay in seconds.",
+                              )}
+                            </p>
+                            <label htmlFor="worm_chart_type">
+                              {it.L("Chart type")}
+                            </label>
+                            <select
+                              id="worm_chart_type"
+                              className="worm-chart-settings-modal__input worm-chart-settings-modal__select"
+                            >
+                              <option value="line">{it.L("Line")}</option>
+                              <option value="spline">{it.L("Spline")}</option>
+                              <option value="stepLine">
+                                {it.L("Step line")}
+                              </option>
+                              <option value="area">{it.L("Area")}</option>
+                            </select>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L("Choose how the chart line is drawn.")}
+                            </p>
+                            <label htmlFor="worm_chart_marker_font_size">
+                              {it.L("Marker label font size")}
+                            </label>
+                            <input
+                              id="worm_chart_marker_font_size"
+                              type="number"
+                              min="8"
+                              max="24"
+                              className="worm-chart-settings-modal__input"
+                            />
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L("Enter a value between 8 and 24 points.")}
+                            </p>
+                            <label htmlFor="worm_chart_marker_font_weight">
+                              {it.L("Marker label font weight")}
+                            </label>
+                            <select
+                              id="worm_chart_marker_font_weight"
+                              className="worm-chart-settings-modal__input"
+                            >
+                              <option value="normal">{it.L("Normal")}</option>
+                              <option value="bold">{it.L("Bold")}</option>
+                            </select>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Choose how thick the marker labels appear.",
+                              )}
+                            </p>
+                            <label htmlFor="worm_chart_tick_decimal_places">
+                              {it.L("Tick value decimal places")}
+                            </label>
+                            <input
+                              id="worm_chart_tick_decimal_places"
+                              type="number"
+                              min="0"
+                              max="8"
+                              className="worm-chart-settings-modal__input"
+                            />
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Control how many decimal places are shown for tick values on the chart.",
+                              )}
+                            </p>
+                            <label htmlFor="tick_table_compact_extra_cells">
+                              {it.L("Additional left compact cells")}
+                            </label>
+                            <input
+                              id="tick_table_compact_extra_cells"
+                              type="number"
+                              min="0"
+                              max="20"
+                              className="worm-chart-settings-modal__input"
+                            />
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Add extra cells to the left side of the compact tick table.",
+                              )}
+                            </p>
+                            <button
+                              type="button"
+                              id="worm_chart_move_chart"
+                              className="worm-chart-settings-modal__link-button"
+                              aria-label={it.L(
+                                "Open move chart panel to adjust chart offsets",
+                              )}
+                            >
+                              {it.L("Move chart")}
+                            </button>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Open the move chart panel to adjust horizontal and vertical offsets with sliders.",
+                              )}
+                            </p>
+                            <div className="worm-chart-settings-modal__toggle">
+                              <input
+                                id="worm_chart_marker_label_toggle"
+                                type="checkbox"
+                                className="worm-chart-settings-modal__checkbox"
+                              />
+                              <label htmlFor="worm_chart_marker_label_toggle">
+                                {it.L("Show full spot value on markers")}
+                              </label>
+                            </div>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Toggle to switch marker labels between full spot values and last digits.",
+                              )}
+                            </p>
+                          </div>
+                          <div className="worm-chart-settings-modal__footer">
+                            <button
+                              type="button"
+                              id="worm_chart_settings_cancel"
+                              className="button-secondary worm-chart-settings-modal__action"
+                            >
+                              {it.L("Cancel")}
+                            </button>
+                            <button
+                              type="button"
+                              id="worm_chart_settings_apply"
+                              className="button worm-chart-settings-modal__action worm-chart-settings-modal__action--primary"
+                            >
+                              {it.L("Apply")}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        id="candle_settings_modal"
+                        className="worm-chart-settings-modal worm-chart-settings-modal--top-aligned"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-hidden="true"
+                        aria-labelledby="candle_settings_title"
+                      >
+                        <div className="worm-chart-settings-modal__content">
+                          <div className="worm-chart-settings-modal__header">
+                            <h2
+                              id="candle_settings_title"
+                              className="worm-chart-settings-modal__title"
+                            >
+                              {it.L("Candle parameters")}
+                            </h2>
+                            <button
+                              type="button"
+                              id="candle_settings_close"
+                              className="worm-chart-settings-modal__close"
+                              aria-label={it.L("Close")}
+                            >
+                              ×
+                            </button>
+                          </div>
+                          <div className="worm-chart-settings-modal__body">
+                            <label htmlFor="candle_granularity_select">
+                              {it.L("Timeframe")}
+                            </label>
+                            <select
+                              id="candle_granularity_select"
+                              className="worm-chart-settings-modal__input"
+                            >
+                              <option value="60">{it.L("1 minute")}</option>
+                              <option value="300">{it.L("5 minutes")}</option>
+                              <option value="900">{it.L("15 minutes")}</option>
+                              <option value="1800">{it.L("30 minutes")}</option>
+                              <option value="3600">{it.L("1 hour")}</option>
+                            </select>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "New candles default to 1-minute intervals and can be adjusted for deeper analysis.",
+                              )}
+                            </p>
+                            <label htmlFor="candle_type_select">
+                              {it.L("Candle style")}
+                            </label>
+                            <select
+                              id="candle_type_select"
+                              className="worm-chart-settings-modal__input"
+                            >
+                              <option value="candlestick">
+                                {it.L("Classic candlestick")}
+                              </option>
+                              <option value="ohlc">{it.L("OHLC")}</option>
+                            </select>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Choose the visual type used for professional charting.",
+                              )}
+                            </p>
+                            <label htmlFor="candle_count_input">
+                              {it.L("Number of displayed candles")}
+                            </label>
+                            <input
+                              id="candle_count_input"
+                              type="number"
+                              min="10"
+                              max="180"
+                              defaultValue="10"
+                              className="worm-chart-settings-modal__input"
+                            />
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Control how many most recent candles stay on screen.",
+                              )}
+                            </p>
+                            <label htmlFor="candle_label_mode">
+                              {it.L("Candle numbering mode")}
+                            </label>
+                            <select
+                              id="candle_label_mode"
+                              className="worm-chart-settings-modal__input"
+                            >
+                              <option value="last">
+                                {it.L(
+                                  "Only last close with distribution color",
+                                )}
+                              </option>
+                              <option value="full">
+                                {it.L("Full spot on every candle")}
+                              </option>
+                            </select>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Show the last close digit for every candle with distribution coloring or render the full close value for each bar.",
+                              )}
+                            </p>
+                            <div className="worm-chart-settings-modal__toggle">
+                              <input
+                                id="worm_progress_panel_toggle"
+                                type="checkbox"
+                                className="worm-chart-settings-modal__checkbox"
+                              />
+                              <label htmlFor="worm_progress_panel_toggle">
+                                {it.L("Show progress panel")}
+                              </label>
+                            </div>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Display the progress tracker beside the chart.",
+                              )}
+                            </p>
+                            <div className="candle-color-grid">
+                              <div className="candle-color-grid__item">
+                                <label htmlFor="candle_up_color">
+                                  {it.L("Bull candle color")}
+                                </label>
+                                <input
+                                  id="candle_up_color"
+                                  type="color"
+                                  className="worm-chart-settings-modal__input"
+                                />
+                              </div>
+                              <div className="candle-color-grid__item">
+                                <label htmlFor="candle_down_color">
+                                  {it.L("Bear candle color")}
+                                </label>
+                                <input
+                                  id="candle_down_color"
+                                  type="color"
+                                  className="worm-chart-settings-modal__input"
+                                />
+                              </div>
+                              <div className="candle-color-grid__item">
+                                <label htmlFor="candle_color_by_digit_toggle">
+                                  {it.L("Color candles by close digit")}
+                                </label>
+                                <input
+                                  id="candle_color_by_digit_toggle"
+                                  type="checkbox"
+                                  className="worm-chart-settings-modal__checkbox"
+                                />
+                              </div>
+                            </div>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Fine-tune candle fills, borders, and wicks to mirror pro workspaces.",
+                              )}
+                            </p>
+                            <button
+                              type="button"
+                              id="worm_chart_move_from_candle_settings"
+                              className="worm-chart-settings-modal__link-button"
+                              aria-label={it.L(
+                                "Open move chart panel to adjust chart offsets",
+                              )}
+                            >
+                              {it.L("Move chart position")}
+                            </button>
+                            <p className="worm-chart-settings-modal__hint">
+                              {it.L(
+                                "Use the move chart panel to fine-tune offsets while configuring candle parameters.",
+                              )}
+                            </p>
+                          </div>
+                          <div className="worm-chart-settings-modal__footer">
+                            <button
+                              type="button"
+                              id="candle_settings_cancel"
+                              className="button-secondary worm-chart-settings-modal__action"
+                            >
+                              {it.L("Cancel")}
+                            </button>
+                            <button
+                              type="button"
+                              id="candle_settings_apply"
+                              className="button worm-chart-settings-modal__action worm-chart-settings-modal__action--primary"
+                            >
+                              {it.L("Apply")}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        id="worm_chart_move_modal"
+                        className="worm-chart-settings-modal"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-hidden="true"
+                        aria-labelledby="worm_chart_move_title"
+                      >
+                        <div className="worm-chart-settings-modal__content">
+                          <div className="worm-chart-settings-modal__header">
+                            <h2
+                              id="worm_chart_move_title"
+                              className="worm-chart-settings-modal__title"
+                            >
+                              {it.L("Move chart")}
+                            </h2>
+                            <button
+                              type="button"
+                              id="worm_chart_move_close"
+                              className="worm-chart-settings-modal__close"
+                              aria-label={it.L("Close")}
+                            >
+                              ×
+                            </button>
+                          </div>
+                          <div className="worm-chart-settings-modal__body">
+                            <div className="worm-chart-settings-modal__range">
+                              <label htmlFor="worm_chart_horizontal_slider">
+                                {it.L("Move horizontally")}
+                              </label>
+                              <input
+                                id="worm_chart_horizontal_slider"
+                                className="worm-chart-settings-modal__input"
+                                type="range"
+                                min="-50"
+                                max="50"
+                                aria-describedby="worm_chart_horizontal_value"
+                              />
+                              <span
+                                id="worm_chart_horizontal_value"
+                                className="worm-chart-settings-modal__value"
+                              >
+                                0
+                              </span>
+                            </div>
+                            <div className="worm-chart-settings-modal__range">
+                              <label htmlFor="worm_chart_vertical_slider">
+                                {it.L("Move vertically")}
+                              </label>
+                              <input
+                                id="worm_chart_vertical_slider"
+                                className="worm-chart-settings-modal__input"
+                                type="range"
+                                min="-50"
+                                max="50"
+                                aria-describedby="worm_chart_vertical_value"
+                              />
+                              <span
+                                id="worm_chart_vertical_value"
+                                className="worm-chart-settings-modal__value"
+                              >
+                                0
+                              </span>
+                            </div>
+                            <div className="worm-chart-offset-pad">
+                              <p className="worm-chart-settings-modal__hint">
+                                {it.L(
+                                  "Use the arrows to nudge the chart horizontally or vertically before applying changes.",
+                                )}
+                              </p>
+                              <div
+                                className="worm-chart-offset-pad__grid"
+                                role="group"
+                                aria-label={it.L("Fine-tune chart position")}
+                              >
+                                <button
+                                  type="button"
+                                  id="worm_chart_nudge_up"
+                                  className="worm-chart-offset-pad__btn"
+                                  aria-label={it.L("Nudge chart up")}
+                                >
+                                  ↑
+                                </button>
+                                <div className="worm-chart-offset-pad__middle-row">
+                                  <button
+                                    type="button"
+                                    id="worm_chart_nudge_left"
+                                    className="worm-chart-offset-pad__btn"
+                                    aria-label={it.L("Nudge chart left")}
+                                  >
+                                    ←
+                                  </button>
+                                  <span
+                                    className="worm-chart-offset-pad__center-dot"
+                                    aria-hidden="true"
+                                  >
+                                    •
+                                  </span>
+                                  <button
+                                    type="button"
+                                    id="worm_chart_nudge_right"
+                                    className="worm-chart-offset-pad__btn"
+                                    aria-label={it.L("Nudge chart right")}
+                                  >
+                                    →
+                                  </button>
+                                </div>
+                                <button
+                                  type="button"
+                                  id="worm_chart_nudge_down"
+                                  className="worm-chart-offset-pad__btn"
+                                  aria-label={it.L("Nudge chart down")}
+                                >
+                                  ↓
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <div className="worm-chart-settings-modal__footer">
+                            <button
+                              type="button"
+                              id="worm_chart_move_cancel"
+                              className="button-secondary worm-chart-settings-modal__action"
+                            >
+                              {it.L("Cancel")}
+                            </button>
+                            <button
+                              type="button"
+                              id="worm_chart_move_apply"
+                              className="button worm-chart-settings-modal__action worm-chart-settings-modal__action--primary"
+                            >
+                              {it.L("Apply")}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div id="onboarding-container" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            id="purchase_container"
+            className="trade-parameter-block quick-stake-card"
+          />
+          <div className="trade-container">
+            <div
+              id="contract_forms_wrapper"
+              className="trade-parameter-block"
+            />
+          </div>
+          {/* Old Containers  */}
+          <div className="row" id="contract_symbol_container">
+            <div id="contract_markets_container">
+              <div id="underlying_component" className="invisible" />
+              <input type="hidden" id="underlying" />
+            </div>
+            <div id="contract_type_container">
+              <div id="contract_component" />
+              <input type="hidden" id="contract" />
+            </div>
+          </div>
+          <div className="row clear" id="contract_form_content_wrapper">
+            <div className="col row-inner gr-6 gr-12-p gr-12-m gr-no-gutter">
+              <div id="contract_container" className="col row">
+                <div id="loading_container3" className="overlay_container" />
+                <div id="contract_form_container" className="col">
+                  <div id="contract_form_content" className="gr-gutter">
+                    <form id="websocket_form">
+                      <div className="row" id="date_start_row">
+                        <div className="col form_label" id="start_time_label">
+                          {it.L("Start time")}
+                        </div>
+                        <div className="big-col">
+                          <select id="date_start" />
+                          <div id="time_start_row" className="invisible">
+                            <input
+                              type="text"
+                              data-lpignore="true"
+                              id="time_start"
+                              autoComplete="off"
+                              readOnly="readonly"
+                              className="medium_width_input"
+                            />
+                            <span className="gr-gutter-left">GMT</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="row" id="expiry_row">
+                        <div className="col form_label">
+                          <select id="expiry_type" />
+                        </div>
+                        <div className="big-col">
+                          <div id="expiry_type_duration">
+                            <input
+                              id="duration_amount"
+                              type="number"
+                              className="small_width_input"
+                              autoComplete="off"
+                            />
+                            <label />
+                            <select
+                              id="duration_units"
+                              className="medium_width_input"
+                            />
+                          </div>
+                          <div id="duration_wrapper" className="hint">
+                            <span id="duration_tooltip">
+                              {it.L("Minimum:")}
+                            </span>{" "}
+                            <span id="duration_minimum" />
+                            <span id="duration_maximum" className="invisible" />
+                          </div>
+                          <div id="expiry_type_endtime">
+                            <input
+                              id="expiry_date"
+                              type="text"
+                              data-lpignore="true"
+                              readOnly="readonly"
+                              autoComplete="off"
+                            />
+                            <div id="expiry_time_row">
+                              <input
+                                id="expiry_time"
+                                type="text"
+                                data-lpignore="true"
+                                autoComplete="off"
+                                readOnly="readonly"
+                                className="medium_width_input"
+                              />
+                              <span className="gr-gutter-left">GMT</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="row" id="highlowticks_expiry_row">
+                        <div className="col form_label">
+                          <label>{it.L("Duration")}</label>
+                        </div>
+                        <div className="big-col">
+                          <label className="gr-gutter">5</label>
+                          <label className="gr-gutter-left">
+                            {it.L("Ticks")}
+                          </label>
+                          <div className="hint">
+                            {it.L("This contract type only offers 5 ticks")}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="row barrier_class" id="barrier_row">
+                        <div className="col form_label">
+                          <label htmlFor="H" id="barrier_label">
+                            <span id="barrier_tooltip">
+                              {it.L("Barrier offset")}
+                            </span>
+                            <span id="barrier_span">{it.L("Barrier")}</span>
+                          </label>
+                        </div>
+                        <div className="big-col">
+                          <input
+                            id="barrier"
+                            type="text"
+                            data-lpignore="true"
+                            name="H"
+                            autoComplete="off"
+                          />
+                          <span
+                            id="indicative_barrier_tooltip"
+                            data-balloon={it.L(
+                              "This is an indicative barrier. Actual barrier will be the entry spot plus the barrier offset.",
+                            )}
+                            data-balloon-length="xlarge"
+                          />
+                        </div>
+                      </div>
+                      <div className="row barrier_class" id="high_barrier_row">
+                        <div className="col form_label">
+                          <label htmlFor="H" id="barrier_high_label">
+                            <span id="barrier_high_tooltip">
+                              {it.L("High barrier offset")}
+                            </span>
+                            <span id="barrier_high_span">
+                              {it.L("High barrier")}
+                            </span>
+                          </label>
+                        </div>
+                        <div className="big-col">
+                          <input
+                            id="barrier_high"
+                            type="text"
+                            data-lpignore="true"
+                            name="H"
+                            autoComplete="off"
+                          />
+                          <span
+                            id="indicative_high_barrier_tooltip"
+                            data-balloon={it.L(
+                              "This is an indicative barrier. Actual barrier will be the entry spot plus the barrier offset.",
+                            )}
+                            data-balloon-length="xlarge"
+                          />
+                          <div className="hint">
+                            <span
+                              id="barrier_high_error"
+                              className="error-msg invisible"
+                            >
+                              {it.L(
+                                "High barrier must be higher than low barrier",
+                              )}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="row barrier_class" id="low_barrier_row">
+                        <div className="col form_label">
+                          <label htmlFor="L" id="barrier_low_label">
+                            <span id="barrier_low_tooltip">
+                              {it.L("Low barrier offset")}
+                            </span>
+                            <span id="barrier_low_span">
+                              {it.L("Low barrier")}
+                            </span>
+                          </label>
+                        </div>
+                        <div className="big-col">
+                          <input
+                            id="barrier_low"
+                            type="text"
+                            data-lpignore="true"
+                            name="L"
+                            autoComplete="off"
+                          />
+                          <span
+                            id="indicative_low_barrier_tooltip"
+                            data-balloon={it.L(
+                              "This is an indicative barrier. Actual barrier will be the entry spot plus the barrier offset.",
+                            )}
+                            data-balloon-length="xlarge"
+                          />
+                        </div>
+                      </div>
+                      <div className="row" id="prediction_row">
+                        <div className="col form_label">
+                          <label htmlFor="prediction" id="prediction_label">
+                            {it.L("Last Digit Prediction")}
+                          </label>
+                        </div>
+                        <div className="big-col">
+                          <select id="prediction" className="small_width_input">
+                            {Array.from(new Array(10)).map((x, idx) => (
+                              <option key={idx} value={idx}>
+                                {idx}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+                      </div>
+                      <div className="row" id="selected_tick_row">
+                        <div className="col form_label">
+                          <label
+                            htmlFor="selected_tick"
+                            id="selected_tick_label"
+                          >
+                            {it.L("Tick Prediction")}
+                          </label>
+                        </div>
+                        <div className="big-col">
+                          <select
+                            id="selected_tick"
+                            className="small_width_input"
+                          >
+                            {Array.from(new Array(5)).map((x, idx) => (
+                              <option key={idx + 1} value={idx + 1}>
+                                {idx + 1}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+                      </div>
+                      <div className="row" id="multiplier_row">
+                        <div className="col form_label">
+                          <label htmlFor="multiplier" id="multiplier_label">
+                            {it.L("Multiplier")}
+                          </label>
+                        </div>
+                        <div className="row-inner big-col">
+                          <div className="col-inner">
+                            <select
+                              id="multiplier_currency"
+                              className="currency small_width_input"
+                            />
+                            <input
+                              type="text"
+                              data-lpignore="true"
+                              defaultValue="1"
+                              step="any"
+                              maxLength="10"
+                              name="multiplier"
+                              id="multiplier"
+                              className="small_width_input"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <div className="row" id="payout_row">
+                        <div className="col form_label">
+                          <select id="amount_type">
+                            <option value="stake" id="stake_option">
+                              {it.L("Stake")}
+                            </option>
+                            <option value="payout" id="payout_option">
+                              {it.L("Payout")}
+                            </option>
+                          </select>
+                        </div>
+                        <div className="row-inner big-col">
+                          <div className="col-inner">
+                            <input
+                              id="amount"
+                              type="text"
+                              data-lpignore="true"
+                              step="any"
+                              maxLength="10"
+                              className="medium_width_input"
+                              autoComplete="off"
+                            />
+                            <select
+                              id="currency"
+                              className="currency small_width_input"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <div className="row" id="reset_time" />
+                      <div className="row invisible" id="equals_row">
+                        <input id="callputequal" type="checkbox" />
+                        <label htmlFor="callputequal">
+                          <span
+                            data-balloon={it.L(
+                              "Win payout if exit spot is also equal to entry spot.",
+                            )}
+                          >
+                            {it.L("Allow equals")}
+                          </span>
+                        </label>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            id="contract_prices_container"
+            className="col row-inner gr-6 gr-12-p gr-12-m gr-no-gutter"
+          >
+            <div
+              id="contract_confirmation_container"
+              className="overlay_container col"
+            >
+              <a
+                className="close close--dark-bg"
+                id="close_confirmation_container"
+              />
+              <div id="confirmation_message_container">
+                <div id="confirmation_message">
+                  <h3 id="contract_purchase_heading" />
+                  <div id="contract_purchase_descr" />
+                  <div className="row" id="contract_purchase_profit_list">
+                    <div className="col" id="contract_purchase_payout" />
+                    <div className="col" id="contract_purchase_cost" />
+                    <div className="col" id="contract_purchase_profit" />
+                  </div>
+                  <div id="contract_purchase_barrier" />
+                  <div id="contract_purchase_reference" />
+                  <button
+                    id="contract_purchase_button"
+                    className="open_contract_details btn btn--primary"
+                  />
+                  <div id="contract_purchase_balance" />
+                </div>
+                <div
+                  id="confirmation_error"
+                  className="center-text invisible"
+                />
+                <div
+                  id="authorization_error_container"
+                  className="center-text invisible"
+                >
+                  <div className="authorization_error">
+                    <h3 id="authorization_error_text">
+                      {it.L("Ready to trade?")}
+                    </h3>
+                    <a
+                      id="authorization_error_btn_signup"
+                      className="btn btn__large btn--primary"
+                    >
+                      <span>{it.L("Open a free account")}</span>
+                    </a>
+                    <p>{it.L("Already have an account?")}</p>
+                    <a
+                      id="authorization_error_btn_login"
+                      className="btn btn--link"
+                    >
+                      {it.L("Log in here")}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="row-inner" id="contracts_list">
+              <div id="loading_container2" className="overlay_container" />
+              <div
+                className="col price_container row-inner"
+                id="price_container_top"
+              >
+                <div className="col gr-row">
+                  <div className="price_wrapper row">
+                    <h4 className="contract_heading" />
+                    <span className="amount_wrapper">
+                      <div className="amount_wrapper_div">
+                        <div className="stake_wrapper">
+                          <span className="stake" />
+                          <span className="contract_amount" />
+                        </div>
+                        <div className="payout_wrapper">
+                          <span className="payout" />
+                          <span className="contract_payout" />
+                        </div>
+                      </div>
+                      <div className="contract_purchase button">
+                        <span
+                          className="purchase_button contract_description no-underline"
+                          id="purchase_button_top"
+                          data-balloon-length="xlarge"
+                          value="purchase"
+                        >
+                          {it.L("Purchase")}
+                        </span>
+                      </div>
+                    </span>
+                  </div>
+                </div>
+                <div className="col price_comment" />
+                <div className="col contract_error" />
+              </div>
+              <div
+                className="col price_container row-inner"
+                id="price_container_bottom"
+              >
+                <div className="col gr-row">
+                  <div className="price_wrapper row">
+                    <h4 className="contract_heading" />
+                    <span className="amount_wrapper">
+                      <div className="amount_wrapper_div">
+                        <div className="stake_wrapper">
+                          <span className="stake" />
+                          <span className="contract_amount" />
+                        </div>
+                        <div className="payout_wrapper">
+                          <span className="payout" />
+                          <span className="contract_payout" />
+                        </div>
+                      </div>
+                      <div className="contract_purchase button">
+                        <span
+                          className="purchase_button contract_description no-underline"
+                          id="purchase_button_bottom"
+                          data-balloon-length="xlarge"
+                          value="purchase"
+                        >
+                          {it.L("Purchase")}
+                        </span>
+                      </div>
+                    </span>
+                  </div>
+                </div>
+                <div className="col price_comment" />
+                <div className="col contract_error" />
+              </div>
+              <div
+                className="col price_container row-inner"
+                id="price_container_middle"
+              >
+                <div className="col gr-row">
+                  <div className="price_wrapper row">
+                    <h4 className="contract_heading" />
+                    <span className="amount_wrapper">
+                      <div className="amount_wrapper_div">
+                        <div className="stake_wrapper">
+                          <span className="stake" />
+                          <span className="contract_amount" />
+                        </div>
+                        <div className="payout_wrapper">
+                          <span className="multiplier" />
+                          <span className="contract_multiplier" />
+                        </div>
+                      </div>
+                      <div className="contract_purchase button">
+                        <span
+                          className="purchase_button no-underline"
+                          id="purchase_button_middle"
+                          data-balloon-length="xlarge"
+                          value="purchase"
+                        >
+                          {it.L("Purchase")}
+                        </span>
+                      </div>
+                    </span>
+                  </div>
+                  <div className="contract_longcode" />
+                </div>
+                <div className="col price_comment" />
+                <div className="col contract_error" />
+              </div>
+            </div>
+            <div id="all_prices" />
+          </div>
+        </div>
+      </div>
+    </section>
+    <section className="contained-section contained-section--wide">
+      <Analysis />
+    </section>
+    <div id="trading_init_progress">
+      <Loading />
+    </div>
+    <div id="app-loader" />
+  </div>
+);
+
+export default Trading;