Skip to content

Commit 5562a5d

Browse files
swkatmaskswkatmask
authored
fix: mf-6573 solana and evm redpackets coexist (#12050)
1 parent 37a7008 commit 5562a5d

File tree

24 files changed

+219
-175
lines changed

24 files changed

+219
-175
lines changed

‎packages/plugins/RedPacket/src/SiteAdaptor/Conditions/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Box, IconButton, Typography, type BoxProps } from '@mui/material'
55
import { Trans } from '@lingui/react/macro'
66
import { TokenIcon } from '@masknet/shared'
77
import { formatBalance } from '@masknet/web3-shared-base'
8+
import { NetworkPluginID } from '@masknet/shared-base'
89

910
const useStyles = makeStyles()((theme) => ({
1011
box: {
@@ -136,6 +137,7 @@ export function Conditions({ onClose, statusList, unsatisfied = true, ...props }
136137
className={classes.tokenIcon}
137138
address={token.contractAddress}
138139
name={token.name}
140+
pluginID={NetworkPluginID.PLUGIN_EVM}
139141
chainId={Number.parseInt(token.chainId, 10)}
140142
logoURL={token.icon}
141143
size={24}

‎packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/OperationFooter.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useChainContext } from '@masknet/web3-hooks-base'
33
import { NetworkPluginID } from '@masknet/shared-base'
44
import { ChainId } from '@masknet/web3-shared-evm'
55
import { ActionButton, makeStyles } from '@masknet/theme'
6-
import { Box, useTheme, type BoxProps } from '@mui/material'
6+
import { Box, type BoxProps } from '@mui/material'
77
import { Icons } from '@masknet/icons'
88
import { ChainBoundary, WalletConnectedBoundary, SelectProviderModal } from '@masknet/shared'
99
import { Trans, useLingui } from '@lingui/react/macro'
@@ -22,13 +22,23 @@ const useStyles = makeStyles()((theme) => {
2222
gap: theme.spacing(1),
2323
},
2424
},
25+
actionButton: {
26+
backgroundColor: theme.palette.maskColor.dark,
27+
width: '100%',
28+
color: 'white',
29+
'&:hover': {
30+
backgroundColor: theme.palette.maskColor.dark,
31+
},
32+
},
2533
}
2634
})
2735

2836
interface OperationFooterProps extends BoxProps {
2937
chainId?: ChainId
3038
canClaim: boolean
3139
canRefund: boolean
40+
/** If the conditions are not satisfied */
41+
unsatisfied?: boolean
3242
/** Is claiming or checking claim status */
3343
isClaiming: boolean
3444
isRefunding: boolean
@@ -38,6 +48,7 @@ export function OperationFooter({
3848
chainId,
3949
canClaim,
4050
canRefund,
51+
unsatisfied,
4152
isClaiming,
4253
isRefunding,
4354
onClaimOrRefund,
@@ -46,7 +57,6 @@ export function OperationFooter({
4657
const { t } = useLingui()
4758
const { classes, cx } = useStyles()
4859
const { account, chainId: currentChainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>({ chainId })
49-
const theme = useTheme()
5060

5161
if (!canClaim && !canRefund && account) return null
5262

@@ -70,20 +80,15 @@ export function OperationFooter({
7080

7181
return (
7282
<ActionButton
73-
sx={{
74-
backgroundColor: theme.palette.maskColor.dark,
75-
width: '100%',
76-
color: 'white',
77-
'&:hover': {
78-
backgroundColor: theme.palette.maskColor.dark,
79-
},
80-
}}
83+
className={classes.actionButton}
8184
variant="roundedDark"
8285
fullWidth
8386
loading={isLoading}
8487
disabled={isLoading}
8588
onClick={onClick}>
86-
{canClaim ?
89+
{unsatisfied ?
90+
<Trans>Conditions not met</Trans>
91+
: canClaim ?
8792
isClaiming ?
8893
<Trans>Claiming...</Trans>
8994
: <Trans>Claim</Trans>

‎packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx‎

Lines changed: 24 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import { msg } from '@lingui/core/macro'
22
import { useLingui } from '@lingui/react'
3-
import { Trans } from '@lingui/react/macro'
4-
import { Icons } from '@masknet/icons'
53
import { useLastRecognizedIdentity, usePostInfoDetails, usePostLink } from '@masknet/plugin-infra/content-script'
64
import { requestLogin, share } from '@masknet/plugin-infra/content-script/context'
75
import { LoadingStatus, TransactionConfirmModal } from '@masknet/shared'
86
import { EMPTY_LIST, NetworkPluginID, Sniffings } from '@masknet/shared-base'
97
import { queryClient } from '@masknet/shared-base-ui'
10-
import { ActionButton, makeStyles } from '@masknet/theme'
8+
import { makeStyles } from '@masknet/theme'
119
import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4.js'
12-
import { useChainContext, useNetwork, useNetworkContext } from '@masknet/web3-hooks-base'
10+
import { NetworkContextProvider, useChainContext, useNetwork } from '@masknet/web3-hooks-base'
1311
import { EVMChainResolver, FireflyRedPacket } from '@masknet/web3-providers'
1412
import { FireflyRedPacketAPI, RedPacketStatus, type RedPacketJSONPayload } from '@masknet/web3-providers/types'
1513
import { TokenType, formatBalance, isZero, minus } from '@masknet/web3-shared-base'
1614
import { ChainId } from '@masknet/web3-shared-evm'
17-
import { Box, Card, Grow } from '@mui/material'
15+
import { Card, Grow } from '@mui/material'
1816
import { memo, useCallback, useMemo, useState } from 'react'
1917
import { RedPacketEnvelope } from '../components/RedPacketEnvelope.js'
2018
import { Conditions } from '../Conditions/index.js'
@@ -61,34 +59,20 @@ const useStyles = makeStyles()((theme) => {
6159
inset: 24,
6260
margin: 'auto',
6361
},
64-
actionButton: {
65-
display: 'flex',
66-
gap: theme.spacing(0.5),
67-
lineHeight: '18px',
68-
backgroundColor: theme.palette.maskColor.dark,
69-
width: '100%',
70-
color: 'white',
71-
'&:hover': {
72-
backgroundColor: theme.palette.maskColor.dark,
73-
},
74-
},
7562
}
7663
})
7764

7865
export interface RedPacketProps {
7966
payload: RedPacketJSONPayload
67+
currentPluginID: NetworkPluginID
8068
}
8169

82-
export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
70+
export const RedPacket = memo(function RedPacket({ payload, currentPluginID }: RedPacketProps) {
8371
const { _ } = useLingui()
8472
const token = payload.token
85-
const { pluginID } = useNetworkContext()
8673
const payloadChainId: ChainId =
8774
(token?.chainId as ChainId) ?? EVMChainResolver.chainId(payload.network ?? '') ?? ChainId.Mainnet
88-
const { account } = useChainContext<NetworkPluginID.PLUGIN_EVM>({
89-
chainId: payloadChainId,
90-
account: pluginID === NetworkPluginID.PLUGIN_EVM ? undefined : '',
91-
})
75+
const { account } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
9276

9377
// #region token detailed
9478
const {
@@ -115,7 +99,10 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
11599
const link = postLink.toString() || postUrl?.toString()
116100

117101
// TODO payload.chainId is undefined on production mode
118-
const network = useNetwork(pluginID, payload.chainId || payload.token?.chainId)
102+
const network = useNetwork<NetworkPluginID.PLUGIN_EVM>(
103+
NetworkPluginID.PLUGIN_EVM,
104+
(payload.chainId as number) || payload.token?.chainId,
105+
)
119106

120107
const getShareText = useCallback(
121108
(hasClaimed: boolean) => {
@@ -286,36 +273,24 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
286273
</>
287274
)
288275

289-
if (claimStrategyStatus?.canClaim === false && account) {
290-
return (
291-
<>
292-
{card}
293-
<Box className={classes.footer}>
294-
<ActionButton
295-
className={classes.actionButton}
296-
variant="roundedDark"
297-
fullWidth
298-
onClick={() => setShowRequirements(true)}>
299-
<Trans>Who can claim</Trans>
300-
<Icons.Questions size={18} />
301-
</ActionButton>
302-
</Box>
303-
</>
304-
)
305-
}
276+
const unsatisfied = claimStrategyStatus?.canClaim === false
306277

307278
return (
308279
<>
309280
{card}
310-
<OperationFooter
311-
className={classes.footer}
312-
chainId={payloadChainId}
313-
canClaim={canClaim}
314-
canRefund={canRefund}
315-
isClaiming={isClaiming || checkingClaimStatus}
316-
isRefunding={isRefunding}
317-
onClaimOrRefund={onClaimOrRefund}
318-
/>
281+
{/* ChainBoundary needs to know the current network */}
282+
<NetworkContextProvider initialNetwork={currentPluginID}>
283+
<OperationFooter
284+
className={classes.footer}
285+
chainId={payloadChainId}
286+
canClaim={canClaim}
287+
canRefund={canRefund}
288+
unsatisfied={unsatisfied}
289+
isClaiming={isClaiming || checkingClaimStatus}
290+
isRefunding={isRefunding}
291+
onClaimOrRefund={onClaimOrRefund}
292+
/>
293+
</NetworkContextProvider>
319294
</>
320295
)
321296
})

‎packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInPost.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { usePostLink } from '@masknet/plugin-infra/content-script'
2-
import type { NetworkPluginID } from '@masknet/shared-base'
2+
import { type NetworkPluginID } from '@masknet/shared-base'
33
import { MaskLightTheme } from '@masknet/theme'
4-
import { useChainContext } from '@masknet/web3-hooks-base'
4+
import { EVMWeb3ContextProvider, useChainContext, useNetworkContext } from '@masknet/web3-hooks-base'
55
import type { RedPacketRecord } from '@masknet/web3-providers/types'
66
import { ThemeProvider } from '@mui/material'
77
import { useEffect } from 'react'
88
import { RedPacketRPC } from '../messages.js'
99
import { RedPacket, type RedPacketProps } from './RedPacket/index.js'
1010

11-
export function RedPacketInPost({ payload }: RedPacketProps) {
11+
export function RedPacketInPost({ payload }: Omit<RedPacketProps, 'currentPluginID'>) {
12+
const { pluginID } = useNetworkContext()
1213
const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
1314
const fromUrl = usePostLink()
1415

@@ -29,7 +30,9 @@ export function RedPacketInPost({ payload }: RedPacketProps) {
2930

3031
return (
3132
<ThemeProvider theme={MaskLightTheme}>
32-
<RedPacket payload={payload} />
33+
<EVMWeb3ContextProvider>
34+
<RedPacket payload={payload} currentPluginID={pluginID} />
35+
</EVMWeb3ContextProvider>
3336
</ThemeProvider>
3437
)
3538
}

‎packages/plugins/RedPacket/src/SiteAdaptor/RedPacketNft.tsx‎

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
import { useCallback, useEffect, useMemo } from 'react'
1+
import { msg } from '@lingui/core/macro'
2+
import { useLingui } from '@lingui/react'
3+
import { Trans } from '@lingui/react/macro'
4+
import { Icons } from '@masknet/icons'
5+
import { usePostLink } from '@masknet/plugin-infra/content-script'
6+
import { share } from '@masknet/plugin-infra/content-script/context'
7+
import {
8+
AssetPreviewer,
9+
ChainBoundary,
10+
LoadingStatus,
11+
NFTFallbackImage,
12+
ReloadStatus,
13+
TransactionConfirmModal,
14+
WalletConnectedBoundary,
15+
} from '@masknet/shared'
16+
import { CrossIsolationMessages, NetworkPluginID, Sniffings } from '@masknet/shared-base'
217
import {
3-
makeStyles,
418
ActionButton,
19+
makeStyles,
520
parseColor,
621
ShadowRootTooltip,
7-
useDetectOverflow,
822
useCustomSnackbar,
23+
useDetectOverflow,
924
} from '@masknet/theme'
10-
import { signMessage, type ChainId } from '@masknet/web3-shared-evm'
11-
import { type RedPacketNftJSONPayload } from '@masknet/web3-providers/types'
12-
import { Card, Typography, Button, Box } from '@mui/material'
13-
import {
14-
WalletConnectedBoundary,
15-
ChainBoundary,
16-
AssetPreviewer,
17-
NFTFallbackImage,
18-
TransactionConfirmModal,
19-
LoadingStatus,
20-
ReloadStatus,
21-
} from '@masknet/shared'
2225
import {
26+
NetworkContextProvider,
2327
useChainContext,
2428
useNetwork,
25-
useNetworkContext,
2629
useNonFungibleAsset,
2730
useWeb3Hub,
2831
} from '@masknet/web3-hooks-base'
32+
import { type RedPacketNftJSONPayload } from '@masknet/web3-providers/types'
2933
import { TokenType } from '@masknet/web3-shared-base'
30-
import { usePostLink } from '@masknet/plugin-infra/content-script'
31-
import { share } from '@masknet/plugin-infra/content-script/context'
32-
import { NetworkPluginID, CrossIsolationMessages, Sniffings } from '@masknet/shared-base'
33-
import { Icons } from '@masknet/icons'
34+
import { signMessage, type ChainId } from '@masknet/web3-shared-evm'
35+
import { Box, Button, Card, Typography } from '@mui/material'
3436
import { Stack } from '@mui/system'
35-
import { useClaimNftRedpacketCallback } from './hooks/useClaimNftRedpacketCallback.js'
37+
import { useCallback, useEffect, useMemo } from 'react'
3638
import { useAvailabilityNftRedPacket } from './hooks/useAvailabilityNftRedPacket.js'
39+
import { useClaimNftRedpacketCallback } from './hooks/useClaimNftRedpacketCallback.js'
3740
import { useNftRedPacketContract } from './hooks/useNftRedPacketContract.js'
38-
import { msg } from '@lingui/core/macro'
39-
import { Trans } from '@lingui/react/macro'
40-
import { useLingui } from '@lingui/react'
4141

4242
const useStyles = makeStyles<{ claimed: boolean; outdated: boolean }>()((theme, { claimed, outdated }) => ({
4343
root: {
@@ -193,13 +193,14 @@ const useStyles = makeStyles<{ claimed: boolean; outdated: boolean }>()((theme,
193193
background: theme.palette.common.white,
194194
},
195195
}))
196-
interface RedPacketNftProps {
196+
export interface RedPacketNftProps {
197197
payload: RedPacketNftJSONPayload
198+
currentPluginID: NetworkPluginID
198199
}
199200

200-
export function RedPacketNft({ payload }: RedPacketNftProps) {
201+
export function RedPacketNft({ payload, currentPluginID }: RedPacketNftProps) {
201202
const { _ } = useLingui()
202-
const { pluginID } = useNetworkContext()
203+
const pluginID = NetworkPluginID.PLUGIN_EVM
203204
const { account } = useChainContext<NetworkPluginID.PLUGIN_EVM>(
204205
pluginID === NetworkPluginID.PLUGIN_EVM ? {} : { account: '' },
205206
)
@@ -420,13 +421,15 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
420421
: null}
421422
</Card>
422423
{outdated ? null : (
423-
<OperationFooter
424-
chainId={payload.chainId}
425-
isClaiming={isClaiming}
426-
claimed={availability.isClaimed}
427-
onShare={onShare}
428-
onClaim={claim}
429-
/>
424+
<NetworkContextProvider initialNetwork={currentPluginID}>
425+
<OperationFooter
426+
chainId={payload.chainId}
427+
isClaiming={isClaiming}
428+
claimed={availability.isClaimed}
429+
onShare={onShare}
430+
onClaim={claim}
431+
/>
432+
</NetworkContextProvider>
430433
)}
431434
</div>
432435
)

‎packages/plugins/RedPacket/src/SiteAdaptor/RedPacketNftInPost.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1+
import { MaskLightTheme } from '@masknet/theme'
2+
import { EVMWeb3ContextProvider, useNetworkContext } from '@masknet/web3-hooks-base'
3+
import { ThemeProvider } from '@mui/material'
14
import { useEffect } from 'react'
25
import { RedPacketRPC } from '../messages.js'
3-
import type { RedPacketNftJSONPayload } from '@masknet/web3-providers/types'
4-
import { EVMWeb3ContextProvider } from '@masknet/web3-hooks-base'
5-
import { RedPacketNft } from './RedPacketNft.js'
6-
import { ThemeProvider } from '@mui/material'
7-
import { MaskLightTheme } from '@masknet/theme'
6+
import { RedPacketNft, type RedPacketNftProps } from './RedPacketNft.js'
87

9-
interface RedPacketNftInPostProps {
10-
payload: RedPacketNftJSONPayload
11-
}
12-
13-
export function RedPacketNftInPost({ payload }: RedPacketNftInPostProps) {
8+
export function RedPacketNftInPost({ payload }: Omit<RedPacketNftProps, 'currentPluginID'>) {
9+
const { pluginID } = useNetworkContext()
1410
useEffect(() => {
1511
RedPacketRPC.updateRedPacketNft({
1612
id: payload.txid,
@@ -19,11 +15,12 @@ export function RedPacketNftInPost({ payload }: RedPacketNftInPostProps) {
1915
contract_version: payload.contractVersion,
2016
})
2117
}, [payload])
18+
2219
return (
23-
<EVMWeb3ContextProvider chainId={payload.chainId}>
24-
<ThemeProvider theme={MaskLightTheme}>
25-
<RedPacketNft payload={payload} />
26-
</ThemeProvider>
27-
</EVMWeb3ContextProvider>
20+
<ThemeProvider theme={MaskLightTheme}>
21+
<EVMWeb3ContextProvider>
22+
<RedPacketNft payload={payload} currentPluginID={pluginID} />
23+
</EVMWeb3ContextProvider>
24+
</ThemeProvider>
2825
)
2926
}

0 commit comments

Comments
 (0)