Skip to content

Commit 333a372

Browse files
musidlomusidlo
authored
Redesigned account page (#1396)
1 parent 0d29440 commit 333a372

29 files changed

+235
-661
lines changed

‎apps/expo/app/settings/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { AccountScreen } from 'app/features/account/screen'
21
import { Stack } from 'expo-router'
32
import { SafeAreaView } from 'react-native-safe-area-context'
3+
import { AccountScreenLayout } from 'app/features/account/AccountScreenLayout'
44

55
export default function Screen() {
66
return (
@@ -10,7 +10,7 @@ export default function Screen() {
1010
title: 'Account',
1111
}}
1212
/>
13-
<AccountScreen />
13+
<AccountScreenLayout />
1414
</SafeAreaView>
1515
)
1616
}

‎apps/next/pages/account/settings/backup/confirm/[cred_id].tsx renamed to ‎apps/next/pages/account/backup/confirm/[cred_id].tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { HomeLayout } from 'app/features/home/layout.web'
2-
import { SettingsLayout } from 'app/features/account/settings/layout.web'
3-
import { ConfirmPasskeyScreen } from 'app/features/account/settings/backup/confirm'
2+
import { ConfirmPasskeyScreen } from 'app/features/account/backup/confirm'
43
import Head from 'next/head'
54
import { userProtectedGetSSP } from 'utils/userProtected'
6-
import type { NextPageWithLayout } from '../../../../_app'
5+
import type { NextPageWithLayout } from '../../../_app'
76
import { TopNav } from 'app/components/TopNav'
7+
import { AccountScreenLayout } from 'app/features/account/AccountScreenLayout'
88

