fix(UI): style of redpacket conditions (#12043)

* fix: mf-6561 footer button

* fix: mf-6560 conditoins style

* fix: mf-6559 style of holding nfts

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

@@ -61,6 +61,11 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1.5),
         flexFlow: 'row wrap',
     },
+    collections: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2,1fr)',
+        gap: theme.spacing(1.5),
+    },
     asset: {
         display: 'flex',
         alignItems: 'center',
@@ -72,21 +77,39 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 400,
         lineHeight: '20px',
         color: theme.palette.common.white,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box',
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: 'vertical',
     },
     tokenIcon: {
         width: 24,
         height: 24,
         marginRight: '0px !important',
     },
+    unsatisfied: {
+        position: 'absolute',
+        left: 12,
+        bottom: 12,
+        right: 12,
+        backgroundColor: 'rgba(255, 53, 69, 0.2)',
+        borderRadius: 4,
+        padding: 6,
+        color: theme.palette.maskColor.white,
+        fontSize: 12,
+        fontWeight: 700,
+        lineHeight: '16px',
+    },
 }))
 
 interface Props extends BoxProps {
-    onClose?(): void
+    unsatisfied?: boolean
     statusList: FireflyRedPacketAPI.ClaimStrategyStatus[]
-    showResults?: boolean
+    onClose?(): void
 }
 
-export function Conditions({ onClose, statusList, showResults = true, ...props }: Props) {
+export function Conditions({ onClose, statusList, unsatisfied = true, ...props }: Props) {
     const { classes, cx } = useStyles()
     const tokenPayloads = statusList.find((x) => x.type === FireflyRedPacketAPI.StrategyType.tokens)?.payload
     const tokenPayload = tokenPayloads?.[0]
@@ -132,10 +155,10 @@ export function Conditions({ onClose, statusList, showResults = true, ...props }
                 {collectionPayloads?.length ?
                     <div className={classes.section}>
                         <Typography className={classes.sectionTitle}>
-                            <Trans>You need to own at least one of the following NFTs.</Trans>
+                            <Trans>You need to hold any of the following NFTs in your wallet.</Trans>
                         </Typography>
 
-                        <div className={classes.assets}>
+                        <div className={classes.collections}>
                             {collectionPayloads.map((collection) => (
                                 <div className={classes.asset} key={collection.contractAddress}>
                                     <TokenIcon
@@ -152,6 +175,11 @@ export function Conditions({ onClose, statusList, showResults = true, ...props }
                         </div>
                     </div>
                 :   null}
+                {unsatisfied ?
+                    <Typography className={classes.unsatisfied}>
+                        <Trans>Your wallet does not meet the eligibility criteria for claiming.</Trans>
+                    </Typography>
+                :   null}
             </div>
             <IconButton className={classes.closeButton} disableRipple onClick={() => onClose?.()} aria-label="Close">
                 <Icons.BaseClose size={30} />

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

@@ -224,7 +224,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
 
     const outdated = isEmpty || (!canRefund && listOfStatus.includes(RedPacketStatus.expired))
 
-    const { classes, theme } = useStyles()
+    const { classes } = useStyles()
 
     // RedPacket created from Mask has no cover settings
     const { data: cover, isLoading: isLoadingCover } = useRedPacketCover({
@@ -239,8 +239,6 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
     // the red packet can fetch without account
     if (!availability || !token || isLoadingCover) return <LoadingStatus minHeight={148} />
 
-    const claimedOrEmpty = listOfStatus.includes(RedPacketStatus.claimed) || isEmpty
-
     const card = (
         <Card className={classes.root} component="article" elevation={0}>
             <RedPacketEnvelope
@@ -264,7 +262,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
             {cover ?
                 <Grow in={showRequirements} timeout={250}>
                     <Conditions
-                        showResults={!claimedOrEmpty}
+                        unsatisfied={!!account && claimStrategyStatus?.canClaim === false}
                         statusList={claimStrategyStatus?.claimStrategyStatus ?? EMPTY_LIST}
                         className={classes.conditions}
                         onClose={() => setShowRequirements(false)}
@@ -288,7 +286,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
             </>
         )
 
-    if (claimStrategyStatus?.canClaim === false) {
+    if (claimStrategyStatus?.canClaim === false && account) {
         return (
             <>
                 {card}

packages/plugins/RedPacket/src/SiteAdaptor/views/Erc20RedPacketConfirm.tsx

@@ -115,6 +115,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     collectionName: {
         maxWidth: 80,
+        display: '-webkit-box',
         WebkitBoxOrient: 'vertical',
         WebkitLineClamp: 2,
         overflow: 'hidden',