diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.scss b/packages/bot-web-ui/src/components/dashboard/dashboard.scss index d362d68c0d17..4b8b13a5a7f0 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.scss +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.scss @@ -290,6 +290,12 @@ } } +#react-joyride-step-6 { + .onboard__label { + margin-bottom: 1.6rem; + } +} + .onboard { &__header { display: flex; @@ -333,6 +339,9 @@ &__content { text-align: left; + p { + font-size: 1.4rem; + } &__block { &:first-child { @@ -370,7 +379,7 @@ } } - img { + video { width: 100%; margin-top: 1rem; } @@ -458,6 +467,11 @@ height: 100%; } + video { + width: 65%; + height: 100%; + } + &__progress-bar { margin-bottom: 1.6rem; } diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index 1f52ceb15228..fcdb06d2dc41 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -42,6 +42,7 @@ const Dashboard = observer(() => { setActiveTab, setBotBuilderTokenCheck, setOnBoardingTokenCheck, + onCloseTour, } = dashboard; const { onEntered, dashboard_strategies } = load_modal; const { is_dialog_open, is_drawer_open, dialog_options, onCancelButtonClick, onCloseDialog, onOkButtonClick } = @@ -147,8 +148,15 @@ const Dashboard = observer(() => { const botStorageSetting = () => { tour_status = getTourSettings('bot_builder_status'); - if (tour_status_ended.key === 'finished' && !is_mobile) { + const joyride_status_finished = tour_status_ended.key === 'finished'; + if (joyride_status_finished && !is_mobile) { + if (tour_type.key === 'onboard_tour') { + onCloseTour(); + tour_status_ended.key = ''; + return joyride_status_finished ?? null; + } setTourDialogVisibility(true); + setHasTourEnded(true); is_tour_complete.current = false; window.removeEventListener('storage', botStorageSetting); @@ -158,6 +166,7 @@ const Dashboard = observer(() => { if (active_tab === 1 && !storage.bot_builder_token && !has_started_onboarding_tour) { setTourSettings(new Date().getTime(), `${tour_type.key}_token`); } + return botStorageSetting; }; if (!bot_tour_token && !is_mobile && !has_started_onboarding_tour) { window.addEventListener('storage', botStorageSetting); diff --git a/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx b/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx index 5528bd3bcc42..17b4a28a08a7 100644 --- a/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx +++ b/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx @@ -2,6 +2,7 @@ import { getImageLocation } from '../../public-path'; import React from 'react'; import { CallBackProps } from 'react-joyride'; import { Icon, Text } from '@deriv/components'; +import { getUrlBase } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { getSetting, storeSetting } from '../../utils/settings'; import TourGuide from './tour-guide'; @@ -49,6 +50,7 @@ export const tour_status_ended: TTourStatus = { let tour: { [key: string]: string } = {}; let current_target: number | undefined; + export const handleJoyrideCallback = (data: CallBackProps) => { const { action, index, status } = data; if (status === 'finished') { @@ -85,14 +87,13 @@ export const DBOT_ONBOARDING = [ label={localize('Build from scratch')} content={[ localize( - 'Create your bot easily using our drag-and-drop blocks to match your desired trading strategy, or choose from our pre-made Quick Strategies.' + 'Create your bot using our drag-and-drop blocks or click Quick Strategy to choose from the ready-to-use bot templates.' ), localize( - 'We also provide a tutorial on this tab to show you how you can build and execute a simple strategy.' + 'We also provide a guide on the Tutorial tab to show you how you can build and execute a simple strategy.' ), ]} - img={getImageLocation('dbot-onboarding-tour-step-1.gif')} - dashboard_tab_index={0} + media={getUrlBase('/public/videos/dbot-onboarding-tour-step-1.mp4')} step_index={1} /> ), @@ -105,8 +106,7 @@ export const DBOT_ONBOARDING = [ ), @@ -117,10 +117,9 @@ export const DBOT_ONBOARDING = [ target: '#id-tutorials', content: ( ), @@ -131,9 +130,8 @@ export const DBOT_ONBOARDING = [ target: '#tab__dashboard__table__tiles', content: ( ), @@ -145,10 +143,9 @@ export const DBOT_ONBOARDING = [ target: '.dc-drawer__container', content: ( ), @@ -160,16 +157,41 @@ export const DBOT_ONBOARDING = [ target: '.animation__wrapper', content: ( ]} + />, + ]} + media={getUrlBase('/public/videos/dbot-onboarding-tour-step-6.mp4')} step_index={6} /> ), ...joyride_props, disableOverlay: false, }, + { + target: '#id-tutorials', + content: ( + + + , + ]} + step_index={7} + show_actions={false} + has_localize_component + /> + ), + locale: { last: localize('Got it, thanks!') }, + ...joyride_props, + hideBackButton: true, + disableOverlay: false, + }, ]; const Step1 = ({ show_label = false }) => ( @@ -329,7 +351,9 @@ const Step4 = ({ show_label = false }) => (
- step4 +
); @@ -377,7 +401,9 @@ const Step5 = ({ show_label = false }) => (
- step5 +
); @@ -439,49 +465,55 @@ export const BOT_BUILDER_TOUR = [ { target: '.animation__wrapper', content: , + locale: { last: localize('Next') }, ...joyride_props, }, ]; export type TStepMobile = { header: string; - content: React.ReactElement; + content: React.ReactElement[]; key: number; + step_key?: number; + img?: string; + media?: string; }; export const BOT_BUILDER_MOBILE: TStepMobile[] = [ { header: localize('Step 1'), - content: , + content: [], key: 1, }, { header: localize('Step 2'), - content: ( + content: [ - ), + />, + ], key: 2, }, { header: localize('Step 3'), - content: ( + content: [ - ), + />, + ], key: 3, }, ]; -export const DBOT_ONBOARDING_MOBILE = [ +export const DBOT_ONBOARDING_MOBILE: TStepMobile[] = [ { header: localize('Get started on Deriv Bot'), content: [ ]} />, ], @@ -489,49 +521,81 @@ export const DBOT_ONBOARDING_MOBILE = [ step_key: 0, }, { - header: localize('Build from scratch'), - img: getImageLocation('dbot-mobile-onboarding-step-1.gif'), + header: localize('Import or choose your bot'), content: [ - localize( - 'Import a bot from your mobile device or from Google drive, see a preview in the bot builder, and start trading by running the bot, or choose from our pre-made Quick Strategies. ' - ), + , ], + media: getUrlBase('/public/videos/dbot-mobile-onboarding-step-1.mp4'), key: 2, step_key: 1, }, { header: localize('Monitor the market'), - img: getImageLocation('dbot-mobile-onboarding-step-2.png'), - content: [localize('View the market price of your favourite assets.')], + content: [ + , + ], + media: getUrlBase('/public/videos/dbot-mobile-onboarding-step-2.mp4'), key: 3, step_key: 2, }, { - header: localize('Guides and FAQs to help you'), - img: getImageLocation('dbot-mobile-onboarding-step-3.gif'), - content: [localize('Start with a video guide and the FAQs.')], + header: localize('Learn more with our tutorials'), + content: [ + , + ], + media: getUrlBase('/public/videos/dbot-mobile-onboarding-step-3.mp4'), key: 4, step_key: 3, }, { - header: localize('Shortcuts'), + header: localize('Use these shortcuts'), img: getImageLocation('dbot-mobile-onboarding-step-4.png'), - content: [localize('You can also use these shortcuts to import or build your bot.')], + content: [ + , + ], key: 5, step_key: 4, }, { - header: localize('How is my bot doing?'), - img: getImageLocation('dbot-mobile-onboarding-step-5.gif'), - content: [localize("See your bot's performance in real-time.")], + header: localize('Check your bot’s performance'), + content: [ + ]} + />, + ], + media: getUrlBase('/public/videos/dbot-mobile-onboarding-step-5.mp4'), key: 6, step_key: 5, }, { - header: localize('Run or stop your bot'), - img: getImageLocation('dbot-mobile-onboarding-step-6.gif'), - content: [localize('Click Run when you want to start trading, and click Stop when you want to stop.')], + header: localize('Run your bot'), + media: getUrlBase('/public/videos/dbot-mobile-onboarding-step-6.mp4'), + content: [ + ]} + />, + ], key: 7, step_key: 6, }, + { + header: localize('Want to retake the tour?'), + img: getImageLocation('dbot-mobile-onboarding-step-7.png'), + content: [], + key: 8, + step_key: 7, + }, ]; diff --git a/packages/bot-web-ui/src/components/dashboard/react-joyride-wrapper.tsx b/packages/bot-web-ui/src/components/dashboard/react-joyride-wrapper.tsx index 0dd1d1d1e02b..3740e2dfd319 100644 --- a/packages/bot-web-ui/src/components/dashboard/react-joyride-wrapper.tsx +++ b/packages/bot-web-ui/src/components/dashboard/react-joyride-wrapper.tsx @@ -25,6 +25,7 @@ const ReactJoyrideWrapper = ({ steps, styles, ...props }: { steps: Step[]; style primaryColor: 'var(--brand-red-coral)', textColor: 'var(--text-general)', spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)', + width: 440, }, buttonBack: { border: '0.2rem solid var(--text-less-prominent)', diff --git a/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx b/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx index 889c91ff36c0..fe8c63bc73e9 100644 --- a/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx @@ -1,72 +1,74 @@ import React from 'react'; -import { Loading, Text } from '@deriv/components'; +import { Icon, Text } from '@deriv/components'; import { observer } from '@deriv/stores'; -import { localize } from '@deriv/translations'; import { useDBotStore } from 'Stores/useDBotStore'; type TTourGuide = { - content: string[]; - img?: string; + content: string[] | React.ReactElement[]; + media?: string; label: string | boolean; - onCloseTour: () => void; step_index: number; + show_actions?: boolean; + has_localize_component?: boolean; }; -const TourGuide = observer(({ content, img, label, step_index }: TTourGuide) => { - const { dashboard } = useDBotStore(); - const { onCloseTour } = dashboard; +const TourGuide = observer( + ({ content, media, label, step_index, has_localize_component = false, show_actions = true }: TTourGuide) => { + const { dashboard } = useDBotStore(); + const { onCloseTour } = dashboard; - const [has_image_loaded, setImageLoaded] = React.useState(false); - - React.useEffect(() => { - if (img) { - const tour_image = new Image(); - tour_image.onload = () => { - setImageLoaded(true); - }; - tour_image.src = img; - } - }, [step_index]); - - return ( - -
-
- - {step_index}/6 - - - {localize('Exit tour')} - -
-
+ return ( + +
+ {show_actions && ( +
+ + {step_index}/6 + + + + +
+ )}
{label}
- {img && ( -
- {has_image_loaded ? : } -
+ {media && ( +
-
- - ); -}); + + ); + } +); export default TourGuide; diff --git a/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx b/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx index e0686d4b7bb4..abc7eb722880 100644 --- a/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx @@ -37,7 +37,7 @@ const Accordion = ({ content_data, expanded = false, ...props }: TAccordion) =>
setOpen(!is_open)}>
- {localize(header)} + {header}
@@ -50,7 +50,7 @@ const Accordion = ({ content_data, expanded = false, ...props }: TAccordion) => })} > - {localize(content)} + {content}
@@ -64,9 +64,10 @@ const TourSlider = observer(() => { dashboard; const { toggleTourLoadModal } = load_modal; const [step, setStep] = React.useState(1); - const [slider_content, setContent] = React.useState(''); - const [slider_header, setheader] = React.useState(''); - const [slider_image, setimg] = React.useState(''); + const [slider_content, setContent] = React.useState([]); + const [slider_header, setHeader] = React.useState(''); + const [slider_image, setImg] = React.useState(''); + const [slider_media, setMedia] = React.useState(''); const [step_key, setStepKey] = React.useState(0); React.useEffect(() => { @@ -74,9 +75,10 @@ const TourSlider = observer(() => { Object.values(!has_started_onboarding_tour ? BOT_BUILDER_MOBILE : DBOT_ONBOARDING_MOBILE).forEach(data => { if (data.key === step) { setContent(data?.content); - setheader(data?.header); - setimg(data?.img); - setStepKey(data?.step_key); + setHeader(data?.header); + setImg(data?.img || ''); + setMedia(data?.media || ''); + setStepKey(data?.step_key || 0); } }); const el_ref = document.querySelector('.toolbar__group-btn svg:nth-child(2)'); @@ -111,6 +113,9 @@ const TourSlider = observer(() => { const tour_button_text = has_started_onboarding_tour && step_key === 0 ? localize('Start') : bot_tour_text; + const onboarding_completed_text = + has_started_onboarding_tour && step === 8 ? localize('Got it, thanks!') : tour_button_text; + return ( <>
{ weight='less-prominent' line_height='s' size='xxs' - >{`${step_key}/6`} - - {localize('Exit Tour')} - + >{`${step_key}/7`} + + +
)} @@ -153,17 +152,32 @@ const TourSlider = observer(() => { {localize(slider_header)} )} - {has_started_onboarding_tour && slider_image && ( -
- -
- )} + {has_started_onboarding_tour && + // eslint-disable-next-line no-nested-ternary + (slider_media ? ( +
+
+ ) : slider_image ? ( +
+ +
+ ) : null)} {has_started_onboarding_tour && slider_content && ( <> - {slider_content.map(data => { + {slider_content?.map((data, index) => { return ( { line_height='s' size='xxs' > - {localize(data)} + {data} ); })} @@ -200,7 +214,7 @@ const TourSlider = observer(() => { /> )} {((has_started_bot_builder_tour && step !== 1) || - (has_started_onboarding_tour && step !== 1 && step !== 2)) && ( + (has_started_onboarding_tour && step !== 1 && step !== 2 && step !== 8)) && ( { onChange('dec'); @@ -208,7 +222,7 @@ const TourSlider = observer(() => { label={localize('Previous')} /> )} - +
diff --git a/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx b/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx index 07106ea8bb2b..d20903539ec2 100644 --- a/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx @@ -37,7 +37,7 @@ const TourTriggrerDialog = observer(() => { return ( Start for a quick tour to help you get started.'} + i18n_default_text='Hi! Hit <0>Start for a quick tour.' components={[]} /> ); diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/faq-content.tsx b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/faq-content.tsx index 0f4560471f2e..9db0d765338e 100644 --- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/faq-content.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/faq-content.tsx @@ -16,8 +16,8 @@ type TFAQList = { description: TDescription[]; }; -const FAQ = ({ type, content, src }: TDescription) => { - if (type === 'image') return ; +const FAQ = ({ type, content, src, imageclass }: TDescription) => { + if (type === 'image') return ; const is_mobile = isMobile(); return ( diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.scss b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.scss index 2b494010a5ab..c25ec8616484 100644 --- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.scss +++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.scss @@ -69,7 +69,7 @@ } &__tours { height: 13.5rem; - background-position: center center; + background-size: contain; margin-bottom: 0.8rem; width: 21.5rem; cursor: pointer; @@ -138,6 +138,12 @@ justify-content: space-between; } &-content { + .loss-control { + width: 80%; + } + img { + width: 45%; + } @include mobile { width: 100%; diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.tsx b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.tsx index b142d944977f..0ca1d90bdfc7 100644 --- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.tsx +++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/tutorial-content.tsx @@ -1,7 +1,7 @@ import { getImageLocation } from '../../../public-path'; import { localize } from '@deriv/translations'; -export type TDescription = Pick; +export type TDescription = Pick; export type TFaqContent = Pick; @@ -18,6 +18,7 @@ export type TContent = { title: string; type: string; url?: string; + imageclass?: string; }; export const user_guide_content: TUserGuideContent[] = [ { @@ -25,14 +26,14 @@ export const user_guide_content: TUserGuideContent[] = [ type: 'Tour', subtype: 'OnBoard', content: localize('Get started on Deriv Bot'), - src: getImageLocation('onboard-tour.png'), + src: getImageLocation('dbot-onboard-tour.png'), }, { id: 2, type: 'Tour', subtype: 'BotBuilder', content: localize('Let’s build a bot!'), - src: getImageLocation('builder-tour.png'), + src: getImageLocation('bot-builder-tour.png'), }, ]; @@ -281,6 +282,7 @@ export const faq_content: TFaqContent[] = [ { type: 'image', src: getImageLocation('loss_control.png'), + imageclass: 'loss-control', }, { type: 'text', @@ -289,25 +291,25 @@ export const faq_content: TFaqContent[] = [ { type: 'text', content: localize( - '- currentPL: Use this variable to store the cumulative profit or loss while your bot is running. Set the initial value to 0.' + '- current profit/loss: Use this variable to store the cumulative profit or loss while your bot is running. Set the initial value to 0.' ), }, { type: 'text', content: localize( - '- currentStake: Use this variable to store the stake amount used in the last contract. You can assign any amount you want, but it must be a positive number.' + '- current stake: Use this variable to store the stake amount used in the last contract. You can assign any amount you want, but it must be a positive number.' ), }, { type: 'text', content: localize( - '- maximumLoss: Use this variable to store your maximum loss limit. You can assign any amount you want, but it must be a positive number.' + '- maximum loss: Use this variable to store your maximum loss limit. You can assign any amount you want, but it must be a positive number.' ), }, { type: 'text', content: localize( - '- tradeAgain: Use this variable to stop trading when your loss limit is reached. Set the initial value to true.' + '- trade again: Use this variable to stop trading when your loss limit is reached. Set the initial value to true.' ), }, { @@ -317,7 +319,7 @@ export const faq_content: TFaqContent[] = [ { type: 'text', content: localize( - '2. Use a logic block to check if currentPL exceeds maximumLoss. If it does, set tradeAgain to false to prevent the bot from running another cycle.' + '2. Use a logic block to check if current profit/loss exceeds maximum loss. If it does, set trade again to false to prevent the bot from running another cycle.' ), }, { @@ -327,7 +329,7 @@ export const faq_content: TFaqContent[] = [ { type: 'text', content: localize( - '3. Update currentPL with the profit from the last contract. If the last contract was lost, the value of currentPL will be negative.' + '3. Update current profit/loss with the profit from the last contract. If the last contract was lost, the value of current profit/loss will be negative.' ), }, { diff --git a/packages/bot-web-ui/src/stores/dashboard-store.ts b/packages/bot-web-ui/src/stores/dashboard-store.ts index 09b091789db3..c5a77b46a976 100644 --- a/packages/bot-web-ui/src/stores/dashboard-store.ts +++ b/packages/bot-web-ui/src/stores/dashboard-store.ts @@ -301,10 +301,9 @@ export default class DashboardStore implements IDashboardStore { }; onTourEnd = (step: number, has_started_onboarding_tour: boolean): void => { - if (step === 7) { + if (step === 8) { this.onCloseTour(); this.setTourEnd(tour_type); - this.setTourDialogVisibility(true); } if (!has_started_onboarding_tour && step === 3) { this.onCloseTour(); diff --git a/packages/core/src/public/images/common/static_images/bot-builder-tour-step-4.gif b/packages/core/src/public/images/common/static_images/bot-builder-tour-step-4.gif deleted file mode 100644 index c82e8239e85b..000000000000 Binary files a/packages/core/src/public/images/common/static_images/bot-builder-tour-step-4.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/bot-builder-tour-step-5.gif b/packages/core/src/public/images/common/static_images/bot-builder-tour-step-5.gif deleted file mode 100644 index cc841ba2994e..000000000000 Binary files a/packages/core/src/public/images/common/static_images/bot-builder-tour-step-5.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/bot-builder-tour.png b/packages/core/src/public/images/common/static_images/bot-builder-tour.png new file mode 100644 index 000000000000..bb481f1dd0de Binary files /dev/null and b/packages/core/src/public/images/common/static_images/bot-builder-tour.png differ diff --git a/packages/core/src/public/images/common/static_images/builder-tour.png b/packages/core/src/public/images/common/static_images/builder-tour.png deleted file mode 100644 index ccba7f2d4a77..000000000000 Binary files a/packages/core/src/public/images/common/static_images/builder-tour.png and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-1.gif b/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-1.gif deleted file mode 100644 index dc3b12a97c31..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-1.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-3.gif b/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-3.gif deleted file mode 100644 index 2de7fb023cae..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-3.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-5.gif b/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-5.gif deleted file mode 100644 index 4d5ec89b4e15..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-5.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-6.gif b/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-6.gif deleted file mode 100644 index e09696df4807..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-6.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-7.png b/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-7.png new file mode 100644 index 000000000000..a9b712b48732 Binary files /dev/null and b/packages/core/src/public/images/common/static_images/dbot-mobile-onboarding-step-7.png differ diff --git a/packages/core/src/public/images/common/static_images/dbot-onboard-tour.png b/packages/core/src/public/images/common/static_images/dbot-onboard-tour.png new file mode 100644 index 000000000000..5f5809c252b0 Binary files /dev/null and b/packages/core/src/public/images/common/static_images/dbot-onboard-tour.png differ diff --git a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-1.gif b/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-1.gif deleted file mode 100644 index 2171d3a7408d..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-1.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-2.gif b/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-2.gif deleted file mode 100644 index 078fa652466a..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-2.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-3.gif b/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-3.gif deleted file mode 100644 index 51053052f0ee..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-3.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-5.gif b/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-5.gif deleted file mode 100644 index f4cb80ec39fe..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-5.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-6.gif b/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-6.gif deleted file mode 100644 index 9ff34062da0d..000000000000 Binary files a/packages/core/src/public/images/common/static_images/dbot-onboarding-tour-step-6.gif and /dev/null differ diff --git a/packages/core/src/public/images/common/static_images/loss_control.png b/packages/core/src/public/images/common/static_images/loss_control.png index 6f2a6bb06dc7..a719388f5d85 100644 Binary files a/packages/core/src/public/images/common/static_images/loss_control.png and b/packages/core/src/public/images/common/static_images/loss_control.png differ diff --git a/packages/core/src/public/images/common/static_images/loss_control_purchase_conditions.png b/packages/core/src/public/images/common/static_images/loss_control_purchase_conditions.png index a2ac69da31bc..db517cd952a3 100644 Binary files a/packages/core/src/public/images/common/static_images/loss_control_purchase_conditions.png and b/packages/core/src/public/images/common/static_images/loss_control_purchase_conditions.png differ diff --git a/packages/core/src/public/images/common/static_images/loss_control_restart_trade_conditions.png b/packages/core/src/public/images/common/static_images/loss_control_restart_trade_conditions.png index 681797f096b2..da47e1bb07ac 100644 Binary files a/packages/core/src/public/images/common/static_images/loss_control_restart_trade_conditions.png and b/packages/core/src/public/images/common/static_images/loss_control_restart_trade_conditions.png differ diff --git a/packages/core/src/public/images/common/static_images/loss_control_trade_parameters.png b/packages/core/src/public/images/common/static_images/loss_control_trade_parameters.png index f3610b95da03..bf1dedbb13c5 100644 Binary files a/packages/core/src/public/images/common/static_images/loss_control_trade_parameters.png and b/packages/core/src/public/images/common/static_images/loss_control_trade_parameters.png differ diff --git a/packages/core/src/public/images/common/static_images/onboard-tour.png b/packages/core/src/public/images/common/static_images/onboard-tour.png deleted file mode 100644 index 49cc54cfb2f0..000000000000 Binary files a/packages/core/src/public/images/common/static_images/onboard-tour.png and /dev/null differ diff --git a/packages/core/src/public/videos/bot-builder-tour-step-4.mp4 b/packages/core/src/public/videos/bot-builder-tour-step-4.mp4 new file mode 100644 index 000000000000..0a67d83ea108 Binary files /dev/null and b/packages/core/src/public/videos/bot-builder-tour-step-4.mp4 differ diff --git a/packages/core/src/public/videos/bot-builder-tour-step-5.mp4 b/packages/core/src/public/videos/bot-builder-tour-step-5.mp4 new file mode 100644 index 000000000000..1fc2553964c5 Binary files /dev/null and b/packages/core/src/public/videos/bot-builder-tour-step-5.mp4 differ diff --git a/packages/core/src/public/videos/dbot-mobile-onboarding-step-1.mp4 b/packages/core/src/public/videos/dbot-mobile-onboarding-step-1.mp4 new file mode 100644 index 000000000000..1e19f5707f00 Binary files /dev/null and b/packages/core/src/public/videos/dbot-mobile-onboarding-step-1.mp4 differ diff --git a/packages/core/src/public/videos/dbot-mobile-onboarding-step-2.mp4 b/packages/core/src/public/videos/dbot-mobile-onboarding-step-2.mp4 new file mode 100644 index 000000000000..6301bd1dbca5 Binary files /dev/null and b/packages/core/src/public/videos/dbot-mobile-onboarding-step-2.mp4 differ diff --git a/packages/core/src/public/videos/dbot-mobile-onboarding-step-3.mp4 b/packages/core/src/public/videos/dbot-mobile-onboarding-step-3.mp4 new file mode 100644 index 000000000000..975af24cac02 Binary files /dev/null and b/packages/core/src/public/videos/dbot-mobile-onboarding-step-3.mp4 differ diff --git a/packages/core/src/public/videos/dbot-mobile-onboarding-step-5.mp4 b/packages/core/src/public/videos/dbot-mobile-onboarding-step-5.mp4 new file mode 100644 index 000000000000..d7c4719e95ef Binary files /dev/null and b/packages/core/src/public/videos/dbot-mobile-onboarding-step-5.mp4 differ diff --git a/packages/core/src/public/videos/dbot-mobile-onboarding-step-6.mp4 b/packages/core/src/public/videos/dbot-mobile-onboarding-step-6.mp4 new file mode 100644 index 000000000000..7eca06c997d4 Binary files /dev/null and b/packages/core/src/public/videos/dbot-mobile-onboarding-step-6.mp4 differ diff --git a/packages/core/src/public/videos/dbot-onboarding-tour-step-1.mp4 b/packages/core/src/public/videos/dbot-onboarding-tour-step-1.mp4 new file mode 100644 index 000000000000..3445bee6a655 Binary files /dev/null and b/packages/core/src/public/videos/dbot-onboarding-tour-step-1.mp4 differ diff --git a/packages/core/src/public/videos/dbot-onboarding-tour-step-2.mp4 b/packages/core/src/public/videos/dbot-onboarding-tour-step-2.mp4 new file mode 100644 index 000000000000..f8eac3bdef10 Binary files /dev/null and b/packages/core/src/public/videos/dbot-onboarding-tour-step-2.mp4 differ diff --git a/packages/core/src/public/videos/dbot-onboarding-tour-step-3.mp4 b/packages/core/src/public/videos/dbot-onboarding-tour-step-3.mp4 new file mode 100644 index 000000000000..08466ffdb769 Binary files /dev/null and b/packages/core/src/public/videos/dbot-onboarding-tour-step-3.mp4 differ diff --git a/packages/core/src/public/videos/dbot-onboarding-tour-step-5.mp4 b/packages/core/src/public/videos/dbot-onboarding-tour-step-5.mp4 new file mode 100644 index 000000000000..3f1556cd03bb Binary files /dev/null and b/packages/core/src/public/videos/dbot-onboarding-tour-step-5.mp4 differ diff --git a/packages/core/src/public/videos/dbot-onboarding-tour-step-6.mp4 b/packages/core/src/public/videos/dbot-onboarding-tour-step-6.mp4 new file mode 100644 index 000000000000..9c62205a6026 Binary files /dev/null and b/packages/core/src/public/videos/dbot-onboarding-tour-step-6.mp4 differ