[Wallet] Gold screen redesign #3764

i1skn · 2020-05-07T17:39:07Z

Description

This PR implements Celo Gold redesigned screens with some exceptions:

Fees brake-down is not implemented (first we need to change how we fetch fees form blockchain-api and de-hardcode other fees in Wallet codebase).
Sticky header with the Balance (currently it says just "Gold")

Other changes

Change Button logic with BtnSize.FULL a bit, so it's not needed to add manually styles every time we want a full width button.
Change Button logic, so it accepts string | Element (needed when we use inside the button text)
Small fixes after the upgrade of react navigation to v5

Tested

Android

Related issues

Fixes New Wallet Design: Gold #3659

Backwards compatibility

Yes

Screenshots

codecov · 2020-05-14T13:19:44Z

Codecov Report

❗ No coverage uploaded for pull request base (master@cb4f663). Click here to learn what that means.
The diff coverage is n/a.

i1skn · 2020-05-18T13:57:41Z

packages/react-components/components/Button.v2.tsx

@@ -27,7 +27,7 @@ export enum BtnSizes {
 export interface ButtonProps {
  onPress: () => void
  style?: StyleProp<ViewStyle>
-  text: string
+  text: string | JSX.Element


This is needed, when we show inside the button text.

It's preferable to use React.ReactNode
https://stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement

i1skn · 2020-05-18T13:59:10Z

packages/react-components/styles/fonts.v2.tsx

@@ -67,6 +67,12 @@ const fontStyles = StyleSheet.create({
  center: {
    textAlign: 'center',
  },
+  mediumNumber: {


This is not in the Design Kit, but we use it more than twice on Gold Screen - I figure we could use it the future. Cc @coreycelo

packages/mobile/src/exchange/CeloGoldHistoryChart.tsx

jeanregisser

This looks awesome!! 👍 🎉
I've suggested a couple of small changes.

jeanregisser · 2020-05-20T09:11:27Z

packages/mobile/src/exchange/ExchangeConfirmationCard.tsx

+    <SafeAreaView style={styles.container}>
+      <View style={styles.paddedContainer}>
+        <ScrollView>


For fullscreen views, it's nicer to put <SafeAreaView> inside the <ScrollView> so when scrolling up and down the content is not clipped before the bottom/top of the screen.

Would content overlap with the bar in the bottom on iPhone X in this case?

Yes but that's what is preferred visually, the difference is that there's some padding at the bottom so you can still fully view all the content from the scrollview without overlap.

jeanregisser · 2020-05-20T09:15:29Z

packages/mobile/src/navigator/Headers.v2.tsx

+    alignItems: 'center' as 'center',
  },
-  headerTitleAlign: 'center',
+  headerTitleAlign: 'center' as 'center',


packages/mobile/src/navigator/Navigator.tsx

jeanregisser · 2020-05-20T09:23:20Z

packages/react-components/components/Button.v2.tsx

@@ -27,7 +27,7 @@ export enum BtnSizes {
 export interface ButtonProps {
  onPress: () => void
  style?: StyleProp<ViewStyle>
-  text: string
+  text: string | JSX.Element


It's preferable to use React.ReactNode
https://stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement

jeanregisser · 2020-05-20T09:27:30Z

packages/react-components/components/Button.v2.tsx

+function getStyleForWrapper(
+  size: BtnSizes | undefined,
+  style: StyleProp<ViewStyle>
+): StyleProp<ViewStyle> {
+  return [{ flexDirection: size === BtnSizes.FULL ? 'column' : 'row' }, style]
+}


This doesn't need to be addressed in the PR but I think the current BtnSize API is limiting.
In another PR I needed a button having both FULL (full width) and SMALL (40pt height) behaviors.
I don't have a proposition right now but wanted to raise this.

Yeah, I was thinking about this as well to split this into two verticals: font size and horizontal filling. And started to think that this is needed, when I saw your workaround on this, when you were needed full width with small font size.

jeanregisser · 2020-05-20T09:30:45Z

packages/react-components/components/SectionHead.v2.tsx

+import colors from '@celo/react-components/styles/colors.v2'
+import fontStyles from '@celo/react-components/styles/fonts.v2'
+import * as React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+interface Props {
+  text: string
+}
+
+function SectionHead({ text }: Props) {
+  return (
+    <View style={style.container}>
+      <Text style={style.text}>{text}</Text>
+    </View>
+  )
+}
+
+const style = StyleSheet.create({
+  container: {
+    paddingTop: 20,
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+  },
+  text: {
+    ...fontStyles.h2,
+    color: colors.dark,
+  },
+})
+
+export default SectionHead


I've updated SectionHeadNew in a previous master that's already been merged:
https://github.com/celo-org/celo-monorepo/blob/ee5242cb59ef61a35718d76c8dc2447d0c71c7a0/packages/react-components/components/SectionHeadNew.tsx
We can use that one now.

On the Gold tab they have a different styling, so I will rename to SectionHeadGold.tsx for now.

Oh ok, all good then 👍

jeanregisser · 2020-05-20T09:47:37Z

packages/mobile/src/transactions/GoldTransactionFeedItem.tsx

+  // TODO: find a way on how to show local exchangeRate without this hack
+  const exchangeRateAmount = {
+    value: localAmount.exchangeRate,
+    currencyCode: CURRENCIES[CURRENCY_ENUM.DOLLAR].code,
+    localAmount: {
+      value: localAmount.exchangeRate,
+      exchangeRate: localAmount.exchangeRate,
+      currencyCode: localAmount.currencyCode,
+    },
+  }
+
+  return (
+    <Touchable onPress={onPress}>
+      <View style={styles.container}>
+        <View style={styles.firstRow}>
+          <View style={styles.desc}>
+            <Text style={styles.txMode}>
+              {isSellGoldTx ? t('feedItemGoldSold') : t('feedItemGoldPurchased')}
+            </Text>
+            <>
+              <Text style={styles.exchangeRate}> @ </Text>
+              <CurrencyDisplay
+                amount={exchangeRateAmount}
+                hideSymbol={false}
+                hideCode={true}
+                showLocalAmount={true}
+                style={styles.exchangeRate}
+              />
+            </>


If you're only interested in displaying a specific value and not doing conversions, it looks like you can simplify to this:

const localAmount = (isSellGoldTx ? makerAmount : takerAmount).localAmount! const exchangeRateAmount = { value: localAmount.exchangeRate, currencyCode: localAmount.currencyCode, localAmount: null } // Then <CurrencyDisplay amount={exchangeRateAmount} hideSymbol={false} hideCode={true} showLocalAmount={false} style={styles.exchangeRate} />

Unfortunately this would not work with currency symbols. See here:
https://github.com/celo-org/celo-monorepo/blob/337d28c94e418afea2d6ec05f5a7930916fc8371/packages/mobile/src/components/CurrencyDisplay.tsx#L151-L155

I think we should decouple conversion and representation inside CurrencyDisplay, but that is for a different PR :)

ah 😢, I intended to merge LocalCurrency and CURRENCIES to avoid this kind of mess.
All good then 👍

jeanregisser

🚀

aaronmgdr · 2020-05-20T16:00:44Z

packages/mobile/src/navigator/Headers.v2.tsx

@@ -59,9 +59,10 @@ export const emptyHeader: StackNavigationOptions = {
  headerShown: true,
  headerTitleStyle: [styles.headerTitle, componentStyles.screenHeader],
  headerTitleContainerStyle: {
-    alignItems: 'center',
+    alignItems: 'center' as 'center',


btw since this is now typed as StackNavigationOptions the as 'center' should be no longer needed

i1skn force-pushed the i1skn/gold-screen-redesign branch 4 times, most recently from 015c7e5 to 16f2765 Compare May 11, 2020 15:17

i1skn mentioned this pull request May 12, 2020

New design system #3645

Closed

50 tasks

i1skn force-pushed the i1skn/gold-screen-redesign branch 6 times, most recently from 2cfecda to 4c6a287 Compare May 14, 2020 12:50

i1skn force-pushed the i1skn/gold-screen-redesign branch 2 times, most recently from 5442940 to f67f9c4 Compare May 18, 2020 13:33

i1skn commented May 18, 2020

View reviewed changes

i1skn force-pushed the i1skn/gold-screen-redesign branch 2 times, most recently from 18212d9 to 247fb45 Compare May 18, 2020 19:13

i1skn requested a review from a team May 18, 2020 19:14

i1skn marked this pull request as ready for review May 18, 2020 19:14

i1skn requested review from aaronmgdr, cmcewen and jmrossy as code owners May 18, 2020 19:14

aaronmgdr reviewed May 18, 2020

View reviewed changes

packages/mobile/src/exchange/CeloGoldHistoryChart.tsx Outdated Show resolved Hide resolved

aaronmgdr approved these changes May 18, 2020

View reviewed changes

jeanregisser suggested changes May 20, 2020

View reviewed changes

i1skn added 4 commits May 20, 2020 15:08

WIP: Chart - Done

d01f704

WIP: Complete overview celo gold screen

ef79969

WIP: update Buy/Sell Gold screens (old header)

2dd8fc1

WIP: Exchange details screen

71c9c64

i1skn added 8 commits May 20, 2020 15:08

WIP: Gold chart update

c94f220

WIP: Implement new headers with navigation

ed73160

Fix some styles after rebase w/ master

915dc70

Fix translations

0badbe8

Small fixes after self PR review

b3ce04a

Fix snapshots

3b2a86c

Fixes related to navigation after rebase

59d8976

fix snapshots

3e87d14

i1skn force-pushed the i1skn/gold-screen-redesign branch from d94fead to ad69b6e Compare May 20, 2020 13:21

Address PR comments

79f9fca

i1skn force-pushed the i1skn/gold-screen-redesign branch from ad69b6e to 79f9fca Compare May 20, 2020 14:17

jeanregisser approved these changes May 20, 2020

View reviewed changes

Merge branch 'master' into i1skn/gold-screen-redesign

0ac9b60

i1skn added the automerge Have PR merge automatically when checks pass label May 20, 2020

mergify bot merged commit d113e94 into master May 20, 2020

mergify bot deleted the i1skn/gold-screen-redesign branch May 20, 2020 14:56

aaronmgdr reviewed May 20, 2020

View reviewed changes

aaronmgdr mentioned this pull request Jun 5, 2020

[Wallet] Redesigned Guides #4027

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Wallet] Gold screen redesign #3764

[Wallet] Gold screen redesign #3764

i1skn commented May 7, 2020 •

edited

Loading

codecov bot commented May 14, 2020 •

edited

Loading

i1skn May 18, 2020

jeanregisser May 20, 2020

i1skn May 18, 2020 •

edited

Loading

jeanregisser left a comment

jeanregisser May 20, 2020

i1skn May 20, 2020

jeanregisser May 20, 2020

jeanregisser May 20, 2020

jeanregisser May 20, 2020

jeanregisser May 20, 2020

i1skn May 20, 2020

jeanregisser May 20, 2020

i1skn May 20, 2020

jeanregisser May 20, 2020

jeanregisser May 20, 2020

i1skn May 20, 2020 •

edited

Loading

i1skn May 20, 2020 •

edited

Loading

jeanregisser May 20, 2020

jeanregisser left a comment

aaronmgdr May 20, 2020

[Wallet] Gold screen redesign #3764

[Wallet] Gold screen redesign #3764

Conversation

i1skn commented May 7, 2020 • edited Loading

Description

Other changes

Tested

Related issues

Backwards compatibility

Screenshots

codecov bot commented May 14, 2020 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

i1skn May 18, 2020 • edited Loading

Choose a reason for hiding this comment

jeanregisser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

i1skn May 20, 2020 • edited Loading

Choose a reason for hiding this comment

i1skn May 20, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeanregisser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

i1skn commented May 7, 2020 •

edited

Loading

codecov bot commented May 14, 2020 •

edited

Loading

i1skn May 18, 2020 •

edited

Loading

i1skn May 20, 2020 •

edited

Loading

i1skn May 20, 2020 •

edited

Loading