11import React from 'react' ;
2- import { View , StyleSheet } from 'react-native' ;
2+ import { ActivityIndicator , StyleSheet , View } from 'react-native' ;
33
44import Text , {
55 TextVariant ,
66 TextColor ,
77} from '../../../../../component-library/components/Texts/Text' ;
8- import Button , {
9- ButtonVariants ,
10- ButtonSize ,
11- ButtonWidthTypes ,
12- } from '../../../../../component-library/components/Buttons/Button' ;
138
149import { strings } from '../../../../../../locales/i18n' ;
1510import { HardwareWalletType } from '@metamask/hw-wallet-sdk' ;
@@ -18,11 +13,15 @@ import {
1813 getConnectionTipsForWalletType ,
1914} from '../../../helpers' ;
2015import { ContentLayout } from './ContentLayout' ;
16+ import { useTheme } from '../../../../../util/theme' ;
2117
2218export const CONNECTING_CONTENT_TEST_ID = 'connecting-content' ;
2319export const CONNECTING_CONTENT_SPINNER_TEST_ID = 'connecting-content-spinner' ;
2420
2521const styles = StyleSheet . create ( {
22+ tipsHeader : {
23+ marginBottom : 8 ,
24+ } ,
2625 tipItem : {
2726 flexDirection : 'row' ,
2827 marginBottom : 8 ,
@@ -34,6 +33,10 @@ const styles = StyleSheet.create({
3433 tipText : {
3534 flex : 1 ,
3635 } ,
36+ spinnerContainer : {
37+ alignItems : 'center' ,
38+ paddingVertical : 16 ,
39+ } ,
3740} ) ;
3841
3942export interface ConnectingContentProps {
@@ -44,6 +47,7 @@ export interface ConnectingContentProps {
4447export const ConnectingContent : React . FC < ConnectingContentProps > = ( {
4548 deviceType,
4649} ) => {
50+ const { colors } = useTheme ( ) ;
4751 const deviceName = getHardwareWalletTypeName ( deviceType ) ;
4852 const connectionTips = getConnectionTipsForWalletType ( deviceType ) ;
4953
@@ -54,46 +58,46 @@ export const ConnectingContent: React.FC<ConnectingContentProps> = ({
5458 device : deviceName ,
5559 } ) }
5660 body = {
57- connectionTips . length > 0 ? (
58- < View >
59- < Text variant = { TextVariant . BodyMD } color = { TextColor . Default } >
60- { strings ( 'hardware_wallet.connecting.tips_header' ) }
61- </ Text >
61+ < View >
62+ { connectionTips . length > 0 && (
63+ < View >
64+ < Text
65+ variant = { TextVariant . BodyMD }
66+ color = { TextColor . Default }
67+ style = { styles . tipsHeader }
68+ >
69+ { strings ( 'hardware_wallet.connecting.tips_header' ) }
70+ </ Text >
6271
63- { connectionTips . map ( ( tipKey ) => (
64- < View key = { tipKey } style = { styles . tipItem } >
65- < Text
66- variant = { TextVariant . BodyMD }
67- color = { TextColor . Default }
68- style = { styles . tipBullet }
69- >
70- •
71- </ Text >
72- < Text
73- variant = { TextVariant . BodyMD }
74- color = { TextColor . Default }
75- style = { styles . tipText }
76- >
77- { strings ( tipKey , { device : deviceName } ) }
78- </ Text >
79- </ View >
80- ) ) }
72+ { connectionTips . map ( ( tipKey ) => (
73+ < View key = { tipKey } style = { styles . tipItem } >
74+ < Text
75+ variant = { TextVariant . BodyMD }
76+ color = { TextColor . Default }
77+ style = { styles . tipBullet }
78+ >
79+ •
80+ </ Text >
81+ < Text
82+ variant = { TextVariant . BodyMD }
83+ color = { TextColor . Default }
84+ style = { styles . tipText }
85+ >
86+ { strings ( tipKey , { device : deviceName } ) }
87+ </ Text >
88+ </ View >
89+ ) ) }
90+ </ View >
91+ ) }
92+
93+ < View style = { styles . spinnerContainer } >
94+ < ActivityIndicator
95+ testID = { CONNECTING_CONTENT_SPINNER_TEST_ID }
96+ size = "large"
97+ color = { colors . primary . default }
98+ />
8199 </ View >
82- ) : undefined
83- }
84- footer = {
85- < Button
86- variant = { ButtonVariants . Primary }
87- size = { ButtonSize . Lg }
88- width = { ButtonWidthTypes . Full }
89- label = ""
90- onPress = {
91- // eslint-disable-next-line no-empty-function
92- ( ) => { }
93- }
94- loading
95- testID = { CONNECTING_CONTENT_SPINNER_TEST_ID }
96- />
100+ </ View >
97101 }
98102 />
99103 ) ;
0 commit comments