diff --git a/packages/components/src/components/progress-slider/index.js b/packages/components/src/components/progress-slider/index.ts
similarity index 55%
rename from packages/components/src/components/progress-slider/index.js
rename to packages/components/src/components/progress-slider/index.ts
index 7983c852f060..c204d4cb43bf 100644
--- a/packages/components/src/components/progress-slider/index.js
+++ b/packages/components/src/components/progress-slider/index.ts
@@ -1,4 +1,4 @@
-import ProgressSlider from './progress-slider.jsx';
+import ProgressSlider from './progress-slider';
import './progress-slider.scss';
export default ProgressSlider;
diff --git a/packages/components/src/components/progress-slider/progress-slider.jsx b/packages/components/src/components/progress-slider/progress-slider.tsx
similarity index 82%
rename from packages/components/src/components/progress-slider/progress-slider.jsx
rename to packages/components/src/components/progress-slider/progress-slider.tsx
index 7e12c350f33d..716364ee4951 100644
--- a/packages/components/src/components/progress-slider/progress-slider.jsx
+++ b/packages/components/src/components/progress-slider/progress-slider.tsx
@@ -1,10 +1,21 @@
import classNames from 'classnames';
-import PropTypes from 'prop-types';
import React from 'react';
import { getTimePercentage } from '@deriv/shared';
-import ProgressTicks from './progress-ticks.jsx';
+import ProgressTicks from './progress-ticks';
import RemainingTime from '../remaining-time';
import Text from '../text';
+import moment from 'moment';
+
+type TProgressSliderProps = {
+ className?: string;
+ current_tick: number;
+ expiry_time: number & string;
+ getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration
+ is_loading: boolean;
+ server_time: moment.Moment;
+ start_time: number & string;
+ ticks_count: number;
+};
const ProgressSlider = ({
className,
@@ -15,7 +26,7 @@ const ProgressSlider = ({
server_time,
start_time,
ticks_count,
-}) => {
+}: TProgressSliderProps) => {
const percentage = getTimePercentage(server_time, start_time, expiry_time);
return (
@@ -50,15 +61,4 @@ const ProgressSlider = ({
};
// Keypress events do not trigger on Safari due to the way it handles input type='range' elements, using focus on the input element also doesn't work for Safari.
-ProgressSlider.propTypes = {
- className: PropTypes.string,
- current_tick: PropTypes.number,
- expiry_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- is_loading: PropTypes.bool,
- server_time: PropTypes.object,
- start_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- ticks_count: PropTypes.number,
- getCardLabels: PropTypes.func,
-};
-
export default ProgressSlider;
diff --git a/packages/components/src/components/progress-slider/progress-ticks.jsx b/packages/components/src/components/progress-slider/progress-ticks.tsx
similarity index 73%
rename from packages/components/src/components/progress-slider/progress-ticks.jsx
rename to packages/components/src/components/progress-slider/progress-ticks.tsx
index ba5b3fced861..f91ce4d013cd 100644
--- a/packages/components/src/components/progress-slider/progress-ticks.jsx
+++ b/packages/components/src/components/progress-slider/progress-ticks.tsx
@@ -1,10 +1,15 @@
import classNames from 'classnames';
-import PropTypes from 'prop-types';
import React from 'react';
import Text from '../text';
-const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => {
- const arr_ticks = [...Array(ticks_count).keys()];
+type TProgressTicksProps = {
+ current_tick: number;
+ getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration
+ ticks_count: number;
+};
+
+const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }: TProgressTicksProps) => {
+ const arr_ticks = Array.from(Array(ticks_count).keys());
return (
@@ -15,7 +20,7 @@ const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => {
))}
@@ -24,10 +29,4 @@ const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => {
);
};
-ProgressTicks.propTypes = {
- current_tick: PropTypes.number,
- ticks_count: PropTypes.number,
- getCardLabels: PropTypes.func,
-};
-
export default ProgressTicks;
diff --git a/packages/components/src/components/remaining-time/remaining-time.tsx b/packages/components/src/components/remaining-time/remaining-time.tsx
index 6e51e00b5181..3c173b09304b 100644
--- a/packages/components/src/components/remaining-time/remaining-time.tsx
+++ b/packages/components/src/components/remaining-time/remaining-time.tsx
@@ -5,13 +5,13 @@ import moment from 'moment';
type TRemainingTimeProps = {
end_time?: number;
start_time: moment.Moment;
- format: string;
+ format?: string;
getCardLabels: () => { [key: string]: string }; // TODO Use the one from common after contract-card migration
};
const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => {
if (!end_time || start_time.unix() > +end_time) {
- return '';
+ return {''};
}
const { days, timestamp } = formatDuration(getDiffDuration(start_time.unix(), end_time), format);
@@ -21,7 +21,7 @@ const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemaini
}
const is_zeroes = /^00:00$/.test(remaining_time);
- return !is_zeroes && {remaining_time}
;
+ return {!is_zeroes && {remaining_time}
};
};
export default RemainingTime;
diff --git a/packages/shared/src/utils/contract/contract.ts b/packages/shared/src/utils/contract/contract.ts
index 365e4c915978..cfd178f1ab05 100644
--- a/packages/shared/src/utils/contract/contract.ts
+++ b/packages/shared/src/utils/contract/contract.ts
@@ -109,7 +109,7 @@ export const getLimitOrderAmount = (limit_order: TLimitOrder) => {
};
};
-export const getTimePercentage = (server_time: number, start_time: number, expiry_time: number) => {
+export const getTimePercentage = (server_time: moment.Moment, start_time: number, expiry_time: number) => {
const duration_from_purchase = moment.duration(moment.unix(expiry_time).diff(moment.unix(start_time)));
const duration_from_now = moment.duration(moment.unix(expiry_time).diff(server_time));
let percentage = (duration_from_now.asMilliseconds() / duration_from_purchase.asMilliseconds()) * 100;