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 <[email protected]>

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'

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<void> {
+  await AsyncStorage.setItem(KEY, dexVisited.toString())
+}
+
+async function get (): Promise<boolean> {
+  const val = await AsyncStorage.getItem(KEY)
+  return val !== 'false'
+}
+
+export const DisplayDexGuidelinesPersistence = {
+  set,
+  get
+}

mobile-app/app/components/Button.tsx

@@ -49,7 +49,7 @@ export function Button (props: ButtonProps): JSX.Element {
         text !== undefined && (
           <>
             {isSubmitting && <ThemedActivityIndicator />}
-            <Text style={(tailwind(`${textStyle} font-bold`))}>
+            <Text style={(tailwind(`${textStyle} font-bold text-center`))}>
               {text}
             </Text>
           </>

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'
         }}
       />
     </BalanceStack.Navigator>

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(
+      <DexGuidelines onClose={onClose} />
+    )
+    await waitFor(() => rendered.toJSON() !== null)
+    expect(rendered.toJSON()).toMatchSnapshot()
+  })
+})

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<typeof MaterialIcons>['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 (
+    <ThemedScrollView
+      dark={tailwind('bg-gray-900')}
+      light={tailwind('bg-white')}
+      style={tailwind('flex-1 p-4 pt-6')}
+      testID='dex_guidelines_screen'
+    >
+      <ThemedText
+        style={tailwind('text-lg font-semibold')}
+      >
+        {translate('screens/DexGuidelines', 'Decentralized Exchange')}
+      </ThemedText>
+
+      <ThemedText
+        dark={tailwind('text-gray-400')}
+        light={tailwind('text-gray-500')}
+        style={tailwind('mt-1 text-sm font-medium mb-4')}
+      >
+        {translate('screens/DexGuidelines', 'Participate in supplying liquidity to power the DEX (Decentralized Exchange). Use your tokens to earn high returns (of up to 100%).')}
+      </ThemedText>
+
+      {
+        guidelines.map((g, i) => (
+          <View
+            key={i}
+            style={tailwind('flex-row items-center my-4')}
+          >
+            <ThemedIcon
+              iconType='MaterialIcons'
+              name={g.icon}
+              size={32}
+            />
+
+            <View style={tailwind('flex-col flex-auto ml-6')}>
+              <ThemedText style={tailwind('font-medium')}>
+                {translate('screens/DexGuidelines', g.title)}
+              </ThemedText>
+
+              <ThemedText
+                dark={tailwind('text-gray-400')}
+                light={tailwind('text-gray-500')}
+                numberOfLines={4}
+                style={tailwind('text-sm')}
+              >
+                {translate('screens/DexGuidelines', g.subtitle)}
+              </ThemedText>
+            </View>
+          </View>
+        ))
+      }
+
+      <Button
+        label={translate('screens/DexGuidelines', 'CONTINUE')}
+        margin='mx-0 mt-10 mb-8'
+        onPress={onClose}
+        testID='close_dex_guidelines'
+        title={translate('screens/DexGuidelines', 'CONTINUE')}
+      />
+    </ThemedScrollView>
+  )
+}

mobile-app/app/screens/AppNavigator/screens/Dex/DexNavigator.tsx

@@ -37,6 +37,7 @@ const DexStack = createStackNavigator<DexParamList>()
 
 export function DexNavigator (): JSX.Element {
   const headerContainerTestId = 'dex_header_container'
+
   return (
     <DexStack.Navigator
       initialRouteName='DexScreen'
@@ -138,7 +139,8 @@ export function DexNavigator (): JSX.Element {
         name='NetworkDetails'
         options={{
           headerTitle: translate('screens/NetworkDetails', 'Wallet Network'),
-          headerBackTitleVisible: false
+          headerBackTitleVisible: false,
+          headerBackTestID: 'network_details_header_back'
         }}
       />
     </DexStack.Navigator>

mobile-app/app/screens/AppNavigator/screens/Dex/DexScreen.tsx

@@ -4,6 +4,7 @@ import { MaterialIcons } from '@expo/vector-icons'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
+import { useEffect, useState } from 'react'
 import NumberFormat from 'react-number-format'
 import { useSelector } from 'react-redux'
 import { View } from '@components/index'
@@ -16,6 +17,8 @@ import { useTokensAPI } from '@hooks/wallet/TokensAPI'
 import { tailwind } from '@tailwind'
 import { translate } from '@translations'
 import { DexParamList } from './DexNavigator'
+import { DisplayDexGuidelinesPersistence, Logging } from '@api'
+import { DexGuidelines } from './DexGuidelines'
 
 enum SectionKey {
   YourLiquidity = 'YOUR LIQUIDITY',
@@ -24,6 +27,8 @@ enum SectionKey {
 
 export function DexScreen (): JSX.Element {
   const navigation = useNavigation<NavigationProp<DexParamList>>()
+  const [isLoaded, setIsLoaded] = useState<boolean>(false)
+  const [displayGuidelines, setDisplayGuidelines] = useState<boolean>(true)
   const tokens = useTokensAPI()
   const pairs = usePoolPairsAPI()
   const yourLPTokens = useSelector(() => tokens.filter(({ isLPS }) => isLPS).map(data => ({
@@ -32,17 +37,47 @@ export function DexScreen (): JSX.Element {
   })))
 
   const onAdd = (data: PoolPairData): void => {
-    navigation.navigate({ name: 'AddLiquidity', params: { pair: data }, merge: true })
+    navigation.navigate({
+      name: 'AddLiquidity',
+      params: { pair: data },
+      merge: true
+    })
   }
 
   const onRemove = (data: PoolPairData): void => {
-    navigation.navigate({ name: 'RemoveLiquidity', params: { pair: data }, merge: true })
+    navigation.navigate({
+      name: 'RemoveLiquidity',
+      params: { pair: data },
+      merge: true
+    })
   }
 
   const isEmpty = (data: any[]): boolean => {
     return data.length === 0
   }
 
+  useEffect(() => {
+    DisplayDexGuidelinesPersistence.get()
+      .then((shouldDisplayGuidelines: boolean) => {
+        setDisplayGuidelines(shouldDisplayGuidelines)
+      })
+      .catch((err) => Logging.error(err))
+      .finally(() => setIsLoaded(true))
+  }, [])
+
+  const onGuidelinesClose = async (): Promise<void> => {
+    await DisplayDexGuidelinesPersistence.set(false)
+    setDisplayGuidelines(false)
+  }
+
+  if (!isLoaded) {
+    return <></>
+  }
+
+  if (displayGuidelines) {
+    return <DexGuidelines onClose={onGuidelinesClose} />
+  }
+
   return (
     <ThemedSectionList
       keyExtractor={(item, index) => `${index}`}