feat: integrate flow chain

.i18n-codegen.json

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

cspell.json

@@ -310,7 +310,11 @@
         "noamount",
         "txts",
         "redpackets",
+        "blocto",
+        "onflow",
+        "unauthenticate",
         "mathwallet",
+        "walletlink",
         "rpcs"
     ],
     "ignoreRegExpList": ["/@servie/"],

packages/dashboard/package.json

@@ -17,6 +17,7 @@
     "@masknet/plugin-example": "workspace:*",
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/plugin-wallet": "workspace:*",
+    "@masknet/plugin-flow": "workspace:*",
     "@masknet/public-api": "workspace:*",
     "@masknet/shared": "workspace:*",
     "@masknet/shared-base": "workspace:*",

packages/web3-shared/evm/hooks/useMnemonicWordsPuzzle.ts → packages/dashboard/src/hooks/useMnemonicWordsPuzzle.ts

@@ -1,7 +1,11 @@
+/**
+ * TODO: use @packages/plugin-wallet instead
+ */
+
 import { shuffle } from 'lodash-es'
 import { useCallback, useMemo, useState } from 'react'
 import { useAsyncRetry } from 'react-use'
-import { useWeb3Context } from '../context'
+import { WalletRPC } from '../../../mask/src/plugins/Wallet/messages'
 
 // How many fields should be filled by the user?
 const PUZZLE_SIZE = 5
@@ -11,12 +15,11 @@ const TOTAL_SIZE = 12
 
 export function useMnemonicWordsPuzzle() {
     const [answerWords, setAnswerWords] = useState<string[]>([])
-    const { createMnemonicWords } = useWeb3Context()
     const {
         value: words = [],
         loading: wordsLoading,
         retry: wordsRetry,
-    } = useAsyncRetry(() => createMnemonicWords(), [])
+    } = useAsyncRetry(() => WalletRPC.createMnemonicWords(), [])
 
     //#region generate some mask indexes randomly which should be filled by the user
     const [seed, setSeed] = useState(0)

packages/dashboard/src/initialization/Dashboard.tsx

@@ -9,52 +9,72 @@ import {
     NoEffectUsePortalShadowRootContext,
 } from '@masknet/theme'
 import { ErrorBoundary } from '@masknet/shared'
+import {
+    createInjectHooksRenderer,
+    NetworkPluginID,
+    PluginsWeb3ContextProvider,
+    useActivatedPluginsDashboard,
+    useAllPluginsWeb3State,
+} from '@masknet/plugin-infra'
+import { Web3Provider } from '@masknet/web3-shared-evm'
 
 import i18n from 'i18next'
 import { I18nextProvider } from 'react-i18next'
 
 import './PluginHost'
-import { createInjectHooksRenderer, useActivatedPluginsDashboard } from '@masknet/plugin-infra'
 import { Pages } from '../pages/routes'
-import { useAppearance } from '../pages/Personas/api'
-import { Web3Provider } from '@masknet/web3-shared-evm'
 import { Web3Context } from '../web3/context'
+import { useAppearance, usePluginID } from '../pages/Personas/api'
 import { PersonaContext } from '../pages/Personas/hooks/usePersonaContext'
