diff --git a/src/view/com/util/UniversalWallet.tsx b/src/view/com/util/UniversalWallet.tsx new file mode 100644 index 0000000000..c1b5eb5d69 --- /dev/null +++ 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 ( + + + + ) +} + +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 index 226fe24966..e03ec677ed 100644 --- 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() 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 ? ( <> + + { - { style={pal.link} href="https://bsky.social/about/support/privacy-policy" text={_(msg`Privacy Policy`)} - /> + /> */} {kawaii && ( Logo by{' '} @@ -314,10 +317,10 @@ let DrawerContent = ({}: {}): React.ReactNode => { - + /> */} ) @@ -325,44 +328,44 @@ let DrawerContent = ({}: {}): React.ReactNode => { DrawerContent = React.memo(DrawerContent) export {DrawerContent} -let DrawerFooter = ({ - onPressFeedback, - onPressHelp, -}: { - onPressFeedback: () => void - onPressHelp: () => void -}): React.ReactNode => { - const {_} = useLingui() - return ( - - - - - ) -} -DrawerFooter = React.memo(DrawerFooter) +// let DrawerFooter = ({ +// onPressFeedback, +// onPressHelp, +// }: { +// onPressFeedback: () => void +// onPressHelp: () => void +// }): React.ReactNode => { +// const {_} = useLingui() +// return ( +// +// +// +// +// ) +// } +//DrawerFooter = React.memo(DrawerFooter) interface MenuItemProps extends ComponentProps { icon: JSX.Element diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 9dab23671f..a431bdffdf 100644 --- 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() { + {!isDesktop && } {!isDesktop && isDrawerOpen && (