diff --git a/src/components/common/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx b/src/components/common/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx index ba2c8d10e1..9a5a4468f1 100644 --- a/src/components/common/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx +++ b/src/components/common/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx @@ -7,6 +7,7 @@ import { WalletConnectedTopMenuProps } from './types'; import NavigationTools from '~common/Extensions/NavigationTools'; import { useMobile } from '~hooks'; import UserAvatarDetails from '~v5/shared/UserAvatarDetails'; +import { USER_EDIT_ROUTE } from '~routes'; const displayName = 'common.Extensions.UserNavigation.partials.WalletConnectedTopMenu'; @@ -48,7 +49,7 @@ const WalletConnectedTopMenu: FC = ({ isVerified={isVerified} /> - +

{formatMessage({ id: 'userMenu.menageTitle' })} diff --git a/src/components/frame/v5/pages/UserAdvancedPage/partials/UserAdvancedSettings/UserAdvancedSettings.tsx b/src/components/frame/v5/pages/UserAdvancedPage/partials/UserAdvancedSettings/UserAdvancedSettings.tsx index 3ed599c612..d72b974807 100644 --- a/src/components/frame/v5/pages/UserAdvancedPage/partials/UserAdvancedSettings/UserAdvancedSettings.tsx +++ b/src/components/frame/v5/pages/UserAdvancedPage/partials/UserAdvancedSettings/UserAdvancedSettings.tsx @@ -1,4 +1,5 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; +import { useIntl } from 'react-intl'; import Navigation from '~v5/common/Navigation'; import TwoColumns from '~v5/frame/TwoColumns'; @@ -6,37 +7,91 @@ import Spinner from '~v5/shared/Spinner'; import SettingsRow from '~v5/common/SettingsRow'; import FeesForm from '../FeesForm'; import RpcForm from '../RpcForm/RpcForm'; +import Modal from '~v5/shared/Modal'; +import InformationList from '~v5/shared/InformationList'; +import { modalInformations } from './consts'; +import Textarea from '~v5/common/Fields/Textarea'; +import Checkbox from '~v5/common/Checkbox'; const displayName = 'v5.pages.UserAdvancedPage.partials.UserAdvancedSettings'; -const UserAdvancedSettings: FC = () => ( - - }> - - -

+const UserAdvancedSettings: FC = () => { + const [isChecked, setIsChecked] = useState(false); + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const { formatMessage } = useIntl(); + + return ( + + }> + + +
+ {}} + buttonLabel={{ id: 'button.download' }} + buttonIcon="file-arrow-down" + buttonMode="primaryOutline" + /> +
{}} - buttonLabel={{ id: 'button.download' }} - buttonIcon="file-arrow-down" - buttonMode="primaryOutline" + title={{ id: 'advancedSettings.delete.title' }} + description={{ id: 'advancedSettings.delete.description' }} + onClick={() => setIsDeleteModalOpen(true)} + buttonLabel={{ id: 'button.deleteAccount' }} + buttonIcon="trash" + buttonMode="secondaryOutline" /> -
- {}} - buttonLabel={{ id: 'button.deleteAccount' }} - buttonIcon="trash" - buttonMode="secondaryOutline" - /> - - -); + { + setIsChecked(false); + setIsDeleteModalOpen(false); + }} + isWarning + icon="trash" + disabled={!isChecked} + confirmMessage={formatMessage({ + id: 'button.deleteAccountConfirmation', + })} + closeMessage={formatMessage({ id: 'button.deleteAccountCancel' })} + > +
+ {formatMessage({ id: 'advancedSettings.delete.modal.title' })} +
+

+ {formatMessage( + { id: 'advancedSettings.delete.modal.description' }, + { br:
}, + )} +

+ +
+