Made wallet button responsive

creaton-io · Sep 24, 2024 · 3ae0f63 · 3ae0f63
1 parent 50b8ef9
commit 3ae0f63
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 64 deletions.
diff --git a/src/view/com/util/UniversalWallet.tsx b/src/view/com/util/UniversalWallet.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {clamp} from '#/lib/numbers'
+import {isWeb} from '#/platform/detection'
+import {WalletComponents} from '#/screens/Login/LoginWallet'
+
+export function UniversalWallet() {
+  const insets = useSafeAreaInsets()
+  const {isMobile, isTablet} = useWebMediaQueries()
+  const fabMinimalShellTransform = useMinimalShellFabTransform()
+
+  const size = isTablet ? styles.sizeLarge : styles.sizeRegular
+
+  const tabletSpacing = isTablet
+    ? {right: 200, top: 50}
+    : {right: 96, top: clamp(insets.top, 15, 60) + 15}
+
+  if (isTablet === false) return undefined
+
+  return (
+    <View
+      style={[
+        styles.outer,
+        size,
+        tabletSpacing,
+        isMobile && fabMinimalShellTransform,
+      ]}>
+      <WalletComponents />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  sizeRegular: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+  },
+  sizeLarge: {
+    width: 70,
+    height: 70,
+    borderRadius: 35,
+  },
+  outer: {
+    // @ts-ignore web-only
+    position: isWeb ? 'fixed' : 'absolute',
+    zIndex: 1,
+    cursor: 'pointer',
+  },
+  inner: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
@@ -1,6 +1,6 @@
 import React, {ComponentProps} from 'react'
 import {
-  Linking,
+  //Linking,
   SafeAreaView,
   ScrollView,
   StyleProp,
@@ -15,7 +15,7 @@ import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
 import {useAnalytics} from '#/lib/analytics/analytics'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
+//import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {getTabState, TabState} from '#/lib/routes/helpers'
@@ -33,9 +33,10 @@ import {formatCount} from '#/view/com/util/numeric/format'
 import {Text} from '#/view/com/util/text/Text'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
+import {WalletComponents} from '#/screens/Login/LoginWallet'
 import {atoms as a} from '#/alf'
 import {useTheme as useAlfTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+//import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {
   Bell_Filled_Corner0_Rounded as BellFilled,
   Bell_Stroke2_Corner0_Rounded as Bell,
@@ -51,7 +52,7 @@ import {
 } from '#/components/icons/HomeOpen'
 import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
-import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
+//import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
 import {SettingsGear2_Stroke2_Corner0_Rounded as Settings} from '#/components/icons/SettingsGear2'
 import {
   UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
@@ -143,7 +144,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
   const theme = useTheme()
   const t = useAlfTheme()
   const pal = usePalette('default')
-  const {_} = useLingui()
+  //const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
@@ -217,20 +218,20 @@ let DrawerContent = ({}: {}): React.ReactNode => {
     setDrawerOpen(false)
   }, [navigation, track, setDrawerOpen])
 
-  const onPressFeedback = React.useCallback(() => {
-    track('Menu:FeedbackClicked')
-    Linking.openURL(
-      FEEDBACK_FORM_URL({
-        email: currentAccount?.email,
-        handle: currentAccount?.handle,
-      }),
-    )
-  }, [track, currentAccount])
-
-  const onPressHelp = React.useCallback(() => {
-    track('Menu:HelpClicked')
-    Linking.openURL(HELP_DESK_URL)
-  }, [track])
+  // const onPressFeedback = React.useCallback(() => {
+  //   track('Menu:FeedbackClicked')
+  //   Linking.openURL(
+  //     FEEDBACK_FORM_URL({
+  //       email: currentAccount?.email,
+  //       handle: currentAccount?.handle,
+  //     }),
+  //   )
+  // }, [track, currentAccount])
+
+  // const onPressHelp = React.useCallback(() => {
+  //   track('Menu:HelpClicked')
+  //   Linking.openURL(HELP_DESK_URL)
+  // }, [track])
 
   // rendering
   // =
@@ -260,6 +261,8 @@ let DrawerContent = ({}: {}): React.ReactNode => {
           {hasSession ? (
             <>
               <View style={{height: 16}} />
+
+              <WalletComponents />
               <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
               <HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
               <NotificationsMenuItem
@@ -285,7 +288,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
           <View style={styles.smallSpacer} />
 
           <View style={[{flexWrap: 'wrap', gap: 12}, s.flexCol]}>
-            <TextLink
+            {/* <TextLink
               type="md"
               style={pal.link}
               href="https://bsky.social/about/support/tos"
@@ -296,7 +299,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
               style={pal.link}
               href="https://bsky.social/about/support/privacy-policy"
               text={_(msg`Privacy Policy`)}
-            />
+            /> */}
             {kawaii && (
               <Text type="md" style={pal.textLight}>
                 Logo by{' '}
@@ -314,55 +317,55 @@ let DrawerContent = ({}: {}): React.ReactNode => {
           <View style={styles.smallSpacer} />
         </ScrollView>
 
-        <DrawerFooter
+        {/* <DrawerFooter
           onPressFeedback={onPressFeedback}
           onPressHelp={onPressHelp}
-        />
+        /> */}
       </SafeAreaView>
     </View>
   )
 }
 DrawerContent = React.memo(DrawerContent)
 export {DrawerContent}
 
-let DrawerFooter = ({
-  onPressFeedback,
-  onPressHelp,
-}: {
-  onPressFeedback: () => void
-  onPressHelp: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  return (
-    <View style={styles.footer}>
-      <Button
-        label={_(msg`Send feedback`)}
-        size="small"
-        variant="solid"
-        color="secondary"
-        onPress={onPressFeedback}>
-        <ButtonIcon icon={Message} position="left" />
-        <ButtonText>
-          <Trans>Feedback</Trans>
-        </ButtonText>
-      </Button>
-      <Button
-        label={_(msg`Get help`)}
-        size="small"
-        variant="outline"
-        color="secondary"
-        onPress={onPressHelp}
-        style={{
-          backgroundColor: 'transparent',
-        }}>
-        <ButtonText>
-          <Trans>Help</Trans>
-        </ButtonText>
-      </Button>
-    </View>
-  )
-}
-DrawerFooter = React.memo(DrawerFooter)
+// let DrawerFooter = ({
+//   onPressFeedback,
+//   onPressHelp,
+// }: {
+//   onPressFeedback: () => void
+//   onPressHelp: () => void
+// }): React.ReactNode => {
+//   const {_} = useLingui()
+//   return (
+//     <View style={styles.footer}>
+//       <Button
+//         label={_(msg`Send feedback`)}
+//         size="small"
+//         variant="solid"
+//         color="secondary"
+//         onPress={onPressFeedback}>
+//         <ButtonIcon icon={Message} position="left" />
+//         <ButtonText>
+//           <Trans>Feedback</Trans>
+//         </ButtonText>
+//       </Button>
+//       <Button
+//         label={_(msg`Get help`)}
+//         size="small"
+//         variant="outline"
+//         color="secondary"
+//         onPress={onPressHelp}
+//         style={{
+//           backgroundColor: 'transparent',
+//         }}>
+//         <ButtonText>
+//           <Trans>Help</Trans>
+//         </ButtonText>
+//       </Button>
+//     </View>
+//   )
+// }
+//DrawerFooter = React.memo(DrawerFooter)
 
 interface MenuItemProps extends ComponentProps<typeof TouchableOpacity> {
   icon: JSX.Element

diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
@@ -4,12 +4,13 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
+import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
+import {NavigationProp} from '#/lib/routes/types'
+import {colors, s} from '#/lib/styles'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useCloseAllActiveElements} from '#/state/util'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {NavigationProp} from 'lib/routes/types'
-import {colors, s} from 'lib/styles'
+import {UniversalWallet} from '#/view/com/util/UniversalWallet'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -49,6 +50,7 @@ function ShellInner() {
       <SigninDialog />
       <Lightbox />
       <PortalOutlet />
+      {!isDesktop && <UniversalWallet />}
 
       {!isDesktop && isDrawerOpen && (
         <TouchableWithoutFeedback