smartxtrader 3.8.1-xm.0

package/src/javascript/app/pages/bottom/data/explanation.js

@@ -0,0 +1,347 @@
+import { localize } from '../../../../_common/localize.js';
+
+export const contract_explanation_data = {
+    winning: {
+        asian: {
+            
+            content: [
+                localize('Asian options settle by comparing the <strong>last tick</strong> with the average spot over the period.'),
+                localize('If you select "Asian Rise", you will win the payout if the <strong>last tick</strong> is <strong>higher</strong> than the <strong>average</strong> of the ticks.'),
+                localize('If you select "Asian Fall", you will win the payout if the <strong>last tick</strong> is <strong>lower</strong> than the <strong>average</strong> of the ticks.'),
+                localize('If the <strong>last tick</strong> is equal to the average of the ticks, you don\'t win the payout.'),
+            ],
+        },
+        digits: {
+            
+            content: [
+                localize('If you select "Matches", you will win the payout if the <strong>last digit</strong> of the last tick is the <strong>same</strong> as your <strong>prediction.</strong>'),
+                localize('If you select "Differs", you will win the payout if the <strong>last digit</strong> of the last tick is <strong>not the same</strong> as your <strong>prediction</strong>.'),
+            ],
+        },
+        endsinout: {
+            content: [
+                localize('If you select "Ends Between", you win the payout if the <strong>exit spot</strong> is strictly higher than the <strong>Low barrier</strong> AND strictly lower than the <strong>High barrier</strong>.'),
+                localize('If you select "Ends Outside", you win the payout if the <strong>exit spot</strong> is EITHER strictly higher than the <strong>High barrier</strong>, OR strictly lower than the <strong>Low barrier</strong>.'),
+                localize('If the <strong>exit spot</strong> is equal to either the <strong>Low barrier</strong> or the <strong>High barrier</strong>, you don\'t win the payout.'),
+            ],
+        },
+        evenodd: {
+            content: [
+                localize('If you select "Even", you will win the payout if the <strong>last digit</strong> of the last tick is an <strong>even number (i.e., 2, 4, 6, 8, or 0).</strong>'),
+                localize('If you select "Odd", you will win the payout if the <strong>last digit</strong> of the last tick is an <strong>odd number (i.e., 1, 3, 5, 7, or 9).</strong>'),
+            ],
+        },
+        higherlower: {
+            content: [
+                localize('If you select "Higher", you win the payout if the <strong>exit spot</strong> is strictly higher than the <strong>barrier</strong>.'),
+                localize('If you select "Lower", you win the payout if the <strong>exit spot</strong> is strictly lower than the <strong>barrier</strong>.'),
+                localize('If the <strong>exit spot</strong> is equal to the <strong>barrier</strong>, you don\'t win the payout.'),
+            ],
+        },
+        overunder: {
+            content: [
+                localize('If you select "Over", you will win the payout if the <strong>last digit</strong> of the last tick is <strong>greater than your prediction.</strong>'),
+                localize('If you select "Under", you will win the payout if the <strong>last digit</strong> of the last tick is <strong>less than your prediction.</strong>'),
+            ],
+        },
+        risefall: {
+            content: [
+                localize('If you select "Rise", you win the payout if the <strong>exit spot</strong> is strictly higher than the <strong>entry spot</strong>.'),
+                localize('If you select "Fall", you win the payout if the <strong>exit spot</strong> is strictly lower than the <strong>entry spot</strong>.'),
+                localize('If you select "Allow equals", you win the payout if exit spot is higher than or equal to entry spot for "Rise". Similarly, you win the payout if exit spot is lower than or equal to entry spot for "Fall".'),
+            ],
+        },
+        runbet_lucky10: {
+            
+            content: [
+                localize('You win the payout if the market price ends in the digit you have selected.'),
+            ],
+        },
+        runbet_quick10: {
+            
+            content: [
+                localize('You win the payout if the market price does not end in the digit you have selected.'),
+            ],
+        },
+        runbet_updown: {
+            
+            content: [
+                localize('If you select "rises", you win the payout if the market price is higher than the <strong>entry spot</strong>.'),
+                localize('If you select "falls", you win the payout if the market price is lower than the <strong>entry spot</strong>.'),
+            ],
+        },
+        staysinout: {
+            
+            content: [
+                localize('If you select "Stays Between", you win the payout if the market stays between (does not touch) either the <strong>High barrier</strong> or the <strong>Low barrier</strong> at any time during the <strong>contract period</strong>.'),
+                localize('If you select "Goes Outside", you win the payout if the market touches either the <strong>High barrier</strong> or the <strong>Low barrier</strong> at any time during the <strong>contract period</strong>.'),
+            ],
+        },
+        ticks: {
+            
+            content: [
+                localize('If you select "Rises", you win the payout if the <strong>exit spot</strong> is strictly higher than the <strong>entry spot</strong>.'),
+                localize('If you select "Falls", you win the payout if the <strong>exit spot</strong> is strictly lower than the <strong>entry spot</strong>.'),
+            ],
+        },
+        touchnotouch: {
+            
+            content: [
+                localize('If you select "Touches", you win the payout if the market touches the <strong>barrier</strong> at any time during the <strong>contract period</strong>.'),
+                localize('If you select "Does Not Touch", you win the payout if the market never touches the <strong>barrier</strong> at any time during the <strong>contract period</strong>.'),
+            ],
+        },
+        updown: {
+            
+            content: [
+                localize('If you select "rises", you win the payout if the market price is higher than the entry spot.'),
+                localize('If you select "falls", you win the payout if the market price is lower than the entry spot.'),
+            ],
+        },
+        lookbacklow: {
+            title  : 'Pay-out' ,
+            content: [
+                localize('By purchasing the [_1]"Close-Low"[_2] contract, you\'ll win the multiplier times the difference between the [_1]close[_2] and [_1]low[_2] over the duration of the contract.', ['<strong>', '</strong>']),
+            ],
+        },
+        lookbackhigh: {
+            title  : 'Pay-out' ,
+            content: [
+                localize('By purchasing the [_1]"High-Close"[_2] contract, you\'ll win the multiplier times the difference between the [_1]high[_2] and [_1]close[_2] over the duration of the contract.', ['<strong>', '</strong>']),
+            ],
+        },
+        lookbackhighlow: {
+            title  : 'Pay-out' ,
+            content: [
+                localize('By purchasing the [_1]"High-Low"[_2] contract, you\'ll win the multiplier times the difference between the [_1]high[_2] and [_1]low[_2] over the duration of the contract.', ['<strong>', '</strong>']),
+            ],
+        },
+        reset: {
+            
+            content: [
+                localize('If you select "Reset-Call", you win the payout if the exit spot is strictly higher than either the entry spot or the spot at reset time.'),
+                localize('If you select "Reset-Put", you win the payout if the exit spot is strictly lower than either the entry spot or the spot at reset time.'),
+                localize('If the <strong>exit spot</strong> is equal to the <strong>barrier</strong> or the <stronm g>new barrier (if a reset occurs)</stronmg>, you don\'t win the payout.'),
+            ],
+        },
+        highlowticks: {
+            
+            content: [
+                localize('If you select [_1]"High Tick"[_2], you win the payout if the selected tick is the [_1]highest among the next five ticks[_2].', ['<strong>', '</strong>']),
+                localize('If you select [_1]"Low Tick"[_2], you win the payout if the selected tick is the [_1]lowest among the next five ticks[_2].', ['<strong>', '</strong>']),
+            ],
+        },
+        runs: {
+            
+            content: [
+                localize('If you select [_1]"Only Ups"[_2], you win the payout if consecutive ticks rise successively after the [_1]entry spot[_2].[_3]No payout if any tick falls or is equal to any of the previous ticks.', ['<strong>', '</strong>', '<br />']),
+                localize('If you select [_1]"Only Downs"[_2], you win the payout if consecutive ticks fall successively after the [_1]entry spot[_2].[_3]No payout if any tick rises or is equal to any of the previous ticks.', ['<strong>', '</strong>', '<br />']),
+            ],
+        },
+    },
+    image: {
+        explanation_image_1:
+  '/images/pages/trade-explanation/en/rises.svg?3e9b01f8f3365272abe03784db97d968' ,
+        explanation_image_2:
+  '/images/pages/trade-explanation/en/falls.svg?3e9b01f8f3365272abe03784db97d968' ,
+    },
+    explain: {
+        asian: {
+            title  : localize('Entry Spot') ,
+            content: [
+                localize('The entry spot is the first tick after the contract is processed by our servers.'),
+            ],
+            title_secondary  : localize('The Average') ,
+            content_secondary: [
+                localize('The average is the average of the ticks, including the entry spot and the last tick.'),
+            ],
+        },
+        digits: {
+            title  : localize('Entry Spot') ,
+            content: [
+                localize('The entry spot is the first tick after the contract is processed by our servers.'),
+            ],
+        },
+        endsinout: {
+            title  : localize('Exit spot') ,
+            content: [
+                localize('The <strong>exit spot</strong> is the latest tick at or before the <strong>end time</strong>.'),
+                localize('The <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong> (if less than one day in duration), or at the end of the trading day (if one day or more in duration).'),
+                localize('The <strong>start time</strong> is when the contract is processed by our servers.'),
+            ],
+        },
+        evenodd: {
+            title  : localize('Entry Spot') ,
+            content: [
+                localize('The entry spot is the first tick after the contract is processed by our servers.'),
+            ],
+        },
+        higherlower: {
+            title  : localize('Exit spot') ,
+            content: [
+                localize('The <strong>exit spot</strong> is the latest tick at or before the <strong>end time</strong>.'),
+                localize('The <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong> (if less than one day in duration), or at the end of the trading day (if one day or more in duration).'),
+                localize('The <strong>start time</strong> is when the contract is processed by our servers.'),
+            ],
+        },
+        overunder: {
+            title  : localize('Entry Spot') ,
+            content: [
+                localize('The entry spot is the first tick after the contract is processed by our servers.'),
+            ],
+        },
+        risefall: {
+            title  : localize('Entry spot') ,
+            content: [
+                localize('The <strong>start time</strong> is when the contract is processed by our servers and the <strong>entry spot</strong> is the <strong>next tick</strong> thereafter.'),
+                localize('If you select a <strong>start time</strong> in the future, the <strong>start time</strong> is that which is selected and the <strong>entry spot</strong> is the price in effect at that time.'),
+            ],
+            title_secondary  : localize('Exit spot') ,
+            content_secondary: [
+                localize('The <strong>exit spot</strong> is the latest tick at or before the <strong>end time</strong>.'),
+                localize('If you select a <strong>start time</strong> of "Now", the <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong> (if less than one day in duration), or at the end of the trading day (if one day or more in duration).'),
+                localize('If you select a specific <strong>end time</strong>, the <strong>end time</strong> is the selected time.'),
+            ],
+        },
+
+        staysinout: {
+            title  : localize('Contract period') ,
+            content: [
+                localize('The <strong>contract period</strong> is the period between the <strong>next tick</strong> after the <strong>start time</strong> and the <strong>end time</strong>.'),
+                localize('The <strong>start time</strong> is when the contract is processed by our servers.'),
+                localize('The <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong> (if less than one day in duration), or at the end of the trading day (if one day or more in duration).'),
+            ],
+        },
+        touchnotouch: {
+            title  : localize('Contract period') ,
+            content: [
+                localize('The <strong>contract period</strong> is the period between the <strong>next tick</strong> after the <strong>start time</strong> and the <strong>end time</strong>.'),
+                localize('The <strong>start time</strong> is when the contract is processed by our servers.'),
+                localize('The <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong> (if less than one day in duration), or at the end of the trading day (if one day or more in duration).'),
+            ],
+        },
+        lookbacklow: {
+            title  : localize('High, Low and Close') ,
+            content: [
+                localize('The [_1]high[_2] is the highest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
+                localize('The [_1]low[_2] is the lowest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
+                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.', ['<strong>', '</strong>']),
+            ],
+            title_secondary  : localize('Contract period') ,
+            content_secondary: [
+                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].', ['<strong>', '</strong>']),
+                localize('The [_1]start time[_2] begins when the contract is processed by our servers.', ['<strong>', '</strong>']),
+                localize('The [_1]end time[_2] is the selected number of minutes/hours after the [_1]start time[_2].', ['<strong>', '</strong>']),
+            ],
+        },
+        lookbackhigh: {
+            title  : localize('High, Low and Close') ,
+            content: [
+                localize('The [_1]high[_2] is the highest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
+                localize('The [_1]low[_2] is the lowest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
+                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.', ['<strong>', '</strong>']),
+            ],
+            title_secondary  : localize('Contract period') ,
+            content_secondary: [
+                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].', ['<strong>', '</strong>']),
+                localize('The [_1]start time[_2] begins when the contract is processed by our servers.', ['<strong>', '</strong>']),
+                localize('The [_1]end time[_2] is the selected number of minutes/hours after the [_1]start time[_2].', ['<strong>', '</strong>']),
+            ],
+        },
+        lookbackhighlow: {
+            title  : localize('High, Low and Close') ,
+            content: [
+                localize('The [_1]high[_2] is the highest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
+                localize('The [_1]low[_2] is the lowest point ever reached by the market during the contract period.', ['<strong>', '</strong>']),
+                localize('The [_1]close[_2] is the latest tick at or before the [_1]end time[_2]. If you selected a specific [_1]end time,[_2] the [_1]end time[_2] is the selected time.', ['<strong>', '</strong>']),
+            ],
+            title_secondary  : localize('Contract period') ,
+            content_secondary: [
+                localize('The [_1]contract period[_2] is the period between the [_1]first tick[_2] (after start time) and the [_1]end time[_2].', ['<strong>', '</strong>']),
+                localize('The [_1]start time[_2] begins when the contract is processed by our servers.', ['<strong>', '</strong>']),
+                localize('The [_1]end time[_2] is the selected number of minutes/hours after the [_1]start time[_2].', ['<strong>', '</strong>']),
+            ],
+        },
+        reset: {
+            title  : localize('Reset Time') ,
+            content: [
+                localize('At reset time, if the spot is in the opposite direction of your prediction, the barrier is reset to that spot.'),
+                localize('The <strong>exit spot</strong> is the latest tick at or before the <strong>end time</strong>.'),
+                localize('The <strong>end time</strong> is the selected number of minutes/hours after the <strong>start time</strong>.'),
+                localize('The <strong>start time</strong> is when the contract is processed by our servers.'),
+                localize('The <strong>entry spot</strong> is the first tick after the contract is processed by our servers.'),
+            ],
+        },
+        highlowticks: {
+            title  : localize('Entry Spot') ,
+            content: [
+                localize('The entry spot is the first tick after the contract is processed by our servers.'),
+            ],
+        },
+        runs: {
+            title  : localize('Entry spot') ,
+            content: [
+                localize('The [_1]start time[_2] is when the contract has been processed by our servers and the [_1]entry spot[_2] is the [_1]next tick[_2] thereafter.', ['<strong>', '</strong>']),
+            ],
+            title_secondary  : localize('Exit Spot'),
+            content_secondary: [
+                localize('The [_1]exit spot[_2] is the last tick when the contract ends. Contract ends when all ticks rise or fall successively, or when a single tick breaks the predicted pattern.', ['<strong>', '</strong>']),
+            ],
+        },
+    },
+    note: {
+        asian: {
+            content: [
+                localize('Asian contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.'),
+            ],
+        },
+        digits: {
+            content: [
+                localize('Digit contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.'),
+            ],
+        },
+        endsinout: {
+            content: [
+                localize('Ends Between/Ends Outside contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.'),
+            ],
+        },
+        evenodd: {
+            content: [
+                localize('Even/Odd contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.'),
+            ],
+        },
+        higherlower: {
+            content: [
+                localize('Higher/Lower contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.'),
+            ],
+        },
+        overunder: {
+            content: [
+                localize('Over/Under contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.'),
+            ],
+        },
+        risefall: {
+            content: [
+                `${localize('Rise/Fall contracts will be refunded if:')}  <br />`,
+                ` • ${localize('There are less than 2 ticks between the start and end times')}<br />`,
+                ` • ${localize('The contract doesn\'t end within 5 minutes (for tick duration contracts)')}`,
+        
+            ],
+        },
+        staysinout: {
+            content: [
+                localize('Stays Between/Goes Outside Contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.'),
+            ],
+        },
+        touchnotouch: {
+            content: [
+                localize('Touch/No Touch contracts will be refunded at the purchase price if there are less than 2 ticks between the start and end times.'),
+            ],
+        },
+        highlowticks: {
+            content: [
+                localize('High Tick/Low Tick contracts have a strict duration of five ticks.'),
+            ],
+        },
+    },
+};

package/src/javascript/app/pages/bottom/explanation.jsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from 'react';
+import parse from 'html-react-parser';
+import { SectionMessage, Skeleton, Text } from '@deriv-com/quill-ui';
+import { contract_explanation_data } from './data/explanation.js';
+import Language from '../../../_common/language';
+import Url from '../../../_common/url';
+import { localize } from '../../../_common/localize.js';
+import dataManager from '../../common/data_manager.js';
+import { useContractChange } from '../../hooks/events.js';
+
+export const Explanation = ({ explanation_only = false }) => {
+
+    const [form_name, setFormName] = useState(null);
+
+    const has_contract_changes = useContractChange();
+
+    useEffect(() => {
+        const actual_form_name = dataManager.getContract('explanation_form_name');
+        setFormName(null);
+        
+        setTimeout(() => {
+            setFormName(actual_form_name);
+        }, 500);
+       
+    }, [has_contract_changes]);
+
+    const language = Language.get();
+    const image_path = Url.urlForStatic(
+        `images/pages/trade-explanation/${language}/`
+    );
+    const winning_content = contract_explanation_data.winning?.[form_name]?.content ?? [];
+    const explain_data = contract_explanation_data.explain?.[form_name] ?? {};
+    const note_data = contract_explanation_data.note?.[form_name];
+
+    const Notes = () => (
+        <>
+            <strong>{localize('Note')}: </strong>
+            {note_data?.content?.map((data, idx) => (
+                <span key={idx}>{parse(data)}</span>
+            ))}
+        </>
+    );
+
+    const images = {
+        risefall: {
+            image1: 'rises.svg',
+            image2: 'falls.svg',
+        },
+        higherlower: {
+            image1: 'higher.svg',
+            image2: 'lower.svg',
+        },
+        touchnotouch: {
+            image1: 'touch.svg',
+            image2: 'no-touch.svg',
+        },
+        endsinout: {
+            image1: 'ends-between.svg',
+            image2: 'ends-outside.svg',
+        },
+        staysinout: {
+            image1: 'stays-between.svg',
+            image2: 'goes-outside.svg',
+        },
+        digits: {
+            image1: 'matches.svg',
+            image2: 'differs.svg',
+        },
+        evenodd: {
+            image1: 'even.svg',
+            image2: 'odd.svg',
+        },
+        overunder: {
+            image1: 'over.svg',
+            image2: 'under.svg',
+        },
+        lookbackhigh: {
+            image1: 'high-close.svg',
+        },
+        lookbacklow: {
+            image1: 'close-low.svg',
+        },
+        lookbackhighlow: {
+            image1: 'high-low.svg',
+        },
+        reset: {
+            image1: 'reset-call.svg',
+            image2: 'reset-put.svg',
+        },
+        highlowticks: {
+            image1: 'high-tick.svg',
+            image2: 'low-tick.svg',
+        },
+        runs: {
+            image1: 'only-ups.svg',
+            image2: 'only-downs.svg',
+        },
+    };
+
+    if (form_name) {
+        return (
+            <div className='tab-explanation'>
+                {/* ========== Winning ========== */}
+                {!explanation_only && winning_content.length > 0 && (
+                    <>
+                        <div id='explanation_winning'>
+                            <div id={`winning_${form_name}`}>
+                                <div className='explanation-heading'>
+                                    <Text size='lg' bold>{localize('Winning the contract')}</Text>
+                                </div>
+                                <div className='explanation-content'>
+                                    {winning_content.map(
+                                        (data, idx) => (
+                                            <Text key={idx}>{parse(data)}</Text>
+                                        )
+                                    )}
+                                </div>
+                                
+                            </div>
+                        </div>
+                          
+                        {/* ========== Image ========== */}
+                        {images[form_name] && (
+                            <div id='explanation_image'>
+                                <div className='gr-row'>
+                                    <div className='gr-2 hide-mobile' />
+                                    <div
+                                        className='gr-4 gr-12-m padding-right'
+                                        style={{ margin: 'auto' }}
+                                    >
+                                        <img
+                                            id='explanation_image_1'
+                                            className='responsive'
+                                            src={`${image_path}${images[form_name].image1}?${process.env.BUILD_HASH}`}
+                                        />
+                                    </div>
+                                    {images[form_name].image2 && (
+                                        <div className='gr-4 gr-12-m padding-left'>
+                                            <img
+                                                id='explanation_image_2'
+                                                className='responsive'
+                                                src={`${image_path}${images[form_name].image2}?${process.env.BUILD_HASH}`}
+                                            />
+                                        </div>
+                                    )}
+                                   
+                                    <div className='gr-2 hide-mobile' />
+                                </div>
+                            </div>
+                        )}
+                    </>
+                )}
+
+                {/* ========== Explain ========== */}
+                {Object.keys(explain_data).length > 0 && (
+                    <div id='explanation_explain' className='gr-child'>
+                        <div id={`explain_${form_name}`}>
+                            {explain_data.title && (
+                                <div className='explanation-heading'>
+                                    <Text size='lg' bold>{explain_data.title}</Text>
+                                </div>
+                            )}
+                            {explain_data.content?.length > 0 && (
+                                <div className='explanation-content'>
+                                    {explain_data.content.map(
+                                        (data, idx) => (
+                                            <Text key={idx}>{parse(data)}</Text>
+                                        )
+                                    )}
+                                </div>
+                            )}
+
+                            {explain_data.title_secondary && (
+                                <div className='explanation-heading secondary-heading'>
+                                    <Text size='lg' bold>
+                                        {explain_data.title_secondary}
+                                    </Text>
+                                </div>
+                            )}
+
+                            {explain_data.content_secondary?.length > 0 && (
+                                <div className='explanation-content'>
+                                    {explain_data.content_secondary.map(
+                                        (data, idx) => (
+                                            <Text key={idx}>{parse(data)}</Text>
+                                        )
+                                    )}
+                                </div>
+                            )}
+
+                        </div>
+                    </div>
+                )}
+
+                {/* ========== Note ========== */}
+                {!explanation_only && note_data && (
+                    <SectionMessage status='info' message={<Notes />} size='sm' />
+                )}
+            </div>
+        );
+    }
+    
+    if (explanation_only) {
+        return (
+            <div className='explanation-container-loader'>
+                <Skeleton.Square width={250} height={50} rounded />
+                <Skeleton.Square fullWidth height={30} rounded />
+                <Skeleton.Square fullWidth height={30} rounded />
+                <Skeleton.Square fullWidth height={30} rounded />
+            </div>);
+    }
+    
+    return (
+        <div className='explanation-container-loader'>
+            <Skeleton.Square width={250} height={50} rounded />
+            <Skeleton.Square fullWidth height={30} rounded />
+            <Skeleton.Square fullWidth height={30} rounded />
+            <Skeleton.Square fullWidth height={30} rounded />
+            <div className='section-loaders'>
+                <Skeleton.Square width={300} height={195} rounded />
+                <Skeleton.Square width={300} height={195} rounded />
+            </div>
+            <Skeleton.Square width={250} height={50} rounded />
+            <Skeleton.Square fullWidth height={30} rounded />
+            <Skeleton.Square fullWidth height={30} rounded />
+            <Skeleton.Square fullWidth height={30} rounded />
+            <Skeleton.Square fullWidth height={120} rounded />
+        </div>
+    );
+    
+};

package/src/javascript/app/pages/bottom/graph.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { Skeleton } from '@deriv-com/quill-ui';
+import WebtraderChart from '../trade/charts/webtrader_chart';
+
+const Graph = ({ onLoad, onUnload }) => {
+    const [isMounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        const mountTimer = setTimeout(() => {
+            setMounted(true);
+            onLoad?.();
+        }, 1000);
+
+        return () => {
+            onUnload?.();
+            clearTimeout(mountTimer);
+            WebtraderChart.cleanupChart();
+        };
+    }, []);
+
+    useEffect(() => {
+        if (isMounted) {
+            WebtraderChart.showChart();
+        }
+    }, [isMounted]);
+
+    if (!isMounted) {
+        return <Skeleton.Square rounded height={300} />;
+    }
+
+    return <></>;
+    
+};
+
+export default Graph;