feat: New welcome screen

app/components/UI/Navbar/index.js

@@ -684,30 +684,40 @@ export function getOnboardingNavbarOptions(
  * Function that returns a transparent navigation options for our onboarding screens.
  *
  * @returns {Object} - Corresponding navbar options containing headerTitle
+ * @param {Object} themeColors - The theme colors object
+ * @param {string} backgroundColor - The color to overwrite the background color
+ * @param {boolean} showLogo - Whether to show the logo
+ * @param {string} logoColor - The color to overwrite the logo color
  */
-export function getTransparentOnboardingNavbarOptions(themeColors) {
+export function getTransparentOnboardingNavbarOptions(
+  themeColors,
+  backgroundColor = undefined,
+  showLogo = true,
+  logoColor = undefined,
+) {
   const innerStyles = StyleSheet.create({
     headerStyle: {
-      backgroundColor: themeColors.background.default,
+      backgroundColor: backgroundColor || themeColors.background.default,
       shadowColor: importedColors.transparent,
       elevation: 0,
     },
     metamaskName: {
       width: 70,
       height: 35,
-      tintColor: themeColors.text.default,
+      tintColor: logoColor || themeColors.text.default,
     },
   });
   return {
-    headerTitle: () => (
-      <View style={styles.metamaskNameTransparentWrapper}>
-        <Image
-          source={metamask_name}
-          style={innerStyles.metamaskName}
-          resizeMethod={'auto'}
-        />
-      </View>
-    ),
+    headerTitle: () =>
+      showLogo ? (
+        <View style={styles.metamaskNameTransparentWrapper}>
+          <Image
+            source={metamask_name}
+            style={innerStyles.metamaskName}
+            resizeMethod={'auto'}
+          />
+        </View>
+      ) : null,
     headerLeft: () => <View />,
     headerRight: () => <View />,
     headerStyle: innerStyles.headerStyle,
@@ -752,6 +762,7 @@ export function getOnboardingCarouselNavbarOptions(currentTabColor) {
  * Function that returns a transparent navigation options for our onboarding screens.
  *
  * @returns {Object} - Corresponding navbar options containing headerTitle and a back button
+ * @param {Object} themeColors - The theme colors object
  */
 export function getTransparentBackOnboardingNavbarOptions(themeColors) {
   const innerStyles = StyleSheet.create({

app/components/UI/Navbar/index.test.jsx

@@ -7,6 +7,7 @@ import {
   getDepositNavbarOptions,
   getNetworkNavbarOptions,
   getOnboardingCarouselNavbarOptions,
+  getTransparentOnboardingNavbarOptions,
 } from '.';
 import { mockTheme } from '../../../util/theme';
 import Device from '../../../util/device';
@@ -107,4 +108,15 @@ describe('getDepositNavbarOptions', () => {
     expect(options).toBeDefined();
     expect(options.headerStyle.backgroundColor).toBe('red');
   });
+
+  it('handles getTransparentOnboardingNavbarOptions', () => {
+    const options = getTransparentOnboardingNavbarOptions(
+      mockTheme,
+      'red',
+      true,
+      'blue',
+    );
+    expect(options).toBeDefined();
+    expect(options.headerStyle.backgroundColor).toBe('red');
+  });
 });