Feature/eng 37 implement new onboarding UI

app/(onboarding)/_layout.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
-import { StyleSheet, Dimensions, Platform, View, StatusBar as RNStatusBar, Pressable } from 'react-native';
+import { StyleSheet, Dimensions, Platform, View, StatusBar as RNStatusBar, Pressable, Text, Modal } from 'react-native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import { StatusBar } from 'expo-status-bar';
+import { WebView } from 'react-native-webview';
 
 import useSystemFunctions from '@/hooks/useSystemFunctions';
 import { LQDButton } from '@/components';
@@ -10,6 +11,11 @@ import { LQDOnboardingIndicator } from '@/components/onboarding';
 import Step1 from './step1';
 import Step2 from './step2';
 import Step3 from './step3';
+import Step4 from './step4';
+
+import { adjustFontSizeForIOS } from '@/utils/helpers';
+import { CloseIcon } from '@/assets/icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const Tab = createMaterialTopTabNavigator();
 
@@ -19,17 +25,23 @@ const getCurrentStep = (pathname: string) => {
       return 1;
     case '/step3':
       return 2;
+    case '/step4':
+      return 3;
     default:
       return 0;
   }
 };
 
+const url = 'https://metastablelabs.notion.site/Terms-of-Use-149716767cb4802094c6d36593120eea';
+
 export default function OnboardingTabLayout() {
+  const insets = useSafeAreaInsets();
   const { router, pathname } = useSystemFunctions();
 
   const [timer, setTimer] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
   const [finished, setFinished] = useState(false);
+  const [showTC, setShowTC] = useState(false);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const currentStep = getCurrentStep(pathname);
@@ -38,6 +50,10 @@ export default function OnboardingTabLayout() {
     setIsPaused((prev) => !prev);
   };
 
+  const openTC = () => {
+    setShowTC((prev) => !prev);
+  };
+
   const navigateToNextScreen = () => {
     switch (pathname) {
       case '/step1':
@@ -47,6 +63,9 @@ export default function OnboardingTabLayout() {
         router.push('/(onboarding)/step3');
         break;
       case '/step3':
+        router.push('/(onboarding)/step4');
+        break;
+      case '/step4':
         if (intervalRef.current) {
           clearInterval(intervalRef.current);
         }
@@ -64,6 +83,9 @@ export default function OnboardingTabLayout() {
       case '/step3':
         router.push('/(onboarding)/step2');
         break;
+      case '/step4':
+        router.push('/(onboarding)/step3');
+        break;
     }
   };
 
@@ -89,7 +111,7 @@ export default function OnboardingTabLayout() {
 
   useEffect(() => {
     setTimer(0);
-    if (pathname !== '/step3' && finished) {
+    if (pathname !== '/step4' && finished) {
       setFinished(false);
       setIsPaused(false);
     }
@@ -103,7 +125,7 @@ export default function OnboardingTabLayout() {
           timer={timer}
           isPaused={isPaused}
           currentStep={currentStep}
-          totalSteps={3}
+          totalSteps={4}
           togglePause={togglePause}
           finished={finished}
         />
@@ -139,6 +161,13 @@ export default function OnboardingTabLayout() {
             title: 'Step3',
           }}
         />
+        <Tab.Screen
+          name="step4"
+          component={Step4}
+          options={{
+            title: 'Step4',
+          }}
+        />
       </Tab.Navigator>
 
       <Pressable
@@ -151,21 +180,49 @@ export default function OnboardingTabLayout() {
       />
       <Pressable
         onPress={() => {
-          if (currentStep < 2) {
+          if (currentStep < 3) {
             navigateToNextScreen();
           }
         }}
         style={styles.next}
       />
 
       <View style={styles.action}>
-        <LQDButton onPress={() => router.replace('/(signup)')} title="Let's go!" />
+        <LQDButton variant="secondary" onPress={() => router.replace('/(signup)')} title="Get started" />
+
+        <Pressable onPress={openTC}>
+          <Text style={styles.tcWrapper}>
+            <Text style={styles.tcText}>By clicking continue, you agree to Liquid’s</Text>
+            <Text style={styles.boldTcText}> Terms of Service</Text>
+            <Text style={styles.tcText}> and </Text>
+            <Text style={styles.boldTcText}>Privacy Policy</Text>
+          </Text>
+        </Pressable>
       </View>
+
+      <Modal visible={showTC} animationType="slide">
+        <View style={{ flex: 1 }}>
+          <Pressable onPress={openTC} style={[styles.closeIcon, { paddingTop: insets.top }]}>
+            <CloseIcon height={30} width={30} />
+          </Pressable>
+          <WebView
+            source={{ uri: url }}
+            style={styles.webview}
+            startInLoadingState={true}
+            javaScriptEnabled={true}
+            domStorageEnabled={true}
+          />
+        </View>
+      </Modal>
     </>
   );
 }
 
 const styles = StyleSheet.create({
+  webview: {
+    flex: 1,
+  },
+
   indicator: {
     position: 'absolute',
     top: 0,
@@ -175,6 +232,7 @@ const styles = StyleSheet.create({
     zIndex: 1,
     justifyContent: 'space-between',
   },
+
   action: {
     position: 'absolute',
     bottom: 0,
@@ -183,18 +241,47 @@ const styles = StyleSheet.create({
     paddingBottom: Platform.OS === 'ios' ? 33 : 16,
     width: Dimensions.get('window').width,
   },
+
   prev: {
     flex: 1,
     position: 'absolute',
     height: Dimensions.get('window').height,
     left: 0,
     width: 65,
   },
+
   next: {
     flex: 1,
     position: 'absolute',
     height: Dimensions.get('window').height,
     right: 0,
     width: 65,
   },
+
+  tcText: {
+    color: '#64748B',
+    fontFamily: 'AeonikRegular',
+    fontWeight: '600',
+    fontSize: adjustFontSizeForIOS(11, 2),
+    lineHeight: 17,
+  },
+
+  boldTcText: {
+    color: '#64748B',
+    fontFamily: 'AeonikBold',
+    fontWeight: '700',
+    fontSize: adjustFontSizeForIOS(11, 2),
+    lineHeight: 17,
+  },
+
+  closeIcon: {
+    alignItems: 'flex-end',
+    paddingHorizontal: 10,
+  },
+
+  tcWrapper: {
+    textAlign: 'center',
+    marginTop: 13,
+    marginHorizontal: 30,
+  },
 });

app/(onboarding)/step1.tsx

@@ -12,10 +12,10 @@ const Step1 = () => {
       image={image}
       firstArc={arc}
       secondArc={arc1}
-      title="DeFi made easy"
+      title="Discover DeFi strategies easily"
       subtitle="Earn more with your money, securely"
-      containerStyle={{ backgroundColor: '#4691FE' }}
-      imageStyle={{ left: 6 }}
+      containerStyle={{ backgroundColor: '#FFF' }}
+      imageStyle={{ left: '24%' }}
       firstArcStyle={styles.firstArc}
       secondArcStyle={styles.secondArc}
     />
@@ -26,9 +26,9 @@ export default Step1;
 
 const styles = StyleSheet.create({
   firstArc: {
-    height: 352,
+    height: 320,
     left: -57,
-    top: 82,
+    top: 250,
   },
 
   secondArc: {

app/(onboarding)/step2.tsx

@@ -4,16 +4,16 @@ import { LQDOnboardingStep } from '@/components/onboarding';
 
 const Step2 = () => {
   const image = require('../../assets/images/onboarding2.png');
-  const arc = require('../../assets/images/onboardingStep2Arc.png');
-  const arc1 = require('../../assets/images/onboardingStep2Arc1.png');
+  const arc = require('../../assets/images/onboardingStep1Arc.png');
+  const arc1 = require('../../assets/images/onboardingStep1Arc1.png');
 
   return (
     <LQDOnboardingStep
       image={image}
-      title="Secured by smart accounts"
+      title="Start earning with one click"
       subtitle="Zero gas fees, one click transactions secured with your biometrics"
-      containerStyle={{ backgroundColor: '#FF4C61' }}
-      imageStyle={{ left: '25%' }}
+      containerStyle={{ backgroundColor: '#FFF' }}
+      imageStyle={{ left: '24%' }}
       firstArc={arc}
       firstArcStyle={styles.firstArc}
       secondArc={arc1}
@@ -26,14 +26,14 @@ export default Step2;
 
 const styles = StyleSheet.create({
   firstArc: {
-    height: 352,
-    left: -68,
-    top: 144,
+    height: 320,
+    left: -57,
+    top: 250,
   },
 
   secondArc: {
     height: 301,
-    right: -87,
-    bottom: 137,
+    right: -66,
+    bottom: 155,
   },
 });

app/(onboarding)/step3.tsx

@@ -3,17 +3,21 @@ import { StyleSheet } from 'react-native';
 import { LQDOnboardingStep } from '@/components/onboarding';
 
 const Step3 = () => {
-  const image = require('../../assets/images/onboarding3.png');
-  const arc = require('../../assets/images/onboardingStep3Arc.png');
-  const arc1 = require('../../assets/images/onboardingStep3Arc1.png');
+  const image = require('../../assets/images/onboarding2.png');
+  // const arc = require('../../assets/images/onboardingStep3Arc.png');
+  // const arc1 = require('../../assets/images/onboardingStep3Arc1.png');
+
+  const arc = require('../../assets/images/onboardingStep1Arc.png');
+  const arc1 = require('../../assets/images/onboardingStep1Arc1.png');
 
   return (
     <LQDOnboardingStep
       image={image}
-      title="All things Liquidity, in one place"
+      title="Monitor your positions "
       subtitle="One app, one account, multiple protocols."
-      containerStyle={{ backgroundColor: '#B14DFF' }}
+      containerStyle={{ backgroundColor: '#FFF' }}
       firstArc={arc}
+      imageStyle={{ left: '24%' }}
       firstArcStyle={styles.firstArc}
       secondArc={arc1}
       secondArcStyle={styles.secondArc}
@@ -25,14 +29,14 @@ export default Step3;
 
 const styles = StyleSheet.create({
   firstArc: {
-    height: 352,
-    left: -48,
-    top: 218,
+    height: 320,
+    left: -57,
+    top: 250,
   },
 
   secondArc: {
     height: 301,
-    right: -64,
-    bottom: 104,
+    right: -66,
+    bottom: 155,
   },
 });

app/(onboarding)/step4.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+
+import { LQDOnboardingStep } from '@/components/onboarding';
+
+const Step4 = () => {
+  const image = require('../../assets/images/onboarding3.png');
+  const arc = require('../../assets/images/onboardingStep1Arc.png');
+  const arc1 = require('../../assets/images/onboardingStep1Arc1.png');
+
+  return (
+    <LQDOnboardingStep
+      image={image}
+      title="Explore top Strategies"
+      subtitle="One app, one account, multiple protocols."
+      containerStyle={{ backgroundColor: '#FFF' }}
+      firstArc={arc}
+      imageStyle={{ left: '24%' }}
+      firstArcStyle={styles.firstArc}
+      secondArc={arc1}
+      secondArcStyle={styles.secondArc}
+    />
+  );
+};
+
+export default Step4;
+
+const styles = StyleSheet.create({
+  firstArc: {
+    height: 320,
+    left: -57,
+    top: 250,
+  },
+
+  secondArc: {
+    height: 301,
+    right: -66,
+    bottom: 155,
+  },
+});

app/(portfolio)/_layout.tsx

@@ -0,0 +1,24 @@
+import { Stack } from 'expo-router';
+import { LQDStackHeader } from '@/components';
+
+const PortfolioStack = () => {
+  return (
+    <Stack
+      screenOptions={{
+        header: (props) => <LQDStackHeader {...props} style={{ paddingTop: 34 }} />,
+        headerShown: true,
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          header: (props) => <LQDStackHeader {...props} style={{ paddingTop: 60 }} hasTitle />,
+          headerShown: true,
+          headerTitle: 'Portfolio',
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default PortfolioStack;