Skip to content

Commit

Permalink
[Release] Hotfix 2.29.1 => 2.29.2 (patch) (#11981)
Browse files Browse the repository at this point in the history 
* chore: bump version to 2.29.2

* feat(RedPacket): mf-6511 render custom cover (#11982)

* feat(RedPacket): mf-6511 render custom cover

* fix: run codegen

---------

Co-authored-by: swkatmask <[email protected]>

* fix: mf-6514 render cover (#11986)

* fix: mf-6514 render cover

mf-6515 duplicate @

* fix: run codegen

---------

Co-authored-by: swkatmask <[email protected]>

* fix: default cover (#11987)

* fix: default cover

* fix: run codegen

---------

Co-authored-by: swkatmask <[email protected]>

* fix: asset base url for base chain (#11988)

* fix: duplicate @ in share text (#11989)

* chore: remove unused classes (#11990)

---------

Co-authored-by: Wukong Sun <[email protected]>
Co-authored-by: swkatmask <[email protected]>
  • Loading branch information
@guanbinrui @swkatmask
3 people authored Dec 13, 2024
1 parent 9fb8417 commit b2e422c
Show file tree
Hide file tree
Showing 19 changed files with 432 additions and 300 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"yarn": ">=999.0.0",
"npm": ">=999.0.0"
},
"version": "2.29.1",
"version": "2.29.2",
"private": true,
"license": "AGPL-3.0-or-later",
"scripts": {
Expand Down
232 changes: 232 additions & 0 deletions packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
import { Trans } from '@lingui/macro'
import { NetworkIcon, TokenIcon } from '@masknet/shared'
import { NetworkPluginID } from '@masknet/shared-base'
import { makeStyles } from '@masknet/theme'
import { formatBalance, type FungibleToken } from '@masknet/web3-shared-base'
import { type ChainId, type SchemaType } from '@masknet/web3-shared-evm'
import { Typography } from '@mui/material'
import type { HTMLProps } from 'react'

const useStyles = makeStyles()((theme) => ({
container: {
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
borderRadius: 16,
position: 'relative',
},
cover: {
width: '100%',
height: '100%',
objectFit: 'cover',
},
label: {
position: 'absolute',
width: 48,
height: 48,
top: 0,
left: 0,
zIndex: 9,
},
content: {
position: 'absolute',
width: '100%',
height: '100%',
left: 0,
top: 0,
display: 'flex',
flexDirection: 'column',
background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%)',
paddingBottom: theme.spacing(2),
boxSizing: 'border-box',
},
message: {
height: 72,
borderRadius: theme.spacing(2, 2, 0, 0),
padding: theme.spacing(1.5, 1.5, 1.5, 6),
fontSize: 20,
fontWeight: 700,
lineHeight: '24px',
color: theme.palette.maskColor.white,
background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(102, 102, 102, 0.10) 100%)',
backdropFilter: 'blur(5px)',
display: 'flex',
alignItems: 'center',
overflow: 'hidden',
},
asset: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: theme.spacing(1),
marginTop: 'auto',
},
icon: {
width: theme.spacing(4.5),
height: theme.spacing(4.5),
position: 'relative',
},
networkIcon: {
position: 'absolute',
bottom: 0,
right: -3,
},
amount: {
color: theme.palette.maskColor.white,
textAlign: 'center',
fontFamily: 'Helvetica',
fontSize: '24px',
fontWeight: 700,
lineHeight: '28px',
display: 'flex',
gap: theme.spacing(1),
},
status: {
display: 'flex',
alignItems: 'center',
padding: theme.spacing('2px', 1),
gap: theme.spacing(0.5),
color: theme.palette.maskColor.white,
fontWeight: 700,
fontSize: 12,
lineHeight: '16px',
borderRadius: 8,
background: 'rgba(0, 0, 0, 0.1)',
backdropFilter: 'blur(10px)',
},
statusText: {
fontWeight: 700,
},
bar: {
width: 78,
height: 7,
borderRadius: 999,
border: '1px solid rgba(255, 255, 255, 0.28)',
position: 'relative',
},
progress: {
position: 'absolute',
backgroundColor: 'rgba(255, 255, 255, 0.78)',
borderRadius: '999px 0 0 999px',
left: -1,
top: -1,
bottom: -1,
'&[data-fulfilled]': {
right: -1,
borderRadius: '999px',
},
},
creator: {
marginTop: theme.spacing(2),
color: theme.palette.maskColor.white,
textAlign: 'center',
fontFamily: 'Helvetica',
fontSize: '14px',
fontWeight: 700,
lineHeight: '18px',
},
}))

interface Props extends HTMLProps<HTMLDivElement> {
cover: string
message: string
token: FungibleToken<ChainId, SchemaType>
shares: number
/** claimed entities */
claimedCount: number
totalClaimed: string
total: string
/** claimed amount by current user */
claimedAmount: string
isClaimed?: boolean
isEmpty?: boolean
isExpired?: boolean
isRefunded?: boolean
creator: string
}
export function RedPacketEnvelope({
cover,
message,
token,
shares,
claimedCount: claimed,
total,
totalClaimed,
claimedAmount,
isClaimed,
isExpired,
isRefunded,
isEmpty,
creator,
...props
}: Props) {
const { classes, cx } = useStyles()
return (
<div {...props} className={cx(classes.container, props.className)}>
<img src={cover} className={classes.cover} />
<div className={classes.content}>
<Typography className={classes.message}>{message}</Typography>
<div className={classes.asset}>
<div className={classes.icon}>
<TokenIcon
size={36}
pluginID={NetworkPluginID.PLUGIN_EVM}
address={token.address}
symbol={token.symbol}
chainId={token.chainId}
/>
<NetworkIcon
size={16}
className={classes.networkIcon}
pluginID={NetworkPluginID.PLUGIN_EVM}
chainId={token.chainId}
/>
</div>
<Typography className={classes.amount}>
{isClaimed ?
formatBalance(claimedAmount, token.decimals)
: `${formatBalance(totalClaimed, token.decimals)} / ${formatBalance(total, token.decimals)}`
}{' '}
{token.symbol}
</Typography>
<div className={classes.status}>
{isClaimed ?
<Typography className={classes.statusText}>
<Trans>Congratulations!</Trans>
</Typography>
: isEmpty ?
<>
<div className={classes.bar}>
<div className={classes.progress} data-fulfilled />
</div>
<Typography className={classes.statusText}>
<Trans>Empty</Trans>
</Typography>
</>
: isExpired ?
<Typography className={classes.statusText}>
<Trans>Expired</Trans>
</Typography>
: isRefunded ?
<Typography className={classes.statusText}>
<Trans>Refunded</Trans>
</Typography>
: <>
<div className={classes.bar}>
<div
className={classes.progress}
style={{ width: `${Math.min(1, claimed / shares) * 100}%` }}
/>
</div>
<Typography className={classes.statusText}>
Claimed {claimed}/{shares}
</Typography>
</>
}
</div>
</div>
<Typography className={classes.creator}>From: @{creator.replace(/^@/, '')}</Typography>
</div>
<img src={new URL('../assets/token-label.png', import.meta.url).href} className={classes.label} />
</div>
)
}
Loading

0 comments on commit b2e422c

Please sign in to comment.