feat: add Confirm as common ui

packages/mask/src/components/shared/WalletStatusBox.tsx

@@ -17,7 +17,7 @@ import {
     useReverseAddress,
     useWallet,
 } from '@masknet/plugin-infra/web3'
-import { FormattedAddress, useSnackbarCallback, WalletIcon } from '@masknet/shared'
+import { FormattedAddress, useShowConfirm, useSnackbarCallback, WalletIcon } from '@masknet/shared'
 import { WalletMessages } from '../../plugins/Wallet/messages'
 import { useI18N } from '../../utils'
 import Services from '../../extension/service'
@@ -136,6 +136,7 @@ export function WalletStatusBox(props: WalletStatusBox) {
     )
     // #endregion
 
+    const showConfirm = useShowConfirm()
     const onDisconnect = useCallback(async () => {
         switch (providerType) {
             case ProviderType.WalletConnect:
@@ -199,6 +200,12 @@ export function WalletStatusBox(props: WalletStatusBox) {
                     </Link>
                 </div>
             </div>
+            <Button
+                onClick={async () => {
+                    const v = await showConfirm({ content: 'hello', confirmLabel: 'no' })
+                }}>
+                show confirm
+            </Button>
             {!props.disableChange && (
                 <section>
                     {providerType === ProviderType.WalletConnect || providerType === ProviderType.Fortmatic ? (

packages/shared/src/contexts/SharedContextProvider.tsx

@@ -1,11 +1,14 @@
 import type { FC, PropsWithChildren } from 'react'
 import { BaseSharedUIProvider } from './base'
+import { CommonUIProvider } from './common'
 import { EvmSharedUIProvider } from './evm'
 
 export const SharedContextProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
     return (
         <BaseSharedUIProvider>
-            <EvmSharedUIProvider>{children}</EvmSharedUIProvider>
+            <CommonUIProvider>
+                <EvmSharedUIProvider>{children}</EvmSharedUIProvider>
+            </CommonUIProvider>
         </BaseSharedUIProvider>
     )
 }

packages/shared/src/contexts/UITaskManager.tsx

@@ -0,0 +1,82 @@
+import { defer, DeferTuple } from '@dimensiondev/kit'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import { createContext, createElement, FC, FunctionComponent, PropsWithChildren, useMemo, useState } from 'react'
+import type { InjectedDialogProps } from './components'
+
+interface ContextOptionsGeneric<T, R> {
+    show(options: T): Promise<R>
+}
+
+type BaseDialogProps = Pick<InjectedDialogProps, 'open' | 'onClose'>
+
+export const createUITaskManager = <
+    TaskOptions,
+    Result,
+    Props extends BaseDialogProps,
+    ResolveProp extends keyof Props,
+>(
+    Component: FunctionComponent<Props>,
+    taskResolveFieldKey: ResolveProp,
+) => {
+    type ContextOptions = ContextOptionsGeneric<TaskOptions, Result | null>
+    const TaskManagerContext = createContext<ContextOptions>(null!)
+    let id = 0
+
+    type TaskDeferTuple = DeferTuple<Result | null>
+    interface TaskBase {
+        id: number
+        promise: TaskDeferTuple[0]
+        resolve: TaskDeferTuple[1]
+        reject: TaskDeferTuple[2]
+    }
+    interface Task extends TaskBase {
+        taskOptions: TaskOptions
+    }
+
+    const TaskManagerProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+        const [tasks, setTasks] = useState<Task[]>(EMPTY_LIST)
+
+        const contextValue = useMemo(() => {
+            const removeTask = (task: Task) => {
+                setTasks((list) => list.filter((t) => t !== task))
+            }
+
+            return {
+                show: (options: TaskOptions) => {
+                    const [promise, resolve, reject] = defer<Result | null>()
+                    id += 1
+                    const newTask: Task = { id, promise, resolve, reject, taskOptions: options }
+                    setTasks((list) => [...list, newTask])
+                    promise.then(() => {
+                        removeTask(newTask)
+                    })
+                    return promise
+                },
+            }
+        }, [])
+
+        return (
+            <TaskManagerContext.Provider value={contextValue}>
+                {children}
+                {tasks.map((task) => {
+                    return createElement(
+                        Component,
+                        {
+                            key: task.id,
+                            open: true,
+                            ...task.taskOptions,
+                            [taskResolveFieldKey]: (result: Result | null) => {
+                                task.resolve(result)
+                            },
+                            onClose: () => {
+                                task.resolve(null)
+                            },
+                        } as unknown as Props,
+                        children,
+                    )
+                })}
+            </TaskManagerContext.Provider>
+        )
+    }
+    return { TaskManagerContext, TaskManagerProvider }
+}

packages/shared/src/contexts/common/Confirm/Dialog.tsx

@@ -0,0 +1,39 @@
+import { makeStyles } from '@masknet/theme'
+import { Button, DialogActions, DialogContent } from '@mui/material'
+import type { FC } from 'react'
+import { useSharedI18N } from '../../../locales'
+import { InjectedDialog, InjectedDialogProps } from '../../components'
+import type { ConfirmOptions } from './types'
+
+const useStyles = makeStyles()((theme) => ({
+    content: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 80,
+        margin: theme.spacing(0, 1),
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    button: {
+        margin: theme.spacing(1),
+    },
+}))
+
+export interface ConfirmDialogProps extends ConfirmOptions, Omit<InjectedDialogProps, 'title'> {}
+
+export const ConfirmDialog: FC<ConfirmDialogProps> = ({ title, confirmLabel, content, onConfirm, ...rest }) => {
+    const t = useSharedI18N()
+    const { classes } = useStyles()
+
+    return (
+        <InjectedDialog title={title ?? t.dialog_confirm()} {...rest}>
+            <DialogContent className={classes.content}>{content}</DialogContent>
+            <DialogActions>
+                <Button fullWidth className={classes.button} onClick={onConfirm}>
+                    {confirmLabel ?? t.dialog_confirm()}
+                </Button>
+            </DialogActions>
+        </InjectedDialog>
+    )
+}

packages/shared/src/contexts/common/Confirm/index.tsx

@@ -0,0 +1,16 @@
+import { useContext } from 'react'
+import { createUITaskManager } from '../../UITaskManager'
+import { ConfirmDialog, ConfirmDialogProps } from './Dialog'
+import type { ConfirmOptions } from './types'
+
+const { TaskManagerContext, TaskManagerProvider: ConfirmProvider } = createUITaskManager<
+    ConfirmOptions,
+    void,
+    ConfirmDialogProps,
+    'onConfirm'
+>(ConfirmDialog, 'onConfirm')
+
+export const useShowConfirm = () => {
+    return useContext(TaskManagerContext).show
+}
+export { ConfirmProvider }

packages/shared/src/contexts/common/Confirm/types.ts

@@ -0,0 +1,6 @@
+export interface ConfirmOptions {
+    title?: string
+    content: string
+    confirmLabel?: string
+    onConfirm?(): void
+}

packages/shared/src/contexts/common/index.tsx

@@ -0,0 +1,8 @@
+import type { FC, PropsWithChildren } from 'react'
+import { ConfirmProvider } from './Confirm'
+
+export * from './Confirm'
+
+export const CommonUIProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+    return <ConfirmProvider>{children}</ConfirmProvider>
+}

packages/shared/src/contexts/components/DialogDismissIcon.tsx

@@ -1,5 +1,3 @@
-// see https://github.com/import-js/eslint-plugin-import/issues/2288
-// eslint-disable-next-line import/no-deprecated
 import { useTheme, useMediaQuery } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'
@@ -11,8 +9,6 @@ export interface DialogDismissIconUIProps {
 export function DialogDismissIcon(props: DialogDismissIconUIProps) {
     const close = <CloseIcon color="inherit" />
     const back = <ArrowBackRoundedIcon />
-    // see https://github.com/import-js/eslint-plugin-import/issues/2288
-    // eslint-disable-next-line import/no-deprecated
     const auto = useMediaQuery(`(min-width: ${useTheme().breakpoints.values.sm}px)`)
     if (!props.style || props.style === 'auto') return auto ? close : back
     if (props.style === 'back') return back

packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx

@@ -2,13 +2,11 @@ import { EMPTY_LIST } from '@masknet/shared-base'
 import { ERC20TokenList, useSharedI18N } from '@masknet/shared'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { ChainId, FungibleTokenDetailed, useTokenConstants } from '@masknet/web3-shared-evm'
-// see https://github.com/import-js/eslint-plugin-import/issues/2288
-// eslint-disable-next-line import/no-deprecated
 import { DialogContent, Theme, useMediaQuery } from '@mui/material'
 import type { FC } from 'react'
 import { useBaseUIRuntime } from '../../base'
 import { MINDS_ID } from '../../../constants'
-import { InjectedDialog } from '../../components'
+import { InjectedDialog, InjectedDialogProps } from '../../components'
 import { useRowSize } from './useRowSize'
 
 interface StyleProps {
@@ -50,14 +48,11 @@ export interface PickTokenOptions {
     blacklist?: string[]
     tokens?: FungibleTokenDetailed[]
     selectedTokens?: string[]
-}
-
-export interface SelectTokenDialogProps extends PickTokenOptions {
-    open: boolean
     onSelect?(token: FungibleTokenDetailed): void
-    onClose?(): void
 }
 
+export interface SelectTokenDialogProps extends PickTokenOptions, Omit<InjectedDialogProps, 'onSelect' | 'title'> {}
+
 export const SelectTokenDialog: FC<SelectTokenDialogProps> = ({
     open,
     chainId,
@@ -76,7 +71,6 @@ export const SelectTokenDialog: FC<SelectTokenDialogProps> = ({
     const compact = networkIdentifier === MINDS_ID
     const { classes } = useStyles({ compact, disablePaddingTop: isDashboard })
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(chainId)
-    // eslint-disable-next-line import/no-deprecated
     const isMdScreen = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
 
     const rowSize = useRowSize()

packages/shared/src/contexts/evm/TokenPicker/index.tsx

@@ -1,66 +1,16 @@
-import { defer, DeferTuple } from '@dimensiondev/kit'
-import { EMPTY_LIST } from '@masknet/shared-base'
 import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { createContext, FC, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react'
-import { PickTokenOptions, SelectTokenDialog } from './SelectTokenDialog'
+import { useContext } from 'react'
+import { createUITaskManager } from '../../UITaskManager'
+import { PickTokenOptions, SelectTokenDialog, SelectTokenDialogProps } from './SelectTokenDialog'
 
-interface ContextOptions {
-    pickToken: (options: PickTokenOptions) => Promise<FungibleTokenDetailed | null>
-}
-const TokenPickerContext = createContext<ContextOptions>(null!)
-
-type PickerDeferTuple = DeferTuple<FungibleTokenDetailed | null>
-
-interface Task {
-    id: number
-    promise: PickerDeferTuple[0]
-    resolve: PickerDeferTuple[1]
-    reject: PickerDeferTuple[2]
-    pickerOptions: PickTokenOptions
-}
-
-let id = 0
-export const TokenPickerProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
-    const [tasks, setTasks] = useState<Task[]>(EMPTY_LIST)
-
-    const removeTask = useCallback((task: Task) => {
-        setTasks((list) => list.filter((t) => t !== task))
-    }, [])
-
-    const contextValue = useMemo(() => {
-        return {
-            pickToken: (options: PickTokenOptions) => {
-                const [promise, resolve, reject] = defer<FungibleTokenDetailed | null>()
-                id += 1
-                const newTask: Task = { id, promise, resolve, reject, pickerOptions: options }
-                setTasks((list) => [...list, newTask])
-                return promise
-            },
-        }
-    }, [])
-
-    return (
-        <TokenPickerContext.Provider value={contextValue}>
-            {children}
-            {tasks.map((task) => (
-                <SelectTokenDialog
-                    open
-                    key={task.id}
-                    {...task.pickerOptions}
-                    onSelect={(token) => {
-                        task.resolve(token)
-                        removeTask(task)
-                    }}
-                    onClose={() => {
-                        task.resolve(null)
-                        removeTask(task)
-                    }}
-                />
-            ))}
-        </TokenPickerContext.Provider>
-    )
-}
+const { TaskManagerContext, TaskManagerProvider: TokenPickerProvider } = createUITaskManager<
+    PickTokenOptions,
+    FungibleTokenDetailed,
+    SelectTokenDialogProps,
+    'onSelect'
+>(SelectTokenDialog, 'onSelect')
 
 export const usePickToken = () => {
-    return useContext(TokenPickerContext).pickToken
+    return useContext(TaskManagerContext).show
 }
+export { TokenPickerProvider }

packages/shared/src/contexts/index.ts

@@ -1,4 +1,5 @@
-export * from './evm'
 export * from './base'
+export * from './common'
 export * from './components'
+export * from './evm'
 export * from './SharedContextProvider'

packages/shared/src/locales/en-US.json

@@ -20,5 +20,7 @@
     "address_viewer_address_name_rns": "RNS",
     "address_viewer_address_name_address": "address",
     "address_viewer_address_name_twitter": "twitter blue",
-    "dialog_dismiss": "Dismiss"
+    "dialog_dismiss": "Dismiss",
+    "dialog_confirm": "Confirm",
+    "dialog_confirm_label": "Confirm"
 }