feat: select providers ui (#12063)

packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketRecord.tsx

@@ -49,6 +49,7 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
             [smallQuery]: {
                 padding: theme.spacing(2, 1.5),
             },
+            backgroundColor: '#fff',
             '&:before': {
                 pointerEvents: 'none',
                 position: 'absolute',
@@ -80,6 +81,7 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
         },
         status: {},
         total: {
+            color: theme.palette.maskColor.main,
             fontSize: 20,
             fontWeight: 700,
             lineHeight: '24px',
@@ -100,6 +102,7 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
             textOverflow: 'ellipsis',
         },
         message: {
+            color: theme.palette.maskColor.main,
             fontWeight: 700,
             lineHeight: '18px',
             whiteSpace: 'nowrap',
@@ -110,6 +113,7 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
             },
         },
         datetime: {
+            color: theme.palette.maskColor.main,
             position: 'absolute',
             right: theme.spacing(1.5),
             top: theme.spacing(1.5),

packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx

@@ -2,10 +2,10 @@ import { Trans } from '@lingui/react/macro'
 import { RoutePaths } from '@masknet/plugin-redpacket'
 import { ElementAnchor, EmptyStatus, LoadingStatus, RestorableScroll, useParamTab } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
-import { LoadingBase, makeStyles } from '@masknet/theme'
+import { LoadingBase, makeStyles, MaskLightTheme } from '@masknet/theme'
 import { useChainContext, useEnvironmentContext } from '@masknet/web3-hooks-base'
 import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
-import { Typography } from '@mui/material'
+import { ThemeProvider, Typography } from '@mui/material'
 import { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { HistoryTabs } from '../../types.js'
@@ -94,12 +94,15 @@ export function History() {
         <RestorableScroll key={currentHistoryTab} scrollKey={`redpacket-history-${currentHistoryTab}`}>
             <div className={classes.container}>
                 {histories.map((history) => (
-                    <RedPacketRecord
-                        key={history.redpacket_id}
-                        history={history as FireflyRedPacketAPI.RedPacketSentInfo}
-                        onlyView={currentHistoryTab === HistoryTabs.Claimed}
-                        onSelect={pluginID === NetworkPluginID.PLUGIN_SOLANA ? solanaSelectRedpacket : selectRedPacket}
-                    />
+                    <ThemeProvider key={history.redpacket_id} theme={MaskLightTheme}>
+                        <RedPacketRecord
+                            history={history as FireflyRedPacketAPI.RedPacketSentInfo}
+                            onlyView={currentHistoryTab === HistoryTabs.Claimed}
+                            onSelect={
+                                pluginID === NetworkPluginID.PLUGIN_SOLANA ? solanaSelectRedpacket : selectRedPacket
+                            }
+                        />
+                    </ThemeProvider>
                 ))}
                 {hasNextPage ?
                     <ElementAnchor height={30} callback={() => fetchNextPage()}>

packages/plugins/RedPacket/src/SiteAdaptor/views/HistoryDetail.tsx

@@ -1,5 +1,5 @@
 import { createIndicator, EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, MaskLightTheme } from '@masknet/theme'
 import { FireflyRedPacket } from '@masknet/web3-providers'
 import type { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import { skipToken, useInfiniteQuery } from '@tanstack/react-query'
@@ -11,6 +11,7 @@ import { RedPacketRecord } from '../components/RedPacketRecord.js'
 import { EmptyStatus, LoadingStatus } from '@masknet/shared'
 import { Trans } from '@lingui/react/macro'
 import { useEnvironmentContext } from '@masknet/web3-hooks-base'
+import { ThemeProvider } from '@mui/material'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -73,7 +74,9 @@ export function HistoryDetail() {
     return (
         <div className={classes.container}>
             {patchedHistory ?
-                <RedPacketRecord onlyView={!!isClaimed} history={patchedHistory} showDetailLink={false} />
+                <ThemeProvider theme={MaskLightTheme}>
+                    <RedPacketRecord onlyView={!!isClaimed} history={patchedHistory} showDetailLink={false} />
+                </ThemeProvider>
             :   null}
             {isLoading ?
                 <div className={cx(classes.interactions, classes.status)}>

packages/plugins/RedPacket/src/constants.ts

@@ -12,7 +12,7 @@ export const RED_PACKET_MIN_SHARES = 1
 export const RED_PACKET_MAX_SHARES = 255
 
 export const SOL_REDPACKET_MAX_SHARES = 200
-export const SOL_REDPACKET_CREATE_DEFAULT_GAS = '1000000'
+export const SOL_REDPACKET_CREATE_DEFAULT_GAS = '10000000'
 export const DEFAULT_DURATION = 60 * 60 * 24 // 24 hours
 export const enum RoutePaths {
     Create = '/create',

packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx

@@ -9,10 +9,7 @@ import {
     NETWORK_DESCRIPTORS as FLOW_NETWORK_DESCRIPTORS,
     ProviderType as FlowProviderType,
 } from '@masknet/web3-shared-flow'
-import {
-    NETWORK_DESCRIPTORS as SOL_NETWORK_DESCRIPTORS,
-    ProviderType as SolProviderType,
-} from '@masknet/web3-shared-solana'
+import { NETWORK_DESCRIPTORS as SOL_NETWORK_DESCRIPTORS } from '@masknet/web3-shared-solana'
 import { Box, List, ListItem, Typography } from '@mui/material'
 import { memo, useCallback, useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
@@ -123,13 +120,10 @@ export const PluginProviderRender = memo(function PluginProviderRender({
     )
 
     const getTips = useCallback((provider: Web3Helper.ProviderTypeAll) => {
-        if (provider === SolProviderType.Phantom) {
-            return <Trans>Phantom only supports the Solana chain.</Trans>
-        } else if (provider === FlowProviderType.Blocto) {
+        if (provider === FlowProviderType.Blocto) {
             return <Trans>Blocto only supports the Flow chain.</Trans>
         }
-
-        return <Trans>Only supports EVM chains, ETH, BNB chain, Polygon, Arb, Op, etc.</Trans>
+        return
     }, [])
 
     const getDisabled = useCallback(

packages/shared/src/UI/modals/SelectProviderModal/SelectProvider.tsx

@@ -1,15 +1,16 @@
-import { delay, getEnumAsArray } from '@masknet/kit'
+import { delay } from '@masknet/kit'
 import { getRegisteredWeb3Providers, MaskWalletProvider } from '@masknet/web3-providers'
 import { ConnectWalletModal, InjectedDialog } from '@masknet/shared'
 import { NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, MaskTabList } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { ProviderType } from '@masknet/web3-shared-evm'
-import { DialogContent } from '@mui/material'
+import { DialogContent, Tab } from '@mui/material'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { PluginProviderRender } from './PluginProviderRender.js'
 import { GuideDialog } from './GuideDialog.js'
 import { Trans } from '@lingui/react/macro'
+import { TabContext } from '@mui/lab'
 
 const useStyles = makeStyles()((theme) => ({
     dialog: {
@@ -39,7 +40,7 @@ export const SelectProvider = memo(function SelectProvider(props: SelectProvider
     const { classes } = useStyles()
     // Guiding provider
     const [provider, setProvider] = useState<Web3Helper.ProviderDescriptorAll>()
-
+    const [currentPluginID, setCurrentPluginID] = useState<NetworkPluginID>(NetworkPluginID.PLUGIN_EVM)
     const handleSelect = useCallback(
         async (network: Web3Helper.NetworkDescriptorAll, provider: Web3Helper.ProviderDescriptorAll) => {
             setProvider(undefined)
@@ -73,8 +74,8 @@ export const SelectProvider = memo(function SelectProvider(props: SelectProvider
     const providers = useMemo(() => {
         if (Sniffings.is_dashboard_page) return getRegisteredWeb3Providers(NetworkPluginID.PLUGIN_EVM)
         if (requiredSupportPluginID) return getRegisteredWeb3Providers(requiredSupportPluginID)
-        return getEnumAsArray(NetworkPluginID).flatMap((x) => getRegisteredWeb3Providers(x.value))
-    }, [requiredSupportPluginID])
+        return getRegisteredWeb3Providers(currentPluginID)
+    }, [requiredSupportPluginID, currentPluginID])
 
     if (provider) {
         return (
@@ -95,7 +96,18 @@ export const SelectProvider = memo(function SelectProvider(props: SelectProvider
             classes={{ paper: classes.dialog }}
             title={<Trans>Connect Wallet</Trans>}
             open={open}
-            onClose={onClose}>
+            onClose={onClose}
+            titleTabs={
+                <TabContext value={currentPluginID}>
+                    <MaskTabList
+                        variant="base"
+                        onChange={(e, value: NetworkPluginID) => setCurrentPluginID(value)}
+                        aria-label="Select Wallet">
+                        <Tab label={<Trans>EVM</Trans>} value={NetworkPluginID.PLUGIN_EVM} />
+                        <Tab label={<Trans>Solana</Trans>} value={NetworkPluginID.PLUGIN_SOLANA} />
+                    </MaskTabList>
+                </TabContext>
+            }>
             <DialogContent className={classes.content}>
                 <PluginProviderRender
                     providers={providers}