chore: bump deps (#941)

* fix: build

* chore: cleanup

* fix: envs

* chore: animations

* bg img

* cleanup

* chore: add build script

* versions

* splash loading

* fix: close arrow

* fix: animation

* fix: loading

* fix: auth state

* cleanup

* cleanup

* cleanup

* feat: memotize headers

* feat: memotize headers

* chore: add image transition

* fix: sharable link

* chore: bump deps

* fix: script

apps/mobile/.gitignore

@@ -9,6 +9,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.env.*
 
 # macOS
 .DS_Store

apps/mobile/app.config.ts

@@ -1,7 +1,7 @@
 import type { ConfigContext, ExpoConfig } from 'expo/config'
 
 const config = ({ config }: ConfigContext): Partial<ExpoConfig> => {
-  if (process.env.MY_ENVIRONMENT === 'production') {
+  if (process.env.LENS_ENV === 'mainnet') {
     /* production config */
     return {
       ...config

apps/mobile/app.json

@@ -10,9 +10,10 @@
     "userInterfaceStyle": "light",
     "assetBundlePatterns": ["**/*"],
     "ios": {
-      "supportsTablet": true,
+      "supportsTablet": false,
       "jsEngine": "hermes",
-      "bundleIdentifier": "xyz.pripe.mobile"
+      "bundleIdentifier": "xyz.pripe.mobile",
+      "associatedDomains": ["applinks:pripe.xyz"]
     },
     "android": {
       "adaptiveIcon": {
@@ -25,6 +26,18 @@
       "eas": {
         "projectId": "d2c982ca-1bba-4592-bea3-c4cb6516d91f"
       }
-    }
+    },
+    "plugins": [
+      [
+        "expo-notifications",
+        {
+          "icon": "./assets/icon.png",
+          "color": "#000",
+          "sounds": [
+            "./assets/notification.wav"
+          ]
+        }
+      ]
+    ]
   }
 }

apps/mobile/eas.json

@@ -1,16 +1,27 @@
 {
   "cli": {
-    "version": ">= 3.15.0"
+    "version": ">= 3.15.0",
+    "appVersionSource": "remote"
   },
   "build": {
     "development": {
       "developmentClient": true,
-      "distribution": "internal"
+      "distribution": "internal",
+      "env": {
+        "LENS_ENV": "testnet"
+      }
     },
     "preview": {
-      "distribution": "internal"
+      "distribution": "internal",
+      "env": {
+        "LENS_ENV": "mainnet"
+      }
     },
-    "production": {}
+    "production": {
+      "env": {
+        "LENS_ENV": "mainnet"
+      }
+    }
   },
   "submit": {
     "production": {}

apps/mobile/metro.config.js

@@ -1,5 +1,5 @@
 // Learn more https://docs.expo.dev/guides/monorepos
-const { getDefaultConfig } = require('expo/metro-config')
+const { getDefaultConfig } = require('@expo/metro-config')
 const path = require('path')
 
 // Find the project and workspace directories

apps/mobile/package.json

@@ -9,13 +9,16 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "lint": "eslint . --ext .js,.ts,.tsx"
+    "lint": "eslint . --ext .js,.ts,.tsx",
+    "eas:build": "eas build  --platform ios"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.17",
+    "@expo/metro-config": "^0.10.7",
     "@gorhom/bottom-sheet": "^4.4.7",
     "@livepeer/react-native": "^1.8.0",
     "@react-native-async-storage/async-storage": "1.18.2",
-    "@react-native-community/netinfo": "9.3.10",
+    "@react-native-community/netinfo": "9.4.1",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
@@ -24,6 +27,7 @@
     "expo": "~48.0.18",
     "expo-av": "~13.4.1",
     "expo-blur": "~12.4.1",
+    "expo-constants": "~14.4.2",
     "expo-crypto": "~12.4.1",
     "expo-device": "~5.4.0",
     "expo-haptics": "~12.4.0",
@@ -32,13 +36,11 @@
     "expo-linking": "^5.0.2",
     "expo-notifications": "~0.18.1",
     "expo-sensors": "~12.3.0",
-    "expo-splash-screen": "~0.20.4",
+    "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.6.0",
-    "expo-updates": "~0.18.10",
     "moti": "^0.25.3",
     "react": "18.2.0",
-    "react-native": "0.72.3",
-    "react-native-animatable": "^1.3.3",
+    "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-get-random-values": "~1.9.0",
     "react-native-modal": "^13.0.1",
@@ -50,7 +52,7 @@
     "react-native-svg": "13.10.0",
     "react-navigation-shared-element": "^3.1.3",
     "uuid": "3.4.0",
-    "viem": "^1.3.1",
+    "viem": "^1.4.2",
     "zustand": "^4.3.9"
   },
   "devDependencies": {
@@ -68,8 +70,5 @@
     "babel-plugin-module-resolver": "^5.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.3"
-  },
-  "engines": {
-    "node": ">=16.0.0"
   }
 }

apps/mobile/src/App.tsx

@@ -68,11 +68,11 @@ const App = (): JSX.Element => {
         <LivepeerConfig client={livepeerClient}>
           <NotificationsProvider />
           <WalletConnectModal
+            themeMode="dark"
             projectId={WC_PROJECT_ID}
+            explorerExcludedWalletIds="ALL"
             providerMetadata={providerMetadata}
-            themeMode="dark"
             explorerRecommendedWalletIds={explorerRecommendedWalletIds}
-            explorerExcludedWalletIds="ALL"
           />
           <AppLoading>
             <GestureHandlerRootView style={styles.gestureHandlerRootView}>

apps/mobile/src/components/bytes/ByteCard.tsx

@@ -7,10 +7,10 @@ import {
 import type { Publication } from '@lenstube/lens'
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
 import { ResizeMode, Video } from 'expo-av'
-import { MotiView } from 'moti'
 import type { FC } from 'react'
 import React, { useEffect, useRef } from 'react'
 import { StyleSheet, useWindowDimensions } from 'react-native'
+import Animated, { FadeIn } from 'react-native-reanimated'
 
 import { useIsFocused } from '~/hooks/navigation'
 
@@ -65,18 +65,8 @@ const ByteCard: FC<Props> = ({ byte, isActive }) => {
   }, [isFocused, isActive])
 
   return (
-    <MotiView
-      from={{
-        opacity: 0,
-        scale: 0.5
-      }}
-      animate={{
-        opacity: 1,
-        scale: 1
-      }}
-      transition={{
-        type: 'timing'
-      }}
+    <Animated.View
+      entering={FadeIn.duration(500)}
       style={[styles.byteCard, { height: BYTE_HEIGHT, width }]}
     >
       <Video
@@ -92,7 +82,7 @@ const ByteCard: FC<Props> = ({ byte, isActive }) => {
         posterSource={{ uri: thumbnailUrl }}
         style={{ width, height: BYTE_HEIGHT }}
       />
-    </MotiView>
+    </Animated.View>
   )
 }
 

apps/mobile/src/components/common/AppLoading.tsx

@@ -7,7 +7,12 @@ import Animated, { FadeInUp, FadeOutUp } from 'react-native-reanimated'
 
 import { theme } from '~/helpers/theme'
 
-import { useCachedResources, useEffect, usePlatform } from '../../hooks'
+import {
+  useAuth,
+  useCachedResources,
+  useEffect,
+  usePlatform
+} from '../../hooks'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -78,15 +83,16 @@ const Splash = () => {
 }
 
 export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
-  const isLoadingComplete = useCachedResources()
+  const isCached = useCachedResources()
+  const isAuthValidated = useAuth()
 
   useEffect(() => {
-    if (isLoadingComplete !== null) {
+    if (isCached && isAuthValidated) {
       SplashScreen.hideAsync()
     }
-  }, [isLoadingComplete])
+  }, [isCached, isAuthValidated])
 
-  if (!isLoadingComplete) {
+  if (!isCached || !isAuthValidated) {
     return <Splash />
   }
 

apps/mobile/src/components/common/AudioCard.tsx

@@ -11,7 +11,7 @@ import type { Attribute, Publication } from '@lenstube/lens'
 import { useNavigation } from '@react-navigation/native'
 import { Image as ExpoImage } from 'expo-image'
 import type { FC } from 'react'
-import React from 'react'
+import React, { memo } from 'react'
 import {
   Pressable,
   StyleSheet,
@@ -89,6 +89,7 @@ const AudioCard: FC<Props> = ({ audio }) => {
           <SharedElement id={`video.watch.${audio.id}.thumbnail`}>
             <ExpoImage
               source={{ uri: thumbnailUrl }}
+              transition={300}
               contentFit="cover"
               style={[
                 styles.thumbnail,
@@ -121,6 +122,7 @@ const AudioCard: FC<Props> = ({ audio }) => {
             <ExpoImage
               source={{ uri: imageCdn(getProfilePicture(audio.profile)) }}
               contentFit="cover"
+              transition={300}
               style={{ width: 15, height: 15, borderRadius: 3 }}
             />
             <Text style={styles.otherInfo}>
@@ -145,4 +147,4 @@ const AudioCard: FC<Props> = ({ audio }) => {
   )
 }
 
-export default AudioCard
+export default memo(AudioCard)

apps/mobile/src/components/common/Container.tsx

@@ -1,15 +1,11 @@
 import { ALLOWED_HEX_CHARACTERS } from '@lenstube/constants'
-import type { Profile } from '@lenstube/lens'
-import { useUserProfilesQuery } from '@lenstube/lens'
-import { useWalletConnectModal } from '@walletconnect/modal-react-native'
 import { LinearGradient } from 'expo-linear-gradient'
 import type { FC, PropsWithChildren } from 'react'
 import React from 'react'
 import { StyleSheet } from 'react-native'
 
 import { theme } from '~/helpers/theme'
 import useMobileStore from '~/store'
-import { hydrateAuthTokens, useMobilePersistStore } from '~/store/persist'
 
 const styles = StyleSheet.create({
   background: {
@@ -18,49 +14,6 @@ const styles = StyleSheet.create({
 })
 
 const Container: FC<PropsWithChildren> = ({ children }) => {
-  const { address } = useWalletConnectModal()
-  const { accessToken } = hydrateAuthTokens()
-
-  const setChannels = useMobileStore((state) => state.setChannels)
-  const setSelectedChannel = useMobileStore((state) => state.setSelectedChannel)
-  const setUserSigNonce = useMobileStore((state) => state.setUserSigNonce)
-  const setSelectedChannelId = useMobilePersistStore(
-    (state) => state.setSelectedChannelId
-  )
-  const selectedChannelId = useMobilePersistStore(
-    (state) => state.selectedChannelId
-  )
-
-  const setUserChannels = (channels: Profile[]) => {
-    setChannels(channels)
-    const channel = channels.find((ch) => ch.id === selectedChannelId)
-    setSelectedChannel(channel ?? channels[0])
-    setSelectedChannelId(channel?.id)
-  }
-
-  const resetAuthState = () => {
-    setSelectedChannel(null)
-    setSelectedChannelId(null)
-  }
-
-  useUserProfilesQuery({
-    variables: {
-      request: { ownedBy: [address] }
-    },
-    skip: !accessToken || !address,
-    onCompleted: (data) => {
-      const channels = data?.profiles?.items as Profile[]
-      if (!channels.length) {
-        return resetAuthState()
-      }
-      setUserChannels(channels)
-      setUserSigNonce(data?.userSigNonces?.lensHubOnChainSigNonce)
-    },
-    onError: () => {
-      setSelectedChannelId(null)
-    }
-  })
-
   const homeGradientColor = useMobileStore((state) => state.homeGradientColor)
   const setHomeGradientColor = useMobileStore(
     (state) => state.setHomeGradientColor
@@ -84,7 +37,6 @@ const Container: FC<PropsWithChildren> = ({ children }) => {
   return (
     <LinearGradient
       colors={[generateJustOneColor(), 'transparent']}
-      // start={{ x: 1, y: 0.2 }}
       style={styles.background}
       locations={[0, 0.9]}
     >