diff --git a/jestSetup.js b/jestSetup.js
index 236d7f67e62..01ce11c5fc0 100644
--- a/jestSetup.js
+++ b/jestSetup.js
@@ -1,4 +1,5 @@
import { jest } from '@jest/globals'
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'
jest.useFakeTimers()
@@ -81,6 +82,8 @@ jest.mock('edge-login-ui-rn', () => ({
}
}))
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext)
+
jest.mock('react-native-share', () => 'RNShare')
jest.mock(
diff --git a/package.json b/package.json
index 17e8d4cd460..d1bfdecbff8 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
"process-nextick-args": "2.0.0",
"randombytes": "2.1.0",
"react-native-material-textfield": "0.16.1",
- "react-native-safe-area-view": "0.14.9",
"regenerator-runtime": "0.13.2",
"ripemd160": "2.0.2",
"ripple-binary-codec": "0.2.3",
@@ -137,7 +136,6 @@
"react-native-contacts": "^7.0.4",
"react-native-custom-tabs": "https://github.com/adminphoeniixx/react-native-custom-tabs#develop",
"react-native-device-info": "^8.7.1",
- "react-native-extra-dimensions-android": "^1.2.5",
"react-native-fast-image": "^8.5.11",
"react-native-flipper": "^0.143.0",
"react-native-fs": "^2.19.0",
@@ -157,7 +155,6 @@
"react-native-reanimated": "^2.8.0",
"react-native-safari-view": "^2.1.0",
"react-native-safe-area-context": "^4.5.0",
- "react-native-safe-area-view": "0.14.9",
"react-native-screens": "^3.19.0",
"react-native-share": "^7.1.2",
"react-native-smart-splash-screen": "^2.3.5",
@@ -200,7 +197,6 @@
"@types/prompts": "^2.0.14",
"@types/react-native": "0.67.1",
"@types/react-native-custom-tabs": "^0.1.2",
- "@types/react-native-extra-dimensions-android": "^1.2.0",
"@types/react-native-material-textfield": "^0.16.5",
"@types/react-native-safari-view": "^2.0.5",
"@types/react-native-vector-icons": "^6.4.12",
diff --git a/patches/react-native-safe-area-view+0.14.9.patch b/patches/react-native-safe-area-view+0.14.9.patch
deleted file mode 100644
index f37bdc1d847..00000000000
--- a/patches/react-native-safe-area-view+0.14.9.patch
+++ /dev/null
@@ -1,70 +0,0 @@
-diff --git a/node_modules/react-native-safe-area-view/index.d.ts b/node_modules/react-native-safe-area-view/index.d.ts
-index 4f689fb..9219d08 100644
---- a/node_modules/react-native-safe-area-view/index.d.ts
-+++ b/node_modules/react-native-safe-area-view/index.d.ts
-@@ -1,6 +1,7 @@
- import { ComponentClass } from 'react';
- import { ViewProperties } from 'react-native';
-
-+
- export type SafeAreaViewForceInsetValue = 'always' | 'never';
-
- export interface SafeAreaViewProps extends ViewProperties {
-@@ -29,4 +30,6 @@ export const withSafeArea:
(
- Component: React.ComponentType
- ) => React.ComponentType
;
-
-+export const isIPhoneX = boolean;
-+
- export default SafeAreaView;
-diff --git a/node_modules/react-native-safe-area-view/index.js b/node_modules/react-native-safe-area-view/index.js
-index a21ff41..96f97e9 100644
---- a/node_modules/react-native-safe-area-view/index.js
-+++ b/node_modules/react-native-safe-area-view/index.js
-@@ -15,6 +15,12 @@ const X_WIDTH = 375;
- const X_HEIGHT = 812;
- const XSMAX_WIDTH = 414;
- const XSMAX_HEIGHT = 896;
-+const IPHONE12_WIDTH = 390;
-+const IPHONE12_HEIGHT = 844;
-+const IPHONE12MAX_WIDTH = 428;
-+const IPHONE12MAX_HEIGHT = 926;
-+const IPHONE12MINI_WIDTH = 360;
-+const IPHONE12MINI_HEIGHT = 780;
- const PAD_WIDTH = 768;
- const PAD_HEIGHT = 1024;
- const IPADPRO11_WIDTH = 834;
-@@ -33,7 +39,7 @@ const { height: D_HEIGHT, width: D_WIDTH } = getResolvedDimensions();
- const PlatformConstants = Platform.constants || {};
- const { minor = 0 } = PlatformConstants.reactNativeVersion || {};
-
--const isIPhoneX = (() => {
-+export const isIPhoneX = (() => {
- if (Platform.OS === 'web') return false;
-
- return (
-@@ -41,7 +47,13 @@ const isIPhoneX = (() => {
- ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
- (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT))) ||
- ((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
-- (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
-+ (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT)) ||
-+ ((D_HEIGHT === IPHONE12_HEIGHT && D_WIDTH === IPHONE12_WIDTH) ||
-+ (D_HEIGHT === IPHONE12_WIDTH && D_WIDTH === IPHONE12_HEIGHT)) ||
-+ ((D_HEIGHT === IPHONE12MAX_HEIGHT && D_WIDTH === IPHONE12MAX_WIDTH) ||
-+ (D_HEIGHT === IPHONE12MAX_WIDTH && D_WIDTH === IPHONE12MAX_HEIGHT)) ||
-+ ((D_HEIGHT === IPHONE12MINI_HEIGHT && D_WIDTH === IPHONE12MINI_WIDTH) ||
-+ (D_HEIGHT === IPHONE12MINI_WIDTH && D_WIDTH === IPHONE12MINI_HEIGHT))
- );
- })();
-
-diff --git a/node_modules/react-native-safe-area-view/index.js.flow b/node_modules/react-native-safe-area-view/index.js.flow
-index 4c59929..a3274a2 100644
---- a/node_modules/react-native-safe-area-view/index.js.flow
-+++ b/node_modules/react-native-safe-area-view/index.js.flow
-@@ -27,3 +27,5 @@ declare export function getInset(
- value: 'horizontal' | 'right' | 'left' | 'vertical' | 'top' | 'bottom',
- isLandscape: boolean
- ): number
-+
-+declare export var isIPhoneX: boolean;
diff --git a/src/__tests__/components/BuyCrypto.test.tsx b/src/__tests__/components/BuyCrypto.test.tsx
index 4c9498a1a10..e171aa235f5 100644
--- a/src/__tests__/components/BuyCrypto.test.tsx
+++ b/src/__tests__/components/BuyCrypto.test.tsx
@@ -1,22 +1,19 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import renderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { BuyCrypto } from '../../components/themed/BuyCrypto'
-import { rootReducer } from '../../reducers/RootReducer'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('BuyCrypto', () => {
- const mockState: any = {
+ const mockState: FakeState = {
ui: {
settings: {
defaultIsoFiat: 'iso:DOLLA'
}
}
}
- const store = createStore(rootReducer, mockState)
it('should render with some props', () => {
const fakeWallet: any = {
@@ -25,9 +22,9 @@ describe('BuyCrypto', () => {
}
const actual = renderer.create(
-
+
-
+
)
expect(actual).toMatchSnapshot()
diff --git a/src/__tests__/components/CreateWalletSelectCryptoRow.test.tsx b/src/__tests__/components/CreateWalletSelectCryptoRow.test.tsx
index 08a80bae375..d96f6d81ac1 100644
--- a/src/__tests__/components/CreateWalletSelectCryptoRow.test.tsx
+++ b/src/__tests__/components/CreateWalletSelectCryptoRow.test.tsx
@@ -1,15 +1,13 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
import IonIcon from 'react-native-vector-icons/Ionicons'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CreateWalletSelectCryptoRow } from '../../components/themed/CreateWalletSelectCryptoRow'
-import { rootReducer } from '../../reducers/RootReducer'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('WalletListRow', () => {
- const mockState: any = {
+ const mockState: FakeState = {
core: {
account: {
currencyConfig: {
@@ -23,7 +21,6 @@ describe('WalletListRow', () => {
}
}
}
- const store = createStore(rootReducer, mockState)
it('should render with loading props', () => {
const pluginId = 'bitcoin'
@@ -32,9 +29,9 @@ describe('WalletListRow', () => {
const rightSide =
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/components/CurrencyIcon.test.tsx b/src/__tests__/components/CurrencyIcon.test.tsx
index 3839ebcb458..9201fe785e6 100644
--- a/src/__tests__/components/CurrencyIcon.test.tsx
+++ b/src/__tests__/components/CurrencyIcon.test.tsx
@@ -1,32 +1,28 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CryptoIcon } from '../../components/icons/CryptoIcon'
-import { rootReducer } from '../../reducers/RootReducer'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('CryptoIcon', () => {
- const mockState: any = {
+ const mockState: FakeState = {
core: {
account: {
currencyWallets: {
'332s0ds39f': {
- pluginId: 'bitcoin',
watch: () => {}
}
}
}
}
}
- const store = createStore(rootReducer, mockState)
it('should render with loading props', () => {
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/components/MenuTabs.test.tsx b/src/__tests__/components/MenuTabs.test.tsx
index 23112770513..753a791965a 100644
--- a/src/__tests__/components/MenuTabs.test.tsx
+++ b/src/__tests__/components/MenuTabs.test.tsx
@@ -1,19 +1,23 @@
import { describe, expect, it } from '@jest/globals'
-import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
import * as React from 'react'
-import { createRenderer } from 'react-test-renderer/shallow'
+import TestRenderer from 'react-test-renderer'
import { MenuTabs } from '../../components/themed/MenuTabs'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders } from '../../util/fake/FakeProviders'
describe('MenuTabs', () => {
it('should render with loading props', () => {
- const renderer = createRenderer()
-
- const props: BottomTabBarProps = { navigation: fakeNavigation, state: { index: 0, routes: [] } } as any
-
- const actual = renderer.render()
-
- expect(actual).toMatchSnapshot()
+ const renderer = TestRenderer.create(
+
+
+
+ )
+ expect(renderer.toJSON()).toMatchSnapshot()
})
})
diff --git a/src/__tests__/components/PromoCard.test.tsx b/src/__tests__/components/PromoCard.test.tsx
index de64a409ac4..ccb2b12acd0 100644
--- a/src/__tests__/components/PromoCard.test.tsx
+++ b/src/__tests__/components/PromoCard.test.tsx
@@ -1,13 +1,11 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import renderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { PromoCard } from '../../components/cards/PromoCard'
-import { rootReducer } from '../../reducers/RootReducer'
import { MessageTweak } from '../../types/TweakTypes'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('PromoCard', () => {
const fakeMessage: MessageTweak = {
@@ -16,27 +14,26 @@ describe('PromoCard', () => {
durationDays: 1
}
- const mockState: any = {
+ const mockState: FakeState = {
account: {
accountReferral: {
installerId: 'string',
currencyCodes: ['BTC'],
promotions: [],
ignoreAccountSwap: true,
- hiddenAccountMessages: ['messageId']
+ hiddenAccountMessages: { messageId: true }
},
referralCache: {
accountMessages: [fakeMessage]
}
}
}
- const store = createStore(rootReducer, mockState)
it('should render', () => {
const actual = renderer.create(
-
+
-
+
)
expect(actual).toMatchSnapshot()
diff --git a/src/__tests__/components/TransactionListRow.test.tsx b/src/__tests__/components/TransactionListRow.test.tsx
index 84a1fd90e18..2a06b75db53 100644
--- a/src/__tests__/components/TransactionListRow.test.tsx
+++ b/src/__tests__/components/TransactionListRow.test.tsx
@@ -1,12 +1,10 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { TransactionListRow } from '../../components/themed/TransactionListRow'
-import { rootReducer } from '../../reducers/RootReducer'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('TransactionListRow', () => {
it('should render with loading props', () => {
@@ -30,22 +28,21 @@ describe('TransactionListRow', () => {
fiatCurrencyCode: 'iso:USD'
}
- const mockStore: any = {
+ const mockStore: FakeState = {
core: {
account: {
currencyConfig: {
bitcoin: {
- allTokens: [],
+ allTokens: {},
currencyInfo
}
}
}
}
}
- const store = createStore(rootReducer, mockStore)
const renderer = TestRenderer.create(
-
+
{
ourReceiveAddresses: []
}}
/>
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/components/TransactionListTop.test.tsx b/src/__tests__/components/TransactionListTop.test.tsx
index ef4b6383e27..64b65f8e049 100644
--- a/src/__tests__/components/TransactionListTop.test.tsx
+++ b/src/__tests__/components/TransactionListTop.test.tsx
@@ -1,14 +1,11 @@
import { describe, expect, it } from '@jest/globals'
import { EdgeCurrencyInfo } from 'edge-core-js'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { applyMiddleware, createStore } from 'redux'
-import thunk from 'redux-thunk'
import { TransactionListTop } from '../../components/themed/TransactionListTop'
-import { rootReducer } from '../../reducers/RootReducer'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('TransactionListTop', () => {
const currencyInfo: EdgeCurrencyInfo = {
@@ -51,7 +48,7 @@ describe('TransactionListTop', () => {
watch() {}
}
- const fakeState: any = {
+ const fakeState: FakeState = {
core: {
account: {
currencyWallets: { '123': fakeWallet },
@@ -60,11 +57,9 @@ describe('TransactionListTop', () => {
}
}
- const store = createStore(rootReducer, fakeState, applyMiddleware(thunk))
-
it('should render', () => {
const renderer = TestRenderer.create(
-
+
{
onChangeSortingState={() => undefined}
onSearchTransaction={() => undefined}
/>
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/components/WalletListFooter.test.tsx b/src/__tests__/components/WalletListFooter.test.tsx
index 688bd4d1e19..b6bf859772c 100644
--- a/src/__tests__/components/WalletListFooter.test.tsx
+++ b/src/__tests__/components/WalletListFooter.test.tsx
@@ -1,21 +1,17 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { WalletListFooter } from '../../components/themed/WalletListFooter'
-import { rootReducer } from '../../reducers/RootReducer'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders } from '../../util/fake/FakeProviders'
describe('WalletListFooter', () => {
it('should render with loading props', () => {
- const store = createStore(rootReducer)
-
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
index 087cc4a0867..752b98f89ae 100644
--- a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
@@ -2,28 +2,56 @@
exports[`MenuTabs should render with loading props 1`] = `
-
- {
- const store = createStore(rootReducer)
-
it('should render with loading props', () => {
const renderer = TestRenderer.create(
-
+
{
txid: ''
}}
/>
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/modals/CategoryModal.test.tsx b/src/__tests__/modals/CategoryModal.test.tsx
index 4e17ee55973..9ee7df6825e 100644
--- a/src/__tests__/modals/CategoryModal.test.tsx
+++ b/src/__tests__/modals/CategoryModal.test.tsx
@@ -1,16 +1,14 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CategoryModal } from '../../components/modals/CategoryModal'
-import { rootReducer } from '../../reducers/RootReducer'
import { defaultCategories } from '../../util/categories'
import { fakeAirshipBridge } from '../../util/fake/fakeAirshipBridge'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('CategoryModal', () => {
- const fakeState: any = {
+ const fakeState: FakeState = {
ui: {
scenes: {
transactionDetails: {
@@ -19,13 +17,12 @@ describe('CategoryModal', () => {
}
}
}
- const store = createStore(rootReducer, fakeState)
it('should render with an empty subcategory', () => {
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -33,9 +30,9 @@ describe('CategoryModal', () => {
it('should render with a subcategory', () => {
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/modals/WalletListModal.test.tsx b/src/__tests__/modals/WalletListModal.test.tsx
index d9f5ddd751e..93457cda545 100644
--- a/src/__tests__/modals/WalletListModal.test.tsx
+++ b/src/__tests__/modals/WalletListModal.test.tsx
@@ -1,23 +1,19 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { upgradeCurrencyCodes, WalletListModal } from '../../components/modals/WalletListModal'
-import { rootReducer } from '../../reducers/RootReducer'
import { EdgeTokenId } from '../../types/types'
import { fakeAirshipBridge } from '../../util/fake/fakeAirshipBridge'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders } from '../../util/fake/FakeProviders'
describe('WalletListModal', () => {
it('should render with loading props', () => {
- const store = createStore(rootReducer)
-
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/CreateWalletImportScene.test.tsx b/src/__tests__/scenes/CreateWalletImportScene.test.tsx
index be810728aeb..ae365f19457 100644
--- a/src/__tests__/scenes/CreateWalletImportScene.test.tsx
+++ b/src/__tests__/scenes/CreateWalletImportScene.test.tsx
@@ -1,14 +1,12 @@
import { describe, expect, it, jest } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CreateWalletImportScene } from '../../components/scenes/CreateWalletImportScene'
-import { rootReducer } from '../../reducers/RootReducer'
import { RouteProp } from '../../types/routerTypes'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
jest.mock('react-native-keyboard-aware-scroll-view', () => {
const KeyboardAwareScrollView = (blob: { children: React.ReactNode }) => blob.children
@@ -20,7 +18,7 @@ jest.mock('../../assets/images/import-key-icon.svg', () => 'ImportKeySvg')
describe('CreateWalletImportScene', () => {
const nonce = fakeNonce(0)
- const mockState: any = {
+ const mockState: FakeState = {
core: {
account: {
currencyConfig: {
@@ -31,7 +29,6 @@ describe('CreateWalletImportScene', () => {
}
}
}
- const store = createStore(rootReducer, mockState)
it('should render with loading props', () => {
const navigation = fakeNavigation
@@ -54,9 +51,9 @@ describe('CreateWalletImportScene', () => {
}
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/CreateWalletSelectCryptoScene.test.tsx b/src/__tests__/scenes/CreateWalletSelectCryptoScene.test.tsx
index b7117277601..f02a9788ab1 100644
--- a/src/__tests__/scenes/CreateWalletSelectCryptoScene.test.tsx
+++ b/src/__tests__/scenes/CreateWalletSelectCryptoScene.test.tsx
@@ -1,18 +1,16 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CreateWalletSelectCryptoScene } from '../../components/scenes/CreateWalletSelectCryptoScene'
-import { rootReducer } from '../../reducers/RootReducer'
import { RouteProp } from '../../types/routerTypes'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('CreateWalletSelectCrypto', () => {
const nonce = fakeNonce(0)
- const mockState: any = {
+ const mockState: FakeState = {
core: {
account: {
currencyConfig: {
@@ -62,7 +60,6 @@ describe('CreateWalletSelectCrypto', () => {
}
}
}
- const store = createStore(rootReducer, mockState)
it('should render with loading props', () => {
const navigation = fakeNavigation
@@ -73,9 +70,9 @@ describe('CreateWalletSelectCrypto', () => {
}
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/CreateWalletSelectFiatScene.test.tsx b/src/__tests__/scenes/CreateWalletSelectFiatScene.test.tsx
index 505875875b3..709e03b648a 100644
--- a/src/__tests__/scenes/CreateWalletSelectFiatScene.test.tsx
+++ b/src/__tests__/scenes/CreateWalletSelectFiatScene.test.tsx
@@ -1,18 +1,16 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CreateWalletSelectFiatScene } from '../../components/scenes/CreateWalletSelectFiatScene'
-import { rootReducer } from '../../reducers/RootReducer'
import { RouteProp } from '../../types/routerTypes'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('CreateWalletSelectFiatComponent', () => {
const nonce = fakeNonce(0)
- const mockState: any = {
+ const mockState: FakeState = {
ui: {
settings: {
defaultIsoFiat: 'USD'
@@ -48,7 +46,6 @@ describe('CreateWalletSelectFiatComponent', () => {
}
}
}
- const store = createStore(rootReducer, mockState)
it('should render with loading props', () => {
const navigation = fakeNavigation
@@ -77,9 +74,9 @@ describe('CreateWalletSelectFiatComponent', () => {
}
}
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/CurrencyNotificationScene.test.tsx b/src/__tests__/scenes/CurrencyNotificationScene.test.tsx
index 957f27a983b..e337063b393 100644
--- a/src/__tests__/scenes/CurrencyNotificationScene.test.tsx
+++ b/src/__tests__/scenes/CurrencyNotificationScene.test.tsx
@@ -1,16 +1,14 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CurrencyNotificationScene } from '../../components/scenes/CurrencyNotificationScene'
-import { rootReducer } from '../../reducers/RootReducer'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('CurrencyNotificationComponent', () => {
const nonce = fakeNonce(0)
- const mockStore: any = {
+ const mockStore: FakeState = {
notificationSettings: {
plugins: {
bitcoin: {
@@ -23,11 +21,9 @@ describe('CurrencyNotificationComponent', () => {
}
}
- const store = createStore(rootReducer, mockStore)
-
it('should render with loading props', () => {
const renderer = TestRenderer.create(
-
+
{
}
}}
/>
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/CurrencySettings.ui.test.tsx b/src/__tests__/scenes/CurrencySettings.ui.test.tsx
index 3109abe2acf..1e8bdce89f3 100644
--- a/src/__tests__/scenes/CurrencySettings.ui.test.tsx
+++ b/src/__tests__/scenes/CurrencySettings.ui.test.tsx
@@ -1,12 +1,10 @@
import { describe, expect, it } from '@jest/globals'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { CurrencySettingsScene } from '../../components/scenes/CurrencySettingsScene'
-import { rootReducer } from '../../reducers/RootReducer'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
describe('CurrencySettings', () => {
const nonce = fakeNonce(0)
@@ -21,17 +19,19 @@ describe('CurrencySettings', () => {
],
pluginId: 'bitcoin-gold'
}
- const account: any = {
- currencyConfig: {
- 'bitcoin-gold': { currencyInfo }
+
+ const state: FakeState = {
+ core: {
+ account: {
+ currencyConfig: {
+ 'bitcoin-gold': { currencyInfo }
+ }
+ }
}
}
- const state: any = { core: { account } }
- const store = createStore(rootReducer, state)
-
const renderer = TestRenderer.create(
-
+
{
params: { currencyInfo }
}}
/>
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/EdgeLoginScene.test.tsx b/src/__tests__/scenes/EdgeLoginScene.test.tsx
index 4a53ee9ba28..38fbd421a64 100644
--- a/src/__tests__/scenes/EdgeLoginScene.test.tsx
+++ b/src/__tests__/scenes/EdgeLoginScene.test.tsx
@@ -1,15 +1,13 @@
import { describe, expect, it } from '@jest/globals'
import { EdgeAccount } from 'edge-core-js'
import * as React from 'react'
-import { Provider } from 'react-redux'
-import { createRenderer } from 'react-test-renderer/shallow'
-import { createStore } from 'redux'
+import TestRenderer from 'react-test-renderer'
import { EdgeLoginScene } from '../../components/scenes/EdgeLoginScene'
-import { rootReducer } from '../../reducers/RootReducer'
import { RouteProp } from '../../types/routerTypes'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
import { fakeRootState } from '../../util/fake/fakeRootState'
let account: EdgeAccount | undefined
@@ -17,7 +15,6 @@ let account: EdgeAccount | undefined
describe('EdgeLoginScene', () => {
const nonce = fakeNonce(0)
it('should render with loading props', () => {
- const renderer = createRenderer()
const route: RouteProp<'edgeLogin'> = {
key: `edgeLogin-${nonce()}`,
name: 'edgeLogin',
@@ -25,17 +22,14 @@ describe('EdgeLoginScene', () => {
lobbyId: 'AmNsSBDVeF2837'
}
}
- const rootState: any = fakeRootState
- rootState.core = {
- account
- }
- const store = createStore(rootReducer, rootState)
- const actual = renderer.render(
-
+ const rootState: FakeState = { ...fakeRootState, core: { account } }
+
+ const renderer = TestRenderer.create(
+
-
+
)
- expect(actual).toMatchSnapshot()
+ expect(renderer.toJSON()).toMatchSnapshot()
})
})
diff --git a/src/__tests__/scenes/SendScene2.ui.test.tsx b/src/__tests__/scenes/SendScene2.ui.test.tsx
index bfce26a0f22..5f1ecd54bb2 100644
--- a/src/__tests__/scenes/SendScene2.ui.test.tsx
+++ b/src/__tests__/scenes/SendScene2.ui.test.tsx
@@ -2,12 +2,9 @@ import { afterAll, beforeAll, describe, expect, it, jest } from '@jest/globals'
import { asDate, asMap, asObject, asOptional, asString, asUnknown } from 'cleaners'
import { addEdgeCorePlugins, EdgeAccount, EdgeContext, EdgeCurrencyWallet, lockEdgeCorePlugins, makeFakeEdgeWorld } from 'edge-core-js'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { createStore } from 'redux'
import { SendScene2 } from '../../components/scenes/SendScene2'
-import { rootReducer } from '../../reducers/RootReducer'
import { RouteProp } from '../../types/routerTypes'
import { avaxCurrencyInfo } from '../../util/fake/fakeAvaxInfo'
import { btcCurrencyInfo } from '../../util/fake/fakeBtcInfo'
@@ -15,6 +12,7 @@ import { makeFakePlugin } from '../../util/fake/fakeCurrencyPlugin'
import { ethCurrencyInfo } from '../../util/fake/fakeEthInfo'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
import { fakeRootState } from '../../util/fake/fakeRootState'
import fakeUser from '../../util/fake/fakeUserDump.json'
@@ -86,7 +84,7 @@ describe('SendScene2', () => {
it('Render SendScene', () => {
if (btcWallet == null) return
- const rootState: any = fakeRootState
+ const rootState: FakeState = { ...fakeRootState, core: { account } }
const navigation = fakeNavigation
const route: RouteProp<'send2'> = {
key: `send2-${nonce()}`,
@@ -97,15 +95,10 @@ describe('SendScene2', () => {
}
}
- rootState.core = {
- account
- }
- const store = createStore(rootReducer, rootState)
-
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -113,7 +106,7 @@ describe('SendScene2', () => {
it('1 spendTarget', () => {
if (btcWallet == null) return
- const rootState: any = fakeRootState
+ const rootState: FakeState = { ...fakeRootState, core: { account } }
const navigation = fakeNavigation
const route: RouteProp<'send2'> = {
key: `send2-${nonce()}`,
@@ -127,15 +120,10 @@ describe('SendScene2', () => {
}
}
- rootState.core = {
- account
- }
- const store = createStore(rootReducer, rootState)
-
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -143,7 +131,7 @@ describe('SendScene2', () => {
it('1 spendTarget with info tiles', () => {
if (btcWallet == null) return
- const rootState: any = fakeRootState
+ const rootState: FakeState = { ...fakeRootState, core: { account } }
const navigation = fakeNavigation
const route: RouteProp<'send2'> = {
key: `send2-${nonce()}`,
@@ -161,15 +149,10 @@ describe('SendScene2', () => {
}
}
- rootState.core = {
- account
- }
- const store = createStore(rootReducer, rootState)
-
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -177,7 +160,7 @@ describe('SendScene2', () => {
it('2 spendTargets', () => {
if (btcWallet == null) return
- const rootState: any = fakeRootState
+ const rootState: FakeState = { ...fakeRootState, core: { account } }
const navigation = fakeNavigation
const route: RouteProp<'send2'> = {
key: `send2-${nonce()}`,
@@ -194,15 +177,10 @@ describe('SendScene2', () => {
}
}
- rootState.core = {
- account
- }
- const store = createStore(rootReducer, rootState)
-
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -211,7 +189,7 @@ describe('SendScene2', () => {
it('2 spendTargets hide tiles', () => {
if (btcWallet == null) return
- const rootState: any = fakeRootState
+ const rootState: FakeState = { ...fakeRootState, core: { account } }
const navigation = fakeNavigation
const route: RouteProp<'send2'> = {
key: `send2-${nonce()}`,
@@ -229,16 +207,11 @@ describe('SendScene2', () => {
}
}
- rootState.core = {
- account
- }
- const store = createStore(rootReducer, rootState)
-
// Hide Address
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -246,9 +219,9 @@ describe('SendScene2', () => {
// @ts-expect-error
route.params.hiddenTilesMap = { amount: true }
const renderer2 = TestRenderer.create(
-
+
-
+
)
expect(renderer2.toJSON()).toMatchSnapshot()
@@ -256,9 +229,9 @@ describe('SendScene2', () => {
// @ts-expect-error
route.params.hiddenTilesMap = { amount: true, address: true }
const renderer3 = TestRenderer.create(
-
+
-
+
)
expect(renderer3.toJSON()).toMatchSnapshot()
})
@@ -266,7 +239,7 @@ describe('SendScene2', () => {
it('2 spendTargets lock tiles', () => {
if (btcWallet == null) return
- const rootState: any = fakeRootState
+ const rootState: FakeState = { ...fakeRootState, core: { account } }
const navigation = fakeNavigation
const route: RouteProp<'send2'> = {
key: `send2-${nonce()}`,
@@ -284,16 +257,11 @@ describe('SendScene2', () => {
}
}
- rootState.core = {
- account
- }
- const store = createStore(rootReducer, rootState)
-
// Lock Address
const renderer = TestRenderer.create(
-
+
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -301,9 +269,9 @@ describe('SendScene2', () => {
// @ts-expect-error
route.params.lockTilesMap = { amount: true }
const renderer2 = TestRenderer.create(
-
+
-
+
)
expect(renderer2.toJSON()).toMatchSnapshot()
@@ -311,9 +279,9 @@ describe('SendScene2', () => {
// @ts-expect-error
route.params.lockTilesMap = { amount: true, address: true }
const renderer3 = TestRenderer.create(
-
+
-
+
)
expect(renderer3.toJSON()).toMatchSnapshot()
})
diff --git a/src/__tests__/scenes/SettingsScene.test.tsx b/src/__tests__/scenes/SettingsScene.test.tsx
index 8d5e63869af..327e72e5ae7 100644
--- a/src/__tests__/scenes/SettingsScene.test.tsx
+++ b/src/__tests__/scenes/SettingsScene.test.tsx
@@ -6,6 +6,7 @@ import TestRenderer from 'react-test-renderer'
import { SettingsSceneComponent } from '../../components/scenes/SettingsScene'
import { config } from '../../theme/appConfig'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
+import { FakeProviders } from '../../util/fake/FakeProviders'
const typeHack: any = {
currencyConfig: {},
@@ -19,33 +20,35 @@ const context: EdgeContext = typeHack
describe('MyComponent', () => {
it('should render UnLocked SettingsOverview', () => {
const renderer = TestRenderer.create(
- undefined}
- handleClearLogs={() => undefined}
- handleSendLogs={() => undefined}
- lockSettings={() => undefined}
- onTogglePinLoginEnabled={async () => undefined}
- setAutoLogoutTimeInSeconds={() => undefined}
- showRestoreWalletsModal={() => undefined}
- showUnlockSettingsModal={() => undefined}
- toggleDeveloperMode={() => undefined}
- toggleSpamFilter={() => undefined}
- logoutRequest={async () => undefined}
- />
+
+ undefined}
+ handleClearLogs={() => undefined}
+ handleSendLogs={() => undefined}
+ lockSettings={() => undefined}
+ onTogglePinLoginEnabled={async () => undefined}
+ setAutoLogoutTimeInSeconds={() => undefined}
+ showRestoreWalletsModal={() => undefined}
+ showUnlockSettingsModal={() => undefined}
+ toggleDeveloperMode={() => undefined}
+ toggleSpamFilter={() => undefined}
+ logoutRequest={async () => undefined}
+ />
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -53,33 +56,35 @@ describe('MyComponent', () => {
it('should render Locked SettingsOverview', () => {
const renderer = TestRenderer.create(
- undefined}
- lockSettings={() => undefined}
- handleClearLogs={() => undefined}
- handleSendLogs={() => undefined}
- onTogglePinLoginEnabled={async () => undefined}
- setAutoLogoutTimeInSeconds={() => undefined}
- showRestoreWalletsModal={() => undefined}
- showUnlockSettingsModal={() => undefined}
- toggleDeveloperMode={() => undefined}
- toggleSpamFilter={() => undefined}
- logoutRequest={async () => undefined}
- />
+
+ undefined}
+ lockSettings={() => undefined}
+ handleClearLogs={() => undefined}
+ handleSendLogs={() => undefined}
+ onTogglePinLoginEnabled={async () => undefined}
+ setAutoLogoutTimeInSeconds={() => undefined}
+ showRestoreWalletsModal={() => undefined}
+ showUnlockSettingsModal={() => undefined}
+ toggleDeveloperMode={() => undefined}
+ toggleSpamFilter={() => undefined}
+ logoutRequest={async () => undefined}
+ />
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/TransactionDetailsScene.test.tsx b/src/__tests__/scenes/TransactionDetailsScene.test.tsx
index b0640521c65..724d660dc97 100644
--- a/src/__tests__/scenes/TransactionDetailsScene.test.tsx
+++ b/src/__tests__/scenes/TransactionDetailsScene.test.tsx
@@ -1,15 +1,12 @@
import { describe, expect, it } from '@jest/globals'
import { EdgeCurrencyInfo } from 'edge-core-js'
import * as React from 'react'
-import { Provider } from 'react-redux'
import TestRenderer from 'react-test-renderer'
-import { applyMiddleware, createStore } from 'redux'
-import thunk from 'redux-thunk'
import { TransactionDetailsScene } from '../../components/scenes/TransactionDetailsScene'
-import { rootReducer } from '../../reducers/RootReducer'
import { fakeNavigation } from '../../util/fake/fakeNavigation'
import { fakeNonce } from '../../util/fake/fakeNonce'
+import { FakeProviders, FakeState } from '../../util/fake/FakeProviders'
const currencyInfo: EdgeCurrencyInfo = {
pluginId: 'bitcoin',
@@ -53,7 +50,7 @@ const fakeCoreWallet: any = {
describe('TransactionDetailsScene', () => {
const nonce = fakeNonce(0)
- const fakeState: any = {
+ const fakeState: FakeState = {
core: {
account: {
currencyWallets: { '123': fakeCoreWallet },
@@ -62,11 +59,9 @@ describe('TransactionDetailsScene', () => {
}
}
- const store = createStore(rootReducer, fakeState, applyMiddleware(thunk))
-
it('should render', () => {
const renderer = TestRenderer.create(
-
+
{
}
}}
/>
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
@@ -98,7 +93,7 @@ describe('TransactionDetailsScene', () => {
it('should render with negative nativeAmount and fiatAmount', () => {
const renderer = TestRenderer.create(
-
+
{
}
}}
/>
-
+
)
expect(renderer.toJSON()).toMatchSnapshot()
diff --git a/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap
index 6a02336929a..ec5ca478b73 100644
--- a/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/EdgeLoginScene.test.tsx.snap
@@ -1,66 +1,432 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EdgeLoginScene should render with loading props 1`] = `
-
-
+
-
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Warning
+
+
+
+ This application would like to create or access its wallet in your Edge account.
+
+ It will not have access to any other wallets.
+
+
+
+
+
+
+
+ Accept
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+
`;
diff --git a/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap
index a0e689bdf0c..2a7fb612d08 100644
--- a/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap
@@ -1005,34 +1005,14 @@ exports[`FioAddressList should render with loading props 1`] = `
-
-
-
-
-
+ }
+ />
`;
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 790d00f0507..bea5dfc5b7c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -3,6 +3,7 @@ import '@ethersproject/shims'
import * as React from 'react'
import { StyleSheet } from 'react-native'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
import { CrashScene } from './scenes/CrashScene'
import { EdgeCoreManager } from './services/EdgeCoreManager'
@@ -16,13 +17,15 @@ function logCrash(error: { originalError: unknown }) {
export function App(props: {}) {
return (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/components/common/FormField.tsx b/src/components/common/FormField.tsx
index 1f80c290269..f7f762ad874 100644
--- a/src/components/common/FormField.tsx
+++ b/src/components/common/FormField.tsx
@@ -1,9 +1,8 @@
import * as React from 'react'
-import { ViewStyle } from 'react-native'
+import { Dimensions, ViewStyle } from 'react-native'
import { TextField, TextFieldProps } from 'react-native-material-textfield'
import { THEME } from '../../theme/variables/airbitz'
-import { PLATFORM } from '../../theme/variables/platform'
interface Props extends TextFieldProps {
autoFocus?: boolean
@@ -33,7 +32,7 @@ export class FormField extends React.Component {
const containerStyle: ViewStyle = {
position: 'relative',
- width: PLATFORM.deviceWidth / 1.52,
+ width: Dimensions.get('window').width / 1.52,
height: 60
}
diff --git a/src/components/common/FullScreenTransition.tsx b/src/components/common/FullScreenTransition.tsx
deleted file mode 100644
index a33ba23001e..00000000000
--- a/src/components/common/FullScreenTransition.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react'
-import { Animated, StyleSheet, View } from 'react-native'
-
-import { Gradient } from '../../modules/UI/components/Gradient/Gradient.ui'
-import { THEME } from '../../theme/variables/airbitz'
-import { PLATFORM } from '../../theme/variables/platform'
-
-interface FullScreenTransitionState {
- opacity: Animated.Value
-}
-
-interface FullScreenTransitionProps {
- image: React.ReactNode
- text: React.ReactNode
- onDone: () => void
-}
-
-export class FullScreenTransitionComponent extends React.Component {
- constructor(props: FullScreenTransitionProps) {
- super(props)
- this.state = {
- opacity: new Animated.Value(0)
- }
- }
-
- componentDidMount = () => {
- const { onDone } = this.props
- setTimeout(() => {
- Animated.sequence([
- Animated.timing(this.state.opacity, {
- duration: 1500,
- toValue: 1,
- useNativeDriver: false
- }),
- Animated.timing(this.state.opacity, {
- duration: 1400,
- toValue: 1,
- useNativeDriver: false
- }),
- Animated.timing(this.state.opacity, {
- duration: 1500,
- toValue: 0,
- useNativeDriver: false
- })
- ]).start(() => {
- onDone()
- })
- }, 400)
- }
-
- render() {
- const { opacity } = this.state
- const { image, text } = this.props
- return (
-
-
-
- {image}
- {text}
-
-
- )
- }
-}
-
-const styles = StyleSheet.create({
- scene: {
- flex: 1,
- backgroundColor: THEME.COLORS.WHITE
- },
- gradient: {
- height: THEME.HEADER,
- width: '100%',
- position: 'absolute'
- },
- view: {
- position: 'relative',
- top: THEME.HEADER,
- paddingHorizontal: 20,
- height: PLATFORM.usableHeight
- }
-})
diff --git a/src/components/common/LayoutContext.ts b/src/components/common/LayoutContext.ts
index 70edbf07278..3400fb70f37 100644
--- a/src/components/common/LayoutContext.ts
+++ b/src/components/common/LayoutContext.ts
@@ -1,8 +1,6 @@
import * as React from 'react'
import { Platform, StatusBar } from 'react-native'
-import { getInset } from 'react-native-safe-area-view'
-
-import { useWindowSize } from '../../hooks/useWindowSize'
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context'
export interface SafeAreaGap {
bottom: number
@@ -23,11 +21,8 @@ interface Props {
}
/**
- * In the future, React Native will provide this component itself:
- * https://github.com/facebook/react-native/pull/20999
- *
- * For now, we emulate the proposed API using the community
- * react-native-safe-area-view.
+ * It is better to use the react-native-safe-area-context hooks,
+ * but if you can't yet, this makes the values available.
*
* On Android, the height will not subtract the soft menu bar.
* Do not rely on the height being correct! Use flexbox to do layout
@@ -37,19 +32,20 @@ export function LayoutContext(props: Props) {
const { children } = props
// Subscribe to the window size:
- const { height, width } = useWindowSize()
- const isLandscape = height < width
+ const { height, width } = useSafeAreaFrame()
+ const safeAreaInsets = useSafeAreaInsets()
const metrics: LayoutMetrics = {
// @ts-expect-error
layout: { x: 0, y: 0, height, width },
- safeAreaInsets: {
- bottom: isIos ? getInset('bottom', isLandscape) : 0,
- left: isIos ? getInset('left', isLandscape) : 0,
- right: isIos ? getInset('right', isLandscape) : 0,
- // @ts-expect-error
- top: isIos ? getInset('top', isLandscape) : StatusBar.currentHeight
- }
+ safeAreaInsets: isIos
+ ? safeAreaInsets
+ : {
+ bottom: 0,
+ left: 0,
+ right: 0,
+ top: StatusBar.currentHeight ?? 0
+ }
}
return children(metrics)
diff --git a/src/components/modals/FlipInputModal.tsx b/src/components/modals/FlipInputModal.tsx
index 1f6c20e9d2b..a34f1b70a10 100644
--- a/src/components/modals/FlipInputModal.tsx
+++ b/src/components/modals/FlipInputModal.tsx
@@ -3,19 +3,17 @@
import { div, eq } from 'biggystring'
import { asMaybeNoAmountSpecifiedError, EdgeCurrencyWallet, EdgeDenomination } from 'edge-core-js'
import * as React from 'react'
-import { TouchableWithoutFeedback, View } from 'react-native'
+import { Dimensions, TouchableWithoutFeedback, View } from 'react-native'
import { AirshipBridge } from 'react-native-airship'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
import { sprintf } from 'sprintf-js'
import { updateMaxSpend, updateTransactionAmount } from '../../actions/SendConfirmationActions'
-import { MINIMUM_DEVICE_HEIGHT } from '../../constants/constantSettings'
import { getSpecialCurrencyInfo } from '../../constants/WalletAndCurrencyConstants'
import { formatNumber } from '../../locales/intl'
import s from '../../locales/strings'
import { getDisplayDenomination, getExchangeDenomination } from '../../selectors/DenominationSelectors'
import { getExchangeRate } from '../../selectors/WalletSelectors'
-import { deviceHeight } from '../../theme/variables/platform'
import { connect } from '../../types/reactRedux'
import { NavigationBase } from '../../types/routerTypes'
import { GuiCurrencyInfo } from '../../types/types'
@@ -251,9 +249,11 @@ export class FlipInputModalComponent extends React.PureComponent {
}
}
+const deviceHeight = Dimensions.get('window').height
+
const getStyles = cacheStyles((theme: Theme) => ({
hackContainer: {
- flex: deviceHeight <= MINIMUM_DEVICE_HEIGHT ? 1 : 0
+ flex: deviceHeight <= 580 ? 1 : 0
},
flipInput: {
justifyContent: 'flex-start'
diff --git a/src/components/modals/FlipInputModal2.tsx b/src/components/modals/FlipInputModal2.tsx
index 22479b88855..7f3c4ba7274 100644
--- a/src/components/modals/FlipInputModal2.tsx
+++ b/src/components/modals/FlipInputModal2.tsx
@@ -2,12 +2,11 @@ import { div, log10, toFixed } from 'biggystring'
import { EdgeCurrencyWallet } from 'edge-core-js'
import * as React from 'react'
import { memo, useState } from 'react'
-import { TouchableWithoutFeedback, View } from 'react-native'
+import { Dimensions, TouchableWithoutFeedback, View } from 'react-native'
import { AirshipBridge } from 'react-native-airship'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
import { sprintf } from 'sprintf-js'
-import { MINIMUM_DEVICE_HEIGHT } from '../../constants/constantSettings'
import { getSpecialCurrencyInfo } from '../../constants/WalletAndCurrencyConstants'
import { useDisplayDenom } from '../../hooks/useDisplayDenom'
import { useHandler } from '../../hooks/useHandler'
@@ -15,7 +14,6 @@ import { useWalletName } from '../../hooks/useWalletName'
import { useWatch } from '../../hooks/useWatch'
import { formatNumber } from '../../locales/intl'
import s from '../../locales/strings'
-import { deviceHeight } from '../../theme/variables/platform'
import { getCurrencyCode } from '../../util/CurrencyInfoHelpers'
import { DECIMAL_PRECISION } from '../../util/utils'
import { Card } from '../cards/Card'
@@ -238,11 +236,11 @@ const FlipInputModal2Component = React.forwardRef((pro
)
})
-export const FlipInputModal2 = memo(FlipInputModal2Component)
+const deviceHeight = Dimensions.get('window').height
const getStyles = cacheStyles((theme: Theme) => ({
hackContainer: {
- flex: deviceHeight <= MINIMUM_DEVICE_HEIGHT ? 1 : 0
+ flex: deviceHeight <= 580 ? 1 : 0
},
flipInput: {
justifyContent: 'flex-start'
@@ -300,3 +298,5 @@ const getStyles = cacheStyles((theme: Theme) => ({
marginLeft: theme.rem(0.5)
}
}))
+
+export const FlipInputModal2 = memo(FlipInputModal2Component)
diff --git a/src/components/modals/HelpModal.tsx b/src/components/modals/HelpModal.tsx
index c3e3586684c..545e1d6d5ed 100644
--- a/src/components/modals/HelpModal.tsx
+++ b/src/components/modals/HelpModal.tsx
@@ -1,5 +1,5 @@
import * as React from 'react'
-import { Image, Keyboard, Linking, Platform, View } from 'react-native'
+import { Dimensions, Image, Keyboard, Linking, Platform, View } from 'react-native'
import { AirshipBridge } from 'react-native-airship'
import { getBuildNumber, getVersion } from 'react-native-device-info'
import { WebView } from 'react-native-webview'
@@ -8,7 +8,6 @@ import { sprintf } from 'sprintf-js'
import { Fontello } from '../../assets/vector'
import s from '../../locales/strings'
import { config } from '../../theme/appConfig'
-import { PLATFORM } from '../../theme/variables/platform'
import { Airship } from '../services/AirshipInstance'
import { cacheStyles, Theme, ThemeProps, withTheme } from '../services/ThemeContext'
import { EdgeText } from '../themed/EdgeText'
@@ -151,6 +150,8 @@ export class HelpModalComponent extends React.Component {
}
}
+const deviceHeight = Dimensions.get('window').height
+
const getStyles = cacheStyles((theme: Theme) => ({
titleContainer: {
marginTop: theme.rem(0.5),
@@ -162,8 +163,8 @@ const getStyles = cacheStyles((theme: Theme) => ({
height: theme.rem(2.25)
},
footer: {
- marginTop: PLATFORM.deviceHeight < theme.rem(42) ? 0 : theme.rem(1.5),
- paddingVertical: PLATFORM.deviceHeight < theme.rem(42) ? theme.rem(0.25) : theme.rem(0.5),
+ marginTop: deviceHeight < theme.rem(42) ? 0 : theme.rem(1.5),
+ paddingVertical: deviceHeight < theme.rem(42) ? theme.rem(0.25) : theme.rem(0.5),
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
diff --git a/src/components/modals/QrModal.tsx b/src/components/modals/QrModal.tsx
index 7a558f1752e..1d58dfd9029 100644
--- a/src/components/modals/QrModal.tsx
+++ b/src/components/modals/QrModal.tsx
@@ -1,9 +1,9 @@
import * as React from 'react'
import { StyleSheet } from 'react-native'
import { AirshipBridge, AirshipModal } from 'react-native-airship'
+import { useSafeAreaFrame } from 'react-native-safe-area-context'
import { BlurView } from 'rn-id-blurview'
-import { useWindowSize } from '../../hooks/useWindowSize'
import { useTheme } from '../services/ThemeContext'
import { QrCode } from '../themed/QrCode'
@@ -15,7 +15,7 @@ interface Props {
export function QrModal(props: Props) {
const { bridge, data } = props
const theme = useTheme()
- const windowSize = useWindowSize()
+ const windowSize = useSafeAreaFrame()
const maxSize = Math.min(windowSize.width, windowSize.height)
const handleCancel = () => bridge.resolve(undefined)
diff --git a/src/components/modals/ScanModal.tsx b/src/components/modals/ScanModal.tsx
index 53ecd748307..9e1a20bb2ff 100644
--- a/src/components/modals/ScanModal.tsx
+++ b/src/components/modals/ScanModal.tsx
@@ -4,11 +4,11 @@ import { AirshipBridge, AirshipModal } from 'react-native-airship'
import { RNCamera } from 'react-native-camera'
import { launchImageLibrary } from 'react-native-image-picker'
import RNPermissions from 'react-native-permissions'
+import { useSafeAreaFrame } from 'react-native-safe-area-context'
import Ionicon from 'react-native-vector-icons/Ionicons'
import RNQRGenerator from 'rn-qr-generator'
import { useLayout } from '../../hooks/useLayout'
-import { useWindowSize } from '../../hooks/useWindowSize'
import s from '../../locales/strings'
import { useSelector } from '../../types/reactRedux'
import { triggerHaptic } from '../../util/haptic'
@@ -37,7 +37,7 @@ export const ScanModal = (props: Props) => {
const theme = useTheme()
const styles = getStyles(theme)
- const { width: windowWidth, height: windowHeight } = useWindowSize()
+ const { width: windowWidth, height: windowHeight } = useSafeAreaFrame()
const isLandscape = windowWidth > windowHeight
const cameraPermission = useSelector(state => state.permissions.camera)
diff --git a/src/components/progress-indicators/FullScreenLoader.tsx b/src/components/progress-indicators/FullScreenLoader.tsx
index 8a908c05488..3f6eaa797d7 100644
--- a/src/components/progress-indicators/FullScreenLoader.tsx
+++ b/src/components/progress-indicators/FullScreenLoader.tsx
@@ -1,12 +1,10 @@
import * as React from 'react'
-import { ActivityIndicator, StyleSheet, View, ViewPropTypes } from 'react-native'
+import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native'
import { THEME } from '../../theme/variables/airbitz'
-import { PLATFORM } from '../../theme/variables/platform'
interface Props {
- // @ts-expect-error
- indicatorStyles?: ViewPropTypes.style
+ indicatorStyles?: ViewStyle
size?: 'large' | 'small'
}
@@ -23,11 +21,12 @@ export class FullScreenLoader extends React.Component {
const styles = StyleSheet.create({
loadingContainer: {
- flex: 1,
- position: 'absolute',
- height: PLATFORM.deviceHeight,
- width: PLATFORM.deviceWidth,
backgroundColor: THEME.COLORS.OPACITY_GRAY_1,
+ bottom: 0,
+ left: 0,
+ position: 'absolute',
+ right: 0,
+ top: 0,
zIndex: 1000
},
indicator: {
diff --git a/src/components/scenes/CreateWalletAccountSetupScene.tsx b/src/components/scenes/CreateWalletAccountSetupScene.tsx
index 1829bc04367..477813d0ec7 100644
--- a/src/components/scenes/CreateWalletAccountSetupScene.tsx
+++ b/src/components/scenes/CreateWalletAccountSetupScene.tsx
@@ -1,6 +1,6 @@
import { EdgeCurrencyConfig } from 'edge-core-js'
import * as React from 'react'
-import { ActivityIndicator, Image, ScrollView, StyleSheet, View } from 'react-native'
+import { ActivityIndicator, Dimensions, Image, ScrollView, StyleSheet, View } from 'react-native'
import { sprintf } from 'sprintf-js'
import { checkHandleAvailability } from '../../actions/CreateWalletActions'
@@ -14,7 +14,6 @@ import { Gradient } from '../../modules/UI/components/Gradient/Gradient.ui'
import { SafeAreaViewComponent as SafeAreaView } from '../../modules/UI/components/SafeAreaView/SafeAreaView.ui'
import { HandleAvailableStatus } from '../../reducers/scenes/CreateWalletReducer'
import { THEME } from '../../theme/variables/airbitz'
-import { PLATFORM } from '../../theme/variables/platform'
import { connect } from '../../types/reactRedux'
import { NavigationProp, RouteProp } from '../../types/routerTypes'
import { scale } from '../../util/scaling'
@@ -22,8 +21,6 @@ import { logEvent } from '../../util/tracking'
import { debounce } from '../../util/utils'
import { FormField, MaterialInputOnWhite } from '../common/FormField'
-const deviceWidth = PLATFORM.deviceWidth
-
interface OwnProps {
navigation: NavigationProp<'createWalletAccountSetup'>
route: RouteProp<'createWalletAccountSetup'>
@@ -136,7 +133,7 @@ export class CreateWalletAccountSetup extends React.Component {
...MaterialInputOnWhite.containerStyle,
marginTop: scale(16),
marginBottom: scale(24),
- width: deviceWidth - scale(25) - scale(40) // substract padding and validation icon
+ width: Dimensions.get('window').width - scale(25) - scale(40) // substract padding and validation icon
}}
autoFocus
autoCorrect={false}
diff --git a/src/components/scenes/FioAddressListScene.tsx b/src/components/scenes/FioAddressListScene.tsx
index e46b7eb64b2..4dbf7bb7296 100644
--- a/src/components/scenes/FioAddressListScene.tsx
+++ b/src/components/scenes/FioAddressListScene.tsx
@@ -8,11 +8,11 @@ import fioAddressLogo from '../../assets/images/fio/fio_logo.png'
import { Fontello } from '../../assets/vector'
import s from '../../locales/strings'
import { FioNameRow } from '../../modules/FioAddress/components/FioName'
-import { PLATFORM } from '../../theme/variables/platform'
import { connect } from '../../types/reactRedux'
import { NavigationProp } from '../../types/routerTypes'
import { FioAddress, FioDomain } from '../../types/types'
import { SceneWrapper } from '../common/SceneWrapper'
+import { FullScreenLoader } from '../progress-indicators/FullScreenLoader'
import { showError } from '../services/AirshipInstance'
import { cacheStyles, Theme, ThemeProps, withTheme } from '../services/ThemeContext'
import { ClickableText } from '../themed/ClickableText'
@@ -171,11 +171,7 @@ export class FioAddressList extends React.Component {
-
-
-
-
-
+ {!initLoading ? null : }
>
)
}
@@ -191,14 +187,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
marginTop: theme.rem(2.5),
alignSelf: 'center'
},
- initLoadingContainer: {
- flex: 1,
- top: 0,
- left: 0,
- position: 'absolute',
- width: '100%',
- height: PLATFORM.deviceHeight
- },
row: {
flex: 1
},
diff --git a/src/components/themed/Carousel.tsx b/src/components/themed/Carousel.tsx
index ea9ff8e2629..6ec431c092e 100644
--- a/src/components/themed/Carousel.tsx
+++ b/src/components/themed/Carousel.tsx
@@ -3,8 +3,8 @@ import { useEffect } from 'react'
import { LayoutChangeEvent, Pressable, View } from 'react-native'
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
import Animated, { runOnJS, SharedValue, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated'
+import { useSafeAreaFrame } from 'react-native-safe-area-context'
-import { useWindowSize } from '../../hooks/useWindowSize'
import { useState } from '../../types/reactHooks'
import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
@@ -45,7 +45,7 @@ export function Carousel(props: Props) {
}
// Respond to device orientation changes:
- const { width: windowWidth } = useWindowSize()
+ const { width: windowWidth } = useSafeAreaFrame()
useEffect(() => {
setItemWidth(itemWidth => itemWidth)
}, [windowWidth])
diff --git a/src/components/themed/MenuTabs.tsx b/src/components/themed/MenuTabs.tsx
index 2dfecfc0420..2086116b07b 100644
--- a/src/components/themed/MenuTabs.tsx
+++ b/src/components/themed/MenuTabs.tsx
@@ -2,7 +2,7 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
import * as React from 'react'
import { TouchableOpacity, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
-import { isIPhoneX } from 'react-native-safe-area-view'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
import Foundation from 'react-native-vector-icons/Foundation'
import Ionicon from 'react-native-vector-icons/Ionicons'
@@ -37,6 +37,11 @@ export const MenuTabs = (props: BottomTabBarProps) => {
const end = theme.tabBarBackgroundEnd
let routes = state.routes
+ const insets = useSafeAreaInsets()
+ const safePadding = {
+ paddingBottom: theme.rem(0.75) + insets.bottom
+ }
+
const handleOnPress = useHandler((route: string) => {
switch (route) {
case 'coinRanking':
@@ -73,7 +78,7 @@ export const MenuTabs = (props: BottomTabBarProps) => {
extraTab:
}
return (
- handleOnPress(route.name)}>
+ handleOnPress(route.name)}>
{icon[route.name]}
{title[route.name]}
@@ -93,7 +98,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
content: {
flex: 1,
paddingTop: theme.rem(0.75),
- paddingBottom: isIPhoneX ? theme.rem(2.125) : theme.rem(0.75),
justifyContent: 'center',
alignItems: 'center'
},
diff --git a/src/constants/constantSettings.ts b/src/constants/constantSettings.ts
index 948f6ad57bb..5c9b060643b 100644
--- a/src/constants/constantSettings.ts
+++ b/src/constants/constantSettings.ts
@@ -5,4 +5,3 @@ export const TUTORIAL = 'tutorial.json'
export const SCAM_WARNING = 'scamWarning.json'
export const AAVE_WELCOME = 'aaveWelcome.json'
export const TOKEN_TERMS_AGREEMENT = 'ttAgreement.json'
-export const MINIMUM_DEVICE_HEIGHT = 580
diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts
deleted file mode 100644
index b8f14e52608..00000000000
--- a/src/hooks/useWindowSize.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { Dimensions } from 'react-native'
-
-interface ScaledSize {
- width: number
- height: number
-}
-
-/**
- * Subscribes to the window dimensions, for use in style calculations.
- */
-export function useWindowSize(): ScaledSize {
- const [windowSize, setWindowSize] = React.useState(() => Dimensions.get('window'))
-
- React.useEffect(() => {
- // @ts-expect-error
- const handleChange = ({ window }) => setWindowSize(window)
- const listener = Dimensions.addEventListener('change', handleChange)
- return () => listener.remove()
- }, [])
-
- return windowSize
-}
diff --git a/src/modules/UI/components/SafeAreaView/SafeAreaView.ui.tsx b/src/modules/UI/components/SafeAreaView/SafeAreaView.ui.tsx
index f9150070934..4502f48dc3f 100644
--- a/src/modules/UI/components/SafeAreaView/SafeAreaView.ui.tsx
+++ b/src/modules/UI/components/SafeAreaView/SafeAreaView.ui.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
import { ViewStyle } from 'react-native'
-import SafeAreaView from 'react-native-safe-area-view'
+import { SafeAreaView } from 'react-native-safe-area-context'
import { THEME } from '../../../../theme/variables/airbitz'
import { Gradient } from '../../components/Gradient/Gradient.ui'
diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
index 84eedabc4e3..e3b8eb81963 100644
--- a/src/theme/variables/edgeDark.ts
+++ b/src/theme/variables/edgeDark.ts
@@ -1,4 +1,4 @@
-import { Platform } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
import fioAddressLogo from '../../assets/images/details_fioAddress.png'
import edgeMark from '../../assets/images/edgeLogo/Edge_logo_Icon.png'
@@ -25,7 +25,6 @@ import walletListSlidingTutorial from '../../assets/images/tutorials/walletList_
import { EDGE_CONTENT_SERVER_URI } from '../../constants/CdnConstants'
import { textNoShadow, Theme, themeNoShadow } from '../../types/Theme'
import { scale } from '../../util/scaling'
-import { PLATFORM } from './platform'
const palette = {
white: '#FFFFFF',
@@ -68,6 +67,8 @@ const palette = {
QuicksandBold: 'Quicksand-Bold'
}
+const deviceWidth = Dimensions.get('window').width
+
export const edgeDark: Theme = {
rem(size: number): number {
return Math.round(scale(16) * size)
@@ -255,7 +256,7 @@ export const edgeDark: Theme = {
confirmationSliderThumb: palette.edgeMint,
confirmationSliderTextDeactivated: palette.gray,
confirmationThumbDeactivated: palette.gray,
- confirmationSliderWidth: PLATFORM.deviceWidth >= 340 ? 295 : PLATFORM.deviceWidth - 45,
+ confirmationSliderWidth: deviceWidth >= 340 ? 295 : deviceWidth - 45,
confirmationSliderThumbWidth: 55,
// Lines
diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts
index 8e4160c6d90..8c247231787 100644
--- a/src/theme/variables/edgeLight.ts
+++ b/src/theme/variables/edgeLight.ts
@@ -1,4 +1,4 @@
-import { Platform } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
import edgeMark from '../../assets/images/edgeLogo/Edge_logo_Icon.png'
import edgeLogo from '../../assets/images/edgeLogo/Edge_logo_L.png'
@@ -25,7 +25,6 @@ import walletListSlidingTutorial from '../../assets/images/tutorials/walletList_
import { EDGE_CONTENT_SERVER_URI } from '../../constants/CdnConstants'
import { textNoShadow, Theme, themeNoShadow } from '../../types/Theme'
import { scale } from '../../util/scaling'
-import { PLATFORM } from './platform'
const palette = {
black: '#000000',
@@ -65,6 +64,8 @@ const palette = {
QuicksandBold: 'Quicksand-Bold'
}
+const deviceWidth = Dimensions.get('window').width
+
export const edgeLight: Theme = {
rem(size: number): number {
return Math.round(scale(16) * size)
@@ -257,7 +258,7 @@ export const edgeLight: Theme = {
confirmationSliderThumb: palette.edgeBlue,
confirmationSliderTextDeactivated: palette.gray,
confirmationThumbDeactivated: palette.gray,
- confirmationSliderWidth: PLATFORM.deviceWidth >= 340 ? 295 : PLATFORM.deviceWidth - 45,
+ confirmationSliderWidth: deviceWidth >= 340 ? 295 : deviceWidth - 45,
confirmationSliderThumbWidth: 55,
// Lines
diff --git a/src/theme/variables/platform.ts b/src/theme/variables/platform.ts
deleted file mode 100644
index 5f0f668a7cc..00000000000
--- a/src/theme/variables/platform.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dimensions, Platform } from 'react-native'
-import ExtraDimensions from 'react-native-extra-dimensions-android'
-import { isIPhoneX } from 'react-native-safe-area-view'
-
-export const deviceWidth = Dimensions.get('window').width
-export const deviceHeight = Platform.OS === 'ios' ? Dimensions.get('window').height : ExtraDimensions.get('REAL_WINDOW_HEIGHT')
-
-export const PLATFORM = {
- // device - toolbar - footer
- usableHeight: deviceHeight - (Platform.OS === 'ios' ? 44 : 62) - 69 - (isIPhoneX ? 57 : 0),
- deviceWidth,
- deviceHeight
-}
diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts
index e45ac9b1a5d..dac216c20f8 100644
--- a/src/theme/variables/testDark.ts
+++ b/src/theme/variables/testDark.ts
@@ -1,4 +1,4 @@
-import { Platform } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
import backgroundImage from '../../assets/images/backgrounds/login_bg.jpg'
import fioAddressLogo from '../../assets/images/details_fioAddress.png'
@@ -24,7 +24,6 @@ import walletListSlidingTutorial from '../../assets/images/tutorials/walletList_
import { EDGE_CONTENT_SERVER_URI } from '../../constants/CdnConstants'
import { textNoShadow, Theme, themeNoShadow } from '../../types/Theme'
import { scale } from '../../util/scaling'
-import { PLATFORM } from './platform'
const palette = {
white: '#FDF2D5',
@@ -73,6 +72,8 @@ const palette = {
QuicksandBold: 'Quicksand-Bold'
}
+const deviceWidth = Dimensions.get('window').width
+
export const testDark: Theme = {
rem(size: number): number {
return Math.round(scale(16) * size)
@@ -270,7 +271,7 @@ export const testDark: Theme = {
confirmationSliderThumb: palette.edgeMint,
confirmationSliderTextDeactivated: palette.gray,
confirmationThumbDeactivated: palette.gray,
- confirmationSliderWidth: PLATFORM.deviceWidth >= 340 ? 295 : PLATFORM.deviceWidth - 45,
+ confirmationSliderWidth: deviceWidth >= 340 ? 295 : deviceWidth - 45,
confirmationSliderThumbWidth: 55,
// Lines
diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts
index 245a4f9f463..5c95e6eb9fd 100644
--- a/src/theme/variables/testLight.ts
+++ b/src/theme/variables/testLight.ts
@@ -1,4 +1,4 @@
-import { Platform } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
import edgeLogo from '../../assets/images/edgeLogo/Edge_logo_L.png'
import guiPluginLogoBitaccess from '../../assets/images/guiPlugins/guiPluginLogoBitaccessDark.png'
@@ -24,7 +24,6 @@ import walletListSlidingTutorial from '../../assets/images/tutorials/walletList_
import { EDGE_CONTENT_SERVER_URI } from '../../constants/CdnConstants'
import { textNoShadow, Theme, themeNoShadow } from '../../types/Theme'
import { scale } from '../../util/scaling'
-import { PLATFORM } from './platform'
const palette = {
black: '#000000',
@@ -64,6 +63,8 @@ const palette = {
QuicksandBold: 'Quicksand-Bold'
}
+const deviceWidth = Dimensions.get('window').width
+
export const testLight: Theme = {
rem(size: number): number {
return Math.round(scale(16) * size)
@@ -256,7 +257,7 @@ export const testLight: Theme = {
confirmationSliderThumb: palette.edgeBlue,
confirmationSliderTextDeactivated: palette.gray,
confirmationThumbDeactivated: palette.gray,
- confirmationSliderWidth: PLATFORM.deviceWidth >= 340 ? 295 : PLATFORM.deviceWidth - 45,
+ confirmationSliderWidth: deviceWidth >= 340 ? 295 : deviceWidth - 45,
confirmationSliderThumbWidth: 55,
// Lines
diff --git a/src/util/fake/FakeProviders.tsx b/src/util/fake/FakeProviders.tsx
new file mode 100644
index 00000000000..808f983a4f1
--- /dev/null
+++ b/src/util/fake/FakeProviders.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Metrics, SafeAreaProvider } from 'react-native-safe-area-context'
+import { Provider } from 'react-redux'
+import { applyMiddleware, createStore } from 'redux'
+import thunk from 'redux-thunk'
+
+import { rootReducer, RootState } from '../../reducers/RootReducer'
+
+type DeepPartial = T extends object
+ ? {
+ [P in keyof T]?: DeepPartial
+ }
+ : T
+
+export type FakeState = DeepPartial
+
+interface Props {
+ children: React.ReactNode
+ initialState?: FakeState
+}
+
+export function FakeProviders(props: Props) {
+ const { children, initialState = {} } = props
+
+ const store = React.useMemo(() => createStore(rootReducer, initialState as any, applyMiddleware(thunk)), [initialState])
+ return (
+
+ {children}
+
+ )
+}
+
+// These match what our old react-native-safe-area-view library returned:
+const initialMetrics: Metrics = {
+ frame: { height: 1334, width: 750, x: 0, y: 0 },
+ insets: { bottom: 0, left: 0, right: 0, top: 20 }
+}
diff --git a/src/util/fake/fakeRootState.ts b/src/util/fake/fakeRootState.ts
index 5c3f6cc57ca..ad07fcd3caa 100644
--- a/src/util/fake/fakeRootState.ts
+++ b/src/util/fake/fakeRootState.ts
@@ -1,4 +1,6 @@
-export const fakeRootState = {
+import { FakeState } from './FakeProviders'
+
+export const fakeRootState: FakeState = {
contacts: [
{
jobTitle: '',
diff --git a/yarn.lock b/yarn.lock
index 3fc6adef52a..7761146d733 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3570,11 +3570,6 @@
resolved "https://registry.yarnpkg.com/@types/react-native-custom-tabs/-/react-native-custom-tabs-0.1.2.tgz#725e2f01721f304890c54cd1814e8d8f4ccaf129"
integrity sha512-GWPd/r6voEIZb7va+3rsLxeT8j9GpUUM8FPBcBJ5RXM+kmJneFz05GANQiD+si+E4MztWmeUemCUxMeEsaYktQ==
-"@types/react-native-extra-dimensions-android@^1.2.0":
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/@types/react-native-extra-dimensions-android/-/react-native-extra-dimensions-android-1.2.0.tgz#50c7e9b252f04ce0c3bc0945ac687a403fe8ec4f"
- integrity sha512-9lUeO0P/yXBPlR8KjIKttqLXy/zRS0a6tofiCooDRcT2YXWkhVAoXZv7y/5opzUdCORk6eSMkfMRLbRjs8v5Uw==
-
"@types/react-native-material-textfield@^0.16.5":
version "0.16.5"
resolved "https://registry.yarnpkg.com/@types/react-native-material-textfield/-/react-native-material-textfield-0.16.5.tgz#fe91ef6339c282668f6eae24ca09a69f0a974974"
@@ -9988,11 +9983,6 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^2.3.1:
- version "2.5.5"
- resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
- integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
-
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -14030,11 +14020,6 @@ react-native-device-info@^8.7.1:
resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.7.1.tgz#fbb06f87dbbc4423abe713874699fb2e6e99fd15"
integrity sha512-cVMZztFa2Qn6qpQa601W61CtUwZQ1KXfqCOeltejAWEXmgIWivC692WGSdtGudj4upSi1UgMSaGcvKjfcpdGjg==
-react-native-extra-dimensions-android@^1.2.5:
- version "1.2.5"
- resolved "https://registry.yarnpkg.com/react-native-extra-dimensions-android/-/react-native-extra-dimensions-android-1.2.5.tgz#8ade91029aaac7519bf305116d39019e618a60f0"
- integrity sha512-eorFo9X1vEqAWUkgcZ300yKBG1wtgNeE7tdWAH2CE+P50FGTniJg5Sr6l1iPWG8ZskQOuF+KeiSTFlDa4vLfMw==
-
react-native-fast-image@^8.5.11:
version "8.5.11"
resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz#e3dc969d0e4e8df026646bf18194465aa55cbc2b"
@@ -14163,13 +14148,6 @@ react-native-safe-area-context@^4.5.0:
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz#9208313236e8f49e1920ac1e2a2c975f03aed284"
integrity sha512-0WORnk9SkREGUg2V7jHZbuN5x4vcxj/1B0QOcXJjdYWrzZHgLcUzYWWIUecUPJh747Mwjt/42RZDOaFn3L8kPQ==
-react-native-safe-area-view@0.14.9:
- version "0.14.9"
- resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz#90ee8383037010d9a5055a97cf97e4c1da1f0c3d"
- integrity sha512-WII/ulhpVyL/qbYb7vydq7dJAfZRBcEhg4/UWt6F6nAKpLa3gAceMOxBxI914ppwSP/TdUsandFy6lkJQE0z4A==
- dependencies:
- hoist-non-react-statics "^2.3.1"
-
react-native-screens@^3.19.0:
version "3.19.0"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.19.0.tgz#ec68685e04b074ebce4641b3a0ae7e2571629b75"