feat: Create Tx history page (#14)

* feat: create tx-history list components

* feat: use the new cards components in the TxHistory list

* fix: remove todo

* feat: add missing variants to tx history page

* feat: add missing multiSendCall information in the txList

* feat: create static transactions messages layout

* fix: android crash

* feat: add detox test for transactions

* fix: add the right name in the bulk transactions section

* fix: scroll margin in the txHistory component

* fix: story book of the TxCards components

* fix: unit tests

* fix: detox tests

* fix: remove unnecessary comment

* fix: remove swap order comment

* fix: tx history in light mode

* fix: use snapshot tests instead of inline object comparison

* fix: remove TODO comments

* chore: rename tx cards

---------

Co-authored-by: Daniel Dimitrov <[email protected]>

Author: clovisdasilvaneto

app/(tabs)/_layout.tsx

@@ -18,10 +18,12 @@ export default function TabLayout() {
           tabBarIcon: ({ color }) => <TabBarIcon name={'wallet'} color={color} />,
         }}
       />
+
       <Tabs.Screen
         name="transactions"
         options={{
           title: 'Transactions',
+          tabBarTestID: 'transactions',
           tabBarIcon: ({ color }) => <TabBarIcon name={'transactions'} color={color} />,
         }}
       />

app/(tabs)/index.tsx

@@ -1,27 +1,31 @@
-import { StyleSheet } from 'react-native'
-
-import TxHistory from '@/src/features/TxHistory'
+import Ionicons from '@expo/vector-icons/Ionicons'
+import { StyleSheet, View } from 'react-native'
 
+import ParallaxScrollView from '@/src/components/ParallaxScrollView'
 import { Text } from 'tamagui'
-import { SafeAreaView } from 'react-native-safe-area-context'
 
 export default function HomeScreen() {
   return (
-    <SafeAreaView style={styles.content}>
-      <Text testID="welcome-title" paddingHorizontal={20}>
-        Transactions History
-      </Text>
-
-      <TxHistory />
-    </SafeAreaView>
+    <ParallaxScrollView
+      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
+      headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}
+    >
+      <View style={styles.titleContainer}>
+        <Text testID="explore-title">HomeScreen</Text>
+      </View>
+    </ParallaxScrollView>
   )
 }
 
 const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    flexDirection: 'column',
-    width: '100%',
-    rowGap: 20,
+  headerImage: {
+    color: '#808080',
+    bottom: -90,
+    left: -35,
+    position: 'absolute',
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    gap: 8,
   },
 })

app/(tabs)/transactions.tsx

@@ -0,0 +1,56 @@
+import { Tabs } from 'expo-router'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Title from '@/src/components/Title'
+import InlineTab from '@/src/components/InlineTab'
+import { View } from 'tamagui'
+
+const TransactiosHeader = () => (
+  <View paddingHorizontal="$3">
+    <Title paddingTop={'$10'} marginBottom="$8" testID="welcome-title">
+      Transactions
+    </Title>
+
+    <InlineTab
+      items={[
+        {
+          path: '/transactions',
+          label: 'History',
+        },
+        {
+          path: '/transactions/messages',
+          label: 'Messages',
+        },
+      ]}
+    />
+  </View>
+)
+
+export default function TransactionsLayout() {
+  return (
+    <SafeAreaView style={styles.content}>
+      <TransactiosHeader />
+
+      <Tabs
+        screenOptions={{
+          headerShown: false,
+          tabBarShowLabel: false,
+          tabBarStyle: { display: 'none' },
+        }}
+      >
+        <Tabs.Screen name="index" />
+        <Tabs.Screen name="messages" />
+      </Tabs>
+    </SafeAreaView>
+  )
+}
+
+export const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexDirection: 'column',
+    width: '100%',
+    rowGap: 10,
+  },
+})

app/(tabs)/transactions/_layout.tsx

@@ -0,0 +1,5 @@
+import TxHistory from '@/src/features/TxHistory'
+
+export default function TransactionsScreen() {
+  return <TxHistory />
+}

app/(tabs)/transactions/index.tsx

@@ -0,0 +1,28 @@
+import { SafeFontIcon } from '@/src/components/SafeFontIcon/SafeFontIcon'
+import SafeListItem from '@/src/components/SafeListItem'
+import { formatWithSchema } from '@/src/utils/date'
+import React from 'react'
+import { Text, View } from 'tamagui'
+
+function Messages() {
+  return (
+    <View paddingHorizontal="$3">
+      <SafeListItem.Header title={formatWithSchema(Date.now(), 'MMM d, yyyy')} />
+      <SafeListItem
+        label={'Hello Web3Modal Eth'}
+        leftNode={
+          <View backgroundColor="$borderLightDark" padding="$2" borderRadius={100}>
+            <SafeFontIcon name="sign" color="$primaryLight" />
+          </View>
+        }
+        rightNode={
+          <View backgroundColor="#1D3D28" paddingHorizontal={'$3'} paddingVertical={'$1'} borderRadius={25}>
+            <Text color={'$primary'}>Success</Text>
+          </View>
+        }
+      />
+    </View>
+  )
+}
+
+export default Messages

app/(tabs)/transactions/messages.tsx

@@ -22,7 +22,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 20,
   },
   link: {
     marginTop: 15,

app/+not-found.tsx

@@ -1,18 +1,18 @@
-describe('Example', () => {
+describe('Welcome', () => {
   beforeAll(async () => {
-    await device.launchApp();
-  });
+    await device.launchApp()
+  })
 
   beforeEach(async () => {
-    await device.reloadReactNative();
-  });
+    await device.reloadReactNative()
+  })
 
   it('should have welcome screen', async () => {
-    await expect(element(by.id('welcome-title'))).toBeVisible();
-  });
+    await expect(element(by.id('welcome-title'))).toBeVisible()
+  })
 
   it('should show hello screen after tap', async () => {
-    await element(by.text('Explore')).tap();
-    await expect(element(by.id('explore-title'))).toBeVisible();
-  });
-});
+    await element(by.text('Explore')).tap()
+    await expect(element(by.id('explore-title'))).toBeVisible()
+  })
+})

e2e/starter.test.js

@@ -0,0 +1,16 @@
+describe('Transactions', () => {
+  beforeAll(async () => {
+    await device.launchApp()
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+  })
+
+  it('should navigate to transactions and be able to scroll', async () => {
+    await element(by.id('transactions')).tap()
+    await expect(element(by.text('History'))).toBeVisible()
+    await element(by.id('tx-history-list')).scroll(500, 'down')
+    await element(by.id('tx-history-list')).scroll(500, 'up')
+  })
+})

e2e/transactions.test.js

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Container applies the correct styles 1`] = `
+{
+  "borderBottomLeftRadius": 7,
+  "borderBottomRightRadius": 7,
+  "borderTopLeftRadius": 7,
+  "borderTopRightRadius": 7,
+  "flexDirection": "column",
+  "paddingBottom": 16,
+  "paddingLeft": 16,
+  "paddingRight": 16,
+  "paddingTop": 16,
+}
+`;