Merge branch 'slava/add-total-value-to-review' into slava/add-new-rev…

…iew-to-send-flow
valora-inc · Jan 24, 2025 · 6e3b7d9 · 6e3b7d9
2 parents 9da3945 + 0b3e84c
commit 6e3b7d9
Show file tree

Hide file tree

Showing 66 changed files with 96 additions and 88 deletions.
diff --git a/src/account/Profile.tsx b/src/account/Profile.tsx
@@ -125,7 +125,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.Small12,
     borderWidth: 1,
     borderRadius: Spacing.Smallest8,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     marginHorizontal: Spacing.Thick24,
   },
   ctaContainer: {

diff --git a/src/account/SupportContact.tsx b/src/account/SupportContact.tsx
@@ -230,7 +230,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     marginTop: 8,
     alignItems: 'flex-start',
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 16,
@@ -243,7 +243,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     marginTop: 8,
     alignItems: 'flex-start',
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 16,

diff --git a/src/backup/BackupPhraseContainer.tsx b/src/backup/BackupPhraseContainer.tsx
@@ -182,7 +182,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.backgroundSecondary,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     alignContent: 'center',
     justifyContent: 'center',
     padding: 8,

diff --git a/src/backup/BackupQuiz.tsx b/src/backup/BackupQuiz.tsx
@@ -370,7 +370,7 @@ const styles = StyleSheet.create({
     marginVertical: 4,
     minWidth: 55,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: 100,
   },
   chosenWordWrapperFilled: {

diff --git a/src/celoNews/CeloNewsFeed.tsx b/src/celoNews/CeloNewsFeed.tsx
@@ -138,7 +138,7 @@ export default function CeloNewsFeed() {
 const styles = StyleSheet.create({
   separator: {
     height: 1,
-    backgroundColor: colors.border,
+    backgroundColor: colors.borderPrimary,
   },
   header: {
     marginVertical: Spacing.Regular16,

diff --git a/src/components/CodeInput.tsx b/src/components/CodeInput.tsx
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     backgroundColor: colors.backgroundSecondary,
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
   },
   innerContent: {
     flex: 1,

diff --git a/src/components/CodeRow.tsx b/src/components/CodeRow.tsx
@@ -104,7 +104,7 @@ const styles = StyleSheet.create({
   codeInput: {
     flex: 0,
     backgroundColor: colors.backgroundPrimary,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: 3,
     borderWidth: 1,
     height: 50,
@@ -131,7 +131,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginVertical: 5,
     paddingHorizontal: 10,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: 3,
     borderWidth: 1,
     height: 50,
@@ -147,7 +147,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: 10,
     marginVertical: 5,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: 3,
     borderWidth: 1,
     height: 50,

diff --git a/src/components/ContactCircleSelf.tsx b/src/components/ContactCircleSelf.tsx
@@ -21,7 +21,7 @@ export default function ContactCircleSelf({ style, size }: Props) {
       recipient={recipient}
       size={size}
       backgroundColor={colors.backgroundSecondary}
-      borderColor={colors.border}
+      borderColor={colors.borderPrimary}
       foregroundColor={colors.contentPrimary}
     />
   )

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -68,7 +68,7 @@ function Dropdown<T>(props: Props<T>) {
 const styles = StyleSheet.create({
   selectedOptionContainer: {
     padding: Spacing.Small12,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderRadius: Spacing.Tiny4,
     borderWidth: 1,
     gap: Spacing.Thick24,
@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
   optionsContainer: {
     position: 'absolute',
     top: 0,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderRadius: Spacing.Tiny4,
     borderWidth: 1,
     backgroundColor: Colors.backgroundPrimary,

diff --git a/src/components/ExchangesBottomSheet.tsx b/src/components/ExchangesBottomSheet.tsx
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
   separator: {
     width: '100%',
     height: 1,
-    backgroundColor: colors.border,
+    backgroundColor: colors.borderPrimary,
   },
 })
 

diff --git a/src/components/HorizontalLine.tsx b/src/components/HorizontalLine.tsx
@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
     width: '100%',
     borderStyle: 'solid',
     borderTopWidth: 1,
-    borderTopColor: colors.border,
+    borderTopColor: colors.borderPrimary,
     marginTop: 10,
     marginBottom: 15,
   },

diff --git a/src/components/ItemSeparator.tsx b/src/components/ItemSeparator.tsx
@@ -10,7 +10,7 @@ export default function ItemSeparator() {
 const styles = StyleSheet.create({
   container: {
     height: 1,
-    backgroundColor: colors.border,
+    backgroundColor: colors.borderPrimary,
     marginHorizontal: variables.contentPadding,
   },
 })
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   innerView: {
     paddingVertical: variables.contentPadding,
     borderBottomWidth: 1,
-    borderBottomColor: colors.border,
+    borderBottomColor: colors.borderPrimary,
     marginHorizontal: variables.contentPadding,
   },
 })
diff --git a/src/components/MessagingCard.tsx b/src/components/MessagingCard.tsx
@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
     // NOTE: using this over bar shadow since it's barely visible on android. If we
     // want to use this consistently everywhere (this is TBD from design), this
     // can be pulled into the Card component
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderWidth: 1,
   },
 })
diff --git a/src/components/RecoveryPhraseInput.tsx b/src/components/RecoveryPhraseInput.tsx
@@ -143,7 +143,7 @@ const styles = StyleSheet.create({
   containerActive: {
     padding: 0,
     backgroundColor: colors.backgroundSecondary,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: Spacing.Smallest8,
     borderWidth: 1,
   },

diff --git a/src/components/ReviewTransaction.test.tsx b/src/components/ReviewTransaction.test.tsx
@@ -166,7 +166,7 @@ describe('ReviewTotalValue', () => {
       feeTokenAmount: undefined,
       feeLocalAmount: null,
       title:
-        'returns token and local amounts only for send operation if there is no fee but local price is available',
+        'returns the token and fiat amount when fee info is missing and local price is available',
       result:
         'tokenAndLocalAmountApprox, {"tokenAmount":"10.00","localAmount":"10.00","tokenSymbol":"CELO","localCurrencySymbol":"₱"}',
     },
@@ -178,7 +178,7 @@ describe('ReviewTotalValue', () => {
       feeTokenAmount: undefined,
       feeLocalAmount: null,
       title:
-        'returns only a token amount only for send operation if there is no fee and no local price available',
+        'returns only the token amount when fee info is missing and no local price is available',
       result: 'tokenAmountApprox, {"tokenAmount":"10.00","tokenSymbol":"CELO"}',
     },
     {
@@ -189,19 +189,19 @@ describe('ReviewTotalValue', () => {
       feeTokenAmount: new BigNumber(0.5),
       feeLocalAmount: new BigNumber(0.5),
       title:
-        'returns token and local amounts if send token and fee token are the same and local price is available',
+        'returns the token and local amount when the token and fee token are the same and local price is available',
       result:
         'tokenAndLocalAmountApprox, {"tokenAmount":"10.50","localAmount":"10.50","tokenSymbol":"CELO","localCurrencySymbol":"₱"}',
     },
     {
       tokenInfo: { ...celoToken, priceUsd: null },
       tokenAmount: new BigNumber(10),
-      localAmount: new BigNumber(10),
+      localAmount: null,
       feeTokenInfo: { ...celoToken, priceUsd: null },
       feeTokenAmount: new BigNumber(0.5),
-      feeLocalAmount: new BigNumber(0.5),
+      feeLocalAmount: null,
       title:
-        "returns only a token amount if send token and fee token are the same but they don't have local price",
+        "returns only the token amount when token and fee token are the same but they don't have local price",
       result: 'tokenAmountApprox, {"tokenAmount":"10.50","tokenSymbol":"CELO"}',
     },
     {
@@ -212,18 +212,18 @@ describe('ReviewTotalValue', () => {
       feeTokenAmount: new BigNumber(0.5),
       feeLocalAmount: new BigNumber(0.5),
       title:
-        'returns only a local amount if send token and fee token are different but local prices for both are available',
+        'returns only the local amount when token and fee token are different but local prices are available for both',
       result: 'localAmountApprox, {"localAmount":"10.50","localCurrencySymbol":"₱"}',
     },
     {
       tokenInfo: { ...cUSDToken, priceUsd: null },
       tokenAmount: new BigNumber(10),
-      localAmount: new BigNumber(10),
+      localAmount: null,
       feeTokenInfo: { ...celoToken, priceUsd: null },
       feeTokenAmount: new BigNumber(0.5),
-      feeLocalAmount: new BigNumber(0.5),
+      feeLocalAmount: null,
       title:
-        'returns multiple token amounts if send token and fee token are different and no local prices available',
+        'returns multiple token amounts when token and fee token are different and no local prices available',
       result:
         'reviewTransaction.multipleTokensWithPlusSign, {"amount1":"10.00","symbol1":"cUSD","amount2":"0.50","symbol2":"CELO"}',
     },

diff --git a/src/components/ReviewTransaction.tsx b/src/components/ReviewTransaction.tsx
@@ -243,8 +243,7 @@ export function ReviewTotalValue({
   }
 
   const sameToken = tokenInfo.tokenId === feeTokenInfo.tokenId
-  const haveLocalPrice =
-    !!tokenInfo.priceUsd && !!feeTokenInfo.priceUsd && localAmount && feeLocalAmount
+  const haveLocalPrice = !!localAmount && !!feeLocalAmount
 
   // if single token and have local price - return token and local amounts
   if (sameToken && haveLocalPrice) {
@@ -306,7 +305,7 @@ const styles = StyleSheet.create({
   },
   reviewSummary: {
     borderWidth: 1,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderRadius: Spacing.Small12,
     backgroundColor: Colors.backgroundSecondary,
     padding: Spacing.Regular16,

diff --git a/src/components/RowDivider.tsx b/src/components/RowDivider.tsx
@@ -7,7 +7,7 @@ export interface Props {
   color?: Colors
 }
 
-export default function RowDivider({ color = Colors.border }: Props) {
+export default function RowDivider({ color = Colors.borderPrimary }: Props) {
   return <View style={[styles.container, { backgroundColor: color }]} />
 }
 

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     height: HEIGHT,
     borderRadius: HEIGHT / 2,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderWidth: 1.5,
     paddingRight: 8,
   },

diff --git a/src/components/SelectRecipientButton.tsx b/src/components/SelectRecipientButton.tsx
@@ -58,7 +58,7 @@ const styles = StyleSheet.create({
   },
   icon: {
     borderWidth: 1,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
   },
   subtitle: {
     ...typeScale.bodySmall,

diff --git a/src/components/SelectionOption.tsx b/src/components/SelectionOption.tsx
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     marginLeft: 16,
     paddingVertical: 14,
     borderBottomWidth: 1,
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
   },
   text: {
     ...typeScale.bodyMedium,

diff --git a/src/components/SingleDigitInput.tsx b/src/components/SingleDigitInput.tsx
@@ -41,7 +41,7 @@ export function SingleDigitInput({
 
 const styles = StyleSheet.create({
   codeInput: {
-    borderColor: colors.border,
+    borderColor: colors.borderPrimary,
     borderRadius: 3,
     borderWidth: 1,
     flex: 0,

diff --git a/src/components/TokenEnterAmount.tsx b/src/components/TokenEnterAmount.tsx
@@ -399,6 +399,7 @@ export default function TokenEnterAmount({
             {
               borderBottomLeftRadius: token ? 0 : BORDER_RADIUS,
               borderBottomRightRadius: token ? 0 : BORDER_RADIUS,
+              borderBottomColor: Colors.borderSecondary,
             },
           ]}
         >
@@ -535,7 +536,7 @@ export default function TokenEnterAmount({
 const styles = StyleSheet.create({
   rowContainer: {
     borderWidth: 1,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderRadius: BORDER_RADIUS,
     padding: Spacing.Regular16,
     backgroundColor: Colors.backgroundSecondary,

diff --git a/src/components/multiSelect/MultiSelectBottomSheet.tsx b/src/components/multiSelect/MultiSelectBottomSheet.tsx
@@ -216,7 +216,7 @@ const styles = StyleSheet.create({
     paddingVertical: 5,
     paddingHorizontal: Spacing.Thick24,
     borderTopWidth: 1,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
   },
   optionRow: {
     flexDirection: 'row',

diff --git a/src/dapps/DappShortcutsRewards.tsx b/src/dapps/DappShortcutsRewards.tsx
@@ -205,7 +205,7 @@ function DappShortcutsRewards() {
 const styles = StyleSheet.create({
   card: {
     borderWidth: 1,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderRadius: 12,
     marginBottom: Spacing.Regular16,
   },

diff --git a/src/dappsExplorer/DappCard.tsx b/src/dappsExplorer/DappCard.tsx
@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
   },
   borderStyle: {
     borderWidth: 1,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
   },
   dappIcon: {
     width: 40,

diff --git a/src/dappsExplorer/DappFeaturedActions.tsx b/src/dappsExplorer/DappFeaturedActions.tsx
@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
     padding: Spacing.Regular16,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     width: variables.width - Spacing.Thick24 * 2,
   },
   cardContainer: {

diff --git a/src/dappsExplorer/DiscoverDappsCard.tsx b/src/dappsExplorer/DiscoverDappsCard.tsx
@@ -143,7 +143,7 @@ function DiscoverDappsCard() {
 const styles = StyleSheet.create({
   container: {
     padding: Spacing.Regular16,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderWidth: 1,
     borderRadius: 8,
   },

diff --git a/src/earn/EarnConfirmationScreen.tsx b/src/earn/EarnConfirmationScreen.tsx
@@ -357,7 +357,7 @@ const styles = StyleSheet.create({
   },
   collectInfoContainer: {
     padding: Spacing.Regular16,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderWidth: 1,
     borderRadius: 16,
     backgroundColor: Colors.backgroundSecondary,
@@ -381,7 +381,7 @@ const styles = StyleSheet.create({
   separator: {
     marginBottom: Spacing.Regular16,
     borderBottomWidth: 1,
-    borderBottomColor: Colors.border,
+    borderBottomColor: Colors.borderPrimary,
   },
   rateText: {
     ...typeScale.bodySmall,

diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
@@ -1067,7 +1067,7 @@ const styles = StyleSheet.create({
   txDetailsContainer: {
     marginVertical: Spacing.Regular16,
     padding: Spacing.Regular16,
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderWidth: 1,
     borderRadius: 12,
     gap: Spacing.Smallest8,

diff --git a/src/earn/EarnEntrypoint.tsx b/src/earn/EarnEntrypoint.tsx
@@ -97,7 +97,7 @@ const styles = StyleSheet.create({
     marginBottom: Spacing.Thick24,
   },
   touchable: {
-    borderColor: Colors.border,
+    borderColor: Colors.borderPrimary,
     borderWidth: 1,
     borderRadius: 8,
   },