Merge pull request #3104 from bithyve/dev

Build 218

android/app/build.gradle

@@ -149,7 +149,7 @@ android {
         applicationId "io.hexawallet.keeper"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 214
+        versionCode 218
         versionName "1.1.0"
         missingDimensionStrategy 'react-native-camera', 'general'
         missingDimensionStrategy 'store', 'play'

ios/Podfile.lock

@@ -366,13 +366,17 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.8.0):
     - React-Core
+  - react-native-html-to-pdf (0.12.0):
+    - React-Core
   - react-native-image-picker (4.10.3):
     - React-Core
   - react-native-mmkv (2.4.3):
     - MMKV (>= 1.2.13)
     - React-Core
   - react-native-nfc-manager (3.13.5):
     - React-Core
+  - react-native-pdf (6.7.1):
+    - React-Core
   - react-native-randombytes (3.6.1):
     - React-Core
   - react-native-safe-area-context (4.3.1):
@@ -576,9 +580,11 @@ DEPENDENCIES:
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-flipper (from `../node_modules/react-native-flipper`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
+  - react-native-html-to-pdf (from `../node_modules/react-native-html-to-pdf`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-mmkv (from `../node_modules/react-native-mmkv`)
   - react-native-nfc-manager (from `../node_modules/react-native-nfc-manager`)
+  - react-native-pdf (from `../node_modules/react-native-pdf`)
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-tcp-socket (from `../node_modules/react-native-tcp-socket`)
@@ -698,12 +704,16 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-flipper"
   react-native-get-random-values:
     :path: "../node_modules/react-native-get-random-values"
+  react-native-html-to-pdf:
+    :path: "../node_modules/react-native-html-to-pdf"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
   react-native-mmkv:
     :path: "../node_modules/react-native-mmkv"
   react-native-nfc-manager:
     :path: "../node_modules/react-native-nfc-manager"
+  react-native-pdf:
+    :path: "../node_modules/react-native-pdf"
   react-native-randombytes:
     :path: "../node_modules/react-native-randombytes"
   react-native-safe-area-context:
@@ -823,9 +833,11 @@ SPEC CHECKSUMS:
   react-native-document-picker: 958e2bc82e128be69055be261aeac8d872c8d34c
   react-native-flipper: 1b78844db5b0de19bd64847c3b88cafc6cc119ba
   react-native-get-random-values: a6ea6a8a65dc93e96e24a11105b1a9c8cfe1d72a
+  react-native-html-to-pdf: 4c5c6e26819fe202971061594058877aa9b25265
   react-native-image-picker: 60f4246eb5bb7187fc15638a8c1f13abd3820695
   react-native-mmkv: 1265a348a4711097ba29c8bcefd5971f48220f2b
   react-native-nfc-manager: 42ebc22a04f32c0c2bc63a016ab30fa6486de450
+  react-native-pdf: 7c0e91ada997bac8bac3bb5bea5b6b81f5a3caae
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-safe-area-context: 6c12e3859b6f27b25de4fee8201cfb858432d8de
   react-native-tcp-socket: c1b7297619616b4c9caae6889bcb0aba78086989

ios/hexa_keeper.xcodeproj/project.pbxproj

@@ -814,7 +814,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = hexa_keeper/hexa_keeper.entitlements;
-				CURRENT_PROJECT_VERSION = 214;
+				CURRENT_PROJECT_VERSION = 218;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				ENABLE_BITCODE = NO;
 				HEADER_SEARCH_PATHS = (
@@ -943,7 +943,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = hexa_keeper/hexa_keeper.entitlements;
-				CURRENT_PROJECT_VERSION = 214;
+				CURRENT_PROJECT_VERSION = 218;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
@@ -1193,7 +1193,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = "dev-AppIcon";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = hexa_keeper_dev.entitlements;
-				CURRENT_PROJECT_VERSION = 214;
+				CURRENT_PROJECT_VERSION = 218;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				ENABLE_BITCODE = NO;
 				HEADER_SEARCH_PATHS = (
@@ -1324,7 +1324,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = "dev-AppIcon";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = hexa_keeper_dev.entitlements;
-				CURRENT_PROJECT_VERSION = 214;
+				CURRENT_PROJECT_VERSION = 218;
 				DEVELOPMENT_TEAM = Y5TCB759QL;
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",

src/common/themes.js

@@ -52,7 +52,11 @@ export const customTheme = extendTheme({
     light: {
       primaryGreen: Colors.GenericViridian,
       primaryBackground: Colors.LightYellow,
+      primaryGreenBackground: Colors.pantoneGreen,
       mainBackground: Colors.LightWhite,
+      modalGreenBackground: Colors.CastletonGreen,
+      modalGreenContent: Colors.White,
+      modalWhiteBackground: Colors.LightWhite,
       white: Colors.White,
       primaryText: Colors.RichBlack,
       secondaryText: Colors.GraniteGray,
@@ -86,17 +90,66 @@ export const customTheme = extendTheme({
       vaultCardText: Colors.Bisque,
       satsDark: Colors.DeepSpaceGreen,
       gradientStart: Colors.GenericViridian, // linearGradient
-      gradientEnd: Colors.RichGreen, // linearGradient
+      gradientEnd: Colors.DeepAquamarine, // linearGradient
       error: Colors.CongoPink,
       black: Colors.Black,
       fadedGray: Colors.FadedGray,
       fadedblue: Colors.FadeBlue,
       dustySageGreen: Colors.DustySageGreen,
       forestGreen: Colors.ForestGreen,
       pantoneGreen: Colors.pantoneGreen,
+      seashellWhite: Colors.Seashell,
     },
     dark: {
-      black: Colors.Black,
+      primaryGreen: Colors.GenericViridian,
+      primaryBackground: Colors.LightYellowDark,
+      primaryGreenBackground: Colors.LightYellowDark,
+      mainBackground: Colors.LightWhite,
+      modalGreenBackground: Colors.LightYellowDark,
+      modalGreenContent: Colors.White,
+      modalWhiteBackground: Colors.SeashellDark,
+      white: Colors.Black,
+      primaryText: Colors.RichBlackDark,
+      secondaryText: Colors.GraniteGrayDark,
+      learnMoreBorder: Colors.GoldCrayola,
+      textBlack: Colors.DarkGreen,
+      greenText: Colors.RichGreenDark,
+      greenText2: Colors.TropicalRainForestDark,
+      accent: Colors.MacaroniAndCheese,
+      lightAccent: Colors.GoldCrayola,
+      QrCode: Colors.WhiteCoffee,
+      recieverAddress: Colors.DimGray,
+      textInputBackground: Colors.Isabelline,
+      secondaryBackground: Colors.Isabelline,
+      GreyText: Colors.RichBlackDark,
+      dateText: Colors.HookerGreen,
+      Border: Colors.CastletonGreen,
+      textColor: Colors.LightGray,
+      textColor2: Colors.DeepSpaceSparkleDark,
+      headerText: Colors.TropicalRainForest,
+      copyBackground: Colors.LightGray,
+      sendCardHeading: Colors.BlueGreen,
+      Glass: Colors.Glass,
+      TorLable: Colors.Menthol,
+      divider: Colors.GrayX11,
+      errorRed: Colors.CarmineRed,
+      textWallet: Colors.MediumJungleGreen,
+      indicator: Colors.OutrageousOrange,
+      addTransactionText: Colors.PineTree,
+      sendMax: Colors.JackoBean,
+      inActiveMsg: Colors.SpanishGray,
+      vaultCardText: Colors.Bisque,
+      satsDark: Colors.DeepSpaceGreen,
+      gradientStart: Colors.GenericViridian, // linearGradient
+      gradientEnd: Colors.DeepAquamarine, // linearGradient
+      error: Colors.CongoPink,
+      black: Colors.White,
+      fadedGray: Colors.FadedGray,
+      fadedblue: Colors.FadeBlue,
+      dustySageGreen: Colors.DustySageGreen,
+      forestGreen: Colors.ForestGreen,
+      pantoneGreen: Colors.pantoneGreenDark,
+      seashellWhite: Colors.SeashellDark,
     },
   },
   components: {

src/components/AppPinInput/PinInputsView.tsx

@@ -1,4 +1,4 @@
-import { Box } from 'native-base';
+import { Box, useColorMode } from 'native-base';
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { hp, wp } from 'src/common/data/responsiveness/responsive';
@@ -19,6 +19,7 @@ function PinInputsView({
   textColor,
   borderColor = 'transparent',
 }: Props) {
+  const { colorMode } = useColorMode();
   const [hide, setHide] = useState(false);
 
   useEffect(() => {

src/components/Buttons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
-import { View, Box } from 'native-base';
+import { View, Box, useColorMode } from 'native-base';
 import { ScaledSheet } from 'react-native-size-matters';
 import { Shadow } from 'react-native-shadow-2';
 import { hp, wp } from 'src/common/data/responsiveness/responsive';
@@ -10,22 +10,22 @@ import ActivityIndicatorView from './AppActivityIndicator/ActivityIndicatorView'
 function Buttons({
   primaryText = '',
   secondaryText = '',
-  primaryCallback = () => {},
-  secondaryCallback = () => {},
+  primaryCallback = () => { },
+  secondaryCallback = () => { },
   primaryDisable = false,
   secondaryDisable = false,
   primaryLoading = false,
   paddingHorizontal = wp(40),
   activeOpacity = 0.5,
 }) {
+  const { colorMode } = useColorMode();
   const onPrimaryInteraction = () => {
     primaryCallback();
   };
 
   if (primaryLoading) {
     return <ActivityIndicatorView visible={primaryLoading} />;
   }
-
   const getPrimaryButton = () => (
     <TouchableOpacity
       onPress={onPrimaryInteraction}
@@ -38,20 +38,19 @@ function Buttons({
           style={[styles.createBtn, { opacity: primaryDisable ? 0.5 : 1, paddingHorizontal }]}
           backgroundColor={{
             linearGradient: {
-              colors: ['light.gradientStart', 'light.gradientEnd'],
+              colors: [`${colorMode}.gradientStart`, `${colorMode}.gradientEnd`],
               start: [0, 0],
               end: [1, 1],
             },
           }}
         >
-          <Text numberOfLines={1} style={styles.btnText} color="light.white" bold>
+          <Text numberOfLines={1} style={styles.btnText} color='white' bold>
             {primaryText}
           </Text>
         </Box>
       </Shadow>
     </TouchableOpacity>
   );
-
   return (
     <View style={styles.container}>
       {secondaryText !== '' && (
@@ -67,7 +66,7 @@ function Buttons({
           activeOpacity={0.5}
           testID="btn_secondaryText"
         >
-          <Text numberOfLines={1} style={styles.btnText} color="light.greenText" bold>
+          <Text numberOfLines={1} style={styles.btnText} color={`${colorMode}.greenText`} bold>
             {secondaryText}
           </Text>
         </TouchableOpacity>

src/components/CameraUnauthorized.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Linking, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { Box } from 'native-base';
+import { Box, useColorMode } from 'native-base';
 
 import { wp, hp } from 'src/common/data/responsiveness/responsive';
 import Text from './KeeperText';
 
 function CameraUnauthorized() {
+  const { colorMode } = useColorMode();
   const requestPermission = () => {
     Linking.openSettings();
   };
@@ -14,15 +15,15 @@ function CameraUnauthorized() {
     <View style={{ ...styles.cameraView, backgroundColor: '#000' }}>
       <Box style={styles.container}>
         <Text
-          color="light.white"
+          color={`${colorMode}.white`}
           style={{
             fontSize: 13,
           }}
         >
           Camera access is turned off
         </Text>
         <Text
-          color="light.white"
+          color={`${colorMode}.white`}
           style={{
             fontSize: 11,
           }}
@@ -36,11 +37,11 @@ function CameraUnauthorized() {
           }}
         >
           <Box
-            borderColor="light.learnMoreBorder"
-            backgroundColor="light.lightAccent"
+            borderColor={`${colorMode}.learnMoreBorder`}
+            backgroundColor={`${colorMode}.lightAccent`}
             style={styles.learnMoreContainer}
           >
-            <Text color="light.learnMoreBorder" style={styles.learnMoreText}>
+            <Text color={`${colorMode}.learnMoreBorder`} style={styles.learnMoreText}>
               Tap to go to settings
             </Text>
           </Box>

src/components/Carousel/ChoosePlanCarousel.tsx

@@ -1,6 +1,6 @@
 import { Box } from 'native-base';
 import { FlatList, StyleSheet, Dimensions } from 'react-native';
-import React, { useContext, useState, useMemo } from 'react';
+import React, { useContext, useState } from 'react';
 import { hp, wp } from 'src/common/data/responsiveness/responsive';
 import { KeeperApp } from 'src/common/data/models/interfaces/KeeperApp';
 import { RealmSchema } from 'src/storage/realm/enum';

src/components/Carousel/ChoosePlanCarouselItem.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Box } from 'native-base';
+import { Box, useColorMode } from 'native-base';
 import { Pressable, StyleSheet, } from 'react-native';
 import { hp, wp } from 'src/common/data/responsiveness/responsive';
 import { SvgUri } from 'react-native-svg';
@@ -31,7 +31,7 @@ interface Props {
 }
 
 function ChoosePlanCarouselItem({ index, onPress, isMonthly, currentPosition, item, subscription, onSelect, itemWidth, requesting }: Props) {
-
+  const { colorMode } = useColorMode();
   const getFreeTrail = useMemo(() => {
     if (item.monthlyPlanDetails || item.yearlyPlanDetails) {
       if (isMonthly) return item.monthlyPlanDetails.trailPeriod
@@ -84,7 +84,7 @@ function ChoosePlanCarouselItem({ index, onPress, isMonthly, currentPosition, it
           linearGradient: {
             colors:
               currentPosition === index
-                ? ['light.gradientStart', 'light.gradientEnd']
+                ? [`${colorMode}.gradientStart`, `${colorMode}.gradientEnd`]
                 : ['#848484', '#848484'],
             start: [0, 0],
             end: [1, 1],
@@ -100,7 +100,7 @@ function ChoosePlanCarouselItem({ index, onPress, isMonthly, currentPosition, it
         <Box py={2} alignItems="center" justifyContent="center">
           {item.productIds.includes(subscription.productId.toLowerCase()) ? (
             <Box alignSelf="flex-start" backgroundColor="light.white" borderRadius={10} mx={2} py={0.5} px={2}>
-              <Text fontSize={8} letterSpacing={0.64} bold>
+              <Text fontSize={8} letterSpacing={0.64} bold color='black'>
                 Current
               </Text>
             </Box>