Skip to content

Commit 429cdb9

Browse files
enesozturkenesozturk
committed
refactor: handle multiple images with fallback icon, update stories
1 parent 1eb0c7e commit 429cdb9

File tree

3 files changed

+141
-9
lines changed

3 files changed

+141
-9
lines changed

‎apps/gallery/stories/composites/appkit-wui-transaction-visual.stories.ts‎

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/web-components'
22

33
import { html } from 'lit'
44

5+
import type { TransactionImage } from '@reown/appkit-common'
56
import '@reown/appkit-ui/wui-transaction-visual'
67
import type { WuiTransactionVisual } from '@reown/appkit-ui/wui-transaction-visual'
78

@@ -21,10 +22,6 @@ export default {
2122
{
2223
type: 'NFT',
2324
url: walletImagesOptions[0]?.src
24-
},
25-
{
26-
type: 'NFT',
27-
url: walletImagesOptions[1]?.src
2825
}
2926
]
3027
},
@@ -74,3 +71,109 @@ export const Default: Component = {
7471
></wui-transaction-visual>
7572
</gallery-container>`
7673
}
74+
75+
export const MultipleTransactions: Component = {
76+
render: args =>
77+
html` <gallery-container width="336">
78+
<wui-transaction-visual
79+
.type=${args.type}
80+
.status=${args.status}
81+
.direction=${args.direction}
82+
.onlyDirectionIcon=${args.onlyDirectionIcon}
83+
.images=${[
84+
{
85+
type: 'NFT' as const,
86+
url: walletImagesOptions[0]?.src
87+
},
88+
{
89+
type: 'NFT' as const,
90+
url: walletImagesOptions[1]?.src
91+
}
92+
] as TransactionImage[]}
93+
></wui-transaction-visual>
94+
</gallery-container>`
95+
}
96+
97+
export const FirstImageBroken: Component = {
98+
render: args =>
99+
html` <gallery-container width="336">
100+
<wui-transaction-visual
101+
.type=${args.type}
102+
.status=${args.status}
103+
.direction=${args.direction}
104+
.onlyDirectionIcon=${args.onlyDirectionIcon}
105+
.images=${[
106+
{
107+
type: 'NFT' as const,
108+
url: 'https://invalid-url-that-will-fail.com/image.png'
109+
},
110+
{
111+
type: 'NFT' as const,
112+
url: walletImagesOptions[1]?.src
113+
}
114+
] as TransactionImage[]}
115+
></wui-transaction-visual>
116+
</gallery-container>`
117+
}
118+
119+
export const SecondImageBroken: Component = {
120+
render: args =>
121+
html` <gallery-container width="336">
122+
<wui-transaction-visual
123+
.type=${args.type}
124+
.status=${args.status}
125+
.direction=${args.direction}
126+
.onlyDirectionIcon=${args.onlyDirectionIcon}
127+
.images=${[
128+
{
129+
type: 'NFT' as const,
130+
url: walletImagesOptions[0]?.src
131+
},
132+
{
133+
type: 'NFT' as const,
134+
url: 'https://invalid-url-that-will-fail.com/image.png'
135+
}
136+
] as TransactionImage[]}
137+
></wui-transaction-visual>
138+
</gallery-container>`
139+
}
140+
141+
export const BothImagesBroken: Component = {
142+
render: args =>
143+
html` <gallery-container width="336">
144+
<wui-transaction-visual
145+
.type=${args.type}
146+
.status=${args.status}
147+
.direction=${args.direction}
148+
.onlyDirectionIcon=${args.onlyDirectionIcon}
149+
.images=${[
150+
{
151+
type: 'NFT' as const,
152+
url: 'https://invalid-url-that-will-fail.com/image1.png'
153+
},
154+
{
155+
type: 'NFT' as const,
156+
url: 'https://invalid-url-that-will-fail.com/image2.png'
157+
}
158+
] as TransactionImage[]}
159+
></wui-transaction-visual>
160+
</gallery-container>`
161+
}
162+
163+
export const SingleImageBroken: Component = {
164+
render: args =>
165+
html` <gallery-container width="336">
166+
<wui-transaction-visual
167+
.type=${args.type}
168+
.status=${args.status}
169+
.direction=${args.direction}
170+
.onlyDirectionIcon=${args.onlyDirectionIcon}
171+
.images=${[
172+
{
173+
type: 'NFT' as const,
174+
url: 'https://invalid-url-that-will-fail.com/image.png'
175+
}
176+
] as TransactionImage[]}
177+
></wui-transaction-visual>
178+
</gallery-container>`
179+
}

‎packages/ui/src/composites/wui-transaction-visual/index.ts‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export class WuiTransactionVisual extends LitElement {
7676
return this.renderSwapImages(firstImage, secondImage)
7777
}
7878

79-
if (firstImage?.url) {
79+
if (firstImage?.url && !this.failedImageUrls.has(firstImage.url)) {
8080
return this.renderSingleImage(firstImage)
8181
}
8282

@@ -89,21 +89,28 @@ export class WuiTransactionVisual extends LitElement {
8989

9090
private renderSwapImages(firstImage?: TransactionImage, secondImage?: TransactionImage) {
9191
return html`<div class="swap-images-container">
92-
${firstImage?.url ? this.renderImageOrFallback(firstImage) : null}
93-
${secondImage?.url ? this.renderImageOrFallback(secondImage) : null}
92+
${firstImage?.url ? this.renderImageOrFallback(firstImage, true, 'first') : null}
93+
${secondImage?.url ? this.renderImageOrFallback(secondImage, true, 'last') : null}
9494
</div>`
9595
}
9696

9797
private renderSingleImage(image: TransactionImage) {
98-
return this.renderImageOrFallback(image)
98+
return this.renderImageOrFallback(image, false)
9999
}
100100

101-
private renderImageOrFallback(image: TransactionImage) {
101+
private renderImageOrFallback(
102+
image: TransactionImage,
103+
isInSwapContainer = false,
104+
position?: 'first' | 'last'
105+
) {
102106
if (!image.url) {
103107
return null
104108
}
105109

106110
if (this.failedImageUrls.has(image.url)) {
111+
if (isInSwapContainer && position) {
112+
return this.renderFallbackIconInContainer(position)
113+
}
107114
return this.renderFallbackIcon()
108115
}
109116

@@ -114,6 +121,10 @@ export class WuiTransactionVisual extends LitElement {
114121
></wui-image>`
115122
}
116123

124+
private renderFallbackIconInContainer(position: 'first' | 'last') {
125+
return html`<div class="swap-fallback-container ${position}">${this.renderFallbackIcon()}</div>`
126+
}
127+
117128
private renderFallbackIcon() {
118129
return html`<wui-icon
119130
size="xl"

‎packages/ui/src/composites/wui-transaction-visual/styles.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,24 @@ export default css`
5252
clip-path: inset(0px 0px 0px calc(50% + 2px));
5353
}
5454
55+
.swap-fallback-container {
56+
position: absolute;
57+
inset: 0;
58+
width: 40px;
59+
height: 40px;
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
}
64+
65+
.swap-fallback-container.first {
66+
clip-path: inset(0px calc(50% + 2px) 0px 0%);
67+
}
68+
69+
.swap-fallback-container.last {
70+
clip-path: inset(0px 0px 0px calc(50% + 2px));
71+
}
72+
5573
wui-flex.status-box {
5674
position: absolute;
5775
right: 0;

0 commit comments

Comments
 (0)