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: () => }),
]