Skip to content

Commit ef27bf8

Browse files
youngkidwarrioryoungkidwarrior
committed
restyling and Rewards and Friends cards
1 parent d8cbf42 commit ef27bf8

File tree

11 files changed

+454
-262
lines changed

11 files changed

+454
-262
lines changed

‎apps/next/pages/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const Page: NextPageWithLayout<InferGetServerSidePropsType<typeof getServ
4949
<title>Send</title>
5050
</Head>
5151
{session ? (
52-
<HomeLayout TopNav={<TopNav header="Home" showLogo={true} backFunction="router" />}>
52+
<HomeLayout TopNav={<TopNav header="Home" showLogo={true} backFunction="home" />}>
5353
<HomeScreen />
5454
</HomeLayout>
5555
) : (

‎packages/app/components/TopNav.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ export function TopNav({
162162
)
163163
case media.gtLg && !showOnGtLg:
164164
return null
165-
case Boolean(queryParams.token):
165+
case queryParams.token !== undefined:
166166
return (
167167
<XStack ai="center" f={1}>
168168
<Button onPress={handleBack}>
@@ -174,6 +174,18 @@ export function TopNav({
174174
/>
175175
</ButtonOg.Icon>
176176
</Button>
177+
<Paragraph size={'$8'} col={'$color10'}>
178+
{(() => {
179+
switch (queryParams.token) {
180+
case 'investments':
181+
return 'Invest'
182+
case 'stables':
183+
return 'Cash'
184+
default:
185+
return 'Balance'
186+
}
187+
})()}
188+
</Paragraph>
177189
</XStack>
178190
)
179191
case !isSubRoute:

‎packages/app/data/coins.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export const allCoinsDict = allCoins.reduce((acc, coin) => {
209209

210210
export type allCoinsDict = typeof allCoinsDict
211211

212-
export type CoinWithBalance = allCoins[number] & {
212+
export type CoinWithBalance = coin & {
213213
balance: bigint | undefined
214214
}
215215

‎packages/app/features/auth/loginWithPhone/screen.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export const LoginWithPhoneScreen = () => {
7979
$theme-dark={{
8080
variant: canSubmit ? undefined : 'outlined',
8181
}}
82+
elevation={canSubmit ? '$0.75' : undefined}
8283
>
8384
<ButtonText
8485
ff={'$mono'}
@@ -154,6 +155,7 @@ export const LoginWithPhoneScreen = () => {
154155
>
155156
{({ countryCode, phone }) => (
156157
<FadeCard
158+
elevation={'$0.75'}
157159
w={'100%'}
158160
mt={'$5'}
159161
borderColor={validationError ? '$error' : 'transparent'}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Card, type CardProps, Paragraph, XStack } from '@my/ui'
2+
3+
import { ChevronRight } from '@tamagui/lucide-icons'
4+
import { type LinkProps, useLink } from 'solito/link'
5+
6+
export const FriendsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
7+
const linkProps = useLink({ href })
8+
9+
return (
10+
<Card
11+
elevate
12+
hoverStyle={{ scale: 0.925 }}
13+
pressStyle={{ scale: 0.875 }}
14+
animation="bouncy"
15+
size={'$5'}
16+
br="$7"
17+
{...linkProps}
18+
{...props}
19+
>
20+
<Card.Header padded fd="row" ai="center" jc="space-between">
21+
<Paragraph fontSize={'$7'} fontWeight="400">
22+
Friends
23+
</Paragraph>
24+
<XStack flex={1} />
25+
<ChevronRight
26+
size={'$1.5'}
27+
color={'$lightGrayTextField'}
28+
$theme-light={{ color: '$darkGrayTextField' }}
29+
/>
30+
</Card.Header>
31+
<Card.Footer padded />
32+
</Card>
33+
)
34+
}

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

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import { Link, LinkableButton, type LinkProps, Paragraph, XStack, YStack } from '@my/ui'
2-
1+
import { Link, type LinkProps, Paragraph, XStack, YStack } from '@my/ui'
32
import { IconCoin } from 'app/components/icons/IconCoin'
43
import type { CoinWithBalance } from 'app/data/coins'
54

6-
import { useCoins } from 'app/provider/coins'
7-
85
import formatAmount from 'app/utils/formatAmount'
96
import { Fragment } from 'react'
107
import { useHoverStyles } from 'app/utils/useHoverStyles'
@@ -13,17 +10,17 @@ import { useTokenPrices } from 'app/utils/useTokenPrices'
1310
import { type MarketData, useMultipleTokensMarketData } from 'app/utils/coin-gecko'
1411
import { useThemeSetting } from '@tamagui/next-theme'
1512
import { useIsPriceHidden } from 'app/features/home/utils/useIsPriceHidden'
16-
import { IconPlus } from 'app/components/icons'
1713

18-
export const InvestmentsBalanceList = () => {
19-
const { investmentCoins, isLoading } = useCoins()
14+
export const InvestmentsBalanceList = ({
15+
coins,
16+
}: {
17+
coins: CoinWithBalance[]
18+
}) => {
2019
const hoverStyles = useHoverStyles()
2120
const { data: tokensMarketData, isLoading: isLoadingTokensMarketData } =
22-
useMultipleTokensMarketData(investmentCoins?.map((c) => c.coingeckoTokenId) || [])
23-
24-
if (isLoading) return null
21+
useMultipleTokensMarketData(coins?.map((c) => c.coingeckoTokenId) || [])
2522

26-
return investmentCoins.map((coin) => (
23+
return coins.map((coin) => (
2724
<Fragment key={`token-balance-list-${coin.label}`}>
2825
<TokenBalanceItem
2926
testID={`token-balance-list-${coin.label}`}
@@ -75,7 +72,7 @@ const TokenBalanceItem = ({
7572
<YStack f={1} jc={'space-between'}>
7673
<XStack jc={'space-between'} ai={'center'}>
7774
<Paragraph fontSize={'$6'} fontWeight={'500'} color={'$color12'}>
78-
{coin.shortLabel || coin.label}
75+
{coin.label}
7976
</Paragraph>
8077
<TokenBalance coin={coin} />
8178
</XStack>
@@ -128,27 +125,10 @@ const TokenBalance = ({
128125

129126
if (balance === undefined) return <></>
130127
return (
131-
<Paragraph
132-
fontSize={'$6'}
133-
fontWeight={'500'}
134-
col="$color12"
135-
$gtSm={{ fontSize: '$8', fontWeight: '600' }}
136-
>
128+
<Paragraph fontSize={'$8'} fontWeight={'500'} col="$color12">
137129
{isPriceHidden
138130
? '//////'
139131
: formatAmount((Number(balance) / 10 ** decimals).toString(), 10, formatDecimals ?? 5)}
140132
</Paragraph>
141133
)
142134
}
143-
144-
export const AddInvestmentLink = () => {
145-
const hoverStyles = useHoverStyles()
146-
147-
return (
148-
<LinkableButton circular href="/trade" p="$2" size="$5" hoverStyle={hoverStyles}>
149-
<LinkableButton.Icon>
150-
<IconPlus size="$5" color="$color10" />
151-
</LinkableButton.Icon>
152-
</LinkableButton>
153-
)
154-
}

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

Lines changed: 115 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,36 @@
1-
import { Button, Card, Paragraph, Spinner, Theme, XStack, YStack } from '@my/ui'
1+
import {
2+
Card,
3+
type CardProps,
4+
H1,
5+
Paragraph,
6+
Spinner,
7+
Theme,
8+
ThemeableStack,
9+
useMedia,
10+
XStack,
11+
type XStackProps,
12+
} from '@my/ui'
213
import formatAmount from 'app/utils/formatAmount'
314

415
import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons'
516

617
import { useIsPriceHidden } from './utils/useIsPriceHidden'
718

819
import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
9-
import { investmentCoins } from 'app/data/coins'
20+
import { type CoinWithBalance, investmentCoins } from 'app/data/coins'
1021

1122
import { useRootScreenParams } from 'app/routers/params'
1223
import { useMultipleTokensMarketData } from 'app/utils/coin-gecko'
1324
import { useMemo } from 'react'
14-
import { IconError } from 'app/components/icons'
25+
import { IconCoin, IconError } from 'app/components/icons'
1526
import { useCoins } from 'app/provider/coins'
27+
import { investmentCoins as investmentCoinsList } from 'app/data/coins'
1628

17-
export const InvestmentsBalanceCard = () => {
29+
export const InvestmentsBalanceCard = (props: CardProps) => {
30+
const media = useMedia()
1831
const [queryParams, setParams] = useRootScreenParams()
1932
const isInvestmentCoin = investmentCoins.some(
20-
(coin) => coin.token.toLowerCase() === queryParams.token
33+
(coin) => coin.token.toLowerCase() === queryParams.token?.toLowerCase()
2134
)
2235
const isInvestmentsScreen = queryParams.token === 'investments'
2336

@@ -39,62 +52,107 @@ export const InvestmentsBalanceCard = () => {
3952
const formattedBalance = formatAmount(dollarTotal, 9, 0)
4053

4154
return (
42-
<Card py="$5" px="$4" w={'100%'} jc="space-between" onPress={toggleSubScreen}>
43-
<YStack jc={'center'} gap={'$5'} w={'100%'}>
44-
<YStack w={'100%'} gap={'$2.5'} jc="space-between">
45-
<XStack ai={'center'} jc={'space-between'} gap="$2.5" width={'100%'}>
46-
<Paragraph fontSize={'$7'} fontWeight="400">
47-
Invest
48-
</Paragraph>
49-
<Button
50-
chromeless
51-
backgroundColor="transparent"
52-
hoverStyle={{ backgroundColor: 'transparent' }}
53-
pressStyle={{
54-
backgroundColor: 'transparent',
55-
borderColor: 'transparent',
56-
}}
57-
focusStyle={{ backgroundColor: 'transparent' }}
58-
p={0}
59-
height={'auto'}
60-
>
61-
<Button.Icon>
62-
{isInvestmentCoin || isInvestmentsScreen ? (
63-
<ChevronLeft
64-
size={'$1.5'}
65-
color={'$lightGrayTextField'}
66-
$theme-light={{ color: '$darkGrayTextField' }}
67-
$lg={{ display: 'none' }}
68-
/>
69-
) : (
70-
<ChevronRight
71-
size={'$1.5'}
72-
color={'$primary'}
73-
$theme-light={{ color: '$color12' }}
74-
/>
75-
)}
76-
</Button.Icon>
77-
</Button>
78-
</XStack>
79-
</YStack>
80-
<Paragraph fontSize={'$10'} fontWeight={'600'} color={'$color12'}>
81-
{(() => {
82-
switch (true) {
83-
case isPriceHidden:
84-
return '///////'
85-
case isLoading || !dollarBalances:
86-
return <Spinner size={'large'} />
87-
default:
88-
return `$${formattedBalance}`
89-
}
90-
})()}
55+
<Card
56+
elevate
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+
>
65+
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
66+
<Paragraph fontSize={'$5'} fontWeight="400">
67+
Invest
9168
</Paragraph>
92-
<InvestmentsAggregate />
93-
</YStack>
69+
{isInvestmentCoin || isInvestmentsScreen ? (
70+
<ChevronLeft
71+
size={'$1'}
72+
color={'$primary'}
73+
$theme-light={{ color: '$color12' }}
74+
$lg={{ display: 'none' }}
75+
/>
76+
) : (
77+
<ChevronRight
78+
size={'$1'}
79+
color={'$lightGrayTextField'}
80+
$theme-light={{ color: '$darkGrayTextField' }}
81+
/>
82+
)}
83+
</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+
)}
107+
</Card.Footer>
94108
</Card>
95109
)
96110
}
97111

112+
function InvestmentsPreview() {
113+
const { investmentCoins, isLoading } = useCoins()
114+
115+
if (isLoading) return <Spinner size="small" />
116+
117+
const existingSymbols = new Set(investmentCoins.map((coin) => coin.symbol))
118+
const coins = [
119+
...investmentCoins,
120+
...investmentCoinsList
121+
.filter((coin) => !existingSymbols.has(coin.symbol))
122+
.map((coin) => ({ ...coin, balance: 0n })),
123+
]
124+
125+
const sortedByBalance = coins.toSorted((a, b) =>
126+
(b?.balance ?? 0n) > (a?.balance ?? 0n) ? 1 : -1
127+
)
128+
return (
129+
<XStack ai="center" jc="space-between">
130+
<OverlappingCoinIcons coins={sortedByBalance} />
131+
<Card circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5" mih={0} miw={0}>
132+
<Paragraph fontSize={'$4'} fontWeight="500">
133+
{`+${investmentCoinsList.length - 3}`}
134+
</Paragraph>
135+
</Card>
136+
</XStack>
137+
)
138+
}
139+
140+
function OverlappingCoinIcons({
141+
coins,
142+
length = 3,
143+
...props
144+
}: { coins: CoinWithBalance[]; length?: number } & XStackProps) {
145+
return (
146+
<XStack ai="center" {...props}>
147+
{coins.slice(0, length).map(({ symbol }) => (
148+
<ThemeableStack key={symbol} circular mr={'$-3.5'} bc="transparent" ai="center" jc="center">
149+
<IconCoin size={'$3'} symbol={symbol} />
150+
</ThemeableStack>
151+
))}
152+
</XStack>
153+
)
154+
}
155+
98156
function InvestmentsAggregate() {
99157
const tokenIds = useCoins()
100158
.investmentCoins.filter((c) => c?.balance && c.balance > 0n)
@@ -117,7 +175,7 @@ function InvestmentsAggregate() {
117175
return (
118176
<XStack gap="$2" ai="center">
119177
<Paragraph color="$color10" $gtXs={{ fontSize: 14 }} fontSize={12}>
120-
Add popular crypto assets to your portfolio
178+
Diversify Your Crypto Portfolio
121179
</Paragraph>
122180
</XStack>
123181
)

0 commit comments

Comments
 (0)