# Sequence diagram for prioritized connector selection (Base Account vs Coinbase)

[Dargon789]

Reviewer's Guide

This PR introduces robust fallback handling and visual polish for transaction activity UI, fixes a Base Account vs Coinbase connector selection bug by prioritizing connectors, enables TON activity tracking, adjusts TON message typings/connector behavior, and performs a coordinated 1.8.14 version/dependency bump across packages while relaxing CI visual regression failures to be non-blocking.

Sequence diagram for prioritized connector selection (Base Account vs Coinbase)

sequenceDiagram
  actor User
  participant UI
  participant ConnectorController
  participant ConnectorUtil
  participant Provider as WalletProvider

  User->>UI: Select wallet (Base Account or Coinbase)
  UI->>ConnectorController: getConnectorById(id)
  ConnectorController->>ConnectorController: read allConnectors
  ConnectorController->>ConnectorUtil: sortConnectorsByPriority(allConnectors)
  ConnectorUtil->>ConnectorUtil: getPriority(connector) for each
  ConnectorUtil-->>ConnectorController: sortedConnectors
  ConnectorController->>ConnectorController: find connector where id == id or explorerId == id
  ConnectorController-->>UI: connector
  UI->>WalletProvider: connect(connector)
  WalletProvider-->>UI: connection result

Loading

Sequence diagram for transaction image fallback handling in WuiTransactionVisual

sequenceDiagram
  actor User
  participant W3mActivityList
  participant WuiTransactionVisual
  participant WuiImage
  participant WuiIcon

  User->>W3mActivityList: Open activity page
  W3mActivityList->>WuiTransactionVisual: Render with images (TransactionImage[])
  WuiTransactionVisual->>WuiTransactionVisual: templateVisual()
  alt two images with URLs
    WuiTransactionVisual->>WuiTransactionVisual: renderSwapImages(firstImage, secondImage)
    WuiTransactionVisual->>WuiImage: renderImageOrFallback(firstImage, first, true)
    WuiTransactionVisual->>WuiImage: renderImageOrFallback(secondImage, last, true)
  else single image
    WuiTransactionVisual->>WuiImage: renderSingleImage(image)
  end

  WuiImage-->>WuiTransactionVisual: onLoadError(event)
  WuiTransactionVisual->>WuiTransactionVisual: handleImageError(url)
  WuiTransactionVisual->>WuiTransactionVisual: failedImageUrls.add(url)
  WuiTransactionVisual->>WuiTransactionVisual: requestUpdate()
  WuiTransactionVisual->>WuiTransactionVisual: templateVisual()
  alt image in swap container
    WuiTransactionVisual->>WuiIcon: renderFallbackIconInContainer(position)
  else single image
    WuiTransactionVisual->>WuiIcon: renderFallbackIcon()
  end

Loading

Class diagram for updated transaction visual and activity utilities

classDiagram
class WuiTransactionVisual {
  - images: TransactionImage[]
  - failedImageUrls: Set<string>
  + render()
  - templateVisual()
  - renderSwapImages(firstImage: TransactionImage, secondImage: TransactionImage)
  - renderSingleImage(image: TransactionImage)
  - renderImageOrFallback(image: TransactionImage, position: string, isInSwapContainer: boolean)
  - renderFallbackIconInContainer(position: string)
  - renderFallbackIcon()
  - renderPlaceholderIcon(iconName: string)
  - handleImageError(url: string)
}

class TransactionImage {
  + type: string
  + url: string
}

class W3mActivityList {
  - templateLoading()
  - getTransactionListItemProps(transaction: Transaction)
}

class TransactionUtil {
  + mergeTransfers(transfers: TransactionTransfer[]): TransactionTransfer[]
  + getTransactionDescriptions(transaction: Transaction, mergedTransfers: TransactionTransfer[] | null): string[] | string
  + filterGasFeeTransfers(transfers: TransactionTransfer[] | null): TransactionTransfer[]
}

class Transaction {
  + id: string
  + metadata: TransactionMetadata
  + transfers: TransactionTransfer[] | null
}

class TransactionTransfer {
  + fungible_info: any
  + nft_info: any
  + quantity: any
  + direction: string
}

class TransactionMetadata {
  + minedAt: string | null
  + operationType: string | null
}

WuiTransactionVisual --> TransactionImage : displays
W3mActivityList --> TransactionUtil : uses
W3mActivityList --> Transaction : renders
TransactionUtil --> Transaction : reads
TransactionUtil --> TransactionTransfer : processes

Loading

Class diagram for connector prioritization and TON activity enablement

classDiagram
class ConnectorUtil {
  + sortConnectorsByMostChains(connectors: ConnectorWithProviders[]): ConnectorWithProviders[]
  + getPriority(connector: ConnectorWithProviders): number
  + sortConnectorsByPriority(connectors: ConnectorWithProviders[]): ConnectorWithProviders[]
}

class ConnectorController {
  - state: ConnectorControllerState
  + getConnectorById(id: string): ConnectorWithProviders | undefined
  + getConnector(params: GetConnectorParams): ConnectorWithProviders | undefined
}

class ConnectorControllerState {
  + allConnectors: ConnectorWithProviders[]
}

class ConnectorWithProviders {
  + id: string
  + explorerId: string
  + chain: ChainNamespace
}

class CommonConstantsUtil {
  <<utility>>
}

class CommonConstantsUtil_CONNECTOR_ID {
  + BASE_ACCOUNT: string
  + COINBASE: string
  + COINBASE_SDK: string
}

