feat: Reactions

Added Reaction support for messages

Added persistance handling
Refactored providers
Removed conversation screen

App.tsx

@@ -1,87 +1,14 @@
 import './src/polyfills';
 
-import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-import {Ethereum} from '@thirdweb-dev/chains';
-import {
-  ThirdwebProvider,
-  localWallet,
-  metamaskWallet,
-  walletConnect,
-} from '@thirdweb-dev/react-native';
-import {NativeBaseProvider, extendTheme} from 'native-base';
 import React from 'react';
-import Config from 'react-native-config';
-import {mainnet} from 'viem/chains';
-import {WagmiConfig, configureChains, createConfig} from 'wagmi';
-import {publicProvider} from 'wagmi/providers/public';
-import {ClientProvider} from './src/context/ClientContext';
 import {AppNavigation} from './src/navigation/AppNavigation';
-import {colors} from './src/theme/colors';
-
-const {publicClient, webSocketPublicClient} = configureChains(
-  [mainnet],
-  [publicProvider()],
-);
-
-const config = createConfig({
-  autoConnect: true,
-  publicClient,
-  webSocketPublicClient,
-});
-
-const queryClient = new QueryClient();
+import {Providers} from './src/providers';
 
 function App(): React.JSX.Element {
-  const newColorTheme = {
-    primary: {
-      900: colors.actionPrimary,
-      800: colors.actionPrimary,
-      700: colors.actionPrimary,
-      600: colors.actionPrimary,
-      500: colors.actionPrimary,
-      400: colors.actionPrimary,
-      300: colors.actionPrimary,
-    },
-    brand: {
-      900: colors.actionPrimary,
-      800: colors.actionPrimary,
-      700: colors.actionPrimary,
-      600: colors.actionPrimary,
-      500: colors.actionPrimary,
-      400: colors.actionPrimary,
-      300: colors.actionPrimary,
-    },
-  };
-  const theme = extendTheme({colors: newColorTheme});
   return (
-    <WagmiConfig config={config}>
-      <ThirdwebProvider
-        activeChain={Ethereum}
-        autoConnect={true}
-        clientId={Config.THRID_WEB_CLIENT_ID}
-        dAppMeta={{
-          name: 'XMTP Example',
-          description:
-            'This basic messaging app has an intentionally unopinionated UI to help make it easier for you to build with.',
-          logoUrl:
-            'https://pbs.twimg.com/profile_images/1668323456935510016/2c_Ue8dF_400x400.jpg',
-          url: 'https://xmtp.org',
-        }}
-        supportedWallets={[
-          localWallet(),
-          metamaskWallet(),
-          // coinbaseWallet(),
-          walletConnect({recommended: true}),
-        ]}>
-        <NativeBaseProvider theme={theme}>
-          <QueryClientProvider client={queryClient}>
-            <ClientProvider>
-              <AppNavigation />
-            </ClientProvider>
-          </QueryClientProvider>
-        </NativeBaseProvider>
-      </ThirdwebProvider>
-    </WagmiConfig>
+    <Providers>
+      <AppNavigation />
+    </Providers>
   );
 }
 

package.json

@@ -24,7 +24,9 @@
     "@react-native-community/netinfo": "^11.2.1",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
-    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/query-sync-storage-persister": "^5.36.1",
+    "@tanstack/react-query": "^5.36.2",
+    "@tanstack/react-query-persist-client": "^5.36.2",
     "@thirdweb-dev/react-native": "^0.5.4",
     "@thirdweb-dev/react-native-compat": "^0.5.4",
     "@xmtp/frames-client": "^0.5.1",

src/components/Message.tsx

@@ -0,0 +1,62 @@
+import {DecodedMessage} from '@xmtp/react-native-sdk';
+import {Box, VStack} from 'native-base';
+import React, {FC} from 'react';
+import {Pressable} from 'react-native';
+import {ContentTypes, SupportedContentTypes} from '../consts/ContentTypes';
+import {MessageIdReactionsMapping} from '../queries/useGroupMessagesQuery';
+import {mmkvStorage} from '../services/mmkvStorage';
+import {colors} from '../theme/colors';
+import {formatAddress} from '../utils/formatAddress';
+import {getMessageTimeDisplay} from '../utils/getMessageTimeDisplay';
+import {Text} from './common/Text';
+import {ConversationMessageContent} from './messageContent/ConversationMessageContent';
+
+export interface MessageProps {
+  message: DecodedMessage<SupportedContentTypes>;
+  isMe: boolean;
+  reactions: MessageIdReactionsMapping[string];
+}
+
+export const Message: FC<MessageProps> = ({message, isMe, reactions}) => {
+  if (message.contentTypeId === ContentTypes.Reaction) {
+    return null;
+  }
+  return (
+    <Pressable>
+      <Box marginLeft={6} marginRight={6} marginY={2} flexShrink={1}>
+        <VStack>
+          {!isMe && (
+            <VStack justifyItems={'flex-end'}>
+              <Text
+                color={colors.primaryN200}
+                textAlign={'end'}
+                typography="text-xs/semi-bold"
+                alignSelf={'flex-start'}>
+                {mmkvStorage.getEnsName(message.senderAddress) ??
+                  formatAddress(message.senderAddress)}
+              </Text>
+            </VStack>
+          )}
+          <ConversationMessageContent
+            message={message}
+            isMe={isMe}
+            reactions={reactions}
+          />
+          <Text
+            flexShrink={1}
+            color={colors.primaryN200}
+            typography="text-xs/semi-bold"
+            alignSelf={
+              message.contentTypeId === ContentTypes.GroupMembershipChange
+                ? 'center'
+                : isMe
+                ? 'flex-end'
+                : 'flex-start'
+            }>
+            {getMessageTimeDisplay(message.sent)}
+          </Text>
+        </VStack>
+      </Box>
+    </Pressable>
+  );
+};