refactor: wallet status box

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

@@ -120,12 +120,12 @@ export function WalletStatusBox(props: WalletStatusBox) {
     const { classes } = useStyles({
         contentBackground: providerDescriptor?.backgroundGradient,
     })
-    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection()
     const chainId = useChainId()
     const account = useAccount()
     const wallet = useWallet()
-    const { value: balance = '0' } = useBalance()
-    const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
+    const { value: balance = '0', loading: loadingBalance } = useBalance()
+    const { value: nativeToken, loading: loadingNativeToken } = useNativeToken()
     const networkDescriptor = useNetworkDescriptor()
     const { Others } = useWeb3State()
     const { value: domain } = useReverseAddress(undefined, account)
@@ -200,30 +200,29 @@ export function WalletStatusBox(props: WalletStatusBox) {
                             <LinkOutIcon className={classNames(classes.icon, classes.linkIcon)} />
                         </Link>
                     </div>
-                    {networkDescriptor?.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM ? (
-                        <div className={classes.infoRow}>
-                            <Typography className={classes.balance}>
-                                {formatBalance(balance, nativeToken?.decimals, 3)} {nativeToken?.symbol}
-                            </Typography>
-                        </div>
-                    ) : null}
+
+                    <div className={classes.infoRow}>
+                        <Typography className={classes.balance}>
+                            {loadingNativeToken || loadingBalance
+                                ? '-'
+                                : `${formatBalance(balance, nativeToken?.decimals, 3)} ${nativeToken?.symbol}`}
+                        </Typography>
+                    </div>
                 </div>
 
                 {!props.disableChange && (
                     <section>
-                        {networkDescriptor?.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM ? (
-                            <Button
-                                className={classNames(classes.actionButton)}
-                                variant="contained"
-                                size="small"
-                                onClick={async () => {
-                                    await connection.disconnect()
-                                    closeWalletStatusDialog()
-                                    openSelectProviderDialog()
-                                }}>
-                                {t('plugin_wallet_disconnect')}
-                            </Button>
-                        ) : null}
+                        <Button
+                            className={classNames(classes.actionButton)}
+                            variant="contained"
+                            size="small"
+                            onClick={async () => {
+                                await connection.disconnect()
+                                closeWalletStatusDialog()
+                                openSelectProviderDialog()
+                            }}>
+                            {t('plugin_wallet_disconnect')}
+                        </Button>
                         <Button
                             className={classNames(classes.actionButton)}
                             variant="contained"

packages/plugins/Flow/src/state/Connection/connection.ts

@@ -1,11 +1,19 @@
 import getUnixTime from 'date-fns/getUnixTime'
-import { first } from 'lodash-unified'
+import { first, isNative } from 'lodash-unified'
 import { unreachable } from '@dimensiondev/kit'
 import type { BlockHeaderObject, BlockObject, MutateOptions, QueryOptions } from '@blocto/fcl'
-import { ChainId, ProviderType, SchemaType, TransactionStatusCode } from '@masknet/web3-shared-flow'
+import {
+    ChainId,
+    createNativeToken,
+    getTokenConstants,
+    ProviderType,
+    SchemaType,
+    TransactionStatusCode,
+} from '@masknet/web3-shared-flow'
 import {
     Account,
     FungibleToken,
+    isSameAddress,
     NonFungibleToken,
     NonFungibleTokenCollection,
     NonFungibleTokenContract,
@@ -18,6 +26,11 @@ import type { FlowWeb3Connection as BaseConnection, FlowConnectionOptions } from
 import { Web3StateSettings } from '../../settings'
 import type { Plugin } from '@masknet/plugin-infra'
 
+function isNativeTokenAddress(chainId: ChainId, address: string) {
+    const { FLOW_ADDRESS } = getTokenConstants(chainId)
+    return isSameAddress(address, FLOW_ADDRESS)
+}
+
 class Connection implements BaseConnection {
     constructor(
         private chainId: ChainId,
@@ -115,13 +128,20 @@ class Connection implements BaseConnection {
         throw new Error('Method not implemented.')
     }
     getNativeToken(initial?: FlowConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>> {
-        throw new Error('Method not implemented.')
+        const options = this.getOptions(initial)
+        const token = createNativeToken(options.chainId)
+        return Promise.resolve(token)
     }
     getNativeTokenBalance(initial?: FlowConnectionOptions): Promise<string> {
         throw new Error('Method not implemented.')
     }
     getFungibleTokenBalance(address: string, initial?: FlowConnectionOptions): Promise<string> {
-        throw new Error('Method not implemented.')
+        const options = this.getOptions(initial)
+        if (!address || isNativeTokenAddress(options.chainId, address)) {
+            return this.getNativeTokenBalance(options)
+        }
+        // TODO
+        return Promise.resolve('0')
     }
     getNonFungibleTokenBalance(
         address: string,
@@ -148,6 +168,10 @@ class Connection implements BaseConnection {
     }
 
     getFungibleToken(address: string, initial?: FlowConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>> {
+        const options = this.getOptions(initial)
+        if (!address || isNativeTokenAddress(options.chainId, address)) {
+            return this.getNativeToken(options)
+        }
         throw new Error('Method not implemented.')
     }
     getNonFungibleToken(

packages/plugins/Flow/src/state/Others.ts

@@ -18,7 +18,7 @@ import {
 export class Others extends OthersState<ChainId, SchemaType, ProviderType, NetworkType> {
     constructor(context: Plugin.Shared.SharedContext) {
         super(context, {
-            defaultAddress: '',
+            defaultAddress: '0x1654653399040a61',
             defaultBlockDelay: 15,
             chainDescriptors: CHAIN_DESCRIPTORS,
             networkDescriptors: NETWORK_DESCRIPTORS,

packages/web3-shared/flow/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './address'
 export * from './domain'
 export * from './resolver'
+export * from './token'

packages/web3-shared/flow/utils/token.ts

@@ -0,0 +1,17 @@
+import { createFungibleToken } from '@masknet/web3-shared-base'
+import { getTokenConstants } from '../constants'
+import { ChainId, SchemaType } from '../types'
+import { chainResolver } from './resolver'
+
+export function createNativeToken(chainId: ChainId) {
+    const nativeCurrency = chainResolver.nativeCurrency(chainId)
+    return createFungibleToken<ChainId, SchemaType.Fungible>(
+        chainId,
+        SchemaType.Fungible,
+        getTokenConstants(chainId).FLOW_ADDRESS!,
+        nativeCurrency?.name ?? 'Flow',
+        nativeCurrency?.symbol ?? 'FLOW',
+        nativeCurrency?.decimals ?? 8,
+        nativeCurrency?.logoURL,
+    )
+}