Jim/wall 4348/replace wallet text with text from UI library (deriv-co…

…m#16564) * chore: replace wallettext with text component * chore: revert back to previous type * chore: replace text with loader and add missed translations * chore: add translations * revert stylelint changes * chore: revert more stylelint changes * ci: fix failing tests
heorhi-deriv · Sep 16, 2024 · 0ef26a9 · 0ef26a9
1 parent 87fdb26
commit 0ef26a9
Show file tree

Hide file tree

Showing 43 changed files with 220 additions and 454 deletions.
diff --git a/packages/wallets/src/components/AppCard/AppCard.tsx b/packages/wallets/src/components/AppCard/AppCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import { Text } from '@deriv-com/ui';
 import type { TGenericSizes, THooks } from '../../types';
 import { AppCardBadge } from '../AppCardBadge';
-import { WalletText } from '../Base';
 import { WalletGradientBackground } from '../WalletGradientBackground';
 import { WalletMarketCurrencyIcon } from '../WalletMarketCurrencyIcon';
 import './AppCard.scss';
@@ -54,13 +54,13 @@ const AppCard: React.FC<TProps> = ({
                     </div>
                     {cardSize !== 'sm' && (
                         <div className='wallets-app-card__bottom'>
-                            <WalletText size='2xs'>{appName}</WalletText>
-                            <WalletText color='less-prominent' size='2xs'>
+                            <Text size='2xs'>{appName}</Text>
+                            <Text color='less-prominent' size='2xs'>
                                 {walletName}
-                            </WalletText>
-                            <WalletText size='sm' weight='bold'>
+                            </Text>
+                            <Text size='sm' weight='bold'>
                                 {balance}
-                            </WalletText>
+                            </Text>
                         </div>
                     )}
                 </div>

diff --git a/packages/wallets/src/components/Base/Tabs/TabTitle.tsx b/packages/wallets/src/components/Base/Tabs/TabTitle.tsx
@@ -1,13 +1,13 @@
-import React, { FC, useCallback } from 'react';
+import React, { ComponentProps, FC, useCallback } from 'react';
 import classNames from 'classnames';
-import WalletText, { WalletTextProps } from '../WalletText/WalletText';
+import { Text } from '@deriv-com/ui';
 
 export type TabTitleProps = {
     icon?: React.ReactNode;
     index: number;
     isActive?: boolean;
     setSelectedTab: (index: number) => void;
-    size: WalletTextProps['size'];
+    size: ComponentProps<typeof Text>['size'];
     title: string;
 };
 
@@ -24,9 +24,9 @@ const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, si
             onClick={handleOnClick}
         >
             {icon}
-            <WalletText size={size} weight={isActive ? 'bold' : 'normal'}>
+            <Text size={size} weight={isActive ? 'bold' : 'normal'}>
                 {title}
-            </WalletText>
+            </Text>
         </button>
     );
 };

diff --git a/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx b/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { LegacyLossIcon, LegacySettlementFillIcon, LegacyWarningIcon, LegacyWonIcon } from '@deriv/quill-icons';
-import { WalletText } from '../index';
+import { Text } from '@deriv-com/ui';
 import './WalletAlertMessage.scss';
 
 const typeMapper = {
@@ -44,9 +44,9 @@ const WalletAlertMessage: React.FC<TProps> = ({ children, message, type }) => {
                 <Icon className='wallets-alert-message__icon-container__icon' fill={fill} iconSize='xs' />
             </div>
             <div className='wallets-alert-message__message-container'>
-                <WalletText color={color} size='xs'>
+                <Text color={color} size='xs'>
                     {message}
-                </WalletText>
+                </Text>
             </div>
             {children && <>{children}</>}
         </div>

diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.scss b/packages/wallets/src/components/Base/WalletText/WalletText.scss
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.tsx b/packages/wallets/src/components/Base/WalletText/WalletText.tsx
diff --git a/packages/wallets/src/components/Base/WalletText/index.ts b/packages/wallets/src/components/Base/WalletText/index.ts
diff --git a/packages/wallets/src/components/Base/WalletTextField/HelperMessage.tsx b/packages/wallets/src/components/Base/WalletTextField/HelperMessage.tsx
@@ -1,5 +1,5 @@
-import React, { InputHTMLAttributes, memo } from 'react';
-import WalletText, { WalletTextProps } from '../WalletText/WalletText';
+import React, { ComponentProps, InputHTMLAttributes, memo } from 'react';
+import { Text } from '@deriv-com/ui';
 
 export type HelperMessageProps = {
     inputValue?: InputHTMLAttributes<HTMLInputElement>['value'];
@@ -11,7 +11,7 @@ export type HelperMessageProps = {
 
 const HelperMessage: React.FC<HelperMessageProps> = memo(
     ({ inputValue, isError, maxLength, message, messageVariant = 'general' }) => {
-        const HelperMessageColors: Record<string, WalletTextProps['color']> = {
+        const HelperMessageColors: Record<string, ComponentProps<typeof Text>['color']> = {
             error: 'error',
             general: 'less-prominent',
             warning: 'warning',
@@ -21,19 +21,19 @@ const HelperMessage: React.FC<HelperMessageProps> = memo(
             <React.Fragment>
                 {message && (
                     <div className='wallets-textfield__message-container--msg'>
-                        <WalletText
+                        <Text
                             color={isError ? HelperMessageColors.error : HelperMessageColors[messageVariant]}
                             size='xs'
                         >
                             {message}
-                        </WalletText>
+                        </Text>
                     </div>
                 )}
                 {maxLength && (
                     <div className='wallets-textfield__message-container--maxchar'>
-                        <WalletText align='right' color='less-prominent' size='xs'>
+                        <Text align='right' color='less-prominent' size='xs'>
                             {inputValue?.toString().length || 0} / {maxLength}
-                        </WalletText>
+                        </Text>
                     </div>
                 )}
             </React.Fragment>

diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts
@@ -10,5 +10,4 @@ export * from './WalletClipboard';
 export * from './WalletDialog';
 export * from './WalletLink';
 export * from './WalletPasswordFieldLazy';
-export * from './WalletText';
 export * from './WalletTextField';