Merge pull request #4 from cyberkaidev/feature/adjustment-to-tablet-l…

…ayout

adjustment to tablet layout

App.tsx

@@ -3,7 +3,9 @@ import 'react-native-reanimated';
 import 'react-native-gesture-handler';
 
 import { DarkTheme, NavigationContainer } from '@react-navigation/native';
+import * as Device from 'expo-device';
 import { useFonts } from 'expo-font';
+import * as ScreenOrientation from 'expo-screen-orientation';
 import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 import * as React from 'react';
@@ -24,8 +26,19 @@ export default function App() {
 
 	React.useEffect(() => {
 		initializeAppSettings();
+		changeScreenOrientation();
 	}, []);
 
+	async function changeScreenOrientation() {
+		const deviceType = await Device.getDeviceTypeAsync();
+		const isTablet = Device.DeviceType[deviceType] == 'TABLET';
+		if (isTablet) {
+			await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
+		} else {
+			await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
+		}
+	}
+
 	const onLayoutRootView = React.useCallback(async () => {
 		if (fontsLoaded) {
 			await SplashScreen.hideAsync();

app.json

@@ -3,7 +3,7 @@
 		"name": "Wallet you",
 		"slug": "wallet-you",
 		"owner": "cyberkaidev",
-		"version": "1.3.1",
+		"version": "1.3.3",
 		"orientation": "portrait",
 		"icon": "./assets/images/icon.png",
 		"userInterfaceStyle": "dark",
@@ -35,7 +35,7 @@
 			},
 			"permissions": ["android.permission.USE_BIOMETRIC", "android.permission.USE_FINGERPRINT"],
 			"package": "com.cyberkaidev.walletyou",
-			"versionCode": "5"
+			"versionCode": "7"
 		},
 		"web": {
 			"favicon": "./assets/images/favicon.ico"
@@ -47,7 +47,13 @@
 					"faceIDPermission": "Allow $(PRODUCT_NAME) to use Face ID."
 				}
 			],
-			"expo-localization"
+			"expo-localization",
+			[
+				"expo-screen-orientation",
+				{
+					"initialOrientation": "DEFAULT"
+				}
+			]
 		]
 	}
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wallet-you",
-	"version": "1.3.1",
+	"version": "1.3.3",
 	"main": "node_modules/expo/AppEntry.js",
 	"author": "cyberkaidev",
 	"license": "MIT",
@@ -42,6 +42,7 @@
 		"expo-local-authentication": "~13.4.1",
 		"expo-localization": "~14.3.0",
 		"expo-network": "~5.4.0",
+		"expo-screen-orientation": "~6.0.5",
 		"expo-secure-store": "~12.3.1",
 		"expo-splash-screen": "~0.20.5",
 		"expo-status-bar": "~1.6.0",

src/components/index.ts

@@ -5,6 +5,7 @@ import { ButtonTitleShape } from './button-title-shape';
 import { ChartBitcoin } from './chart-bitcoin';
 import { CheckBoxMessage } from './check-box-message';
 import { HeaderSwiperOptions } from './header-swiper-options';
+import { LimitedWidthContainer } from './limited-width-container';
 import { PriceBitcoin } from './price-bitcoin';
 import { ScrollView } from './scroll-view';
 import { ScrollViewHeader } from './scroll-view-header';
@@ -24,6 +25,7 @@ export {
 	ChartBitcoin,
 	CheckBoxMessage,
 	HeaderSwiperOptions,
+	LimitedWidthContainer,
 	PriceBitcoin,
 	ScrollView,
 	ScrollViewHeader,

src/components/limited-width-container/index.spec.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react-native';
+import React from 'react';
+
+import { LimitedWidthContainer, Text } from '@/components';
+
+test('Render component', () => {
+	const configTest = {
+		title: 'Hello World',
+		id: 'idLimitedWidth',
+	};
+
+	const { getByText, getByTestId } = render(
+		<LimitedWidthContainer>
+			<Text>{configTest.title}</Text>
+		</LimitedWidthContainer>,
+	);
+
+	expect(getByText(configTest.title)).toBeTruthy();
+	expect(getByTestId(configTest.id)).toBeTruthy();
+});

src/components/limited-width-container/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { WidthContainer } from './styles';
+import { LimitedWidthContainerProps } from './types';
+
+export function LimitedWidthContainer({ children }: LimitedWidthContainerProps) {
+	return <WidthContainer testID="idLimitedWidth">{children}</WidthContainer>;
+}

src/pages/settings-page/styles.ts → src/components/limited-width-container/styles.ts

@@ -2,8 +2,8 @@ import styled from 'styled-components/native';
 
 import { themes } from '@/themes';
 
-export const ContainerVersion = styled.View`
-	width: 100%;
+export const WidthContainer = styled.View`
 	max-width: ${themes.width.max_width};
+	width: 100%;
 	align-self: center;
 `;

src/components/limited-width-container/types.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export interface LimitedWidthContainerProps {
+	children: React.ReactNode | React.ReactNode[];
+}

src/pages/bitcoin-data-page/styles.ts

@@ -4,4 +4,7 @@ import { themes } from '@/themes';
 
 export const PaddingContainer = styled.View`
 	padding: 0 ${themes.spaces.space_15};
+	max-width: ${themes.width.max_width};
+	width: 100%;
+	align-self: center;
 `;

src/pages/home-page/components/crypto-card-large/styles.ts

@@ -3,12 +3,10 @@ import styled from 'styled-components/native';
 
 import { themes } from '@/themes';
 
-const { colors, border_radius, spaces, width } = themes;
+const { colors, border_radius, spaces } = themes;
 
 export const CryptoCardLargeContainer = styled.View`
-	width: 100%;
-	max-width: ${width.max_width};
-	align-self: center;
+	width: auto;
 	height: ${hp('28%')}px;
 	max-height: 450px;
 	border-radius: ${border_radius.radius_10};

src/pages/home-page/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ScrollViewHeader, TransactionList } from '@/components';
+import { LimitedWidthContainer, ScrollViewHeader, TransactionList } from '@/components';
 import { calculateBalance } from '@/functions';
 import { useFormatCurrency } from '@/hooks';
 import { getBitcoinBalance } from '@/services';
@@ -26,8 +26,15 @@ export function HomePage() {
 
 	return (
 		<ScrollViewHeader headerTitle={t('my-wallet')} refreshControl={() => onRefresh()}>
-			<CryptoCardLarge type="bitcoin" price={currencyFormated} balance={balance} status={status} />
-			<TransactionList />
+			<LimitedWidthContainer>
+				<CryptoCardLarge
+					type="bitcoin"
+					price={currencyFormated}
+					balance={balance}
+					status={status}
+				/>
+				<TransactionList />
+			</LimitedWidthContainer>
 		</ScrollViewHeader>
 	);
 }

src/pages/language-page/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { HeaderSwiperOptions, ScrollView, SelectList } from '@/components';
+import { HeaderSwiperOptions, LimitedWidthContainer, ScrollView, SelectList } from '@/components';
 import { useAppSettings } from '@/stores';
 import { UseAppSettingsProps } from '@/stores/use-app-settings/types';
 
@@ -25,11 +25,13 @@ export function LanguagePage() {
 				disableAction={selected === language}
 			/>
 			<ScrollView>
-				<SelectList
-					data={languages}
-					selected={selected}
-					onSelected={arg => setSelected(arg as UseAppSettingsProps['language'])}
-				/>
+				<LimitedWidthContainer>
+					<SelectList
+						data={languages}
+						selected={selected}
+						onSelected={arg => setSelected(arg as UseAppSettingsProps['language'])}
+					/>
+				</LimitedWidthContainer>
 			</ScrollView>
 		</React.Fragment>
 	);

src/pages/public-key-page/index.tsx

@@ -2,7 +2,7 @@ import * as Clipboard from 'expo-clipboard';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ButtonTitleGhost, ScrollView, TitleSubtitle } from '@/components';
+import { ButtonTitleGhost, LimitedWidthContainer, ScrollView, TitleSubtitle } from '@/components';
 import { useUserData } from '@/stores';
 import { themes } from '@/themes';
 
