Skip to content

CoinRanking (Markets) UI fixes/updates #3990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 14, 2023
Merged

CoinRanking (Markets) UI fixes/updates #3990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a27a7b
Add CoinRanking scenes back to Main.tsx
Jon-edge Feb 11, 2023
8f8fd3f
Fix CoinRankScene styling
Jon-edge Feb 11, 2023
a32723f
Add USD to CoinRankingDetailsScene
Jon-edge Feb 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions src/components/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import { ChangeMiningFeeScene } from './scenes/ChangeMiningFeeScene'
import { ChangeMiningFeeScene2 } from './scenes/ChangeMiningFeeScene2'
import { ChangePasswordScene } from './scenes/ChangePasswordScene'
import { ChangePinScene } from './scenes/ChangePinScene'
import { CoinRankingDetailsScene } from './scenes/CoinRankingDetailsScene'
import { CoinRankingScene } from './scenes/CoinRankingScene'
import { CreateWalletAccountSelectScene } from './scenes/CreateWalletAccountSelectScene'
import { CreateWalletAccountSetupScene } from './scenes/CreateWalletAccountSetupScene'
import { CreateWalletCompletionScene } from './scenes/CreateWalletCompletionScene'
Expand Down Expand Up @@ -641,6 +643,13 @@ const EdgeAppStack = () => {
}}
/>
<Stack.Screen name="loanStatus" component={ifLoggedIn(LoanStatusScene)} />
<Stack.Screen
name="coinRankingDetails"
component={ifLoggedIn(CoinRankingDetailsScene)}
options={{
headerTitle: () => <EdgeLogoHeader />
}}
/>
</Stack.Navigator>
)
}
Expand Down Expand Up @@ -688,6 +697,13 @@ const EdgeTabs = () => {
focus: () => dispatch(checkEnabledExchanges())
}}
/>
<Tab.Screen
name="coinRanking"
component={ifLoggedIn(CoinRankingScene)}
listeners={{
focus: () => dispatch(checkEnabledExchanges())
}}
/>
<Tab.Screen name="extraTab" component={ifLoggedIn(ExtraTabScene)} />
</Tab.Navigator>
)
Expand Down
44 changes: 23 additions & 21 deletions src/components/data/row/CoinRankRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,23 +137,21 @@ const CoinRankRowComponent = (props: Props) => {
return (
<TouchableOpacity style={styles.container} onPress={handlePress}>
<View style={styles.rank}>
<EdgeText>{rank}</EdgeText>
<EdgeText numberOfLines={1} disableFontScaling>
{rank}
</EdgeText>
</View>
<View style={styles.iconRowDataContainer}>
<FastImage style={styles.icon} source={imageUrlObject} />
<View style={styles.leftColumn}>
<View style={styles.row}>
<EdgeText style={styles.currencyCode}>{currencyCode.toUpperCase()}</EdgeText>
<EdgeText style={priceStyle}>{percentString}</EdgeText>
</View>
<EdgeText style={styles.currencyCode}>{currencyCode.toUpperCase()}</EdgeText>
<EdgeText style={styles.assetSubText}>{assetSubTextString}</EdgeText>
</View>
<View style={styles.middleColumn}>
<EdgeText style={priceStyle}>{percentString}</EdgeText>
</View>
<View style={styles.rightColumn}>
<EdgeText style={priceStyle}>{priceString}</EdgeText>
<View style={styles.row}>
{/* This is needed to add proper amount of vertical spacing */}
<EdgeText style={styles.invisibleText}>INVIS_TEXT</EdgeText>
</View>
</View>
</View>
</TouchableOpacity>
Expand All @@ -167,21 +165,22 @@ const getStyles = cacheStyles((theme: Theme) => ({
flexDirection: 'row'
},
iconRowDataContainer: {
paddingLeft: theme.rem(0),
paddingRight: theme.rem(0),
padding: theme.rem(0.75),
paddingLeft: theme.rem(0.25),
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
margin: theme.rem(0.75)
margin: theme.rem(0)
},
currencyCode: {
width: theme.rem(5)
},
rank: {
alignItems: 'flex-start',
justifyContent: 'center',
width: theme.rem(2),
paddingLeft: theme.rem(1)
marginLeft: theme.rem(1),
width: theme.rem(2.5)
},
icon: {
width: theme.rem(1.5),
Expand All @@ -200,14 +199,21 @@ const getStyles = cacheStyles((theme: Theme) => ({
},
rightColumn: {
alignItems: 'flex-end',
justifyContent: 'center',
flexDirection: 'row'
},
middleColumn: {
flexGrow: 1,
flexShrink: 1,
alignItems: 'flex-start',
justifyContent: 'center',
flexDirection: 'column'
},
leftColumn: {
flexDirection: 'column',
flexGrow: 1,
flexShrink: 1,
marginRight: theme.rem(0.25),
marginLeft: theme.rem(1)
marginLeft: theme.rem(1),
width: theme.rem(4.5)
},
row: {
flexDirection: 'row',
Expand All @@ -217,10 +223,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
assetSubText: {
fontSize: theme.rem(0.75),
color: theme.secondaryText
},
invisibleText: {
fontSize: theme.rem(0.75),
color: '#0000'
}
}))

Expand Down
3 changes: 2 additions & 1 deletion src/components/scenes/CoinRankingDetailsScene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react'
import { ScrollView, View } from 'react-native'
import FastImage from 'react-native-fast-image'

import { USD_FIAT } from '../../constants/WalletAndCurrencyConstants'
import { formatFiatString } from '../../hooks/useFiatText'
import { toLocaleDate, toPercentString } from '../../locales/intl'
import s from '../../locales/strings'
Expand Down Expand Up @@ -104,7 +105,7 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
return data == null ? 'N/A' : toPercentString(Number(data) / 100)
case 'price':
case 'priceChange24h':
return formatFiatString({ fiatAmount: baseString })
return `${formatFiatString({ fiatAmount: baseString })} ${USD_FIAT.replace('iso:', '')}`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe there's a good reason but I couldn't figure out why this feature is hardcoded to USD. I added a small fixup commit that uses the user's default fiat instead of USD for both components. If you use it the commit message should be changed before merging.

If there is a good reason to keep USD only feel free to drop the fixup and merge since it would be approved anyway.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoiding scope creep since this PR is meant to be a fix for the rank and USD display. Also the proposed change would break the feature for fiat types not supported by the API.

Tracked this new idea in task: https://app.asana.com/0/1200382638405084/1203963276097127/f

case 'rank':
return `#${baseString}`
case 'marketCapChange24h':
Expand Down
4 changes: 2 additions & 2 deletions src/components/scenes/CoinRankingScene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,15 +269,15 @@ const getStyles = cacheStyles((theme: Theme) => {
rankView: {
...baseTextView,
justifyContent: 'center',
width: theme.rem(4.25)
width: theme.rem(5.25)
},
rankText: {
...baseTextStyle
},
assetView: {
...baseTextView,
justifyContent: 'center',
width: theme.rem(5)
width: theme.rem(4.75)
},
assetText: {
...baseTextStyle,
Expand Down