import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry' ; import { Box , Card , CircularProgress , Typography , Paper } from '@mui/material' ; import { useStylesExtends , makeStyles } from '@masknet/theme' ; import { ImageIcon } from '@masknet/shared' ; import { NetworkPluginID , useProviderDescriptor } from '@masknet/plugin-infra' ; import { ProviderType , resolveProviderName } from '@masknet/web3-shared-evm' ; import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton' ; import { useI18N } from '../../../../utils' ; const useStyles = makeStyles ( ) ( ( theme ) => ( { content : { padding : theme . spacing ( 2 , 4 , 3 ) , borderRadius : 8 , backgroundColor : theme . palette . background . default , } , error : { fontSize : 12 , paddingTop : theme . spacing ( 0.5 ) , paddingRight : theme . spacing ( 1 ) , } , } ) ) ; export interface ConnectionProgressProps extends withClasses < never > { providerType : ProviderType ; connection : AsyncStateRetry < true > ; } export function ConnectionProgress ( props ) { const { providerType , connection } = props ; const { value : connected , loading , error , retry } = connection ; const { t } = useI18N ( ) ; const classes = useStylesExtends ( useStyles ( ) , props ) ; const providerDescriptor = useProviderDescriptor ( providerType , NetworkPluginID . PLUGIN_EVM ) ; return ( < Paper elevation = { 0 } > < Card className = { `${ classes . content } dashboard-style` } elevation = { 0 } > < Box display = "flex" alignItems = "center" > < ImageIcon icon = { providerDescriptor ?. icon } /> < Box display = "flex" flex = { 1 } flexDirection = "column" sx = { { marginLeft : 2 } } > { connected ? ( < Typography > { t ( 'plugin_wallet_connected_to' ) } { resolveProviderName ( providerType ) } < /Typography>) : (<Typography> { t ( 'plugin_wallet_connect_to' ) } { resolveProviderName ( providerType ) } < /Typography>)} { loading ? ( < Box display = "flex" alignItems = "center" > < CircularProgress size = { 14 } color = "primary" sx = { { marginRight : 1 } } /> < Typography variant = "body2" > { t ( 'initializing' ) } < /Typography> < /Box>) : null} { ! loading && error ? ( < Typography className = { classes . error } color = "red" variant = "body2" > { error . message || `Failed to connect to ${ resolveProviderName ( providerType ) }.` } < /Typography>) : null} < /Box> { ! connected && error ? ( < ActionButton color = "primary" variant = "contained" onClick = { retry } disabled = { loading } > { t ( 'retry' ) } < /ActionButton>) : null} < /Box> < /Card> < /Paper>); }