Skip to content

Commit 63de47a

Browse files
tomiirtomiir
authored
Merge branch 'main' into dependabot/npm_and_yarn/next-15.4.8
2 parents 121044d + 6d5a73d commit 63de47a

File tree

10 files changed

+238
-51
lines changed

10 files changed

+238
-51
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://lab.reown.com/invalid-image-url.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://lab.reown.com/invalid-image-url.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://lab.reown.com/invalid-image-url.png'
153+
},
154+
{
155+
type: 'NFT' as const,
156+
url: 'https://lab.reown.com/invalid-image-url2.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://lab.reown.com/invalid-image-url.png'
175+
}
176+
] as TransactionImage[]}
177+
></wui-transaction-visual>
178+
</gallery-container>`
179+
}

‎packages/common/src/utils/TypeUtil.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export type TransactionImage = {
8686
export interface Transaction {
8787
id: string
8888
metadata: TransactionMetadata
89-
transfers: TransactionTransfer[]
89+
transfers: TransactionTransfer[] | null
9090
}
9191

9292
export interface TransactionMetadata {

‎packages/controllers/src/controllers/TransactionsController.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const controller = {
125125

126126
filterSpamTransactions(transactions: Transaction[]) {
127127
return transactions.filter(transaction => {
128-
const isAllSpam = transaction.transfers.every(
128+
const isAllSpam = transaction.transfers?.every(
129129
transfer => transfer.nft_info?.flags.is_spam === true
130130
)
131131

‎packages/controllers/src/utils/ConstantsUtil.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,10 @@ export const ConstantsUtil = {
193193
CommonConstantsUtil.CHAIN.EVM,
194194
CommonConstantsUtil.CHAIN.SOLANA
195195
] as ChainNamespace[],
196-
ACTIVITY_ENABLED_CHAIN_NAMESPACES: [CommonConstantsUtil.CHAIN.EVM] as ChainNamespace[],
196+
ACTIVITY_ENABLED_CHAIN_NAMESPACES: [
197+
CommonConstantsUtil.CHAIN.EVM,
198+
CommonConstantsUtil.CHAIN.TON
199+
] as ChainNamespace[],
197200
NATIVE_TOKEN_ADDRESS: {
198201
eip155: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
199202
solana: 'So11111111111111111111111111111111111111111',

‎packages/scaffold-ui/src/partials/w3m-activity-list/index.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -242,9 +242,16 @@ export class W3mActivityList extends LitElement {
242242

243243
private templateLoading() {
244244
if (this.page === 'activity') {
245-
return Array(LOADING_ITEM_COUNT)
246-
.fill(html` <wui-transaction-list-item-loader></wui-transaction-list-item-loader> `)
247-
.map(item => item)
245+
return html` <wui-flex flexDirection="column" width="100%">
246+
<wui-flex .padding=${['2', '3', '3', '3'] as const}>
247+
<wui-shimmer width="70px" height="16px" rounded></wui-shimmer>
248+
</wui-flex>
249+
<wui-flex flexDirection="column" gap="2" width="100%">
250+
${Array(LOADING_ITEM_COUNT)
251+
.fill(html` <wui-transaction-list-item-loader></wui-transaction-list-item-loader> `)
252+
.map(item => item)}
253+
</wui-flex>
254+
</wui-flex>`
248255
}
249256

250257
return null
@@ -288,7 +295,7 @@ export class W3mActivityList extends LitElement {
288295

289296
private getTransactionListItemProps(transaction: Transaction) {
290297
const date = DateUtil.formatDate(transaction?.metadata?.minedAt)
291-
const transfers = TransactionUtil.mergeTransfers(transaction?.transfers)
298+
const transfers = TransactionUtil.mergeTransfers(transaction?.transfers || [])
292299
const descriptions = TransactionUtil.getTransactionDescriptions(transaction, transfers)
293300
const transfer = transfers?.[0]
294301
const isAllNFT = Boolean(transfer) && transfers?.every(item => Boolean(item.nft_info))

‎packages/ui/src/components/wui-shimmer/styles.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ export default css`
55
display: block;
66
background: linear-gradient(
77
90deg,
8-
${({ tokens }) => tokens.theme.foregroundSecondary} 0%,
9-
${({ tokens }) => tokens.theme.foregroundTertiary} 50%,
10-
${({ tokens }) => tokens.theme.foregroundSecondary} 100%
8+
${({ tokens }) => tokens.theme.foregroundPrimary} 0%,
9+
${({ tokens }) => tokens.theme.foregroundSecondary} 50%,
10+
${({ tokens }) => tokens.theme.foregroundPrimary} 100%
1111
);
1212
background-size: 200% 100%;
13-
animation: shimmer 1s ease-in-out infinite;
13+
animation: shimmer 2s linear infinite;
1414
border-radius: ${({ borderRadius }) => borderRadius[2]};
1515
}
1616
@@ -20,10 +20,10 @@ export default css`
2020
2121
@keyframes shimmer {
2222
0% {
23-
background-position: 200% 0;
23+
background-position: 100% 0;
2424
}
2525
100% {
26-
background-position: -200% 0;
26+
background-position: -100% 0;
2727
}
2828
}
2929
`

