From 2da0d5e3710bd5ac4d38bc316393972a8cc5aa6f Mon Sep 17 00:00:00 2001 From: imhson Date: Thu, 19 Sep 2024 15:49:51 +0700 Subject: [PATCH] update ton wallet --- public/locales/vn/common.json | 2 + src/components/Header/index.tsx | 458 ++++++++++++--------- src/components/Modal/AddTonWalletModal.tsx | 49 +++ src/components/Modal/SignInModal.tsx | 2 +- src/components/core/Button/Button.tsx | 4 +- src/context/index.tsx | 1 + src/context/modals.tsx | 11 + src/models/user.ts | 1 + 8 files changed, 330 insertions(+), 198 deletions(-) create mode 100644 src/components/Modal/AddTonWalletModal.tsx 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)}> + )}
menu icon setOpenNavigation(true)} /> @@ -163,34 +164,40 @@ export default function Header({ className }: { className?: string }) { <>
-
+
header logo -
{ - 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 && ( -
- warning -
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')}
- )} +
+
+
+ +
{t('Language')}
+
+ +
+ {locale == 'en' ? ( +
EN
+ ) : ( +
VN
+ )} +
+
+
+ {account && ( +
{ + setOpenProfile(false) + setOpenNavigation(false) + logout() + }}> + + {t('Log out')} +
+ )} +
)} + +
- -
+
router.push('/events')}> {t('Event')} - -
+
router.push('/collections')}> {t('Collection')} - -
+
router.push('/about-us')}> {t('aboutUs')} - +
{locale == 'en' ? ( @@ -691,9 +759,9 @@ export default function Header({ className }: { className?: string }) {
{!account?.noncustodialWalletAddress ? ( <> - setMigrateWalletOpen(true)}> + ) : null} {account?.noncustodialWalletAddress && account?.name && !isConnected && ( @@ -716,9 +784,9 @@ export default function Header({ className }: { className?: string }) { ) : ( - setSignInOpen(true)}> + )} {(address != account?.activeWalletAddress || !isConnected) && account?.verified && @@ -726,9 +794,9 @@ export default function Header({ className }: { className?: string }) { account?.noncustodialWalletAddress && (
- setWalletConnectOpen(true)}> +
)}
diff --git a/src/components/Modal/AddTonWalletModal.tsx b/src/components/Modal/AddTonWalletModal.tsx new file mode 100644 index 00000000..08bc734c --- /dev/null +++ b/src/components/Modal/AddTonWalletModal.tsx @@ -0,0 +1,49 @@ +import Button from 'components/core/Button/Button' +import TextField from 'components/Input/TextField' +import OutlineTextField from 'components/Input/TextField/Outline' +import Mail from 'images/Mail.svg' +import Image from 'next/image' +import { useContext, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { toast } from 'react-toastify' +import { Context } from 'src/context' +import { ModalContext } from 'src/context/modals' +export default function AddTonWalletModal() { + const { resendVerifyEmail } = useContext(Context) + const { setAddTonWalletOpen } = useContext(ModalContext) + const [value, setValue] = useState('') + const [loading, setLoading] = useState(false) + const { t } = useTranslation() + const handler = async () => { + try { + setLoading(true) + } catch (error) { + setLoading(false) + toast(error.message, { type: 'error' }) + } + } + return ( +
+
+
{t('Confirm to link TON Space wallet')}
+
+ {t('Your account will be linked to the wallet address.')} +
+ {t('This action is irreversible')} +
+
+
+ + +
+
+ + +
+
+ ) +} diff --git a/src/components/Modal/SignInModal.tsx b/src/components/Modal/SignInModal.tsx index 97152226..a56ce236 100644 --- a/src/components/Modal/SignInModal.tsx +++ b/src/components/Modal/SignInModal.tsx @@ -365,7 +365,7 @@ const ByEmail = ({ step, setStep }) => { setStep(2)} + onClick={() => (step == 1 ? setStep(2) : loginHandler())} className='w-full md:hidden'> {t(step == 1 ? 'Continue' : 'Sign in')} diff --git a/src/components/core/Button/Button.tsx b/src/components/core/Button/Button.tsx index 16041490..167d59eb 100644 --- a/src/components/core/Button/Button.tsx +++ b/src/components/core/Button/Button.tsx @@ -30,7 +30,7 @@ const Button: React.FC = ({ const getSizeClasses = (): string => { switch (size) { case 'xs': - return 'text-xs px-[14px] py-[3px] leading-[18px]' + return 'text-xs px-[14px] py-[5px] leading-[18px]' case 'sm': return 'text-sm px-[10px] py-[10px] gap-1' case 'md': @@ -80,7 +80,7 @@ const Button: React.FC = ({ disabled:bg-[#B0B0B0] disabled:border-[#B0B0B0]` } } else { - if (color === 'green') { + if (color === 'dark') { return `${baseClasses} bg-transparent border-[#183442] text-[#183442] hover:text-[#3D5059] hover:border-[#183442] focus:text-[#0A161C] focus:border-[#0A161C] diff --git a/src/context/index.tsx b/src/context/index.tsx index ab4fc764..721e6359 100644 --- a/src/context/index.tsx +++ b/src/context/index.tsx @@ -305,6 +305,7 @@ function ContextProvider({ children }: any) { rank: res.rank || 999999, activeWalletAddress: res.active_wallet_address, noncustodialWalletAddress: res.wallet_address, + tonWalletAddress: res.ton_wallet_address, } as IUser) } if (!res.email_verified_at && res.email) { diff --git a/src/context/modals.tsx b/src/context/modals.tsx index c9157f58..8f641540 100644 --- a/src/context/modals.tsx +++ b/src/context/modals.tsx @@ -13,6 +13,7 @@ import { useAccount } from 'wagmi' import { Context } from '.' import ConnectModal from 'components/Modal/ConnectModal' import { removeItem } from 'src/utils/localStorage' +import AddTonWalletModal from 'components/Modal/AddTonWalletModal' export const ModalContext = createContext<{ signUpSuccessOpen: boolean forgotPasswordOpen: boolean @@ -20,12 +21,14 @@ export const ModalContext = createContext<{ signInOpen: boolean connectWalletOpen: boolean migrateWalletOpen: boolean + addTonWalletOpen: boolean setSignUpSuccessOpen: Dispatch> setForgotPasswordOpen: Dispatch> setSignUpOpen: Dispatch> setSignInOpen: Dispatch> setWalletConnectOpen: Dispatch> setMigrateWalletOpen: Dispatch> + setAddTonWalletOpen: Dispatch> showEmailVerification: (email: string, identifier: string) => void }>({ signUpSuccessOpen: false, @@ -34,6 +37,8 @@ export const ModalContext = createContext<{ signInOpen: false, connectWalletOpen: false, migrateWalletOpen: false, + addTonWalletOpen: false, + setAddTonWalletOpen: () => {}, setSignUpSuccessOpen: () => {}, setForgotPasswordOpen: () => {}, setSignUpOpen: () => {}, @@ -45,6 +50,7 @@ export const ModalContext = createContext<{ function ModalProvider({ children }) { const [signUpSuccessOpen, setSignUpSuccessOpen] = useState(false) const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false) + const [addTonWalletOpen, setAddTonWalletOpen] = useState(false) const [signUpOpen, setSignUpOpen] = useState(false) const [signInOpen, setSignInOpen] = useState(false) const [connectWalletOpen, setWalletConnectOpen] = useState(false) @@ -147,11 +153,13 @@ function ModalProvider({ children }) { value={{ signUpSuccessOpen, forgotPasswordOpen, + addTonWalletOpen, signUpOpen, signInOpen, connectWalletOpen, migrateWalletOpen, setSignUpSuccessOpen, + setAddTonWalletOpen, setForgotPasswordOpen, setSignUpOpen, setSignInOpen, @@ -175,6 +183,9 @@ function ModalProvider({ children }) { + + + diff --git a/src/models/user.ts b/src/models/user.ts index 675ba4ce..5191e949 100644 --- a/src/models/user.ts +++ b/src/models/user.ts @@ -10,6 +10,7 @@ export interface IUser { signupMethods: string custodialWalletAddress: string noncustodialWalletAddress?: string + tonWalletAddress?: string xp: number kp: number level: number