diff --git a/apps/web/src/pages/Landing/sections/Hero.tsx b/apps/web/src/pages/Landing/sections/Hero.tsx index 0211a5ec39f..9bef5d814ce 100644 --- a/apps/web/src/pages/Landing/sections/Hero.tsx +++ b/apps/web/src/pages/Landing/sections/Hero.tsx @@ -9,7 +9,7 @@ import { ChevronDown } from 'react-feather' import { Trans, useTranslation } from 'react-i18next' import { useNavigate } from 'react-router' import { serializeSwapStateToURLParameters } from 'state/swap/hooks' -import { Flex, Text, useMedia } from 'ui/src' +import { Button, Flex, Text, useMedia } from 'ui/src' import { INTERFACE_NAV_HEIGHT } from 'ui/src/theme' import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains' import { SwapRedirectFn } from 'uniswap/src/features/transactions/components/TransactionModal/TransactionModalContext' @@ -139,6 +139,14 @@ export function Hero({ scrollToRef, transition }: HeroProps) { + + + + + + diff --git a/apps/web/src/pages/Profile/index.tsx b/apps/web/src/pages/Profile/index.tsx new file mode 100644 index 00000000000..70f852a3ca2 --- /dev/null +++ b/apps/web/src/pages/Profile/index.tsx @@ -0,0 +1,70 @@ +import MiniPortfolio from 'components/AccountDrawer/MiniPortfolio/MiniPortfolio' +import { DeltaArrow } from 'components/Tokens/TokenDetails/Delta' +import { useAccount } from 'hooks/useAccount' +import { Flex, Text } from 'ui/src' +import { INTERFACE_NAV_HEIGHT } from 'ui/src/theme' +import { usePortfolioTotalValue } from 'uniswap/src/features/dataApi/balances' +import { useLocalizationContext } from 'uniswap/src/features/language/LocalizationContext' +import { NumberType } from 'utilities/src/format/types' + +export default function Profile() { + const account = useAccount() + const { convertFiatAmountFormatted, formatPercent } = useLocalizationContext() + + const { data: portfolioTotalValue, loading: portfolioLoading } = usePortfolioTotalValue({ + address: account.address, + }) + + return ( + + + + + Portfolio + + {account.address && ( + + + {portfolioLoading + ? '...' + : portfolioTotalValue?.balanceUSD + ? convertFiatAmountFormatted(portfolioTotalValue.balanceUSD, NumberType.PortfolioBalance) + : '$0.00'} + + {portfolioTotalValue?.percentChange && ( + + + = 0 ? '$statusSuccess' : '$statusCritical'} + > + {formatPercent(Math.abs(portfolioTotalValue.percentChange))} (24h) + + + )} + + )} + + {account.address ? ( + + ) : ( + + Connect your wallet to view your portfolio + + )} + + + ) +} diff --git a/apps/web/src/pages/RouteDefinitions.tsx b/apps/web/src/pages/RouteDefinitions.tsx index fd00d60859b..37e189d78d1 100644 --- a/apps/web/src/pages/RouteDefinitions.tsx +++ b/apps/web/src/pages/RouteDefinitions.tsx @@ -40,6 +40,7 @@ const TokenDetails = lazy(() => import('pages/TokenDetails')) const ExtensionPasskeyAuthPopUp = lazy(() => import('pages/ExtensionPasskeyAuthPopUp')) const PasskeyManagement = lazy(() => import('pages/PasskeyManagement')) const ExtensionUninstall = lazy(() => import('pages/ExtensionUninstall/ExtensionUninstall')) +const Profile = lazy(() => import('pages/Profile')) interface RouterConfig { browserRouterEnabled?: boolean @@ -359,6 +360,12 @@ export const routes: RouteDefinition[] = [ getElement: () => , getTitle: () => i18n.t('title.extension.uninstall'), }), + createRouteDefinition({ + path: '/profile', + getElement: () => , + getTitle: () => 'Profile', + getDescription: () => 'Manage your account settings and preferences', + }), createRouteDefinition({ path: '*', getElement: () => }), createRouteDefinition({ path: '/not-found', getElement: () => }), ]