-
Notifications
You must be signed in to change notification settings - Fork 375
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Wallet] Country feature flags and changes for countries where CP-DOT…
…O is restricted (#5613) ### Description This PR covers the following changes: - adds country specific feature flags, based on the country of the entered phone number. Flags are defined in `src/flags.ts`, helpers are in `src/utils/countryFeatures.ts ` (there's a `useCountryFeatures` hook for easy usage within components). - adds the CELO balance to the menu, (hidden if amount is <= 0.001) - hides the CELO Buy/Sell buttons on the Exchange screen for CP-DOTO restricted countries (only PH for now). In that case we display a "Withdraw" button if the user has any CELO funds. See [designs on Figma](https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=3136%3A0) (not entirely up-to-date with latest discussions): ### Other changes - Upgrade `react-native-reanimated` to fix issue with mock during jest tests - Add tests for previously uncovered components: - `DrawerNavigator` - `ExchangeHomeScreen` ### Tested **Menu (PH, CP-DOTO restricted) with/without CELO balance** <Img src="https://user-images.githubusercontent.com/57791/97578835-a3273300-19f1-11eb-99c9-008eead7097c.png" width="50%" /><Img src="https://user-images.githubusercontent.com/57791/97578944-c5b94c00-19f1-11eb-98c0-03b5d694c076.png" width="50%" /> **Exchange Home screen (PH, CP-DOTO restricted) with/without CELO balance** <Img src="https://user-images.githubusercontent.com/57791/97579296-2ba5d380-19f2-11eb-8dea-07a5638f4998.png" width="50%" /><Img src="https://user-images.githubusercontent.com/57791/97579208-129d2280-19f2-11eb-8ac2-cfb898db5c4d.png" width="50%" /> **Menu (US, non CP-DOTO restricted) with/without CELO balance** <Img src="https://user-images.githubusercontent.com/57791/97579821-d1594280-19f2-11eb-9131-8ba3cbb66c51.png" width="50%" /><Img src="https://user-images.githubusercontent.com/57791/97579855-dae2aa80-19f2-11eb-9afb-5df628b4e568.png" width="50%" /> **Exchange Home screen (non CP-DOTO restricted) with/without CELO balance** <Img src="https://user-images.githubusercontent.com/57791/97579912-ef26a780-19f2-11eb-8046-41cdd582ffd8.png" width="50%" /><Img src="https://user-images.githubusercontent.com/57791/97579887-e504a900-19f2-11eb-8429-78fdad044673.png" width="50%" /> ### Related issues - Fixes #5444 - Addresses part of #5425 (Adds CELO balance to the menu) ### Backwards compatibility Yes
- Loading branch information
1 parent
216de39
commit 1832aea
Showing
19 changed files
with
1,415 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,7 @@ | ||
| module.exports = require('react-native-reanimated/mock') | ||
| const Reanimated = require('react-native-reanimated/mock') | ||
|
|
||
| // The mock for `call` immediately calls the callback which is incorrect | ||
| // So we override it with a no-op | ||
| Reanimated.default.call = () => {} | ||
|
|
||
| module.exports = Reanimated |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,4 +16,10 @@ module.exports = { | |
| width, | ||
| height, | ||
| }), | ||
| useSafeArea: () => ({ | ||
| top: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| left: 0, | ||
| }), | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
128 changes: 67 additions & 61 deletions
128
packages/mobile/src/exchange/ExchangeHomeScreen.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,72 @@ | ||
| // need to mock this as it expects to be called inside a provider | ||
| jest.mock('src/exchange/CeloGoldOverview', () => ({ default: () => 'AccountOverviewComponent' })) | ||
| // import * as React from 'react' | ||
| // import { MockedProvider } from 'react-apollo/test-utils' | ||
| import 'react-native' | ||
| // import { Provider } from 'react-redux' | ||
| // import * as renderer from 'react-test-renderer' | ||
| // import configureMockStore from 'redux-mock-store' | ||
| // import thunk from 'redux-thunk' | ||
| // import { ExchangeHomeScreen } from 'src/exchange/ExchangeHomeScreen' | ||
| // import { transactionQuery } from 'src/home/WalletHome' | ||
| // import i18n from 'src/i18n' | ||
| import React from 'react' | ||
| import { fireEvent, render } from 'react-native-testing-library' | ||
| import { Provider } from 'react-redux' | ||
| import ExchangeHomeScreen from 'src/exchange/ExchangeHomeScreen' | ||
| import { Screens } from 'src/navigator/Screens' | ||
| import { createMockStore, getMockStackScreenProps } from 'test/utils' | ||
|
|
||
| // const middlewares = [thunk] | ||
| // const mockStore = configureMockStore(middlewares) | ||
| // Mock this for now, as we get apollo issues | ||
| jest.mock('src/transactions/TransactionsList') | ||
|
|
||
| // const newDollarBalance = '189.9' | ||
| // const newGoldBalance = '207.81' | ||
| // const exchangeRate = '2' | ||
| const mockScreenProps = getMockStackScreenProps(Screens.ExchangeHomeScreen) | ||
|
|
||
| // const mocks = [ | ||
| // { | ||
| // request: { | ||
| // query: transactionQuery, | ||
| // variables: { | ||
| // address: '', | ||
| // }, | ||
| // }, | ||
| // result: { | ||
| // data: { | ||
| // events: [], | ||
| // }, | ||
| // }, | ||
| // }, | ||
| // ] | ||
| describe('ExchangeHomeScreen', () => { | ||
| it('renders and behaves correctly for non CP-DOTO restricted countries', () => { | ||
| const store = createMockStore({ | ||
| goldToken: { balance: '2' }, | ||
| stableToken: { balance: '10' }, | ||
| exchange: { exchangeRatePair: { goldMaker: '0.11', dollarMaker: '10' } }, | ||
| }) | ||
|
|
||
| // failing due to various apollo issues with mocks | ||
| xit('renders correctly', () => { | ||
| // const store = mockStore({ | ||
| // account: { devModeActive: false }, | ||
| // transactions: { standbyTransactions: [] }, | ||
| // web3: { accounts: {} }, | ||
| // }) | ||
| // const tree = renderer.create( | ||
| // <Provider store={store}> | ||
| // <MockedProvider mocks={mocks} addTypename={false}> | ||
| // <ExchangeHomeScreen | ||
| // dollarBalance={newDollarBalance} | ||
| // goldBalance={newGoldBalance} | ||
| // dollarPending={0} | ||
| // goldPending={0} | ||
| // fetchExchangeRate={jest.fn()} | ||
| // exchangeRate={exchangeRate} | ||
| // fetchGoldPendingBalance={jest.fn()} | ||
| // fetchDollarBalance={jest.fn()} | ||
| // fetchDollarPendingBalance={jest.fn()} | ||
| // fetchGoldBalance={jest.fn()} | ||
| // tReady={true} | ||
| // i18n={i18n} | ||
| // t={i18n.t} | ||
| // /> | ||
| // </MockedProvider> | ||
| // </Provider> | ||
| // ) | ||
| // expect(tree).toMatchSnapshot() | ||
| const tree = render( | ||
| <Provider store={store}> | ||
| <ExchangeHomeScreen {...mockScreenProps} /> | ||
| </Provider> | ||
| ) | ||
|
|
||
| expect(tree).toMatchSnapshot() | ||
|
|
||
| jest.clearAllMocks() | ||
| fireEvent.press(tree.getByTestId('BuyCelo')) | ||
| expect(mockScreenProps.navigation.navigate).toHaveBeenCalledWith(Screens.ExchangeTradeScreen, { | ||
| makerTokenDisplay: { makerToken: 'Celo Dollar', makerTokenBalance: '10' }, | ||
| }) | ||
|
|
||
| jest.clearAllMocks() | ||
| fireEvent.press(tree.getByTestId('SellCelo')) | ||
| expect(mockScreenProps.navigation.navigate).toHaveBeenCalledWith(Screens.ExchangeTradeScreen, { | ||
| makerTokenDisplay: { makerToken: 'Celo Gold', makerTokenBalance: '2' }, | ||
| }) | ||
|
|
||
| jest.clearAllMocks() | ||
| fireEvent.press(tree.getByTestId('WithdrawCELO')) | ||
| expect(mockScreenProps.navigation.navigate).toHaveBeenCalledWith(Screens.WithdrawCeloScreen) | ||
| }) | ||
|
|
||
| it('renders and behaves correctly for CP-DOTO restricted countries', () => { | ||
| const store = createMockStore({ | ||
| account: { | ||
| defaultCountryCode: '+63', // PH is restricted for CP-DOTO | ||
| }, | ||
| goldToken: { balance: '2' }, | ||
| stableToken: { balance: '10' }, | ||
| exchange: { exchangeRatePair: { goldMaker: '0.11', dollarMaker: '10' } }, | ||
| }) | ||
|
|
||
| const tree = render( | ||
| <Provider store={store}> | ||
| <ExchangeHomeScreen {...mockScreenProps} /> | ||
| </Provider> | ||
| ) | ||
|
|
||
| expect(tree).toMatchSnapshot() | ||
|
|
||
| // Check we cannot buy/sell | ||
| expect(tree.queryByTestId('BuyCelo')).toBeFalsy() | ||
| expect(tree.queryByTestId('SellCelo')).toBeFalsy() | ||
|
|
||
| // Check we can withdraw | ||
| fireEvent.press(tree.getByTestId('WithdrawCELO')) | ||
| expect(mockScreenProps.navigation.navigate).toHaveBeenCalledWith(Screens.WithdrawCeloScreen) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
packages/mobile/src/exchange/RestrictedCeloExchange.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import * as React from 'react' | ||
| import 'react-native' | ||
| import { fireEvent, render } from 'react-native-testing-library' | ||
| import { Provider } from 'react-redux' | ||
| import RestrictedCeloExchange from 'src/exchange/RestrictedCeloExchange' | ||
| import { createMockStore } from 'test/utils' | ||
|
|
||
| describe('RestrictedCeloExchange', () => { | ||
| it('allows withdrawing if the balance is enough', () => { | ||
| const store = createMockStore({ | ||
| goldToken: { balance: '10' }, | ||
| stableToken: { balance: '10' }, | ||
| }) | ||
| const onPressWithdraw = jest.fn() | ||
|
|
||
| const tree = render( | ||
| <Provider store={store}> | ||
| <RestrictedCeloExchange onPressWithdraw={onPressWithdraw} /> | ||
| </Provider> | ||
| ) | ||
|
|
||
| expect(onPressWithdraw).not.toHaveBeenCalled() | ||
|
|
||
| fireEvent.press(tree.getByTestId('WithdrawCELO')) | ||
| expect(onPressWithdraw).toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('disallows withdrawing if the balance is NOT enough', () => { | ||
| const store = createMockStore({ | ||
| goldToken: { balance: '0.001' }, | ||
| }) | ||
| const onPressWithdraw = jest.fn() | ||
|
|
||
| const tree = render( | ||
| <Provider store={store}> | ||
| <RestrictedCeloExchange onPressWithdraw={onPressWithdraw} /> | ||
| </Provider> | ||
| ) | ||
|
|
||
| expect(onPressWithdraw).not.toHaveBeenCalled() | ||
| expect(tree.queryByTestId('WithdrawCELO')).toBeFalsy() | ||
| }) | ||
| }) |
Oops, something went wrong.