feat: popup nextid

packages/icons/brands/Blocto.tsx

@@ -0,0 +1,49 @@
+import { createIcon } from '../utils'
+import type { SvgIcon } from '@mui/material'
+
+export const BloctoIcon: typeof SvgIcon = createIcon(
+    'Blocto',
+    <svg width="43" height="50" viewBox="0 0 43 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#filter0_bd_270_89338)">
+            <path
+                d="M28.9443 22.396C29.8924 22.396 30.6773 23.1712 30.4996 24.1025C30.3837 24.7102 30.2058 25.3059 29.9679 25.8802C29.5104 26.9849 28.8397 27.9885 27.9943 28.834C27.1488 29.6794 26.1451 30.3501 25.0405 30.8076C23.9359 31.2652 22.7519 31.5007 21.5563 31.5007C20.3606 31.5007 19.1767 31.2652 18.072 30.8076C16.9674 30.3501 15.9637 29.6794 15.1183 28.834C14.2728 27.9885 13.6022 26.9849 13.1446 25.8802C12.9067 25.3059 12.7289 24.7102 12.6129 24.1025C12.4352 23.1712 13.2201 22.396 14.1682 22.396L21.5563 22.396H28.9443Z"
+                fill="#AFD8F7"
+            />
+            <path
+                d="M21.556 14.2218C21.556 13.2737 22.3313 12.4888 23.2626 12.6665C23.8702 12.7825 24.466 12.9603 25.0403 13.1982C26.1449 13.6558 27.1486 14.3264 27.994 15.1719C28.8395 16.0173 29.5101 17.021 29.9677 18.1256C30.2056 18.6999 30.3834 19.2957 30.4994 19.9034C30.6771 20.8346 29.8922 21.6099 28.9441 21.6099L24.9893 21.6099C23.0932 21.6099 21.556 20.0727 21.556 18.1766L21.556 14.2218Z"
+                fill="#3485C4"
+            />
+            <path
+                d="M12.4753 6.8142C12.4753 6.64067 12.616 6.5 12.7895 6.5L-nan -nanL-nan -nanL12.7895 6.5C17.0844 6.5 20.5661 9.98169 20.5661 14.2766V21.0231C20.5661 21.3472 20.3034 21.6099 19.9793 21.6099H14.192C13.2439 21.6099 12.4753 20.8413 12.4753 19.8932V6.8142Z"
+                fill="#182A71"
+            />
+        </g>
+        <defs>
+            <filter
+                id="filter0_bd_270_89338"
+                x="-9.5"
+                y="-12"
+                width="62"
+                height="64"
+                filterUnits="userSpaceOnUse"
+                colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feGaussianBlur in="BackgroundImage" stdDeviation="8" />
+                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_270_89338" />
+                <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                />
+                <feOffset dy="6" />
+                <feGaussianBlur stdDeviation="6" />
+                <feComposite in2="hardAlpha" operator="out" />
+                <feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.521569 0 0 0 0 0.768627 0 0 0 0.2 0" />
+                <feBlend mode="normal" in2="effect1_backgroundBlur_270_89338" result="effect2_dropShadow_270_89338" />
+                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_270_89338" result="shape" />
+            </filter>
+        </defs>
+    </svg>,
+    '0 0 43 50',
+)

packages/icons/brands/index.ts

@@ -12,3 +12,4 @@ export * from './MaskGrey'
 export * from './Discord'
 export * from './MaskBanner'
 export * from './MaskPlaceholder'
+export * from './Blocto'

packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx

