US-2150: Developers need an easy way to change the colors of the wallet

ios/Podfile.lock

@@ -1171,7 +1171,7 @@ PODS:
     - React-Core
   - RNScreenshotPrevent (1.1.9):
     - React
-  - RNSVG (14.1.0):
+  - RNSVG (13.4.0):
     - React-Core
   - RNVectorIcons (10.0.3):
     - glog
@@ -1533,14 +1533,14 @@ SPEC CHECKSUMS:
   RNReanimated: beb07f7f900543928467da8107c175d1e57a1049
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
   RNScreenshotPrevent: cdfbe213203774c7486c6a2f198af8a4ebe10c47
-  RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
+  RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2
   RNVectorIcons: 210f910e834e3485af40693ad4615c1ec22fc02b
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   TrustKit: 7858ea59d0e226b1457b2e9cc8b95d77ab21d471
   VisionCamera: 7a5c87805b13adaaa557132b44879ed1e1e39786
-  Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
+  Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
 PODFILE CHECKSUM: 3c66251e2fb883f7575e84b4cdde922bccb42c88
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.13.0

ios/rifWallet.xcodeproj/project.pbxproj

@@ -417,6 +417,7 @@
 			baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-rifWallet-rifWalletTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
+				DEVELOPMENT_TEAM = 3YDAH8ZR7C;
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
@@ -445,6 +446,7 @@
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
+				DEVELOPMENT_TEAM = 3YDAH8ZR7C;
 				INFOPLIST_FILE = rifWalletTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -470,6 +472,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 3YDAH8ZR7C;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = rifWallet/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -497,6 +500,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 3YDAH8ZR7C;
 				INFOPLIST_FILE = rifWallet/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
@@ -584,11 +588,7 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -656,11 +656,7 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

package.json

@@ -86,7 +86,7 @@
     "react-native-screens": "^3.29.0",
     "react-native-screenshot-prevent": "^1.1.9",
     "react-native-ssl-public-key-pinning": "^1.1.3",
-    "react-native-svg": "^14.1.0",
+    "react-native-svg": "13.4.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-vision-camera": "^3.9.1",
     "react-redux": "^8.0.5",

src/components/BarButtonGroup/BarButtonGroup.tsx