class ConstantsUtil {
  + ACTIVITY_ENABLED_CHAIN_NAMESPACES: ChainNamespace[]
}

class ChainNamespace {
}

ConnectorController --> ConnectorControllerState : reads
ConnectorController --> ConnectorUtil : uses
ConnectorUtil --> ConnectorWithProviders : sorts
CommonConstantsUtil --> CommonConstantsUtil_CONNECTOR_ID : exposes
ConnectorUtil --> CommonConstantsUtil_CONNECTOR_ID : compares ids
ConstantsUtil --> ChainNamespace : lists

Loading

File-Level Changes

Change	Details	Files
Add robust image error handling and fallback icons for transaction visuals, including new Storybook cases and styling tweaks.	Track failed image URLs in the transaction visual component state and re-render with fallbacks on load error. Render appropriate placeholder or network icons when single or swap images fail, including half-container fallbacks for dual-image layouts. Adjust background and size-related styles for transaction visuals and add swap-fallback containers in CSS. Expand Storybook stories to cover multiple images and various broken-image scenarios for visual regression coverage.	packages/ui/src/composites/wui-transaction-visual/index.ts packages/ui/src/composites/wui-transaction-visual/styles.ts apps/gallery/stories/composites/appkit-wui-transaction-visual.stories.ts
Improve transaction activity list loading UX and shimmer animation styling.	Wrap the activity loading skeleton in a structured layout with a header shimmer and vertically stacked list item loaders. Add padding to transaction list item loaders for better spacing. Retune shimmer colors to use primary/secondary theme foregrounds and slow down the animation with a shorter travel distance.	packages/scaffold-ui/src/partials/w3m-activity-list/index.ts packages/ui/src/components/wui-shimmer/styles.ts packages/ui/src/composites/wui-transaction-list-item-loader/index.ts
Make transaction utilities resilient to missing/null transfers and extend TON activity support and message typings.	Guard TransactionUtil helpers against undefined or null transfer arrays by using optional chaining and safe defaults. Allow Transaction.transfers to be null and adjust spam-filtering logic accordingly in TransactionsController. Enable TON in ACTIVITY_ENABLED_CHAIN_NAMESPACES so TON transactions can appear in activity views. Extend TonTypesUtil message types to support payload, stateInit, and extraCurrency fields, and stop rewriting TonConnectConnector messages to a reduced shape.	packages/ui/src/utils/TransactionUtil.ts packages/common/src/utils/TypeUtil.ts packages/controllers/src/controllers/TransactionsController.ts packages/controllers/src/utils/ConstantsUtil.ts packages/appkit-utils/src/ton/TonTypesUtil.ts packages/adapters/ton/src/connectors/TonConnectConnector.ts
Fix Base Account vs Coinbase connector selection by introducing connector priorities and sorting, with tests.	Add ConnectorUtil.getPriority and sortConnectorsByPriority to enforce Base Account > Coinbase/Coinbase SDK > others ordering. Use prioritized connector lists in ConnectorController.getConnectorById and getConnector so Base Account is preferred when IDs collide. Add unit tests for ConnectorUtil sorting behavior across various connector combinations and edge cases. Update the changeset note to describe the Base Account / Coinbase selection fix instead of wallet search behavior.	packages/controllers/src/utils/ConnectorUtil.ts packages/controllers/src/controllers/ConnectorController.ts packages/controllers/tests/utils/ConnectorUtil.test.ts .changeset/vast-trams-pull.md
Relax Chromatic visual regression CI failures to be non-blocking and bump versions/dependencies for the 1.8.14 release.	Set Chromatic exitZeroOnChanges to true and remove the explicit failure step so visual diffs do not fail CI. Bump package versions from 1.8.13 (or earlier) to 1.8.14 across core libraries and adapters, updating PACKAGE_VERSION accordingly. Add 1.8.14 entries to multiple CHANGELOGs summarizing TON support, WalletConnect 2.23.0, wallet search improvements, and related changes. Update React, ReactDOM, Next.js, and related dependencies to newer patch versions across apps and examples, plus internal package peer/dev dependencies. Increment the pay-test-exchange app version and note the change in its CHANGELOG; add/update pnpm-lock.yaml accordingly.	.github/workflows/visual_regression_tests.yml packages/appkit/exports/constants.ts packages/appkit/package.json packages/controllers/package.json packages/appkit-utils/package.json packages/ui/package.json packages/scaffold-ui/package.json packages/polyfills/package.json packages/common/package.json packages/wallet/package.json packages/wallet-button/package.json packages/universal-connector/package.json packages/siwx/package.json packages/siwe/package.json packages/appkit-utils/CHANGELOG.md packages/appkit/CHANGELOG.md packages/controllers/CHANGELOG.md packages/ui/CHANGELOG.md packages/scaffold-ui/CHANGELOG.md packages/polyfills/CHANGELOG.md packages/common/CHANGELOG.md packages/wallet/CHANGELOG.md packages/wallet-button/CHANGELOG.md packages/universal-connector/CHANGELOG.md packages/siwx/CHANGELOG.md packages/siwe/CHANGELOG.md apps/pay-test-exchange/package.json apps/pay-test-exchange/CHANGELOG.md apps/demo/package.json apps/laboratory/package.json apps/gallery/package.json apps/browser-extension/package.json examples/**/*.package.json pnpm-lock.yaml

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

Originally posted by @sourcery-ai[bot] in #755 (comment)