chore: bump deps and profile modal

apps/api/package.json

@@ -19,7 +19,7 @@
     "@lenstube/constants": "*",
     "@lenstube/generic": "*",
     "@lenstube/lens": "*",
-    "@types/node": "20.4.7",
+    "@types/node": "20.4.8",
     "typescript": "5.1.6"
   }
 }

apps/embed/package.json

@@ -28,7 +28,7 @@
     "@lenstube/generic": "*",
     "@lenstube/lens": "*",
     "@lenstube/ui": "*",
-    "@types/node": "20.4.7",
+    "@types/node": "20.4.8",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.14",

apps/mobile/package.json

@@ -26,6 +26,7 @@
     "expo": "~48.0.18",
     "expo-av": "~13.2.1",
     "expo-blur": "~12.2.2",
+    "expo-clipboard": "~4.1.2",
     "expo-constants": "~14.2.1",
     "expo-crypto": "~12.2.1",
     "expo-device": "~5.2.1",
@@ -35,9 +36,11 @@
     "expo-linking": "~4.0.1",
     "expo-notifications": "~0.18.1",
     "expo-sensors": "~12.1.1",
+    "expo-sharing": "~11.2.2",
     "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.4",
+    "qrcode": "^1.5.3",
     "react": "18.2.0",
     "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
@@ -49,7 +52,9 @@
     "react-native-safe-area-context": "4.5.0",
     "react-native-shared-element": "0.8.8",
     "react-native-svg": "13.4.0",
+    "react-native-view-shot": "3.5.0",
     "react-navigation-shared-element": "^3.1.3",
+    "uuid": "^3.4.0",
     "viem": "^1.5.3",
     "zustand": "^4.4.0"
   },
@@ -66,6 +71,7 @@
     "@lenstube/generic": "*",
     "@lenstube/lens": "*",
     "@types/node": "20.4.5",
+    "@types/qrcode": "^1.5.1",
     "babel-plugin-module-resolver": "^5.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"

apps/mobile/src/App.tsx

