()
+
+ // -- Private ------------------------------------------- //
+ private handleImageError(url: string) {
+ return (event: Event) => {
+ event.stopPropagation()
+ this.failedImageUrls.add(url)
+ this.requestUpdate()
+ }
+ }
+
// -- Render -------------------------------------------- //
public override render() {
const [firstImage, secondImage] = this.images
@@ -58,24 +70,73 @@ export class WuiTransactionVisual extends LitElement {
// -- Private ------------------------------------------- //
private templateVisual() {
const [firstImage, secondImage] = this.images
- const firstImageType = firstImage?.type
const hasTwoImages = this.images.length === 2
+
if (hasTwoImages && (firstImage?.url || secondImage?.url)) {
- return html`
- ${firstImage?.url
- ? html``
- : null}
- ${secondImage?.url
- ? html``
- : null}
-
`
- } else if (firstImage?.url) {
- return html``
- } else if (firstImageType === 'NFT') {
- return html``
+ return this.renderSwapImages(firstImage, secondImage)
+ }
+
+ if (firstImage?.url && !this.failedImageUrls.has(firstImage.url)) {
+ return this.renderSingleImage(firstImage)
+ }
+
+ if (firstImage?.type === 'NFT') {
+ return this.renderPlaceholderIcon('nftPlaceholder')
+ }
+
+ return this.renderPlaceholderIcon('coinPlaceholder')
+ }
+
+ private renderSwapImages(firstImage?: TransactionImage, secondImage?: TransactionImage) {
+ return html`
+ ${firstImage?.url ? this.renderImageOrFallback(firstImage, 'first', true) : null}
+ ${secondImage?.url ? this.renderImageOrFallback(secondImage, 'last', true) : null}
+
`
+ }
+
+ private renderSingleImage(image: TransactionImage) {
+ return this.renderImageOrFallback(image, undefined, false)
+ }
+
+ private renderImageOrFallback(
+ image: TransactionImage,
+ position?: 'first' | 'last',
+ isInSwapContainer = false
+ ) {
+ if (!image.url) {
+ return null
+ }
+
+ if (this.failedImageUrls.has(image.url)) {
+ if (isInSwapContainer && position) {
+ return this.renderFallbackIconInContainer(position)
+ }
+
+ return this.renderFallbackIcon()
}
- return html``
+ return html``
+ }
+
+ private renderFallbackIconInContainer(position: 'first' | 'last') {
+ return html`${this.renderFallbackIcon()}
`
+ }
+
+ private renderFallbackIcon() {
+ return html``
+ }
+
+ private renderPlaceholderIcon(iconName: 'nftPlaceholder' | 'coinPlaceholder') {
+ return html``
}
private templateIcon() {
diff --git a/packages/ui/src/composites/wui-transaction-visual/styles.ts b/packages/ui/src/composites/wui-transaction-visual/styles.ts
index 49e51e6d48..a6a0782425 100644
--- a/packages/ui/src/composites/wui-transaction-visual/styles.ts
+++ b/packages/ui/src/composites/wui-transaction-visual/styles.ts
@@ -9,7 +9,7 @@ export default css`
width: 40px;
height: 40px;
box-shadow: inset 0 0 0 1px ${({ tokens }) => tokens.core.glass010};
- background-color: ${({ tokens }) => tokens.core.glass010};
+ background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
}
:host([data-no-images='true']) > wui-flex {
@@ -32,11 +32,6 @@ export default css`
border-bottom-right-radius: var(--local-right-border-radius);
}
- wui-icon {
- width: 20px;
- height: 20px;
- }
-
.swap-images-container {
position: relative;
width: 40px;
@@ -57,6 +52,24 @@ export default css`
clip-path: inset(0px 0px 0px calc(50% + 2px));
}
+ .swap-fallback-container {
+ position: absolute;
+ inset: 0;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .swap-fallback-container.first {
+ clip-path: inset(0px calc(50% + 2px) 0px 0%);
+ }
+
+ .swap-fallback-container.last {
+ clip-path: inset(0px 0px 0px calc(50% + 2px));
+ }
+
wui-flex.status-box {
position: absolute;
right: 0;
diff --git a/packages/ui/src/utils/TransactionUtil.ts b/packages/ui/src/utils/TransactionUtil.ts
index 78d868fd28..d98893d5e6 100644
--- a/packages/ui/src/utils/TransactionUtil.ts
+++ b/packages/ui/src/utils/TransactionUtil.ts
@@ -66,10 +66,10 @@ export const TransactionUtil = {
const type = transaction?.metadata?.operationType as TransactionType
const transfers = mergedTransfers || transaction?.transfers
- const hasTransfer = transfers?.length > 0
- const hasMultipleTransfers = transfers?.length > 1
- const isFungible = hasTransfer && transfers?.every(transfer => Boolean(transfer?.fungible_info))
- const [firstTransfer, secondTransfer] = transfers
+ const hasTransfer = transfers && transfers.length > 0
+ const hasMultipleTransfers = transfers && transfers.length > 1
+ const isFungible = hasTransfer && transfers.every(transfer => Boolean(transfer?.fungible_info))
+ const [firstTransfer, secondTransfer] = transfers || []
let firstDescription = this.getTransferDescription(firstTransfer)
let secondDescription = this.getTransferDescription(secondTransfer)
@@ -98,7 +98,7 @@ export const TransactionUtil = {
}
if (hasMultipleTransfers) {
- return transfers.map(item => this.getTransferDescription(item))
+ return transfers?.map(item => this.getTransferDescription(item))
}
let prefix = ''
@@ -187,7 +187,7 @@ export const TransactionUtil = {
filterGasFeeTransfers(transfers: TransactionTransfer[]): TransactionTransfer[] {
// Group transfers by token name
- const tokenGroups = transfers.reduce>(
+ const tokenGroups = transfers?.reduce>(
(groups, transfer) => {
const tokenName = transfer?.fungible_info?.name
if (tokenName) {
@@ -204,7 +204,7 @@ export const TransactionUtil = {
const filteredTransfers: TransactionTransfer[] = []
- Object.values(tokenGroups).forEach(tokenTransfers => {
+ Object.values(tokenGroups ?? {}).forEach(tokenTransfers => {
if (tokenTransfers.length === 1) {
const firstTransfer = tokenTransfers[0]
if (firstTransfer) {
@@ -244,7 +244,7 @@ export const TransactionUtil = {
}
})
- transfers.forEach(transfer => {
+ transfers?.forEach(transfer => {
if (!transfer?.fungible_info?.name) {
filteredTransfers.push(transfer)
}
@@ -258,7 +258,7 @@ export const TransactionUtil = {
return tokenTransfers
}
- const amounts = tokenTransfers.map(t => Number(t.quantity.numeric))
+ const amounts = tokenTransfers?.map(t => Number(t.quantity.numeric))
const maxAmount = Math.max(...amounts)
const minAmount = Math.min(...amounts)
@@ -268,7 +268,7 @@ export const TransactionUtil = {
if (minAmount < maxAmount * extremeGasThreshold) {
// Filter out extremely small amounts that are likely gas fees
- const filtered = tokenTransfers.filter(t => {
+ const filtered = tokenTransfers?.filter(t => {
const amount = Number(t.quantity.numeric)
return amount >= maxAmount * extremeGasThreshold
@@ -278,8 +278,8 @@ export const TransactionUtil = {
}
// If no extremely small amounts, apply standard gas fee logic
- const inTransfers = tokenTransfers.filter(t => t.direction === 'in')
- const outTransfers = tokenTransfers.filter(t => t.direction === 'out')
+ const inTransfers = tokenTransfers?.filter(t => t.direction === 'in')
+ const outTransfers = tokenTransfers?.filter(t => t.direction === 'out')
if (inTransfers.length === 1 && outTransfers.length === 1) {
const inTransfer = inTransfers[0]
diff --git a/packages/universal-connector/CHANGELOG.md b/packages/universal-connector/CHANGELOG.md
index b5a748f20e..bb8f0c9cfa 100644
--- a/packages/universal-connector/CHANGELOG.md
+++ b/packages/universal-connector/CHANGELOG.md
@@ -1,5 +1,17 @@
# @reown/appkit-universal-connector
+## 1.8.15
+
+### Patch Changes
+
+- [#5378](https://github.com/reown-com/appkit/pull/5378) [`2867bfd`](https://github.com/reown-com/appkit/commit/2867bfd3f06394e559b918d46dc379dd498d1abf) Thanks [@magiziz](https://github.com/magiziz)! - Fixed an issue where profile wallets tabs were shown in the wrong order
+
+- [#5364](https://github.com/reown-com/appkit/pull/5364) [`d186212`](https://github.com/reown-com/appkit/commit/d1862126d3b7da93b52b99a4d709656311926c34) Thanks [@magiziz](https://github.com/magiziz)! - Fixed an issue where wallet buttons were not working in the in-app wallet browser
+
+- Updated dependencies [[`2867bfd`](https://github.com/reown-com/appkit/commit/2867bfd3f06394e559b918d46dc379dd498d1abf), [`ecf1794`](https://github.com/reown-com/appkit/commit/ecf1794d555806e376ab2253b48ab2b185e85a10), [`d186212`](https://github.com/reown-com/appkit/commit/d1862126d3b7da93b52b99a4d709656311926c34), [`e330f62`](https://github.com/reown-com/appkit/commit/e330f62532f95683ed69bdb0f4fef77f3039df30)]:
+ - @reown/appkit@1.8.15
+ - @reown/appkit-common@1.8.15
+
## 1.8.14
### Patch Changes
diff --git a/packages/universal-connector/package.json b/packages/universal-connector/package.json
index c88a90d339..52c02d7865 100644
--- a/packages/universal-connector/package.json
+++ b/packages/universal-connector/package.json
@@ -1,6 +1,6 @@
{
"name": "@reown/appkit-universal-connector",
- "version": "1.8.14",
+ "version": "1.8.15",
"sideEffects": false,
"type": "module",
"main": "./dist/esm/index.js",
diff --git a/packages/wallet-button/CHANGELOG.md b/packages/wallet-button/CHANGELOG.md
index a1d137f344..47a56f18fe 100644
--- a/packages/wallet-button/CHANGELOG.md
+++ b/packages/wallet-button/CHANGELOG.md
@@ -1,5 +1,62 @@
# @reown/appkit-wallet-button
+## 1.8.15
+
+### Patch Changes
+
+- [#5378](https://github.com/reown-com/appkit/pull/5378) [`2867bfd`](https://github.com/reown-com/appkit/commit/2867bfd3f06394e559b918d46dc379dd498d1abf) Thanks [@magiziz](https://github.com/magiziz)! - Fixed an issue where profile wallets tabs were shown in the wrong order
+
+- [#5364](https://github.com/reown-com/appkit/pull/5364) [`d186212`](https://github.com/reown-com/appkit/commit/d1862126d3b7da93b52b99a4d709656311926c34) Thanks [@magiziz](https://github.com/magiziz)! - Fixed an issue where wallet buttons were not working in the in-app wallet browser
+
+- [#5297](https://github.com/reown-com/appkit/pull/5297) [`e330f62`](https://github.com/reown-com/appkit/commit/e330f62532f95683ed69bdb0f4fef77f3039df30) Thanks [@enesozturk](https://github.com/enesozturk)! - Implements new `useAppKitWallets` hook to let users build custom connect user interfaces.
+
+ ### Features
+
+ - List, and connect with extension wallets.
+ - List, search and connect the WalletConnect wallets.
+ - Multi-chain.
+ - Multi-platform.
+
+ ### Examples
+
+ **Listing injected wallets:**
+
+ ```tsx
+ const { data } = useAppKitWallets()
+
+ const injectedWallets = data.filter(wallet => wallet.isInjected)
+
+ injectedWallets.map(wallet => {
+ return
+ })
+ ```
+
+ **Listing WalletConnect wallets:**
+
+ ```tsx
+ const { data } = useAppKitWallets()
+
+ const wcWallets = data.filter(wallet => !wallet.isInjected)
+
+ wcWallets.map(wallet => {
+ return
+ })
+ ```
+
+ **Connecting to a wallet:**
+
+ ```tsx
+ const { connect } = useAppKitWallets()
+ ...
+ await connect(wallet)
+ ```
+
+- Updated dependencies [[`2867bfd`](https://github.com/reown-com/appkit/commit/2867bfd3f06394e559b918d46dc379dd498d1abf), [`ecf1794`](https://github.com/reown-com/appkit/commit/ecf1794d555806e376ab2253b48ab2b185e85a10), [`d186212`](https://github.com/reown-com/appkit/commit/d1862126d3b7da93b52b99a4d709656311926c34), [`e330f62`](https://github.com/reown-com/appkit/commit/e330f62532f95683ed69bdb0f4fef77f3039df30)]:
+ - @reown/appkit-utils@1.8.15
+ - @reown/appkit-common@1.8.15
+ - @reown/appkit-controllers@1.8.15
+ - @reown/appkit-ui@1.8.15
+
## 1.8.14
### Patch Changes
diff --git a/packages/wallet-button/package.json b/packages/wallet-button/package.json
index 1e9949a2ff..7c3d50212b 100644
--- a/packages/wallet-button/package.json
+++ b/packages/wallet-button/package.json
@@ -1,6 +1,6 @@
{
"name": "@reown/appkit-wallet-button",
- "version": "1.8.14",
+ "version": "1.8.15",
"type": "module",
"main": "./dist/esm/exports/index.js",
"types": "./dist/types/exports/index.d.ts",
diff --git a/packages/wallet/CHANGELOG.md b/packages/wallet/CHANGELOG.md
index 9b67f4336c..3a25a053c2 100644
--- a/packages/wallet/CHANGELOG.md
+++ b/packages/wallet/CHANGELOG.md
@@ -1,5 +1,17 @@
# @reown/appkit-wallet
+## 1.8.15
+
+### Patch Changes
+
+- [#5378](https://github.com/reown-com/appkit/pull/5378) [`2867bfd`](https://github.com/reown-com/appkit/commit/2867bfd3f06394e559b918d46dc379dd498d1abf) Thanks [@magiziz](https://github.com/magiziz)! - Fixed an issue where profile wallets tabs were shown in the wrong order
+
+- [#5364](https://github.com/reown-com/appkit/pull/5364) [`d186212`](https://github.com/reown-com/appkit/commit/d1862126d3b7da93b52b99a4d709656311926c34) Thanks [@magiziz](https://github.com/magiziz)! - Fixed an issue where wallet buttons were not working in the in-app wallet browser
+
+- Updated dependencies [[`2867bfd`](https://github.com/reown-com/appkit/commit/2867bfd3f06394e559b918d46dc379dd498d1abf), [`d186212`](https://github.com/reown-com/appkit/commit/d1862126d3b7da93b52b99a4d709656311926c34)]:
+ - @reown/appkit-common@1.8.15
+ - @reown/appkit-polyfills@1.8.15
+
## 1.8.14
### Patch Changes
diff --git a/packages/wallet/package.json b/packages/wallet/package.json
index f5e442ed16..74878f6e65 100644
--- a/packages/wallet/package.json
+++ b/packages/wallet/package.json
@@ -1,6 +1,6 @@
{
"name": "@reown/appkit-wallet",
- "version": "1.8.14",
+ "version": "1.8.15",
"sideEffects": false,
"type": "module",
"main": "./dist/esm/exports/index.js",