chore: use bg images (#11447)

DimensionDev · Feb 26, 2024 · 1d6dbec · 1d6dbec
1 parent fa7a83c
commit 1d6dbec
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
@@ -263,7 +263,9 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
                 component="article"
                 elevation={0}
                 style={{
-                    backgroundImage: `url("${data.url}")`,
+                    backgroundSize: 'contain',
+                    backgroundImage: data.backgroundImageUrl ? `url(${data.backgroundImageUrl})` : 'none',
+                    backgroundColor: data.backgroundColor,
                 }}>
                 <img className={classes.cover} src={data.url} />
                 <img

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketNft.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketNft.tsx
@@ -336,7 +336,15 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
 
     return (
         <div className={classes.root}>
-            <Card className={classes.card} component="article" elevation={0}>
+            <Card
+                className={classes.card}
+                component="article"
+                elevation={0}
+                style={{
+                    backgroundSize: 'contain',
+                    backgroundImage: data.backgroundImageUrl ? `url(${data.backgroundImageUrl})` : 'none',
+                    backgroundColor: data.backgroundColor,
+                }}>
                 <img className={classes.cover} src={data.url} />
                 <img
                     src={new URL('./assets/nftLabel.png', import.meta.url).toString()}

diff --git a/packages/web3-providers/src/Firefly/RedPacket.ts b/packages/web3-providers/src/Firefly/RedPacket.ts
@@ -38,6 +38,8 @@ export class FireflyRedPacket {
 
         return data.list.map((theme) => ({
             themeId: theme.tid,
+            backgroundImageUrl: theme.cover.bg_image,
+            backgroundColor: theme.cover.bg_color,
             url: urlcat(SITE_URL, '/api/rp', {
                 'theme-id': theme.tid,
                 usage: 'payload',
@@ -67,6 +69,8 @@ export class FireflyRedPacket {
         const { data } = await fetchJSON<FireflyRedPacketAPI.ThemeByIdResponse>(url)
         return {
             themeId: data.tid,
+            backgroundImageUrl: data.normal.bg_image,
+            backgroundColor: data.normal.bg_color,
             url: urlcat(SITE_URL, '/api/rp', {
                 'theme-id': data.tid,
                 usage: 'cover',