From 13e327a325e853b1919ce8e07c0e9e52fe4b45a3 Mon Sep 17 00:00:00 2001
From: Sergei Baranovski <sergei@deriv.com>
Date: Tue, 5 Sep 2023 10:11:45 +0300
Subject: [PATCH] feat: modify progressBarTracker and renamed this component in
 CardsSliderSwiper

---
 .../wallet-cards-carousel/cards-slider-swiper.tsx      |  6 +++---
 .../progress-bar-tracker/progress-bar-tracker.tsx      | 10 ++++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx b/packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx
index 8a33854b8792..bfc9f896bf97 100644
--- a/packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx
+++ b/packages/appstore/src/components/wallet-cards-carousel/cards-slider-swiper.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { TWalletAccount } from 'Types';
-import { WalletCard, ProgressBarOnboarding } from '@deriv/components';
+import { WalletCard, ProgressBarTracker } from '@deriv/components';
 import { formatMoney } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -73,9 +73,9 @@ const CardsSliderSwiper = observer(() => {
                 <div className='wallet-cards-carousel__container'>{slider}</div>
             </div>
             <div className='wallet-cards-carousel__pagination'>
-                <ProgressBarOnboarding
+                <ProgressBarTracker
                     step={active_index}
-                    amount_of_steps={steps}
+                    steps_list={steps}
                     is_transition={true}
                     setStep={setActiveIndex}
                 />
diff --git a/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.tsx b/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.tsx
index d53ef8751683..1f3fae41c73f 100644
--- a/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.tsx
+++ b/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
+import classNames from 'classnames';
 
 type TProgressBarTracker = {
     step: number;
     steps_list: Array<string>;
     setStep: React.Dispatch<React.SetStateAction<number>>;
+    is_transition?: boolean;
 };
 
-const ProgressBarTracker = ({ step, steps_list, setStep }: TProgressBarTracker) => (
+const ProgressBarTracker = ({ step, steps_list, setStep, is_transition = false }: TProgressBarTracker) => (
     <div className='dc-progress-bar-tracker'>
         {steps_list.map((step_item, index) => {
             const active = step === index + 1;
@@ -15,7 +17,11 @@ const ProgressBarTracker = ({ step, steps_list, setStep }: TProgressBarTracker)
                 <div
                     key={step_item}
                     onClick={() => setStep(index + 1)}
-                    className={active ? 'dc-progress-bar-tracker-rectangle' : 'dc-progress-bar-tracker-circle'}
+                    className={classNames({
+                        'dc-progress-bar-tracker-rectangle': active,
+                        'dc-progress-bar-tracker-circle': !active,
+                        'dc-progress-bar-tracker-transition': is_transition,
+                    })}
                 />
             );
         })}