Skip to content

Commit a94c672

Browse files
youngkidwarrioryoungkidwarrior
committed
Create a styled component for home cards
1 parent c449932 commit a94c672

File tree

6 files changed

+76
-88
lines changed

6 files changed

+76
-88
lines changed

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

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
import { Avatar, Card, type CardProps, Paragraph, Spinner, XStack, type XStackProps } from '@my/ui'
1+
import {
2+
Avatar,
3+
Card,
4+
type CardProps,
5+
Paragraph,
6+
Spinner,
7+
ThemeableStack,
8+
XStack,
9+
type XStackProps,
10+
} from '@my/ui'
211

312
import { ChevronRight } from '@tamagui/lucide-icons'
413
import { type LinkProps, useLink } from 'solito/link'
514
import { useFriends } from '../affiliate/utils/useFriends'
615
import { IconAccount } from 'app/components/icons'
16+
import { HomeBodyCard } from './screen'
717

818
export const FriendsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
919
const linkProps = useLink({ href })
1020

1121
return (
12-
<Card
13-
elevation={'$0.75'}
14-
hoverStyle={{ scale: 0.925 }}
15-
pressStyle={{ scale: 0.875 }}
16-
animation="bouncy"
17-
size={'$5'}
18-
br="$7"
19-
{...linkProps}
20-
{...props}
21-
>
22+
<HomeBodyCard {...linkProps} {...props}>
2223
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
2324
<Paragraph fontSize={'$5'} fontWeight="400">
2425
Friends
@@ -34,7 +35,7 @@ export const FriendsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
3435
<FriendsPreview />
3536
<Paragraph color={'$color10'}>Network with Future Cash</Paragraph>
3637
</Card.Footer>
37-
</Card>
38+
</HomeBodyCard>
3839
)
3940
}
4041

@@ -53,11 +54,20 @@ function FriendsPreview({ limit = 3 }: { limit?: number }) {
5354
return (
5455
<XStack ai="center" jc="space-between">
5556
<OverlappingFriendAvatars friends={filledFriends} />
56-
<Card circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5" mih={0} miw={0}>
57+
<ThemeableStack
58+
circular
59+
ai="center"
60+
jc="center"
61+
bc="$color0"
62+
w={'$3.5'}
63+
h="$3.5"
64+
mih={0}
65+
miw={0}
66+
>
5767
<Paragraph fontSize={'$4'} fontWeight="500">
5868
{`${data?.count ?? 0}`}
5969
</Paragraph>
60-
</Card>
70+
</ThemeableStack>
6171
</XStack>
6272
)
6373
}

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

Lines changed: 26 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import {
22
Card,
33
type CardProps,
4-
H1,
54
Paragraph,
65
Spinner,
76
Theme,
87
ThemeableStack,
98
useMedia,
109
XStack,
1110
type XStackProps,
11+
YStack,
1212
} from '@my/ui'
1313
import formatAmount from 'app/utils/formatAmount'
1414

@@ -25,6 +25,7 @@ import { useMemo } from 'react'
2525
import { IconCoin, IconError } from 'app/components/icons'
2626
import { useCoins } from 'app/provider/coins'
2727
import { investmentCoins as investmentCoinsList } from 'app/data/coins'
28+
import { HomeBodyCard } from './screen'
2829

