-
-
Notifications
You must be signed in to change notification settings - Fork 251
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(suite-native): show placeholder when standard wallet is not present
- Loading branch information
Showing
6 changed files
with
160 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 15 additions & 78 deletions
93
suite-native/device-manager/src/components/WalletItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,43 @@ | ||
| import { Pressable } from 'react-native'; | ||
| import { useSelector } from 'react-redux'; | ||
|
|
||
| import { HStack, Radio, Text } from '@suite-native/atoms'; | ||
| import { Translation } from '@suite-native/intl'; | ||
| import { Icon } from '@suite-native/icons'; | ||
| import { TrezorDevice } from '@suite-common/suite-types'; | ||
| import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; | ||
| import { selectDevice, selectDeviceByState } from '@suite-common/wallet-core'; | ||
| import { FiatAmountFormatter } from '@suite-native/formatters'; | ||
| import { selectDeviceTotalFiatBalanceNative } from '@suite-native/device'; | ||
|
|
||
| import { WalletItemBase } from './WalletItemBase'; | ||
|
|
||
| type WalletItemProps = { | ||
| deviceState: NonNullable<TrezorDevice['state']>; | ||
| onPress: () => void; | ||
| deviceState: NonNullable<TrezorDevice['state']>; | ||
| isSelectable?: boolean; | ||
| }; | ||
|
|
||
| type WalletItemStyleProps = { isSelected: boolean; isSelectable: boolean }; | ||
|
|
||
| const walletItemStyle = prepareNativeStyle<WalletItemStyleProps>( | ||
| (utils, { isSelected, isSelectable }) => ({ | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| height: 60, | ||
| gap: utils.spacings.sp12, | ||
| borderRadius: utils.borders.radii.r12, | ||
| borderColor: utils.colors.borderElevation1, | ||
| flex: 1, | ||
| extend: [ | ||
| { | ||
| condition: isSelected, | ||
| style: { | ||
| borderWidth: utils.borders.widths.large, | ||
| borderColor: utils.colors.borderSecondary, | ||
| }, | ||
| }, | ||
| { | ||
| condition: isSelectable, | ||
| style: { | ||
| paddingHorizontal: utils.spacings.sp16, | ||
| backgroundColor: utils.colors.backgroundSurfaceElevation1, | ||
| borderWidth: utils.borders.widths.small, | ||
| }, | ||
| }, | ||
| ], | ||
| }), | ||
| ); | ||
|
|
||
| const labelStyle = prepareNativeStyle(() => ({ | ||
| flex: 1, | ||
| })); | ||
|
|
||
| export const WalletItem = ({ deviceState, onPress, isSelectable = true }: WalletItemProps) => { | ||
| const { applyStyle } = useNativeStyles(); | ||
| export const WalletItem = ({ onPress, deviceState, isSelectable = true }: WalletItemProps) => { | ||
| const device = useSelector((state: any) => selectDeviceByState(state, deviceState)); | ||
| const selectedDevice = useSelector(selectDevice); | ||
| const fiatBalance = useSelector((state: any) => | ||
| selectDeviceTotalFiatBalanceNative(state, deviceState.staticSessionId!), | ||
| device?.state?.staticSessionId | ||
| ? String(selectDeviceTotalFiatBalanceNative(state, device?.state?.staticSessionId)) | ||
| : undefined, | ||
| ); | ||
|
|
||
| if (!device) { | ||
| return null; | ||
| } | ||
|
|
||
| const walletNameLabel = device.useEmptyPassphrase ? ( | ||
| <Translation id="deviceManager.wallet.standard" /> | ||
| ) : ( | ||
| <Translation | ||
| id="deviceManager.wallet.defaultPassphrase" | ||
| values={{ index: device.walletNumber }} | ||
| /> | ||
| ); | ||
|
|
||
| const isSelected = | ||
| selectedDevice?.id === device.id && selectedDevice?.instance === device.instance; | ||
|
|
||
| const showAsSelected = isSelected && isSelectable; | ||
|
|
||
| return ( | ||
| <Pressable onPress={onPress}> | ||
| <HStack | ||
| key={device.instance} | ||
| style={applyStyle(walletItemStyle, { isSelected: showAsSelected, isSelectable })} | ||
| > | ||
| <HStack alignItems="center" flex={1}> | ||
| <Icon | ||
| name={device.useEmptyPassphrase ? 'wallet' : 'password'} | ||
| size="mediumLarge" | ||
| /> | ||
| <Text variant="callout" numberOfLines={1} style={applyStyle(labelStyle)}> | ||
| {walletNameLabel} | ||
| </Text> | ||
| </HStack> | ||
| <HStack alignItems="center" spacing="sp12"> | ||
| <FiatAmountFormatter | ||
| value={String(fiatBalance)} | ||
| variant="hint" | ||
| color="textSubdued" | ||
| /> | ||
| {isSelectable && <Radio value="" onPress={onPress} isChecked={isSelected} />} | ||
| </HStack> | ||
| </HStack> | ||
| </Pressable> | ||
| <WalletItemBase | ||
| variant={device.useEmptyPassphrase ? 'standard' : 'passphrase'} | ||
| onPress={onPress} | ||
| isSelectable={isSelectable} | ||
| isSelected={showAsSelected} | ||
| walletNumber={device.walletNumber} | ||
| fiatBalance={fiatBalance} | ||
| /> | ||
| ); | ||
| }; |
94 changes: 94 additions & 0 deletions
94
suite-native/device-manager/src/components/WalletItemBase.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { Pressable } from 'react-native'; | ||
|
|
||
| import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; | ||
| import { HStack, Radio, Text } from '@suite-native/atoms'; | ||
| import { FiatAmountFormatter } from '@suite-native/formatters'; | ||
| import { Icon } from '@suite-native/icons'; | ||
| import { Translation } from '@suite-native/intl'; | ||
|
|
||
| type WalletItemBaseVariant = 'standard' | 'passphrase'; | ||
|
|
||
| type WalletItemBaseProps = { | ||
| variant: WalletItemBaseVariant; | ||
| onPress: () => void; | ||
| isSelectable: boolean; | ||
| isSelected: boolean; | ||
| walletNumber?: number; | ||
| fiatBalance?: string; | ||
| }; | ||
|
|
||
| type WalletItemBaseStyleProps = { isSelected: boolean; isSelectable: boolean }; | ||
|
|
||
| const walletItemBaseStyle = prepareNativeStyle<WalletItemBaseStyleProps>( | ||
| (utils, { isSelected, isSelectable }) => ({ | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| height: 60, | ||
| gap: utils.spacings.sp12, | ||
| borderRadius: utils.borders.radii.r12, | ||
| borderColor: utils.colors.borderElevation1, | ||
| flex: 1, | ||
| extend: [ | ||
| { | ||
| condition: isSelected, | ||
| style: { | ||
| borderWidth: utils.borders.widths.large, | ||
| borderColor: utils.colors.borderSecondary, | ||
| }, | ||
| }, | ||
| { | ||
| condition: isSelectable, | ||
| style: { | ||
| paddingHorizontal: utils.spacings.sp16, | ||
| backgroundColor: utils.colors.backgroundSurfaceElevation1, | ||
| borderWidth: utils.borders.widths.small, | ||
| }, | ||
| }, | ||
| ], | ||
| }), | ||
| ); | ||
|
|
||
| const labelStyle = prepareNativeStyle(() => ({ | ||
| flex: 1, | ||
| })); | ||
|
|
||
| export const WalletItemBase = ({ | ||
| variant, | ||
| onPress, | ||
| isSelected, | ||
| isSelectable, | ||
| walletNumber, | ||
| fiatBalance, | ||
| }: WalletItemBaseProps) => { | ||
| const { applyStyle } = useNativeStyles(); | ||
| const isStandard = variant === 'standard'; | ||
|
|
||
| const walletNameLabel = isStandard ? ( | ||
| <Translation id="deviceManager.wallet.standard" /> | ||
| ) : ( | ||
| <Translation id="deviceManager.wallet.defaultPassphrase" values={{ index: walletNumber }} /> | ||
| ); | ||
|
|
||
| return ( | ||
| <Pressable onPress={onPress}> | ||
| <HStack style={applyStyle(walletItemBaseStyle, { isSelected, isSelectable })}> | ||
| <HStack alignItems="center" flex={1}> | ||
| <Icon name={isStandard ? 'wallet' : 'password'} size="mediumLarge" /> | ||
| <Text variant="callout" numberOfLines={1} style={applyStyle(labelStyle)}> | ||
| {walletNameLabel} | ||
| </Text> | ||
| </HStack> | ||
| <HStack alignItems="center" spacing="sp12"> | ||
| {fiatBalance && ( | ||
| <FiatAmountFormatter | ||
| value={fiatBalance} | ||
| variant="hint" | ||
| color="textSubdued" | ||
| /> | ||
| )} | ||
| {isSelectable && <Radio value="" onPress={onPress} isChecked={isSelected} />} | ||
| </HStack> | ||
| </HStack> | ||
| </Pressable> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters