feat: mf-6536 remove share button (DimensionDev#12013)

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

@@ -3,7 +3,7 @@ import { useChainContext } from '@masknet/web3-hooks-base'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { ActionButton, makeStyles } from '@masknet/theme'
-import { Box, useTheme } from '@mui/material'
+import { Box, useTheme, type BoxProps } from '@mui/material'
 import { Icons } from '@masknet/icons'
 import { ChainBoundary, WalletConnectedBoundary, SelectProviderModal } from '@masknet/shared'
 import { Trans, msg } from '@lingui/macro'
@@ -12,7 +12,6 @@ import { useLingui } from '@lingui/react'
 const useStyles = makeStyles()((theme) => {
     return {
         footer: {
-            width: '100%',
             display: 'flex',
             gap: theme.spacing(2),
             justifyContent: 'center',
@@ -27,14 +26,13 @@ const useStyles = makeStyles()((theme) => {
     }
 })
 
-interface OperationFooterProps {
+interface OperationFooterProps extends BoxProps {
     chainId?: ChainId
     canClaim: boolean
     canRefund: boolean
     /** Is claiming or checking claim status */
     isClaiming: boolean
     isRefunding: boolean
-    onShare?(): void
     onClaimOrRefund: () => void | Promise<void>
 }
 export function OperationFooter({
@@ -43,14 +41,16 @@ export function OperationFooter({
     canRefund,
     isClaiming,
     isRefunding,
-    onShare,
     onClaimOrRefund,
+    ...rest
 }: OperationFooterProps) {
     const { _ } = useLingui()
-    const { classes } = useStyles()
+    const { classes, cx } = useStyles()
     const { account, chainId: currentChainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>({ chainId })
     const theme = useTheme()
 
+    if (!canClaim && !canRefund && account) return null
+
     function getObtainButton(onClick: MouseEventHandler<HTMLButtonElement>) {
         if (!account) {
             return (
@@ -96,34 +96,20 @@ export function OperationFooter({
     }
 
     return (
-        <Box style={{ flex: 1, padding: 12 }}>
-            <Box className={classes.footer}>
-                {canRefund ? null : (
-                    <ActionButton
-                        fullWidth
-                        variant="roundedDark"
-                        startIcon={<Icons.Shared size={18} />}
-                        onClick={onShare}>
-                        <Trans>Share</Trans>
-                    </ActionButton>
-                )}
-
-                {canClaim || canRefund || !account ?
-                    <ChainBoundary
-                        expectedPluginID={NetworkPluginID.PLUGIN_EVM}
-                        expectedChainId={(chainId as ChainId) ?? ChainId.Mainnet}
-                        ActionButtonPromiseProps={{ variant: 'roundedDark' }}>
-                        <WalletConnectedBoundary
-                            noGasText={_(msg`Insufficient Balance`)}
-                            hideRiskWarningConfirmed
-                            expectedChainId={chainId ?? ChainId.Mainnet}
-                            startIcon={<Icons.Wallet size={18} />}
-                            ActionButtonProps={{ variant: 'roundedDark' }}>
-                            {getObtainButton(onClaimOrRefund)}
-                        </WalletConnectedBoundary>
-                    </ChainBoundary>
-                :   null}
-            </Box>
+        <Box {...rest} className={cx(classes.footer, rest.className)}>
+            <ChainBoundary
+                expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                expectedChainId={(chainId as ChainId) ?? ChainId.Mainnet}
+                ActionButtonPromiseProps={{ variant: 'roundedDark' }}>
+                <WalletConnectedBoundary
+                    noGasText={_(msg`Insufficient Balance`)}
+                    hideRiskWarningConfirmed
+                    expectedChainId={chainId ?? ChainId.Mainnet}
+                    startIcon={<Icons.Wallet size={18} />}
+                    ActionButtonProps={{ variant: 'roundedDark' }}>
+                    {getObtainButton(onClaimOrRefund)}
+                </WalletConnectedBoundary>
+            </ChainBoundary>
         </Box>
     )
 }

packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx

@@ -2,24 +2,26 @@ import { usePostInfoSource } from '@masknet/plugin-infra/content-script'
 import { ActionButton, makeStyles } from '@masknet/theme'
 import { Box } from '@mui/material'
 import { Trans } from '@lingui/macro'
+import type { BoxProps } from '@mui/system'
 
 const useStyles = makeStyles()((theme) => {
     return {
         footer: {
+            boxSizing: 'border-box',
             padding: theme.spacing(1.5),
         },
     }
 })
 
-interface OperationFooterProps {
+interface OperationFooterProps extends BoxProps {
     onRequest?(): void
 }
-export function RequestLoginFooter({ onRequest }: OperationFooterProps) {
-    const { classes } = useStyles()
+export function RequestLoginFooter({ onRequest, ...rest }: OperationFooterProps) {
+    const { classes, cx } = useStyles()
     const source = usePostInfoSource()
 
     return (
-        <Box className={classes.footer}>
+        <Box {...rest} className={cx(classes.footer, rest.className)}>
             <ActionButton fullWidth variant="roundedDark" onClick={onRequest}>
                 <Trans>Connect to {source}</Trans>
             </ActionButton>

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

@@ -25,7 +25,7 @@ import { OperationFooter } from './OperationFooter.js'
 import { RequestLoginFooter } from './RequestLoginFooter.js'
 import { useRedPacketCover } from './useRedPacketCover.js'
 
-const useStyles = makeStyles<{ outdated: boolean }>()((theme, { outdated }) => {
+const useStyles = makeStyles()((theme) => {
     return {
         root: {
             borderRadius: theme.spacing(2),
@@ -35,10 +35,9 @@ const useStyles = makeStyles<{ outdated: boolean }>()((theme, { outdated }) => {
             backgroundRepeat: 'no-repeat',
             color: theme.palette.common.white,
             flexDirection: 'column',
+            gap: theme.spacing(2),
             justifyContent: 'space-between',
-            marginBottom: outdated ? '12px' : 'auto',
-            marginLeft: 'auto',
-            marginRight: 'auto',
+            margin: theme.spacing(0, 'auto', 2),
             boxSizing: 'border-box',
             width: 'calc(100% - 32px)',
             [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
@@ -48,6 +47,9 @@ const useStyles = makeStyles<{ outdated: boolean }>()((theme, { outdated }) => {
             padding: 0,
             aspectRatio: '480 / 336',
         },
+        footer: {
+            margin: theme.spacing(2),
+        },
         envelope: {
             height: '100%',
             width: '100%',
@@ -166,10 +168,6 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
         [payload, link, claimTxHash, network?.name, platform, isOnFirefly, handle, _],
     )
     const claimedShareText = useMemo(() => getShareText(true), [getShareText])
-    const shareText = useMemo(() => {
-        const hasClaimed = listOfStatus.includes(RedPacketStatus.claimed) || claimTxHash
-        return getShareText(!!hasClaimed)
-    }, [getShareText, listOfStatus, claimTxHash])
 
     const [{ loading: isRefunding }, _isRefunded, refundCallback] = useRefundCallback(
         payload.contract_version,
@@ -243,13 +241,9 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
         myHandle,
     ])
 
-    const handleShare = useCallback(() => {
-        if (shareText) share?.(shareText, source ? source : undefined)
-    }, [shareText, source])
-
     const outdated = isEmpty || (!canRefund && listOfStatus.includes(RedPacketStatus.expired))
 
-    const { classes } = useStyles({ outdated })
+    const { classes } = useStyles()
 
     // RedPacket created from Mask has no cover settings
     const { data: cover, isLoading: isLoadingCover } = useRedPacketCover({
@@ -267,53 +261,52 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
     const claimedOrEmpty = listOfStatus.includes(RedPacketStatus.claimed) || isEmpty
 
     return (
-        <>
-            <Card className={classes.root} component="article" elevation={0}>
-                <RedPacketEnvelope
-                    className={classes.envelope}
-                    cover={cover?.backgroundImageUrl || new URL('../assets/cover.png', import.meta.url).href}
-                    message={payload.sender.message}
-                    token={token}
-                    shares={payload.shares}
-                    isClaimed={isClaimed}
-                    isEmpty={isEmpty}
-                    isExpired={isExpired}
-                    isRefunded={isRefunded}
-                    claimedCount={+availability.claimed}
-                    total={payload.total}
-                    totalClaimed={minus(payload.total, payload.total_remaining || availability.balance).toFixed()}
-                    claimedAmount={availability.claimed_amount}
-                    creator={payload.sender.name}
-                />
-                {cover ?
-                    <Grow in={showRequirements ? !checkingClaimStatus : false} timeout={250}>
-                        <Requirements
-                            showResults={!claimedOrEmpty}
-                            statusList={claimStrategyStatus?.claimStrategyStatus ?? EMPTY_LIST}
-                            className={classes.requirements}
-                            onClose={() => setShowRequirements(false)}
-                        />
-                    </Grow>
-                :   null}
-            </Card>
+        <Card className={classes.root} component="article" elevation={0}>
+            <RedPacketEnvelope
+                className={classes.envelope}
+                cover={cover?.backgroundImageUrl || new URL('../assets/cover.png', import.meta.url).href}
+                message={payload.sender.message}
+                token={token}
+                shares={payload.shares}
+                isClaimed={isClaimed}
+                isEmpty={isEmpty}
+                isExpired={isExpired}
+                isRefunded={isRefunded}
+                claimedCount={+availability.claimed}
+                total={payload.total}
+                totalClaimed={minus(payload.total, payload.total_remaining || availability.balance).toFixed()}
+                claimedAmount={availability.claimed_amount}
+                creator={payload.sender.name}
+            />
+            {cover ?
+                <Grow in={showRequirements ? !checkingClaimStatus : false} timeout={250}>
+                    <Requirements
+                        showResults={!claimedOrEmpty}
+                        statusList={claimStrategyStatus?.claimStrategyStatus ?? EMPTY_LIST}
+                        className={classes.requirements}
+                        onClose={() => setShowRequirements(false)}
+                    />
+                </Grow>
+            :   null}
             {outdated ?
                 null
             : myHandle ?
                 <OperationFooter
+                    className={classes.footer}
                     chainId={payloadChainId}
                     canClaim={canClaim}
                     canRefund={canRefund}
                     isClaiming={isClaiming || checkingClaimStatus}
                     isRefunding={isRefunding}
-                    onShare={handleShare}
                     onClaimOrRefund={onClaimOrRefund}
                 />
             :   <RequestLoginFooter
+                    className={classes.footer}
                     onRequest={() => {
                         requestLogin?.(source)
                     }}
                 />
             }
-        </>
+        </Card>
     )
 })