@@ -24,7 +24,11 @@ export const BarButtonGroupIcon = ({
     onPress={onPress}
     style={styles.iconContainerStyle}
     accessibilityLabel={iconName}>
-    <IconComponent name={iconName} color="white" size={size} />
+    <IconComponent
+      name={iconName}
+      color={sharedColors.text.primary}
+      size={size}
+    />
   </AppTouchable>
 )
 

src/components/BasicRow/BasicRowWithContact.tsx

@@ -1,5 +1,6 @@
 import { BasicRow, BasicRowProps } from 'components/BasicRow/index'
 import { Contact } from 'shared/types'
+import { UserIcon } from 'components/icons/UserIcon'
 
 export interface BasicRowWithContact extends BasicRowProps {
   contact: Contact | undefined
@@ -13,7 +14,7 @@ export const BasicRowWithContact = ({
     {...props}
     avatar={{
       name: contact?.name,
-      imageSource: contact ? undefined : require('src/images/user.png'),
+      icon: contact ? undefined : <UserIcon />,
     }}
   />
 )

src/components/BasicRow/index.tsx

@@ -153,7 +153,7 @@ const styles = StyleSheet.create({
   container: castStyle.view({
     marginTop: 10,
     paddingVertical: 10,
-    backgroundColor: sharedColors.black,
+    backgroundColor: sharedColors.background.primary,
     height: 'auto',
     flexDirection: 'row',
   }),
@@ -181,7 +181,7 @@ const styles = StyleSheet.create({
   usdText: {
     textAlign: 'right',
     flex: 1,
-    color: sharedColors.labelLight,
+    color: sharedColors.text.label,
   },
   horizontalPadding: {
     paddingRight: 1,

src/components/GlobalErrorHandler/GlobalErrorHandlerView.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { sharedColors, sharedStyles } from 'src/shared/constants'
 import { castStyle } from 'shared/utils'
 
-import { colors } from '../../styles'
 import ContentCopyMaterialIcon from '../icons/ContentCopyMaterialIcon'
 import { Typography } from '../typography'
 import { useGlobalErrorContext } from './GlobalErrorHandlerContext'
@@ -21,13 +20,14 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
 }) => {
   const { handleReload, globalError } = useGlobalErrorContext()
   const { t } = useTranslation()
-  const messageToShow: string = message || globalError || ''
+  const messageToShow = message || globalError || ''
 
   const onCopyError = React.useCallback(() => {
     Clipboard.setString(messageToShow)
   }, [messageToShow])
+
   return (
-    <View style={styles.container}>
+    <View style={sharedStyles.screen}>
       <View style={styles.firstView}>
         <Image
           source={require('../../images/error-image.png')}
@@ -48,7 +48,7 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
           <View style={sharedStyles.flex}>
             <Typography
               type={'body2'}
-              color={sharedColors.white}
+              color={sharedColors.text.primary}
               style={styles.errorDetailsText}>
               {t('global_error_details_title')}
             </Typography>
@@ -58,11 +58,14 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
               onPress={onCopyError}>
               <Typography
                 type={'body3'}
-                color={sharedColors.white}
+                color={sharedColors.text.primary}
                 style={sharedStyles.flex}>
                 {t(messageToShow)}
               </Typography>
-              <ContentCopyMaterialIcon color={sharedColors.white} size={25} />
+              <ContentCopyMaterialIcon
+                color={sharedColors.text.primary}
+                size={25}
+              />
             </TouchableOpacity>
           </View>
         )}
@@ -71,7 +74,8 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
             title={'reload'}
             accessibilityLabel={'reload'}
             onPress={handleReload}
-            style={styles.reload}
+            color={sharedColors.button.primaryBackground}
+            textColor={sharedColors.button.primaryText}
           />
         </View>
       </View>
@@ -80,14 +84,6 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
 }
 
 const styles = StyleSheet.create({
-  container: castStyle.view({
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.darkPurple3,
-    paddingHorizontal: 40,
-  }),
   firstView: castStyle.view({
     flex: 0.8,
     justifyContent: 'flex-end',
@@ -96,10 +92,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
   }),
-  imageView: castStyle.view({
-    flex: 3,
-    justifyContent: 'flex-end',
-  }),
   textView: castStyle.view({
     flex: 1,
     justifyContent: 'center',
@@ -109,12 +101,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   }),
   text: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     marginBottom: 10,
     textAlign: 'center',
   }),
   errorDetailsTouch: castStyle.view({
-    backgroundColor: colors.darkPurple5,
+    backgroundColor: sharedColors.background.secondary,
     height: 65,
     borderRadius: 17,
     padding: 10,
@@ -127,18 +119,11 @@ const styles = StyleSheet.create({
     fontSize: 10,
     marginBottom: 4,
   }),
-  exclamation: castStyle.text({
-    fontSize: 32,
-  }),
   imageStyle: castStyle.image({
     width: '100%',
     height: undefined,
     aspectRatio: 1,
   }),
-  reload: castStyle.view({
-    backgroundColor: colors.background.bustyBlue,
-    width: 150,
-  }),
 })
 
 export default GlobalErrorHandlerView

src/components/InfoBox/index.tsx

@@ -4,16 +4,16 @@ import { useCallback, useState } from 'react'
 import { Typography } from 'components/typography'
 import { AppTouchable } from 'components/appTouchable'
 import { Avatar } from 'components/avatar'
-import { sharedColors } from 'shared/constants'
+import { sharedColors, sharedStyles } from 'shared/constants'
 import { castStyle } from 'shared/utils'
-import { sharedStyles } from 'shared/styles'
 
 interface InfoBoxProps {
   avatar?: string
   title?: string
   description?: string
   buttonText?: string
   onPress?: () => void
+  textColor?: string
   backgroundColor?: string
   avatarBackgroundColor?: string
 }
@@ -24,8 +24,9 @@ export const InfoBox = ({
   description,
   buttonText,
   onPress,
-  backgroundColor = sharedColors.inputInactive,
-  avatarBackgroundColor = sharedColors.qrColor,
+  textColor = sharedColors.text.primary,
+  backgroundColor = sharedColors.primary,
+  avatarBackgroundColor = sharedColors.text.secondary,
 }: InfoBoxProps) => {
   const [shouldHide, setShouldHide] = useState(false)
   const handleOnPress = useCallback(() => {
@@ -47,22 +48,31 @@ export const InfoBox = ({
             sharedStyles.marginBottom,
             { backgroundColor: avatarBackgroundColor },
           ]}
+          letterColor={textColor}
           name={avatar}
           size={80}
         />
       ) : null}
 
       {title ? (
-        <Typography style={sharedStyles.marginBottom} type={'h3'}>
+        <Typography
+          style={sharedStyles.marginBottom}
+          type={'h3'}
+          color={textColor}>
           {title}
         </Typography>
       ) : null}
       {description ? (
-        <Typography type={'body3'}>{description}</Typography>
+        <Typography type={'body3'} color={textColor}>
+          {description}
+        </Typography>
       ) : null}
       {buttonText ? (
         <AppTouchable style={styles.button} onPress={handleOnPress} width={50}>
-          <Typography style={styles.buttonText} type={'body2'}>
+          <Typography
+            style={styles.buttonText}
+            type={'body2'}
+            color={textColor}>
             {buttonText}
           </Typography>
         </AppTouchable>

src/components/Porfolio/PortfolioCard.tsx

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     margin: 5,
     padding: 12,
-    backgroundColor: sharedColors.inputInactive,
+    backgroundColor: sharedColors.background.secondary,
   },
 })
 
@@ -152,7 +152,7 @@ const selectedCardStyles = StyleSheet.create({
     width: 20,
   }),
   primaryText: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     fontSize: 22,
     paddingTop: 3,
   }),
@@ -179,11 +179,11 @@ const nonSelectedCardStyles = StyleSheet.create({
     marginRight: 3,
   }),
   primaryText: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     fontSize: 16,
   }),
   secondaryText: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     fontSize: 16,
     right: 0,
   }),

src/components/QRCodeScanner/useCheckCameraPermissions.ts

@@ -5,7 +5,7 @@ import { Alert, Linking } from 'react-native'
 import { navigationContainerRef } from 'core/Core'
 
 const checkCameraPermissions = async (t: (text: string) => string) => {
-  const cameraPermission = await Camera.getCameraPermissionStatus()
+  const cameraPermission = Camera.getCameraPermissionStatus()
   if (cameraPermission === 'not-determined') {
     const cameraStatus = await Camera.requestCameraPermission()
     cameraStatus === 'denied' && navigationContainerRef.goBack()