diff --git a/src/pages/dashboard/SettingsPage.jsx b/src/pages/dashboard/SettingsPage.jsx index b2f6f59..0b4e122 100644 --- a/src/pages/dashboard/SettingsPage.jsx +++ b/src/pages/dashboard/SettingsPage.jsx @@ -1,8 +1,89 @@ +import { useEffect } from 'react'; +import { useForm } from 'react-hook-form'; +import { yupResolver } from '@hookform/resolvers/yup'; +import * as yup from 'yup'; +import toast from 'react-hot-toast'; +import { useDispatch, useSelector } from 'react-redux'; +import { selectCurrentUser } from '../../features/auth/authSelectors'; +import { setCredentials } from '../../features/auth/authSlice'; + +const schema = yup.object({ + name: yup.string().trim().required('Full name is required'), + walletAddress: yup + .string() + .trim() + .required('Wallet address is required') + .matches(/^G[A-Z2-7]{55}$/, 'Enter a valid Stellar wallet address (G + 55 chars)'), +}); + export default function SettingsPage() { + const dispatch = useDispatch(); + const user = useSelector(selectCurrentUser); + + const { + register, + handleSubmit, + reset, + formState: { errors, isSubmitting }, + } = useForm({ resolver: yupResolver(schema) }); + + useEffect(() => { + if (user) { + reset({ name: user.name ?? '', walletAddress: user.walletAddress ?? '' }); + } + }, [user, reset]); + + const onSubmit = (data) => { + dispatch(setCredentials({ user: { ...user, ...data }, token: undefined })); + toast.success('Profile updated successfully!'); + }; + return ( -
+

Settings

-

Account settings will appear here.

+

Update your profile information.

+ +
+
+ + + {errors.name && ( +

{errors.name.message}

+ )} +
+ +
+ + + {errors.walletAddress && ( +

{errors.walletAddress.message}

+ )} +
+ + +
); }