diff --git a/packages/components/src/components/popup/index.js b/packages/components/src/components/popup/index.ts
similarity index 58%
rename from packages/components/src/components/popup/index.js
rename to packages/components/src/components/popup/index.ts
index a2e16ad8d3b6..25b536c50249 100644
--- a/packages/components/src/components/popup/index.js
+++ b/packages/components/src/components/popup/index.ts
@@ -1,4 +1,4 @@
-import Popup from './popup.jsx';
+import Popup from './popup';
import './popup.scss';
export default Popup;
diff --git a/packages/components/src/components/popup/popup-body.jsx b/packages/components/src/components/popup/popup-body.tsx
similarity index 84%
rename from packages/components/src/components/popup/popup-body.jsx
rename to packages/components/src/components/popup/popup-body.tsx
index a436d985801f..8d692be812fe 100644
--- a/packages/components/src/components/popup/popup-body.jsx
+++ b/packages/components/src/components/popup/popup-body.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import PopupFooter from './popup-footer.jsx';
-import PopupContext from './popup-context';
+import PopupFooter from './popup-footer';
+import PopupContext, { TDetail } from './popup-context';
import Tabs from '../tabs';
const PopupBody = () => {
@@ -31,14 +31,14 @@ const PopupBody = () => {
icon_size={30}
top
>
- {tabs_detail.map(detail => {
- const { id, icon, has_footer_separator, renderBody, renderFooter, title } = detail;
+ {tabs_detail.map((detail: TDetail) => {
+ const { id, has_footer_separator, renderBody, renderFooter } = detail;
const BodyComponent = typeof renderBody === 'function' ? renderBody : null;
const FooterComponent = typeof renderFooter === 'function' ? renderFooter : null;
return (
-
+
{BodyComponent && (
)}
diff --git a/packages/components/src/components/popup/popup-context.js b/packages/components/src/components/popup/popup-context.js
deleted file mode 100644
index d8214467aad6..000000000000
--- a/packages/components/src/components/popup/popup-context.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-const PopupContext = React.createContext();
-
-export default PopupContext;
diff --git a/packages/components/src/components/popup/popup-context.tsx b/packages/components/src/components/popup/popup-context.tsx
new file mode 100644
index 000000000000..d69e3057058a
--- /dev/null
+++ b/packages/components/src/components/popup/popup-context.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+export type TDetail = {
+ id?: string;
+ icon?: string;
+ has_footer_separator: boolean;
+ renderBody?: React.ElementType;
+ renderFooter?: React.ElementType;
+ title?: string;
+};
+
+export type TPopupContext = {
+ active_tab_icon_color: string;
+ balance: number | string;
+ Component: React.ElementType;
+ currency: string;
+ close_icon_color: string;
+ header_background_color: string;
+ header_big_text: string;
+ header_banner_text: string;
+ header_button_text: string;
+ header_contents_color?: string;
+ header_content_color?: string;
+ header_icon: string;
+ is_overlay_shown: boolean;
+ onHeaderButtonClick?: () => void;
+ overlay_ref?: HTMLDivElement | null;
+ setIsOverlayShown?: React.Dispatch
>;
+ should_show_popup: boolean;
+ tab_icon_color: string;
+ tabs_detail: TDetail[];
+ title: string;
+ togglePopupModal?: () => void;
+};
+
+const PopupContext = React.createContext({
+ active_tab_icon_color: '',
+ balance: '',
+ currency: '',
+ close_icon_color: '',
+ header_background_color: '',
+ header_big_text: '',
+ header_banner_text: '',
+ header_button_text: '',
+ header_content_color: '',
+ header_icon: '',
+ is_overlay_shown: false,
+ should_show_popup: false,
+ title: '',
+ tab_icon_color: '',
+ tabs_detail: [{ has_footer_separator: false }],
+ Component: 'symbol',
+});
+
+export default PopupContext;
diff --git a/packages/components/src/components/popup/popup-footer.jsx b/packages/components/src/components/popup/popup-footer.tsx
similarity index 59%
rename from packages/components/src/components/popup/popup-footer.jsx
rename to packages/components/src/components/popup/popup-footer.tsx
index 56437e858b9d..9aeb8affd2fd 100644
--- a/packages/components/src/components/popup/popup-footer.jsx
+++ b/packages/components/src/components/popup/popup-footer.tsx
@@ -1,8 +1,11 @@
import * as React from 'react';
-import PropTypes from 'prop-types';
import classNames from 'classnames';
-const PopupFooter = ({ children, has_separator }) => (
+type TPopupFooter = {
+ has_separator: boolean;
+};
+
+const PopupFooter = ({ children, has_separator }: React.PropsWithChildren) => (
(
);
-PopupFooter.propTypes = {
- children: PropTypes.node,
- has_separator: PropTypes.bool,
-};
-
export default PopupFooter;
diff --git a/packages/components/src/components/popup/popup-header.jsx b/packages/components/src/components/popup/popup-header.tsx
similarity index 98%
rename from packages/components/src/components/popup/popup-header.jsx
rename to packages/components/src/components/popup/popup-header.tsx
index 4230cd1a3278..beb6f1dd8612 100644
--- a/packages/components/src/components/popup/popup-header.jsx
+++ b/packages/components/src/components/popup/popup-header.tsx
@@ -55,7 +55,7 @@ const PopupHeader = () => {
className='dc-popup__header-button'
icon={}
onClick={onHeaderButtonClick}
- text={isDesktop() && header_button_text}
+ text={isDesktop() ? header_button_text : ''}
/>
)}
diff --git a/packages/components/src/components/popup/popup-overlay-container.jsx b/packages/components/src/components/popup/popup-overlay-container.tsx
similarity index 81%
rename from packages/components/src/components/popup/popup-overlay-container.jsx
rename to packages/components/src/components/popup/popup-overlay-container.tsx
index 5cb4ef318392..88f7ede6e881 100644
--- a/packages/components/src/components/popup/popup-overlay-container.jsx
+++ b/packages/components/src/components/popup/popup-overlay-container.tsx
@@ -1,9 +1,12 @@
import * as React from 'react';
import { CSSTransition } from 'react-transition-group';
-import PropTypes from 'prop-types';
import PopupContext from './popup-context';
-const PopupOverlayContainer = ({ refSetter }) => {
+type TPopupOverlayContainer = {
+ refSetter: (instance: HTMLDivElement | null) => void;
+};
+
+const PopupOverlayContainer = ({ refSetter }: TPopupOverlayContainer) => {
const { is_overlay_shown } = React.useContext(PopupContext);
return (
@@ -23,8 +26,4 @@ const PopupOverlayContainer = ({ refSetter }) => {
);
};
-PopupOverlayContainer.propTypes = {
- refSetter: PropTypes.func.isRequired,
-};
-
export default PopupOverlayContainer;
diff --git a/packages/components/src/components/popup/popup-overlay.jsx b/packages/components/src/components/popup/popup-overlay.tsx
similarity index 77%
rename from packages/components/src/components/popup/popup-overlay.jsx
rename to packages/components/src/components/popup/popup-overlay.tsx
index e1a4ab2d7bfc..ed5468c7e81a 100644
--- a/packages/components/src/components/popup/popup-overlay.jsx
+++ b/packages/components/src/components/popup/popup-overlay.tsx
@@ -1,10 +1,22 @@
import * as React from 'react';
import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
import Text from '../text/text';
import Button from '../button/button';
-const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }) =>
+type TPopupOverlay = {
+ title: string;
+ descriptions: [
+ {
+ key: number | string;
+ component: React.ReactNode;
+ }
+ ];
+ overlay_ref: HTMLDivElement;
+ toggleOverlay: () => void;
+ done_text: string;
+};
+
+const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }: TPopupOverlay) =>
createPortal(
{
- const [overlay_ref, setOverlayRef] = React.useState(null);
+}: TPopupContext) => {
+ const [overlay_ref, setOverlayRef] = React.useState();
const [is_overlay_shown, setIsOverlayShown] = React.useState(false);
const context_value = {
Component,
@@ -51,6 +50,7 @@ const Popup = ({
tabs_detail,
title,
togglePopupModal,
+ should_show_popup: false,
};
if (isMobile()) {
@@ -66,7 +66,6 @@ const Popup = ({
is_modal_open={should_show_popup}
onClickClose={togglePopupModal}
page_header_className='dc-popup__mobile-full-page-modal-header'
- page_overlay
renderPageHeader={PopupHeader}
should_header_stick_body
>
@@ -76,7 +75,7 @@ const Popup = ({
,
- document.getElementById('popup_root')
+ document.getElementById('popup_root')!
);
}
@@ -88,7 +87,6 @@ const Popup = ({
has_close_icon={false}
header={
}
header_background_color={header_background_color}
- header_icon={close_icon_color}
height='636px'
is_open={should_show_popup}
should_header_stick_body
@@ -107,33 +105,4 @@ const Popup = ({
Popup.Overlay = PopupOverlay;
-Popup.propTypes = {
- active_tab_icon_color: PropTypes.string,
- balance: PropTypes.number,
- close_icon_color: PropTypes.string,
- header_background_color: PropTypes.string,
- header_banner_text: PropTypes.string,
- header_big_text: PropTypes.string,
- header_button_text: PropTypes.string,
- header_contents_color: PropTypes.string,
- header_icon: PropTypes.string,
- onHeaderButtonClick: PropTypes.func,
- should_show_popup: PropTypes.bool,
- tab_icon_color: PropTypes.string,
- tabs_detail: PropTypes.arrayOf(
- PropTypes.shape({
- has_footer_separator: PropTypes.bool,
- renderBody: PropTypes.func,
- renderFooter: PropTypes.func,
- icon: PropTypes.string,
- id: PropTypes.number,
- title: PropTypes.string,
- })
- ),
- title: PropTypes.string,
- togglePopupModal: PropTypes.func,
- Component: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.node]),
- currency: PropTypes.string,
-};
-
export default Popup;
diff --git a/packages/components/src/components/tabs/tab.tsx b/packages/components/src/components/tabs/tab.tsx
index 57e4d9e5f124..eba22fac25bc 100644
--- a/packages/components/src/components/tabs/tab.tsx
+++ b/packages/components/src/components/tabs/tab.tsx
@@ -6,18 +6,18 @@ import Icon from '../icon';
type TTabProps = {
active_icon_color: string;
active_tab_ref?: React.RefObject
| null;
- bottom: boolean;
+ bottom?: boolean;
className?: string;
count: number;
header_content: React.ReactElement;
- header_fit_content: boolean;
+ header_fit_content?: boolean;
icon_color: string;
icon_size: number;
icon: string;
id?: string;
is_active: boolean;
- is_label_hidden: boolean;
- is_scrollable: boolean;
+ is_label_hidden?: boolean;
+ is_scrollable?: boolean;
label: string;
onClick: React.MouseEventHandler;
setActiveLineStyle: () => void;
diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
index bd2250e9631b..3fdf8ea39d0d 100644
--- a/packages/components/src/components/tabs/tabs.tsx
+++ b/packages/components/src/components/tabs/tabs.tsx
@@ -9,24 +9,24 @@ type TTabsProps = RouteComponentProps & {
active_icon_color: string;
active_index?: number;
background_color: string;
- bottom: boolean;
+ bottom?: boolean;
center: boolean;
- children: React.ReactElement & React.ReactElement[];
+ children: React.ReactElement[];
className?: string;
fit_content: boolean;
has_active_line?: boolean;
has_bottom_line?: boolean;
- header_fit_content: boolean;
+ header_fit_content?: boolean;
history: History;
icon_color: string;
icon_size: number;
- is_100vw: boolean;
- is_full_width: boolean;
- is_overflow_hidden: boolean;
- is_scrollable: boolean;
- onTabItemClick: (active_tab_index: number) => void;
- should_update_hash: boolean;
- single_tab_has_no_label: boolean;
+ is_100vw?: boolean;
+ is_full_width?: boolean;
+ is_overflow_hidden?: boolean;
+ is_scrollable?: boolean;
+ onTabItemClick?: (active_tab_index: number) => void;
+ should_update_hash?: boolean;
+ single_tab_has_no_label?: boolean;
top: boolean;
};