update ton wallet

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",
   ".": "",
   "": ""
 }

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 (
+    <div className={` py-6 px-8 flex flex-col gap-8 w-full max-w-[670px]`}>
+      <div className='space-y-2'>
+        <div className='text-lg font-semibold text-center'>{t('Confirm to link TON Space wallet')}</div>
+        <div className='text-sm text-center'>
+          {t('Your account will be linked to the wallet address.')}
+          <br />
+          {t('This action is irreversible')}
+        </div>
+      </div>
+      <div className='space-y-2'>
+        <label className='text-sm text-text-teriary font-medium'>{t('Enter your TON Space wallet address...')}</label>
+        <OutlineTextField value={value} onChange={setValue} placeholder={t('Your TON Space address')} />
+      </div>
+      <div className='grid grid-cols-2 gap-4 -mt-4'>
+        <Button color='dark' size='sm' className='w-full' onClick={() => setAddTonWalletOpen(false)}>
+          {t('Cancel')}
+        </Button>
+        <Button size='sm' className='w-full' onClick={handler} loading={loading}>
+          {t('Continue')}
+        </Button>
+      </div>
+    </div>
+  )
+}

src/components/Modal/SignInModal.tsx

@@ -365,7 +365,7 @@ const ByEmail = ({ step, setStep }) => {
         <MainButton
           buttonRef={buttonRef}
           disabled={step == 1 ? !email : !(email && password)}
-          onClick={() => setStep(2)}
+          onClick={() => (step == 1 ? setStep(2) : loginHandler())}
           className='w-full md:hidden'>
           {t(step == 1 ? 'Continue' : 'Sign in')}
         </MainButton>

src/components/core/Button/Button.tsx

@@ -30,7 +30,7 @@ const Button: React.FC<ButtonProps> = ({
   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<ButtonProps> = ({
                 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]

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) {

src/context/modals.tsx

@@ -13,19 +13,22 @@ 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
   signUpOpen: boolean
   signInOpen: boolean
   connectWalletOpen: boolean
   migrateWalletOpen: boolean
+  addTonWalletOpen: boolean
   setSignUpSuccessOpen: Dispatch<SetStateAction<boolean>>
   setForgotPasswordOpen: Dispatch<SetStateAction<boolean>>
   setSignUpOpen: Dispatch<SetStateAction<boolean>>
   setSignInOpen: Dispatch<SetStateAction<boolean>>
   setWalletConnectOpen: Dispatch<SetStateAction<boolean>>
   setMigrateWalletOpen: Dispatch<SetStateAction<boolean>>
+  setAddTonWalletOpen: Dispatch<SetStateAction<boolean>>
   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 }) {
       <Modal open={forgotPasswordOpen} setOpen={setForgotPasswordOpen}>
         <ForgotPasswordModal />
       </Modal>
+      <Modal open={addTonWalletOpen} setOpen={setAddTonWalletOpen}>
+        <AddTonWalletModal />
+      </Modal>
       <Modal open={signUpSuccessOpen} setOpen={setSignUpSuccessOpen}>
         <SignUpSuccessModal email={emailNeedVerify} identifier={identifier} />
       </Modal>

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