Skip to content

Commit 181f594

Browse files
jorbuedojorbuedo
committed
refactor AmountCard
1 parent b4b5013 commit 181f594

File tree

15 files changed

+556
-587
lines changed

15 files changed

+556
-587
lines changed

‎apps/wallet-mobile/.storybook/storybook.requires.js

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/wallet-mobile/src/components/Button/Button.tsx

+75-43
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,35 @@ export type ButtonProps = {
2626
rightIcon?: boolean
2727
style?: ViewStyle
2828
fontOverride?: TextStyle
29+
bgColorsOverride?: Colors
30+
fgColorsOverride?: Colors
2931
} & Omit<PressableProps, 'style' | 'children'>
3032

3133
export const Button = (props: ButtonProps) => {
32-
const {type, size, title, icon: Icon, isLoading, rightIcon, disabled, style, fontOverride, ...rest} = props
33-
34-
const {styles, iconProps, iconPropsPressed} = useStyles({type, size, rightIcon, disabled, fontOverride})
34+
const {
35+
type,
36+
size,
37+
title,
38+
icon: Icon,
39+
isLoading,
40+
rightIcon,
41+
disabled,
42+
style,
43+
fontOverride,
44+
bgColorsOverride,
45+
fgColorsOverride,
46+
...rest
47+
} = props
48+
49+
const {styles, iconProps, iconPropsPressed} = useStyles({
50+
type,
51+
size,
52+
rightIcon,
53+
disabled,
54+
fontOverride,
55+
bgColorsOverride,
56+
fgColorsOverride,
57+
})
3558

3659
return (
3760
<Pressable
@@ -72,48 +95,57 @@ const useStyles = ({
7295
rightIcon,
7396
disabled,
7497
fontOverride,
75-
}: Pick<ButtonProps, 'type' | 'size' | 'rightIcon' | 'disabled' | 'fontOverride'>) => {
98+
bgColorsOverride,
99+
fgColorsOverride,
100+
}: Pick<
101+
ButtonProps,
102+
'type' | 'size' | 'rightIcon' | 'disabled' | 'fontOverride' | 'bgColorsOverride' | 'fgColorsOverride'
103+
>) => {
76104
const {color, atoms} = useTheme()
77105

78-
const backgroundColors: Colors = {
79-
[ButtonType.Primary]: {idle: color.primary_500, pressed: color.primary_600, disabled: color.primary_200},
80-
[ButtonType.Secondary]: {idle: 'transparent', pressed: color.primary_100, disabled: 'transparent'},
81-
[ButtonType.Critical]: {
82-
idle: color.sys_magenta_500,
83-
pressed: color.sys_magenta_600,
84-
disabled: color.sys_magenta_300,
85-
},
86-
[ButtonType.Text]: {idle: 'transparent', pressed: color.gray_100, disabled: 'transparent'},
87-
[ButtonType.SecondaryText]: {idle: 'transparent', pressed: color.gray_100, disabled: 'transparent'},
88-
[ButtonType.Circle]: {idle: color.primary_500, pressed: color.primary_600, disabled: color.primary_200},
89-
[ButtonType.Link]: {idle: 'transparent', pressed: 'transparent', disabled: 'transparent'},
90-
}[type]
91-
92-
const foregroundColors: Colors = {
93-
[ButtonType.Primary]: {idle: color.white_static, pressed: color.white_static, disabled: color.gray_min},
94-
[ButtonType.Secondary]: {
95-
idle: color.text_primary_medium,
96-
pressed: color.text_primary_max,
97-
disabled: color.text_primary_min,
98-
},
99-
[ButtonType.Critical]: {idle: color.gray_min, pressed: color.gray_min, disabled: color.gray_min},
100-
[ButtonType.Text]: {
101-
idle: color.text_primary_medium,
102-
pressed: color.text_primary_max,
103-
disabled: color.text_primary_min,
104-
},
105-
[ButtonType.SecondaryText]: {
106-
idle: color.text_gray_medium,
107-
pressed: color.text_gray_max,
108-
disabled: color.text_gray_min,
109-
},
110-
[ButtonType.Circle]: {idle: color.white_static, pressed: color.white_static, disabled: color.gray_min},
111-
[ButtonType.Link]: {
112-
idle: color.text_primary_medium,
113-
pressed: color.text_primary_max,
114-
disabled: color.text_primary_min,
115-
},
116-
}[type]
106+
const backgroundColors: Colors =
107+
bgColorsOverride ??
108+
{
109+
[ButtonType.Primary]: {idle: color.primary_500, pressed: color.primary_600, disabled: color.primary_200},
110+
[ButtonType.Secondary]: {idle: 'transparent', pressed: color.primary_100, disabled: 'transparent'},
111+
[ButtonType.Critical]: {
112+
idle: color.sys_magenta_500,
113+
pressed: color.sys_magenta_600,
114+
disabled: color.sys_magenta_300,
115+
},
116+
[ButtonType.Text]: {idle: 'transparent', pressed: color.gray_100, disabled: 'transparent'},
117+
[ButtonType.SecondaryText]: {idle: 'transparent', pressed: color.gray_100, disabled: 'transparent'},
118+
[ButtonType.Circle]: {idle: color.primary_500, pressed: color.primary_600, disabled: color.primary_200},
119+
[ButtonType.Link]: {idle: 'transparent', pressed: 'transparent', disabled: 'transparent'},
120+
}[type]
121+
122+
const foregroundColors: Colors =
123+
fgColorsOverride ??
124+
{
125+
[ButtonType.Primary]: {idle: color.white_static, pressed: color.white_static, disabled: color.gray_min},
126+
[ButtonType.Secondary]: {
127+
idle: color.text_primary_medium,
128+
pressed: color.text_primary_max,
129+
disabled: color.text_primary_min,
130+
},
131+
[ButtonType.Critical]: {idle: color.gray_min, pressed: color.gray_min, disabled: color.gray_min},
132+
[ButtonType.Text]: {
133+
idle: color.text_primary_medium,
134+
pressed: color.text_primary_max,
135+
disabled: color.text_primary_min,
136+
},
137+
[ButtonType.SecondaryText]: {
138+
idle: color.text_gray_medium,
139+
pressed: color.text_gray_max,
140+
disabled: color.text_gray_min,
141+
},
142+
[ButtonType.Circle]: {idle: color.white_static, pressed: color.white_static, disabled: color.gray_min},
143+
[ButtonType.Link]: {
144+
idle: color.text_primary_medium,
145+
pressed: color.text_primary_max,
146+
disabled: color.text_primary_min,
147+
},
148+
}[type]
117149

118150
const backgroundColor = disabled ? backgroundColors.disabled : backgroundColors.idle
119151
const foregroundColor = disabled ? foregroundColors.disabled : foregroundColors.idle

‎apps/wallet-mobile/src/features/Exchange/common/AmountCard/AmountCard.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import {Portfolio} from '@yoroi/types'
44
import * as React from 'react'
55
import {Pressable, StyleSheet, Text, TextInput, View} from 'react-native'
66

7-
import {Boundary} from '../../../../components/Boundary/Boundary'
87
import {Spacer} from '../../../../components/Spacer/Spacer'
98
import {isEmptyString} from '../../../../kernel/utils'
10-
import {TokenIconPlaceholder, TokenInfoIcon} from '../../../Portfolio/common/TokenAmountItem/TokenInfoIcon'
9+
import {TokenInfoIcon} from '../../../Portfolio/common/TokenAmountItem/TokenInfoIcon'
1110
import {useStrings} from '../useStrings'
1211

1312
type AmountCardProps = {
@@ -43,8 +42,6 @@ export const AmountCard: React.FC<AmountCardProps> = ({
4342
}
4443
}
4544

46-
const fallback = React.useCallback(() => <TokenIconPlaceholder />, [])
47-
4845
const {styles, colors} = useStyles()
4946

5047
const {isDark} = useTheme()
@@ -83,9 +80,7 @@ export const AmountCard: React.FC<AmountCardProps> = ({
8380

8481
<View style={styles.rightSection}>
8582
<View style={styles.sectionContainer}>
86-
<Boundary loading={{fallback: <TokenIconPlaceholder />}} error={{fallback}}>
87-
<TokenInfoIcon info={amount.info} size="sm" />
88-
</Boundary>
83+
<TokenInfoIcon info={amount.info} size="sm" />
8984

9085
<Spacer width={8} />
9186

‎apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenAmountItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const TokenAmountItem = ({
6969
return (
7070
<View style={[style, styles.container]} testID="assetItem">
7171
<Left>
72-
<TokenInfoIcon info={amount.info} size={variant === 'swap' ? 'sm' : 'md'} />
72+
<TokenInfoIcon info={amount.info} size={variant === 'swap' ? 'md' : 'lg'} />
7373
</Left>
7474

7575
<Middle>

‎apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenInfoIcon.tsx

+32-44
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,34 @@ import {usePortfolioImage} from '../hooks/usePortfolioImage'
1010

1111
type TokenInfoIconProps = {
1212
info: Portfolio.Token.Info | undefined | null
13-
size?: 'sm' | 'md'
13+
size?: 'sm' | 'md' | 'lg'
1414
imageStyle?: ImageStyle
1515
}
16-
export const TokenInfoIcon = ({info, size = 'md', imageStyle}: TokenInfoIconProps) => {
17-
const {styles} = useStyles()
16+
export const TokenInfoIcon = ({info, size = 'lg', imageStyle}: TokenInfoIconProps) => {
17+
const {styles, colors} = useStyles()
1818
const [policy, name] = !info ? '.' : info.id.split('.')
1919
const {uri, headers, onError, onLoad, isError} = usePortfolioImage({policy, name, width: 64, height: 64})
2020

2121
if (!info || isError) {
22-
return <TokenIconPlaceholder size={size} />
22+
return (
23+
<View style={[styles.icon, styles[size], styles.placeholder]}>
24+
<Icon.Coins2 color={colors.icon} size={{sm: 18, md: 20, lg: 24}[size]} />
25+
</View>
26+
)
2327
}
2428

25-
if (isPrimaryToken(info)) return <PrimaryIcon size={size} imageStyle={imageStyle} />
29+
if (isPrimaryToken(info))
30+
return (
31+
<View style={[styles.icon, styles[size], styles.primary, imageStyle]}>
32+
<Icon.Cardano color="white" size={{sm: 20, md: 28, lg: 35}[size]} />
33+
</View>
34+
)
2635

2736
return (
2837
<Image
2938
source={{uri, headers}}
3039
contentFit="cover"
31-
style={[size === 'sm' ? styles.iconSmall : styles.iconMedium, imageStyle]}
40+
style={[styles.icon, styles[size], imageStyle]}
3241
placeholder={blurhash}
3342
cachePolicy="memory-disk"
3443
onError={onError}
@@ -37,59 +46,38 @@ export const TokenInfoIcon = ({info, size = 'md', imageStyle}: TokenInfoIconProp
3746
)
3847
}
3948

40-
const PrimaryIcon = ({size = 'md', imageStyle}: {size?: 'sm' | 'md'; imageStyle?: ImageStyle}) => {
41-
const {styles} = useStyles()
42-
return (
43-
<View style={[size === 'sm' ? styles.iconSmall : styles.iconMedium, styles.primary, imageStyle]}>
44-
<Icon.Cardano color="white" size={size === 'sm' ? 20 : 35} />
45-
</View>
46-
)
47-
}
48-
49-
export const TokenIconPlaceholder = ({size = 'md'}: {size?: 'sm' | 'md'}) => {
50-
const {styles, colors} = useStyles()
51-
return (
52-
<View style={[styles.iconMedium, styles.placeholder, size === 'sm' && styles.placeholderSmall]}>
53-
<Icon.Coins2 color={colors.icon} size={size === 'sm' ? 18 : 24} />
54-
</View>
55-
)
56-
}
57-
5849
const blurhash =
5950
'|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj['
6051

6152
const useStyles = () => {
62-
const {color} = useTheme()
53+
const {atoms, color} = useTheme()
6354
const styles = StyleSheet.create({
55+
placeholder: {
56+
backgroundColor: color.gray_200,
57+
},
6458
primary: {
6559
backgroundColor: color.primary_500,
6660
},
67-
iconMedium: {
61+
icon: {
6862
backgroundColor: 'transparent',
63+
borderRadius: 8,
64+
...atoms.align_center,
65+
...atoms.justify_center,
66+
...atoms.overflow_hidden,
67+
},
68+
lg: {
6969
width: 40,
7070
height: 40,
71-
borderRadius: 8,
72-
alignItems: 'center',
73-
justifyContent: 'center',
74-
overflow: 'hidden',
7571
},
76-
iconSmall: {
77-
backgroundColor: 'transparent',
72+
md: {
73+
width: 32,
74+
height: 32,
75+
},
76+
sm: {
7877
width: 24,
7978
height: 24,
80-
borderRadius: 8,
81-
alignItems: 'center',
82-
justifyContent: 'center',
83-
overflow: 'hidden',
84-
},
85-
placeholder: {
86-
backgroundColor: color.gray_100,
87-
},
88-
placeholderSmall: {
89-
width: 26,
90-
height: 26,
9179
},
92-
})
80+
} as const)
9381

9482
const colors = {
9583
icon: color.gray_600,

‎apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const TokenInfo = ({info}: {info: Portfolio.Token.Info}) => {
7070

7171
return (
7272
<View style={styles.tokenInfoContainer}>
73-
<TokenInfoIcon info={info} size="md" />
73+
<TokenInfoIcon info={info} size="lg" />
7474

7575
<View style={styles.flexFull}>
7676
<Text numberOfLines={1} ellipsizeMode="middle" style={styles.symbol}>

‎apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/TokenBalanceItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const TokenBalanceItem = ({amount}: Props) => {
4343
return (
4444
<TouchableOpacity onPress={() => navigationTo.tokenDetail({id: info.id})} style={styles.root}>
4545
<View style={[styles.rowCenter, styles.tokenInfoContainer]}>
46-
<TokenInfoIcon info={info} size="md" />
46+
<TokenInfoIcon info={info} size="lg" />
4747

4848
<Spacer width={12} />
4949

‎apps/wallet-mobile/src/features/ReviewTx/common/WalletBalance.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const TokenList = ({assetList}: {assetList: PortfolioTokenBalances['fts'] | Port
110110
ItemSeparatorComponent={() => <Space width="sm" />}
111111
showsHorizontalScrollIndicator={false}
112112
keyExtractor={(item) => item.info.id}
113-
renderItem={({item}) => <TokenInfoIcon info={item.info} size="md" />}
113+
renderItem={({item}) => <TokenInfoIcon info={item.info} size="lg" />}
114114
/>
115115
)
116116
}

‎apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.stories.tsx

-41
This file was deleted.

0 commit comments

Comments
 (0)