From 169bc7eca4f624f9c60b53f2658d09960e4c6824 Mon Sep 17 00:00:00 2001 From: Harsh R <53080940+fullstackninja864@users.noreply.github.com> Date: Mon, 27 Sep 2021 08:34:45 +0530 Subject: [PATCH] DEX guideline page integration (#927) * Added dex guidelines screen for first visit on dex navigations * Updated existing e2e for dex guideline screen * E2E test case for dex guideline screen * Removed DexContext dependancy for dex guideline * Updated Dex guide logic * Updated unit test case * bump * merge * center align button * breaking e2e Co-authored-by: thedoublejay --- mobile-app/app/api/index.ts | 1 + .../display_dexguidelines_storage.ts | 20 + mobile-app/app/components/Button.tsx | 2 +- .../__snapshots__/Button.test.tsx.snap | 18 + .../screens/Balances/BalancesNavigator.tsx | 3 +- .../screens/Dex/DexGuidelines.test.tsx | 16 + .../screens/Dex/DexGuidelines.tsx | 99 + .../AppNavigator/screens/Dex/DexNavigator.tsx | 4 +- .../AppNavigator/screens/Dex/DexScreen.tsx | 39 +- .../__snapshots__/DexGuidelines.test.tsx.snap | 416 +++ .../screens/Settings/SettingsNavigator.tsx | 3 +- .../Transactions/TransactionsNavigator.tsx | 3 +- .../EmptyTransaction.test.tsx.snap | 1 + .../WalletNavigator/WalletNavigator.tsx | 3 +- .../CreateWalletGuidelines.test.tsx.snap | 1 + mobile-app/app/translations/languages/de.json | 12 + .../app/translations/languages/zh-Hans.json | 12 + .../app/translations/languages/zh-Hant.json | 12 + .../wallet/dex/add_liquidity.spec.ts | 1 + .../wallet/dex/available_pool_pairs.spec.ts | 1 + .../wallet/dex/dex_guidelines.spec.ts | 22 + .../functional/wallet/dex/poolswap.spec.ts | 4 + .../wallet/dex/remove_liquidity.spec.ts | 1 + .../wallet/settings/networkDetails.spec.ts | 27 +- .../cypress/integration/smoke/smoke.spec.ts | 2 + package-lock.json | 3164 +++++------------ 26 files changed, 1654 insertions(+), 2233 deletions(-) create mode 100644 mobile-app/app/api/persistence/display_dexguidelines_storage.ts create mode 100644 mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.test.tsx create mode 100644 mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.tsx create mode 100644 mobile-app/app/screens/AppNavigator/screens/Dex/__snapshots__/DexGuidelines.test.tsx.snap create mode 100644 mobile-app/cypress/integration/functional/wallet/dex/dex_guidelines.spec.ts diff --git a/mobile-app/app/api/index.ts b/mobile-app/app/api/index.ts index cce84d34bd..b6b4cd1f61 100644 --- a/mobile-app/app/api/index.ts +++ b/mobile-app/app/api/index.ts @@ -2,3 +2,4 @@ export * from './secured' export * from './logging' export { ThemePersistence } from './persistence/theme_storage' export { LanguagePersistence } from './persistence/language_storage' +export { DisplayDexGuidelinesPersistence } from './persistence/display_dexguidelines_storage' diff --git a/mobile-app/app/api/persistence/display_dexguidelines_storage.ts b/mobile-app/app/api/persistence/display_dexguidelines_storage.ts new file mode 100644 index 0000000000..4252c2db46 --- /dev/null +++ b/mobile-app/app/api/persistence/display_dexguidelines_storage.ts @@ -0,0 +1,20 @@ +import AsyncStorage from '@react-native-async-storage/async-storage' + +/** + * Display dex guideline storage provider +*/ +const KEY = 'WALLET.DISPLAY_DEXGUIDELINES' + +async function set (dexVisited: boolean): Promise { + await AsyncStorage.setItem(KEY, dexVisited.toString()) +} + +async function get (): Promise { + const val = await AsyncStorage.getItem(KEY) + return val !== 'false' +} + +export const DisplayDexGuidelinesPersistence = { + set, + get +} diff --git a/mobile-app/app/components/Button.tsx b/mobile-app/app/components/Button.tsx index 8d997657ad..0108edaec3 100644 --- a/mobile-app/app/components/Button.tsx +++ b/mobile-app/app/components/Button.tsx @@ -49,7 +49,7 @@ export function Button (props: ButtonProps): JSX.Element { text !== undefined && ( <> {isSubmitting && } - + {text} diff --git a/mobile-app/app/components/__snapshots__/Button.test.tsx.snap b/mobile-app/app/components/__snapshots__/Button.test.tsx.snap index bc18299b6d..28fb6b99e3 100644 --- a/mobile-app/app/components/__snapshots__/Button.test.tsx.snap +++ b/mobile-app/app/components/__snapshots__/Button.test.tsx.snap @@ -84,6 +84,7 @@ exports[`button should match styling of button type fill-primary 1`] = ` "color": "rgba(255, 0, 175, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -142,6 +143,7 @@ exports[`button should match styling of button type fill-primary 2`] = ` "color": "rgba(163, 163, 163, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -207,6 +209,7 @@ exports[`button should match styling of button type fill-primary 3`] = ` "fontFamily": "BoldFont", "fontWeight": "700", "marginLeft": 8, + "textAlign": "center", }, ] } @@ -261,6 +264,7 @@ exports[`button should match styling of button type fill-secondary 1`] = ` "color": "rgba(91, 15, 255, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -319,6 +323,7 @@ exports[`button should match styling of button type fill-secondary 2`] = ` "color": "rgba(163, 163, 163, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -384,6 +389,7 @@ exports[`button should match styling of button type fill-secondary 3`] = ` "fontFamily": "BoldFont", "fontWeight": "700", "marginLeft": 8, + "textAlign": "center", }, ] } @@ -438,6 +444,7 @@ exports[`button should match styling of button type flat-primary 1`] = ` "color": "rgba(255, 0, 175, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -496,6 +503,7 @@ exports[`button should match styling of button type flat-primary 2`] = ` "color": "rgba(163, 163, 163, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -561,6 +569,7 @@ exports[`button should match styling of button type flat-primary 3`] = ` "fontFamily": "BoldFont", "fontWeight": "700", "marginLeft": 8, + "textAlign": "center", }, ] } @@ -615,6 +624,7 @@ exports[`button should match styling of button type flat-secondary 1`] = ` "color": "rgba(91, 15, 255, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -673,6 +683,7 @@ exports[`button should match styling of button type flat-secondary 2`] = ` "color": "rgba(163, 163, 163, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -738,6 +749,7 @@ exports[`button should match styling of button type flat-secondary 3`] = ` "fontFamily": "BoldFont", "fontWeight": "700", "marginLeft": 8, + "textAlign": "center", }, ] } @@ -792,6 +804,7 @@ exports[`button should match styling of button type outline-primary 1`] = ` "color": "rgba(255, 0, 175, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -850,6 +863,7 @@ exports[`button should match styling of button type outline-primary 2`] = ` "color": "rgba(163, 163, 163, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -915,6 +929,7 @@ exports[`button should match styling of button type outline-primary 3`] = ` "fontFamily": "BoldFont", "fontWeight": "700", "marginLeft": 8, + "textAlign": "center", }, ] } @@ -969,6 +984,7 @@ exports[`button should match styling of button type outline-secondary 1`] = ` "color": "rgba(91, 15, 255, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -1027,6 +1043,7 @@ exports[`button should match styling of button type outline-secondary 2`] = ` "color": "rgba(163, 163, 163, 1)", "fontFamily": "BoldFont", "fontWeight": "700", + "textAlign": "center", }, ] } @@ -1092,6 +1109,7 @@ exports[`button should match styling of button type outline-secondary 3`] = ` "fontFamily": "BoldFont", "fontWeight": "700", "marginLeft": 8, + "textAlign": "center", }, ] } diff --git a/mobile-app/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx b/mobile-app/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx index f3daaa3dde..6c55c93924 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Balances/BalancesNavigator.tsx @@ -231,7 +231,8 @@ export function BalancesNavigator (): JSX.Element { name='NetworkDetails' options={{ headerTitle: translate('screens/NetworkDetails', 'Wallet Network'), - headerBackTitleVisible: false + headerBackTitleVisible: false, + headerBackTestID: 'network_details_header_back' }} /> diff --git a/mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.test.tsx b/mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.test.tsx new file mode 100644 index 0000000000..ef96761efb --- /dev/null +++ b/mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.test.tsx @@ -0,0 +1,16 @@ +import { render, waitFor } from '@testing-library/react-native' +import * as React from 'react' +import { DexGuidelines } from './DexGuidelines' + +jest.mock('../../../../contexts/ThemeProvider') + +describe('Dex guide', () => { + it('should match snapshot', async () => { + const onClose = jest.fn + const rendered = render( + + ) + await waitFor(() => rendered.toJSON() !== null) + expect(rendered.toJSON()).toMatchSnapshot() + }) +}) diff --git a/mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.tsx b/mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.tsx new file mode 100644 index 0000000000..793b8776ec --- /dev/null +++ b/mobile-app/app/screens/AppNavigator/screens/Dex/DexGuidelines.tsx @@ -0,0 +1,99 @@ +import { MaterialIcons } from '@expo/vector-icons' +import * as React from 'react' +import { View } from '@components/index' +import { Button } from '@components/Button' +import { ThemedIcon, ThemedScrollView, ThemedText } from '@components/themed' +import { tailwind } from '@tailwind' +import { translate } from '@translations' + +interface Props { + onClose: () => void +} + +interface GuidelineItem { + icon: React.ComponentProps['name'] + title: string + subtitle: string +} + +// TODO (Harsh): handle language change bug, when user change the language, sometime it didnt get update the satic page +export function DexGuidelines ({ onClose }: Props): JSX.Element { + const guidelines: GuidelineItem[] = [ + { + title: 'Add liquidity', + subtitle: 'Earn high yields by supplying token pairs to the liquidity pool.', + icon: 'add' + }, + { + title: 'Swap tokens', + subtitle: 'Conveniently swap participating tokens within the liquidity pool.', + icon: 'swap-horiz' + }, + { + title: 'Withdraw at any time', + subtitle: 'You have full control over your tokens unlike any other.', + icon: 'account-balance-wallet' + } + ] + + return ( + + + {translate('screens/DexGuidelines', 'Decentralized Exchange')} + + + + {translate('screens/DexGuidelines', 'Participate in supplying liquidity to power the DEX (Decentralized Exchange). Use your tokens to earn high returns (of up to 100%).')} + + + { + guidelines.map((g, i) => ( + + + + + + {translate('screens/DexGuidelines', g.title)} + + + + {translate('screens/DexGuidelines', g.subtitle)} + + + + )) + } + +