Skip to content

Commit 9e93fde

Browse files
Jon-edgeJon-edge
committed
Fix RampBankRoutingDetailsScene UI & UX
Fix spacing throughout, remove styled(), reuse existing components, add copy functionality.
1 parent 3c61567 commit 9e93fde

File tree

4 files changed

+134
-137
lines changed

4 files changed

+134
-137
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
## 4.42.0 (staging)
66

77
- added: Zcash buy/sell support with Banxa
8+
- changed: ramps: Infinite buy support according to new API
89
- changed: Optimize login performance.
10+
- fixed: ramps: Various Infinite UI/UX issues
911

1012
## 4.41.0 (2025-12-21)
1113

‎src/components/icons/ThemedIcons.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Feather from 'react-native-vector-icons/Feather'
99
import FontAwesome from 'react-native-vector-icons/FontAwesome'
1010
import type { Icon } from 'react-native-vector-icons/Icon'
1111
import Ionicons from 'react-native-vector-icons/Ionicons'
12+
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
1213

1314
import { Fontello } from '../../assets/vector'
1415
import { useTheme } from '../services/ThemeContext'
@@ -168,3 +169,7 @@ export const CopyIcon = makeFontIcon(FontAwesome, 'copy')
168169
export const CheckIcon = makeFontIcon(AntDesignIcon, 'check')
169170

170171
export const ArrowRightIcon = makeFontIcon(AntDesignIcon, 'arrowright')
172+
173+
export const EditIcon = makeFontIcon(FontAwesome, 'edit')
174+
export const DeleteIcon = makeFontIcon(FontAwesome, 'times')
175+
export const QuestionIcon = makeFontIcon(SimpleLineIcons, 'question')

‎src/components/rows/EdgeRow.tsx‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,19 @@ import {
66
View,
77
type ViewStyle
88
} from 'react-native'
9-
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
10-
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
119

1210
import { useHandler } from '../../hooks/useHandler'
1311
import { lstrings } from '../../locales/strings'
1412
import { triggerHaptic } from '../../util/haptic'
1513
import { fixSides, mapSides, sidesToMargin } from '../../util/sides'
1614
import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
17-
import { ChevronRightIcon } from '../icons/ThemedIcons'
15+
import {
16+
ChevronRightIcon,
17+
CopyIcon,
18+
DeleteIcon,
19+
EditIcon,
20+
QuestionIcon
21+
} from '../icons/ThemedIcons'
1822
import { showToast } from '../services/AirshipInstance'
1923
import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
2024
import { EdgeText } from '../themed/EdgeText'
@@ -160,32 +164,16 @@ export const EdgeRow = (props: Props) => {
160164
/>
161165
) : null}
162166
{rightButtonType === 'editable' ? (
163-
<FontAwesomeIcon
164-
name="edit"
165-
style={styles.tappableIcon}
166-
size={theme.rem(1)}
167-
/>
167+
<EditIcon style={styles.tappableIcon} size={theme.rem(1)} />
168168
) : null}
169169
{rightButtonType === 'copy' ? (
170-
<FontAwesomeIcon
171-
name="copy"
172-
style={styles.tappableIcon}
173-
size={theme.rem(1)}
174-
/>
170+
<CopyIcon style={styles.tappableIcon} size={theme.rem(1)} />
175171
) : null}
176172
{rightButtonType === 'delete' ? (
177-
<FontAwesomeIcon
178-
name="times"
179-
style={styles.tappableIcon}
180-
size={theme.rem(1)}
181-
/>
173+
<DeleteIcon style={styles.tappableIcon} size={theme.rem(1)} />
182174
) : null}
183175
{rightButtonType === 'questionable' ? (
184-
<SimpleLineIcons
185-
name="question"
186-
style={styles.tappableIcon}
187-
size={theme.rem(1)}
188-
/>
176+
<QuestionIcon style={styles.tappableIcon} size={theme.rem(1)} />
189177
) : null}
190178
</EdgeTouchableOpacity>
191179
) : null

‎src/components/scenes/RampBankRoutingDetailsScene.tsx‎

Lines changed: 116 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1+
import Clipboard from '@react-native-clipboard/clipboard'
12
import * as React from 'react'
23
import { View } from 'react-native'
34
import IonIcon from 'react-native-vector-icons/Ionicons'
45