@@ -3,7 +3,6 @@ import 'react-native-reanimated'
 import 'react-native-gesture-handler'
 
 import { ApolloProvider } from '@apollo/client'
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
 import {
   LIVEPEER_STUDIO_API_KEY,
   PRIPE_APP_DESCRIPTION,
@@ -70,15 +69,13 @@ const App = (): JSX.Element => {
           <WalletConnectModal
             themeMode="dark"
             projectId={WC_PROJECT_ID}
-            explorerExcludedWalletIds="ALL"
+            // explorerExcludedWalletIds="ALL"
             providerMetadata={providerMetadata}
             explorerRecommendedWalletIds={explorerRecommendedWalletIds}
           />
           <AppLoading>
             <GestureHandlerRootView style={styles.gestureHandlerRootView}>
-              <BottomSheetModalProvider>
-                <Navigation />
-              </BottomSheetModalProvider>
+              <Navigation />
             </GestureHandlerRootView>
           </AppLoading>
         </LivepeerConfig>

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

@@ -77,9 +77,9 @@ const AuthenticatedUser = () => {
         />
       </SharedElement>
       <Sheet sheetRef={profileSheetRef} snap={['60%']}>
-        <ScrollView style={{ paddingHorizontal: 10 }}>
+        <ScrollView style={{ paddingHorizontal: 10, paddingVertical: 20 }}>
           <Switch />
-          <View style={{ marginTop: 20, gap: 20 }}>
+          <View style={{ marginTop: 15, gap: 15 }}>
             <Menu>
               <MenuItem
                 icon="person-outline"

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

@@ -36,15 +36,16 @@ const styles = StyleSheet.create({
   }
 })
 
-const UserProfile: FC<Props> = ({
-  profile,
-  size = 25,
-  radius = 8,
-  opacity = 1,
-  onPress,
-  showHandle = true,
-  handleStyle
-}) => {
+const UserProfile: FC<Props> = (props) => {
+  const {
+    profile,
+    size = 25,
+    radius = 8,
+    opacity = 1,
+    onPress,
+    showHandle = true,
+    handleStyle
+  } = props
   const { navigate } = useNavigation()
 
   const navigateToProfile = () => {

apps/mobile/src/components/common/auth/AuthSheet.tsx

@@ -21,7 +21,7 @@ import { createWalletClient, custom } from 'viem'
 import { polygon } from 'viem/chains'
 import type { SignableMessage } from 'viem/dist/types/types/misc'
 
-import AnimatedPressable from '~/components/ui/AnimatedPressable'
+import Button from '~/components/ui/Button'
 import Sheet from '~/components/ui/Sheet'
 import haptic from '~/helpers/haptic'
 import normalizeFont from '~/helpers/normalize-font'
@@ -41,14 +41,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'space-between',
     gap: 15
-  },
-  button: {
-    padding: 20,
-    borderRadius: 100,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: theme.colors.grey,
-    backgroundColor: theme.colors.backdrop2
   }
 })
 
@@ -160,25 +152,15 @@ const AuthSheet: FC<Props> = ({ sheetRef }) => {
             signing the message.
           </Text>
         </View>
-        <AnimatedPressable
+
+        <Button
+          text="Sign & Verify"
           disabled={loading}
           onPress={() => {
             haptic()
             signIn()
           }}
-          style={styles.button}
-        >
-          <Text
-            style={{
-              color: theme.colors.white,
-              fontFamily: 'font-medium',
-              fontSize: normalizeFont(18),
-              opacity: loading ? 0.3 : 1
-            }}
-          >
-            Sign & Verify
-          </Text>
-        </AnimatedPressable>
+        />
       </View>
     </Sheet>
   )

apps/mobile/src/components/common/auth/SignIn.tsx

@@ -30,6 +30,12 @@ const SignIn = () => {
         }}
       >
         {address ? (
+          <Ionicons
+            name="log-in-outline"
+            color={theme.colors.white}
+            size={25}
+          />
+        ) : (
           <ExpoImage
             source={{
               uri: imageCdn(`${STATIC_ASSETS}/mobile/icons/herb.png`, 'AVATAR')
@@ -38,15 +44,6 @@ const SignIn = () => {
             transition={300}
             style={{ width: 23, height: 23, borderRadius: 8 }}
           />
-        ) : (
-          <Ionicons
-            name="leaf-outline"
-            style={{
-              transform: [{ rotate: '90deg' }]
-            }}
-            color={theme.colors.blueGrey}
-            size={20}
-          />
         )}
       </AnimatedPressable>
     </>

apps/mobile/src/components/common/modals/ProfileModal.tsx

@@ -1,7 +1,7 @@
 import type { Profile } from '@lenstube/lens'
 import { useProfileQuery } from '@lenstube/lens'
 import { useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useState } from 'react'
 import { ActivityIndicator, useWindowDimensions, View } from 'react-native'
 import {
   useAnimatedScrollHandler,
@@ -17,9 +17,10 @@ export const ProfileModal = (props: ProfileModalProps): JSX.Element | null => {
   const { handle } = props.route.params
   const { goBack } = useNavigation()
   const { height } = useWindowDimensions()
-
   const contentScrollY = useSharedValue(0)
 
+  const [infoHeaderHeight, setInfoHeaderHeight] = useState(0)
+
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: (event) => {
       const halfScreen = height / 2
@@ -61,8 +62,18 @@ export const ProfileModal = (props: ProfileModalProps): JSX.Element | null => {
         backgroundColor: theme.colors.black
       }}
     >
-      <Info profile={profile} contentScrollY={contentScrollY} />
-      <TabContent profile={profile} scrollHandler={scrollHandler} />
+      <Info
+        profile={profile}
+        contentScrollY={contentScrollY}
+        infoHeaderHeight={infoHeaderHeight}
+        setInfoHeaderHeight={setInfoHeaderHeight}
+      />
+      <TabContent
+        profile={profile}
+        contentScrollY={contentScrollY}
+        infoHeaderHeight={infoHeaderHeight}
+        scrollHandler={scrollHandler}
+      />
     </View>
   )
 }

apps/mobile/src/components/explore/Filters.tsx

@@ -24,8 +24,7 @@ const styles = StyleSheet.create({
     gap: 3,
     borderRadius: 25,
     borderWidth: 1,
-    borderColor: theme.colors.secondary,
-    marginRight: 10
+    borderColor: theme.colors.secondary
   },
   text: {
     fontFamily: 'font-bold',
@@ -58,6 +57,7 @@ const Filters = () => {
       style={styles.container}
       horizontal={true}
       showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ gap: 10 }}
     >
       <Pressable
         onPress={() => {

apps/mobile/src/components/home/FirstSteps.tsx

@@ -31,7 +31,6 @@ const styles = StyleSheet.create({
     width: 170,
     height: 170,
     padding: 18,
-    marginRight: 6,
     borderWidth: 0.5,
     borderColor: theme.colors.secondary
   },
@@ -97,6 +96,7 @@ const FirstSteps = () => {
         <ScrollView
           horizontal={true}
           showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: 6 }}
           style={{
             paddingTop: 20
           }}

apps/mobile/src/components/home/PopularCreators.tsx

@@ -26,7 +26,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     borderRadius: BORDER_RADIUS,
     overflow: 'hidden',
-    marginRight: 6,
     borderWidth: 1,
     borderColor: theme.colors.grey
   },
@@ -68,6 +67,7 @@ const PopularCreators = () => {
         <ScrollView
           horizontal={true}
           showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: 5 }}
           style={{
             paddingTop: 20
           }}