refactor: move tips ui from NextID to Tips

.i18n-codegen.json

@@ -217,6 +217,18 @@
                 "trans": "Translate",
                 "sourceMap": "inline"
             }
+        },
+        {
+            "input": "./packages/mask/src/plugins/Tips/locales/en-US.json",
+            "output": "./packages/mask/src/plugins/Tips/locales/i18n_generated",
+            "parser": "i18next",
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "com.maskbook.tip",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
         }
     ]
 }

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

@@ -25,6 +25,7 @@ import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
 import { useSetupGuideStatusState } from '../DataSource/useNextID'
 import { useMyPersonas } from '../DataSource/useMyPersonas'
 import { WalletMessages } from '../../plugins/Wallet/messages'
+import { PersonaContext } from '../../extension/popups/pages/Personas/hooks/usePersonaContext'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -83,8 +84,14 @@ const useStyles = makeStyles()((theme) => {
         },
     }
 })
-
 export function ApplicationBoard() {
+    return (
+        <PersonaContext.Provider>
+            <ApplicationBoardContent />
+        </PersonaContext.Provider>
+    )
+}
+function ApplicationBoardContent() {
     const { classes } = useStyles()
     const theme = useTheme()
     const { t } = useI18N()
@@ -180,6 +187,7 @@ function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComp
     const { t } = useI18N()
     const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform
     const lastState = useSetupGuideStatusState()
+    const { currentPersona } = PersonaContext.useContainer()
     const lastRecognized = useLastRecognizedIdentity()
     const username = useMemo(() => {
         return lastState.username || (!lastRecognized.identifier.isUnknown ? lastRecognized.identifier.userId : '')
@@ -205,7 +213,7 @@ function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComp
             currentPersonaPublicKey: currentPersona?.fingerprint,
             currentSNSConnectedPersonaPublicKey: currentSNSConnectedPersona?.fingerprint,
         }
-    }, [platform, username, ui, personas])
+    }, [platform, username, ui, personas, currentPersona])
     const {
         isNextIDVerify,
         isSNSConnectToCurrentPersona,
@@ -214,30 +222,31 @@ function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComp
     } = ApplicationCurrentStatus ?? {}
     const { closeDialog } = useRemoteControlledDialog(WalletMessages.events.walletStatusDialogUpdated)
 
-    const onNextIDVerify = useCallback(() => {
+    const onNextIdVerify = useCallback(() => {
         closeDialog()
         CrossIsolationMessages.events.verifyNextID.sendToAll(undefined)
     }, [])
 
     if (!application.entry.RenderEntryComponent) return null
 
     const RenderEntryComponent = application.entry.RenderEntryComponent
-
+    const shouldVerifyNextId = Boolean(!isNextIDVerify && ApplicationCurrentStatus)
+    const shouldDisplayTooltipHint = ApplicationCurrentStatus?.isSNSConnectToCurrentPersona === false
     return (
         <RenderEntryComponent
             disabled={!application.enabled || isNextIDVerify === undefined || !isSNSConnectToCurrentPersona}
-            nextIdVerification={{
-                isNextIDVerify,
-                isSNSConnectToCurrentPersona,
-                toolTipHint: t('plugin_tips_sns_persona_unmatched', {
-                    currentPersonaPublicKey: formatPersonaPublicKey(currentPersonaPublicKey ?? '', 4),
-                    currentSNSConnectedPersonaPublicKey: formatPersonaPublicKey(
-                        currentSNSConnectedPersonaPublicKey ?? '',
-                        4,
-                    ),
-                }),
-                onNextIDVerify,
-            }}
+            tooltipHint={
+                shouldDisplayTooltipHint
+                    ? t('plugin_tips_sns_persona_unmatched', {
+                          currentPersonaPublicKey: formatPersonaPublicKey(currentPersonaPublicKey ?? '', 4),
+                          currentSNSConnectedPersonaPublicKey: formatPersonaPublicKey(
+                              currentSNSConnectedPersonaPublicKey ?? '',
+                              4,
+                          ),
+                      })
+                    : undefined
+            }
+            onClick={shouldVerifyNextId ? onNextIdVerify : undefined}
         />
     )
 }

packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx

@@ -108,6 +108,7 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
     const account = notInPop ? frontAccount : wallet.account
     const { Utils } = useWeb3State() ?? {}
     const { value: domain } = useReverseAddress(wallet.account)
+    const _providerType = wallet.providerType ?? providerType
     return account ? (
         <section className={classes.currentAccount}>
             <WalletIcon
@@ -118,7 +119,7 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
             />
             <div className={classes.accountInfo}>
                 <div className={classes.infoRow}>
-                    {wallet.providerType ?? providerType !== ProviderType.MaskWallet ? (
+                    {_providerType !== ProviderType.MaskWallet ? (
                         <Typography className={classes.accountName}>
                             {domain && Utils?.formatDomainName
                                 ? Utils.formatDomainName(domain)

packages/mask/src/components/shared/VerifyWallet/Steps.tsx

@@ -17,7 +17,6 @@ import { useEffect } from 'react'
 import { useI18N } from '../../../utils'
 import type { Web3Plugin } from '@masknet/plugin-infra/src/web3-types'
 import type { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
-import type { PersonaInformation } from '@masknet/shared-base'
 import { LoadingButton } from '@mui/lab'
 
 const useStyles = makeStyles()((theme) => ({
@@ -92,7 +91,7 @@ export enum SignSteps {
 
 interface StepsProps {
     step: SignSteps
-    persona: PersonaInformation
+    nickname?: string
     wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>
     disableConfirm?: boolean
     confirmLoading: boolean
@@ -113,7 +112,7 @@ export function Steps(props: StepsProps) {
     const navigate = useNavigate()
     const {
         changeWallet,
-        persona,
+        nickname,
         wallet,
         disableConfirm,
         onConfirm,
@@ -181,7 +180,7 @@ export function Steps(props: StepsProps) {
                         <div className={classes.stepRow}>
                             <Typography className={classes.stepTitle}>
                                 {t('wallet_verify_persona_name', {
-                                    personaName: persona.nickname ?? 'Persona Name',
+                                    personaName: nickname ?? 'Persona Name',
                                 })}
                             </Typography>
                             <Typography className={classes.stepIntro}>

packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx

@@ -156,7 +156,7 @@ const VerifyWallet = memo(() => {
         <div className={classes.container}>
             <Steps
                 disableConfirm={isBound && !signed}
-                persona={currentPersona}
+                nickname={currentPersona.nickname}
                 wallet={wallet}
                 step={signed ? SignSteps.SecondStepDone : step}
                 changeWallet={changeWallet}

packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx

@@ -1,18 +1,12 @@
 import type { Plugin } from '@masknet/plugin-infra'
 import { EMPTY_LIST } from '@masknet/shared-base'
-import { Flags } from '../../../../shared'
 import { base } from '../base'
 import { NextIdPage } from '../components/NextIdPage'
-import { PostTipButton, TipTaskManager } from '../components/Tip'
 import { PLUGIN_ID } from '../constants'
-import { RootContext } from '../contexts'
-import { setupStorage, storageDefaultValue } from '../storage'
 
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
-    init(signal, context) {
-        setupStorage(context.createKVStorage('memory', storageDefaultValue))
-    },
+    init() {},
     ProfileTabs: [
         {
             ID: `${PLUGIN_ID}_tabContent`,
@@ -23,22 +17,6 @@ const sns: Plugin.SNSAdaptor.Definition = {
             },
         },
     ],
-    GlobalInjection() {
-        if (!Flags.next_id_tip_enabled) return null
-        return (
-            <RootContext>
-                <TipTaskManager />
-            </RootContext>
-        )
-    },
-    PostActions() {
-        if (!Flags.next_id_tip_enabled) return null
-        return (
-            <RootContext>
-                <PostTipButton />
-            </RootContext>
-        )
-    },
 }
 
 export default sns

packages/mask/src/plugins/NextID/components/BindingItem.tsx

@@ -9,7 +9,7 @@ import { ExternalLink } from 'react-feather'
 import { NetworkPluginID, useNetworkDescriptor, useWeb3State } from '@masknet/plugin-infra/web3'
 import { useI18N } from '../locales'
 import { ImageIcon } from '@masknet/shared'
-import { TipButton } from './Tip'
+import { TipButton } from '../../../plugins/Tips/components'
 import { useCurrentVisitingIdentity } from '../../../components/DataSource/useActivatedUI'
 
 const useStyles = makeStyles()((theme) => ({

packages/mask/src/plugins/NextID/locales/en-US.json

@@ -45,30 +45,10 @@
     "copy_success_of_wallet_address": "Copy wallet address successfully!",
     "disconnect_warning": "This wallet will no longer show up in your web 3 profile page. Your Mask friends can no longer give tips to this wallet, or browse NFTs, donations and other on-chain information of this address.",
     "tips": "Tips",
-    "tip_to": "To",
     "token_insufficient_balance": "Insufficient balance",
-    "tip_type_token": "Token",
-    "tip_type_nft": "NFT",
-    "tip_wallets_missed": "Wallets not found.",
-    "send_tip": "Send",
     "sending_tip": "Sending...",
     "nft_not_belong_to_you": "The collectible doesn't exist or belong to you.",
     "send_tip_successfully": "Sent tip successfully.",
     "send_specific_tip_successfully": "Sent {{amount}} {{name}} tip successfully.",
-    "tip_share": "Share",
-    "tip_connect_wallet_message": "Please connect to a wallet.",
-    "tip_connect_wallet": "Connect Wallet",
-    "search": "Search",
-    "tip_contracts": "Contracts",
-    "tip_mask_promote": "Install https://mask.io/download-links to send your first tip.",
-    "tip_token_share_post": "I just tipped {{amount}} {{symbol}} to @{{recipientSnsId}}'s wallet address {{recipient}}\n\n{{promote}}",
-    "tip_nft_share_post": "I just tipped a {{name}} to @{{recipientSnsId}}'s wallet address {{recipient}}\n\n{{promote}}",
-    "tip_add": "Add",
-    "tip_adding": "Adding",
-    "tip_add_collectibles": "Add Collectibles",
-    "tip_add_collectibles_contract_address": "Input contract address",
-    "tip_add_collectibles_token_id": "Token ID",
-    "tip_add_collectibles_error": "The contract address is incorrect or the collectible does not belong to you.",
-    "tip_loading": "Loading",
-    "tip_empty_nft": "No any collectible is available to preview. Please add your collectible here."
+    "search": "Search"
 }

packages/mask/src/plugins/Tips/SNSAdaptor/TipsEntranceDialog.tsx

@@ -18,14 +18,15 @@ import { LoadingButton } from '@mui/lab'
 import { Button, ButtonProps, DialogContent } from '@mui/material'
 import formatDateTime from 'date-fns/format'
 import { cloneDeep } from 'lodash-unified'
-import { FC, useCallback, useMemo, useState } from 'react'
+import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { useAsyncFn, useAsyncRetry } from 'react-use'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import Services from '../../../extension/service'
 import { useI18N } from '../../../utils'
 import { getKvPayload, setKvPatchData, useKvGet } from '../hooks/useKv'
 import { useTipsWalletsList } from '../hooks/useTipsWalletsList'
 import { useProvedWallets } from '../hooks/useProvedWallets'
+import { useSupportedNetworks } from '../hooks/useSupportedNetworks'
 import AddWalletView from './bodyViews/AddWallet'
 import SettingView from './bodyViews/Setting'
 import WalletsView from './bodyViews/Wallets'
@@ -101,9 +102,11 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
     const [hasChanged, setHasChanged] = useState(false)
     const [rawPatchData, setRawPatchData] = useState<BindingProof[]>([])
     const [rawWalletList, setRawWalletList] = useState<BindingProof[]>([])
-    const supportedNetworks = useActivatedPlugin(PluginId.Tips, 'any')?.enableRequirement?.web3?.[
-        NetworkPluginID.PLUGIN_EVM
-    ]?.tipsSupportedChains
+    const plugin = useActivatedPlugin(PluginId.Tips, 'any')
+    const supportedNetworks = useSupportedNetworks(
+        Object.keys(plugin?.enableRequirement.web3 ?? {}) as NetworkPluginID[],
+    )
+
     const { showSnackbar } = useCustomSnackbar()
     const account = useAccount()
     const nowTime = formatDateTime(new Date(), 'yyyy-MM-dd HH:mm')
@@ -112,24 +115,21 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
         setShowAlert(true)
         return Services.Settings.getCurrentPersonaIdentifier()
     }, [open])
-    const { value: currentPersona } = useAsyncRetry(
-        () => Services.Identity.queryPersona(currentPersonaIdentifier as ECKeyIdentifier),
-        [currentPersonaIdentifier],
-    )
+    const { value: currentPersona } = useAsyncRetry(() => {
+        return Services.Identity.queryPersona(currentPersonaIdentifier!)
+    }, [currentPersonaIdentifier])
     const clickBack = () => {
         if (bodyViewStep === BodyViewStep.Main) {
             onClose()
         } else {
             setBodyViewStep(BodyViewStep.Main)
         }
     }
-    const { value: kv, retry: retryKv } = useKvGet()
-    const { loading, value: proofRes, retry: retryProof } = useProvedWallets()
-    const list = useTipsWalletsList(
-        proofRes as BindingProof[],
-        currentPersona?.publicHexKey,
-        kv?.val as NextIDStorageInfo,
+    const { value: kv, retry: retryKv } = useKvGet<NextIDStorageInfo<BindingProof[]>>(
+        currentPersonaIdentifier?.publicKeyAsHex,
     )
+    const { loading, value: proofRes, retry: retryProof } = useProvedWallets(currentPersonaIdentifier)
+    const list = useTipsWalletsList(proofRes, currentPersona?.publicHexKey, kv?.ok ? kv.val : undefined)
     useMemo(() => {
         setHasChanged(false)
         setRawPatchData(list)
@@ -146,14 +146,7 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
         retryProof()
         retryKv()
     }
-    const titleTail = (
-        <WalletButton
-            step={bodyViewStep}
-            onClick={() => {
-                setBodyViewStep(bodyViewStep === BodyViewStep.Wallets ? BodyViewStep.AddWallet : BodyViewStep.Wallets)
-            }}
-        />
-    )
+
     const setAsDefault = (idx: number) => {
         const changed = cloneDeep(rawPatchData)
         changed.forEach((x: any) => (x.isDefault = 0))
@@ -198,7 +191,9 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
             return false
         }
     }, [hasChanged, rawPatchData])
-    const { setDialog } = useRemoteControlledDialog(WalletMessages.events.selectProviderDialogUpdated)
+    const { setDialog, open: providerDialogOpen } = useRemoteControlledDialog(
+        WalletMessages.events.selectProviderDialogUpdated,
+    )
     const onConnectWalletClick = useCallback(() => {
         if (account) {
             setBodyViewStep(BodyViewStep.AddWallet)
@@ -207,11 +202,15 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
                 open: true,
                 pluginID: NetworkPluginID.PLUGIN_EVM,
             })
-            WalletMessages.events.walletsUpdated.on(() => {
-                setBodyViewStep(BodyViewStep.AddWallet)
-            })
         }
     }, [account])
+
+    useEffect(() => {
+        if (!providerDialogOpen) return
+        return WalletMessages.events.walletsUpdated.on(() => {
+            setBodyViewStep(BodyViewStep.AddWallet)
+        })
+    }, [providerDialogOpen])
     const [confirmState, onConfirmRelease] = useAsyncFn(
         async (wallet: BindingProof | undefined) => {
             try {
@@ -255,7 +254,20 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
     )
 
     return (
-        <InjectedDialog open={open} onClose={clickBack} title={bodyViewStep} titleTail={titleTail}>
+        <InjectedDialog
+            open={open}
+            onClose={clickBack}
+            title={bodyViewStep}
+            titleTail={
+                <WalletButton
+                    step={bodyViewStep}
+                    onClick={() => {
+                        setBodyViewStep(
+                            bodyViewStep === BodyViewStep.Wallets ? BodyViewStep.AddWallet : BodyViewStep.Wallets,
+                        )
+                    }}
+                />
+            }>
             {loading ? (
                 <DialogContent className={classes.dialogContent}>
                     <div className={classes.loading}>
@@ -300,7 +312,7 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
                         />
                     )}
                     {bodyViewStep === BodyViewStep.AddWallet && (
-                        <AddWalletView onCancel={refresh} bindings={rawWalletList} currentPersona={currentPersona} />
+                        <AddWalletView onCancel={refresh} bindings={rawWalletList} currentPersona={currentPersona!} />
                     )}
 
                     {![BodyViewStep.AddWallet, BodyViewStep.Wallets].includes(bodyViewStep) && rawPatchData.length > 0 && (