refactor: get rid of WalletContext (#10442)

DimensionDev · Aug 17, 2023 · 508489f · 508489f
1 parent 273a594
commit 508489f
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 129 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Wallet/BackupWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/BackupWallet/index.tsx
@@ -1,19 +1,20 @@
-import { memo, useState } from 'react'
-import { useAsyncFn } from 'react-use'
-import { Button, styled, Tab, tabClasses, Tabs, tabsClasses, Typography } from '@mui/material'
+import { Icons } from '@masknet/icons'
+import { encodeText } from '@masknet/kit'
+import { MimeType } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
+import { useWallet, useWallets } from '@masknet/web3-hooks-base'
+import { isSameAddress } from '@masknet/web3-shared-base'
 import { TabContext, TabPanel } from '@mui/lab'
-import { Icons } from '@masknet/icons'
-import { useWallet } from '@masknet/web3-hooks-base'
-import { useI18N } from '../../../../../utils/index.js'
-import { PasswordField } from '../../../components/PasswordField/index.js'
-import { WalletContext } from '../hooks/useWalletContext.js'
-import { useTitle } from '../../../hook/useTitle.js'
+import { Button, Tab, Tabs, Typography, styled, tabClasses, tabsClasses } from '@mui/material'
 import formatDateTime from 'date-fns/format'
+import { memo, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { useAsyncFn } from 'react-use'
 import { saveFileFromBuffer } from '../../../../../../shared/index.js'
-import { encodeText } from '@masknet/kit'
-import { MimeType } from '@masknet/shared-base'
+import { useI18N } from '../../../../../utils/index.js'
 import Services from '../../../../service.js'
+import { PasswordField } from '../../../components/PasswordField/index.js'
+import { useTitle } from '../../../hook/useTitle.js'
 
 const useStyles = makeStyles()({
     content: {
@@ -102,12 +103,17 @@ enum BackupTabs {
     PrivateKey = 'Private Key',
 }
 
+/**
+ * @deprecated unused
+ */
 const BackupWallet = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { selectedWallet } = WalletContext.useContainer()
     const currentWallet = useWallet()
-    const wallet = selectedWallet ?? currentWallet
+    const wallets = useWallets()
+    const [params] = useSearchParams()
+    const paramWallet = wallets.find((x) => isSameAddress(x.address, params.get('wallet') || ''))
+    const wallet = paramWallet ?? currentWallet
 
     const [currentTab, setCurrentTab] = useState(BackupTabs.JsonFile)
     const [password, setPassword] = useState('')

diff --git a/packages/mask/src/extension/popups/pages/Wallet/ChangeOwner/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ChangeOwner/index.tsx
@@ -22,7 +22,8 @@ import { PopupContext } from '../../../hook/usePopupContext.js'
 import { useTitle } from '../../../hook/useTitle.js'
 import { PersonaAvatar } from '../../../components/PersonaAvatar/index.js'
 import { GasSettingMenu } from '../../../components/GasSettingMenu/index.js'
-import { WalletContext } from '../hooks/useWalletContext.js'
+import { useQuery } from '@tanstack/react-query'
+import Services from '../../../../service.js'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -191,7 +192,9 @@ export default function ChangeOwner() {
     const [manageAccount, setManageAccount] = useState<ManagerAccount>()
 
     const { smartPayChainId } = useContainer(PopupContext)
-    const { personaManagers } = useContainer(WalletContext)
+    const { data: personaManagers } = useQuery(['persona-managers'], async () => {
+        return Services.Identity.queryOwnedPersonaInformation(true)
+    })
     const chainContextValue = useMemo(() => ({ chainId: smartPayChainId }), [smartPayChainId])
     const [paymentToken, setPaymentToken] = useState('')
     const [gasConfig, setGasConfig] = useState<GasConfig>()

diff --git a/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx
@@ -1,7 +1,7 @@
 import { first } from 'lodash-es'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { Trans } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useContainer } from 'unstated-next'
 import { Box, Button, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
@@ -14,7 +14,6 @@ import { isSameAddress } from '@masknet/web3-shared-base'
 import { Web3 } from '@masknet/web3-providers'
 import { useI18N } from '../../../../../utils/index.js'
 import { PasswordField } from '../../../components/PasswordField/index.js'
-import { WalletContext } from '../hooks/useWalletContext.js'
 import { useTitle } from '../../../hook/useTitle.js'
 import { PopupContext } from '../../../hook/usePopupContext.js'
 
@@ -76,14 +75,18 @@ const useStyles = makeStyles()({
     },
 })
 
+/**
+ * @deprecated unused
+ */
 const DeleteWallet = memo(() => {
     const { t } = useI18N()
     const navigate = useNavigate()
-    const { selectedWallet } = WalletContext.useContainer()
     const currentWallet = useWallet()
-    const wallet = selectedWallet ?? currentWallet
-
     const wallets = useWallets()
+    const [params] = useSearchParams()
+    const paramWallet = wallets.find((x) => isSameAddress(x.address, params.get('wallet') || ''))
+    const wallet = paramWallet ?? currentWallet
+
     const { classes } = useStyles()
     const [password, setPassword] = useState('')
     const [errorMessage, setErrorMessage] = useState('')

diff --git a/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/TrendingChart.tsx b/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/TrendingChart.tsx
@@ -1,9 +1,8 @@
 import { usePriceLineChart, type Dimension, useDimension } from '@masknet/shared'
 import type { TrendingAPI } from '@masknet/web3-providers/types'
 import { useRef, type HTMLProps, useMemo } from 'react'
-import { useContainer } from 'unstated-next'
-import { WalletContext } from '../hooks/useWalletContext.js'
 import { multipliedBy } from '@masknet/web3-shared-base'
+import { useCurrencyType, useFiatCurrencyRate } from '@masknet/web3-hooks-base'
 
 export const DIMENSION: Dimension = {
     top: 32,
@@ -20,7 +19,8 @@ interface TrendingChartProps extends HTMLProps<SVGSVGElement> {
 
 export function TrendingChart({ stats, ...props }: TrendingChartProps) {
     const svgRef = useRef<SVGSVGElement>(null)
-    const { currencyType, fiatCurrencyRate } = useContainer(WalletContext)
+    const currencyType = useCurrencyType()
+    const { data: fiatCurrencyRate = 1 } = useFiatCurrencyRate()
     const chartData = useMemo(
         () =>
             stats.map(([date, price]) => ({

diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletRename/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletRename/index.tsx
@@ -1,19 +1,18 @@
+import { makeStyles } from '@masknet/theme'
+import { useWallet, useWallets } from '@masknet/web3-hooks-base'
+import { Web3 } from '@masknet/web3-providers'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import { LoadingButton } from '@mui/lab'
 import { memo } from 'react'
-import { useAsyncFn } from 'react-use'
-import { useNavigate } from 'react-router-dom'
 import { Controller } from 'react-hook-form'
-import { LoadingButton } from '@mui/lab'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useAsyncFn } from 'react-use'
 import type { z as zod } from 'zod'
-import { makeStyles } from '@masknet/theme'
-import { useWallet } from '@masknet/web3-hooks-base'
-import { NetworkPluginID } from '@masknet/shared-base'
-import { ProviderType } from '@masknet/web3-shared-evm'
-import { Web3 } from '@masknet/web3-providers'
-import { StyledInput } from '../../../components/StyledInput/index.js'
 import { useI18N } from '../../../../../utils/index.js'
-import { useSetWalletNameForm } from '../hooks/useSetWalletNameForm.js'
-import { WalletContext } from '../hooks/useWalletContext.js'
+import { StyledInput } from '../../../components/StyledInput/index.js'
 import { useTitle } from '../../../hook/useTitle.js'
+import { useSetWalletNameForm } from '../hooks/useSetWalletNameForm.js'
 
 const useStyles = makeStyles()({
     content: {
@@ -35,13 +34,18 @@ const useStyles = makeStyles()({
     },
 })
 
+/**
+ * @deprecated unused
+ */
 const WalletRename = memo(() => {
     const { t } = useI18N()
     const navigate = useNavigate()
     const { classes } = useStyles()
-    const { selectedWallet } = WalletContext.useContainer()
-    const currentWallet = useWallet(NetworkPluginID.PLUGIN_EVM)
-    const wallet = selectedWallet ?? currentWallet
+    const currentWallet = useWallet()
+    const wallets = useWallets()
+    const [params] = useSearchParams()
+    const paramWallet = wallets.find((x) => isSameAddress(x.address, params.get('wallet') || ''))
+    const wallet = paramWallet ?? currentWallet
 
     const {
         control,

diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/ChangeOwner.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/ChangeOwner.tsx
@@ -1,14 +1,14 @@
 import { useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Icons } from '@masknet/icons'
-import { useContainer } from 'unstated-next'
 import { Box, ListItem, Typography, useTheme } from '@mui/material'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useWallet, useWallets } from '@masknet/web3-hooks-base'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import { useI18N } from '../../../../../utils/index.js'
-import { WalletContext } from '../hooks/useWalletContext.js'
 import { useStyles } from './useStyles.js'
+import { useQuery } from '@tanstack/react-query'
+import Services from '../../../../service.js'
 
 export function ChangeOwner() {
     const { t } = useI18N()
@@ -18,7 +18,9 @@ export function ChangeOwner() {
     const wallet = useWallet()
     const wallets = useWallets()
 
-    const { personaManagers } = useContainer(WalletContext)
+    const { data: personaManagers } = useQuery(['persona-managers'], async () => {
+        return Services.Identity.queryOwnedPersonaInformation(true)
+    })
 
     const walletManager = useMemo(
         () => wallets.find((x) => !x.owner && isSameAddress(wallet?.owner, x.address)),

diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/index.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/index.ts
@@ -1,4 +1,3 @@
 export * from './useAsset.js'
 export * from './useAssetExpand.js'
 export * from './useWalletAssets.js'
-export * from './useWalletContext.js'
diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts
diff --git a/packages/mask/src/extension/popups/pages/Wallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
@@ -14,15 +14,11 @@ import { WalletHeader } from './components/WalletHeader/index.js'
 import TokenDetail from './TokenDetail/index.js'
 import { TransactionDetail } from './TransactionDetail/index.js'
 import { CollectibleDetail } from './CollectibleDetail/index.js'
-import { WalletContext } from './hooks/index.js'
 
 const ImportWallet = lazy(() => import('./ImportWallet/index.js'))
 const AddDeriveWallet = lazy(() => import('./AddDeriveWallet/index.js'))
 const WalletSettings = lazy(() => import('./WalletSettings/index.js'))
-const WalletRename = lazy(() => import('./WalletRename/index.js'))
-const DeleteWallet = lazy(() => import('./DeleteWallet/index.js'))
 const CreateWallet = lazy(() => import('./CreateWallet/index.js'))
-const BackupWallet = lazy(() => import('./BackupWallet/index.js'))
 const AddToken = lazy(() => import('./AddToken/index.js'))
 const GasSetting = lazy(() => import('./GasSetting/index.js'))
 const Transfer = lazy(() => import('./Transfer/index.js'))
@@ -45,44 +41,39 @@ export default function Wallet() {
         <Suspense fallback={<LoadingPlaceholder />}>
             <WalletHeader />
             <RestorableScrollContext.Provider>
-                <WalletContext.Provider>
-                    <Routes>
-                        <Route
-                            path="*"
-                            element={
-                                wallet && wallets.filter((x) => !x.owner).length ? <WalletAssets /> : <WalletStartUp />
-                            }
-                        />
-                        <Route path={r(PopupRoutes.ImportWallet)} element={<ImportWallet />} />
-                        <Route path={r(PopupRoutes.AddDeriveWallet)} element={<AddDeriveWallet />} />
-                        <Route path={r(PopupRoutes.WalletSettings)} element={<WalletSettings />} />
-                        <Route path={r(PopupRoutes.WalletRename)} element={<WalletRename />} />
-                        <Route path={r(PopupRoutes.DeleteWallet)} element={<DeleteWallet />} />
-                        <Route path={r(PopupRoutes.CreateWallet)} element={<CreateWallet />} />
-                        <Route path={r(PopupRoutes.BackupWallet)} element={<BackupWallet />} />
-                        <Route path={r(`${PopupRoutes.Contacts}/:address?` as PopupRoutes)} element={<ContactList />} />
-                        <Route
-                            path={r(`${PopupRoutes.AddToken}/:chainId/:assetType` as PopupRoutes)}
-                            element={<AddToken />}
-                        />
-                        <Route path={r(PopupRoutes.GasSetting)} element={<GasSetting />} />
-                        <Route path={r(PopupRoutes.TokenDetail)} element={<TokenDetail />} />
-                        <Route path={r(PopupRoutes.TransactionDetail)} element={<TransactionDetail />} />
-                        <Route path={r(PopupRoutes.CollectibleDetail)} element={<CollectibleDetail />} />
-                        <Route path={r(PopupRoutes.Transfer)} element={<Transfer />} />
-                        <Route path={r(PopupRoutes.ContractInteraction)} element={<ContractInteraction />} />
-                        <Route path={r(PopupRoutes.SelectWallet)} element={<SelectWallet />} />
-                        <Route path={r(PopupRoutes.Unlock)} element={<Unlock />} />
-                        <Route path={r(PopupRoutes.ResetWallet)} element={<ResetWallet />} />
-                        <Route path={r(PopupRoutes.SetPaymentPassword)} element={<SetPaymentPassword />} />
-                        <Route path={r(PopupRoutes.ChangeOwner)} element={<ChangeOwner />} />
-                        <Route path={r(PopupRoutes.NetworkManagement)} element={<NetworkManagement />} />
-                        <Route path={r(PopupRoutes.AddNetwork)} element={<EditNetwork />} />
-                        <Route path={r(`${PopupRoutes.EditNetwork}/:id?` as PopupRoutes)} element={<EditNetwork />} />
-                        <Route path={r(PopupRoutes.Receive)} element={<Receive />} />
-                        <Route path={r(PopupRoutes.ExportWalletPrivateKey)} element={<ExportPrivateKey />} />
-                    </Routes>
-                </WalletContext.Provider>
+                <Routes>
+                    <Route
+                        path="*"
+                        element={
+                            wallet && wallets.filter((x) => !x.owner).length ? <WalletAssets /> : <WalletStartUp />
+                        }
+                    />
+                    <Route path={r(PopupRoutes.ImportWallet)} element={<ImportWallet />} />
+                    <Route path={r(PopupRoutes.AddDeriveWallet)} element={<AddDeriveWallet />} />
+                    <Route path={r(PopupRoutes.WalletSettings)} element={<WalletSettings />} />
+                    <Route path={r(PopupRoutes.CreateWallet)} element={<CreateWallet />} />
+                    <Route path={r(`${PopupRoutes.Contacts}/:address?` as PopupRoutes)} element={<ContactList />} />
+                    <Route
+                        path={r(`${PopupRoutes.AddToken}/:chainId/:assetType` as PopupRoutes)}
+                        element={<AddToken />}
+                    />
+                    <Route path={r(PopupRoutes.GasSetting)} element={<GasSetting />} />
+                    <Route path={r(PopupRoutes.TokenDetail)} element={<TokenDetail />} />
+                    <Route path={r(PopupRoutes.TransactionDetail)} element={<TransactionDetail />} />
+                    <Route path={r(PopupRoutes.CollectibleDetail)} element={<CollectibleDetail />} />
+                    <Route path={r(PopupRoutes.Transfer)} element={<Transfer />} />
+                    <Route path={r(PopupRoutes.ContractInteraction)} element={<ContractInteraction />} />
+                    <Route path={r(PopupRoutes.SelectWallet)} element={<SelectWallet />} />
+                    <Route path={r(PopupRoutes.Unlock)} element={<Unlock />} />
+                    <Route path={r(PopupRoutes.ResetWallet)} element={<ResetWallet />} />
+                    <Route path={r(PopupRoutes.SetPaymentPassword)} element={<SetPaymentPassword />} />
+                    <Route path={r(PopupRoutes.ChangeOwner)} element={<ChangeOwner />} />
+                    <Route path={r(PopupRoutes.NetworkManagement)} element={<NetworkManagement />} />
+                    <Route path={r(PopupRoutes.AddNetwork)} element={<EditNetwork />} />
+                    <Route path={r(`${PopupRoutes.EditNetwork}/:id?` as PopupRoutes)} element={<EditNetwork />} />
+                    <Route path={r(PopupRoutes.Receive)} element={<Receive />} />
+                    <Route path={r(PopupRoutes.ExportWalletPrivateKey)} element={<ExportPrivateKey />} />
+                </Routes>
             </RestorableScrollContext.Provider>
         </Suspense>
     )