(7) feat: add disclaimer screen (#347)

* feat: add NetworkSettingsDisclaimerScreen

* chore: add copyright to disclaimer screen file

* refactor: apply warning styles over view and text

- In addition, extract message to its own variable
  `riskDisclaimerContentText`.

* fix: typo on disclaimer names

* fix: typo on disclaimer message

* lint: resolve lint issues

src/screens/NetworkSettings/NetworkSettingsDisclaimerScreen.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+} from 'react-native';
+import { t } from 'ttag';
+import HathorHeader from '../../components/HathorHeader';
+import NewHathorButton from '../../components/NewHathorButton';
+import { COLORS } from '../../styles/themes';
+
+const riskDisclaimerTitleText = t`Risk Disclaimer`.toUpperCase();
+const riskDisclaimerContentText = t`Do not change this unless you know what you are doing, and under no circumstances change these settings based on someone else suggestion, as this can potentially make you susceptible to fraudulent schemes.`;
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'space-between',
+    padding: 16,
+    paddingBottom: 48,
+  },
+  warningContainer: {
+    borderRadius: 8,
+    backgroundColor: 'hsl(47, 100%, 86%)', // warning yellow
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: 'hsl(47, 100%, 70%)', // warning yellow - 16% light
+    shadowColor: COLORS.textColor,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2, // Elevation for Android (optional)
+  },
+  warningMessage: {
+    fontSize: 16,
+    color: 'hsl(47, 100%, 22%)', // warning yellow - 64% light
+    padding: 16,
+    paddingBottom: 48,
+  },
+  buttonContainer: {
+    alignSelf: 'stretch',
+  },
+});
+
+export const NetworkSettingsDisclaimerNav = Symbol('NetworkSettingsDisclaimer').toString();
+
+export function NetworkSettingsDisclaimerScreen({ navigation }) {
+  return (
+    <View style={style.container}>
+      <HathorHeader
+        title={riskDisclaimerTitleText}
+        onBackPress={() => navigation.goBack()}
+      />
+      <View style={style.content}>
+        <View style={style.warningContainer}>
+          <Text style={style.warningMessage}>{riskDisclaimerContentText}</Text>
+        </View>
+        <View style={style.buttonContainer}>
+          <NewHathorButton
+            onPress={() => navigation.navigate('Settings')}
+            title={t`I understand`}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

src/screens/NetworkSettings/NetworkSettingsFlowStack.js

@@ -1,15 +1,21 @@
 import { createStackNavigator } from '@react-navigation/stack';
+import { NetworkSettingsDisclaimerNav, NetworkSettingsDisclaimerScreen } from './NetworkSettingsDisclaimerScreen';
 
 export const NetworkSettingsFlowNav = Symbol('NetworkSettingsFlowStack').toString();
 
 export const NetworkSettingsFlowStack = ({ navigation }) => {
   const FlowStack = createStackNavigator();
   return (
     <FlowStack.Navigator
-      initialRouteName='NetworkSettingsDisclaimer'
+      initialRouteName={NetworkSettingsDisclaimerNav}
       screenOptions={{
         headerShown: false,
       }}
-    />
+    >
+      <FlowStack.Screen
+        name={NetworkSettingsDisclaimerNav}
+        component={NetworkSettingsDisclaimerScreen}
+      />
+    </FlowStack.Navigator>
   );
 };