refactor: mf-5227 use new confirm dialog when disconnect persona/wall…

…et (#10723)
DimensionDev · Sep 6, 2023 · 01338ce · 01338ce
1 parent 2c939f9
commit 01338ce
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 100 deletions.
diff --git a/packages/mask/src/extension/popups/components/ConnectedWallet/index.tsx b/packages/mask/src/extension/popups/components/ConnectedWallet/index.tsx
@@ -12,7 +12,7 @@ import { memo, useCallback } from 'react'
 import { Trans } from 'react-i18next'
 import { useI18N } from '../../../../utils/i18n-next-ui.js'
 import Services from '#services'
-import { DisconnectModal } from '../../modals/modals.js'
+import { ConfirmDialog } from '../../modals/modals.js'
 import type { ConnectedWalletInfo } from '../../pages/Personas/type.js'
 import { useModalNavigate } from '../ActionModal/index.js'
 import { useVerifiedWallets } from '../../hooks/index.js'
@@ -189,9 +189,10 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
                             size={16}
                             onClick={async () => {
                                 if (!currentPersona) return
-                                const confirmed = await DisconnectModal.openAndWaitForClose({
+                                const confirmed = await ConfirmDialog.openAndWaitForClose({
                                     title: t('popups_release_bind_wallet_title'),
-                                    tips: (
+                                    confirmVariant: 'warning',
+                                    message: (
                                         <Trans
                                             i18nKey="popups_wallet_disconnect_tips"
                                             components={{

diff --git a/packages/mask/src/extension/popups/modals/ConfirmDialog/index.tsx b/packages/mask/src/extension/popups/modals/ConfirmDialog/index.tsx
@@ -31,6 +31,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     message: {
         marginTop: theme.spacing(3),
+        padding: theme.spacing(0, 2),
         lineHeight: '20px',
         fontSize: 14,
         color: theme.palette.maskColor.second,
@@ -57,6 +58,8 @@ export interface ConfirmDialogProps extends Omit<DialogProps, 'title' | 'onSubmi
     description?: ReactNode | string
     confirmLabel?: string
     cancelLabel?: string
+    /** Change color of confirm button */
+    confirmVariant?: 'error' | 'warning'
     onConfirm(): void
     onClose?(): void
 }
@@ -69,6 +72,7 @@ export const Dialog = memo(
         description,
         confirmLabel = 'Confirm',
         cancelLabel = 'Cancel',
+        confirmVariant = 'error',
         onConfirm,
         onClose,
         ...rest
@@ -91,7 +95,11 @@ export const Dialog = memo(
                         <ActionButton fullWidth variant="roundedOutlined" onClick={() => onClose?.()}>
                             {cancelLabel}
                         </ActionButton>
-                        <ActionButton fullWidth variant="roundedContained" color="error" onClick={() => onConfirm()}>
+                        <ActionButton
+                            fullWidth
+                            variant="roundedContained"
+                            color={confirmVariant}
+                            onClick={() => onConfirm()}>
                             {confirmLabel}
                         </ActionButton>
                     </Box>

diff --git a/packages/mask/src/extension/popups/modals/DisconnectModal/DisconnectDialog.tsx b/packages/mask/src/extension/popups/modals/DisconnectModal/DisconnectDialog.tsx
diff --git a/packages/mask/src/extension/popups/modals/DisconnectModal/index.tsx b/packages/mask/src/extension/popups/modals/DisconnectModal/index.tsx
diff --git a/packages/mask/src/extension/popups/modals/index.tsx b/packages/mask/src/extension/popups/modals/index.tsx
@@ -1,5 +1,4 @@
 import { memo } from 'react'
-import { DisconnectModal } from './DisconnectModal/index.js'
 import { ConfirmModal } from './ConfirmModal/index.js'
 import { ConfirmDialog } from './ConfirmDialog/index.js'
 import { AddContactModal } from './AddContactModal/index.js'
@@ -20,7 +19,6 @@ export * from './modals.js'
 export const Modals = memo(function Modals() {
     return (
         <>
-            <DisconnectModal ref={modals.DisconnectModal.register} />
             <ConfirmModal ref={modals.ConfirmModal.register} />
             <ConfirmDialog ref={modals.ConfirmDialog.register} />
             <AddContactModal ref={modals.AddContactModal.register} />

diff --git a/packages/mask/src/extension/popups/modals/modals.ts b/packages/mask/src/extension/popups/modals/modals.ts
@@ -1,5 +1,4 @@
 import { SingletonModal } from '@masknet/shared-base'
-import type { DisconnectModalOpenProps, DisconnectModalCloseProps } from './DisconnectModal/index.js'
 import type { ConfirmModalOpenProps } from './ConfirmModal/index.js'
 import type { ConfirmDialogOpenProps } from './ConfirmDialog/index.js'
 import type { AddContactModalOpenProps } from './AddContactModal/index.js'
@@ -13,7 +12,6 @@ import type { ChangePaymentPasswordOpenProps } from './ChangePaymentPasswordModa
 import type { ShowPrivateKeyModalOpenProps } from './ShowPrivateKeyModal/index.js'
 import type { ChooseTokenModalCloseProps, ChooseTokenModalOpenProps } from './ChooseToken/index.js'
 
-export const DisconnectModal = new SingletonModal<DisconnectModalOpenProps, DisconnectModalCloseProps>()
 export const ConfirmModal = new SingletonModal<ConfirmModalOpenProps, boolean>()
 export const ConfirmDialog = new SingletonModal<ConfirmDialogOpenProps, boolean>()
 export const AddContactModal = new SingletonModal<AddContactModalOpenProps, boolean>()

diff --git a/packages/mask/src/extension/popups/pages/Personas/AccountDetail/index.tsx b/packages/mask/src/extension/popups/pages/Personas/AccountDetail/index.tsx
@@ -28,7 +28,7 @@ import { AccountDetailUI } from './UI.js'
 import Service from '#services'
 import { PageTitleContext } from '../../../context.js'
 import { isEqualWith, uniq, sortBy, isEqual } from 'lodash-es'
-import { DisconnectModal } from '../../../modals/modals.js'
+import { ConfirmDialog } from '../../../modals/modals.js'
 import { DisconnectEventMap } from '../common.js'
 
 const AccountDetail = memo(() => {
@@ -191,12 +191,19 @@ const AccountDetail = memo(() => {
                     size={24}
                     onClick={async () => {
                         if (!currentPersona) return
-                        const confirmed = await DisconnectModal.openAndWaitForClose({
+                        const confirmed = await ConfirmDialog.openAndWaitForClose({
                             title: t('popups_disconnect_persona'),
-                            tips: (
+                            confirmVariant: 'warning',
+                            message: (
                                 <Trans
                                     i18nKey="popups_persona_disconnect_tips"
-                                    components={{ strong: <strong style={{ color: theme.palette.maskColor.main }} /> }}
+                                    components={{
+                                        strong: (
+                                            <strong
+                                                style={{ color: theme.palette.maskColor.main, wordBreak: 'keep-all' }}
+                                            />
+                                        ),
+                                    }}
                                     values={{
                                         identity: selectedAccount?.identifier.userId,
                                         personaName: currentPersona?.nickname,