‎packages/ui/src/composites/wui-transaction-list-item-loader/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class WuiTransactionListItemLoader extends LitElement {
1515
// -- Render -------------------------------------------- //
1616
public override render() {
1717
return html`
18-
<wui-flex alignItems="center">
18+
<wui-flex alignItems="center" .padding=${['1', '2', '1', '2'] as const}>
1919
<wui-shimmer width="40px" height="40px" rounded></wui-shimmer>
2020
<wui-flex flexDirection="column" gap="1">
2121
<wui-shimmer width="124px" height="16px" rounded></wui-shimmer>

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

Lines changed: 76 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { LitElement, html } from 'lit'
2-
import { property } from 'lit/decorators.js'
2+
import { property, state } from 'lit/decorators.js'
33

44
import type {
55
TransactionDirection,
66
TransactionImage,
77
TransactionStatus
88
} from '@reown/appkit-common'
99

10+
import '../../components/wui-icon/index.js'
1011
import '../../components/wui-image/index.js'
1112
import type { IconColorType, TransactionIconType, TransactionType } from '../../utils/TypeUtil.js'
1213
import { customElement } from '../../utils/WebComponentsUtil.js'
@@ -33,6 +34,17 @@ export class WuiTransactionVisual extends LitElement {
3334
url: ''
3435
}
3536

37+
@state() private failedImageUrls = new Set<string>()
38+
39+
// -- Private ------------------------------------------- //
40+
private handleImageError(url: string) {
41+
return (event: Event) => {
42+
event.stopPropagation()
43+
this.failedImageUrls.add(url)
44+
this.requestUpdate()
45+
}
46+
}
47+
3648
// -- Render -------------------------------------------- //
3749
public override render() {
3850
const [firstImage, secondImage] = this.images
@@ -58,24 +70,73 @@ export class WuiTransactionVisual extends LitElement {
5870
// -- Private ------------------------------------------- //
5971
private templateVisual() {
6072
const [firstImage, secondImage] = this.images
61-
const firstImageType = firstImage?.type
6273
const hasTwoImages = this.images.length === 2
74+
6375
if (hasTwoImages && (firstImage?.url || secondImage?.url)) {
64-
return html`<div class="swap-images-container">
65-
${firstImage?.url
66-
? html`<wui-image src=${firstImage.url} alt="Transaction image"></wui-image>`
67-
: null}
68-
${secondImage?.url
69-
? html`<wui-image src=${secondImage.url} alt="Transaction image"></wui-image>`
70-
: null}
71-
</div>`
72-
} else if (firstImage?.url) {
73-
return html`<wui-image src=${firstImage.url} alt="Transaction image"></wui-image>`
74-
} else if (firstImageType === 'NFT') {
75-
return html`<wui-icon size="inherit" color="default" name="nftPlaceholder"></wui-icon>`
76+
return this.renderSwapImages(firstImage, secondImage)
77+
}
78+
79+
if (firstImage?.url && !this.failedImageUrls.has(firstImage.url)) {
80+
return this.renderSingleImage(firstImage)
81+
}
82+
83+
if (firstImage?.type === 'NFT') {
84+
return this.renderPlaceholderIcon('nftPlaceholder')
85+
}
86+
87+
return this.renderPlaceholderIcon('coinPlaceholder')
88+
}
89+
90+
private renderSwapImages(firstImage?: TransactionImage, secondImage?: TransactionImage) {
91+
return html`<div class="swap-images-container">
92+
${firstImage?.url ? this.renderImageOrFallback(firstImage, 'first', true) : null}
93+
${secondImage?.url ? this.renderImageOrFallback(secondImage, 'last', true) : null}
94+
</div>`
95+
}
96+
97+
private renderSingleImage(image: TransactionImage) {
98+
return this.renderImageOrFallback(image, undefined, false)
99+
}
100+
101+
private renderImageOrFallback(
102+
image: TransactionImage,
103+
position?: 'first' | 'last',
104+
isInSwapContainer = false
105+
) {
106+
if (!image.url) {
107+
return null
108+
}
109+
110+
if (this.failedImageUrls.has(image.url)) {
111+
if (isInSwapContainer && position) {
112+
return this.renderFallbackIconInContainer(position)
113+
}
114+
115+
return this.renderFallbackIcon()
76116
}
77117

78-
return html`<wui-icon size="inherit" color="default" name="coinPlaceholder"></wui-icon>`
118+
return html`<wui-image
119+
src=${image.url}
120+
alt="Transaction image"
121+
@onLoadError=${this.handleImageError(image.url)}
122+
></wui-image>`
123+
}
124+
125+
private renderFallbackIconInContainer(position: 'first' | 'last') {
126+
return html`<div class="swap-fallback-container ${position}">${this.renderFallbackIcon()}</div>`
127+
}
128+
129+
private renderFallbackIcon() {
130+
return html`<wui-icon
131+
size="xl"
132+
weight="regular"
133+
color="default"
134+
name="networkPlaceholder"
135+
></wui-icon>`
136+
}
137+
138+
private renderPlaceholderIcon(iconName: 'nftPlaceholder' | 'coinPlaceholder') {
139+
return html`<wui-icon size="xl" weight="regular" color="default" name=${iconName}></wui-icon>`
79140
}
80141

81142
private templateIcon() {

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

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default css`
99
width: 40px;
1010
height: 40px;
1111
box-shadow: inset 0 0 0 1px ${({ tokens }) => tokens.core.glass010};
12-
background-color: ${({ tokens }) => tokens.core.glass010};
12+
background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
1313
}
1414
1515
:host([data-no-images='true']) > wui-flex {
@@ -32,11 +32,6 @@ export default css`
3232
border-bottom-right-radius: var(--local-right-border-radius);
3333
}
3434
35-
wui-icon {
36-
width: 20px;
37-
height: 20px;
38-
}
39-
4035
.swap-images-container {
4136
position: relative;
4237
width: 40px;
@@ -57,6 +52,24 @@ export default css`
5752
clip-path: inset(0px 0px 0px calc(50% + 2px));
5853
}
5954
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+
6073
wui-flex.status-box {
6174
position: absolute;
6275
right: 0;

0 commit comments

Comments
 (0)