diff --git a/public/locales/vn/common.json b/public/locales/vn/common.json
index 3ae947f4..cb1f8365 100644
--- a/public/locales/vn/common.json
+++ b/public/locales/vn/common.json
@@ -371,6 +371,8 @@
"Shout out to the grooviest flappers!": "Thông báo kết quả cuộc hành trình",
"upto 2.000 USD": "Lên đến 2000$",
"Click Me": "Xem ngay",
+ "Language": "Ngôn ngữ",
+ "Add TON Space wallet": "Thêm ví TON Space",
".": "",
"": ""
}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 50e46ae2..68835d68 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -12,7 +12,6 @@ import PunkgaWallet from 'assets/images/punkga.png'
import User from 'assets/images/user.svg'
import UserGreen from 'assets/images/userGreen.svg'
import VN from 'assets/images/vn.svg'
-import Button from 'components/Button'
import Dropdown, { DropdownMenu, DropdownToggle } from 'components/Dropdown'
import TextField from 'components/Input/TextField'
import Spinner from 'components/Spinner'
@@ -34,9 +33,10 @@ import useApi from 'src/hooks/useApi'
import { useClickOutside } from 'src/hooks/useClickOutside'
import { search } from 'src/services'
import { shorten } from 'src/utils'
-import NewButton from 'components/core/Button/Button'
+import Button from 'components/core/Button/Button'
import { useAccount, useBalance } from 'wagmi'
import getConfig from 'next/config'
+import { Accordion, AccordionActions, AccordionDetails, AccordionSummary } from '@mui/material'
export const HEADER_HEIGHT = {
MOBILE: '56px',
@@ -46,10 +46,11 @@ export default function Header({ className }: { className?: string }) {
const config = getConfig()
const { t } = useTranslation()
const router = useRouter()
- const { setSignInOpen, setMigrateWalletOpen, setWalletConnectOpen } = useContext(ModalContext)
+ const { setSignInOpen, setMigrateWalletOpen, setWalletConnectOpen, setAddTonWalletOpen } = useContext(ModalContext)
const [isSearchFocused, setIsSearchFocused] = useState(false)
const [isCopied, setIsCopied] = useState(false)
const [openProfile, setOpenProfile] = useState(false)
+ const [showWalletDetail, setShowWalletDetail] = useState(false)
const [openNavigation, setOpenNavigation] = useState(false)
const [hideBalance, setHideBalance] = useState(false)
const [searchValue, setSearchValue] = useState('')
@@ -143,15 +144,15 @@ export default function Header({ className }: { className?: string }) {
(address != account?.activeWalletAddress || !isConnected) &&
account?.noncustodialWalletAddress && (
- setWalletConnectOpen(true)}>
+
+
)
) : (
- setSignInOpen(true)}>
+
+
)}
setOpenNavigation(true)} />
@@ -163,34 +164,40 @@ export default function Header({ className }: { className?: string }) {
<>
-
+
-
{
- setOpenNavigation(false)
- setOpenProfile(false)
- }}>
-
+
+
+
{
+ setOpenNavigation(false)
+ setOpenProfile(false)
+ }}>
+
+
-
{account?.verified && account?.name && (
-
-
-
+ <>
+
+
-
{account?.name}
+
{account?.name}
-
-
-
{`${t('Wallet')}`}
-
-
{`${shorten(
- account?.activeWalletAddress,
- 8,
- 8
- )}`}
-
-
+
+
setShowWalletDetail(!showWalletDetail)}>
+
+
{t('My wallet')}
+
+ {showWalletDetail && (
+
+
{`${t('Wallet')}`}
+
+
{`${shorten(
+ account?.activeWalletAddress,
+ 8,
+ 8
+ )}`}
+
+
+
+
+ {t('Copied')}
+
+
+
{`${t('Balance')}`}
+
+
+ {hideBalance
+ ? '********'
+ : `${(+walletBalance?.data?.formatted || 0).toFixed(2)} ${
+ walletBalance?.data?.symbol || 'AURA'
+ }`}
+
+
+ {
+
+ {hideBalance ? (
+ setHideBalance(false)}
+ className='w-[18px] h-[18px] cursor-pointer'
+ />
+ ) : (
+ setHideBalance(true)}
+ className='w-[18px] h-[18px] cursor-pointer'
+ />
+ )}
+
+ }
+
+
+
+ )}
-
- {t('Copied')}
-
-
-
{`${t('Balance')}`}
-
-
- {hideBalance
- ? '********'
- : `${(+walletBalance?.data?.formatted || 0).toFixed(2)} ${
- walletBalance?.data?.symbol || 'AURA'
- }`}
+
{
+ setOpenNavigation(false)
+ setAddTonWalletOpen(true)
+ }}>
+
+ {t('Add TON Space wallet')}
-
- {
-
- {hideBalance ? (
- setHideBalance(false)}
- className='w-[18px] h-[18px] cursor-pointer'
- />
- ) : (
- setHideBalance(true)}
- className='w-[18px] h-[18px] cursor-pointer'
- />
- )}
-
- }
-
-
- {!account?.noncustodialWalletAddress ? (
- <>
-
setMigrateWalletOpen(true)}>
- {t('Migrate your wallet')}
-
- >
- ) : null}
- {account?.noncustodialWalletAddress && account?.name && !isConnected && (
-
-
-
Wallet not connected
+
{
+ setOpenNavigation(false)
+ router.push('/profile')
+ }}>
+
+ {t('My profile')}
- )}
-
+
+ >
)}
-
- {account && (
+
{
setOpenNavigation(false)
- router.push('/profile')
+ router.push('/campaigns')
}}>
-
- {t('My profile')}
+
+ {t('Campaign')}
- )}
-
-
{
- setOpenNavigation(false)
- router.push('/campaigns')
- }}>
-
- {t('Campaign')}
-
-
{
- setOpenNavigation(false)
- router.push('/events')
- }}>
-
- {t('Event')}
-
-
{
- setOpenNavigation(false)
- router.push('/collections')
- }}>
-
- {t('Collection')}
-
-
{
- setOpenNavigation(false)
- router.push('/about-us')
- }}>
-
- {t('About Us')}
-
-
-
-
-
{t('Switch Language')}
-
-
-
- {locale == 'en' ? (
-
- ) : (
-
- )}
-
+ className='flex gap-3 items-center py-3 text-sm leading-[18px] font-medium'
+ onClick={() => {
+ setOpenNavigation(false)
+ router.push('/events')
+ }}>
+
+ {t('Event')}
+
+
{
+ setOpenNavigation(false)
+ router.push('/collections')
+ }}>
+
+ {t('Collection')}
-
- {account && (
{
- setOpenProfile(false)
setOpenNavigation(false)
- logout()
+ router.push('/about-us')
}}>
-
- {t('Log out')}
+
+ {t('About Us')}
- )}
+
+
+
+
+
+ {locale == 'en' ? (
+
EN
+ ) : (
+
VN
+ )}
+
+
+
+ {account && (
+
{
+ setOpenProfile(false)
+ setOpenNavigation(false)
+ logout()
+ }}>
+
+ {t('Log out')}
+
+ )}
+
>
)}
+
+
+
+ {!account?.noncustodialWalletAddress ? (
+ <>
+
+ >
+ ) : null}
+ {account?.noncustodialWalletAddress && account?.name && !isConnected && (
+ <>
+
+
+
Wallet not connected
+
+
+ >
+ )}
+
+ {account && (
+
{
+ setOpenNavigation(false)
+ router.push('/profile')
+ }}>
+
+ {t('My profile')}
+
+ )}
+
+
-