Merge pull request #33 from yauheni-kryzhyk-deriv/yauheni/74120/iconw…

…ithmessage_ts_migration yauheni/74120/icon with message ts migration
likhith-deriv · Nov 3, 2022 · 0d74047 · 0d74047
2 parents 032afd2 + 4dbb3c0
commit 0d74047
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/...ssage/__tests__/icon-with-message.spec.js → ...sage/__tests__/icon-with-message.spec.tsx b/...ssage/__tests__/icon-with-message.spec.js → ...sage/__tests__/icon-with-message.spec.tsx
diff --git a/...s/icon-with-message/icon-with-message.jsx → ...s/icon-with-message/icon-with-message.tsx b/...s/icon-with-message/icon-with-message.jsx → ...s/icon-with-message/icon-with-message.tsx
@@ -1,10 +1,20 @@
-import PropTypes from 'prop-types';
-import * as React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { Icon, Text, Button } from '@deriv/components';
 import { isMobile, PlatformContext } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
+import { TPlatformContext } from 'Types';
+import RootStore from 'Stores/index';
+
+type TIconWithMessage = {
+    icon: string;
+    has_button?: boolean;
+    has_real_account?: boolean;
+    message: string;
+    toggleAccountsDialog: (status?: boolean) => void;
+    toggleShouldShowRealAccountsList: (value: boolean) => void;
+};
 
 const IconWithMessage = ({
     has_button,
@@ -13,8 +23,8 @@ const IconWithMessage = ({
     message,
     toggleAccountsDialog,
     toggleShouldShowRealAccountsList,
-}) => {
-    const { is_appstore } = React.useContext(PlatformContext);
+}: TIconWithMessage) => {
+    const { is_appstore }: Partial<TPlatformContext> = React.useContext(PlatformContext);
 
     return (
         <div className={classNames('da-icon-with-message', { 'da-icon-with-message-full-width': is_appstore })}>
@@ -23,7 +33,7 @@ const IconWithMessage = ({
                 className='da-icon-with-message__text'
                 as='p'
                 color='general'
-                size={isMobile ? 'xs' : 's'}
+                size={isMobile() ? 'xs' : 's'}
                 line_height='m'
                 weight='bold'
             >
@@ -46,16 +56,7 @@ const IconWithMessage = ({
     );
 };
 
-IconWithMessage.propTypes = {
-    icon: PropTypes.string.isRequired,
-    has_button: PropTypes.bool,
-    has_real_account: PropTypes.bool,
-    message: PropTypes.string.isRequired,
-    toggleAccountsDialog: PropTypes.func,
-    toggleShouldShowRealAccountsList: PropTypes.func,
-};
-
-export default connect(({ client, ui }) => ({
+export default connect(({ client, ui }: RootStore) => ({
     has_real_account: client.has_any_real_account,
     toggleAccountsDialog: ui.toggleAccountsDialog,
     toggleShouldShowRealAccountsList: ui.toggleShouldShowRealAccountsList,

diff --git a/...src/Components/icon-with-message/index.js → ...src/Components/icon-with-message/index.ts b/...src/Components/icon-with-message/index.js → ...src/Components/icon-with-message/index.ts
@@ -1,4 +1,4 @@
-import IconWithMessage from './icon-with-message.jsx';
+import IconWithMessage from './icon-with-message';
 import './icon-with-message.scss';
 
 export default IconWithMessage;