Skip to content

Commit f206482

Browse files
byteabbyteab
authored
feat: improve home screen (#2000)
* feat(Card): add materialInteractive variant * feat(HomeSideBar): use a lock icon instead of emoji * feat(Home Cards): make chevrons animated * feat(home): add enter/exit transition for some components
1 parent bd1e2e0 commit f206482

File tree

5 files changed

+101
-50
lines changed

5 files changed

+101
-50
lines changed

‎packages/app/components/sidebar/HomeSideBar.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
IconSendLogo,
2323
IconWorldSearch,
2424
} from 'app/components/icons'
25+
import { Lock } from '@tamagui/lucide-icons'
2526
import { SideBarNavLink } from 'app/components/sidebar/SideBarNavLink'
2627

2728
import type { ReactElement } from 'react'
@@ -55,7 +56,7 @@ const links = [
5556
},
5657
__DEV__ || baseMainnet.id === 84532
5758
? {
58-
icon: <Paragraph px="$1">🔒</Paragraph>,
59+
icon: <Lock size="$1" />,
5960
text: 'Secret shop',
6061
href: '/secret-shop',
6162
}

‎packages/app/features/home/InvestmentsBalanceCard.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
useMedia,
1414
type ButtonProps,
1515
Button,
16+
View,
1617
} from '@my/ui'
1718
import formatAmount, { localizeAmount } from 'app/utils/formatAmount'
1819
import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons'
@@ -55,7 +56,7 @@ const InvestmentsBalanceCardContent = (props: CardProps) => {
5556
}
5657

5758
return (
58-
<HomeBodyCard onPress={toggleSubScreen} {...props}>
59+
<HomeBodyCard materialInteractive onPress={toggleSubScreen} {...props}>
5960
{props.children}
6061
</HomeBodyCard>
6162
)
@@ -68,6 +69,8 @@ const InvestmentsBalanceCardHomeScreenHeader = () => {
6869
)
6970
const isInvestmentsScreen = queryParams.token === 'investments'
7071

72+
const isChevronLeft = isInvestmentCoin || isInvestmentsScreen
73+
7174
return (
7275
<Card.Header p={0} jc="space-between" fd="row">
7376
<Paragraph
@@ -78,20 +81,15 @@ const InvestmentsBalanceCardHomeScreenHeader = () => {
7881
>
7982
Invest
8083
</Paragraph>
81-
{isInvestmentCoin || isInvestmentsScreen ? (
82-
<ChevronLeft
83-
size={'$1'}
84-
color={'$primary'}
85-
$theme-light={{ color: '$color12' }}
86-
$lg={{ display: 'none' }}
87-
/>
88-
) : (
84+
85+
<View animateOnly={['transform']} animation="fast" rotate={isChevronLeft ? '180deg' : '0deg'}>
8986
<ChevronRight
90-
size={'$1'}
91-
color={'$lightGrayTextField'}
92-
$theme-light={{ color: '$darkGrayTextField' }}
87+
size="$1"
88+
color={isChevronLeft ? '$primary' : '$lightGrayTextField'}
89+
$theme-light={{ color: isChevronLeft ? '$color12' : '$darkGrayTextField' }}
90+
$lg={{ display: isChevronLeft ? 'none' : 'flex' }}
9391
/>
94-
)}
92+
</View>
9593
</Card.Header>
9694
)
9795
}

‎packages/app/features/home/StablesBalanceCard.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Paragraph,
88
Spinner,
99
useMedia,
10+
View,
1011
withStaticProperties,
1112
XStack,
1213
} from '@my/ui'
@@ -33,6 +34,8 @@ const StablesBalanceCardHomeScreenHeader = () => {
3334
)
3435
const isStablesScreen = queryParams.token === 'stables'
3536