@@ -0,0 +1,216 @@
+import { useCallback } from 'react'
+import { ExternalLink } from 'react-feather'
+import classNames from 'classnames'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import { Button, Link, Typography } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import {
+    useAccount,
+    useWeb3State,
+    useChainId,
+    useNetworkDescriptor,
+    useProviderDescriptor,
+    useProviderType,
+    useReverseAddress,
+    useWallet,
+} from '@masknet/plugin-infra/web3'
+import { FormattedAddress, WalletIcon } from '@masknet/shared'
+import { WalletMessages } from '../../../plugins/Wallet/messages'
+import { useI18N } from '../../../utils'
+import Services from '../../../extension/service'
+import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
+
+const useStyles = makeStyles()((theme) => ({
+    currentAccount: {
+        padding: '12px 8px',
+        width: '100%',
+        background: '#fff',
+        boxSizing: 'border-box',
+        marginBottom: theme.spacing(2),
+        display: 'flex',
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+
+    accountInfo: {
+        flexGrow: 1,
+        marginLeft: theme.spacing(1),
+    },
+    accountName: {
+        fontSize: 16,
+        marginRight: 4,
+        fontWeight: 'bold',
+    },
+    infoRow: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    actionButton: {
+        fontSize: 14,
+        marginLeft: theme.spacing(1),
+        padding: '8px 12px',
+        fontWeight: 'bold',
+        background: 'rgba(15, 20, 25, 1)',
+        color: '#fff',
+        minWidth: 70,
+        borderRadius: '6px',
+    },
+    address: {
+        fontSize: 12,
+        marginRight: theme.spacing(1),
+        display: 'inline-block',
+        color: theme.palette.text.secondary,
+    },
+    link: {
+        color: theme.palette.text.primary,
+        fontSize: 14,
+        display: 'flex',
+        alignItems: 'center',
+    },
+    linkIcon: {
+        marginRight: theme.spacing(1),
+    },
+    twitterProviderBorder: {
+        width: 14,
+        height: 14,
+    },
+    connectButtonWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: theme.spacing(2, 0),
+    },
+    domain: {
+        fontSize: 16,
+        lineHeight: '18px',
+        marginLeft: 6,
+        padding: 4,
+        borderRadius: 8,
+        backgroundColor: '#ffffff',
+        color: theme.palette.common.black,
+    },
+}))
+interface CurrentWalletBox {
+    isDashboard?: boolean
+    disableChange?: boolean
+}
+export function CurrentWalletBox(props: CurrentWalletBox) {
+    const { t } = useI18N()
+    const { classes } = useStyles()
+    const chainId = useChainId()
+    const account = useAccount()
+    const wallet = useWallet()
+    const providerType = useProviderType()
+    const providerDescriptor = useProviderDescriptor()
+    const networkDescriptor = useNetworkDescriptor()
+    const { Utils } = useWeb3State() ?? {}
+
+    const { value: domain } = useReverseAddress(account)
+
+    // #region change provider
+    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
+        WalletMessages.events.selectProviderDialogUpdated,
+    )
+    // #endregion
+
+    // #region walletconnect
+    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
+        WalletMessages.events.walletConnectQRCodeDialogUpdated,
+    )
+    // #endregion
+
+    const onDisconnect = useCallback(async () => {
+        switch (providerType) {
+            case ProviderType.WalletConnect:
+                setWalletConnectDialog({
+                    open: true,
+                    uri: await Services.Ethereum.createConnectionURI(),
+                })
+                break
+            case ProviderType.Fortmatic:
+                await Services.Ethereum.disconnectFortmatic(chainId)
+                break
+        }
+    }, [chainId, providerType, setWalletConnectDialog])
+
+    const onChange = useCallback(() => {
+        openSelectProviderDialog()
+    }, [openSelectProviderDialog])
+
+    return account ? (
+        <section className={classNames(classes.currentAccount)}>
+            <WalletIcon
+                size={48}
+                badgeSize={16}
+                networkIcon={providerDescriptor?.icon}
+                providerIcon={networkDescriptor?.icon}
+            />
+            <div className={classes.accountInfo}>
+                <div className={classes.infoRow} style={{ marginBottom: 3 }}>
+                    {providerType !== ProviderType.MaskWallet ? (
+                        <Typography className={classes.accountName}>
+                            {domain && Utils?.formatDomainName
+                                ? Utils.formatDomainName(domain)
+                                : providerDescriptor?.name}
+                        </Typography>
+                    ) : (
+                        <>
+                            <Typography className={classes.accountName}>
+                                {wallet?.name ?? providerDescriptor?.name}
+                            </Typography>
+                            {domain && Utils?.formatDomainName ? (
+                                <Typography className={classes.domain}>{Utils.formatDomainName(domain)}</Typography>
+                            ) : null}
+                        </>
+                    )}
+                </div>
+                <div className={classes.infoRow}>
+                    <Typography className={classes.address} variant="body2" title={account}>
+                        <FormattedAddress address={account} size={4} formatter={Utils?.formatAddress} />
+                    </Typography>
+
+                    <Link
+                        className={classes.link}
+                        href={Utils?.resolveAddressLink?.(chainId, account) ?? ''}
+                        target="_blank"
+                        title={t('plugin_wallet_view_on_explorer')}
+                        rel="noopener noreferrer">
+                        <ExternalLink className={classes.linkIcon} size={14} />
+                    </Link>
+                </div>
+            </div>
+            {!props.disableChange && (
+                <section>
+                    {providerType === ProviderType.WalletConnect || providerType === ProviderType.Fortmatic ? (
+                        <ActionButtonPromise
+                            className={classes.actionButton}
+                            size="small"
+                            variant="contained"
+                            init={t('wallet_status_button_disconnect')}
+                            waiting={t('wallet_status_button_disconnecting')}
+                            failed={t('failed')}
+                            complete={t('done')}
+                            executor={onDisconnect}
+                            completeIcon={<></>}
+                            failIcon={<></>}
+                        />
+                    ) : null}
+                    <Button
+                        className={classNames(classes.actionButton)}
+                        variant="contained"
+                        size="small"
+                        onClick={onChange}>
+                        {t('wallet_status_button_change')}
+                    </Button>
+                </section>
+            )}
+        </section>
+    ) : (
+        <section className={classes.connectButtonWrapper}>
+            <Button className={classNames(classes.actionButton)} variant="contained" size="small" onClick={onChange}>
+                {t('plugin_wallet_on_connect')}
+            </Button>
+        </section>
+    )
+}