powered by flux

modals corrections
open sync if needed

src/components/AddressDetails/AddressDetails.tsx

@@ -115,6 +115,7 @@ const AddressDetails = (props: { actionStatus: (status: boolean) => void }) => {
     >
       <ScrollView
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/components/Authentication/Authentication.tsx

@@ -128,6 +128,7 @@ const Authentication = (props: {
         enableOnAndroid={true}
         extraScrollHeight={20}
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/components/HelpSection/HelpSection.tsx

@@ -8,7 +8,6 @@ import {
   Linking,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import PoweredByFlux from '../PoweredByFlux/PoweredByFlux';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../hooks';
 
@@ -45,6 +44,7 @@ const HelpSection = (props: { actionStatus: (status: boolean) => void }) => {
     >
       <ScrollView
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,
@@ -102,7 +102,6 @@ const HelpSection = (props: { actionStatus: (status: boolean) => void }) => {
           </TouchableOpacity>
         </View>
         <View style={[Layout.justifyContentEnd]}>
-          <PoweredByFlux />
           <TouchableOpacity
             style={[
               Common.button.outlineRounded,

src/components/ManualInput/ManualInput.tsx

@@ -41,6 +41,7 @@ const ManualInput = (props: { actionStatus: (data: string) => void }) => {
       <KeyboardAwareScrollView
         extraScrollHeight={20}
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/components/PoweredByFlux/PoweredByFlux.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, Linking } from 'react-native';
-import { useTranslation } from 'react-i18next';
+import { View, TouchableOpacity, Linking, Image } from 'react-native';
+// import { useDispatch } from 'react-redux';
+// import { changeTheme, ThemeState } from '../../store/theme';
 import { useTheme } from '../../hooks';
 
 function PoweredByFlux() {
-  const { t } = useTranslation(['common']);
-  const { Fonts, Layout } = useTheme();
+  const { darkMode: isDark, Images, Layout, NavigationColors } = useTheme();
 
   const openFlux = () => {
     Linking.openURL('https://runonflux.io');
   };
 
+  // const onChangeTheme = ({ theme, darkMode }: Partial<ThemeState>) => {
+  //   dispatch(changeTheme({ theme, darkMode }));
+  // };
+  // const dispatch = useDispatch();
+
   return (
     <>
       <View
@@ -21,13 +26,31 @@ function PoweredByFlux() {
           Layout.justifyContentCenter,
           Layout.alignItemsCenter,
           Layout.row,
+          Layout.absolute,
+          Layout.bottom0,
+          {
+            backgroundColor: NavigationColors.background,
+            padding: 8,
+            paddingBottom: 12,
+            shadowColor: isDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)',
+            shadowOpacity: 0.5,
+            shadowRadius: 7,
+            shadowOffset: {
+              height: 5,
+              width: 5,
+            },
+            elevation: 5,
+          },
         ]}
       >
-        <Text style={[Fonts.textSmall]}>{t('common:powered_by')} </Text>
         <TouchableOpacity onPressIn={() => openFlux()}>
-          <Text style={[Fonts.textSmall, Fonts.textBluePrimary]}>
-            {t('common:flux')}
-          </Text>
+          <Image
+            testID={'powered-by-flux-img'}
+            style={{ height: 18, width: 128 }}
+            source={
+              isDark ? Images.ssp.poweredByLight : Images.ssp.poweredByDark
+            }
+          />
         </TouchableOpacity>
       </View>
     </>

src/components/SSPKeyDetails/SSKeyDetails.tsx

@@ -70,6 +70,7 @@ const SSPKeyDetails = (props: { actionStatus: (status: boolean) => void }) => {
     >
       <ScrollView
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/components/SettingsSection/SettingsSection.tsx

@@ -126,6 +126,7 @@ const SettingsSection = (props: {
         enableOnAndroid={true}
         extraScrollHeight={20}
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/components/SyncNeeded/SyncNeeded.tsx

@@ -31,6 +31,7 @@ const SyncNeeded = (props: { actionStatus: (status: string) => void }) => {
     >
       <ScrollView
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/components/SyncSuccess/SyncSuccess.tsx

@@ -80,6 +80,7 @@ const SyncSuccess = (props: {
     >
       <ScrollView
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/components/TxSent/TxSent.tsx

@@ -43,6 +43,7 @@ const TxSent = (props: {
     >
       <ScrollView
         style={[Layout.fill, Common.modalBackdrop]}
+        contentInset={{ bottom: 80 }}
         contentContainerStyle={[
           Gutters.smallBPadding,
           Layout.scrollSpaceBetween,

src/screens/Create/Create.tsx

@@ -35,6 +35,7 @@ import { setInitialStateForAllChains } from '../../store';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 
 import Divider from '../../components/Divider/Divider';
+import PoweredByFlux from '../../components/PoweredByFlux/PoweredByFlux';
 
 type Props = {
   navigation: any;
@@ -242,7 +243,7 @@ function Create({ navigation }: Props) {
           Layout.fullWidth,
           Layout.justifyContentCenter,
           Layout.alignItemsCenter,
-          Gutters.regularBMargin,
+          Gutters.largeBMargin,
         ]}
       >
         <Image
@@ -340,6 +341,7 @@ function Create({ navigation }: Props) {
       >
         <ScrollView
           style={[Layout.fill, Common.modalBackdrop]}
+          contentInset={{ bottom: 80 }}
           contentContainerStyle={[
             Gutters.smallBPadding,
             Layout.scrollSpaceBetween,
@@ -457,6 +459,7 @@ function Create({ navigation }: Props) {
         </ScrollView>
         <Toast />
       </Modal>
+      <PoweredByFlux />
     </KeyboardAwareScrollView>
   );
 }

src/screens/Home/Home.tsx

@@ -628,6 +628,8 @@ function Home({ navigation }: Props) {
         );
         console.log('result', result.data);
       } else {
+        // here open sync needed modal
+        setSyncNeededModalOpen(true);
         console.log('no wallet synced yet');
       }
     } catch (error) {

src/screens/Restore/Restore.tsx

@@ -32,6 +32,7 @@ import { setInitialStateForAllChains } from '../../store';
 import { useAppSelector, useAppDispatch } from '../../hooks';
 
 import Divider from '../../components/Divider/Divider';
+import PoweredByFlux from '../../components/PoweredByFlux/PoweredByFlux';
 
 type Props = {
   navigation: any;
@@ -261,6 +262,7 @@ function Restore({ navigation }: Props) {
           Layout.fullWidth,
           Layout.justifyContentCenter,
           Layout.alignItemsCenter,
+          Gutters.largeBMargin,
         ]}
       >
         <Image
@@ -369,6 +371,7 @@ function Restore({ navigation }: Props) {
       >
         <ScrollView
           style={[Layout.fill, Common.modalBackdrop]}
+          contentInset={{ bottom: 80 }}
           contentContainerStyle={[
             Gutters.smallBPadding,
             Layout.scrollSpaceBetween,
@@ -486,6 +489,7 @@ function Restore({ navigation }: Props) {
         </ScrollView>
         <Toast />
       </Modal>
+      <PoweredByFlux />
     </KeyboardAwareScrollView>
   );
 }

src/screens/Welcome/Welcome.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, Text, TouchableOpacity, ScrollView, Image } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../hooks';
-import PoweredByFlux from 'ssp-key/src/components/PoweredByFlux/PoweredByFlux';
+import PoweredByFlux from '../../components/PoweredByFlux/PoweredByFlux';
 
 type Props = {
   navigation: any;
@@ -64,9 +64,7 @@ function Welcome({ navigation }: Props) {
           </Text>
         </TouchableOpacity>
       </View>
-      <View style={[Layout.absolute, Layout.bottom0, Gutters.tinyBMargin]}>
-        <PoweredByFlux />
-      </View>
+      <PoweredByFlux />
     </ScrollView>
   );
 }

src/theme/Images.ts

@@ -7,6 +7,8 @@ export default function ({}: ThemeVariables) {
       logoWhite: require('../assets/ssp-logo-white.png'),
       logoTextBlack: require('../assets/ssp-logo-text-black.png'),
       logoTextWhite: require('../assets/ssp-logo-text-white.png'),
+      poweredByDark: require('../assets/powered_by_dark.png'),
+      poweredByLight: require('../assets/powered_by_light.png'),
     },
   };
 }