99
export const Page: NextPageWithLayout = () => {
1010
return (
@@ -20,8 +20,8 @@ export const Page: NextPageWithLayout = () => {
2020
export const getServerSideProps = userProtectedGetSSP()
2121

2222
Page.getLayout = (children) => (
23-
<HomeLayout TopNav={<TopNav header="Settings" backFunction={'pop'} />} fullHeight>
24-
<SettingsLayout>{children}</SettingsLayout>
23+
<HomeLayout TopNav={<TopNav header="Account" backFunction={'pop'} />} fullHeight>
24+
<AccountScreenLayout>{children}</AccountScreenLayout>
2525
</HomeLayout>
2626
)
2727

‎apps/next/pages/account/settings/backup/create.tsx renamed to ‎apps/next/pages/account/backup/create.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { TopNav } from 'app/components/TopNav'
2-
import { CreatePasskeyScreen } from 'app/features/account/settings/backup/create'
3-
import { SettingsLayout } from 'app/features/account/settings/layout.web'
2+
import { CreatePasskeyScreen } from 'app/features/account/backup/create'
43
import { HomeLayout } from 'app/features/home/layout.web'
54
import Head from 'next/head'
65
import { userProtectedGetSSP } from 'utils/userProtected'
7-
import type { NextPageWithLayout } from '../../../_app'
6+
import type { NextPageWithLayout } from '../../_app'
7+
import { AccountScreenLayout } from 'app/features/account/AccountScreenLayout'
88

99
export const Page: NextPageWithLayout = () => {
1010
return (
@@ -20,8 +20,8 @@ export const Page: NextPageWithLayout = () => {
2020
export const getServerSideProps = userProtectedGetSSP()
2121

2222
Page.getLayout = (children) => (
23-
<HomeLayout TopNav={<TopNav header="Settings" backFunction={'pop'} />} fullHeight>
24-
<SettingsLayout>{children}</SettingsLayout>
23+
<HomeLayout TopNav={<TopNav header="Account" backFunction={'pop'} />} fullHeight>
24+
<AccountScreenLayout>{children}</AccountScreenLayout>
2525
</HomeLayout>
2626
)
2727

‎apps/next/pages/account/settings/backup/index.tsx renamed to ‎apps/next/pages/account/backup/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { HomeLayout } from 'app/features/home/layout.web'
2-
import { SettingsLayout } from 'app/features/account/settings/layout.web'
3-
import { BackupScreen } from 'app/features/account/settings'
2+
import { BackupScreen } from 'app/features/account/backup'
43
import Head from 'next/head'
54
import { userProtectedGetSSP } from 'utils/userProtected'
6-
import type { NextPageWithLayout } from '../../../_app'
5+
import type { NextPageWithLayout } from '../../_app'
76
import { TopNav } from 'app/components/TopNav'
7+
import { AccountScreenLayout } from 'app/features/account/AccountScreenLayout'
88

99
export const Page: NextPageWithLayout = () => {
1010
return (
@@ -21,8 +21,8 @@ export const Page: NextPageWithLayout = () => {
2121
export const getServerSideProps = userProtectedGetSSP()
2222

2323
Page.getLayout = (children) => (
24-
<HomeLayout TopNav={<TopNav header="Settings" backFunction={'pop'} />} fullHeight>
25-
<SettingsLayout>{children}</SettingsLayout>
24+
<HomeLayout TopNav={<TopNav header="Account" backFunction={'pop'} />} fullHeight>
25+
<AccountScreenLayout>{children}</AccountScreenLayout>
2626
</HomeLayout>
2727
)
2828

‎apps/next/pages/account/settings/edit-profile.tsx renamed to ‎apps/next/pages/account/edit-profile.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { HomeLayout } from 'app/features/home/layout.web'
2-
import { SettingsLayout } from 'app/features/account/settings/layout.web'
3-
import { EditProfileScreen } from 'app/features/account/settings/edit-profile'
42
import Head from 'next/head'
53
import { userProtectedGetSSP } from 'utils/userProtected'
6-
import type { NextPageWithLayout } from '../../_app'
4+
import type { NextPageWithLayout } from '../_app'
75
import { TopNav } from 'app/components/TopNav'
6+
import { AccountScreenLayout } from 'app/features/account/AccountScreenLayout'
7+
import { EditProfile } from 'app/features/account/components/editProfile/screen'
88

99
export const Page: NextPageWithLayout = () => {
1010
return (
@@ -13,15 +13,15 @@ export const Page: NextPageWithLayout = () => {
1313
<title>Send | Edit Profile</title>
1414
<meta name="description" content="Edit Profile" key="desc" />
1515
</Head>
16-
<EditProfileScreen />
16+
<EditProfile />
1717
</>
1818
)
1919
}
2020

2121
export const getServerSideProps = userProtectedGetSSP()
2222
Page.getLayout = (children) => (
23-
<HomeLayout TopNav={<TopNav header={'Settings'} backFunction={'router'} />} fullHeight>
24-
<SettingsLayout>{children}</SettingsLayout>
23+
<HomeLayout TopNav={<TopNav header={'Account'} backFunction={'router'} />} fullHeight>
24+
<AccountScreenLayout>{children}</AccountScreenLayout>
2525
</HomeLayout>
2626
)
2727

‎apps/next/pages/account/index.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { TopNav } from 'app/components/TopNav'
2-
import { AccountScreen } from 'app/features/account/screen'
32
import { HomeLayout } from 'app/features/home/layout.web'
43
import Head from 'next/head'
54
import { userProtectedGetSSP } from 'utils/userProtected'
65
import type { NextPageWithLayout } from '../_app'
6+
import { AccountScreenLayout } from 'app/features/account/AccountScreenLayout'
77

88
export const Page: NextPageWithLayout = () => {
99
return (
@@ -16,14 +16,15 @@ export const Page: NextPageWithLayout = () => {
1616
key="desc"
1717
/>
1818
</Head>
19-
<AccountScreen />
2019
</>
2120
)
2221
}
2322

2423
export const getServerSideProps = userProtectedGetSSP()
25-
Page.getLayout = (children) => (
26-
<HomeLayout TopNav={<TopNav header="Account" />}>{children}</HomeLayout>
24+
Page.getLayout = () => (
25+
<HomeLayout TopNav={<TopNav header="Account" showOnGtLg={true} />} fullHeight>
26+
<AccountScreenLayout />
27+
</HomeLayout>
2728
)
2829

2930
export default Page

‎apps/next/pages/account/settings/personal-info.tsx renamed to ‎apps/next/pages/account/personal-info.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { HomeLayout } from 'app/features/home/layout.web'
2-
import { SettingsLayout } from 'app/features/account/settings/layout.web'
3-
import { PersonalInfoScreen } from 'app/features/account/settings'
42
import Head from 'next/head'
53
import { userProtectedGetSSP } from 'utils/userProtected'
6-
import type { NextPageWithLayout } from '../../_app'
4+
import type { NextPageWithLayout } from '../_app'
75
import { TopNav } from 'app/components/TopNav'
6+
import { AccountScreenLayout } from 'app/features/account/AccountScreenLayout'
7+
import { PersonalInfoScreen } from 'app/features/account/components/personalInfo/screen'
88

99
export const Page: NextPageWithLayout = () => {
1010
return (
@@ -20,8 +20,8 @@ export const Page: NextPageWithLayout = () => {
2020

2121
export const getServerSideProps = userProtectedGetSSP()
2222
Page.getLayout = (children) => (
23-
<HomeLayout TopNav={<TopNav header="Settings" backFunction={'router'} />} fullHeight>
24-
<SettingsLayout>{children}</SettingsLayout>
23+
<HomeLayout TopNav={<TopNav header="Account" backFunction={'router'} />} fullHeight>
24+
<AccountScreenLayout>{children}</AccountScreenLayout>
2525
</HomeLayout>
2626
)
2727

‎apps/next/pages/account/settings/index.tsx

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎packages/app/components/ReferralLink.tsx

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,17 @@ import { CheckCheck } from '@tamagui/lucide-icons'
1313
import { useEffect, useState } from 'react'
1414
import { IconCopy } from './icons'
1515
import * as Clipboard from 'expo-clipboard'
16-
import * as Sharing from 'expo-sharing'
1716

1817
export function ReferralLink(props: ButtonProps) {
1918
const { profile, tags } = useUser()
2019
const referralCode = tags?.[0]?.name || profile?.referral_code
2120
const referralHref = `https://send.app?referral=${referralCode}`
22-
const referralLinkVisual = `send.app/${referralCode}`
2321
const toast = useToastController()
2422
const [hasCopied, setHasCopied] = useState(false)
25-
const [canShare, setCanShare] = useState(false)
26-
27-
useEffect(() => {
28-
const canShare = async () => {
29-
const canShare = await Sharing.isAvailableAsync()
30-
setCanShare(canShare)
31-
}
32-
canShare()
33-
}, [])
3423

3524
const copyAndMaybeShareOnPress = async () => {
3625
await Clipboard.setStringAsync(referralHref)
3726
.then(() => toast.show('Copied your referral link to the clipboard'))
38-
.then(() => (canShare ? Sharing.shareAsync(referralHref).catch(() => null) : null))
3927
.catch(() =>
4028
toast.show('Something went wrong', {
4129
message: 'We were unable to copy your referral link to the clipboard',
@@ -55,15 +43,16 @@ export function ReferralLink(props: ButtonProps) {
5543
}, [hasCopied])
5644

5745
if (!referralCode) return null
46+
5847
return (
5948
<XStack ai={'center'} gap={'$2'} width={'100%'}>
60-
<Paragraph size={'$4'} color={'$color10'}>
61-
Referral:
49+
<Paragraph size={'$5'} color={'$color10'} flexShrink={0}>
50+
Referral Code:
6251
</Paragraph>
6352
<Button
6453
chromeless
6554
flex={1}
66-
jc={'flex-start'}
55+
jc={'space-between'}
6756
height={'auto'}
6857
hoverStyle={{
6958
backgroundColor: '$backgroundTransparent',
@@ -84,14 +73,13 @@ export function ReferralLink(props: ButtonProps) {
8473
<ButtonText
8574
fontSize={'$5'}
8675
fontWeight={'500'}
87-
fontFamily={'$mono'}
8876
bc="$background"
8977
maxWidth={'85%'}
9078
hoverStyle={{
9179
color: '$primary',
9280
}}
9381
>
94-
{referralLinkVisual}
82+
{referralCode}
9583
</ButtonText>
9684
<ButtonIcon>
9785
<AnimatePresence exitBeforeEnter>
@@ -102,6 +90,7 @@ export function ReferralLink(props: ButtonProps) {
10290
$theme-light={{ color: '$color12' }}
10391
key="referral-link-icon"
10492
animation="bouncy"
93+
flexShrink={0}
10594
enterStyle={{
10695
opacity: 0,
10796
scale: 0.9,
@@ -114,6 +103,7 @@ export function ReferralLink(props: ButtonProps) {
114103
) : (
115104
<IconCopy
116105
size={16}
106+
flexShrink={0}
117107
$theme-dark={{ color: '$primary' }}
118108
$theme-light={{ color: '$color12' }}
119109
/>

‎packages/app/features/account/AccountScreenLayout.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { ScrollView, useMedia, XStack, YStack } from '@my/ui'
2+
import type { ReactNode } from 'react'
3+
import { AccountLinks } from 'app/features/account/components/AccountLinks'
4+
import { BOTTOM_NAV_BAR_HEIGHT } from 'app/components/BottomTabBar/BottomNavBar'
5+
import { AccountHeader } from 'app/features/account/components/AccountHeader'
6+
7+
export type SettingsLayoutProps = {
8+
children?: ReactNode
9+
}
10+
11+
export const AccountScreenLayout = ({ children }: SettingsLayoutProps) => {
12+
const media = useMedia()
13+
14+
if (media.gtLg) {
15+
return <DesktopAccountLayout>{children}</DesktopAccountLayout>
16+
}
17+
18+
return <MobileAccountLayout>{children}</MobileAccountLayout>
19+
}
20+
21+
const DesktopAccountLayout = ({ children }: SettingsLayoutProps) => {
22+
return (
23+
<XStack w={'100%'} gap={'$3.5'} pb={'$3.5'}>
24+
<ScrollView testID={'settings-links'} showsVerticalScrollIndicator={false} maxWidth={'49%'}>
25+
<AccountHeader mb={'$3.5'} />
26+
<AccountLinks />
27+
</ScrollView>
28+
<ScrollView testID={'settings-links'} showsVerticalScrollIndicator={false} maxWidth={'49%'}>
29+
{children}
30+
</ScrollView>
31+
</XStack>
32+
)
33+
}
34+
35+
const MobileAccountLayout = ({ children }: SettingsLayoutProps) => {
36+
return (
37+
<YStack w={'100%'} gap={'$3.5'}>
38+
<YStack
39+
w={'100%'}
40+
testID={'settings-links'}
41+
display={children ? 'none' : 'flex'}
42+
pb={BOTTOM_NAV_BAR_HEIGHT}
43+
>
44+
<AccountHeader mb={'$3.5'} />
45+
<AccountLinks />
46+
</YStack>
47+
<YStack
48+
w={'100%'}
49+
testID={'settings-links'}
50+
display={children ? 'flex' : 'none'}
51+
pb={BOTTOM_NAV_BAR_HEIGHT}
52+
>
53+
{children}
54+
</YStack>
55+
</YStack>
56+
)
57+
}

‎packages/app/features/account/settings/backup/confirm.tsx renamed to ‎packages/app/features/account/backup/confirm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from '@my/ui'
1313
import { baseMainnetClient, sendAccountAbi, tokenPaymasterAddress } from '@my/wagmi'
1414
import { useQuery, useQueryClient } from '@tanstack/react-query'
15-
import { SettingsHeader } from 'app/features/account/settings/components/SettingsHeader'
15+
import { SettingsHeader } from 'app/features/account/components/SettingsHeader'
1616
import { SchemaForm } from 'app/utils/SchemaForm'
1717
import { assert } from 'app/utils/assert'
1818
import { byteaToBytes } from 'app/utils/byteaToBytes'
@@ -228,7 +228,7 @@ const AddSignerButton = ({ webauthnCred }: { webauthnCred: Tables<'webauthn_cred
228228
console.log('sent user op', transactionHash)
229229
toast.show('Success!')
230230
queryClient.invalidateQueries({ queryKey: [useSendAccount.queryKey] })
231-
router.replace('/account/settings/backup')
231+
router.replace('/account/backup')
232232
} catch (e) {
233233
console.error(e)
234234
const message =

‎packages/app/features/account/settings/backup/create.tsx renamed to ‎packages/app/features/account/backup/create.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from '@my/wagmi'
88
import { base16, base64 } from '@scure/base'
99
import { useQuery, useQueryClient } from '@tanstack/react-query'
10-
import { SettingsHeader } from 'app/features/account/settings/components/SettingsHeader'
10+
import { SettingsHeader } from 'app/features/account/components/SettingsHeader'
1111
import { SchemaForm } from 'app/utils/SchemaForm'
1212
import { assert } from 'app/utils/assert'
1313
import { base64URLNoPadToBase16 } from 'app/utils/base64ToBase16'
@@ -35,7 +35,7 @@ export const CreatePasskeyScreen = () => {
3535
<YStack w={'100%'} gap={'$3.5'}>
3636
<SettingsHeader>Passkeys</SettingsHeader>
3737
<CreatePasskeyForm
38-
onPasskeySaved={(cred) => router.push(`/account/settings/backup/confirm/${cred.id}`)}
38+
onPasskeySaved={(cred) => router.push(`/account/backup/confirm/${cred.id}`)}
3939
/>
4040
</YStack>
4141
)

‎packages/app/features/account/settings/backup/index.tsx renamed to ‎packages/app/features/account/backup/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import { useLink } from 'solito/link'
3939
import { encodeFunctionData } from 'viem'
4040
import { useBalance, useEstimateFeesPerGas } from 'wagmi'
4141
import { z } from 'zod'
42-
import { SettingsHeader } from 'app/features/account/settings/components/SettingsHeader'
42+
import { SettingsHeader } from 'app/features/account/components/SettingsHeader'
4343
import { useThemeSetting } from '@tamagui/next-theme'
4444

4545
export const BackupScreen = () => {
@@ -148,7 +148,7 @@ const WebauthnCreds = ({
148148
})[]
149149
}) => {
150150
const addPasskeyLink = useLink({
151-
href: '/account/settings/backup/create',
151+
href: '/account/backup/create',
152152
})
153153

154154
return (
@@ -196,7 +196,7 @@ const WebAuthnCred = ({
196196
const isActive = isLoadingActiveSigningKeys || activeIndex !== -1 // default to active if loading (strongmind check)
197197
const onchainSlot = activeSigningKeys?.[1][activeIndex]
198198
const link = useLink({
199-
href: `/account/settings/backup/confirm/${cred?.id}`,
199+
href: `/account/backup/confirm/${cred?.id}`,
200200
})
201201
202202
return (

0 commit comments

Comments
 (0)