ev.stopPropagation()}>
@@ -107,7 +115,7 @@ export default function MaskPluginWrapper(props: PluginWrapperProps) {
- Mask Plugin {!personaConnectStatus.connected && pluginName ? `(${pluginName})` : ''}
+ Mask Plugin {!personaConnectStatus.connected && title ? `(${title})` : ''}
{name}
@@ -118,5 +126,28 @@ export default function MaskPluginWrapper(props: PluginWrapperProps) {
{personaConnectStatus.connected && children ?
)
- return = forwardRef(
+ (props, ref) => {
+ const { ID, name, publisher } = props.definition
+ const t = usePluginI18NField()
+ const [width, setWidth] = useState(undefined)
+ const [open, setOpen] = useState(false)
+ const [title, setTitle] = useState(undefined)
+
+ useImperativeHandle(ref, () => ({ setWidth, setWrap: setOpen, setWrapperName: setTitle }), [])
+
+ if (!open) return <>{props.children}
+ return (
+ (PollStatus.Inactive)
const [updatedPoll, setUpdatedPoll] = useState(undefined)
@@ -41,16 +40,15 @@ export default function PollsInPost(props: PollsInPostProps) {
}
}, [props.message.meta])
- const jsx = message
- ? renderWithPollMetadata(props.message.meta, (r) => {
- return (
-
- [ChainId.Mainnet, ChainId.Matic].includes(chainId)}>
-
-
-
+ [ChainId.Mainnet, ChainId.Matic].includes(chainId)}>
+
)
}
diff --git a/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx b/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
index 56bb70cd82d1..270adbb042bb 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
@@ -1,11 +1,9 @@
import { RefreshIcon } from '@masknet/icons'
import { DarkColor } from '@masknet/theme/constants'
import { usePoolTogetherConstants } from '@masknet/web3-shared-evm'
-import { Card, CardActions, CardContent, CircularProgress, Link, Paper, Tab, Tabs, Typography } from '@mui/material'
+import { Card, CardContent, CircularProgress, Paper, Tab, Tabs, Typography } from '@mui/material'
import { makeStyles } from '@masknet/theme'
import React, { useState, useEffect } from 'react'
-import { MaskTextIcon } from '../../../resources/MaskIcon'
-import { PoolTogetherIcon } from '../../../resources/PoolTogetherIcon'
import { useI18N } from '../../../utils/i18n-next-ui'
import { usePool, usePools } from '../hooks/usePools'
import type { Pool } from '../types'
@@ -60,42 +58,6 @@ const useStyles = makeStyles()((theme) => ({
minHeight: 'unset',
minWidth: 'unset',
},
- footer: {
- marginTop: -1, // merge duplicate borders
- zIndex: 1,
- position: 'relative',
- borderTop: `solid 1px ${theme.palette.divider}`,
- justifyContent: 'space-between',
- },
- footnote: {
- fontSize: 10,
- marginRight: theme.spacing(1),
- },
- footLink: {
- cursor: 'pointer',
- marginRight: theme.spacing(0.5),
- '&:last-child': {
- marginRight: 0,
- },
- },
- footMenu: {
- color: theme.palette.text.secondary,
- fontSize: 10,
- display: 'flex',
- alignItems: 'center',
- },
- footName: {
- marginLeft: theme.spacing(0.5),
- },
- mask: {
- width: 40,
- height: 10,
- },
- pooltogether: {
- height: 10,
- width: 10,
- marginLeft: theme.spacing(0.5),
- },
progress: {
bottom: theme.spacing(1),
right: theme.spacing(1),
@@ -175,31 +137,6 @@ export function PoolTogetherView(props: PoolTogetherViewProps) {
{tabIndex === 1 ?
-
- {t('plugin_powered_by')}
-
-
-
- {t('supported_by')}
-
-
-
)
}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
index acdb3910cf82..acc345e78511 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
@@ -1,4 +1,4 @@
-import type { Plugin } from '@masknet/plugin-infra'
+import { Plugin, usePluginWrapper } from '@masknet/plugin-infra'
import {
ChainId,
EthereumTokenType,
@@ -7,7 +7,6 @@ import {
getChainIdFromName,
useERC20TokenDetailed,
} from '@masknet/web3-shared-evm'
-import MaskPluginWrapper from '../../MaskPluginWrapper'
import { base } from '../base'
import { RedPacketMetaKey, RedPacketNftMetaKey } from '../constants'
import {
@@ -22,26 +21,30 @@ import { RedPacketInPost } from './RedPacketInPost'
import { RedPacketNftInPost } from './RedPacketNftInPost'
import { RedPacketIcon } from '@masknet/icons'
+function Render(props: React.PropsWithChildren<{ name: string }>) {
+ usePluginWrapper(true, { name: props.name })
+ return <>{props.children}
+}
const sns: Plugin.SNSAdaptor.Definition = {
...base,
init(signal) {},
DecryptedInspector(props) {
if (RedPacketMetadataReader(props.message.meta).ok)
return (
-
+
{renderWithRedPacketMetadata(props.message.meta, (r) => (
+
)
if (RedPacketNftMetadataReader(props.message.meta).ok)
return (
-
+
{renderWithRedPacketNftMetadata(props.message.meta, (r) => (
+
)
return null
},
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/index.tsx
index 0324b7d1d693..a01dc5eaea71 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/index.tsx
@@ -1,9 +1,8 @@
-import type { Plugin } from '@masknet/plugin-infra'
+import { Plugin, usePluginWrapper } from '@masknet/plugin-infra'
import { base } from '../base'
import { useMemo, Suspense } from 'react'
import { Skeleton } from '@mui/material'
import { makeStyles } from '@masknet/theme'
-import MaskPluginWrapper from '../../MaskPluginWrapper'
import { PostInspector } from './PostInspector'
import { usePostInfoDetails } from '../../../components/DataSource/usePostInfo'
import { extractTextFromTypedMessage, parseURL } from '@masknet/shared-base'
@@ -24,24 +23,23 @@ const isSnapshotURL = (x: string): boolean =>
function Renderer({ url }: { url: string }) {
const { classes } = useStyles()
+ usePluginWrapper(true)
+ const fallbackUI = Array.from({ length: 2 })
+ .fill(0)
+ .map((_, i) => (
+
- (
-
-
+
+
)
}
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeFooter.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeFooter.tsx
index f7d5d3407af5..d28894bb2c06 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeFooter.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeFooter.tsx
@@ -1,9 +1,8 @@
import type { DataProvider } from '@masknet/public-api'
import { makeStyles, useStylesExtends } from '@masknet/theme'
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
-import { CardActions, Link, Typography } from '@mui/material'
+import { CardActions, Typography } from '@mui/material'
import type { FC } from 'react'
-import { MaskTextIcon } from '../../../../resources/MaskIcon'
import { useI18N } from '../../../../utils'
import { resolveDataProviderName } from '../../pipes'
import { DataProviderIcon } from './DataProviderIcon'
@@ -19,13 +18,6 @@ const useStyles = makeStyles()((theme) => {
fontSize: 10,
marginRight: theme.spacing(0.5),
},
- footLink: {
- cursor: 'pointer',
- marginRight: theme.spacing(0.5),
- '&:last-child': {
- marginRight: 0,
- },
- },
footMenu: {
color: theme.palette.text.secondary,
fontSize: 10,
@@ -35,10 +27,6 @@ const useStyles = makeStyles()((theme) => {
footName: {
marginLeft: theme.spacing(0.5),
},
- mask: {
- width: 40,
- height: 10,
- },
}
})
@@ -55,18 +43,8 @@ export const TradeFooter: FC = (props) => {
const classes = useStylesExtends(useStyles(), props)
return (
-
- {t('plugin_powered_by')}
-
-
+
+ {/* actions on the */}
{showDataProviderIcon ? (
{t('plugin_trader_data_source')}
diff --git a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
index 38062c903aa6..55e5d8f836e4 100644
--- a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
+++ b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
@@ -1,13 +1,13 @@
import type { TypedMessage } from '@masknet/shared-base'
import { Button, Typography } from '@mui/material'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
import { useI18N } from '../../../utils'
-import MaskPluginWrapper from '../../MaskPluginWrapper'
import { paywallUrl } from '../constants'
import { renderWithUnlockProtocolMetadata, UnlockProtocolMetadataReader } from '../helpers'
import { useAccount, useChainId } from '@masknet/web3-shared-evm'
import { PluginUnlockProtocolRPC } from '../messages'
import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { usePluginWrapper } from '@masknet/plugin-infra'
interface UnlockProtocolInPostProps {
message: TypedMessage
@@ -62,13 +62,11 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
const jsx = message
? renderWithUnlockProtocolMetadata(props.message.meta, (r) => {
return (
- <>
-
-
- {content}
-
-
-
+
+
+ {content}
+
+
)
})
: null
@@ -78,7 +76,7 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
const jsx = message
? renderWithUnlockProtocolMetadata(props.message.meta, (r) => {
return (
-
+
"{t('plugin_unlockprotocol_no_access')}"
"{t('plugin_unlockprotocol_buy_lock_alert')}"
@@ -86,7 +84,7 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
-
+
)
})
: null
@@ -96,12 +94,12 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
const jsx = message
? renderWithUnlockProtocolMetadata(props.message.meta, (r) => {
return (
-
+
"{t('loading')}"
-
+
)
})
: null
@@ -109,3 +107,8 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
return <>{jsx}
}
}
+
+function Render(props: React.PropsWithChildren<{}>) {
+ usePluginWrapper(true, { width: 300 })
+ return <>{props.children}
+}
diff --git a/packages/mask/src/plugins/dHEDGE/SNSAdaptor/index.tsx b/packages/mask/src/plugins/dHEDGE/SNSAdaptor/index.tsx
index 017740a03739..44ce0c781396 100644
--- a/packages/mask/src/plugins/dHEDGE/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/dHEDGE/SNSAdaptor/index.tsx
@@ -1,9 +1,7 @@
-import { Suspense, useMemo } from 'react'
-import { Plugin, usePostInfoDetails } from '@masknet/plugin-infra'
+import { useMemo } from 'react'
+import { Plugin, usePostInfoDetails, usePluginWrapper } from '@masknet/plugin-infra'
import { extractTextFromTypedMessage, parseURL } from '@masknet/shared-base'
-import { SnackbarContent } from '@mui/material'
import { base } from '../base'
-import MaskPluginWrapper from '../../MaskPluginWrapper'
import { PoolView } from '../UI/PoolView'
import { InvestDialog } from '../UI/InvestDialog'
import { createMatchLink } from '../constants'
@@ -49,11 +47,6 @@ const sns: Plugin.SNSAdaptor.Definition = {
export default sns
function Renderer(props: React.PropsWithChildren<{ link: string; address: string }>) {
- return (
-
-
- )
+ usePluginWrapper(true)
+ return
)
diff --git a/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx b/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
index 7d0e0d4663ef..b134d31ee75d 100644
--- a/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
+++ b/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
@@ -1,9 +1,8 @@
import { RefreshIcon } from '@masknet/icons'
import { useChainId } from '@masknet/web3-shared-evm'
-import { Card, CardActions, CardContent, CardHeader, Link, Paper, Tab, Tabs, Typography } from '@mui/material'
+import { Card, CardContent, CardHeader, Paper, Tab, Tabs, Typography } from '@mui/material'
import { makeStyles } from '@masknet/theme'
-import React, { useState } from 'react'
-import { MaskTextIcon } from '../../../resources/MaskIcon'
+import { useState } from 'react'
import { useI18N } from '../../../utils/i18n-next-ui'
import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
import { useFetchPool, usePoolDepositAssets } from '../hooks/usePool'
@@ -53,41 +52,6 @@ const useStyles = makeStyles()((theme) => ({
minHeight: 'unset',
minWidth: 'unset',
},
- footer: {
- marginTop: -1, // merge duplicate borders
- zIndex: 1,
- position: 'relative',
- borderTop: `solid 1px ${theme.palette.divider}`,
- justifyContent: 'space-between',
- },
- footnote: {
- fontSize: 10,
- marginRight: theme.spacing(1),
- },
- footLink: {
- cursor: 'pointer',
- marginRight: theme.spacing(0.5),
- '&:last-child': {
- marginRight: 0,
- },
- },
- footMenu: {
- color: theme.palette.text.secondary,
- fontSize: 10,
- display: 'flex',
- alignItems: 'center',
- },
- footName: {
- marginLeft: theme.spacing(0.5),
- },
- mask: {
- width: 40,
- height: 10,
- },
- dhedge: {
- height: 10,
- margin: theme.spacing(0, 0.5),
- },
}))
interface PoolViewProps {
@@ -154,7 +118,7 @@ export function PoolView(props: PoolViewProps) {
textColor="primary"
variant="fullWidth"
value={tabIndex}
- onChange={(ev: React.ChangeEvent<{}>, newValue: number) => setTabIndex(newValue)}
+ onChange={(_, newValue: number) => setTabIndex(newValue)}
TabIndicatorProps={{
style: {
display: 'none',
@@ -167,33 +131,6 @@ export function PoolView(props: PoolViewProps) {
{tabIndex === 1 ? {children}
: null}
-
-
-
- )
- })
- : null
- return <>{jsx}
+ return renderWithPollMetadata(props.message.meta, (r) => {
+ return
+
+ )
}
diff --git a/packages/mask/src/plugins/PoolTogether/SNSAdaptor/index.tsx b/packages/mask/src/plugins/PoolTogether/SNSAdaptor/index.tsx
index 3afd64bb8b58..c642cb0d0ccd 100644
--- a/packages/mask/src/plugins/PoolTogether/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/PoolTogether/SNSAdaptor/index.tsx
@@ -1,10 +1,8 @@
-import { Suspense, useMemo } from 'react'
-import { Plugin, usePostInfoDetails } from '@masknet/plugin-infra'
+import { useMemo } from 'react'
+import { Plugin, usePluginWrapper, usePostInfoDetails } from '@masknet/plugin-infra'
import { extractTextFromTypedMessage, parseURL } from '@masknet/shared-base'
import { ChainId } from '@masknet/web3-shared-evm'
-import { SnackbarContent } from '@mui/material'
import { base } from '../base'
-import MaskPluginWrapper from '../../MaskPluginWrapper'
import { DepositDialog } from '../UI/DepositDialog'
import { URL_PATTERN } from '../constants'
import { PoolTogetherView } from '../UI/PoolTogetherView'
@@ -39,15 +37,12 @@ const sns: Plugin.SNSAdaptor.Definition = {
export default sns
function Renderer(props: React.PropsWithChildren<{ url: string }>) {
+ usePluginWrapper(true)
return (
-
-
-
-
-
-
- {cleanDescription.length > POOL_DESCRIPTION_LIMIT ? (
- setExpanded(!expanded)}>
- {expanded ? (
-
+
+
+ {cleanDescription.length > POOL_DESCRIPTION_LIMIT ? (
+ setExpanded(!expanded)}>
+ {expanded ? (
+
+ ) : null}
+
+
) : null}
+
+
- ) : null}
-
+