Skip to content

Commit fd956c6

Browse files
musidlomusidlo
authored
Added slashes on all assets (#1399)
1 parent 398ac76 commit fd956c6

File tree

4 files changed

+145
-115
lines changed

4 files changed

+145
-115
lines changed

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

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,16 @@ import {
99
YStack,
1010
} from '@my/ui'
1111
import formatAmount from 'app/utils/formatAmount'
12-
import AsyncStorage from '@react-native-async-storage/async-storage'
13-
import { useEffect, useState } from 'react'
12+
import { useState } from 'react'
1413
import { type Timer, useStopwatch } from 'react-use-precision-timer'
1514
import { useCoins } from 'app/provider/coins'
1615
import { Eye, EyeOff } from '@tamagui/lucide-icons'
16+
import { useIsPriceHidden } from 'app/features/home/utils/useIsPriceHidden'
1717

1818
export const TokenBalanceCard = () => {
1919
// @todo add an enabled flag for when hidden
2020
const { totalPrice, pricesQuery } = useCoins()
21-
2221
const formattedBalance = formatAmount(totalPrice, 9, 0)
23-
2422
const { isPriceHidden, toggleIsPriceHidden } = useIsPriceHidden()
2523
const timer = useStopwatch()
2624
const { isGameVisible, presses, increaseScore } = useShowHideGame(timer)
@@ -92,7 +90,7 @@ export const TokenBalanceCard = () => {
9290
zIndex={1}
9391
$gtSm={{ fontSize: 96, lineHeight: 96 }}
9492
>
95-
{'//////'}
93+
{'///////'}
9694
</BigHeading>
9795
)
9896
case pricesQuery.isLoading || !totalPrice:
@@ -124,40 +122,6 @@ export const TokenBalanceCard = () => {
124122
)
125123
}
126124

127-
const useIsPriceHidden = () => {
128-
const [isPriceHidden, setIsPriceHidden] = useState<boolean>(true)
129-
130-
useEffect(() => {
131-
const getIsPriceHidden = async () => {
132-
try {
133-
const savedIsPriceHidden = await AsyncStorage.getItem('isPriceHidden')
134-
if (savedIsPriceHidden === null) {
135-
setIsPriceHidden(false)
136-
}
137-
if (savedIsPriceHidden !== null) {
138-
setIsPriceHidden(JSON.parse(savedIsPriceHidden))
139-
}
140-
} catch (error) {
141-
console.error('Error reading isPriceHidden from AsyncStorage:', error)
142-
}
143-
}
144-
145-
getIsPriceHidden()
146-
}, [])
147-
148-
const toggleIsPriceHidden = async () => {
149-
try {
150-
const newValue = !isPriceHidden
151-
await AsyncStorage.setItem('isPriceHidden', JSON.stringify(newValue))
152-
setIsPriceHidden(newValue)
153-
} catch (error) {
154-
console.error('Error saving isPriceHidden to AsyncStorage:', error)
155-
}
156-
}
157-
158-
return { isPriceHidden, toggleIsPriceHidden }
159-
}
160-
161125
const useShowHideGame = (timer: Timer) => {
162126
const countToStop = 100
163127
const countToVisible = 10

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { convertBalanceToFiat } from 'app/utils/convertBalanceToUSD'
1212
import { useTokenPrices } from 'app/utils/useTokenPrices'
1313
import { type MarketData, useMultipleTokensMarketData } from 'app/utils/coin-gecko'
1414
import { useThemeSetting } from '@tamagui/next-theme'
15+
import { useIsPriceHidden } from 'app/features/home/utils/useIsPriceHidden'
1516

1617
export const TokenBalanceList = () => {
1718
const { coins, isLoading } = useCoins()
@@ -66,6 +67,7 @@ const TokenBalanceItem = ({
6667
?.price_change_percentage_24h ?? null
6768
const changeText = changePercent24h?.toFixed(2) || ''
6869
const isNeutral = changeText === '0.00' || changeText === '-0.00'
70+
const { isPriceHidden } = useIsPriceHidden()
6971

7072
return (
7173
<Link display="flex" {...props}>
@@ -84,9 +86,16 @@ const TokenBalanceItem = ({
8486
color={'$lightGrayTextField'}
8587
$theme-light={{ color: '$darkGrayTextField' }}
8688
>
87-
{isLoadingTokenPrices || balanceInUSD === undefined
88-
? '$0.00'
89-
: `$${formatAmount(balanceInUSD, 12, 2)}`}
89+
{(() => {
90+
switch (true) {
91+
case isLoadingTokenPrices || balanceInUSD === undefined:
92+
return '$0.00'
93+
case isPriceHidden:
94+
return '///////'
95+
default:
96+
return `$${formatAmount(balanceInUSD, 12, 2)}`
97+
}
98+
})()}
9099
</Paragraph>
91100
<Paragraph
92101
color={(() => {
@@ -116,6 +125,8 @@ const TokenBalance = ({
116125
}: {
117126
coin: CoinWithBalance
118127
}) => {
128+
const { isPriceHidden } = useIsPriceHidden()
129+
119130
if (balance === undefined) return <></>
120131
return (
121132
<Paragraph
@@ -124,7 +135,9 @@ const TokenBalance = ({
124135
col="$color12"
125136
$gtSm={{ fontSize: '$8', fontWeight: '600' }}
126137
>
127-
{formatAmount((Number(balance) / 10 ** decimals).toString(), 10, formatDecimals ?? 5)}
138+
{isPriceHidden
139+
? '//////'
140+
: formatAmount((Number(balance) / 10 ** decimals).toString(), 10, formatDecimals ?? 5)}
128141
</Paragraph>
129142
)
130143
}

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

Lines changed: 75 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import {
2-
Paragraph,
3-
XStack,
4-
YStack,
5-
Stack,
6-
Spinner,
7-
Card,
82
AnimatePresence,
3+
Button,
4+
Card,
5+
H1,
96
H4,
7+
Paragraph,
8+
Spinner,
9+
Stack,
10+
Theme,
1011
useMedia,
12+
XStack,
1113
type XStackProps,
12-
H1,
13-
Theme,
14-
Button,
14+
YStack,
1515
} from '@my/ui'
1616
import { useSendAccount } from 'app/utils/send-accounts'
1717
import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam'
@@ -27,6 +27,7 @@ import { useIsSendingUnlocked } from 'app/utils/useIsSendingUnlocked'
2727
import { HomeQuickActions } from 'app/features/home/HomeQuickActions'
2828
import { useSupabase } from 'app/utils/supabase/useSupabase'
2929
import { useRouter } from 'solito/router'
30+
import { IsPriceHiddenProvider } from 'app/features/home/utils/useIsPriceHidden'
3031

3132
function SendSearchBody() {
3233
const { isLoading, error } = useTagSearch()
@@ -62,75 +63,77 @@ function HomeBody(props: XStackProps) {
6263
)
6364

6465
return (
65-
<XStack
66-
w={'100%'}
67-
$gtLg={{ gap: '$5', pb: '$3.5' }}
68-
$lg={{ f: 1, pt: '$3' }}
69-
minHeight={'100%'}
70-
{...props}
71-
>
72-
<YStack
73-
$gtLg={{ display: 'flex', w: '45%', gap: '$5', pb: 0 }}
74-
display={!selectedCoin ? 'flex' : 'none'}
75-
width="100%"
76-
gap="$3.5"
77-
ai={'center'}
66+
<IsPriceHiddenProvider>
67+
<XStack
68+
w={'100%'}
69+
$gtLg={{ gap: '$5', pb: '$3.5' }}
70+
$lg={{ f: 1, pt: '$3' }}
71+
minHeight={'100%'}
72+
{...props}
7873
>
79-
{!isSendingUnlocked ? (
80-
<>
81-
<Card p={'$4.5'} ai={'center'} gap="$5" jc="space-around" w={'100%'}>
82-
<YStack gap="$6" jc="center" ai="center">
83-
<Theme name="red_active">
84-
<AlertCircle size={'$3'} />
85-
</Theme>
86-
<YStack ai="center" gap="$2">
87-
<H1 tt="uppercase" fontWeight={'800'}>
88-
ADD FUNDS
89-
</H1>
90-
<Paragraph color="$color10" $gtMd={{ fontSize: '$6' }} ta="center">
91-
Deposit at least .05 USDC to unlock sending
92-
</Paragraph>
93-
</YStack>
94-
<XStack w="100%">
95-
<HomeButtons.DepositButton mah={40} />
96-
</XStack>
97-
</YStack>
98-
</Card>
99-
</>
100-
) : (
101-
<TokenBalanceCard />
102-
)}
103-
<HomeQuickActions
104-
y={selectedCoin ? -quickActionHeightWithOffset : 0}
105-
zIndex={selectedCoin ? -1 : 0}
106-
animateOnly={['transform']}
107-
animation="200ms"
108-
>
109-
<HomeQuickActions.Deposit />
110-
<HomeQuickActions.Earn />
111-
<HomeQuickActions.Trade />
112-
</HomeQuickActions>
11374
<YStack
114-
w={'100%'}
75+
$gtLg={{ display: 'flex', w: '45%', gap: '$5', pb: 0 }}
76+
display={!selectedCoin ? 'flex' : 'none'}
77+
width="100%"
78+
gap="$3.5"
11579
ai={'center'}
116-
y={selectedCoin ? -quickActionHeightWithOffset : 0}
117-
animateOnly={['transform']}
118-
animation="200ms"
11980
>
120-
<Card
121-
bc={'$color1'}
122-
width="100%"
123-
p="$2"
124-
$gtSm={{
125-
p: '$4',
126-
}}
81+
{!isSendingUnlocked ? (
82+
<>
83+
<Card p={'$4.5'} ai={'center'} gap="$5" jc="space-around" w={'100%'}>
84+
<YStack gap="$6" jc="center" ai="center">
85+
<Theme name="red_active">
86+
<AlertCircle size={'$3'} />
87+
</Theme>
88+
<YStack ai="center" gap="$2">
89+
<H1 tt="uppercase" fontWeight={'800'}>
90+
ADD FUNDS
91+
</H1>
92+
<Paragraph color="$color10" $gtMd={{ fontSize: '$6' }} ta="center">
93+
Deposit at least .05 USDC to unlock sending
94+
</Paragraph>
95+
</YStack>
96+
<XStack w="100%">
97+
<HomeButtons.DepositButton mah={40} />
98+
</XStack>
99+
</YStack>
100+
</Card>
101+
</>
102+
) : (
103+
<TokenBalanceCard />
104+
)}
105+
<HomeQuickActions
106+
y={selectedCoin ? -quickActionHeightWithOffset : 0}
107+
zIndex={selectedCoin ? -1 : 0}
108+
animateOnly={['transform']}
109+
animation="200ms"
110+
>
111+
<HomeQuickActions.Deposit />
112+
<HomeQuickActions.Earn />
113+
<HomeQuickActions.Trade />
114+
</HomeQuickActions>
115+
<YStack
116+
w={'100%'}
117+
ai={'center'}
118+
y={selectedCoin ? -quickActionHeightWithOffset : 0}
119+
animateOnly={['transform']}
120+
animation="200ms"
127121
>
128-
<TokenBalanceList />
129-
</Card>
122+
<Card
123+
bc={'$color1'}
124+
width="100%"
125+
p="$2"
126+
$gtSm={{
127+
p: '$4',
128+
}}
129+
>
130+
<TokenBalanceList />
131+
</Card>
132+
</YStack>
130133
</YStack>
131-
</YStack>
132-
{selectedCoin !== undefined && <TokenDetails coin={selectedCoin} />}
133-
</XStack>
134+
{selectedCoin !== undefined && <TokenDetails coin={selectedCoin} />}
135+
</XStack>
136+
</IsPriceHiddenProvider>
134137
)
135138
}
136139

‎packages/app/features/home/utils/useIsPriceHidden.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
2+
import AsyncStorage from '@react-native-async-storage/async-storage'
3+
4+
type IsPriceHiddenContextType = {
5+
isPriceHidden: boolean
6+
toggleIsPriceHidden: () => void
7+
}
8+
9+
const IsPriceHiddenContext = createContext<IsPriceHiddenContextType | undefined>(undefined)
10+
11+
export const IsPriceHiddenProvider = ({ children }: { children: ReactNode }) => {
12+
const [isPriceHidden, setIsPriceHidden] = useState<boolean>(true)
13+
14+
useEffect(() => {
15+
const getIsPriceHidden = async () => {
16+
try {
17+
const savedIsPriceHidden = await AsyncStorage.getItem('isPriceHidden')
18+
setIsPriceHidden(savedIsPriceHidden ? JSON.parse(savedIsPriceHidden) : false)
19+
} catch (error) {
20+
console.error('Error reading isPriceHidden from AsyncStorage:', error)
21+
}
22+
}
23+
24+
void getIsPriceHidden()
25+
}, [])
26+
27+
const toggleIsPriceHidden = async () => {
28+
try {
29+
const newValue = !isPriceHidden
30+
await AsyncStorage.setItem('isPriceHidden', JSON.stringify(newValue))
31+
setIsPriceHidden(newValue)
32+
} catch (error) {
33+
console.error('Error saving isPriceHidden to AsyncStorage:', error)
34+
}
35+
}
36+
37+
return (
38+
<IsPriceHiddenContext.Provider value={{ isPriceHidden, toggleIsPriceHidden }}>
39+
{children}
40+
</IsPriceHiddenContext.Provider>
41+
)
42+
}
43+
44+
export const useIsPriceHidden = () => {
45+
const context = useContext(IsPriceHiddenContext)
46+
if (context === undefined) {
47+
throw new Error('useIsPriceHidden must be used within a IsPriceHiddenProvider')
48+
}
49+
return context
50+
}

0 commit comments

Comments
 (0)