From ba3775e6c6781937bff8f7cc088d64bef7722ab2 Mon Sep 17 00:00:00 2001 From: artur Date: Mon, 19 Feb 2024 10:37:06 +0300 Subject: [PATCH] Make username settings button red if name empty, add sections to username settings, UI fixes to username settings, remove qs params from username settings --- .../Modal/ModalEditName/ModalEditName.tsx | 51 ++++++++++--------- src/components/Modal/ModalEditName/styled.tsx | 10 ++++ src/pages/KeyPage/Key.Page.tsx | 10 +--- 3 files changed, 38 insertions(+), 33 deletions(-) create mode 100644 src/components/Modal/ModalEditName/styled.tsx diff --git a/src/components/Modal/ModalEditName/ModalEditName.tsx b/src/components/Modal/ModalEditName/ModalEditName.tsx index 6dbc0ae..09d43d0 100644 --- a/src/components/Modal/ModalEditName/ModalEditName.tsx +++ b/src/components/Modal/ModalEditName/ModalEditName.tsx @@ -13,27 +13,24 @@ import { DOMAIN } from '@/utils/consts' import { fetchNip05 } from '@/utils/helpers/helpers' import { Stack, Typography, useTheme } from '@mui/material' import { ChangeEvent, Fragment, useCallback, useEffect, useState } from 'react' -import { useSearchParams } from 'react-router-dom' +import { useParams, useSearchParams } from 'react-router-dom' import { useDebounce } from 'use-debounce' +import { StyledSettingContainer } from './styled' +import { SectionTitle } from '@/shared/SectionTitle/SectionTitle' export const ModalEditName = () => { const keys = useAppSelector(selectKeys) const notify = useEnqueueSnackbar() + const { npub = '' } = useParams<{ npub: string }>() - const [searchParams, setSearchParams] = useSearchParams() - const name = searchParams.get('name') || '' - const npub = searchParams.get('npub') || '' + const key = keys.find((k) => k.npub === npub) + const name = key?.name || '' const { palette } = useTheme() const { getModalOpened, createHandleCloseReplace } = useModalSearchParams() const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.EDIT_NAME) - const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.EDIT_NAME, { - onClose: (search) => { - search.delete('name') - search.delete('npub') - }, - }) + const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.EDIT_NAME) const [enteredName, setEnteredName] = useState('') const [debouncedName] = useDebounce(enteredName, 300) @@ -52,7 +49,7 @@ export const ModalEditName = () => { try { setIsChecking(true) const npubNip05 = await fetchNip05(`${debouncedName}@${DOMAIN}`) - setIsAvailable(!npubNip05) + setIsAvailable(!npubNip05 || npubNip05 === npub) setIsChecking(false) } catch (error) { setIsAvailable(true) @@ -67,7 +64,10 @@ export const ModalEditName = () => { useEffect(() => { setEnteredName(name) return () => { - if (isModalOpened) setEnteredName('') + if (isModalOpened) { + setEnteredName('') + setReceiverNpub('') + } } // eslint-disable-next-line }, [isModalOpened]) @@ -101,17 +101,15 @@ export const ModalEditName = () => { } const isEditButtonDisabled = isNameEqual || !isAvailable || isChecking || isLoading || !enteredName.trim().length - const isTransferButtonDisabled = !enteredName.trim().length || !receiverNpub.trim().length || isTransferLoading + const isTransferButtonDisabled = !name.length || !receiverNpub.trim().length || isTransferLoading const handleEditName = async () => { if (isEditButtonDisabled) return try { setIsLoading(true) await swicCall('editName', npub, enteredName) - notify('Username successfully editted!', 'success') + notify('Username updated!', 'success') setIsLoading(false) - searchParams.set('name', enteredName) - setSearchParams(searchParams) } catch (error: any) { setIsLoading(false) notify(error?.message || 'Failed to edit username!', 'error') @@ -123,20 +121,22 @@ export const ModalEditName = () => { try { setIsTransferLoading(true) await swicCall('transferName', npub, enteredName, receiverNpub) - notify('Npub successfully transfered!', 'success') + notify('Username transferred!', 'success') setIsTransferLoading(false) + setEnteredName('') } catch (error: any) { setIsTransferLoading(false) - notify(error?.message || 'Failed to transfer npub!', 'error') + notify(error?.message || 'Failed to transfer username!', 'error') } } return ( - + - + + Change name @{DOMAIN}} @@ -152,10 +152,11 @@ export const ModalEditName = () => { }} /> - - + + + Transfer name { - + ) diff --git a/src/components/Modal/ModalEditName/styled.tsx b/src/components/Modal/ModalEditName/styled.tsx new file mode 100644 index 0000000..0f0e021 --- /dev/null +++ b/src/components/Modal/ModalEditName/styled.tsx @@ -0,0 +1,10 @@ +import { Stack, StackProps, styled } from "@mui/material"; + +export const StyledSettingContainer = styled((props: StackProps) => ( + +))(({ theme }) => ({ + padding: '1rem', + borderRadius: '1rem', + background: theme.palette.background.default, + color: theme.palette.text.primary, +})) \ No newline at end of file diff --git a/src/pages/KeyPage/Key.Page.tsx b/src/pages/KeyPage/Key.Page.tsx index 40aa53c..7b98275 100644 --- a/src/pages/KeyPage/Key.Page.tsx +++ b/src/pages/KeyPage/Key.Page.tsx @@ -63,13 +63,7 @@ const KeyPage = () => { const handleOpenConnectAppModal = () => handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP) const handleOpenSettingsModal = () => handleOpen(MODAL_PARAMS_KEYS.SETTINGS) - const handleOpenEditNameModal = () => - handleOpen(MODAL_PARAMS_KEYS.EDIT_NAME, { - search: { - name: key.name || '', - npub, - }, - }) + const handleOpenEditNameModal = () => handleOpen(MODAL_PARAMS_KEYS.EDIT_NAME) return ( <> @@ -82,7 +76,7 @@ const KeyPage = () => { value={username} endAdornment={ - +