6+
import { useHandler } from '../../hooks/useHandler'
57
import { lstrings } from '../../locales/strings'
68
import type { EdgeAppSceneProps } from '../../types/routerTypes'
79
import { SceneButtons } from '../buttons/SceneButtons'
810
import { EdgeCard } from '../cards/EdgeCard'
11+
import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
912
import { SceneWrapper } from '../common/SceneWrapper'
10-
import { styled } from '../hoc/styled'
13+
import { SectionHeader } from '../common/SectionHeader'
14+
import { CopyIcon } from '../icons/ThemedIcons'
1115
import { SceneContainer } from '../layout/SceneContainer'
12-
import { useTheme } from '../services/ThemeContext'
16+
import { EdgeRow } from '../rows/EdgeRow'
17+
import { showToast } from '../services/AirshipInstance'
18+
import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
1319
import { EdgeText, Paragraph } from '../themed/EdgeText'
1420

1521
export interface BankInfo {
@@ -31,61 +37,73 @@ export const RampBankRoutingDetailsScene: React.FC<Props> = props => {
3137
const { route } = props
3238
const { bank, fiatCurrencyCode, fiatAmount, onDone } = route.params
3339

34-
const amountToSendText = `${fiatAmount} ${fiatCurrencyCode}`
35-
3640
const theme = useTheme()
41+
const styles = getStyles(theme)
3742

38-
const renderInfoRow = (label: string, value: string): React.ReactElement => (
39-
<InfoRowContainer>
40-
<InfoLabel>{label}</InfoLabel>
41-
<InfoValue selectable>{value}</InfoValue>
42-
</InfoRowContainer>
43-
)
43+
const amountToSendText = `${fiatAmount} ${fiatCurrencyCode}`
44+
45+
const handleCopyAmount = useHandler(() => {
46+
Clipboard.setString(amountToSendText)
47+
showToast(lstrings.fragment_copied)
48+
})
4449

4550
return (
4651
<SceneWrapper scroll hasTabs>
4752
<SceneContainer headerTitle={lstrings.ramp_bank_routing_title}>
48-
<ContentContainer>
49-
<InstructionContainer>
50-
<StyledIcon
51-
name="information-circle-outline"
52-
size={theme.rem(2.5)}
53-
color={theme.primaryText}
54-
/>
55-
<Paragraph style={{ flexShrink: 1 }}>
56-
{lstrings.ramp_bank_routing_instructions}
57-
</Paragraph>
58-
</InstructionContainer>
59-
60-
<EdgeCard>
61-
<CardContent>
62-
<AmountLabel>{lstrings.ramp_send_amount_label}</AmountLabel>
63-
<AmountValue>{amountToSendText}</AmountValue>
64-
</CardContent>
65-
</EdgeCard>
66-
67-
<EdgeCard>
68-
<CardContent>
69-
<SectionTitle>
70-
{lstrings.ramp_bank_details_section_title}
71-
</SectionTitle>
72-
73-
{renderInfoRow(lstrings.ramp_bank_name_label, bank.name)}
74-
{renderInfoRow(
75-
lstrings.ramp_account_number_label,
76-
bank.accountNumber
77-
)}
78-
{renderInfoRow(
79-
lstrings.ramp_routing_number_label,
80-
bank.routingNumber
81-
)}
82-
</CardContent>
83-
</EdgeCard>
84-
85-
<WarningTextContainer>
86-
<WarningText>{lstrings.ramp_bank_routing_warning}</WarningText>
87-
</WarningTextContainer>
88-
</ContentContainer>
53+
{/* TODO: This is a strange one-off UI. Consider a warning card here instead? */}
54+
<View style={styles.instructionContainer}>
55+
<IonIcon
56+
name="information-circle-outline"
57+
size={theme.rem(2.5)}
58+
color={theme.primaryText}
59+
/>
60+
<Paragraph style={styles.instructionText}>
61+
{lstrings.ramp_bank_routing_instructions}
62+
</Paragraph>
63+
</View>
64+
65+
<EdgeCard>
66+
<View style={styles.cardContent}>
67+
<View style={styles.amountRow}>
68+
<View style={styles.amountTextContainer}>
69+
<EdgeText style={styles.amountLabel}>
70+
{lstrings.ramp_send_amount_label}
71+
</EdgeText>
72+
<EdgeText style={styles.amountValue}>
73+
{amountToSendText}
74+
</EdgeText>
75+
</View>
76+
<EdgeTouchableOpacity onPress={handleCopyAmount}>
77+
<CopyIcon style={styles.copyIcon} size={theme.rem(1)} />
78+
</EdgeTouchableOpacity>
79+
</View>
80+
</View>
81+
</EdgeCard>
82+
83+
<SectionHeader leftTitle={lstrings.ramp_bank_details_section_title} />
84+
<EdgeCard sections>
85+
<EdgeRow
86+
title={lstrings.ramp_bank_name_label}
87+
body={bank.name}
88+
rightButtonType="copy"
89+
/>
90+
<EdgeRow
91+
title={lstrings.ramp_account_number_label}
92+
body={bank.accountNumber}
93+
rightButtonType="copy"
94+
/>
95+
<EdgeRow
96+
title={lstrings.ramp_routing_number_label}
97+
body={bank.routingNumber}
98+
rightButtonType="copy"
99+
/>
100+
</EdgeCard>
101+
102+
<View style={styles.warningTextContainer}>
103+
<EdgeText style={styles.warningText}>
104+
{lstrings.ramp_bank_routing_warning}
105+
</EdgeText>
106+
</View>
89107

90108
<SceneButtons
91109
primary={{
@@ -98,67 +116,51 @@ export const RampBankRoutingDetailsScene: React.FC<Props> = props => {
98116
)
99117
}
100118

101-
// Styled components
102-
const ContentContainer = styled(View)(theme => ({
103-
flex: 1,
104-
paddingHorizontal: theme.rem(0.5)
105-
}))
106-
107-
const InstructionContainer = styled(View)(theme => ({
108-
alignItems: 'center',
109-
flexDirection: 'row',
110-
paddingVertical: theme.rem(0.5),
111-
paddingHorizontal: theme.rem(0.5)
112-
}))
113-
114-
const StyledIcon = styled(IonIcon)(theme => ({
115-
marginBottom: theme.rem(0.5)
116-
}))
117-
118-
const CardContent = styled(View)(theme => ({
119-
padding: theme.rem(1)
120-
}))
121-
122-
const AmountLabel = styled(EdgeText)(theme => ({
123-
fontSize: theme.rem(0.75),
124-
color: theme.secondaryText,
125-
marginBottom: theme.rem(0.25)
126-
}))
127-
128-
const AmountValue = styled(EdgeText)(theme => ({
129-
fontSize: theme.rem(1.5),
130-
fontFamily: theme.fontFaceBold,
131-
color: theme.primaryText
132-
}))
133-
134-
const SectionTitle = styled(EdgeText)(theme => ({
135-
fontSize: theme.rem(1),
136-
fontFamily: theme.fontFaceMedium,
137-
marginBottom: theme.rem(1)
138-
}))
139-
140-
const InfoRowContainer = styled(View)(theme => ({
141-
marginBottom: theme.rem(0.75)
142-
}))
143-
144-
const InfoLabel = styled(EdgeText)(theme => ({
145-
fontSize: theme.rem(0.75),
146-
color: theme.secondaryText,
147-
marginBottom: theme.rem(0.25)
148-
}))
149-
150-
const InfoValue = styled(EdgeText)(theme => ({
151-
fontSize: theme.rem(1),
152-
fontFamily: theme.fontFaceMedium,
153-
color: theme.primaryText
154-
}))
155-
156-
const WarningTextContainer = styled(View)(theme => ({
157-
paddingHorizontal: theme.rem(1)
158-
}))
159-
160-
const WarningText = styled(EdgeText)(theme => ({
161-
fontSize: theme.rem(0.75),
162-
fontStyle: 'italic',
163-
textAlign: 'center'
119+
const getStyles = cacheStyles((theme: Theme) => ({
120+
instructionContainer: {
121+
alignItems: 'center',
122+
flexDirection: 'row',
123+
paddingVertical: theme.rem(0.5),
124+
paddingHorizontal: theme.rem(0.5)
125+
},
126+
copyIcon: {
127+
color: theme.iconTappable
128+
},
129+
instructionText: {
130+
flexShrink: 1
131+
},
132+
cardContent: {
133+
padding: theme.rem(0.5)
134+
},
135+
amountLabel: {
136+
fontSize: theme.rem(0.75),
137+
color: theme.secondaryText,
138+
marginBottom: theme.rem(0.25)
139+
},
140+
amountValue: {
141+
fontSize: theme.rem(1.5),
142+
fontFamily: theme.fontFaceBold,
143+
color: theme.primaryText
144+
},
145+
amountRow: {
146+
flexDirection: 'row',
147+
alignItems: 'center',
148+
justifyContent: 'space-between'
149+
},
150+
amountTextContainer: {
151+
flex: 1
152+
},
153+
sectionTitle: {
154+
fontSize: theme.rem(1),
155+
fontFamily: theme.fontFaceMedium,
156+
marginBottom: theme.rem(1)
157+
},
158+
warningTextContainer: {
159+
paddingHorizontal: theme.rem(1)
160+
},
161+
warningText: {
162+
fontSize: theme.rem(0.75),
163+
fontStyle: 'italic',
164+
textAlign: 'center'
165+
}
164166
}))

0 commit comments

Comments
 (0)