fix(core): load wallet & network images on React Native

[ignaciosantise]

Problem

Wallet and network logos in the connect modal never load on React Native — the list shows only placeholder icons on both iOS and Android (wallet names load fine, since those come from plain JSON).

Root cause is in FetchUtil.fetchImage (packages/core/src/utils/FetchUtil.ts), which builds the image data URL with response.blob() + FileReader.readAsDataURL:

const blob = await response.blob();      // ← throws on RN for binary bodies
const reader = new FileReader();
reader.readAsDataURL(blob);

On React Native, fetch(...).blob() for a binary (image) response throws:

Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported

RN's Blob implementation can't be constructed from an ArrayBuffer body, so the promise rejects, fetchImage returns undefined, and AssetUtil.getWalletImage falls back to the placeholder. This is the only .blob() usage in the codebase.

Observed with Expo SDK 56 / React Native 0.85.3 (New Architecture), @reown/appkit-*@2.0.5. The image fetch itself succeeds (HTTP 200, content-type: image/webp); only the blob() step fails.

Fix

Read the response as an ArrayBuffer and base64-encode it into the data URL, avoiding Blob/FileReader entirely:

const arrayBuffer = await response.arrayBuffer();
const contentType = response.headers.get('content-type') ?? 'image/png';
return `data:${contentType};base64,${FetchUtil._arrayBufferToBase64(arrayBuffer)}`;

The base64 encoder is dependency-free — React Native guarantees neither a global Buffer nor btoa, so relying on either would be fragile for a library.

Tests

Adds unit tests for fetchImage (ArrayBuffer → base64 data URL, default content-type, blob() not called, error → undefined). Full packages/core suite passes:

Tests:       17 passed, 17 total

Verification

Patched into a multichain AppKit + wagmi app on Expo SDK 56 / RN 0.85.3:

• Android: wallet logos (Binance, MetaMask, SafePal, Trust Wallet, …) render; zero blob errors.
• iOS: zero blob errors after the fix.

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: ee0c466

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@reown/appkit-core-react-native	Patch
@reown/appkit-react-native	Patch
@reown/appkit-ethers-react-native	Patch
@reown/appkit-wagmi-react-native	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[claude]

Claude finished @ignaciosantise's task in 2m 42s —— View job

---

Code Review

• Gather context (read changed files)
• Check for breaking changes — none found
• Analyze issues

Found 1 issue(s)

Issue 1: fetchImage encodes error-response bodies as image data URLs

ID: fetchutil-fetchimage-ok-check-a3f1
File: packages/core/src/utils/FetchUtil.ts:89
Severity: MEDIUM
Category: correctness

Context:

• Pattern: fetchImage calls response.arrayBuffer() without first checking response.ok. processResponse (used by get/post/etc.) does guard with response.ok; fetchImage is inconsistent.
• Risk: For 4xx/5xx responses the error body is base64-encoded and returned as a data URL (e.g. data:application/json;base64,...) instead of undefined. The catch block never fires because arrayBuffer() itself succeeds on non-ok responses.
• Impact: Callers receive a syntactically valid but semantically garbage data URL. The RN Image component attempts (and silently fails) to render it rather than falling back to the placeholder as intended.
• Trigger: Any image URL returning a non-2xx status (CDN 404, rate-limit 429, etc.).

Recommendation:

const response = await fetch(url, { headers });
if (!response.ok) {
  return undefined;
}
const arrayBuffer = await response.arrayBuffer();

Fix this →

[github-actions]

🤖 Auto Review Issue: fetchImage encodes error-response bodies as image data URLs

Severity: MEDIUM
Category: correctness
Tool: Claude Auto Review

Context:

• Pattern: fetchImage calls response.arrayBuffer() without first checking response.ok. processResponse (used by get/post/etc.) does guard with response.ok; fetchImage is inconsistent.
• Risk: For 4xx/5xx responses the error body is base64-encoded and returned as a data URL (e.g. data:application/json;base64,...) instead of undefined. The catch block never fires because arrayBuffer() itself succeeds on non-ok responses.
• Impact: Callers receive a syntactically valid but semantically garbage data URL. The RN Image component attempts (and silently fails) to render it rather than falling back to the placeholder as intended.
• Trigger: Any image URL returning a non-2xx status (CDN 404, rate-limit 429, etc.).

Recommendation:

const response = await fetch(url, { headers });
if (!response.ok) {
  return undefined;
}
const arrayBuffer = await response.arrayBuffer();

Fix this →

[ignaciosantise]

Good catch — this is valid. fetchImage does not guard on response.ok, so a 4xx/5xx would get base64-encoded into a data URL and RN's Image would fail silently instead of falling back to the placeholder.

Note this is not a regression — the previous blob() version had the same gap — but since we're rewriting this block it's the right place to fix it. Will add the if (!response.ok) return undefined; guard before arrayBuffer() (plus a test).