diff --git a/apps/lend/src/layout/Header.tsx b/apps/lend/src/layout/Header.tsx
index 70963cec..80bacfba 100644
--- a/apps/lend/src/layout/Header.tsx
+++ b/apps/lend/src/layout/Header.tsx
@@ -16,7 +16,7 @@ import useStore from '@/store/useStore'
import { APPS_LINKS } from '@/ui/AppNav'
import { CommunitySection, ResourcesSection } from '@/layout/Footer'
import { useTvl } from '@/entities/chain'
-import { Header as NewHeader } from '@/common/widgets/Header/Header'
+import { Header as NewHeader } from '@/common/widgets/Header'
import { ThemeKey } from '@ui-kit/shared/lib'
diff --git a/packages/curve-common/src/widgets/Header/HeaderLogoWithMenu.tsx b/packages/curve-common/src/widgets/Header/HeaderLogoWithMenu.tsx
new file mode 100644
index 00000000..9f6f417e
--- /dev/null
+++ b/packages/curve-common/src/widgets/Header/HeaderLogoWithMenu.tsx
@@ -0,0 +1,14 @@
+import { AppName } from 'ui/src/AppNav/types'
+import IconButton from '@mui/material/IconButton'
+import MenuIcon from '@mui/icons-material/Menu'
+import { HeaderLogo } from './HeaderLogo'
+import React from 'react'
+
+export const HeaderLogoWithMenu = (props: { onClick: () => void, appName: AppName }) => (
+ <>
+
+
+
+
+
+)
\ No newline at end of file
diff --git a/packages/curve-common/src/widgets/Header/MobileHeader.tsx b/packages/curve-common/src/widgets/Header/MobileHeader.tsx
index eca5c9d2..11813402 100644
--- a/packages/curve-common/src/widgets/Header/MobileHeader.tsx
+++ b/packages/curve-common/src/widgets/Header/MobileHeader.tsx
@@ -1,10 +1,8 @@
import { AppBar, Toolbar } from '@mui/material'
-import { HeaderLogo } from './HeaderLogo'
import { Theme } from '@mui/system'
import { BaseHeaderProps, toolbarColors } from './types'
import IconButton from '@mui/material/IconButton'
import React, { useCallback, useMemo, useState } from 'react'
-import { MenuIcon } from 'curve-ui-kit/src/shared/ui/MenuIcon'
import Drawer from '@mui/material/Drawer'
import { SidebarSection } from './SidebarSection'
import groupBy from 'lodash/groupBy'
@@ -16,19 +14,12 @@ import { LanguageSwitcher } from '../../features/switch-language'
import { ChainSwitcher } from '../../features/switch-chain'
import { ConnectWalletIndicator } from '../../features/connect-wallet'
import { APP_LINK } from 'ui'
-import { AppName, AppNames } from 'ui/src/AppNav/types'
-import { CloseIcon } from 'curve-ui-kit/src/shared/ui/CloseIcon'
+import { AppNames } from 'ui/src/AppNav/types'
+import CloseIcon from '@mui/icons-material/Close'
import { t } from '@lingui/macro'
import { HeaderStats } from './HeaderStats'
-
-const HeaderLogoWithMenu = (props: { onClick: () => void, appName: AppName }) => (
- <>
-
-
-
-
-
-)
+import { HeaderLogoWithMenu } from './HeaderLogoWithMenu'
+import { SocialSidebarSection } from './SocialSidebarSection'
export const MobileHeader = ({
@@ -48,6 +39,12 @@ export const MobileHeader = ({
const openSidebar = useCallback(() => setSidebarOpen(true), [])
const closeSidebar = useCallback(() => setSidebarOpen(false), [])
+ const onConnectWallet = wallet.onConnectWallet
+ const onConnect = useCallback(() => {
+ closeSidebar()
+ onConnectWallet()
+ }, [onConnectWallet, closeSidebar])
+
return (
toolbarColors[t.palette.mode][0] }}>
@@ -87,14 +84,14 @@ export const MobileHeader = ({
currentPath={currentPath}
/>
- {/* TODO: */}
+
-
+
diff --git a/packages/curve-common/src/widgets/Header/SocialSidebarSection.tsx b/packages/curve-common/src/widgets/Header/SocialSidebarSection.tsx
new file mode 100644
index 00000000..d14a78fe
--- /dev/null
+++ b/packages/curve-common/src/widgets/Header/SocialSidebarSection.tsx
@@ -0,0 +1,39 @@
+import { SidebarSection } from './SidebarSection'
+import { t } from '@lingui/macro'
+import IconButton from '@mui/material/IconButton'
+import { ReactElement } from 'react'
+import TelegramIcon from '@mui/icons-material/Telegram'
+import TwitterIcon from '@mui/icons-material/Twitter'
+import YouTubeIcon from '@mui/icons-material/YouTube'
+import Tooltip from '@mui/material/Tooltip'
+import Link from '@mui/material/Link'
+import { DiscordIcon } from 'curve-ui-kit/src/shared/ui/DiscordIcon'
+import { Box } from 'curve-ui-kit/src/shared/ui/Box'
+import SvgIcon from '@mui/material/SvgIcon';
+
+type SocialButtonProps = {
+ label: string,
+ href: string,
+ icon: typeof SvgIcon
+}
+
+const SocialButton = ({ icon: Icon, href, label }: SocialButtonProps) => (
+
+
+
+
+
+)
+
+type SocialSidebarSectionProps = { currentPath: string }
+
+export const SocialSidebarSection = (props: SocialSidebarSectionProps) => (
+
+
+
+
+
+
+
+
+)
diff --git a/packages/curve-common/src/widgets/Header/index.ts b/packages/curve-common/src/widgets/Header/index.ts
new file mode 100644
index 00000000..5e4d6a20
--- /dev/null
+++ b/packages/curve-common/src/widgets/Header/index.ts
@@ -0,0 +1 @@
+export {Header} from './Header';
diff --git a/packages/curve-ui-kit/package.json b/packages/curve-ui-kit/package.json
index 295d2949..725f0a2a 100644
--- a/packages/curve-ui-kit/package.json
+++ b/packages/curve-ui-kit/package.json
@@ -15,6 +15,7 @@
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
+ "@mui/icons-material": "^6.1.4",
"@mui/material": "^6.1.4",
"@mui/utils": "^6.1.4"
},
diff --git a/packages/curve-ui-kit/src/shared/ui/CloseIcon.tsx b/packages/curve-ui-kit/src/shared/ui/CloseIcon.tsx
deleted file mode 100644
index 3d46efab..00000000
--- a/packages/curve-ui-kit/src/shared/ui/CloseIcon.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createSvgIcon } from '@mui/material/utils';
-
-export const CloseIcon = createSvgIcon(
- ,
- 'Close'
-);
diff --git a/packages/curve-ui-kit/src/shared/ui/DiscordIcon.tsx b/packages/curve-ui-kit/src/shared/ui/DiscordIcon.tsx
new file mode 100644
index 00000000..48cddad7
--- /dev/null
+++ b/packages/curve-ui-kit/src/shared/ui/DiscordIcon.tsx
@@ -0,0 +1,9 @@
+import { createSvgIcon } from '@mui/material/utils'
+import React from 'react'
+
+export const DiscordIcon = createSvgIcon(
+ , 'Discord'
+)
diff --git a/yarn.lock b/yarn.lock
index 7fea1f0d..2b43d229 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2882,6 +2882,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.26.0":
+ version: 7.26.0
+ resolution: "@babel/runtime@npm:7.26.0"
+ dependencies:
+ regenerator-runtime: "npm:^0.14.0"
+ checksum: 10c0/12c01357e0345f89f4f7e8c0e81921f2a3e3e101f06e8eaa18a382b517376520cd2fa8c237726eb094dab25532855df28a7baaf1c26342b52782f6936b07c287
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.18.10":
version: 7.18.10
resolution: "@babel/template@npm:7.18.10"
@@ -6326,6 +6335,22 @@ __metadata:
languageName: node
linkType: hard
+"@mui/icons-material@npm:^6.1.4":
+ version: 6.1.6
+ resolution: "@mui/icons-material@npm:6.1.6"
+ dependencies:
+ "@babel/runtime": "npm:^7.26.0"
+ peerDependencies:
+ "@mui/material": ^6.1.6
+ "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+ react: ^17.0.0 || ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 10c0/a6eb10be3cc356fd404febf29a3b26fa63b6b09d3148736fb05279954905186e9804869ff18220840ae92dbdeddfd407c2d0c72b9e165e01fd6bbc620b6b39d7
+ languageName: node
+ linkType: hard
+
"@mui/material@npm:^6.1.4":
version: 6.1.4
resolution: "@mui/material@npm:6.1.4"
@@ -15115,6 +15140,7 @@ __metadata:
"@chromatic-com/storybook": "npm:^2.0.2"
"@emotion/react": "npm:^11.13.3"
"@emotion/styled": "npm:^11.13.0"
+ "@mui/icons-material": "npm:^6.1.4"
"@mui/material": "npm:^6.1.4"
"@mui/utils": "npm:^6.1.4"
"@storybook/addon-a11y": "npm:^8.3.5"