diff --git a/packages/app/features/home/TokenBalanceCard.tsx b/packages/app/features/home/TokenBalanceCard.tsx
index 540a1b663..0a1857f16 100644
--- a/packages/app/features/home/TokenBalanceCard.tsx
+++ b/packages/app/features/home/TokenBalanceCard.tsx
@@ -1,7 +1,6 @@
-import { Label, Paragraph, Spinner, Stack, Tooltip, TooltipGroup, XStack, YStack } from '@my/ui'
+import { Label, Paragraph, Spinner, Tooltip, TooltipGroup, XStack, YStack } from '@my/ui'
import formatAmount from 'app/utils/formatAmount'
import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
-import { useThemeSetting } from '@tamagui/next-theme'
const USDollar = new Intl.NumberFormat('en-US', {
style: 'currency',
@@ -10,73 +9,71 @@ const USDollar = new Intl.NumberFormat('en-US', {
export const TokenBalanceCard = () => {
const { totalBalance } = useSendAccountBalances()
- const { resolvedTheme } = useThemeSetting()
- const separatorColor = resolvedTheme?.startsWith('dark') ? '#343434' : '#E6E6E6'
return (
-
-
-
-
-
-
-
-
-
-
-
- {totalBalance === undefined ? (
-
- ) : (
-
- {formatAmount(totalBalance, 4, 0)}
-
- )}
-
- {'USD'}
+ {formatAmount(totalBalance, 4, 0)}
-
-
-
-
-
- {totalBalance === undefined ? null : USDollar.format(Number(totalBalance))}
+ )}
+
+ {'USD'}
-
-
-
-
+
+
+
+
+
+ {totalBalance === undefined ? null : USDollar.format(Number(totalBalance))}
+
+
+
+
-
+
)
}
diff --git a/packages/app/features/home/TokenBalanceList.tsx b/packages/app/features/home/TokenBalanceList.tsx
index 778d45bfe..9d324e880 100644
--- a/packages/app/features/home/TokenBalanceList.tsx
+++ b/packages/app/features/home/TokenBalanceList.tsx
@@ -1,4 +1,12 @@
-import { Paragraph, Spinner, Tooltip, type TooltipProps, XStack, type XStackProps } from '@my/ui'
+import {
+ Paragraph,
+ Spinner,
+ Tooltip,
+ type TooltipProps,
+ XStack,
+ Link,
+ type LinkProps,
+} from '@my/ui'
import { useThemeSetting } from '@tamagui/next-theme'
import { baseMainnet } from '@my/wagmi'
import { IconArrowRight, IconError } from 'app/components/icons'
@@ -9,8 +17,7 @@ import type { coins } from 'app/data/coins'
import { useToken } from 'app/routers/params'
export const TokenBalanceList = ({ coins }: { coins: coins }) => {
- const [, setTokenParam] = useToken()
-
+ const [tokenParam] = useToken()
const { resolvedTheme } = useThemeSetting()
const separatorColor = resolvedTheme?.startsWith('dark') ? '#343434' : '#E6E6E6'
@@ -22,7 +29,12 @@ export const TokenBalanceList = ({ coins }: { coins: coins }) => {
ai={'center'}
py={'$3.5'}
borderColor={separatorColor}
- onPress={() => setTokenParam(coin.token)}
+ disabled={tokenParam !== undefined && tokenParam !== coin.token}
+ disabledStyle={{ opacity: 0.5 }}
+ href={{
+ pathname: '/',
+ query: { token: coin.token },
+ }}
borderBottomWidth={index !== coins.length - 1 ? 1 : 0}
/>
))
@@ -33,7 +45,7 @@ const TokenBalanceItem = ({
...props
}: {
coin: { label: string; token: `0x${string}` | 'eth'; icon: JSX.Element }
-} & XStackProps) => {
+} & Omit) => {
const { data: sendAccounts } = useSendAccounts()
const sendAccount = sendAccounts?.[0]
@@ -45,7 +57,7 @@ const TokenBalanceItem = ({
})
return (
-
+
{coin.icon}
-
+
)
}
diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx
index 1bfca3b02..affa78c43 100644
--- a/packages/app/features/home/screen.tsx
+++ b/packages/app/features/home/screen.tsx
@@ -1,87 +1,96 @@
import {
- BigHeading,
Button,
Container,
- H1,
- Label,
Paragraph,
Separator,
- Spinner,
- Stack,
XStack,
YStack,
useMedia,
useToastController,
+ Stack,
+ Label,
+ H1,
+ Spinner,
+ BigHeading,
} from '@my/ui'
import { IconDeposit, IconPlus } from 'app/components/icons'
import { TokenBalanceList } from './TokenBalanceList'
import { coins } from 'app/data/coins'
import { TokenBalanceCard } from './TokenBalanceCard'
-import { type UseBalanceReturnType, useBalance, useAccount } from 'wagmi'
-import { baseMainnet } from '@my/wagmi/chains'
-import { useSendAccounts } from 'app/utils/send-accounts'
-
-import formatAmount from 'app/utils/formatAmount'
-import { useTokenPrice } from 'app/utils/coin-gecko'
+import { type UseBalanceReturnType, useAccount, useBalance } from 'wagmi'
import { useToken } from 'app/routers/params'
import { OpenConnectModalWrapper } from 'app/utils/OpenConnectModalWrapper'
+import { useThemeSetting } from '@tamagui/next-theme'
+import { useTokenPrice } from '../../utils/coin-gecko'
+import { useSendAccounts } from 'app/utils/send-accounts'
+import { baseMainnet } from '@my/wagmi'
+import formatAmount from 'app/utils/formatAmount'
export function HomeScreen() {
const media = useMedia()
const toast = useToastController()
const [tokenParam] = useToken()
const { address } = useAccount()
+ const { resolvedTheme } = useThemeSetting()
+ const separatorColor = resolvedTheme?.startsWith('dark') ? '#343434' : '#E6E6E6'
const selectedCoin = coins.find((c) => c.token === tokenParam)
return (
-
+
{(selectedCoin === undefined || media.gtLg) && (
-
-
-
-
-
-
-
+
+
+
-
-
+
+
+
)}