From 6d233327baefe3703a469112f83a18696279edb9 Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Thu, 26 May 2022 00:09:42 +0800 Subject: [PATCH] chore: add useWeb3Provider --- packages/mask/shared-ui/locales/en-US.json | 1 + .../pages/Wallet/ConnectWallet/index.tsx | 4 +-- .../SNSAdaptor/SelectTokenListPanel.tsx | 32 ++++++++--------- .../Collectible/hooks/useAssetOrder.ts | 4 +-- .../hooks/{useOpenSeaSDK.ts => useOpenSea.ts} | 12 +++---- .../SNSAdaptor/ConnectWalletDialog/index.tsx | 6 ++-- .../plugin-infra/src/web3-helpers/index.ts | 13 +++++-- .../plugin-infra/src/web3-state/Connection.ts | 18 +++++++--- .../plugin-infra/src/web3-state/Provider.ts | 2 +- .../src/web3/EVM/useExternalProvider.ts | 0 packages/plugin-infra/src/web3/index.ts | 1 + packages/plugin-infra/src/web3/useWeb3.ts | 8 ++--- .../src/web3/useWeb3Connection.ts | 8 ++--- .../plugin-infra/src/web3/useWeb3Provider.ts | 28 +++++++++++++++ packages/plugins/EVM/src/state/Connection.ts | 6 ++-- .../EVM/src/state/Connection/connection.ts | 21 ++++++++---- .../Connection/interceptors/MaskWallet.ts | 4 +-- packages/plugins/EVM/src/state/index.ts | 4 +-- packages/plugins/Flow/src/state/Connection.ts | 4 ++- .../Flow/src/state/Connection/connection.ts | 18 ++++++---- .../plugins/Solana/src/state/Connection.ts | 4 ++- .../Solana/src/state/Connection/connection.ts | 34 +++++++++++-------- .../src/UI/components/TokenIcon/index.tsx | 10 +++--- packages/web3-shared/base/src/specs/index.ts | 9 ++++- 24 files changed, 161 insertions(+), 90 deletions(-) rename packages/mask/src/plugins/Collectible/hooks/{useOpenSeaSDK.ts => useOpenSea.ts} (63%) create mode 100644 packages/plugin-infra/src/web3/EVM/useExternalProvider.ts create mode 100644 packages/plugin-infra/src/web3/useWeb3Provider.ts diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index ad138a3e0579..5f65cf79d03d 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -687,6 +687,7 @@ "plugin_collectible_invalid_reserve_price": "Invalid reserve price", "plugin_collectible_place_a_bid": "Place a Bid", "plugin_collectible_make_an_offer": "Make an Offer", + "plugin_collectible_legal_text": "By checking this box, I agree to OpenSea's Terms of Service.", "plugin_collectibles_name": "Collectibles", "plugin_collectibles_description": "Display specific information of collectibles in OpenSea and Rarible, make an offer directly on social media.", "plugin_cryptoartai_description_title": "Description", diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx index df0e3cf5ad33..e43f56dadb41 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx @@ -73,7 +73,7 @@ const ConnectWalletPage = memo(() => { ) as Web3Helper.Web3ProviderDescriptor[] const { ProviderIconClickBait } = useWeb3UI(NetworkPluginID.PLUGIN_EVM).SelectProviderDialog ?? {} - const { Connection: Protocol } = useWeb3State(NetworkPluginID.PLUGIN_EVM) + const { Connection } = useWeb3State(NetworkPluginID.PLUGIN_EVM) const onClick = useCallback( async ( @@ -89,7 +89,7 @@ const ConnectWalletPage = memo(() => { return } - const connection = await Protocol?.getConnection?.({ + const connection = await Connection?.getConnection?.({ chainId: network.chainId, providerType: provider.type, }) diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx index abb69da6b145..981898918fd4 100644 --- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx +++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx @@ -8,15 +8,6 @@ import Check from '@mui/icons-material/Check' import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' import { FungibleToken, isSameAddress, formatBalance } from '@masknet/web3-shared-base' -export interface SelectTokenPanelProps { - amount: string - balance: string - token?: FungibleToken - onAmountChange: (amount: string) => void - onTokenChange: (token: FungibleToken) => void - tokens?: FungibleToken[] -} - const MIN_AMOUNT_LENGTH = 1 const MAX_AMOUNT_LENGTH = 79 @@ -34,7 +25,6 @@ const useStyles = makeStyles()((theme) => ({ height: 24, }, input: {}, - check: { flex: 1, display: 'flex', @@ -42,19 +32,27 @@ const useStyles = makeStyles()((theme) => ({ color: theme.palette.text.primary, }, })) + +export interface SelectTokenPanelProps { + amount: string + balance: string + token?: FungibleToken + onAmountChange: (amount: string) => void + onTokenChange: (token: FungibleToken) => void + tokens?: FungibleToken[] +} + export function SelectTokenListPanel(props: SelectTokenPanelProps) { - const { t } = useI18N() const { amount, balance, token, onAmountChange, onTokenChange, tokens = [] } = props - const ref = useRef(null) + const { t } = useI18N() + const ref = useRef(null) const { classes } = useStyles() - const [haveMenu, setHaveMenu] = useState(true) const width = useMemo(() => { if (!ref.current) return - const style = window.getComputedStyle(ref.current) - return style.width + return window.getComputedStyle(ref.current).width }, [ref.current]) useEffect(() => { @@ -130,14 +128,14 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) { {t('plugin_collectible_price')} - {t('wallet_balance')}: + {t('wallet_balance')}: - {token?.symbol} + {token?.symbol} diff --git a/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts b/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts index c99b01dc48d1..da45882c031d 100644 --- a/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts +++ b/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts @@ -6,11 +6,11 @@ import { getOrderUnitPrice } from '@masknet/web3-providers' import { NetworkPluginID, ZERO } from '@masknet/web3-shared-base' import type { AssetOrder } from '../../../../../web3-providers/src/opensea/types' import { isOpenSeaSupportedChainId } from '../pipes' -import { useOpenSeaSDK } from './useOpenSeaSDK' +import { useOpenSea } from './useOpenSea' export function useAssetOrder(address?: string, tokenId?: string) { const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) - const SDK = useOpenSeaSDK(isOpenSeaSupportedChainId(chainId) ? chainId : undefined) + const SDK = useOpenSea(isOpenSeaSupportedChainId(chainId) ? chainId : undefined) return useAsyncRetry(async () => { if (!address || !tokenId) return const asset = await SDK?.api.getAsset({ diff --git a/packages/mask/src/plugins/Collectible/hooks/useOpenSeaSDK.ts b/packages/mask/src/plugins/Collectible/hooks/useOpenSea.ts similarity index 63% rename from packages/mask/src/plugins/Collectible/hooks/useOpenSeaSDK.ts rename to packages/mask/src/plugins/Collectible/hooks/useOpenSea.ts index ecce9af4a609..9de194dcd90f 100644 --- a/packages/mask/src/plugins/Collectible/hooks/useOpenSeaSDK.ts +++ b/packages/mask/src/plugins/Collectible/hooks/useOpenSea.ts @@ -1,23 +1,23 @@ import { useMemo } from 'react' import { OpenSeaPort } from 'opensea-js' -import { useWeb3 } from '@masknet/plugin-infra/web3' +import { useWeb3Provider } from '@masknet/plugin-infra/web3' import type { ChainId } from '@masknet/web3-shared-evm' import { NetworkPluginID } from '@masknet/web3-shared-base' import { OpenSeaAPI_Key } from '../constants' import { resolveOpenSeaNetwork } from '../pipes' -export function useOpenSeaSDK(chainId?: ChainId.Mainnet | ChainId.Rinkeby) { - const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM) +export function useOpenSea(chainId?: ChainId.Mainnet | ChainId.Rinkeby) { + const web3Provider = useWeb3Provider(NetworkPluginID.PLUGIN_EVM) return useMemo(() => { - if (!chainId || !web3) return + if (!chainId || !web3Provider) return return new OpenSeaPort( - web3, + web3Provider, { apiKey: OpenSeaAPI_Key, networkName: resolveOpenSeaNetwork(chainId), }, console.log, ) - }, [web3]) + }, [web3Provider]) } diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx index 9b72c05721b1..471152cd7672 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx +++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx @@ -37,17 +37,17 @@ export function ConnectWalletDialog(props: ConnectWalletDialogProps) { ) // #endregion - const { Connection: Protocol, Others } = useWeb3State(pluginID) as Web3Helper.Web3StateAll + const { Connection, Others } = useWeb3State(pluginID) as Web3Helper.Web3StateAll const connection = useAsyncRetry(async () => { if (!open) return true - if (!networkType || !providerType || !Others || !Protocol) throw new Error('Failed to connect to provider.') + if (!networkType || !providerType || !Others || !Connection) throw new Error('Failed to connect to provider.') const chainId = Others?.networkResolver.networkChainId(networkType) if (!chainId) throw new Error('Failed to connect to provider.') - const connection = await Protocol.getConnection?.({ + const connection = await Connection.getConnection?.({ chainId, providerType, }) diff --git a/packages/plugin-infra/src/web3-helpers/index.ts b/packages/plugin-infra/src/web3-helpers/index.ts index faa9a2622dfb..8fbd9b2051b9 100644 --- a/packages/plugin-infra/src/web3-helpers/index.ts +++ b/packages/plugin-infra/src/web3-helpers/index.ts @@ -73,6 +73,10 @@ export declare namespace Web3Helper { export type Web3 = T extends never ? never : Definition[T]['Web3'] + export type Web3Provider = T extends never + ? never + : Definition[T]['Web3Provider'] + export type Web3ProviderState = T extends never ? never : ProviderState @@ -88,7 +92,8 @@ export declare namespace Web3Helper { Definition[T]['Transaction'], Definition[T]['TransactionDetailed'], Definition[T]['TransactionSignature'], - Definition[T]['Web3'] + Definition[T]['Web3'], + Definition[T]['Web3Provider'] > export type Web3ConnectionOptions = T extends never @@ -106,7 +111,8 @@ export declare namespace Web3Helper { Definition[T]['Transaction'], Definition[T]['TransactionDetailed'], Definition[T]['TransactionSignature'], - Definition[T]['Web3'] + Definition[T]['Web3'], + Definition[T]['Web3Provider'] > export type Web3HubOptions = T extends never ? never @@ -167,7 +173,8 @@ export declare namespace Web3Helper { Definition[NetworkPluginID]['Transaction'], Definition[NetworkPluginID]['TransactionDetailed'], Definition[NetworkPluginID]['TransactionSignature'], - Definition[NetworkPluginID]['Web3'] + Definition[NetworkPluginID]['Web3'], + Definition[NetworkPluginID]['Web3Provider'] > export type Web3HubAll = Hub< Definition[NetworkPluginID]['ChainId'], diff --git a/packages/plugin-infra/src/web3-state/Connection.ts b/packages/plugin-infra/src/web3-state/Connection.ts index 6a612eefbfd3..169ded51c45d 100644 --- a/packages/plugin-infra/src/web3-state/Connection.ts +++ b/packages/plugin-infra/src/web3-state/Connection.ts @@ -11,6 +11,7 @@ export class ConnectionState< TransactionDetailed, TransactionSignature, Web3, + Web3Provider, Web3ConnectionOptions extends ConnectionOptions = ConnectionOptions< ChainId, ProviderType, @@ -27,6 +28,7 @@ export class ConnectionState< TransactionDetailed, TransactionSignature, Web3, + Web3Provider, Web3ConnectionOptions > { @@ -45,6 +47,7 @@ export class ConnectionState< TransactionDetailed, TransactionSignature, Web3, + Web3Provider, Web3ConnectionOptions >, protected subscription: { @@ -54,6 +57,16 @@ export class ConnectionState< }, ) {} + async getWeb3(options?: Web3ConnectionOptions) { + const connection = await this.getConnection(options) + return connection.getWeb3(options) + } + + async getWeb3Provider(options?: Web3ConnectionOptions) { + const connection = await this.getConnection(options) + return connection.getWeb3Provider(options) + } + async getConnection(options?: Web3ConnectionOptions) { return this.createConnection( options?.chainId ?? this.subscription.chainId?.getCurrentValue(), @@ -61,9 +74,4 @@ export class ConnectionState< options?.providerType ?? this.subscription.providerType?.getCurrentValue(), ) } - - async getWeb3(options?: Web3ConnectionOptions) { - const connection = await this.getConnection(options) - return connection.getWeb3(options) - } } diff --git a/packages/plugin-infra/src/web3-state/Provider.ts b/packages/plugin-infra/src/web3-state/Provider.ts index fffb315e0e15..fc5bb1f530d1 100644 --- a/packages/plugin-infra/src/web3-state/Provider.ts +++ b/packages/plugin-infra/src/web3-state/Provider.ts @@ -25,7 +25,7 @@ export class ProviderState< NetworkType extends string, Web3Provider, Web3, -> implements Web3ProviderState +> implements Web3ProviderState { protected site = getSiteType() protected storage: StorageObject, ProviderType>> = null! diff --git a/packages/plugin-infra/src/web3/EVM/useExternalProvider.ts b/packages/plugin-infra/src/web3/EVM/useExternalProvider.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/plugin-infra/src/web3/index.ts b/packages/plugin-infra/src/web3/index.ts index 40bb89c0dd86..9358f70d3159 100644 --- a/packages/plugin-infra/src/web3/index.ts +++ b/packages/plugin-infra/src/web3/index.ts @@ -72,6 +72,7 @@ export * from './useWallet' export * from './useWalletPrimary' export * from './useWallets' export * from './useWeb3' +export * from './useWeb3Provider' export * from './useWeb3Connection' export * from './useWeb3Hub' export * from './useWeb3State' diff --git a/packages/plugin-infra/src/web3/useWeb3.ts b/packages/plugin-infra/src/web3/useWeb3.ts index 0365cf7be69b..cf46f9ab59cc 100644 --- a/packages/plugin-infra/src/web3/useWeb3.ts +++ b/packages/plugin-infra/src/web3/useWeb3.ts @@ -9,20 +9,20 @@ import { useWeb3State } from './useWeb3State' export function useWeb3(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions) { type GetWeb3 = (options?: Web3Helper.Web3ConnectionOptions) => Promise> - const { Connection: Protocol } = useWeb3State(pluginID) + const { Connection } = useWeb3State(pluginID) const chainId = useChainId(pluginID) const account = useAccount(pluginID) const providerType = useProviderType(pluginID) const { value: web3 = null } = useAsyncRetry(async () => { - if (!Protocol?.getWeb3) return null - return (Protocol.getWeb3 as GetWeb3)({ + if (!Connection?.getWeb3) return null + return (Connection.getWeb3 as GetWeb3)({ account, chainId, providerType, ...options, } as Web3Helper.Web3ConnectionOptions) - }, [account, chainId, providerType, Protocol, JSON.stringify(options)]) + }, [account, chainId, providerType, Connection, JSON.stringify(options)]) return web3 } diff --git a/packages/plugin-infra/src/web3/useWeb3Connection.ts b/packages/plugin-infra/src/web3/useWeb3Connection.ts index f08d16099764..7f08a0384796 100644 --- a/packages/plugin-infra/src/web3/useWeb3Connection.ts +++ b/packages/plugin-infra/src/web3/useWeb3Connection.ts @@ -12,20 +12,20 @@ export function useWeb3Connection( ) { type GetConnection = (options?: Web3Helper.Web3ConnectionOptions) => Promise> - const { Connection: Protocol } = useWeb3State(pluginID) + const { Connection } = useWeb3State(pluginID) const chainId = useChainId(pluginID) const account = useAccount(pluginID) const providerType = useProviderType(pluginID) const { value: connection = null } = useAsyncRetry(async () => { - if (!Protocol?.getConnection) return - return (Protocol.getConnection as GetConnection)?.({ + if (!Connection?.getConnection) return + return (Connection.getConnection as GetConnection)?.({ account, chainId, providerType, ...options, } as Web3Helper.Web3ConnectionOptions) - }, [account, chainId, providerType, Protocol, JSON.stringify(options)]) + }, [account, chainId, providerType, Connection, JSON.stringify(options)]) return connection } diff --git a/packages/plugin-infra/src/web3/useWeb3Provider.ts b/packages/plugin-infra/src/web3/useWeb3Provider.ts new file mode 100644 index 000000000000..001ab96650d3 --- /dev/null +++ b/packages/plugin-infra/src/web3/useWeb3Provider.ts @@ -0,0 +1,28 @@ +import { useAsyncRetry } from 'react-use' +import type { NetworkPluginID } from '@masknet/web3-shared-base' +import type { Web3Helper } from '../web3-helpers' +import { useAccount } from './useAccount' +import { useChainId } from './useChainId' +import { useProviderType } from './useProviderType' +import { useWeb3State } from './useWeb3State' + +export function useWeb3Provider(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions) { + type GetWeb3Provider = (options?: Web3Helper.Web3ConnectionOptions) => Promise> + + const { Connection } = useWeb3State(pluginID) + const chainId = useChainId(pluginID) + const account = useAccount(pluginID) + const providerType = useProviderType(pluginID) + + const { value: web3Provider = null } = useAsyncRetry(async () => { + if (!Connection?.getWeb3Provider) return null + return (Connection.getWeb3Provider as GetWeb3Provider)({ + account, + chainId, + providerType, + ...options, + } as Web3Helper.Web3ConnectionOptions) + }, [account, chainId, providerType, Connection, JSON.stringify(options)]) + + return web3Provider +} diff --git a/packages/plugins/EVM/src/state/Connection.ts b/packages/plugins/EVM/src/state/Connection.ts index 5d664cf61e49..59dc0082c0a8 100644 --- a/packages/plugins/EVM/src/state/Connection.ts +++ b/packages/plugins/EVM/src/state/Connection.ts @@ -11,10 +11,11 @@ import type { TransactionDetailed, TransactionSignature, Web3, + Web3Provider, } from '@masknet/web3-shared-evm' import { createConnection } from './Connection/connection' -export class Protocol extends ConnectionState< +export class Connection extends ConnectionState< ChainId, SchemaType, ProviderType, @@ -23,7 +24,8 @@ export class Protocol extends ConnectionState< Transaction, TransactionDetailed, TransactionSignature, - Web3 + Web3, + Web3Provider > { constructor( private context: Plugin.Shared.SharedContext, diff --git a/packages/plugins/EVM/src/state/Connection/connection.ts b/packages/plugins/EVM/src/state/Connection/connection.ts index 2f18450b51a4..9d18d6133588 100644 --- a/packages/plugins/EVM/src/state/Connection/connection.ts +++ b/packages/plugins/EVM/src/state/Connection/connection.ts @@ -131,6 +131,20 @@ class Connection implements EVM_Connection { } } + getWeb3(options?: EVM_Web3ConnectionOptions) { + const web3 = new Web3( + createWeb3Provider((requestArguments: RequestArguments) => this.hijackedRequest(requestArguments, options)), + ) + return Promise.resolve(web3) + } + + getWeb3Provider(options?: EVM_Web3ConnectionOptions) { + const web3Provider = createWeb3Provider((requestArguments: RequestArguments) => + this.hijackedRequest(requestArguments, options), + ) + return Promise.resolve(web3Provider) + } + async connect(options?: EVM_Web3ConnectionOptions): Promise> { return this.hijackedRequest>( { @@ -392,13 +406,6 @@ class Connection implements EVM_Connection { ) } - getWeb3(options?: EVM_Web3ConnectionOptions) { - const web3 = new Web3( - createWeb3Provider((requestArguments: RequestArguments) => this.hijackedRequest(requestArguments, options)), - ) - return Promise.resolve(web3) - } - async getWeb3Contract( address: string, ABI: AbiItem[], diff --git a/packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts b/packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts index 7a626e562b87..d9a87891c19a 100644 --- a/packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts +++ b/packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts @@ -5,7 +5,7 @@ import { SharedContextSettings, Web3StateSettings } from '../../../settings' export class MaskWallet implements Middleware { async fn(context: Context, next: () => Promise) { - const { Connection: Protocol } = Web3StateSettings.value + const { Connection } = Web3StateSettings.value const { hasNativeAPI, send, account, chainId, signTransaction, signPersonalMessage, signTypedData } = SharedContextSettings.value @@ -44,7 +44,7 @@ export class MaskWallet implements Middleware { break } - const connection = await Protocol?.getConnection?.({ + const connection = await Connection?.getConnection?.({ chainId: context.chainId, }) const tx = await connection?.sendSignedTransaction?.(rawTransaction, { diff --git a/packages/plugins/EVM/src/state/index.ts b/packages/plugins/EVM/src/state/index.ts index b3b167314e6c..d803e681360d 100644 --- a/packages/plugins/EVM/src/state/index.ts +++ b/packages/plugins/EVM/src/state/index.ts @@ -5,7 +5,7 @@ import { RiskWarning } from './RiskWarning' import { Token } from './Token' import { Transaction } from './Transaction' import { NameService } from './NameService' -import { Protocol } from './Connection' +import { Connection } from './Connection' import { Provider } from './Provider' import { Wallet } from './Wallet' import { Others } from './Others' @@ -47,7 +47,7 @@ export function createWeb3State(context: Plugin.Shared.SharedContext): EVM_Web3S }), TransactionFormatter: new TransactionFormatter(context), TransactionWatcher: new TransactionWatcher(context), - Connection: new Protocol(context, { + Connection: new Connection(context, { chainId: Provider_.chainId, account: Provider_.account, providerType: Provider_.providerType, diff --git a/packages/plugins/Flow/src/state/Connection.ts b/packages/plugins/Flow/src/state/Connection.ts index 25cdbe482776..3c8c873eab2d 100644 --- a/packages/plugins/Flow/src/state/Connection.ts +++ b/packages/plugins/Flow/src/state/Connection.ts @@ -11,6 +11,7 @@ import type { Block, Transaction, TransactionDetailed, + Web3Provider, } from '@masknet/web3-shared-flow' import { createConnection } from './Connection/connection' @@ -28,7 +29,8 @@ export class Connection extends ConnectionState< Transaction, TransactionDetailed, never, - Web3 + Web3, + Web3Provider > { constructor( private context: Plugin.Shared.SharedContext, diff --git a/packages/plugins/Flow/src/state/Connection/connection.ts b/packages/plugins/Flow/src/state/Connection/connection.ts index 9c1e99361540..a409bba5a85d 100644 --- a/packages/plugins/Flow/src/state/Connection/connection.ts +++ b/packages/plugins/Flow/src/state/Connection/connection.ts @@ -4,7 +4,6 @@ import type { BlockObject, CompositeSignature, MutateOptions, QueryOptions } fro import { ChainId, ProviderType, SchemaType, TransactionStatusCode } from '@masknet/web3-shared-flow' import { Account, - ConnectionOptions, FungibleToken, NonFungibleToken, NonFungibleTokenCollection, @@ -18,10 +17,15 @@ import { Web3StateSettings } from '../../settings' class Connection implements BaseConnection { constructor(private chainId: ChainId, private account: string, private providerType: ProviderType) {} - getBlock(no: number, options?: FlowConnectionOptions): Promise { - throw new Error('Method not implemented.') + private _getWeb3Provider(options?: FlowConnectionOptions) { + return Providers[options?.providerType ?? this.providerType] + } + getWeb3(options?: FlowConnectionOptions) { + return this._getWeb3Provider(options).createWeb3(options?.chainId ?? this.chainId) + } + getWeb3Provider(options?: FlowConnectionOptions) { + return this._getWeb3Provider(options).createWeb3Provider(options?.chainId ?? this.chainId) } - async connect(options?: FlowConnectionOptions): Promise> { return { account: '', @@ -54,6 +58,9 @@ class Connection implements BaseConnection { ): Promise> { throw new Error('Method not implemented.') } + getBlock(no: number, options?: FlowConnectionOptions): Promise { + throw new Error('Method not implemented.') + } getBlockTimestamp(options?: FlowConnectionOptions): Promise { throw new Error('Method not implemented.') } @@ -114,9 +121,6 @@ class Connection implements BaseConnection { throw new Error('Method not implemented.') } - getWeb3(options?: FlowConnectionOptions) { - return Providers[options?.providerType ?? this.providerType].createWeb3(options?.chainId ?? this.chainId) - } async getAccount(options?: FlowConnectionOptions): Promise { const web3 = await this.getWeb3(options) return web3.currentUser().addr ?? '' diff --git a/packages/plugins/Solana/src/state/Connection.ts b/packages/plugins/Solana/src/state/Connection.ts index dbd2b3f669b1..145ed66da6ed 100644 --- a/packages/plugins/Solana/src/state/Connection.ts +++ b/packages/plugins/Solana/src/state/Connection.ts @@ -11,6 +11,7 @@ import type { Transaction, TransactionDetailed, TransactionSignature, + Web3Provider, } from '@masknet/web3-shared-solana' import { createConnection } from './Connection/connection' @@ -23,7 +24,8 @@ export class Connection extends ConnectionState< Transaction, TransactionDetailed, TransactionSignature, - Web3 + Web3, + Web3Provider > { constructor( private context: Plugin.Shared.SharedContext, diff --git a/packages/plugins/Solana/src/state/Connection/connection.ts b/packages/plugins/Solana/src/state/Connection/connection.ts index d04016ee5750..519eae3be9a9 100644 --- a/packages/plugins/Solana/src/state/Connection/connection.ts +++ b/packages/plugins/Solana/src/state/Connection/connection.ts @@ -24,8 +24,16 @@ class Connection implements BaseConnection { constructor(private chainId: ChainId, private account: string, private providerType: ProviderType) {} - getBlock(no: number, options?: SolanaWeb3ConnectionOptions): Promise { - throw new Error('Method not implemented.') + private _getWeb3Provider(options?: SolanaWeb3ConnectionOptions) { + return Providers[options?.providerType ?? this.providerType] + } + + async getWeb3(options?: SolanaWeb3ConnectionOptions) { + return this._getWeb3Provider(options).createWeb3(options?.chainId ?? this.chainId) + } + + getWeb3Provider(options?: SolanaWeb3ConnectionOptions) { + return this._getWeb3Provider(options).createWeb3Provider(options?.chainId) } async connect(options?: SolanaWeb3ConnectionOptions): Promise> { @@ -110,14 +118,6 @@ class Connection implements BaseConnection { throw new Error('Method not implemented.') } - getWeb3(options?: SolanaWeb3ConnectionOptions) { - return this.getWeb3Provider(options).createWeb3(options?.chainId ?? this.chainId) - } - - getWeb3Provider(options?: SolanaWeb3ConnectionOptions) { - return Providers[options?.providerType ?? this.providerType] - } - getWeb3Connection(options?: SolanaWeb3ConnectionOptions) { const chainId = options?.chainId ?? this.chainId const connection = this.connections.get(chainId) ?? new SolanaConnection(NETWORK_ENDPOINTS[chainId]) @@ -137,6 +137,10 @@ class Connection implements BaseConnection { return Promise.resolve(options?.chainId ?? this.chainId) } + getBlock(no: number, options?: SolanaWeb3ConnectionOptions): Promise { + throw new Error('Method not implemented.') + } + async getBlockNumber(options?: SolanaWeb3ConnectionOptions) { const response = await this.getWeb3Connection(options).getLatestBlockhash() return response.lastValidBlockHeight @@ -158,21 +162,21 @@ class Connection implements BaseConnection { return TransactionStatusType.NOT_DEPEND } - signMessage(dataToSign: string, signType?: string, options?: SolanaWeb3ConnectionOptions) { - return this.getWeb3Provider(options).signMessage(dataToSign) + async signMessage(dataToSign: string, signType?: string, options?: SolanaWeb3ConnectionOptions) { + return this._getWeb3Provider(options).signMessage(dataToSign) } - verifyMessage( + async verifyMessage( dataToVerify: string, signature: string, signType?: string, options?: SolanaWeb3ConnectionOptions, ): Promise { - return this.getWeb3Provider(options).verifyMessage(dataToVerify, signature) + return this._getWeb3Provider(options).verifyMessage(dataToVerify, signature) } async signTransaction(transaction: Transaction, options?: SolanaWeb3ConnectionOptions) { - return this.getWeb3Provider(options).signTransaction(transaction) + return this._getWeb3Provider(options).signTransaction(transaction) } signTransactions(transactions: Transaction[], options?: SolanaWeb3ConnectionOptions) { diff --git a/packages/shared/src/UI/components/TokenIcon/index.tsx b/packages/shared/src/UI/components/TokenIcon/index.tsx index 640a8a899307..55cf3ede318a 100644 --- a/packages/shared/src/UI/components/TokenIcon/index.tsx +++ b/packages/shared/src/UI/components/TokenIcon/index.tsx @@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({ export interface TokenIconProps extends withClasses<'icon'> { chainId?: Web3Helper.ChainIdAll - networkPluginID?: NetworkPluginID + pluginID?: NetworkPluginID address: string name?: string logoURL?: string @@ -27,13 +27,13 @@ export interface TokenIconProps extends withClasses<'icon'> { export function TokenIcon(props: TokenIconProps) { const { address, logoURL, name, AvatarProps, classes } = props - const chainId = useChainId() as Web3Helper.ChainIdAll - const hub = useWeb3Hub(props.networkPluginID) as Web3Helper.Web3HubAll + const chainId = useChainId(props.pluginID, props.chainId) as Web3Helper.ChainIdAll + const hub = useWeb3Hub(props.pluginID) as Web3Helper.Web3HubAll const { value: urls = EMPTY_LIST } = useAsyncRetry(async () => { - const logoURLs = await hub?.getFungibleTokenIconURLs?.(props.chainId ?? chainId, address) + const logoURLs = await hub?.getFungibleTokenIconURLs?.(chainId, address) return [logoURL, ...(logoURLs ?? [])].filter(Boolean) as string[] - }, [chainId, props.chainId, address, logoURL, TokenIcon]) + }, [chainId, address, logoURL, hub]) const { value: trustedLogoURI, loading } = useImageFailOver(urls, '') diff --git a/packages/web3-shared/base/src/specs/index.ts b/packages/web3-shared/base/src/specs/index.ts index c25f016c3e09..1698a056ef9c 100644 --- a/packages/web3-shared/base/src/specs/index.ts +++ b/packages/web3-shared/base/src/specs/index.ts @@ -533,10 +533,13 @@ export interface Connection< TransactionDetailed, TransactionSignature, Web3, + Web3Provider, Web3ConnectionOptions = ConnectionOptions, > { /** Get web3 instance */ getWeb3(options?: Web3ConnectionOptions): Promise + /** Get web3 provider instance */ + getWeb3Provider(options?: Web3ConnectionOptions): Promise /** Get gas price */ getGasPrice(options?: Web3ConnectionOptions): Promise /** Get schema type of given token address. */ @@ -888,6 +891,7 @@ export interface ConnectionState< TransactionDetailed, TransactionSignature, Web3, + Web3Provider, Web3ConnectionOptions = ConnectionOptions, Web3Connection = Connection< ChainId, @@ -899,11 +903,14 @@ export interface ConnectionState< TransactionDetailed, TransactionSignature, Web3, + Web3Provider, Web3ConnectionOptions >, > { - /** Get web3 client */ + /** Get web3 SDK */ getWeb3?: (options?: Web3ConnectionOptions) => Promise + /** Get web3 provider instance */ + getWeb3Provoder?: (options?: Web3ConnectionOptions) => Promise /** Get connection */ getConnection?: (options?: Web3ConnectionOptions) => Promise }