+
+ )
+}
diff --git a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
index c917be2bf891..5d09af03a749 100644
--- a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
+++ b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
@@ -1,7 +1,7 @@
import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
const PluginRenderer = createInjectHooksRenderer(
- useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode,
+ useActivatedPluginsSNSAdaptor.visibility.useAnyMode,
(x) => x.SearchResultBox,
)
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
index c0a8bd58ef41..7a227a1f65d2 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
@@ -7,17 +7,12 @@ import type { Project } from '../types'
const useStyles = makeStyles()((theme) => {
return {
- root: {
- marginLeft: theme.spacing(-0.5),
- marginRight: theme.spacing(-0.5),
- marginTop: theme.spacing(1),
- },
+ root: {},
content: {
padding: theme.spacing(0),
},
button: {
flex: 1,
- margin: `${theme.spacing(0)} ${theme.spacing(0.5)}`,
},
}
})
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
index 581c3601a1bb..b1fe65404fac 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
@@ -1,14 +1,15 @@
import { useI18N } from '../../../utils'
-import { Tab, Tabs, Paper, Card, CardHeader, CardContent, Link, Typography, Avatar } from '@mui/material'
+import { Tab, Tabs, Paper, Card, CardHeader, CardContent, Link, Typography, Avatar, Box } from '@mui/material'
import { useState } from 'react'
import { makeStyles } from '@masknet/theme'
import { CollectionView } from './CollectionView'
import { DetailsView } from './DetailsView'
-import { formatWeiToEther, useChainId } from '@masknet/web3-shared-evm'
+import { ChainId, formatWeiToEther, useChainId } from '@masknet/web3-shared-evm'
import { useFetchProject } from '../hooks/useProject'
import { ActionBar } from './ActionBar'
import { resolveProjectLinkOnArtBlocks, resolveUserLinkOnArtBlocks } from '../pipes'
import { ArtBlocksLogoUrl } from '../constants'
+import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
const useStyles = makeStyles()((theme) => {
return {
@@ -53,6 +54,7 @@ const useStyles = makeStyles()((theme) => {
interface CollectibleProps {
projectId: string
+ chainId?: ChainId
}
export function Collectible(props: CollectibleProps) {
@@ -129,7 +131,11 @@ export function Collectible(props: CollectibleProps) {
- 
-
-
-
- {grant.title}
-
- {grant.verified ?
-
-
- {grant.description}
-
-
-
-
-
- {t('plugin_gitcoin_last_updated')} {grant.last_update_natural}
-
+ <>
+
+
-
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
)
}
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
index 440dac162f56..956f016b34d3 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
@@ -10,7 +10,6 @@ import { Trans } from 'react-i18next'
import { base } from '../base'
import { PLUGIN_NAME, PLUGIN_META_KEY } from '../constants'
import { DonateDialog } from './DonateDialog'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
const isGitcoin = (x: string): boolean => /^https:\/\/gitcoin.co\/grants\/\d+/.test(x)
const isGitCoinSupported = (chainId: ChainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)
@@ -55,11 +54,7 @@ function Renderer(props: React.PropsWithChildren<{ url: string }>) {
const [id = ''] = props.url.match(/\d+/) ?? []
const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
usePluginWrapper(true)
- return (
-
-
- )
+ return ()((theme, props) => ({
root: {
+ width: '100%',
position: 'relative',
color: theme.palette.common.white,
flexDirection: 'column',
@@ -68,17 +72,14 @@ const useStyles = makeStyles()((theme, props) => ({
backgroundRepeat: 'no-repeat',
backgroundColor: '#FF5238',
borderRadius: theme.spacing(1),
- paddingLeft: theme.spacing(4),
- paddingRight: theme.spacing(1),
- paddingTop: theme.spacing(4),
- paddingBottom: theme.spacing(2),
+ padding: theme.spacing(2),
},
header: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'end',
width: props.snsId === EnhanceableSite.Facebook ? '98%' : '100%',
- maxWidth: props.snsId === EnhanceableSite.Facebook ? 'auto' : 470,
+ maxWidth: props.snsId === EnhanceableSite.Facebook ? 'auto' : '100%',
},
title: {
fontSize: props.titleLength! > 31 ? '1.3rem' : '1.6rem',
@@ -151,10 +152,22 @@ const useStyles = makeStyles()((theme, props) => ({
},
},
actionFooter: {
- marginTop: theme.spacing(1),
+ padding: 0,
+ display: 'flex',
},
actionButton: {
width: '100%',
+ backgroundColor: theme.palette.maskColor.dark,
+ color: 'white',
+ fontSize: 14,
+ paddingTop: 10,
+ fontWeight: 700,
+ margin: '0 !important',
+ paddingBottom: 10,
+ lineHeight: '20px',
+ '&:hover': {
+ backgroundColor: theme.palette.maskColor.dark,
+ },
},
textProviderErr: {
color: '#EB5757',
@@ -185,6 +198,10 @@ const useStyles = makeStyles()((theme, props) => ({
marginTop: 16,
color: '#F4212E',
},
+ grid: {
+ width: '100%',
+ margin: 0,
+ },
}))
// #region token item
@@ -266,7 +283,6 @@ export function ITO(props: ITO_Props) {
const { listOfStatus, startTime, unlockTime, isUnlocked, hasLockTime, endTime, qualificationAddress } =
availabilityComputed
// #endregion
-
const total = new BigNumber(payload_total)
const total_remaining = new BigNumber(availability?.remaining ?? '0')
const sold = total.minus(total_remaining)
@@ -575,7 +591,7 @@ export function ITO(props: ITO_Props) {
const FooterBuyerWithLockTimeButton = useMemo(
() => (
-
+
{(() => {
if (isUnlocked) return FooterBuyerLockedButton
@@ -590,7 +606,7 @@ export function ITO(props: ITO_Props) {
)
})()}
-
+
),
[noRemain, listOfStatus, isUnlocked],
)
@@ -599,21 +615,18 @@ export function ITO(props: ITO_Props) {
() => (
+
-
-
- {t('plugin_gitcoin_by')}
+
-
+
+ {grant.title}
-
- {grant.admin_profile.handle}
+ {grant.verified ?
+
+
+ {grant.description}
-
+
+
+
+ {t('plugin_gitcoin_last_updated')} {grant.last_update_natural}
+
+
+
+
+ {t('plugin_gitcoin_by')}
+
+
+ {grant.admin_profile.handle}
+
+
+
{(() => {
- if (hasLockTime)
- return (
-
- {FooterBuyerWithLockTimeButton}
-
- )
+ if (hasLockTime) return FooterBuyerWithLockTimeButton
if (canWithdraw) {
return (
-
- {t('plugin_ito_withdraw')}
-
+
+
+ {t('plugin_ito_withdraw')}
+
+
)
}
return null
@@ -624,8 +637,11 @@ export function ITO(props: ITO_Props) {
)
return (
-
-
+ <>
+
{title}
@@ -699,14 +715,16 @@ export function ITO(props: ITO_Props) {
if (!isRegionAllow) {
return (
- undefined}
- variant="contained"
- size="large"
- className={classes.actionButton}>
- {t('plugin_ito_region_ban')}
-
+
+ undefined}
+ variant="contained"
+ size="large"
+ className={classes.actionButton}>
+ {t('plugin_ito_region_ban')}
+
+
)
}
@@ -720,26 +738,16 @@ export function ITO(props: ITO_Props) {
if (loadingTradeInfo || loadingAvailability) {
return (
- undefined}
- variant="contained"
- size="large"
- className={classes.actionButton}>
- {t('plugin_ito_loading')}
-
- )
- }
-
- if (!account || !chainIdValid) {
- return (
-
- {t('plugin_wallet_connect_a_wallet')}
-
+
+ undefined}
+ variant="contained"
+ size="large"
+ className={classes.actionButton}>
+ {t('plugin_ito_loading')}
+
+
)
}
@@ -747,13 +755,15 @@ export function ITO(props: ITO_Props) {
if (canWithdraw) {
return (
-
- {t('plugin_ito_withdraw')}
-
+
+
+ {t('plugin_ito_withdraw')}
+
+
)
}
@@ -762,20 +772,41 @@ export function ITO(props: ITO_Props) {
!isNativeTokenAddress(qualificationAddress)
) {
return (
-
- {loadingIfQualified
- ? t('plugin_ito_qualification_loading')
- : !ifQualified
- ? t('plugin_ito_qualification_failed')
- : !(ifQualified as Qual_V2).qualified
- ? startCase((ifQualified as Qual_V2).errorMsg)
- : null}
-
+ <>
+
+
+
+
+
+ {loadingIfQualified
+ ? t('plugin_ito_qualification_loading')
+ : !ifQualified
+ ? t('plugin_ito_qualification_failed')
+ : !(ifQualified as Qual_V2).qualified
+ ? startCase((ifQualified as Qual_V2).errorMsg)
+ : null}
+
+
+
+
+
)
}
@@ -783,8 +814,8 @@ export function ITO(props: ITO_Props) {
if (listOfStatus.includes(ITO_Status.waited)) {
return (
-
-
+ <>
+
{t('plugin_ito_unlock_in_advance')}
-
+
{shareText ? (
-
+
+
) : undefined}
-
+
)
}
if (listOfStatus.includes(ITO_Status.started)) {
return (
-
-
+ <>
+
{t('plugin_ito_enter')}
-
-
+
+
-
+
+
)
}
@@ -849,7 +882,7 @@ export function ITO(props: ITO_Props) {
onClose={() => setOpenClaimDialog(false)}
retryPayload={retryITOCard}
/>
-
+
)
}
@@ -858,7 +891,7 @@ export function ITO_Loading() {
const PoolBackground = getAssetAsBlobURL(new URL('../assets/pool-loading-background.jpg', import.meta.url))
const { classes } = useStyles({})
return (
-
+
),
),
[JSON.stringify(_payload.exchange_tokens)],
@@ -65,7 +67,7 @@ export function PostInspector(props: PostInspectorProps) {
value: exchangeTokensDetailed,
loading: loadingExchangeTokensDetailed,
retry: retryExchangeTokensDetailed,
- } = useFungibleTokensDetailed(exchangeFungibleTokens)
+ } = useFungibleTokensDetailed(exchangeFungibleTokens, _payload.chain_id)
const retry = useCallback(() => {
retryPayload()
@@ -97,9 +99,5 @@ export function PostInspector(props: PostInspectorProps) {
const theme = useClassicMaskSNSPluginTheme()
- return (
-
- {renderITO()}
-
- )
+ return {renderITO()}
}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
index 3e738a0cf28f..360546fee49f 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
@@ -1,16 +1,17 @@
import { useAsyncRetry } from 'react-use'
-import { useAccount, useITOConstants, useChainId, isSameAddress } from '@masknet/web3-shared-evm'
+import { useAccount, useITOConstants, useChainId, isSameAddress, ChainId } from '@masknet/web3-shared-evm'
import { checkAvailability } from '../../Worker/apis/checkAvailability'
-export function useAvailability(id: string, contract_address: string) {
+export function useAvailability(id: string, contract_address: string, from?: string, chainId?: ChainId) {
const account = useAccount()
- const chainId = useChainId()
+ const fromAccount = from ?? account
+ const _chainId = useChainId()
const { ITO_CONTRACT_ADDRESS } = useITOConstants()
const isV1 = isSameAddress(contract_address ?? '', ITO_CONTRACT_ADDRESS)
return useAsyncRetry(async () => {
if (!id || !contract_address) return null
- return checkAvailability(id, account, contract_address, chainId, isV1)
- }, [id, account])
+ return checkAvailability(id, account ?? fromAccount, contract_address, chainId ?? _chainId, isV1)
+ }, [id, account, fromAccount, _chainId, chainId])
}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
index a1da99b9af88..d8df7c1a0b77 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
@@ -9,7 +9,12 @@ import { ITO_CONTRACT_BASE_TIMESTAMP } from '../../constants'
export function useAvailabilityComputed(payload: JSON_PayloadInMask | JSON_PayloadFromChain) {
const chainId = useChainId()
const { DEFAULT_QUALIFICATION2_ADDRESS } = useITOConstants()
- const asyncResult = useAvailability(payload.pid, payload.contract_address)
+ const asyncResult = useAvailability(
+ payload.pid,
+ payload.contract_address,
+ payload.seller.address,
+ payload.chain_id ?? chainId,
+ )
const { value: availability, loading: loadingITO } = asyncResult
const qualificationAddress =
payload.qualification_address ?? availability?.qualification_addr ?? DEFAULT_QUALIFICATION2_ADDRESS
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts
index 602c0c61b636..d7b655333501 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts
@@ -1,11 +1,12 @@
import { useAsyncRetry } from 'react-use'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/web3-shared-evm'
import type { Qualification } from '@masknet/web3-contracts/types/Qualification'
import type { Qualification2 } from '@masknet/web3-contracts/types/Qualification2'
import { useQualificationContract } from './useQualificationContract'
export function useIfQualified(address: string, ito_address: string) {
const account = useAccount()
+ const chainId = useChainId()
const { contract: qualificationContract, version } = useQualificationContract(address, ito_address)
return useAsyncRetry(async () => {
@@ -17,5 +18,5 @@ export function useIfQualified(address: string, ito_address: string) {
).call({
from: account,
})
- }, [account, qualificationContract])
+ }, [account, qualificationContract, chainId])
}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
index 141b5d0b1ecb..a25c322daaf4 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
@@ -16,7 +16,6 @@ import type { JSON_PayloadComposeMask } from '../types'
import { ITO_MetadataReader, payloadIntoMask } from './helpers'
import { CompositionDialog } from './CompositionDialog'
import { set } from 'lodash-unified'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
import { MarketsIcon, MarketsClaimIcon } from '@masknet/icons'
import { ApplicationEntry } from '@masknet/shared'
import { CrossIsolationMessages } from '@masknet/shared-base'
@@ -39,11 +38,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
const payload = ITO_MetadataReader(props.message.meta)
usePluginWrapper(payload.ok)
if (!payload.ok) return null
- return (
-
-
- )
+ return
+
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
index 94a9a1fbd89c..bded23df3d24 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
@@ -1,8 +1,8 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useContainer } from 'unstated-next'
import { makeStyles } from '@masknet/theme'
-import { Box, Button, Skeleton, Typography } from '@mui/material'
-import { formatBalance, TransactionStateType, useTransactionCallback } from '@masknet/web3-shared-evm'
+import { Box, Button, CircularProgress, Typography, useTheme } from '@mui/material'
+import { formatBalance, TransactionStateType, useChainId, useTransactionCallback } from '@masknet/web3-shared-evm'
import AbstractTab, { AbstractTabProps } from '../../../../components/shared/AbstractTab'
import { EthereumWalletConnectedBoundary } from '../../../../web3/UI/EthereumWalletConnectedBoundary'
import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
@@ -14,6 +14,7 @@ import { DetailsTab } from './DetailsTab'
import { DrawResultDialog } from './DrawResultDialog'
import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
import { WalletMessages } from '../../../Wallet/messages'
+import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
const useTabsStyles = makeStyles()((theme) => ({
tab: {
@@ -47,6 +48,8 @@ export function PreviewCard(props: PreviewCardProps) {
const state = useState(CardTab.Articles)
const [openDrawDialog, setOpenDrawDialog] = useState(false)
const [openDrawResultDialog, setOpenDrawResultDialog] = useState(false)
+ const chainId = useChainId()
+ const theme = useTheme()
const {
boxId,
@@ -147,16 +150,26 @@ export function PreviewCard(props: PreviewCardProps) {
if (boxState === BoxState.UNKNOWN)
return (
-
-
+
)
if (boxState === BoxState.ERROR)
return (
- Something went wrong.
-
@@ -164,8 +177,19 @@ export function PreviewCard(props: PreviewCardProps) {
if (boxState === BoxState.NOT_FOUND || !boxInfo)
return (
- Failed to load box.
-
@@ -189,47 +213,62 @@ export function PreviewCard(props: PreviewCardProps) {
}
return (
-
-
- setOpenDrawDialog(true)}>
- {(() => {
- return boxState === BoxState.READY && paymentTokenAddress ? (
- <>
- {boxStateMessage} (
- {formatBalance(paymentTokenPrice, paymentTokenDetailed?.decimals ?? 0)}{' '}
- {paymentTokenDetailed?.symbol}/Time)
-
- ) : (
- boxStateMessage
- )
- })()}
-
-
- {
- setOpenBoxTransactionOverrides(null)
- setOpenDrawDialog(false)
- }}
- onSubmit={onDraw}
- />
- {
- refreshLastPurchasedTokenIds()
- setOpenDrawResultDialog(false)
- }}
- />
-
+ <>
+
+ {
+ setOpenBoxTransactionOverrides(null)
+ setOpenDrawDialog(false)
+ }}
+ onSubmit={onDraw}
+ />
+ {
+ refreshLastPurchasedTokenIds()
+ setOpenDrawResultDialog(false)
+ }}
+ />
+
+
+
+
+ setOpenDrawDialog(true)}>
+ {(() => {
+ return boxState === BoxState.READY && paymentTokenAddress ? (
+ <>
+ {boxStateMessage} (
+ {formatBalance(paymentTokenPrice, paymentTokenDetailed?.decimals ?? 0)}{' '}
+ {paymentTokenDetailed?.symbol}/Time)
+
+ ) : (
+ boxStateMessage
+ )
+ })()}
+
+
+
+
+
)
}
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx
index b471787ab708..f40ea9b5b7f5 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx
@@ -4,7 +4,6 @@ import { base } from '../base'
import { extractTextFromTypedMessage } from '@masknet/typed-message'
import { Trans } from 'react-i18next'
import { parseURL } from '@masknet/shared-base'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
import { PreviewCard } from './components/PreviewCard'
import { Context } from '../hooks/useContext'
import { ApplicationEntry } from '@masknet/shared'
@@ -70,10 +69,8 @@ function Renderer(props: React.PropsWithChildren<{ url: string }>) {
if (shouldNotRender) return null
return (
-
-
-
-
+
+
)
}
diff --git a/packages/mask/src/plugins/MaskPluginWrapper.tsx b/packages/mask/src/plugins/MaskPluginWrapper.tsx
index 6618f9b41ba0..82f6f215d111 100644
--- a/packages/mask/src/plugins/MaskPluginWrapper.tsx
+++ b/packages/mask/src/plugins/MaskPluginWrapper.tsx
@@ -1,10 +1,7 @@
-import { Typography, SnackbarContent, Button, Link } from '@mui/material'
+import { Typography, SnackbarContent, Link, useTheme } from '@mui/material'
import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { activatedSocialNetworkUI } from '../social-network'
import { MaskIcon } from '../resources/MaskIcon'
import { Suspense, ReactNode, useMemo, forwardRef, useImperativeHandle, useState } from 'react'
-import { isTwitter } from '../social-network-adaptor/twitter.com/base'
-import { usePersonaConnectStatus } from '../components/DataSource/usePersonaConnectStatus'
import { useI18N } from '../utils'
import { Box } from '@mui/system'
import {
@@ -14,104 +11,110 @@ import {
Plugin,
PluginWrapperMethods,
} from '@masknet/plugin-infra/content-script'
+import { ProviderByIcon } from '@masknet/icons'
interface PluginWrapperProps extends React.PropsWithChildren<{}> {
open?: boolean
- title: string
+ title: JSX.Element | string
width?: number
+ content?: ReactNode
action?: ReactNode
publisher?: JSX.Element
+ wrapperProps?: Plugin.SNSAdaptor.PluginWrapperProps
publisherLink?: string
}
-const useStyles = makeStyles()((theme) => {
+const useStyles = makeStyles<{ backgroundGradient?: string }>()((theme, props) => {
return {
card: {
+ background:
+ props?.backgroundGradient ??
+ 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.2) 0%, rgba(45, 41, 253, 0.2) 100%), #FFFFFF;',
margin: theme.spacing(2, 0),
width: '100%',
boxSizing: 'border-box',
- border: `1px solid ${theme.palette.secondaryDivider}`,
cursor: 'default',
- ...(isTwitter(activatedSocialNetworkUI)
- ? {
- borderRadius: 15,
- overflow: 'hidden',
- }
- : null),
+ borderRadius: 15,
+ overflow: 'hidden',
},
header: {
backgroundColor: 'transparent',
color: theme.palette.text.primary,
display: 'flex',
alignItems: 'center',
- padding: theme.spacing(2),
+ padding: 15,
},
title: {
display: 'flex',
flexDirection: 'column',
paddingLeft: theme.spacing(1.5),
},
- action: {
+ provider: {
+ display: 'flex',
+ alignItems: 'center',
+ '& > a': {
+ lineHeight: 0,
+ },
+ },
+ publish: {
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
},
+ action: {
+ textAlign: 'center',
+ margin: theme.spacing(1),
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginBottom: 16,
+ },
body: {
- borderTop: `1px solid ${theme.palette.secondaryDivider}`,
- padding: theme.spacing(2),
+ padding: theme.spacing(0),
},
button: {
- color: MaskColorVar.twitterButtonText,
+ backgroundColor: theme.palette.maskColor.dark,
+ color: 'white',
+ width: 254,
'&,&:hover': {
- background: MaskColorVar.twitterButton,
+ background: theme.palette.maskColor.dark,
},
+ borderRadius: 9999,
},
}
})
export default function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
- const { classes } = useStyles()
- const { open, title, children, action, publisher, publisherLink } = props
- const personaConnectStatus = usePersonaConnectStatus()
+ const { open, title, children, action, publisher, publisherLink, content, wrapperProps } = props
+ const { classes } = useStyles({ backgroundGradient: wrapperProps?.backgroundGradient })
+ const theme = useTheme()
const { t } = useI18N()
- const name = !personaConnectStatus.hasPersona
- ? t('please_create_persona')
- : !personaConnectStatus.connected
- ? t('please_connect_persona')
- : title
-
- const actionButton = useMemo(() => {
- if (!personaConnectStatus.action) return null
-
- const button = personaConnectStatus.hasPersona ? t('connect_persona') : t('create_persona')
- return (
-
- )
- }, [personaConnectStatus, t])
-
const publisherInfo = useMemo(() => {
- if (!publisher) return null
+ if (!publisher) return
const main = (
-
+
{publisher}
)
return (
-
-
- Provided by
+
+
+ {t('plugin_provider_by')}
+ {main}
{publisherLink ? (
- {main}
+
)
}, [publisher, publisherLink])
@@ -122,26 +125,39 @@ export default function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
style={{ display: open ? 'block' : 'none' }}
onClick={(ev) => ev.stopPropagation()}>
+ {content}
+
+
)
+
return = forwardRef(
(props, ref) => {
- const { ID, name, publisher } = props.definition
+ const { ID, name, publisher, wrapperProps } = props.definition
const t = usePluginI18NField()
const [width, setWidth] = useState(undefined)
const [open, setOpen] = useState(false)
@@ -159,6 +175,7 @@ export const MaskPostExtraPluginWrapper: PluginWrapperComponent URL_PATTERN.test(url)
@@ -46,17 +44,20 @@ const sns: Plugin.SNSAdaptor.Definition = {
icon: [ChainId.Mainnet, ChainId.Matic].includes(chainId)}>
-
- )
+ return {t('plugin_pooltogether_no_pool')}
+ return (
+
+ {t('plugin_pooltogether_no_pool')}
+
+ )
}
return (
-
-
- , newValue: number) => setTabIndex(newValue)}
- TabIndicatorProps={{
- style: {
- display: 'none',
- },
- }}>
- {tabs}
-
-
- {tabIndex === 0 ?
-
-
+ <>
+
+
+ , newValue: number) => setTabIndex(newValue)}
+ TabIndicatorProps={{
+ style: {
+ display: 'none',
+ },
+ }}>
+ {tabs}
+
+
+ {tabIndex === 0 ?
+
+
+
+ [ChainId.Mainnet, ChainId.Matic].includes(chainId)}
+ />
+
+
)
}
diff --git a/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx b/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx
index 54a94a62dd84..883d734b2ab1 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx
@@ -2,7 +2,7 @@ import { first } from 'lodash-unified'
import type { Pool } from '../types'
import { Typography, Grid, CircularProgress, Button } from '@mui/material'
import { makeStyles } from '@masknet/theme'
-import { useChainId, useERC20TokenDetailed } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId, useERC20TokenDetailed } from '@masknet/web3-shared-evm'
import { RefreshIcon } from '@masknet/icons'
import { usePoolURL } from '../hooks/usePoolURL'
import { CountdownView } from './CountdownView'
@@ -13,6 +13,7 @@ import { NetworkView } from './NetworkView'
import { useI18N } from '../../../utils'
import { TokenIcon } from '@masknet/shared'
import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
const useStyles = makeStyles()((theme) => ({
root: {
@@ -172,6 +173,8 @@ export function PoolView(props: PoolProps) {
const chainId = useChainId()
const [prize, setPrize] = useState('TBD')
const [period, setPeriod] = useState('Custom Period')
+ const currentPluginID = useCurrentWeb3NetworkPluginID()
+ const account = useAccount()
// #region pool token
const {
@@ -261,9 +264,16 @@ export function PoolView(props: PoolProps) {
/>
-
+ {currentPluginID === NetworkPluginID.PLUGIN_EVM && account ? (
+
+ ) : null}
diff --git a/packages/mask/src/plugins/PoolTogether/base.tsx b/packages/mask/src/plugins/PoolTogether/base.tsx
index 0ffc2b3de710..948c07d5d994 100644
--- a/packages/mask/src/plugins/PoolTogether/base.tsx
+++ b/packages/mask/src/plugins/PoolTogether/base.tsx
@@ -3,7 +3,7 @@ import { POOLTOGETHER_PLUGIN_ID, URL_PATTERN } from './constants'
export const base: Plugin.Shared.Definition = {
ID: POOLTOGETHER_PLUGIN_ID,
- name: { fallback: 'PoolTogether' },
+ name: { fallback: 'Pooltogether' },
description: { fallback: 'PoolTogether is a protocol for no-loss prize games on the Ethereum blockchain' },
publisher: { name: { fallback: 'iRhonin' }, link: 'https://github.com/iRhonin' },
enableRequirement: {
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
index 589980fe5af0..27f65dc82f39 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
@@ -1,13 +1,16 @@
+import { SharedIcon, PluginWalletConnectIcon } from '@masknet/icons'
import { WalletMessages } from '@masknet/plugin-wallet'
import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { TransactionState, TransactionStateType, useAccount, useChainIdValid } from '@masknet/web3-shared-evm'
-import { Box } from '@mui/material'
+import { ChainId, TransactionState, TransactionStateType, useAccount, useChainIdValid } from '@masknet/web3-shared-evm'
+import { Box, useTheme } from '@mui/material'
import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
import { useI18N } from '../../../../utils'
+import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
import { EthereumWalletConnectedBoundary } from '../../../../web3/UI/EthereumWalletConnectedBoundary'
import { useStyles } from './useStyles'
interface OperationFooterProps {
+ chainId?: ChainId
canClaim: boolean
canRefund: boolean
claimState: TransactionState
@@ -16,6 +19,7 @@ interface OperationFooterProps {
onClaimOrRefund: () => void | Promise
}
export function OperationFooter({
+ chainId,
canClaim,
canRefund,
claimState,
@@ -27,6 +31,7 @@ export function OperationFooter({
const { t } = useI18N()
const account = useAccount()
const chainIdValid = useChainIdValid()
+ const theme = useTheme()
// #region remote controlled select provider dialog
const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
@@ -39,14 +44,14 @@ export function OperationFooter({
if (!account) {
return (
-
+
{t('plugin_wallet_connect_a_wallet')}
)
}
if (!chainIdValid) {
return (
-
+
{t('plugin_wallet_invalid_network')}
)
@@ -57,11 +62,18 @@ export function OperationFooter({
return (
{canClaim
? claimState.type === TransactionStateType.HASH
@@ -75,18 +87,37 @@ export function OperationFooter({
}
return (
-
-
- {canRefund ? null : (
-
- {t('share')}
-
- )}
-
-
+
+
+
+ {canRefund ? null : (
+
+ )}
+
-
-
- {t('loading')}
-
-
-
+
+
+ {t('loading')}
+
+
)
return (
-
+ <>
-
+ {wrapperProps?.title ?? title ?? t('plugin_default_title')}
+
+
- {personaConnectStatus.connected && children ?
-
- Mask Plugin {!personaConnectStatus.connected && title ? `(${title})` : ''}
-
-
- {name}
-
-
- {actionButton || action || publisherInfo}
+ {wrapperProps?.icon ?? (
+ {publisherInfo}
{children}
: null}
+ {action ? (
+ <>
+ {action}
+
+ ) : null}
+ {children ? {children}
: null}
{/* it might be fontSize: 12 on twitter based on theme? */}
@@ -219,6 +203,7 @@ export function RedPacket(props: RedPacketProps) {
{listOfStatus.includes(RedPacketStatus.empty) ? null : (
-
-
- {isClaiming ? t('plugin_red_packet_claiming') : t('plugin_red_packet_claim')}
-
-
+
+
+ {isClaiming ? t('plugin_red_packet_claiming') : t('plugin_red_packet_claim')}
+
+
+
)}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNftInPost.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNftInPost.tsx
index 3183e6bc7213..4711aae40d63 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNftInPost.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNftInPost.tsx
@@ -1,5 +1,4 @@
import { useEffect } from 'react'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
import { RedPacketRPC } from '../messages'
import type { RedPacketNftJSONPayload } from '../types'
import { RedPacketNft } from './RedPacketNft'
@@ -17,9 +16,5 @@ export function RedPacketNftInPost({ payload }: RedPacketNftInPostProps) {
contract_version: payload.contractVersion,
})
}, [payload])
- return (
-
-
- )
+ return (addressV1, HappyRedPacketV1ABI as AbiItem[])
- const v2 = useContract(addressV2, HappyRedPacketV2ABI as AbiItem[])
- const v3 = useContract(addressV3, HappyRedPacketV3ABI as AbiItem[])
- const v4 = useContract(addressV4, HappyRedPacketV4ABI as AbiItem[])
+ } = useRedPacketConstants(chainId)
+ const v1 = useContract(addressV1, HappyRedPacketV1ABI as AbiItem[], chainId)
+ const v2 = useContract(addressV2, HappyRedPacketV2ABI as AbiItem[], chainId)
+ const v3 = useContract(addressV3, HappyRedPacketV3ABI as AbiItem[], chainId)
+ const v4 = useContract(addressV4, HappyRedPacketV4ABI as AbiItem[], chainId)
const versions = [v1, v2, v3, v4] as const
return versions[version - 1]
}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
index 845a1cfb01f1..f56ca1eb9aec 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
@@ -133,6 +133,15 @@ const sns: Plugin.SNSAdaptor.Definition = {
}
})(),
],
+ wrapperProps: {
+ icon: (
+ Loading fails due to Snapshot API service breakdown.
+
+
+ Loading fails due to Snapshot API service breakdown.
+
-
+
) : (
Loading fails due to Snapshot API service breakdown.