Skip to content

Commit 3c8babb

Browse files
IlyaGrshinIlyaGrshin
committed
fix: исправлено отображение SVG иконок в списке ассетов
Заменён div с background-image на img для надёжного рендеринга SVG data URI. Анимации в AnimatedCellMoreButton переведены на CSS transitions.
1 parent e89dfe9 commit 3c8babb

File tree

3 files changed

+71
-83
lines changed

3 files changed

+71
-83
lines changed

‎src/components/Cells/Cell.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@
2020

2121
.image {
2222
border-radius: 50%;
23+
// Support both <img> and div with background-image
24+
object-fit: contain;
2325
background-size: contain;
26+
background-repeat: no-repeat;
27+
background-position: center;
2428
}
2529

2630
.icon {

‎src/components/Cells/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,11 @@ const CellStart = ({ type, src = null, iconType = null }) => {
3131
switch (type) {
3232
case "Image":
3333
content = (
34-
<div
34+
<img
35+
src={src}
36+
alt=""
3537
className={styles.image}
36-
style={{ backgroundImage: `url(${src})` }}
37-
></div>
38+
/>
3839
)
3940
break
4041
case "Icon":

‎src/pages/prototypes/Wallet/components/AnimatedCellMoreButton/index.js‎

Lines changed: 63 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import HiddenEye from "../../../../../icons/avatars/HiddenEyeIcon.svg"
1010
export default function AnimatedCellMoreButton({ onClick, state }) {
1111
const transition = TRANSITIONS.MATERIAL_STANDARD
1212

13+
const iconSize = useApple ? 40 : 42
1314
const jettonsSize = useApple
1415
? { position: "relative", width: "40px", height: "40px" }
1516
: {
@@ -19,69 +20,33 @@ export default function AnimatedCellMoreButton({ onClick, state }) {
1920
marginLeft: "-6px",
2021
}
2122

22-
const jettonsMotion = useApple
23-
? [
24-
{
25-
src: getAssetIcon("HMSTR"),
26-
variants: {
27-
collapsed: { scale: 0.6, top: "-6px", left: "-6px" },
28-
expanded: { scale: 1, opacity: 0, top: 0, left: 0 },
29-
},
30-
},
31-
{
32-
src: getAssetIcon("NOT"),
33-
variants: {
34-
collapsed: {
35-
scale: 0.6,
36-
opacity: 1,
37-
top: "6px",
38-
left: "6px",
39-
},
40-
expanded: { scale: 0, opacity: 0, top: 0, left: 0 },
41-
},
42-
},
43-
]
44-
: [
45-
{
46-
src: getAssetIcon("HMSTR"),
47-
variants: {
48-
collapsed: { scale: 0.6, top: "-6px", left: 0 },
49-
expanded: { scale: 1, top: 0, left: "6px" },
50-
},
51-
},
52-
{
53-
src: getAssetIcon("NOT"),
54-
variants: {
55-
collapsed: {
56-
scale: 0.6,
57-
opacity: 1,
58-
top: "6px",
59-
left: "12px",
60-
},
61-
expanded: { scale: 0, opacity: 0, top: 0, left: "18px" },
62-
},
63-
},
64-
]
23+
// HMSTR иконка — при expanded исчезает
24+
const hmstrStyles = useApple
25+
? {
26+
collapsed: { scale: 0.6, top: "-6px", left: "-6px", opacity: 1 },
27+
expanded: { scale: 1, top: 0, left: 0, opacity: 0 },
28+
}
29+
: {
30+
collapsed: { scale: 0.6, top: "-6px", left: 0, opacity: 1 },
31+
expanded: { scale: 1, top: 0, left: "6px", opacity: 0 },
32+
}
6533

66-
const HiddenEyeMotion = useApple
34+
// NOT иконка — при expanded исчезает
35+
const notStyles = useApple
6736
? {
68-
variants: {
69-
collapsed: {
70-
scale: 0.6,
71-
opacity: 0,
72-
top: "-6px",
73-
left: "-6px",
74-
},
75-
expanded: { scale: 1, opacity: 1, top: 0, left: 0 },
76-
},
37+
collapsed: { scale: 0.6, top: "6px", left: "6px", opacity: 1 },
38+
expanded: { scale: 0, top: 0, left: 0, opacity: 0 },
7739
}
7840
: {
79-
variants: {
80-
collapsed: { scale: 0.6, opacity: 0, top: "-6px", left: 0 },
81-
expanded: { scale: 1, opacity: 1, top: 0, left: "6px" },
82-
},
41+
collapsed: { scale: 0.6, top: "6px", left: "12px", opacity: 1 },
42+
expanded: { scale: 0, top: 0, left: "18px", opacity: 0 },
8343
}
8444

45+
const jettons = [
46+
{ src: getAssetIcon("HMSTR"), styles: hmstrStyles, zIndex: 2 },
47+
{ src: getAssetIcon("NOT"), styles: notStyles, zIndex: 1 },
48+
]
49+
8550
const variants = {
8651
TextMoreAssets: {
8752
collapsed: { opacity: 1, top: "calc(50% - 11px)" },
@@ -98,34 +63,52 @@ export default function AnimatedCellMoreButton({ onClick, state }) {
9863
<div className={cellStyles.root}>
9964
<div className={cellStyles.start}>
10065
<div className="assetIcon" style={jettonsSize}>
101-
<m.div
66+
<img
67+
src={HiddenEye}
68+
alt=""
10269
className={cellStyles.image}
103-
variants={HiddenEyeMotion.variants}
104-
transition={transition}
105-
animate={state ? "expanded" : "collapsed"}
10670
style={{
107-
backgroundImage: `url(${HiddenEye})`,
10871
position: "absolute",
10972
zIndex: 3,
73+
width: iconSize,
74+
height: iconSize,
75+
top: state ? 0 : "-6px",
76+
left: useApple
77+
? state
78+
? 0
79+
: "-6px"
80+
: state
81+
? "6px"
82+
: 0,
83+
opacity: state ? 1 : 0,
84+
transform: `scale(${state ? 1 : 0.6})`,
85+
transition: "all 0.3s ease",
11086
}}
111-
key={`stack-asset-3`}
112-
initial={false}
113-
></m.div>
114-
{jettonsMotion.map((jetton, index) => (
115-
<m.div
116-
className={cellStyles.image}
117-
variants={jetton.variants}
118-
transition={transition}
119-
animate={state ? "expanded" : "collapsed"}
120-
style={{
121-
backgroundImage: `url(${jetton.src})`,
122-
position: "absolute",
123-
zIndex: 2 - index,
124-
}}
125-
key={`stack-asset-${index}`}
126-
initial={false}
127-
></m.div>
128-
))}
87+
/>
88+
{jettons.map((jetton, index) => {
89+
const s = state
90+
? jetton.styles.expanded
91+
: jetton.styles.collapsed
92+
return (
93+
<img
94+
src={jetton.src}
95+
alt=""
96+
className={cellStyles.image}
97+
style={{
98+
position: "absolute",
99+
zIndex: jetton.zIndex,
100+
width: iconSize,
101+
height: iconSize,
102+
top: s.top,
103+
left: s.left,
104+
opacity: s.opacity,
105+
transform: `scale(${s.scale})`,
106+
transition: "all 0.3s ease",
107+
}}
108+
key={`stack-asset-${index}`}
109+
/>
110+
)
111+
})}
129112
</div>
130113
</div>
131114
<div

0 commit comments

Comments
 (0)