37+
const isChevronLeft = isStableCoin || isStablesScreen
38+
3639
return (
3740
<Card.Header padded size="$4" pb={0} jc="space-between" fd="row">
3841
<Paragraph
@@ -44,20 +47,14 @@ const StablesBalanceCardHomeScreenHeader = () => {
4447
Cash Balance
4548
</Paragraph>
4649
<XStack flex={1} />
47-
{isStableCoin || isStablesScreen ? (
48-
<ChevronLeft
49-
size={'$1'}
50-
color={'$primary'}
51-
$theme-light={{ color: '$color12' }}
52-
$lg={{ display: 'none' }}
53-
/>
54-
) : (
50+
<View animateOnly={['transform']} animation="fast" rotate={isChevronLeft ? '180deg' : '0deg'}>
5551
<ChevronRight
56-
size={'$1'}
57-
color={'$lightGrayTextField'}
58-
$theme-light={{ color: '$darkGrayTextField' }}
52+
size="$1"
53+
color={isChevronLeft ? '$primary' : '$lightGrayTextField'}
54+
$theme-light={{ color: isChevronLeft ? '$color12' : '$darkGrayTextField' }}
55+
$lg={{ display: isChevronLeft ? 'none' : 'flex' }}
5956
/>
60-
)}
57+
</View>
6158
</Card.Header>
6259
)
6360
}
@@ -217,10 +214,10 @@ export const StablesBalanceCardContent = (props: CardProps) => {
217214
<Card
218215
w="100%"
219216
onPress={toggleSubScreen}
220-
cursor="pointer"
221217
size={'$5'}
222218
br="$7"
223219
p={'$1.5'}
220+
materialInteractive
224221
{...props}
225222
>
226223
{props.children}

‎packages/app/features/home/screen.tsx‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export function HomeScreen() {
8181
<HomeBody
8282
key="home-body"
8383
animation="200ms"
84+
animateOnly={['opacity', 'transform']}
8485
enterStyle={{
8586
opacity: 0,
8687
y: media.gtLg ? 0 : 300,
@@ -133,7 +134,7 @@ function HomeBody(props: XStackProps) {
133134
</StablesBalanceCard.Footer>
134135
</StablesBalanceCard>
135136
<SavingsBalanceCard href="/earn" w="100%" />
136-
<InvestmentsBalanceCard padded size="$5" gap="$3" w="100%">
137+
<InvestmentsBalanceCard padded gap="$3" w="100%">
137138
<InvestmentsBalanceCard.HomeScreenHeader />
138139
<Card.Footer jc="space-between" ai="center">
139140
<YStack gap="$3">
@@ -151,20 +152,22 @@ function HomeBody(props: XStackProps) {
151152
<FriendsCard href="/account/affiliate" />
152153
</HomeBodyCardRow>
153154
</YStack>
154-
{(() => {
155-
switch (true) {
156-
case Platform.OS !== 'web':
157-
return null
158-
case selectedCoin !== undefined:
159-
return <TokenDetails />
160-
case queryParams.token === 'investments':
161-
return <InvestmentsBody />
162-
case queryParams.token === 'stables':
163-
return <StablesBody />
164-
default:
165-
return null
166-
}
167-
})()}
155+
<AnimatePresence>
156+
{(() => {
157+
switch (true) {
158+
case Platform.OS !== 'web':
159+
return null
160+
case selectedCoin !== undefined:
161+
return <TokenDetails />
162+
case queryParams.token === 'investments':
163+
return <InvestmentsBody />
164+
case queryParams.token === 'stables':
165+
return <StablesBody />
166+
default:
167+
return null
168+
}
169+
})()}
170+
</AnimatePresence>
168171
</XStack>
169172
</IsPriceHiddenProvider>
170173
)
@@ -213,8 +216,27 @@ export function InvestmentsBody() {
213216
const formattedDeltaUSD = localizeAmount(Math.abs(delta24hUSD).toFixed(2))
214217
const sign = delta24hUSD >= 0 ? '+' : '-'
215218

219+
const media = useMedia()
220+
216221
return (
217-
<YStack ai="center" $gtXs={{ gap: '$3' }} gap={'$3.5'} f={1}>
222+
<YStack
223+
key={media.gtLg ? 'investments-body-lg' : 'investments-body-xs'}
224+
{...(media.gtLg && {
225+
animation: '100ms',
226+
enterStyle: {
227+
o: 0,
228+
x: -30,
229+
},
230+
exitStyle: {
231+
o: 0,
232+
x: -20,
233+
},
234+
})}
235+
ai="center"
236+
$gtXs={{ gap: '$3' }}
237+
gap={'$3.5'}
238+
f={1}
239+
>
218240
<InvestmentsPortfolioCard padded size="$6" w="100%" mah={220} gap="$5">
219241
<Card.Header p={0}>
220242
<Paragraph
@@ -313,9 +335,7 @@ export function InvestmentsBody() {
313335

314336
{/* Holdings list */}
315337
<YStack w={'100%'} gap={'$2'}>
316-
<H4 fontWeight={600} size={'$7'}>
317-
Your Holdings
318-
</H4>
338+
<H4 size="$7">Your Holdings</H4>
319339
<Card
320340
bc={'$color1'}
321341
width="100%"
@@ -356,13 +376,30 @@ export function InvestmentsBody() {
356376
)
357377
}
358378

359-
export function StablesBody() {
379+
export const StablesBody = YStack.styleable((props) => {
360380
const media = useMedia()
361381

362382
return (
363-
<YStack $gtXs={{ gap: '$3' }} gap={'$3.5'} f={1}>
383+
<YStack
384+
key={media.gtLg ? 'stables-body-lg' : 'stables-body-xs'}
385+
{...(media.gtLg && {
386+
animation: '100ms',
387+
enterStyle: {
388+
o: 0,
389+
x: -30,
390+
},
391+
exitStyle: {
392+
o: 0,
393+
x: -20,
394+
},
395+
})}
396+
$gtXs={{ gap: '$3' }}
397+
gap={'$3.5'}
398+
f={1}
399+
{...props}
400+
>
364401
{media.lg && (
365-
<StablesBalanceCard>
402+
<StablesBalanceCard materialInteractive={false}>
366403
<StablesBalanceCard.StablesScreenHeader />
367404
<StablesBalanceCard.Footer>
368405
<StablesBalanceCard.Balance />
@@ -381,14 +418,17 @@ export function StablesBody() {
381418
</Card>
382419
</YStack>
383420
)
384-
}
421+
})
422+
423+
StablesBody.displayName = 'StablesBody'
385424

386425
export const HomeBodyCard = styled(Card, {
387426
size: '$5',
388427
br: '$7',
389428
f: 1,
390429
mah: 150,
391430
p: '$1.5',
431+
materialInteractive: true,
392432
})
393433

394434
export const HomeBodyCardRow = styled(XStack, {

‎packages/ui/src/components/Card.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,21 @@ export const CardFrame = styled(ThemeableStack, {
1919
position: 'relative',
2020
},
2121
},
22+
materialInteractive: {
23+
true: {
24+
cursor: 'pointer',
25+
focusable: true,
26+
hoverStyle: {
27+
elevation: '$0.9',
28+
},
29+
pressStyle: {
30+
elevation: '$0.75',
31+
},
32+
'$platform-web': {
33+
transition: 'box-shadow 150ms ease',
34+
},
35+
},
36+
},
2237

2338
size: {
2439
'...size': (val, { tokens }) => {

0 commit comments

Comments
 (0)