Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 89e574b

Browse files
Merge pull request #3990 from EdgeApp/jon/fix/coinrank-ui
CoinRanking (Markets) UI fixes/updates: -Add CoinRanking scenes back to Main.tsx -Fix CoinRankScene styling -Add USD to CoinRankingDetailsScene
2 parents 30b1540 + a32723f commit 89e574b

File tree

4 files changed

+43
-24
lines changed

4 files changed

+43
-24
lines changed

‎src/components/Main.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import { ChangeMiningFeeScene } from './scenes/ChangeMiningFeeScene'
3333
import { ChangeMiningFeeScene2 } from './scenes/ChangeMiningFeeScene2'
3434
import { ChangePasswordScene } from './scenes/ChangePasswordScene'
3535
import { ChangePinScene } from './scenes/ChangePinScene'
36+
import { CoinRankingDetailsScene } from './scenes/CoinRankingDetailsScene'
37+
import { CoinRankingScene } from './scenes/CoinRankingScene'
3638
import { CreateWalletAccountSelectScene } from './scenes/CreateWalletAccountSelectScene'
3739
import { CreateWalletAccountSetupScene } from './scenes/CreateWalletAccountSetupScene'
3840
import { CreateWalletCompletionScene } from './scenes/CreateWalletCompletionScene'
@@ -641,6 +643,13 @@ const EdgeAppStack = () => {
641643
}}
642644
/>
643645
<Stack.Screen name="loanStatus" component={ifLoggedIn(LoanStatusScene)} />
646+
<Stack.Screen
647+
name="coinRankingDetails"
648+
component={ifLoggedIn(CoinRankingDetailsScene)}
649+
options={{
650+
headerTitle: () => <EdgeLogoHeader />
651+
}}
652+
/>
644653
</Stack.Navigator>
645654
)
646655
}
@@ -688,6 +697,13 @@ const EdgeTabs = () => {
688697
focus: () => dispatch(checkEnabledExchanges())
689698
}}
690699
/>
700+
<Tab.Screen
701+
name="coinRanking"
702+
component={ifLoggedIn(CoinRankingScene)}
703+
listeners={{
704+
focus: () => dispatch(checkEnabledExchanges())
705+
}}
706+
/>
691707
<Tab.Screen name="extraTab" component={ifLoggedIn(ExtraTabScene)} />
692708
</Tab.Navigator>
693709
)

‎src/components/data/row/CoinRankRow.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -137,23 +137,21 @@ const CoinRankRowComponent = (props: Props) => {
137137
return (
138138
<TouchableOpacity style={styles.container} onPress={handlePress}>
139139
<View style={styles.rank}>
140-
<EdgeText>{rank}</EdgeText>
140+
<EdgeText numberOfLines={1} disableFontScaling>
141+
{rank}
142+
</EdgeText>
141143
</View>
142144
<View style={styles.iconRowDataContainer}>
143145
<FastImage style={styles.icon} source={imageUrlObject} />
144146
<View style={styles.leftColumn}>
145-
<View style={styles.row}>
146-
<EdgeText style={styles.currencyCode}>{currencyCode.toUpperCase()}</EdgeText>
147-
<EdgeText style={priceStyle}>{percentString}</EdgeText>
148-
</View>
147+
<EdgeText style={styles.currencyCode}>{currencyCode.toUpperCase()}</EdgeText>
149148
<EdgeText style={styles.assetSubText}>{assetSubTextString}</EdgeText>
150149
</View>
150+
<View style={styles.middleColumn}>
151+
<EdgeText style={priceStyle}>{percentString}</EdgeText>
152+
</View>
151153
<View style={styles.rightColumn}>
152154
<EdgeText style={priceStyle}>{priceString}</EdgeText>
153-
<View style={styles.row}>
154-
{/* This is needed to add proper amount of vertical spacing */}
155-
<EdgeText style={styles.invisibleText}>INVIS_TEXT</EdgeText>
156-
</View>
157155
</View>
158156
</View>
159157
</TouchableOpacity>
@@ -167,21 +165,22 @@ const getStyles = cacheStyles((theme: Theme) => ({
167165
flexDirection: 'row'
168166
},
169167
iconRowDataContainer: {
170-
paddingLeft: theme.rem(0),
171-
paddingRight: theme.rem(0),
168+
padding: theme.rem(0.75),
169+
paddingLeft: theme.rem(0.25),
172170
flex: 1,
173171
alignItems: 'center',
174172
flexDirection: 'row',
175173
justifyContent: 'center',
176-
margin: theme.rem(0.75)
174+
margin: theme.rem(0)
177175
},
178176
currencyCode: {
179177
width: theme.rem(5)
180178
},
181179
rank: {
180+
alignItems: 'flex-start',
182181
justifyContent: 'center',
183-
width: theme.rem(2),
184-
paddingLeft: theme.rem(1)
182+
marginLeft: theme.rem(1),
183+
width: theme.rem(2.5)
185184
},
186185
icon: {
187186
width: theme.rem(1.5),
@@ -200,14 +199,21 @@ const getStyles = cacheStyles((theme: Theme) => ({
200199
},
201200
rightColumn: {
202201
alignItems: 'flex-end',
202+
justifyContent: 'center',
203+
flexDirection: 'row'
204+
},
205+
middleColumn: {
206+
flexGrow: 1,
207+
flexShrink: 1,
208+
alignItems: 'flex-start',
209+
justifyContent: 'center',
203210
flexDirection: 'column'
204211
},
205212
leftColumn: {
206213
flexDirection: 'column',
207-
flexGrow: 1,
208214
flexShrink: 1,
209-
marginRight: theme.rem(0.25),
210-
marginLeft: theme.rem(1)
215+
marginLeft: theme.rem(1),
216+
width: theme.rem(4.5)
211217
},
212218
row: {
213219
flexDirection: 'row',
@@ -217,10 +223,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
217223
assetSubText: {
218224
fontSize: theme.rem(0.75),
219225
color: theme.secondaryText
220-
},
221-
invisibleText: {
222-
fontSize: theme.rem(0.75),
223-
color: '#0000'
224226
}
225227
}))
226228

‎src/components/scenes/CoinRankingDetailsScene.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react'
22
import { ScrollView, View } from 'react-native'
33
import FastImage from 'react-native-fast-image'
44

5+
import { USD_FIAT } from '../../constants/WalletAndCurrencyConstants'
56
import { formatFiatString } from '../../hooks/useFiatText'
67
import { toLocaleDate, toPercentString } from '../../locales/intl'
78
import s from '../../locales/strings'
@@ -104,7 +105,7 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
104105
return data == null ? 'N/A' : toPercentString(Number(data) / 100)
105106
case 'price':
106107
case 'priceChange24h':
107-
return formatFiatString({ fiatAmount: baseString })
108+
return `${formatFiatString({ fiatAmount: baseString })}${USD_FIAT.replace('iso:','')}`
108109
case 'rank':
109110
return `#${baseString}`
110111
case 'marketCapChange24h':

‎src/components/scenes/CoinRankingScene.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,15 +269,15 @@ const getStyles = cacheStyles((theme: Theme) => {
269269
rankView: {
270270
...baseTextView,
271271
justifyContent: 'center',
272-
width: theme.rem(4.25)
272+
width: theme.rem(5.25)
273273
},
274274
rankText: {
275275
...baseTextStyle
276276
},
277277
assetView: {
278278
...baseTextView,
279279
justifyContent: 'center',
280-
width: theme.rem(5)
280+
width: theme.rem(4.75)
281281
},
282282
assetText: {
283283
...baseTextStyle,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /