diff --git a/App.tsx b/App.tsx index 4af4424..aabf3c9 100644 --- a/App.tsx +++ b/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(); diff --git a/app.json b/app.json index a2854a9..3422899 100644 --- a/app.json +++ b/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" + } + ] ] } } diff --git a/package.json b/package.json index 5eab614..1cde809 100644 --- a/package.json +++ b/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", diff --git a/src/components/index.ts b/src/components/index.ts index 9d32389..f3d37c0 100644 --- a/src/components/index.ts +++ b/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, diff --git a/src/components/limited-width-container/index.spec.tsx b/src/components/limited-width-container/index.spec.tsx new file mode 100644 index 0000000..2e93c3e --- /dev/null +++ b/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(); +}); diff --git a/src/components/limited-width-container/index.tsx b/src/components/limited-width-container/index.tsx new file mode 100644 index 0000000..fc12702 --- /dev/null +++ b/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>; +} diff --git a/src/pages/settings-page/styles.ts b/src/components/limited-width-container/styles.ts similarity index 78% rename from src/pages/settings-page/styles.ts rename to src/components/limited-width-container/styles.ts index 929e8a8..6368d0f 100644 --- a/src/pages/settings-page/styles.ts +++ b/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; `; diff --git a/src/components/limited-width-container/types.ts b/src/components/limited-width-container/types.ts new file mode 100644 index 0000000..dd19351 --- /dev/null +++ b/src/components/limited-width-container/types.ts @@ -0,0 +1,5 @@ +import React from 'react'; + +export interface LimitedWidthContainerProps { + children: React.ReactNode | React.ReactNode[]; +} diff --git a/src/pages/bitcoin-data-page/styles.ts b/src/pages/bitcoin-data-page/styles.ts index 7107c44..5167601 100644 --- a/src/pages/bitcoin-data-page/styles.ts +++ b/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; `; diff --git a/src/pages/home-page/components/crypto-card-large/styles.ts b/src/pages/home-page/components/crypto-card-large/styles.ts index 7fc9217..fdebbd2 100644 --- a/src/pages/home-page/components/crypto-card-large/styles.ts +++ b/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}; diff --git a/src/pages/home-page/index.tsx b/src/pages/home-page/index.tsx index 5f476bc..f694e69 100644 --- a/src/pages/home-page/index.tsx +++ b/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> ); } diff --git a/src/pages/language-page/index.tsx b/src/pages/language-page/index.tsx index 86477d6..cf7ffd6 100644 --- a/src/pages/language-page/index.tsx +++ b/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> ); diff --git a/src/pages/public-key-page/index.tsx b/src/pages/public-key-page/index.tsx index 39f1a1f..f52ae3f 100644 --- a/src/pages/public-key-page/index.tsx +++ b/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> ); } diff --git a/src/pages/settings-page/index.tsx b/src/pages/settings-page/index.tsx index 902966a..59e9846 100644 --- a/src/pages/settings-page/index.tsx +++ b/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} diff --git a/src/pages/support-us-page/index.tsx b/src/pages/support-us-page/index.tsx index 67ea7b3..4874251 100644 --- a/src/pages/support-us-page/index.tsx +++ b/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> ); } diff --git a/src/pages/terms-page/index.tsx b/src/pages/terms-page/index.tsx index 7394b48..c740dda 100644 --- a/src/pages/terms-page/index.tsx +++ b/src/pages/terms-page/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ScrollView, Text } from '@/components'; +import { LimitedWidthContainer, ScrollView, Text } from '@/components'; import { themes } from '@/themes'; export function TermsPage() { @@ -8,31 +8,33 @@ export function TermsPage() { return ( <ScrollView> - <Text size="XL" weight="bold"> - 1 - Security - </Text> - <Text size="M" color={colors.light_grey} marginB={spaces.space_15}> - 1.1 - We do not store your public keys in databases, they are encrypted and stored on your - device; - </Text> - <Text size="M" color={colors.light_grey} marginB={spaces.space_25}> - 1.2 - All information we collect is stored only on your device, we do not store it in - databases. - </Text> - <Text size="XL" weight="bold"> - 2 - What we collect from you - </Text> - <Text size="M" color={colors.light_grey} marginB={spaces.space_25}> - 2.1 - We only collect the country in which you are accessing so that we know precisely which - language and currency to select. - </Text> - <Text size="XL" weight="bold"> - 3 - How we share your information - </Text> - <Text size="M" color={colors.light_grey} marginB={spaces.space_25}> - 3.1 - We only share your public key with the {'"tatum.com"'} library so that we can collect - your balance information and transactions on the blockchain. - </Text> + <LimitedWidthContainer> + <Text size="XL" weight="bold"> + 1 - Security + </Text> + <Text size="M" color={colors.light_grey} marginB={spaces.space_15}> + 1.1 - We do not store your public keys in databases, they are encrypted and stored on your + device; + </Text> + <Text size="M" color={colors.light_grey} marginB={spaces.space_25}> + 1.2 - All information we collect is stored only on your device, we do not store it in + databases. + </Text> + <Text size="XL" weight="bold"> + 2 - What we collect from you + </Text> + <Text size="M" color={colors.light_grey} marginB={spaces.space_25}> + 2.1 - We only collect the country in which you are accessing so that we know precisely + which language and currency to select. + </Text> + <Text size="XL" weight="bold"> + 3 - How we share your information + </Text> + <Text size="M" color={colors.light_grey} marginB={spaces.space_25}> + 3.1 - We only share your public key with the {'"tatum.com"'} library so that we can + collect your balance information and transactions on the blockchain. + </Text> + </LimitedWidthContainer> </ScrollView> ); } diff --git a/src/pages/transaction-page/index.tsx b/src/pages/transaction-page/index.tsx index ffff778..5868ed6 100644 --- a/src/pages/transaction-page/index.tsx +++ b/src/pages/transaction-page/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { heightPercentageToDP as hp } from 'react-native-responsive-screen'; -import { ScrollView, TitleSubtitle } from '@/components'; +import { LimitedWidthContainer, ScrollView, TitleSubtitle } from '@/components'; import { useFormatDate } from '@/hooks'; import { RootStackParamListProps } from '@/routes/types'; import { useAppSettings } from '@/stores'; @@ -38,12 +38,9 @@ export function TransactionPage() { return ( <ScrollView> {transactionsData.map((item, index) => ( - <TitleSubtitle - key={index} - title={item.title} - subTitle={item.subTitle} - marginB={MARGIN_BOTTOM} - /> + <LimitedWidthContainer key={index}> + <TitleSubtitle title={item.title} subTitle={item.subTitle} marginB={MARGIN_BOTTOM} /> + </LimitedWidthContainer> ))} </ScrollView> ); diff --git a/src/themes/index.ts b/src/themes/index.ts index b920895..80668d0 100644 --- a/src/themes/index.ts +++ b/src/themes/index.ts @@ -2,7 +2,7 @@ import { DefaultTheme } from 'styled-components'; export const themes: DefaultTheme = { width: { - max_width: '850px', + max_width: '800px', }, border_radius: { radius_5: '5px', diff --git a/yarn.lock b/yarn.lock index 6d095c4..a15efd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4686,6 +4686,11 @@ expo-network@~5.4.0: resolved "https://registry.yarnpkg.com/expo-network/-/expo-network-5.4.0.tgz#4eddde3e54a80b46c7cd2e4ce22a98e61aa97468" integrity sha512-6Hdm6CRmt7KpEYSTp9Q0fH1V63Y3tLlgkZfJBqJHksxEP/ooOjBLsK8M09q+FiWsStByI/PKj6NO86+uymz5ig== +expo-screen-orientation@~6.0.5: + version "6.0.5" + resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-6.0.5.tgz#4fcac69c641522c7e658d4fb20b22de82d732aee" + integrity sha512-aOOuuQkxNHNxSzfEO037jnD0zYiwBVTvuXeFy/0KntFmuqWmZGaFmFks1uTA2+0wKlbA049kVjkBnA1peybmHQ== + expo-secure-store@~12.3.1: version "12.3.1" resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-12.3.1.tgz#7e5ba94f6e7374f132108c9feb5cc811568f3db6"