@@ -26,13 +26,19 @@ export function PublicKeyPage() {
 
 	return (
 		<ScrollView>
-			<TitleSubtitle title={t('your-public-key')} subTitle={publicKey} marginB={spaces.space_15} />
-			<ButtonTitleGhost
-				title={copy.isCopied ? t('copied') : t('copy-address')}
-				loading={copy.isLoading}
-				size="small"
-				onPress={copyToClipboard}
-			/>
+			<LimitedWidthContainer>
+				<TitleSubtitle
+					title={t('your-public-key')}
+					subTitle={publicKey}
+					marginB={spaces.space_15}
+				/>
+				<ButtonTitleGhost
+					title={copy.isCopied ? t('copied') : t('copy-address')}
+					loading={copy.isLoading}
+					size="small"
+					onPress={copyToClipboard}
+				/>
+			</LimitedWidthContainer>
 		</ScrollView>
 	);
 }

src/pages/settings-page/index.tsx

@@ -5,15 +5,19 @@ import * as SecureStore from 'expo-secure-store';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ActionList, AlertModal, ScrollViewHeader, Text } from '@/components';
+import {
+	ActionList,
+	AlertModal,
+	LimitedWidthContainer,
+	ScrollViewHeader,
+	Text,
+} from '@/components';
 import { initializeAppSettings } from '@/functions';
 import { storageKeys } from '@/helpers';
 import { RootStackParamListProps } from '@/routes/types';
 import { useUserData } from '@/stores';
 import { themes } from '@/themes';
 
-import { ContainerVersion } from './styles';
-
 export function SettingsPage() {
 	const { t } = useTranslation();
 
@@ -69,12 +73,12 @@ export function SettingsPage() {
 
 	return (
 		<ScrollViewHeader headerTitle={t('settings')}>
-			<ActionList list={settingsList} />
-			<ContainerVersion>
+			<LimitedWidthContainer>
+				<ActionList list={settingsList} />
 				<Text size="S" weight="bold" marginT={themes.spaces.space_25}>
 					v {Constants.expoConfig?.version != null ? Constants.expoConfig.version : '-'}
 				</Text>
-			</ContainerVersion>
+			</LimitedWidthContainer>
 			<AlertModal
 				title={t('do_you_really_want_to_leave')}
 				visible={showModal}

src/pages/support-us-page/index.tsx

@@ -2,7 +2,13 @@ import * as Clipboard from 'expo-clipboard';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ButtonTitleGhost, ScrollView, Text, TitleSubtitle } from '@/components';
+import {
+	ButtonTitleGhost,
+	LimitedWidthContainer,
+	ScrollView,
+	Text,
+	TitleSubtitle,
+} from '@/components';
 import { themes } from '@/themes';
 
 export function SupportUsPage() {
@@ -24,14 +30,20 @@ export function SupportUsPage() {
 
 	return (
 		<ScrollView>
-			<TitleSubtitle title={t('bitcoin-address')} subTitle={publicKey} marginB={spaces.space_15} />
-			<Text marginB={spaces.space_15}>{t('support-us-by-sending')}</Text>
-			<ButtonTitleGhost
-				title={copy.isCopied ? t('copied') : t('copy-address')}
-				loading={copy.isLoading}
-				size="small"
-				onPress={copyToClipboard}
-			/>
+			<LimitedWidthContainer>
+				<TitleSubtitle
+					title={t('bitcoin-address')}
+					subTitle={publicKey}
+					marginB={spaces.space_15}
+				/>
+				<Text marginB={spaces.space_15}>{t('support-us-by-sending')}</Text>
+				<ButtonTitleGhost
+					title={copy.isCopied ? t('copied') : t('copy-address')}
+					loading={copy.isLoading}
+					size="small"
+					onPress={copyToClipboard}
+				/>
+			</LimitedWidthContainer>
 		</ScrollView>
 	);
 }