2930
export const InvestmentsBalanceCard = (props: CardProps) => {
3031
const media = useMedia()
@@ -52,16 +53,7 @@ export const InvestmentsBalanceCard = (props: CardProps) => {
5253
const formattedBalance = formatAmount(dollarTotal, 9, 0)
5354

5455
return (
55-
<Card
56-
elevation={'$0.75'}
57-
hoverStyle={{ scale: 0.925 }}
58-
pressStyle={{ scale: 0.875 }}
59-
animation="bouncy"
60-
onPress={toggleSubScreen}
61-
size={'$5'}
62-
br="$7"
63-
{...props}
64-
>
56+
<HomeBodyCard onPress={toggleSubScreen} {...props}>
6557
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
6658
<Paragraph fontSize={'$5'} fontWeight="400">
6759
Invest
@@ -81,31 +73,26 @@ export const InvestmentsBalanceCard = (props: CardProps) => {
8173
/>
8274
)}
8375
</Card.Header>
84-
<Card.Footer padded pt={0} fd="column">
85-
{isInvestmentsScreen && !media.gtLg ? (
86-
<>
87-
<Paragraph color={'$color12'} fontWeight={500} size={'$10'}>
88-
{(() => {
89-
switch (true) {
90-
case isPriceHidden:
91-
return '///////'
92-
case isLoading || !dollarBalances:
93-
return <Spinner size={'large'} color={'$color12'} />
94-
default:
95-
return `$${formattedBalance}`
96-
}
97-
})()}
98-
</Paragraph>
99-
<InvestmentsAggregate />
100-
</>
101-
) : (
102-
<>
103-
<InvestmentsPreview />
104-
<InvestmentsAggregate />
105-
</>
106-
)}
76+
<Card.Footer padded pt={0} jc="space-between" ai="center">
77+
<YStack jc="space-between">
78+
<Paragraph color={'$color12'} fontWeight={500} size={'$10'}>
79+
{(() => {
80+
switch (true) {
81+
case isPriceHidden:
82+
return '///////'
83+
case isLoading || !dollarBalances:
84+
return <Spinner size={'large'} color={'$color12'} />
85+
default:
86+
return `$${formattedBalance}`
87+
}
88+
})()}
89+
</Paragraph>
90+
91+
<InvestmentsAggregate />
92+
</YStack>
93+
{(!isInvestmentsScreen || media.gtLg) && <InvestmentsPreview />}
10794
</Card.Footer>
108-
</Card>
95+
</HomeBodyCard>
10996
)
11097
}
11198

@@ -126,13 +113,13 @@ function InvestmentsPreview() {
126113
(b?.balance ?? 0n) > (a?.balance ?? 0n) ? 1 : -1
127114
)
128115
return (
129-
<XStack ai="center" jc="space-between">
116+
<XStack ai="center">
130117
<OverlappingCoinIcons coins={sortedByBalance} />
131-
<Card circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5" mih={0} miw={0}>
118+
<ThemeableStack circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5">
132119
<Paragraph fontSize={'$4'} fontWeight="500">
133120
{`+${investmentCoinsList.length - 3}`}
134121
</Paragraph>
135-
</Card>
122+
</ThemeableStack>
136123
</XStack>
137124
)
138125
}
@@ -175,7 +162,7 @@ function InvestmentsAggregate() {
175162
return (
176163
<XStack gap="$2" ai="center">
177164
<Paragraph color="$color10" $gtXs={{ fontSize: 14 }} fontSize={12}>
178-
Diversify Your Crypto Portfolio
165+
Diversify Your Portfolio
179166
</Paragraph>
180167
</XStack>
181168
)

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Card, type CardProps, H1, Paragraph, Spinner, XStack } from '@my/ui'
1+
import { Card, type CardProps, Paragraph, Spinner, XStack } from '@my/ui'
22
import formatAmount from 'app/utils/formatAmount'
33
import { ChevronRight } from '@tamagui/lucide-icons'
44
import { useMemo } from 'react'
@@ -11,6 +11,7 @@ import { useQuery } from '@tanstack/react-query'
1111
import { useTokenPrices } from 'app/utils/useTokenPrices'
1212
import { baseMainnetClient, sendTokenAddress } from '@my/wagmi'
1313
import { coinsDict } from 'app/data/coins'
14+
import { HomeBodyCard } from './screen'
1415

1516
export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
1617
const linkProps = useLink({ href })
@@ -31,16 +32,7 @@ export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
3132
const isLoading = isPricesLoading || isDistributionLoading
3233

3334
return (
34-
<Card
35-
elevation={'$0.75'}
36-
hoverStyle={{ scale: 0.925 }}
37-
pressStyle={{ scale: 0.875 }}
38-
animation="bouncy"
39-
size={'$5'}
40-
br="$7"
41-
{...linkProps}
42-
{...props}
43-
>
35+
<HomeBodyCard {...linkProps} {...props}>
4436
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
4537
<Paragraph fontSize={'$5'} fontWeight="400">
4638
Rewards
@@ -65,9 +57,9 @@ export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
6557
}
6658
})()}
6759
</Paragraph>
68-
<Paragraph color={'$color10'}>Complete Tasks to Earn Send Back</Paragraph>
60+
<Paragraph color={'$color10'}>Complete Tasks for $SEND Back</Paragraph>
6961
</Card.Footer>
70-
</Card>
62+
</HomeBodyCard>
7163
)
7264
}
7365

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useSendEarnBalances, useVaultConvertSharesToAssets } from '../earn/hook
77
import { useIsPriceHidden } from './utils/useIsPriceHidden'
88
import { formatUnits } from 'viem'
99
import { type LinkProps, useLink } from 'solito/link'
10+
import { HomeBodyCard } from './screen'
1011