+import { fixWeb3State } from '../../../mask/src/plugins/EVM/UI/Web3State'
 
 const PluginRender = createInjectHooksRenderer(useActivatedPluginsDashboard, (x) => x.GlobalInjection)
 
 export default function DashboardRoot() {
-    const settings = useAppearance()
+    const pluginID = usePluginID()
+    const PluginsWeb3State = useAllPluginsWeb3State()
+
+    // TODO:
+    // migrate EVM plugin
+    fixWeb3State(PluginsWeb3State[NetworkPluginID.PLUGIN_EVM], Web3Context)
+
+    //#region theme
+    const appearance = useAppearance()
     const mode = useSystemPreferencePalette()
-    const themes: Record<typeof settings, Theme> = {
+    const themes: Record<typeof appearance, Theme> = {
         dark: MaskDarkTheme,
         light: MaskLightTheme,
         default: mode === 'dark' ? MaskDarkTheme : MaskLightTheme,
     }
-    const theme = themes[settings]
+    const theme = themes[appearance]
+
+    applyMaskColorVars(document.body, appearance === 'default' ? mode : appearance)
+    //#endregion
 
-    applyMaskColorVars(document.body, settings === 'default' ? mode : settings)
+    if (!PluginsWeb3State) return null
 
     return (
         <NoEffectUsePortalShadowRootContext.Provider value={true}>
             <Web3Provider value={Web3Context}>
-                <I18nextProvider i18n={i18n}>
-                    <StyledEngineProvider injectFirst>
-                        <ThemeProvider theme={theme}>
-                            <PersonaContext.Provider>
-                                <ErrorBoundary>
-                                    <CssBaseline />
-                                    <CustomSnackbarProvider>
-                                        <HashRouter>
-                                            <Pages />
-                                        </HashRouter>
-                                        <PluginRender />
-                                    </CustomSnackbarProvider>
-                                </ErrorBoundary>
-                            </PersonaContext.Provider>
-                        </ThemeProvider>
-                    </StyledEngineProvider>
-                </I18nextProvider>
+                <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State}>
+                    <I18nextProvider i18n={i18n}>
+                        <StyledEngineProvider injectFirst>
+                            <ThemeProvider theme={theme}>
+                                <PersonaContext.Provider>
+                                    <ErrorBoundary>
+                                        <CssBaseline />
+                                        <CustomSnackbarProvider>
+                                            <HashRouter>
+                                                <Pages />
+                                            </HashRouter>
+                                            <PluginRender />
+                                        </CustomSnackbarProvider>
+                                    </ErrorBoundary>
+                                </PersonaContext.Provider>
+                            </ThemeProvider>
+                        </StyledEngineProvider>
+                    </I18nextProvider>
+                </PluginsWeb3ContextProvider>
             </Web3Provider>
         </NoEffectUsePortalShadowRootContext.Provider>
     )

packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from '@masknet/theme'
 import { MaskColorVar } from '@masknet/theme'
 import { InfoIcon, RefreshIcon } from '@masknet/icons'
 import { useDashboardI18N } from '../../../../locales'
-import { ProviderType, useMnemonicWordsPuzzle } from '@masknet/web3-shared-evm'
+import { ProviderType } from '@masknet/web3-shared-evm'
 import { MnemonicReveal } from '../../../../components/Mnemonic'
 import { VerifyMnemonicDialog } from '../VerifyMnemonicDialog'
 import { useAsyncFn, useAsyncRetry } from 'react-use'
@@ -13,6 +13,7 @@ import { PluginServices, Services } from '../../../../API'
 import { RoutePaths } from '../../../../type'
 import type { Search } from 'history'
 import { WalletMessages } from '@masknet/plugin-wallet'
+import { useMnemonicWordsPuzzle } from '../../../../hooks/useMnemonicWordsPuzzle'
 
 // Private key at m/purpose'/coin_type'/account'/change
 export const HD_PATH_WITHOUT_INDEX_ETHEREUM = "m/44'/60'/0'/0"

packages/dashboard/src/pages/Personas/api.ts

@@ -4,10 +4,12 @@ import { Services, Messages } from '../../API'
 export type SocialNetwork = {
     networkIdentifier: string
 }
+
 export const [useDefinedSocialNetworkUIs, revalidateSocialNetworkUIs] = createGlobalState(
     Services.SocialNetwork.getDefinedSocialNetworkUIs,
     () => () => {},
 )
+
 export const [useOwnedPersonas] = createGlobalState(Services.Identity.queryOwnedPersonaInformation, (x) =>
     Messages.events.ownPersonaChanged.on(x),
 )
@@ -16,6 +18,14 @@ export const [useAppearance] = createGlobalState(Services.Settings.getTheme, (x)
     Messages.events.appearanceSettings.on(x),
 )
 
+export const [usePluginID] = createGlobalState(Services.Settings.getPluginID, (x) =>
+    Messages.events.pluginIDSettings.on(x),
+)
+
+export const [useNetworkID] = createGlobalState(Services.Settings.getNetworkID, (x) =>
+    Messages.events.networkIDSettings.on(x),
+)
+
 export const [useCurrentPersonaIdentifier] = createGlobalState(Services.Settings.getCurrentPersonaIdentifier, (x) =>
     Messages.events.currentPersonaIdentifier.on(x),
 )

packages/dashboard/src/pages/SignUp/steps/MnemonicRevealForm.tsx

@@ -2,7 +2,6 @@ import { memo, useState } from 'react'
 import { some } from 'lodash-es'
 import { useNavigate } from 'react-router-dom'
 import { Button, Stack, Box } from '@mui/material'
-import { useMnemonicWordsPuzzle } from '@masknet/web3-shared-evm'
 import RefreshIcon from '@mui/icons-material/Refresh'
 import { useCustomSnackbar } from '@masknet/theme'
 import { RoutePaths } from '../../../type'
@@ -13,6 +12,7 @@ import { useDashboardI18N } from '../../../locales'
 import { DesktopMnemonicConfirm, MnemonicReveal } from '../../../components/Mnemonic'
 import { SignUpRoutePath } from '../routePath'
 import { ButtonContainer } from '../../../components/RegisterFrame/ButtonContainer'
+import { useMnemonicWordsPuzzle } from '../../../hooks/useMnemonicWordsPuzzle'
 
 enum CreateWalletStep {
     NameAndWords = 0,

packages/dashboard/src/pages/Wallets/components/TokenTableRow/ChangeNetworkTip.tsx

@@ -43,7 +43,9 @@ export const ChangeNetworkTip = memo<ChangeNetworkTipProps>(({ chainId }) => {
                     break
                 case ProviderType.MetaMask:
                 case ProviderType.WalletConnect:
-                case ProviderType.Injected:
+                case ProviderType.Coin98:
+                case ProviderType.WalletLink:
+                case ProviderType.MathWallet:
                     setConnectWalletDialog({
                         open: true,
                         providerType,

packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx

@@ -10,7 +10,7 @@ import {
     useWeb3StateContext,
 } from '@masknet/web3-shared-evm'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { FormattedAddress, LoadingAnimation, ProviderIcon, useRemoteControlledDialog } from '@masknet/shared'
+import { FormattedAddress, LoadingAnimation, ImageIcon, useRemoteControlledDialog } from '@masknet/shared'
 import { PluginMessages } from '../../../../API'
 import { useRecentTransactions } from '../../hooks/useRecentTransactions'
 import { useDashboardI18N } from '../../../../locales'
@@ -128,7 +128,8 @@ export const WalletStateBarUI: FC<WalletStateBarUIProps> = ({
             )}
             <Stack direction="row" onClick={openConnectWalletDialog} sx={{ cursor: 'pointer' }}>
                 <Stack mx={1} justifyContent="center">
-                    <ProviderIcon providerType={providerType} />
+                    {/* <ImageIcon providerType={providerType} /> */}
+                    <ImageIcon />
                 </Stack>
                 <Box sx={{ userSelect: 'none' }}>
                     <Box fontSize={16}>{walletName}</Box>

packages/dashboard/src/web3/context.ts

@@ -13,7 +13,6 @@ import {
     Web3ProviderType,
     SendOverrides,
     RequestOptions,
-    InjectedProviderType,
 } from '@masknet/web3-shared-evm'
 import { Services, Messages, PluginServices, PluginMessages } from '../API'
 
@@ -30,7 +29,8 @@ export const Web3Context: Web3ProviderType = {
     account: createSubscriptionFromAsync(
         async () => {
             const providerType = await Services.Settings.getCurrentSelectedWalletProvider()
-            if (providerType === ProviderType.Injected) return ''
+            if ([ProviderType.Coin98, ProviderType.WalletLink, ProviderType.MathWallet].includes(providerType))
+                return ''
             return Services.Settings.getSelectedWalletAddress()
         },
         '',
@@ -66,10 +66,6 @@ export const Web3Context: Web3ProviderType = {
         NetworkType.Ethereum,
         Messages.events.currentNetworkSettings.on,
     ),
-    injectedProviderType: {
-        getCurrentValue: () => InjectedProviderType.Unknown,
-        subscribe: () => noop,
-    },
     walletPrimary: createSubscriptionFromAsync(
         PluginServices.Wallet.getWalletPrimary,
         null,
@@ -111,7 +107,6 @@ export const Web3Context: Web3ProviderType = {
     getAddressNamesList: PluginServices.Wallet.getAddressNames,
     getTransactionList: PluginServices.Wallet.getTransactionList,
     fetchERC20TokensFromTokenLists: Services.Ethereum.fetchERC20TokensFromTokenLists,
-    createMnemonicWords: PluginServices.Wallet.createMnemonicWords,
 }
 
 export function createExternalProvider() {

packages/dashboard/tsconfig.json

@@ -11,8 +11,10 @@
     { "path": "../theme/" },
     { "path": "../mask/src" },
     { "path": "../web3-shared/evm/" },
+    { "path": "../web3-shared/flow/" },
     { "path": "../icons/" },
     { "path": "../plugin-infra" },
+    { "path": "../plugins/Flow/" },
     { "path": "../plugins/Wallet/" },
     { "path": "../backup-format/" },
     { "path": "../shared-base" }

packages/injected-script/sdk/bridgedEthereum.ts

@@ -65,7 +65,9 @@ export interface BridgedEthereumProvider {
     /** Add event listener */
     on(event: string, callback: (...args: any) => void): () => void
     /** Access primitive property on the window.ethereum object. */
-    getProperty(key: 'isMetaMask' | 'isCoin98' | 'isMathWallet' | 'isWalletLink'): Promise<boolean | undefined>
+    getProperty(
+        key: 'isMaskWallet' | 'isMetaMask' | 'isCoin98' | 'isMathWallet' | 'isWalletLink',
+    ): Promise<boolean | undefined>
     /** MetaMask only, experimental API. */
     _metamaskIsUnlocked(): Promise<boolean>
     /** Call window.ethereum.isConnected() */

packages/mask/.webpack/config.ts

@@ -71,12 +71,15 @@ export function createConfiguration(rawFlags: BuildFlags): Configuration {
                     '@masknet/shared-base': join(__dirname, '../../shared-base/src/'),
                     '@masknet/theme': join(__dirname, '../../theme/src/'),
                     '@masknet/icons': join(__dirname, '../../icons/index.ts'),
+                    '@masknet/web3-kit': join(__dirname, '../../web3-kit/src/'),
+                    '@masknet/web3-shared-evm': join(__dirname, '../../web3-shared/evm/'),
+                    '@masknet/web3-shared-flow': join(__dirname, '../../web3-shared/flow/'),
+                    '@masknet/web3-shared-solana': join(__dirname, '../../web3-shared/solana/'),
                     '@masknet/plugin-infra': join(__dirname, '../../plugin-infra/src/'),
                     '@masknet/plugin-example': join(__dirname, '../../plugins/example/src/'),
+                    '@masknet/plugin-flow': join(__dirname, '../../plugins/Flow/src/'),
                     '@masknet/plugin-wallet': join(__dirname, '../../plugins/Wallet/src/'),
                     '@masknet/external-plugin-previewer': join(__dirname, '../../external-plugin-previewer/src/'),
-                    '@masknet/web3-shared-evm': join(__dirname, '../../web3-shared/evm/'),
-                    '@masknet/web3-shared-solana': join(__dirname, '../../web3-shared/solana/'),
                     '@masknet/public-api': join(__dirname, '../../public-api/src/'),
                     '@masknet/sdk': join(__dirname, '../../mask-sdk/server/'),
                     '@masknet/backup-format': join(__dirname, '../../backup-format/src/'),

packages/mask/package.json

@@ -24,6 +24,7 @@
     "@masknet/plugin-example": "workspace:*",
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/plugin-wallet": "workspace:*",
+    "@masknet/plugin-flow": "workspace:*",
     "@masknet/public-api": "workspace:*",
     "@masknet/sdk": "workspace:*",
     "@masknet/shared": "workspace:*",

packages/mask/src/UIRoot.tsx

@@ -1,14 +1,17 @@
+import { Suspense } from 'react'
 import { I18nextProvider } from 'react-i18next'
-import { CssBaseline, StyledEngineProvider, Theme, ThemeProvider } from '@mui/material'
-import { Web3Provider } from '@masknet/web3-shared-evm'
 import { CustomSnackbarProvider } from '@masknet/theme'
-import { ErrorBoundary, ErrorBoundaryBuildInfoContext } from '@masknet/shared'
+import { Web3Provider } from '@masknet/web3-shared-evm'
+import { CssBaseline, StyledEngineProvider, Theme, ThemeProvider } from '@mui/material'
+import { NetworkPluginID, PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra'
+import { ErrorBoundary, ErrorBoundaryBuildInfoContext, useValueRef } from '@masknet/shared'
 import i18nNextInstance from './utils/i18n-next'
 import { Web3Context } from './web3/context'
 import { buildInfoMarkdown } from './extension/background-script/Jobs/PrintBuildFlags'
-import { Suspense } from 'react'
 import { activatedSocialNetworkUI } from './social-network'
 import { FACEBOOK_ID } from './social-network-adaptor/facebook.com/base'
+import { pluginIDSettings } from './settings/settings'
+import { fixWeb3State } from './plugins/EVM/UI/Web3State'
 
 const identity = (jsx: React.ReactNode) => jsx as JSX.Element
 function compose(init: React.ReactNode, ...f: ((children: React.ReactNode) => JSX.Element)[]) {
@@ -49,12 +52,25 @@ export interface MaskUIRootProps extends React.PropsWithChildren<{}> {
 }
 
 export function MaskUIRoot({ children, kind, useTheme }: MaskUIRootProps) {
+    const pluginID = useValueRef(pluginIDSettings)
+    const PluginsWeb3State = useAllPluginsWeb3State()
+
+    // TODO:
+    // migrate EVM plugin
+    fixWeb3State(PluginsWeb3State[NetworkPluginID.PLUGIN_EVM], Web3Context)
+
+    if (Object.values(NetworkPluginID).some((x) => !PluginsWeb3State[x])) return null
+
     return compose(
         children,
         (jsx) => <Suspense fallback={null} children={jsx} />,
         (jsx) => <ErrorBoundaryBuildInfoContext.Provider value={buildInfoMarkdown} children={jsx} />,
         (jsx) => <ErrorBoundary children={jsx} />,
-        (jsx) => <Web3Provider value={Web3Context} children={jsx} />,
+        (jsx) => (
+            <Web3Provider value={Web3Context}>
+                <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State} children={jsx} />
+            </Web3Provider>
+        ),
         (jsx) => <I18nextProvider i18n={i18nNextInstance} children={jsx} />,
         kind === 'page' ? (jsx) => <StyledEngineProvider injectFirst children={jsx} /> : identity,
         (jsx) => (