+ {/* ========== Winning ========== */}
+
+
+ {/* ========== Image ========== */}
+ {images[formName] && (
+
+
+
+
+

+
+
+

+
+
+
+
+ )}
+
+ {/* ========== Explain ========== */}
+
+
+ {/* ========== Note ========== */}
+ {contractExplanationData.note[formName] && (
+
+ {localize('Note')}:
+ {contractExplanationData.note[formName].content.map((data, idx) => (
+ {parse(data)}
+ ))}
+
+ )}
+
+ );
+ }
+
+ return <>>;
+};
diff --git a/src/javascript/app/pages/bottom/tabs.jsx b/src/javascript/app/pages/bottom/tabs.jsx
new file mode 100644
index 00000000000..57cd3c995dd
--- /dev/null
+++ b/src/javascript/app/pages/bottom/tabs.jsx
@@ -0,0 +1,89 @@
+/* eslint-disable no-console */
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { SegmentedControlSingleChoice } from '@deriv-com/quill-ui';
+import { Explanation } from './explanation.jsx';
+import { getElementById } from '../../../_common/common_functions';
+import WebtraderChart from '../trade/charts/webtrader_chart';
+import { useMarketChange } from '../../hooks/events';
+
+const Graph = () => (
+