1112
export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
1213
const linkProps = useLink({ href })
@@ -32,16 +33,7 @@ export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProp
3233
)
3334

3435
return (
35-
<Card
36-
elevation={'$0.75'}
37-
hoverStyle={{ scale: 0.925 }}
38-
pressStyle={{ scale: 0.875 }}
39-
animation="bouncy"
40-
size={'$5'}
41-
br="$7"
42-
{...linkProps}
43-
{...props}
44-
>
36+
<HomeBodyCard {...linkProps} {...props}>
4537
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
4638
<Paragraph fontSize={'$5'} fontWeight="400">
4739
Save
@@ -68,7 +60,7 @@ export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProp
6860
</Paragraph>
6961
<Paragraph color={'$color10'}>Up to 12% Interest</Paragraph>
7062
</Card.Footer>
71-
</Card>
63+
</HomeBodyCard>
7264
)
7365
}
7466

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@ export const StablesBalanceCard = (props: CardProps) => {
4949
onPress={toggleSubScreen}
5050
cursor="pointer"
5151
overflow="hidden"
52-
size={'$4'}
52+
size={'$6'}
5353
br="$7"
5454
{...props}
5555
>
56-
<Card.Header padded pb={0} jc="space-between" fd="row" ai="center">
56+
<Card.Header padded pb={'$1'} jc="space-between" fd="row">
5757
<Paragraph fontSize={'$6'} fontWeight={300} color={'$color12'} $gtLg={{ fontSize: '$6' }}>
5858
Cash Balance
5959
</Paragraph>
@@ -70,7 +70,7 @@ export const StablesBalanceCard = (props: CardProps) => {
7070
<ChevronRight size={'$1'} color={'$color12'} />
7171
)}
7272
</Card.Header>
73-
<Card.Footer padded fd="column" gap="$4">
73+
<Card.Footer padded size="$6" pt={0} mt={0} fd="column" gap="$2">
7474
{(() => {
7575
switch (true) {
7676
case isPriceHidden:

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Paragraph,
77
Spinner,
88
Stack,
9+
styled,
910
useMedia,
1011
XStack,
1112
type XStackProps,
@@ -119,13 +120,11 @@ function HomeBody(props: XStackProps) {
119120
ai={'center'}
120121
>
121122
<StablesBalanceCard />
123+
<SavingsBalanceCard href="/earn" w="100%" />
124+
<InvestmentsBalanceCard w="100%" />
122125
<XStack gap="$3.5" w="100%" mih={136} jc={'center'}>
123-
<SavingsBalanceCard href="/earn" maw="50%" f={1} />
124-
<InvestmentsBalanceCard maw="50%" f={1} />
125-
</XStack>
126-
<XStack gap="$3.5" w="100%" mih={136} jc={'center'}>
127-
<RewardsCard href="/explore/rewards" maw="50%" f={1} />
128-
<FriendsCard href="/account/affiliate" maw="50%" f={1} />
126+
<RewardsCard href="/explore/rewards" />
127+
<FriendsCard href="/account/affiliate" />
129128
</XStack>
130129
</YStack>
131130
{(() => {
@@ -146,14 +145,12 @@ function HomeBody(props: XStackProps) {
146145
}
147146

148147
function InvestmentsBody() {
149-
const media = useMedia()
150148
const { investmentCoins: myInvestmentCoins, isLoading } = useCoins()
151149
const [isSheetOpen, setIsSheetOpen] = useState(false)
152150
const hoverStyles = useHoverStyles()
153151

154152
return (
155153
<YStack ai="center" $gtXs={{ gap: '$3' }} gap={'$3.5'} f={1}>
156-
{media.lg && <InvestmentsBalanceCard />}
157154
<Card
158155
bc={'$color1'}
159156
width="100%"
@@ -221,3 +218,13 @@ function StablesBody() {
221218
</YStack>
222219
)
223220
}
221+
222+
export const HomeBodyCard = styled(Card, {
223+
hoverStyle: { scale: 0.925 },
224+
pressStyle: { scale: 0.875 },
225+
animation: 'bouncy',
226+
size: '$5',
227+
br: '$7',
228+
f: 1,
229+
mah: 136,
230+
})

0 commit comments

Comments
 (0)