@onekeyfe/react-native-native-list 3.0.105 → 3.0.106

package/lib/module/web/NativeListWebEngine.js

@@ -3,7 +3,13 @@
 import { checkboxStateForKeys, checkboxStateForSection, isSelectableRow, reduceSelection, selectionStateFromSnapshot } from "../selection.js";
 import { calculateAlignedScrollOffset, resolveLocationIndex, scrollFailure, validateOffset } from "../scrolling.js";
 import { applyRowPatches, validateSnapshot } from "../validation.js";
-const SECTION_INDEX_GUTTER = 44;
+import { avatarPrefetchWindow } from "../avatarPrefetch.js";
+import { acquireNativeListAvatar, canonicalNativeListAvatarUri } from "./NativeListWebAvatarCache.js";
+const SECTION_INDEX_CONTENT_INSET = 16;
+const SECTION_INDEX_RAIL_WIDTH = 32;
+const SECTION_INDEX_EDGE_PADDING = 8;
+const SECTION_INDEX_MIN_LABEL_SPACING = 14;
+const SECTION_INDEX_MIN_HEIGHT = 120;
 const DEFAULT_VIEWPORT_WIDTH = 320;
 const DEFAULT_VIEWPORT_HEIGHT = 640;
 const OVERSCAN_VIEWPORTS = 1;
@@ -147,9 +153,22 @@ function approximateMessageHeight(row, availableWidth) {
   return 32 + titleLines * 20 + bodyLines * 20 + 22;
 }
 export function estimateWebRowHeight(row, snapshot, availableWidth) {
-  if (row.type === 'system' && row.variant === 'spacer') return row.height;
-  if (row.type === 'walletGroup') return (row.children.length + 1) * 68 + row.children.length * 12;
-  if (row.type === 'identity' && row.presentation === 'walletSidebar') return 68;
+  // OneKey patch: explicit selector height takes precedence over presets.
+  // if (row.type === 'system' && row.variant === 'spacer') return row.height;
+  if (row.height !== undefined) return row.height;
+  if (row.type === 'system' && row.variant === 'warning') {
+    const width = Math.max(1, availableWidth - 24);
+    const lines = text => Math.max(1, Math.ceil(Array.from(text).reduce((length, char) => length + (char.charCodeAt(0) > 255 ? 14 : 7), 0) / width));
+    return 32 + 20 * (lines(row.title) + lines(row.message));
+  }
+  if (row.type === 'walletGroup')
+    // OneKey patch: wallet badges participate in the outer group height.
+    // return (row.children.length + 1) * 68 + row.children.length * 12;
+    return [row.parent, ...row.children].reduce((height, member) => height + estimateWebRowHeight(member, snapshot, availableWidth), 0) + row.children.length * 12 + (row.parent.height !== undefined ? 2 : 0);
+  // OneKey patch: reserve the source badge line below wallet names.
+  // if (row.type === 'identity' && row.presentation === 'walletSidebar')
+  // return 68;
+  if (row.type === 'identity' && row.presentation === 'walletSidebar') return 68 + (row.badges?.length ? 24 : 0);
   if (row.type === 'identity' && row.presentation === 'networkSelector') return 47;
   if (row.type === 'identity' && row.presentation === 'accountSelector') return 58;
   let base;
@@ -208,9 +227,10 @@ export function computeWebListLayout(snapshot, viewportWidth, viewportHeight, co
   const horizontal = snapshot.layout.orientation === 'horizontal';
   const spacing = snapshot.layout.itemSpacing ?? 0;
   const padding = paddingValues(snapshot);
-  const indexGutter = sectionIndexEnabled(snapshot) ? SECTION_INDEX_GUTTER : 0;
   const width = Math.max(1, viewportWidth || DEFAULT_VIEWPORT_WIDTH);
   const height = Math.max(1, viewportHeight || DEFAULT_VIEWPORT_HEIGHT);
+  // OneKey patch: the index overlays the content and only keeps a small accessory-safe inset.
+  const indexGutter = sectionIndexEnabled(snapshot) && height >= SECTION_INDEX_MIN_HEIGHT ? SECTION_INDEX_CONTENT_INSET : 0;
   const availableWidth = Math.max(1, width - padding.horizontal * 2 - indexGutter);
   const availableHeight = Math.max(1, height - padding.top - padding.bottom);
   const items = [];
@@ -371,7 +391,10 @@ function rowWithoutSelectionState(row) {
 export function webRowRenderSignature(row) {
   return JSON.stringify(rowWithoutSelectionState(row));
 }
+
+// OneKey patch: selector names must shrink before the sidebar clips their contents.
 export const WEB_LIST_CSS = `
+[data-native-list-selector="walletSidebar"] .ok-native-list-title{max-width:100%;min-width:0}
 .ok-native-list-root{--nl-bg:#f7f7f7;--nl-row:#fff;--nl-selected:#eaf2ff;--nl-pressed:#e8e8e8;--nl-subdued:#f9f9f9;--nl-strong:#0000000f;--nl-primary:#111;--nl-secondary:#6b7280;--nl-disabled:#8d8d8d;--nl-icon:#111;--nl-icon-subdued:#8d8d8d;--nl-separator:#e5e7eb;--nl-accent:#2f6bff;--nl-positive:#15803d;--nl-negative:#dc2626;--nl-critical:#feecec;--nl-inverse:#202020;--nl-inverse-text:#fcfcfc;--nl-info:#0d74ce;position:absolute;inset:0;display:flex;min-width:0;min-height:0;overflow:hidden;background:var(--nl-bg);color:var(--nl-primary);font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
 .ok-native-list-viewport-frame{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}
 .ok-native-list-viewport{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
@@ -382,6 +405,7 @@ export const WEB_LIST_CSS = `
 .ok-native-list-item[data-native-list-selected="true"]>.ok-native-list-row{background:var(--nl-selected)}
 .ok-native-list-item[data-native-list-disabled="true"]>.ok-native-list-row{opacity:.5;cursor:default}
 .ok-native-list-item:not([data-native-list-disabled="true"]):hover>.ok-native-list-row{background:var(--nl-pressed)}
+.ok-native-list-item:not([data-native-list-disabled="true"]):active>.ok-native-list-row{background:var(--nl-pressed)}
 .ok-native-list-item:not([data-native-list-disabled="true"]):not([data-native-list-selected="true"]):hover>.ok-native-list-wallet-row{background:var(--nl-strong)}
 .ok-native-list-item:not([data-native-list-disabled="true"]):not([data-native-list-selected="true"]):active>.ok-native-list-wallet-row{background:var(--nl-pressed)}
 .ok-native-list-item[data-native-list-selected="true"]:hover>.ok-native-list-wallet-row{background:var(--nl-selected)}
@@ -424,9 +448,29 @@ export const WEB_LIST_CSS = `
 .ok-native-list-media{display:block;padding:0 5px;background:transparent;border-radius:16px}.ok-native-list-media-image{display:block;width:100%;aspect-ratio:1;border-radius:10px;background:var(--nl-strong);object-fit:cover}.ok-native-list-media-image[data-state="empty"]{background:transparent}.ok-native-list-media-image[data-state="error"]{display:flex;align-items:center;justify-content:center;color:var(--nl-icon-subdued);font-size:24px}.ok-native-list-media-meta{padding-top:7px}.ok-native-list-media-subtitle-row{display:flex;align-items:center;gap:6px}.ok-native-list-media-subtitle{flex:1;min-width:0;font-size:12px;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-media-network{width:14px;height:14px;border-radius:50%}.ok-native-list-media-title{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-media-close{position:absolute;right:9px;top:4px;border:0;background:color-mix(in srgb,var(--nl-inverse) 72%,transparent);color:var(--nl-inverse-text);width:24px;height:24px;border-radius:50%;font:18px/20px inherit;cursor:pointer}
 .ok-native-list-metric{display:flex;flex-direction:column;align-items:flex-start;padding:12px;border-radius:12px;gap:5px;background:var(--nl-row)}.ok-native-list-metric-value{font-size:22px;line-height:28px;font-weight:700}.ok-native-list-composite{display:flex;flex-direction:column;align-items:stretch;padding:14px;border-radius:12px;gap:12px;background:var(--nl-subdued)}.ok-native-list-composite-heading{font-size:14px;letter-spacing:1px;color:var(--nl-secondary)}.ok-native-list-composite-row{display:flex;gap:12px}.ok-native-list-composite-cell{flex:1;min-width:0}.ok-native-list-composite-cell[data-shaded="true"]{padding:10px;border-radius:10px;background:color-mix(in srgb,var(--nl-primary) 5%,transparent)}.ok-native-list-composite-value{font-size:18px;font-weight:600}.ok-native-list-divider{height:1px;background:var(--nl-separator)}.ok-native-list-progress{height:4px;border-radius:2px;overflow:hidden;background:var(--nl-negative)}.ok-native-list-progress>span{display:block;height:100%;border-radius:2px;background:var(--nl-positive)}
 .ok-native-list-data{padding:6px 12px}.ok-native-list-index{flex:0 0 28px;color:var(--nl-secondary);font-size:13px}.ok-native-list-favorite{flex:0 0 24px;color:var(--nl-icon-subdued);font-size:22px}.ok-native-list-favorite[data-active="true"]{color:var(--nl-accent)}.ok-native-list-data-cell{display:flex;flex-direction:column;min-width:0}.ok-native-list-data-cell[data-align="center"]{align-items:center}.ok-native-list-data-cell[data-align="end"]{align-items:flex-end}.ok-native-list-data-primary{display:flex;align-items:center;gap:5px;max-width:100%;font-size:16px;font-weight:500;white-space:nowrap}.ok-native-list-unread{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--nl-accent)}.ok-native-list-thumbnail{width:64px;height:64px;border-radius:10px;object-fit:cover}
-.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;touch-action:none}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;border:0;background:transparent;display:flex;flex:1;max-height:22px;min-height:12px;width:100%;align-items:center;justify-content:center;padding:0;color:var(--nl-secondary);font:600 11px/1 inherit;cursor:pointer}.ok-native-list-index-button[data-active="true"]{color:var(--nl-accent)}.ok-native-list-index-preview{position:absolute;z-index:8;left:50%;top:50%;display:flex;width:72px;height:72px;align-items:center;justify-content:center;transform:translate(-50%,-50%) scale(.92);border-radius:16px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:28px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.ok-native-list-index-preview[data-visible="true"]{opacity:1;transform:translate(-50%,-50%) scale(1)}
+.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:${SECTION_INDEX_RAIL_WIDTH}px;touch-action:none;cursor:pointer}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;position:absolute;left:6px;display:flex;width:20px;height:16px;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:var(--nl-secondary);font:600 10px/1 inherit;cursor:pointer}.ok-native-list-index-button[data-active="true"]{background:var(--nl-accent);color:var(--nl-inverse-text)}.ok-native-list-index-button:focus-visible{outline:2px solid var(--nl-accent);outline-offset:1px}.ok-native-list-index-preview{position:absolute;z-index:8;right:40px;top:50%;display:flex;width:48px;height:48px;align-items:center;justify-content:center;transform:translateY(-50%) scale(.92);border-radius:14px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:22px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.ok-native-list-index-preview[data-visible="true"]{opacity:1;transform:translateY(-50%) scale(1)}
 .ok-native-list-refresh{position:absolute;z-index:7;left:50%;top:8px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;opacity:0;transform:translate(-50%,-16px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.ok-native-list-refresh[data-visible="true"]{opacity:1;transform:translate(-50%,0)}
+.ok-native-list-warning{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 12px;border-top:1px solid;border-bottom:1px solid;box-sizing:border-box;cursor:default}.ok-native-list-warning-title,.ok-native-list-warning-message{font-size:14px;line-height:20px;white-space:normal;overflow-wrap:anywhere}.ok-native-list-warning-title{font-weight:500;color:var(--nl-primary)}.ok-native-list-warning-message{font-weight:400;color:var(--nl-secondary)}
+.ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
 @media (prefers-reduced-motion:reduce){.ok-native-list-index-preview,.ok-native-list-refresh{transition:none}.ok-native-list-spinner{animation:none}}
+/* OneKey patch: selector controls follow their original semantic colors and geometry. */
+.ok-native-list-checkbox[data-selector="networkSelector"]{padding:0;border-radius:4px;border-color:var(--nl-checkbox-border,var(--nl-separator));background:var(--nl-checkbox-icon,var(--nl-inverse-text))}
+.ok-native-list-checkbox[data-selector="networkSelector"]::after{display:none}
+.ok-native-list-checkbox[data-selector="networkSelector"]>svg{display:none;width:16px;height:16px;color:var(--nl-checkbox-icon,var(--nl-inverse-text));flex-shrink:0}
+.ok-native-list-checkbox[data-selector="networkSelector"][data-state="checked"],.ok-native-list-checkbox[data-selector="networkSelector"][data-state="indeterminate"]{border-color:transparent;background:var(--nl-checkbox-background,var(--nl-primary))}
+.ok-native-list-checkbox[data-selector="networkSelector"][data-state="checked"]>svg[data-state="checked"],.ok-native-list-checkbox[data-selector="networkSelector"][data-state="indeterminate"]>svg[data-state="indeterminate"]{display:block}
+/* OneKey patch: source WalletListItem uses four-point padding on every side. */
+.ok-native-list-wallet-row[data-native-list-selector="walletSidebar"]{border-radius:12px;padding:4px}
+/* OneKey patch: selected group members use the same primary title color as standalone wallets. */
+.ok-native-list-wallet-member[data-native-list-selected="true"]>.ok-native-list-wallet-row[data-native-list-selector="walletSidebar"] .ok-native-list-title{color:var(--nl-primary)}
+.ok-native-list-wallet-row[data-native-list-selector="walletSidebar"] .ok-native-list-wallet-badges{height:18px}
+.ok-native-list-wallet-row[data-native-list-selector="walletSidebar"] .ok-native-list-wallet-badges>.ok-native-list-badge{font-size:11px;line-height:14px;font-weight:400;height:18px;padding:2px 6px;border-radius:4px;background:var(--nl-subdued);color:var(--nl-secondary)}
+.ok-native-list-wallet-row[data-native-list-selector="walletSidebar"] .ok-native-list-wallet-badges>.ok-native-list-badge[data-tone="warning"]{background:var(--nl-caution-background);color:var(--nl-caution)}
+.ok-native-list-account-row[data-native-list-selector="accountSelector"] .ok-native-list-accessories>.ok-native-list-icon-button{box-sizing:border-box;flex:0 0 38px;width:38px;height:38px;margin:-7px;padding:7px}
+/* OneKey patch: AccountSelectorAccountListItem fixes the borderless Plus slot at top18/right20. */
+.ok-native-list-account-row[data-native-list-selector="accountSelector"]>.ok-native-list-accessories[data-native-list-account-control="createAddress"]{position:absolute;top:18px;right:12px}
+.ok-native-list-account-row[data-native-list-selector="accountSelector"] .ok-native-list-accessories>[data-native-list-account-control="createAddress"]{flex-basis:36px;width:36px;height:36px;padding:6px;border-radius:8px}
+.ok-native-list-account-action-row{padding-left:12px;padding-right:12px}.ok-native-list-account-action-row .ok-native-list-action-title{font-size:16px;line-height:24px;font-weight:400}.ok-native-list-account-action-row .ok-native-list-action-title[data-tone="primary"]{color:var(--nl-primary)}
 `;
 function createElement(document, tag, className, text) {
   const element = document.createElement(tag);
@@ -442,12 +486,105 @@ function safeImageUri(uri) {
   if (/^(https?:|data:image\/|blob:|file:)/i.test(trimmed) || trimmed.startsWith('/')) return trimmed;
   return undefined;
 }
+
+// OneKey patch: retries belong to an image binding and must not outlive recycled rows.
+const webImageRetryCleanup = new WeakMap();
+const webAvatarCleanup = new WeakMap();
+const webAvatarSources = new WeakMap();
+function disposeWebImageRetries(element) {
+  let disposed = false;
+  const images = element.matches('img') ? [element] : element.querySelectorAll('img');
+  images.forEach(image => {
+    const avatarCleanup = webAvatarCleanup.get(image);
+    const cleanup = webImageRetryCleanup.get(image);
+    if (!cleanup && !avatarCleanup) return;
+    avatarCleanup?.();
+    webAvatarCleanup.delete(image);
+    webAvatarSources.delete(image);
+    cleanup?.();
+    webImageRetryCleanup.delete(image);
+    disposed = true;
+  });
+  return disposed;
+}
+function configureWebImageRetry(image, source, initialUri) {
+  const fallbackUri = source.fallbackUri ? safeImageUri(source.fallbackUri) : undefined;
+  const retryLimit = Number.isFinite(source.retryTimes) ? Math.max(0, Math.floor(source.retryTimes ?? 0)) : 0;
+  if (!fallbackUri && retryLimit === 0) return;
+  const view = image.ownerDocument.defaultView;
+  let currentUri = initialUri;
+  let usedFallback = false;
+  let retryCount = 0;
+  let retryTimer;
+  let disposed = false;
+  const clearRetry = () => {
+    if (retryTimer !== undefined) view?.clearTimeout(retryTimer);
+    retryTimer = undefined;
+  };
+  const handleError = event => {
+    if (disposed || !image.isConnected || retryTimer !== undefined) {
+      event.stopImmediatePropagation();
+      return;
+    }
+    if (fallbackUri && !usedFallback && fallbackUri !== currentUri) {
+      event.stopImmediatePropagation();
+      usedFallback = true;
+      currentUri = fallbackUri;
+      image.src = currentUri;
+      return;
+    }
+    if (retryCount >= retryLimit || !view) return;
+    event.stopImmediatePropagation();
+    retryCount += 1;
+    retryTimer = view.setTimeout(() => {
+      retryTimer = undefined;
+      if (disposed || !image.isConnected) return;
+      image.removeAttribute('src');
+      image.src = currentUri;
+    }, Math.floor(Math.random() * 3) * 1000);
+  };
+  image.addEventListener('error', handleError);
+  image.addEventListener('load', clearRetry);
+  webImageRetryCleanup.set(image, () => {
+    disposed = true;
+    clearRetry();
+    image.removeEventListener('error', handleError);
+    image.removeEventListener('load', clearRetry);
+  });
+}
+function configureWebAvatar(image, source, uri) {
+  const dispose = acquireNativeListAvatar(image.ownerDocument, uri, resolvedUri => {
+    configureWebImageRetry(image, source, resolvedUri);
+    image.src = resolvedUri;
+  }, () => {
+    const fallbackUri = source.fallbackUri ? safeImageUri(source.fallbackUri) : undefined;
+    if (fallbackUri) {
+      configureWebImageRetry(image, source, fallbackUri);
+      image.src = fallbackUri;
+      return;
+    }
+    const ImageEvent = image.ownerDocument.defaultView?.Event;
+    if (ImageEvent) image.dispatchEvent(new ImageEvent('error'));
+  });
+  webAvatarSources.set(image, {
+    uri,
+    source
+  });
+  webAvatarCleanup.set(image, dispose);
+}
 function createImage(context, source, className) {
-  const uri = safeImageUri(source.uri);
+  const avatarUri = canonicalNativeListAvatarUri(source.uri);
+  const uri = avatarUri ?? safeImageUri(source.uri);
   if (!uri) return undefined;
   const image = context.document.createElement('img');
   if (className) image.className = className;
-  image.src = uri;
+  // OneKey patch: consume recoverable errors before the visual's final fallback listener.
+  if (avatarUri) {
+    configureWebAvatar(image, source, avatarUri);
+  } else {
+    configureWebImageRetry(image, source, uri);
+    image.src = uri;
+  }
   image.alt = '';
   image.draggable = false;
   image.loading = 'lazy';
@@ -455,6 +592,247 @@ function createImage(context, source, className) {
   image.style.objectFit = source.contentFit === 'fill' ? 'fill' : source.contentFit ?? 'cover';
   return image;
 }
+
+// OneKey patch: React Native Web paints selector images as centered CSS backgrounds.
+// The image keeps its loading/error lifecycle; only its replaced-element pixels are hidden.
+function paintSelectorImageBackground(image, frame, inset = 0) {
+  const paint = createElement(image.ownerDocument, 'span', 'ok-native-list-selector-image-background');
+  paint.style.cssText = 'position:absolute;pointer-events:none;border-radius:inherit;background-position:center;background-repeat:no-repeat';
+  paint.style.inset = String(inset) + 'px';
+  paint.style.backgroundSize = image.style.objectFit === 'fill' ? '100% 100%' : image.style.objectFit === 'center' ? 'auto' : image.style.objectFit;
+  image.style.opacity = '0';
+  const update = () => {
+    paint.style.backgroundImage = 'url(' + JSON.stringify(image.currentSrc || image.src) + ')';
+  };
+  image.addEventListener('load', update);
+  image.addEventListener('error', () => {
+    paint.style.backgroundImage = 'none';
+  });
+  frame.insertBefore(paint, image);
+  if (image.complete && image.naturalWidth > 0) update();
+}
+
+// OneKey patch: use source SVG paths for selector actions and wallet provider marks.
+const selectorIcons = {
+  GlobusOutline: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M12 2c5.185 0 9.448 3.947 9.95 9H22v2h-.05c-.502 5.053-4.765 9-9.95 9s-9.448-3.947-9.95-9H2v-2h.05C2.552 5.947 6.815 2 12 2M9.523 13c.09 1.982.438 3.726.934 5.002.29.746.612 1.282.917 1.614.304.331.517.384.626.384s.322-.053.626-.384c.305-.332.627-.868.917-1.614.496-1.276.845-3.02.934-5.002zm-5.459 0a8 8 0 0 0 4.8 6.36 10 10 0 0 1-.271-.633C7.994 17.187 7.61 15.189 7.52 13zm12.416 0c-.09 2.189-.474 4.187-1.073 5.727a10 10 0 0 1-.271.633 8 8 0 0 0 4.8-6.36zM8.863 4.639A8 8 0 0 0 4.064 11h3.457c.09-2.189.473-4.187 1.072-5.727q.127-.327.27-.634M12 4c-.109 0-.322.053-.626.384-.305.332-.627.868-.917 1.614-.496 1.276-.844 3.02-.934 5.002h4.954c-.09-1.982-.438-3.726-.934-5.002-.29-.746-.612-1.282-.917-1.614C12.322 4.053 12.109 4 12 4m3.136.639q.144.307.271.634c.599 1.54.982 3.538 1.073 5.727h3.456a8 8 0 0 0-4.8-6.361',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      opacity: 1.0
+    }]
+  },
+  LockSolid: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M12 2a5 5 0 0 1 5 5v2h3v13H4V9h3V7a5 5 0 0 1 5-5m-1 11v5h2v-5zm1-9a3 3 0 0 0-3 3v2h6V7a3 3 0 0 0-3-3',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      opacity: 1.0
+    }]
+  },
+  GoogleIllus: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09',
+      fill: '#4285F4',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23',
+      fill: '#34A853',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22z',
+      fill: '#FBBC05',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53',
+      fill: '#EA4335',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  AppleBrand: {
+    viewBox: '0 0 16 20',
+    paths: [{
+      d: 'M11.67.834c.117 1.074-.315 2.153-.955 2.928-.64.773-1.692 1.378-2.718 1.298-.14-1.054.38-2.151.971-2.836C9.63 1.45 10.746.872 11.67.834M14.994 7.093c-.176.108-1.992 1.224-1.972 3.482.025 2.769 2.428 3.693 2.46 3.705l-.004.015a10.1 10.1 0 0 1-1.264 2.593c-.764 1.116-1.556 2.229-2.806 2.254-.598.011-1-.162-1.416-.343-.437-.19-.891-.386-1.609-.386-.751 0-1.226.203-1.683.398-.397.169-.78.333-1.32.354-1.208.047-2.124-1.207-2.895-2.32C.909 14.57-.294 10.414 1.322 7.612c.803-1.395 2.237-2.275 3.794-2.298.671-.014 1.32.244 1.89.47.434.172.821.326 1.135.326.282 0 .659-.149 1.099-.323.692-.273 1.539-.607 2.41-.518.599.026 2.276.24 3.354 1.818z',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  BotIllus: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M11 2a1 1 0 1 1 2 0v1.8l1.6 1.6a1 1 0 1 1-1.4 1.4L12 5.6l-1.2 1.2a1 1 0 0 1-1.4-1.4L11 3.8z',
+      fill: '#8897A5',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M8.0 6.0h8.0a5.0 5.0 0 0 1 5.0 5.0v4.0a5.0 5.0 0 0 1 -5.0 5.0h-8.0a5.0 5.0 0 0 1 -5.0 -5.0v-4.0a5.0 5.0 0 0 1 5.0 -5.0z',
+      fill: '#3FA9F5',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M3.0 10.0h0.0a1.5 1.5 0 0 1 1.5 1.5v3.0a1.5 1.5 0 0 1 -1.5 1.5h0.0a1.5 1.5 0 0 1 -1.5 -1.5v-3.0a1.5 1.5 0 0 1 1.5 -1.5z',
+      fill: '#8897A5',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M21.0 10.0h0.0a1.5 1.5 0 0 1 1.5 1.5v3.0a1.5 1.5 0 0 1 -1.5 1.5h0.0a1.5 1.5 0 0 1 -1.5 -1.5v-3.0a1.5 1.5 0 0 1 1.5 -1.5z',
+      fill: '#8897A5',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M7.5 12.0a1.5 1.5 0 1 0 3.0 0a1.5 1.5 0 1 0 -3.0 0',
+      fill: '#10243E',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M13.5 12.0a1.5 1.5 0 1 0 3.0 0a1.5 1.5 0 1 0 -3.0 0',
+      fill: '#10243E',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M8.5 15.4c.9.8 2.08 1.2 3.5 1.2s2.6-.4 3.5-1.2c.24-.2.6-.18.8.06.2.23.17.6-.06.8-1.14.98-2.58 1.46-4.24 1.46s-3.1-.48-4.24-1.46a.58.58 0 0 1-.06-.8c.2-.24.56-.26.8-.06',
+      fill: '#10243E',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  AllNetworksSolid: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M15.333 13.998a1.335 1.335 0 1 1 0 2.67 1.335 1.335 0 0 1 0-2.67',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }, {
+      d: 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0M8 12.668A2 2 0 0 0 6 14.666V16c0 1.103.895 1.997 1.998 1.998h1.334A2 2 0 0 0 11.33 16v-1.334a2 2 0 0 0-1.998-1.998zm7.333 0a2.665 2.665 0 1 0 0 5.33 2.665 2.665 0 0 0 0-5.33M7.999 6.001A2 2 0 0 0 6.001 8v1.334c0 1.103.895 1.998 1.998 1.998h1.334a2 2 0 0 0 1.998-1.998V7.999a2 2 0 0 0-1.998-1.998zm6.667 0A2 2 0 0 0 12.668 8v1.334c0 1.103.895 1.998 1.998 1.998H16a2 2 0 0 0 1.998-1.998V7.999A2 2 0 0 0 16 6.001z',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      opacity: 1.0
+    }]
+  },
+  CrossedSmallSolid: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M17.87 8.25 14.12 12l3.75 3.75-2.12 2.121-3.75-3.75-3.75 3.75-2.121-2.121L9.879 12l-3.75-3.75 2.12-2.121L12 9.879l3.75-3.75 2.122 2.121Z',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  AccountErrorCustom: {
+    viewBox: '0 0 18 18',
+    paths: [{
+      d: 'M12.5 12.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5',
+      fill: '#000',
+      fillRule: 'nonzero',
+      opacity: 0.447
+    }, {
+      d: 'M0 3.5A3.5 3.5 0 0 1 3.5 0h8.088A2.41 2.41 0 0 1 14 2.412V5h1a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H4a4 4 0 0 1-4-4zm2 3.163V14a2 2 0 0 0 2 2h11a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H3.5c-.537 0-1.045-.12-1.5-.337M2 3.5A1.5 1.5 0 0 0 3.5 5H12V2.412A.41.41 0 0 0 11.588 2H3.5A1.5 1.5 0 0 0 2 3.5',
+      fill: '#000',
+      fillRule: 'evenodd',
+      opacity: 0.447
+    }]
+  },
+  PlusSmallOutline: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M13 11h5v2h-5v5h-2v-5H6v-2h5V6h2z',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  DotHorOutline: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M6 14H2v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  ChevronRightSmallOutline: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M15.414 12 10 17.414 8.586 16l4-4-4-4L10 6.586z',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  DragOutline: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M11 21H7v-4h4zm6 0h-4v-4h4zm-6-7H7v-4h4zm6 0h-4v-4h4zm-6-7H7V3h4zm6 0h-4V3h4z',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1.0
+    }]
+  },
+  PencilOutline: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M22.414 7.5 7.914 22H2v-5.914l14.5-14.5zM4 16.914V20h3.086l9.5-9.5L13.5 7.414zM14.914 6 18 9.086 19.586 7.5 16.5 4.414z',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      opacity: 1.0
+    }]
+  },
+  CheckboxCheckedCustom: {
+    viewBox: '0 0 16 16',
+    paths: [{
+      d: 'M12.204 5.043a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414l1.293 1.293 3.793-3.793a1 1 0 0 1 1.414 0',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      opacity: 1.0
+    }]
+  },
+  CheckboxIndeterminateCustom: {
+    viewBox: '0 0 16 16',
+    paths: [{
+      d: 'M4 8a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      opacity: 1.0
+    }]
+  },
+  Circle: {
+    viewBox: '0 0 24 24',
+    paths: [{
+      d: 'M0 12a12 12 0 1 0 24 0a12 12 0 1 0 -24 0',
+      fill: 'currentColor',
+      fillRule: 'nonzero',
+      opacity: 1
+    }]
+  }
+};
+function applySelectorIcon(element, name) {
+  const icon = selectorIcons[name];
+  if (!icon) return;
+  element.textContent = '';
+  const svg = element.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', icon.viewBox);
+  svg.setAttribute('width', '24');
+  svg.setAttribute('height', '24');
+  svg.setAttribute('aria-hidden', 'true');
+  icon.paths.forEach(path => {
+    const child = element.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'path');
+    child.setAttribute('d', path.d);
+    child.setAttribute('fill', path.fill);
+    child.setAttribute('fill-rule', path.fillRule);
+    child.setAttribute('fill-opacity', String(path.opacity));
+    svg.appendChild(child);
+  });
+  element.appendChild(svg);
+}
 function iconGlyph(name) {
   const normalized = name.toLocaleLowerCase();
   if (normalized.includes('chevron')) {
@@ -484,7 +862,7 @@ function visualFromRow(row) {
   if (row.type === 'metricCard') return row.visual;
   return undefined;
 }
-function createVisual(context, visual) {
+function createVisual(context, visual, selectorPresentation) {
   if (!visual) return undefined;
   if (visual.kind === 'stackedImages') {
     const stack = createElement(context.document, 'span', 'ok-native-list-stacked');
@@ -500,6 +878,7 @@ function createVisual(context, visual) {
   if (visual.kind === 'icon') {
     frame.style.background = visual.backgroundColor ?? 'var(--nl-strong)';
     const fallback = createElement(context.document, 'span', 'ok-native-list-visual-fallback', iconGlyph(visual.name));
+    applySelectorIcon(fallback, visual.name);
     if (visual.tintColor) fallback.style.color = visual.tintColor;
     frame.appendChild(fallback);
     return frame;
@@ -510,6 +889,7 @@ function createVisual(context, visual) {
   if (image) {
     image.className = 'ok-native-list-visual-main';
     frame.appendChild(image);
+    if (selectorPresentation) paintSelectorImageBackground(image, frame);
   } else {
     frame.appendChild(createElement(context.document, 'span', 'ok-native-list-visual-fallback', 'fallbackText' in visual ? visual.fallbackText ?? '' : ''));
   }
@@ -520,8 +900,64 @@ function createVisual(context, visual) {
     const corner = createElement(context.document, 'span', 'ok-native-list-visual-corner ok-native-list-visual-fallback', iconGlyph(visual.cornerIcon.name));
     if (visual.cornerIcon.tintColor) corner.style.color = visual.cornerIcon.tintColor;
     if (visual.cornerIcon.backgroundColor) corner.style.background = visual.cornerIcon.backgroundColor;
+    applySelectorIcon(corner, visual.cornerIcon.name);
     frame.appendChild(corner);
   }
+  // OneKey patch: image failure uses the same source-derived fallback as v1.
+  if ('fallbackIcon' in visual && visual.fallbackIcon) {
+    const icon = visual.fallbackIcon;
+    const showFallback = () => {
+      if (image) {
+        disposeWebImageRetries(image);
+        image.remove();
+      }
+      frame.querySelector('.ok-native-list-visual-fallback:not(.ok-native-list-visual-corner)')?.remove();
+      const fallback = createElement(context.document, 'span', 'ok-native-list-visual-fallback');
+      applySelectorIcon(fallback, icon.name);
+      if (icon.tintColor) fallback.style.color = icon.tintColor;
+      frame.prepend(fallback);
+    };
+    if (image) image.addEventListener('error', showFallback, {
+      once: true
+    });else showFallback();
+  }
+  if ('borderStyle' in visual && visual.borderStyle === 'dashed') {
+    frame.style.border = '2px dashed ' + (visual.borderColor ?? 'var(--nl-disabled)');
+    frame.style.boxSizing = 'border-box';
+  }
+  if ('overlays' in visual) visual.overlays?.forEach(overlay => {
+    const corner = createElement(context.document, 'span', 'ok-native-list-visual-overlay', overlay.text);
+    const size = overlay.size ?? 20;
+    const isWalletText = selectorPresentation === 'walletSidebar' && !!overlay.text && !overlay.image && !overlay.name;
+    corner.style.width = isWalletText && overlay.width === undefined ? 'auto' : String(overlay.width ?? size) + 'px';
+    corner.style.height = String(overlay.height ?? (isWalletText ? 16 : size)) + 'px';
+    corner.style.padding = isWalletText ? '0 2px' : String(overlay.padding ?? 0) + 'px';
+    if (isWalletText) {
+      corner.style.fontSize = '12px';
+      corner.style.lineHeight = '16px';
+      corner.style.fontWeight = '400';
+    }
+    if (isWalletText || overlay.width !== undefined || overlay.height !== undefined) corner.style.borderRadius = '9999px';
+    const offsetX = String(-(overlay.offsetX ?? overlay.offset ?? 2)) + 'px';
+    const offsetY = String(-(overlay.offsetY ?? overlay.offset ?? 2)) + 'px';
+    corner.style.background = overlay.backgroundColor ?? 'transparent';
+    corner.style.color = overlay.tintColor ?? 'var(--nl-secondary)';
+    if (overlay.position === 'topLeft') {
+      corner.style.left = offsetX;
+      corner.style.top = offsetY;
+    } else {
+      corner.style.right = offsetX;
+      corner.style.bottom = offsetY;
+    }
+    if (overlay.image) {
+      const overlayImage = createImage(context, overlay.image);
+      if (overlayImage) {
+        corner.appendChild(overlayImage);
+        if (selectorPresentation) paintSelectorImageBackground(overlayImage, corner, overlay.padding ?? 0);
+      }
+    } else if (overlay.name) applySelectorIcon(corner, overlay.name);
+    frame.appendChild(corner);
+  });
   return frame;
 }
 function toneColor(tone, fallback) {
@@ -567,6 +1003,19 @@ function createCheckbox(context, rowKey, accessory) {
   setData(element, 'checkboxFallback', accessory.state);
   setData(element, 'nativeListAction', accessory.actionKey ?? 'selection');
   setData(element, 'selectionScope', accessory.target?.scope ?? 'row');
+  const row = context.snapshot.rows[context.itemIndex];
+  if (row && 'presentation' in row && row.presentation === 'networkSelector') {
+    setData(element, 'selector', 'networkSelector');
+    for (const [state, name] of [['checked', 'CheckboxCheckedCustom'], ['indeterminate', 'CheckboxIndeterminateCustom']]) {
+      const holder = createElement(context.document, 'span');
+      applySelectorIcon(holder, name);
+      const svg = holder.firstElementChild;
+      if (svg) {
+        svg.setAttribute('data-state', state);
+        element.appendChild(svg);
+      }
+    }
+  }
   if (accessory.target?.scope === 'section') setData(element, 'selectionKey', accessory.target.sectionKey);else if (accessory.target?.scope === 'row') setData(element, 'selectionKey', rowKey);
   return element;
 }
@@ -576,6 +1025,7 @@ function createIconAction(context, name, actionKey, disabled, tintColor) {
     element.setAttribute('type', 'button');
     element.toggleAttribute('disabled', Boolean(disabled));
   }
+  applySelectorIcon(element, name);
   if (actionKey) setData(element, 'nativeListAction', actionKey);
   if (tintColor) element.style.color = tintColor;
   return element;
@@ -584,6 +1034,23 @@ function markActionAnchorSource(element, source, slot) {
   setData(element, 'nativeListAnchorSource', source);
   if (slot !== undefined) setData(element, 'nativeListAnchorSlot', slot);
 }
+
+// OneKey patch: the compact zero-count digits share the amount baseline.
+function applyValueSegments(element, segments, fontSize = 16, lineHeight = 24, weight = 500) {
+  if (!segments?.length) return;
+  element.textContent = '';
+  element.style.fontSize = String(fontSize) + 'px';
+  element.style.lineHeight = String(lineHeight) + 'px';
+  element.style.fontWeight = String(weight);
+  segments.forEach(segment => {
+    const span = createElement(element.ownerDocument, 'span', undefined, segment.text);
+    if (segment.style === 'subscript') {
+      span.style.fontSize = String(Math.ceil(fontSize * 0.6)) + 'px';
+      span.style.lineHeight = String(fontSize) + 'px';
+    }
+    element.appendChild(span);
+  });
+}
 function createAccessory(context, rowKey, accessory, slot) {
   if (accessory.kind === 'checkbox') {
     const element = createCheckbox(context, rowKey, accessory);
@@ -593,6 +1060,18 @@ function createAccessory(context, rowKey, accessory, slot) {
   if (accessory.kind === 'icon') {
     const element = createIconAction(context, accessory.name, accessory.actionKey, accessory.disabled, accessory.tintColor);
     markActionAnchorSource(element, 'trailingAccessory', slot);
+    setData(element, 'testid', accessory.testID);
+    if (accessory.hoverActionKey) setData(element, 'nativeListHoverAction', accessory.hoverActionKey);
+    if (accessory.accessibilityLabel) element.setAttribute('aria-label', accessory.accessibilityLabel);
+    const row = context.snapshot.rows[context.itemIndex];
+    if (row && 'presentation' in row && row.presentation === 'accountSelector') {
+      setData(element, 'nativeListAnchorInset', 7);
+      // OneKey patch: the create-address button omits IconButton's one-point border.
+      if (row.height !== undefined && accessory.name === 'PlusSmallOutline') {
+        setData(element, 'nativeListAccountControl', 'createAddress');
+        if (!accessory.tintColor) element.style.color = 'var(--nl-icon-subdued)';
+      }
+    }
     return element;
   }
   if (accessory.kind === 'spinner') {
@@ -608,6 +1087,7 @@ function createAccessory(context, rowKey, accessory, slot) {
   switch (accessory.kind) {
     case 'value':
       element.textContent = accessory.text;
+      applyValueSegments(element, accessory.textSegments);
       if (accessory.secondary) element.classList.add('ok-native-list-accessory-secondary');
       break;
     case 'valuePair':
@@ -646,6 +1126,13 @@ function createAccessory(context, rowKey, accessory, slot) {
 function appendAccessories(parent, context, rowKey, accessories) {
   if (!accessories?.length) return;
   const container = createElement(context.document, 'span', 'ok-native-list-accessories');
+  const row = context.snapshot.rows[context.itemIndex];
+  if (row && row.height !== undefined && 'presentation' in row && row.presentation === 'networkSelector') {
+    container.style.gap = accessories.some(accessory => accessory.kind === 'checkbox') ? '12px' : '20px';
+  }
+  if (row && row.height !== undefined && 'presentation' in row && row.presentation === 'accountSelector' && accessories.length === 1 && accessories[0]?.kind === 'icon' && accessories[0].name === 'PlusSmallOutline') {
+    setData(container, 'nativeListAccountControl', 'createAddress');
+  }
   accessories.forEach((accessory, slot) => container.appendChild(createAccessory(context, rowKey, accessory, slot)));
   parent.appendChild(container);
 }
@@ -673,9 +1160,83 @@ function createSectionHeader(context, row) {
     markActionAnchorSource(titleIcon, 'leadingAction');
     body.appendChild(titleIcon);
   }
-  body.appendChild(createTextColumn(context, row.title, row.subtitle));
+  // OneKey patch: section title help has its own measurable action target.
+  // body.appendChild(createTextColumn(context, row.title, row.subtitle));
+  const column = createTextColumn(context, row.title, row.subtitle);
+  const title = column.firstElementChild;
+  title.classList.add('ok-native-list-section-title');
+  if (row.titleActionKey) {
+    setData(title, 'nativeListAction', row.titleActionKey);
+    markActionAnchorSource(title, 'leadingAction');
+    title.setAttribute('role', 'button');
+    title.tabIndex = 0;
+    title.style.alignSelf = 'flex-start';
+    title.style.maxWidth = '100%';
+    // OneKey patch: explicit network headers reserve a separate 3-point underline area.
+    if (row.presentation !== 'networkSelector' || row.height === undefined) {
+      title.style.textDecoration = 'underline dotted';
+      title.style.textUnderlineOffset = '6px';
+    }
+    if (row.titleActionOnHover) setData(title, 'nativeListHoverAction', true);
+  }
+  if (row.presentation === 'networkSelector' && row.height !== undefined) {
+    body.style.padding = row.variant === 'summary' ? '24px 12px 20px' : '0 12px';
+    body.style.backgroundColor = 'var(--nl-bg)';
+    body.style.gap = row.checkbox ? '12px' : '8px';
+    title.style.fontSize = row.variant === 'summary' ? '16px' : '14px';
+    title.style.lineHeight = row.variant === 'summary' ? '24px' : '20px';
+    title.style.fontWeight = row.variant === 'summary' || row.titleActionKey && !row.checkbox ? '500' : '600';
+    if (row.titleActionKey) {
+      const text = createElement(context.document, 'span', 'ok-native-list-section-title-text', row.title);
+      text.style.overflow = 'hidden';
+      text.style.textOverflow = 'ellipsis';
+      text.style.maxWidth = '100%';
+      const dotted = context.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      dotted.setAttribute('height', '2');
+      dotted.style.cssText = 'display:block;position:absolute;left:0;bottom:0;width:100%;height:2px;color:var(--nl-secondary)';
+      const line = context.document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      for (const [key, value] of Object.entries({
+        x1: '1',
+        y1: '1',
+        x2: '100%',
+        y2: '1',
+        stroke: 'currentColor',
+        'stroke-width': '1.5',
+        'stroke-dasharray': '0,4',
+        'stroke-linecap': 'round'
+      })) line.setAttribute(key, value);
+      // OneKey patch: keep both round caps inside the original full-width viewport.
+      const lineViewport = context.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      lineViewport.setAttribute('width', 'calc(100% - 1px)');
+      lineViewport.setAttribute('height', '2');
+      lineViewport.setAttribute('overflow', 'visible');
+      lineViewport.appendChild(line);
+      dotted.appendChild(lineViewport);
+      // OneKey patch: SVG intrinsic width must not expand the title action beyond its text.
+      title.style.display = 'block';
+      title.style.position = 'relative';
+      title.style.width = 'fit-content';
+      title.style.paddingBottom = '3px';
+      text.style.display = 'block';
+      title.replaceChildren(text, dotted);
+    }
+  }
+  body.appendChild(column);
   if (row.value) {
     const value = createElement(context.document, row.valueActionKey ? 'button' : 'span', row.valueActionKey ? 'ok-native-list-action-button ok-native-list-section-value' : 'ok-native-list-value ok-native-list-section-value', row.value);
+    applyValueSegments(value, row.valueSegments);
+    if (row.presentation === 'networkSelector' && row.height !== undefined) {
+      value.style.fontFamily = 'inherit';
+      value.style.fontSize = '16px';
+      value.style.lineHeight = '24px';
+      value.style.fontWeight = '500';
+      if (row.valueActionKey) {
+        value.style.color = 'var(--nl-secondary)';
+        value.style.padding = '0';
+        value.style.flexShrink = '0';
+      }
+    }
+    if (row.valueActionTestID) setData(value, 'testid', row.valueActionTestID);
     if (row.valueActionKey) {
       value.setAttribute('type', 'button');
       setData(value, 'nativeListAction', row.valueActionKey);
@@ -696,6 +1257,7 @@ function createActionRow(context, row) {
   if (row.icon) body.appendChild(createVisual(context, row.icon));
   const title = createElement(context.document, 'span', 'ok-native-list-action-title', row.title);
   setData(title, 'tone', row.tone);
+  if (row.presentation === 'accountSelector' && row.icon) title.style.fontWeight = '500';
   body.appendChild(title);
   if (row.checkbox) body.appendChild(createCheckbox(context, row.key, row.checkbox));
   appendAccessories(body, context, row.key, row.trailing);
@@ -704,6 +1266,13 @@ function createActionRow(context, row) {
 function createSystemRow(context, row) {
   const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-system');
   setData(body, 'variant', row.variant);
+  if (row.variant === 'warning') {
+    body.classList.add('ok-native-list-warning');
+    body.style.borderColor = row.borderColor ?? 'var(--nl-separator)';
+    body.appendChild(createElement(context.document, 'span', 'ok-native-list-warning-title', row.title));
+    body.appendChild(createElement(context.document, 'span', 'ok-native-list-warning-message', row.message));
+    return body;
+  }
   if (row.variant === 'loading') body.appendChild(createElement(context.document, 'span', 'ok-native-list-spinner'));
   const message = row.variant === 'spacer' ? '' : row.message ?? (row.variant === 'end' ? 'End' : '');
   if (message) body.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', message));
@@ -852,12 +1421,31 @@ function createDataRow(context, row) {
 function createIdentityActivityOrMessageRow(context, row) {
   const presentation = row.type === 'identity' ? row.presentation : undefined;
   const body = createElement(context.document, 'div', ['ok-native-list-row', 'ok-native-list-standard', row.type === 'identity' && !presentation ? 'ok-native-list-identity-row' : '', presentation === 'networkSelector' ? 'ok-native-list-network-row' : '', presentation === 'walletSidebar' ? 'ok-native-list-wallet-row' : '', presentation === 'accountSelector' ? 'ok-native-list-account-row' : ''].filter(Boolean).join(' '));
+  setData(body, 'nativeListSelector', row.height !== undefined ? presentation : undefined);
+  if (row.type === 'identity' && row.titleActionKey && row.titleActionOnHover) {
+    setData(body, 'nativeListHoverAction', row.titleActionKey);
+    markActionAnchorSource(body, 'leadingAction');
+  }
   if (row.type === 'identity' && row.leadingAction) {
     const action = createIconAction(context, row.leadingAction.name, row.leadingAction.actionKey, row.leadingAction.disabled, row.leadingAction.tintColor);
     markActionAnchorSource(action, 'leadingAction');
     body.appendChild(action);
   }
-  const visual = createVisual(context, visualFromRow(row));
+  const visual = createVisual(context, visualFromRow(row), row.height !== undefined ? presentation : undefined);
+  if (visual && row.type === 'identity' && row.height !== undefined && row.presentation === 'walletSidebar' && 'fallbackIcon' in row.leading && row.leading.fallbackIcon?.name === 'LockSolid') {
+    // OneKey patch: hidden-wallet locks use WalletAvatar's full 40-point icon.
+    const icon = visual.querySelector('.ok-native-list-visual-fallback svg');
+    if (icon) {
+      icon.style.width = '40px';
+      icon.style.height = '40px';
+    }
+    const fallback = visual.querySelector('.ok-native-list-visual-fallback');
+    if (fallback) {
+      fallback.style.borderRadius = '0';
+      fallback.style.overflow = 'visible';
+    }
+  }
+  if (visual && row.type === 'identity' && row.height !== undefined && row.presentation === 'walletSidebar' && 'borderStyle' in row.leading && row.leading.borderStyle === 'dashed') visual.style.borderWidth = '1px';
   if (visual) body.appendChild(visual);
   if (row.type === 'activity' && row.secondaryLeading) {
     const secondVisual = createVisual(context, row.secondaryLeading);
@@ -866,7 +1454,46 @@ function createIdentityActivityOrMessageRow(context, row) {
   if (row.type === 'message' && row.unread) body.appendChild(createElement(context.document, 'span', 'ok-native-list-unread'));
   const title = row.title;
   const subtitle = row.type === 'identity' ? row.subtitle : row.type === 'activity' ? row.description : row.body;
-  const column = createTextColumn(context, title, subtitle, row.type === 'identity' ? row.tertiary : undefined, row.type === 'identity' ? row.tertiaryTone : undefined, row.type === 'identity' ? row.badges : undefined);
+  const column = createTextColumn(context, title, subtitle, row.type === 'identity' ? row.tertiary : undefined, row.type === 'identity' ? row.tertiaryTone : undefined, row.type === 'identity' && presentation !== 'walletSidebar' ? row.badges : undefined);
+  // OneKey patch: match existing search, subtitle fragments, and sidebar badges.
+  if (row.type === 'identity') {
+    const titleElement = column.firstElementChild;
+    if (row.titleMatch?.length) {
+      const firstText = titleElement.firstChild;
+      if (firstText) firstText.remove();
+      const fragment = context.document.createDocumentFragment();
+      let offset = 0;
+      row.titleMatch.forEach(({
+        start,
+        end
+      }) => {
+        fragment.appendChild(context.document.createTextNode(row.title.slice(offset, start)));
+        const match = createElement(context.document, 'span', 'ok-native-list-info', row.title.slice(start, end));
+        fragment.appendChild(match);
+        offset = end;
+      });
+      fragment.appendChild(context.document.createTextNode(row.title.slice(offset)));
+      titleElement.prepend(fragment);
+    }
+    if (row.subtitleSegments?.length) {
+      column.querySelector('.ok-native-list-secondary')?.remove();
+      const segments = createElement(context.document, 'span', 'ok-native-list-subtitle-segments');
+      row.subtitleSegments.forEach(segment => {
+        if (segment.separatorBefore) segments.appendChild(createElement(context.document, 'span', 'ok-native-list-subtitle-dot'));
+        const text = createElement(context.document, 'span', 'ok-native-list-secondary', segment.text);
+        applyValueSegments(text, segment.textSegments, 14, 20, 400);
+        setData(text, 'tone', segment.tone);
+        text.style.color = segment.tone === 'disabled' ? 'var(--nl-disabled)' : segment.tone === 'caution' ? 'var(--nl-caution)' : toneColor(segment.tone, 'secondary');
+        segments.appendChild(text);
+      });
+      column.insertBefore(segments, titleElement.nextSibling);
+    }
+    if (presentation === 'walletSidebar' && row.badges?.length) {
+      const badges = createElement(context.document, 'span', 'ok-native-list-wallet-badges');
+      row.badges.forEach(badge => badges.appendChild(createBadge(context, badge)));
+      column.appendChild(badges);
+    }
+  }
   if (row.type === 'activity' && row.status) column.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', row.status));
   if (row.type === 'activity' && row.footerActions?.length) {
     const actions = createElement(context.document, 'span', 'ok-native-list-actions');
@@ -898,14 +1525,32 @@ function createIdentityActivityOrMessageRow(context, row) {
   }
   return body;
 }
+
+// OneKey patch: SizableText enables tabular digits without replacing its font family.
+function applySelectorTabularNumbers(body, row) {
+  if (!('presentation' in row) || !['accountSelector', 'networkSelector', 'walletSidebar'].includes(row.presentation ?? '')) return;
+  body.style.fontVariantNumeric = 'tabular-nums';
+  body.querySelectorAll('span,button').forEach(text => {
+    text.style.fontVariantNumeric = 'tabular-nums';
+  });
+}
 function createWalletGroupRow(context, row) {
   const body = createElement(context.document, 'div', 'ok-native-list-wallet-group');
   [row.parent, ...row.children].forEach((member, memberIndex) => {
     const memberElement = createElement(context.document, 'div', 'ok-native-list-wallet-member');
     setData(memberElement, 'nativeListGroupMemberKey', member.key);
+    setData(memberElement, 'testid', member.testID);
     setData(memberElement, 'nativeListGroupParent', memberIndex === 0);
     setData(memberElement, 'nativeListSelected', member.selected);
-    memberElement.appendChild(createIdentityActivityOrMessageRow(context, member));
+    // OneKey patch: grouped members have the same selector typography as standalone wallets.
+    // memberElement.appendChild(createIdentityActivityOrMessageRow(context, member));
+    const memberBody = createIdentityActivityOrMessageRow(context, member);
+    applySelectorTabularNumbers(memberBody, member);
+    memberElement.appendChild(memberBody);
+    // OneKey patch: group children use their own measured badge height.
+    memberElement.style.flexBasis = String(member.height ?? 68 + (member.badges?.length ? 24 : 0)) + 'px';
+    memberElement.style.height = memberElement.style.flexBasis;
+    memberElement.style.opacity = String(member.opacity ?? 1);
     body.appendChild(memberElement);
   });
   return body;
@@ -945,6 +1590,11 @@ export class NativeListWebEngine {
   };
   mounted = new Map();
   pool = [];
+  // OneKey patch: URI leases outlive DOM overscan only inside this bounded window.
+  avatarLeases = new Map();
+  avatarOffset = 0;
+  avatarDirection = 1;
+  sectionIndexEntries = [];
   suppressClickUntil = 0;
   pullDistance = 0;
   actionAnchorInstanceId = String(++webNativeListInstanceCounter);
@@ -953,6 +1603,8 @@ export class NativeListWebEngine {
   lastViewportWidth = -1;
   lastViewportHeight = -1;
   destroyed = false;
+  // OneKey patch: warning banners are measured after normal browser text wrapping.
+  measuredWarningHeights = new Map();
   constructor(host, snapshot, callbacks, virtualizationEnabled = true) {
     this.document = host.ownerDocument;
     this.snapshot = validateSnapshot(snapshot);
@@ -991,6 +1643,9 @@ export class NativeListWebEngine {
       passive: true
     });
     this.root.addEventListener('click', this.handleClick);
+    // OneKey patch: preserve web tooltip hover for section titles.
+    this.root.addEventListener('pointerover', this.handleTitlePointerOver);
+    this.root.addEventListener('pointerout', this.handleTitlePointerOut);
     this.root.addEventListener('keydown', this.handleKeyDown);
     this.viewport.addEventListener('pointerdown', this.handleReorderPointerDown, {
       passive: false
@@ -1125,7 +1780,7 @@ export class NativeListWebEngine {
   scrollToLocation(params, scroll) {
     const index = resolveLocationIndex(this.snapshot.rows, params);
     if (index === undefined) {
-      const sectionCount = this.snapshot.rows.filter(row => row.type === 'sectionHeader' && row.variant !== 'summary').length;
+      const sectionCount = this.snapshot.rows.filter(row => row.type === 'sectionHeader' && row.sticky !== false && row.variant !== 'summary').length;
       this.emitScrollFailure(params.itemIndex, params.sectionIndex >= sectionCount ? 'section-out-of-range' : 'item-out-of-range');
       return;
     }
@@ -1172,6 +1827,8 @@ export class NativeListWebEngine {
     this.document.defaultView?.removeEventListener('resize', this.handleWindowResize);
     this.viewport.removeEventListener('scroll', this.handleScroll);
     this.root.removeEventListener('click', this.handleClick);
+    this.root.removeEventListener('pointerover', this.handleTitlePointerOver);
+    this.root.removeEventListener('pointerout', this.handleTitlePointerOut);
     this.root.removeEventListener('keydown', this.handleKeyDown);
     this.cancelPointerReorder(true);
     this.viewport.removeEventListener('pointerdown', this.handleReorderPointerDown);
@@ -1189,19 +1846,23 @@ export class NativeListWebEngine {
     this.viewport.removeEventListener('pointerup', this.handlePullEnd);
     this.viewport.removeEventListener('pointercancel', this.handlePullEnd);
     const host = this.root.parentElement;
+    disposeWebImageRetries(this.root);
+    this.pool.forEach(disposeWebImageRetries);
     this.root.remove();
     this.hideReorderPreview();
     this.reorderPreview.remove();
     if (host) host.style.position = this.previousHostPosition;
     this.mounted.clear();
     this.pool.length = 0;
+    this.avatarLeases.forEach(release => release());
+    this.avatarLeases.clear();
   }
   setSnapshot(snapshot, selectedKeys) {
+    this.measuredWarningHeights.clear();
     this.snapshot = snapshot;
     this.rows = effectiveRows(snapshot);
     this.selectedKeys = selectedKeys ?? selectionStateFromSnapshot(snapshot).selectedKeys;
     if (this.reachedGeneration !== snapshot.generation) this.reachedGeneration = undefined;
-    this.renderSectionIndex();
     this.applyTheme();
     this.recomputeLayout();
     this.renderFooter();
@@ -1219,6 +1880,11 @@ export class NativeListWebEngine {
       '--nl-primary': theme.primaryText,
       '--nl-secondary': theme.secondaryText,
       '--nl-disabled': theme.disabledText,
+      '--nl-caution': theme.caution ?? '#AB6400',
+      '--nl-caution-background': theme.cautionBackground,
+      '--nl-checkbox-background': theme.checkboxBackground,
+      '--nl-checkbox-border': theme.checkboxBorder,
+      '--nl-checkbox-icon': theme.checkboxIcon,
       '--nl-icon': theme.icon,
       '--nl-icon-subdued': theme.iconSubdued,
       '--nl-separator': theme.separator,
@@ -1242,13 +1908,22 @@ export class NativeListWebEngine {
     const viewportHeight = this.viewport.clientHeight;
     if (this.lastViewportWidth >= 0 && (viewportWidth !== this.lastViewportWidth || viewportHeight !== this.lastViewportHeight)) {
       this.invalidateActionAnchor('layout');
+      this.measuredWarningHeights.clear();
     }
     this.lastViewportWidth = viewportWidth;
     this.lastViewportHeight = viewportHeight;
     const previousHorizontal = this.layout.horizontal;
-    this.layout = computeWebListLayout(this.snapshot, viewportWidth, viewportHeight, this.reorderCompactKey);
+    const measuredSnapshot = {
+      ...this.snapshot,
+      rows: this.snapshot.rows.map(row => row.type === 'system' && row.variant === 'warning' && row.height === undefined && this.measuredWarningHeights.has(row.key) ? {
+        ...row,
+        height: this.measuredWarningHeights.get(row.key)
+      } : row)
+    };
+    this.layout = computeWebListLayout(measuredSnapshot, viewportWidth, viewportHeight, this.reorderCompactKey);
     this.content.style.width = String(this.layout.contentWidth) + 'px';
     this.content.style.height = String(this.layout.contentHeight) + 'px';
+    this.renderSectionIndex(viewportHeight || DEFAULT_VIEWPORT_HEIGHT);
     if (previousHorizontal !== this.layout.horizontal) {
       this.viewport.scrollLeft = 0;
       this.viewport.scrollTop = 0;
@@ -1256,7 +1931,44 @@ export class NativeListWebEngine {
     this.renderWindow();
     this.performPendingScroll();
   };
+  updateAvatarWindow() {
+    const offset = this.currentOffset();
+    if (offset !== this.avatarOffset) this.avatarDirection = Math.sign(offset - this.avatarOffset);
+    this.avatarOffset = offset;
+    const visible = visibleWebLayoutItems(this.layout, offset, this.viewportLength(), 0);
+    const first = visible[0]?.index ?? -1;
+    const last = visible[visible.length - 1]?.index ?? -1;
+    const candidates = avatarPrefetchWindow(this.rows, first, last, this.avatarDirection);
+    const desired = new Set(candidates.map(({
+      source
+    }) => canonicalNativeListAvatarUri(source.uri)).filter(uri => uri !== undefined));
+    this.avatarLeases.forEach((release, uri) => {
+      if (!desired.has(uri)) {
+        release();
+        this.avatarLeases.delete(uri);
+      }
+    });
+    candidates.forEach(({
+      source,
+      priority
+    }) => {
+      const uri = canonicalNativeListAvatarUri(source.uri);
+      if (!uri) return;
+      const existing = this.avatarLeases.get(uri);
+      if (existing) existing.setPriority(priority);else {
+        let lease;
+        lease = acquireNativeListAvatar(this.document, uri, () => {}, () => {
+          if (this.avatarLeases.get(uri) === lease) {
+            lease?.();
+            this.avatarLeases.delete(uri);
+          }
+        }, priority);
+        this.avatarLeases.set(uri, lease);
+      }
+    });
+  }
   renderWindow() {
+    this.updateAvatarWindow();
     const viewportLength = this.viewportLength();
     const visible = webLayoutItemsForMount(this.layout, this.currentOffset(), viewportLength, this.virtualizationEnabled, viewportLength * OVERSCAN_VIEWPORTS);
     const desired = new Set(visible.map(item => item.index));
@@ -1264,6 +1976,7 @@ export class NativeListWebEngine {
       if (!desired.has(index)) {
         this.invalidateActionAnchorForElement(element);
         this.mounted.delete(index);
+        if (disposeWebImageRetries(element)) element.removeAttribute('data-render-signature');
         element.remove();
         this.pool.push(element);
       }
@@ -1285,6 +1998,20 @@ export class NativeListWebEngine {
         element.dataset.renderSignature = signature;
       }
     });
+    let measuredWarningChanged = false;
+    this.mounted.forEach((element, index) => {
+      const row = this.rows[index];
+      if (row?.type !== 'system' || row.variant !== 'warning' || row.height !== undefined) return;
+      const height = element.querySelector('.ok-native-list-warning')?.offsetHeight ?? 0;
+      if (height > 0 && height !== this.measuredWarningHeights.get(row.key)) {
+        this.measuredWarningHeights.set(row.key, height);
+        measuredWarningChanged = true;
+      }
+    });
+    if (measuredWarningChanged) {
+      this.recomputeLayout();
+      return;
+    }
     this.updateVisibleSelection();
     this.updateVisibleState();
   }
@@ -1295,12 +2022,16 @@ export class NativeListWebEngine {
   }
   renderElement(element, index, row, overlay = false) {
     this.invalidateActionAnchorForElement(element);
+    disposeWebImageRetries(element);
     const bindingEpoch = String(++this.bindingEpochCounter);
     element.className = overlay ? 'ok-native-list-item ok-native-list-sticky' : 'ok-native-list-item';
     setData(element, 'nativeListRowKey', row.key);
     setData(element, 'nativeListBindingEpoch', bindingEpoch);
     setData(element, 'nativeListRowIndex', index);
     setData(element, 'nativeListDisabled', Boolean(row.disabled));
+    setData(element, 'testid', row.testID);
+    // OneKey patch: deprecation dims a row without disabling its actions.
+    element.style.opacity = String(row.opacity ?? 1);
     setData(element, 'nativeListReorderable', this.isReorderable(row));
     setData(element, 'nativeListDragging', this.pointerReorder?.active && this.pointerReorder.sourceKey === row.key);
     setData(element, 'separator', row.separator);
@@ -1320,11 +2051,67 @@ export class NativeListWebEngine {
       selectedKeys: this.selectedKeys,
       itemIndex: index
     };
-    element.replaceChildren(createRowBody(context, row));
+    const body = createRowBody(context, row);
+    applySelectorTabularNumbers(body, row);
+    // OneKey patch: explicit selector fields preserve original page geometry.
+    element.style.contain = row.backgroundFullWidth ? 'layout style' : '';
+    if (row.backgroundColor) body.style.backgroundColor = row.backgroundColor;
+    if (row.backgroundFullWidth && row.backgroundColor) {
+      const bleed = paddingValues(this.snapshot).horizontal;
+      body.style.position = 'relative';
+      body.style.overflow = 'visible';
+      body.style.boxShadow = String(-bleed) + 'px 0 ' + row.backgroundColor + ',' + String(bleed) + 'px 0 ' + row.backgroundColor;
+    }
+    if (row.type === 'identity' && row.height !== undefined) {
+      const title = body.querySelector('.ok-native-list-title');
+      if (row.presentation === 'accountSelector') {
+        body.style.gap = '12px';
+        body.style.borderRadius = '12px';
+        if ('shape' in row.leading && row.leading.shape === 'rounded') {
+          const visual = body.querySelector('.ok-native-list-visual');
+          if (visual) visual.style.borderRadius = '8px';
+        }
+        if (title) title.style.lineHeight = '24px';
+      }
+      if (row.presentation === 'networkSelector') {
+        body.style.borderRadius = '12px';
+        const visual = body.querySelector('.ok-native-list-visual');
+        if (visual) {
+          visual.style.width = '32px';
+          visual.style.height = '32px';
+          visual.style.flexBasis = '32px';
+        }
+        if (row.leading.kind === 'network' && !row.leading.image && !row.leading.fallbackIcon && row.leading.fallbackText) {
+          const fallback = visual?.querySelector('.ok-native-list-visual-fallback');
+          if (fallback) {
+            fallback.style.fontSize = '19px';
+            fallback.style.lineHeight = '27px';
+            fallback.style.fontWeight = '600';
+            fallback.style.color = 'var(--nl-inverse-text)';
+          }
+        }
+        visual?.querySelectorAll('.ok-native-list-visual-main').forEach(image => {
+          image.style.width = '32px';
+          image.style.height = '32px';
+        });
+        if (title) {
+          title.style.fontSize = '16px';
+          title.style.lineHeight = '24px';
+          title.style.fontWeight = '500';
+        }
+        body.querySelectorAll('.ok-native-list-accessory').forEach(value => {
+          value.style.fontSize = '16px';
+          value.style.lineHeight = '24px';
+          value.style.fontWeight = '500';
+        });
+      }
+    }
+    element.replaceChildren(body);
   }
   renderFooter() {
     const row = this.snapshot.fixedFooter;
     this.invalidateActionAnchorForElement(this.footer);
+    disposeWebImageRetries(this.footer);
     this.footer.replaceChildren();
     if (!row) return;
     const element = createElement(this.document, 'div', 'ok-native-list-item');
@@ -1335,20 +2122,52 @@ export class NativeListWebEngine {
     element.style.height = String(estimateWebRowHeight(row, this.snapshot, this.viewport.clientWidth || DEFAULT_VIEWPORT_WIDTH)) + 'px';
     this.footer.appendChild(element);
   }
-  renderSectionIndex() {
+  sectionIndexVisibleEntryIndices(viewportHeight) {
+    const entryCount = this.sectionIndexEntries.length;
+    if (entryCount <= 1) return entryCount ? [0] : [];
+    const availableHeight = Math.max(0, viewportHeight - SECTION_INDEX_EDGE_PADDING * 2);
+    const maxVisible = Math.max(2, Math.floor(availableHeight / SECTION_INDEX_MIN_LABEL_SPACING) + 1);
+    if (entryCount <= maxVisible) {
+      return Array.from({
+        length: entryCount
+      }, (_, index) => index);
+    }
+    const result = new Set();
+    for (let slot = 0; slot < maxVisible; slot += 1) {
+      result.add(Math.round(slot * (entryCount - 1) / (maxVisible - 1)));
+    }
+    return [...result].sort((left, right) => left - right);
+  }
+  renderSectionIndex(viewportHeight) {
     this.indexRail.replaceChildren();
     if (!sectionIndexEnabled(this.snapshot)) {
+      this.sectionIndexEntries = [];
+      this.indexRail.hidden = true;
+      return;
+    }
+    this.sectionIndexEntries = this.snapshot.rows.flatMap((row, position) => row.type === 'sectionHeader' && row.indexTitle ? [{
+      key: row.key,
+      title: row.indexTitle,
+      position
+    }] : []);
+    if (this.sectionIndexEntries.length === 0 || viewportHeight < SECTION_INDEX_MIN_HEIGHT) {
       this.indexRail.hidden = true;
       return;
     }
+    const visibleEntryIndices = this.sectionIndexVisibleEntryIndices(viewportHeight);
+    setData(this.indexRail, 'compact', visibleEntryIndices.length < this.sectionIndexEntries.length);
     const fragment = this.document.createDocumentFragment();
-    this.snapshot.rows.forEach((row, index) => {
-      if (row.type !== 'sectionHeader' || !row.indexTitle) return;
-      const button = createElement(this.document, 'button', 'ok-native-list-index-button', row.indexTitle);
+    visibleEntryIndices.forEach(entryIndex => {
+      const entry = this.sectionIndexEntries[entryIndex];
+      if (!entry) return;
+      const button = createElement(this.document, 'button', 'ok-native-list-index-button', entry.title);
       button.setAttribute('type', 'button');
-      button.setAttribute('aria-label', 'Jump to ' + row.indexTitle);
-      setData(button, 'sectionPosition', index);
-      setData(button, 'sectionKey', row.key);
+      button.setAttribute('aria-label', 'Jump to ' + entry.title);
+      setData(button, 'sectionEntryIndex', entryIndex);
+      setData(button, 'sectionPosition', entry.position);
+      setData(button, 'sectionKey', entry.key);
+      const progress = this.sectionIndexEntries.length === 1 ? 0.5 : entryIndex / (this.sectionIndexEntries.length - 1);
+      button.style.top = String(SECTION_INDEX_EDGE_PADDING + progress * (viewportHeight - SECTION_INDEX_EDGE_PADDING * 2)) + 'px';
       fragment.appendChild(button);
     });
     this.indexRail.appendChild(fragment);
@@ -1357,7 +2176,9 @@ export class NativeListWebEngine {
   updateVisibleSelection() {
     const update = (element, row) => {
       if (!row) return;
-      const selected = this.selectedKeys.has(row.key);
+      // OneKey patch: selector adapters mark active rows independently of checkbox selection.
+      // const selected = this.selectedKeys.has(row.key);
+      const selected = row.selected === true || this.selectedKeys.has(row.key);
       setData(element, 'nativeListSelected', selected);
       element.setAttribute('aria-selected', String(selected));
       element.querySelectorAll('.ok-native-list-checkbox').forEach(checkbox => {
@@ -1396,7 +2217,9 @@ export class NativeListWebEngine {
     }
     this.checkEndReached(last?.index ?? -1);
     this.updateStickyHeader(first?.index ?? -1);
-    this.updateSectionIndex(first?.index ?? -1);
+    // OneKey patch: index highlighting follows header positions at scroll boundaries.
+    // this.updateSectionIndex(first?.index ?? -1);
+    this.updateSectionIndex();
   }
   updateStickyHeader(firstVisibleIndex) {
     if (!this.snapshot.layout.stickyHeaders || this.layout.horizontal || firstVisibleIndex < 0) {
@@ -1407,7 +2230,7 @@ export class NativeListWebEngine {
     let index = -1;
     for (let cursor = firstVisibleIndex; cursor >= 0; cursor -= 1) {
       const row = this.rows[cursor];
-      if (row?.type === 'sectionHeader' && row.variant !== 'summary') {
+      if (row?.type === 'sectionHeader' && row.sticky !== false && row.variant !== 'summary') {
         index = cursor;
         break;
       }
@@ -1433,7 +2256,7 @@ export class NativeListWebEngine {
     let nextIndex = -1;
     for (let cursor = index + 1; cursor < this.rows.length; cursor += 1) {
       const candidate = this.rows[cursor];
-      if (candidate?.type === 'sectionHeader' && candidate.variant !== 'summary') {
+      if (candidate?.type === 'sectionHeader' && candidate.sticky !== false && candidate.variant !== 'summary') {
         nextIndex = cursor;
         break;
       }
@@ -1443,10 +2266,15 @@ export class NativeListWebEngine {
     this.sticky.style.transform = 'translate3d(0,' + String(translate) + 'px,0)';
     this.updateVisibleSelection();
   }
-  updateSectionIndex(firstVisibleIndex) {
+
+  // private updateSectionIndex(firstVisibleIndex: number) {
+  updateSectionIndex() {
     let activeKey;
     this.snapshot.rows.forEach((row, index) => {
-      if (index <= firstVisibleIndex && row.type === 'sectionHeader' && row.indexTitle) activeKey = row.key;
+      if (
+      // OneKey patch: a spacer ending exactly at the viewport is not the active section.
+      // index <= firstVisibleIndex &&
+      itemStart(this.layout.items[index], this.layout.horizontal) <= this.currentOffset() && row.type === 'sectionHeader' && row.sticky !== false && row.indexTitle) activeKey = row.key;
     });
     this.indexRail.querySelectorAll('[data-section-key]').forEach(button => setData(button, 'active', button.dataset.sectionKey === activeKey));
   }
@@ -1539,7 +2367,14 @@ export class NativeListWebEngine {
     const bindingEpoch = rowElement.dataset.nativeListBindingEpoch;
     if (!source || !bindingEpoch || !rowElement.contains(actionElement)) return undefined;
     this.invalidateActionAnchor('rebind');
-    const rect = actionElement.getBoundingClientRect();
+    const actualRect = actionElement.getBoundingClientRect();
+    const inset = Number(actionElement.dataset.nativeListAnchorInset ?? 0);
+    const rect = {
+      left: actualRect.left + inset,
+      top: actualRect.top + inset,
+      width: actualRect.width - inset * 2,
+      height: actualRect.height - inset * 2
+    };
     const token = [this.actionAnchorInstanceId, this.snapshot.generation, ++this.actionAnchorCounter, bindingEpoch].join(':');
     const slotValue = actionElement.dataset.nativeListAnchorSlot;
     const direction = this.document.defaultView?.getComputedStyle(actionElement).direction === 'rtl' || actionElement.closest('[dir="rtl"]') ? 'rtl' : 'ltr';
@@ -1577,7 +2412,9 @@ export class NativeListWebEngine {
     });
   }
   handleRowPress(row, rowElement, sourceElement = rowElement) {
-    if (row.disabled) return;
+    // OneKey patch: missing-address rows keep their create-address accessory interactive.
+    // if (row.disabled) return;
+    if (row.disabled || row.pressDisabled) return;
     if (this.snapshot.selection?.rowPressToggles && this.snapshot.selection.mode !== 'none' && isSelectableRow(row)) {
       this.activateSelection({
         scope: 'row'
@@ -1597,6 +2434,27 @@ export class NativeListWebEngine {
       this.emitRowAction(row, actionKey);
     }
   }
+
+  // OneKey patch: hover opens the same anchored help action as native taps.
+  handleTitlePointerOver = event => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const action = target.closest('[data-native-list-hover-action]');
+    if (!action || event.relatedTarget instanceof Node && action.contains(event.relatedTarget)) return;
+    const rowElement = action.closest('[data-native-list-row-key]');
+    const row = this.rowAtElement(rowElement);
+    const memberKey = action.closest('[data-native-list-group-member-key]')?.dataset.nativeListGroupMemberKey;
+    const sourceRow = row?.type === 'walletGroup' ? [row.parent, ...row.children].find(member => member.key === memberKey) ?? row : row;
+    const actionKey = action.dataset.nativeListHoverAction === 'true' ? action.dataset.nativeListAction : action.dataset.nativeListHoverAction;
+    if (sourceRow && !sourceRow.disabled && actionKey) this.emitRowAction(sourceRow, actionKey, action, rowElement ?? undefined);
+  };
+  handleTitlePointerOut = event => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const action = target.closest('[data-native-list-hover-action]');
+    if (!action || event.relatedTarget instanceof Node && action.contains(event.relatedTarget)) return;
+    if (this.actionAnchor?.actionElement === action) this.invalidateActionAnchor('pointerLeave');
+  };
   handleClick = event => {
     if (Date.now() < this.suppressClickUntil) {
       event.preventDefault();
@@ -1627,6 +2485,12 @@ export class NativeListWebEngine {
     this.handleRowPress(sourceRow, rowElement ?? undefined, memberElement ?? rowElement ?? undefined);
   };
   handleKeyDown = event => {
+    // OneKey patch: non-button title help supports keyboard activation.
+    if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && event.target.matches('[role="button"][data-native-list-action]')) {
+      event.preventDefault();
+      event.target.click();
+      return;
+    }
     if (event.key === 'Escape') {
       if (this.pointerReorder?.active) {
         event.preventDefault();
@@ -1729,7 +2593,10 @@ export class NativeListWebEngine {
     if (this.frameHandle !== undefined || this.destroyed) return;
     this.frameHandle = this.requestFrame(() => {
       this.frameHandle = undefined;
-      if (this.virtualizationEnabled) this.renderWindow();else this.updateVisibleState();
+      if (this.virtualizationEnabled) this.renderWindow();else {
+        this.updateAvatarWindow();
+        this.updateVisibleState();
+      }
     });
   }
   requestFrame(callback) {
@@ -1740,13 +2607,20 @@ export class NativeListWebEngine {
     const view = this.document.defaultView;
     if (view?.cancelAnimationFrame) view.cancelAnimationFrame(handle);else view?.clearTimeout(handle);
   }
-  selectIndexPosition(position, title) {
+  selectIndexPosition(position, title, previewClientY) {
     this.scrollToIndex(position, {
       animated: false,
       alignment: 'start',
       viewPosition: 0,
       viewOffset: 0
     });
+    const frame = this.viewportFrame.getBoundingClientRect();
+    if (previewClientY !== undefined && frame.height > 0) {
+      const previewY = Math.min(frame.height - 24, Math.max(24, previewClientY - frame.top));
+      this.indexPreview.style.top = String(previewY) + 'px';
+    } else {
+      this.indexPreview.style.top = '50%';
+    }
     this.indexPreview.textContent = title;
     setData(this.indexPreview, 'visible', true);
     if (this.previewTimer !== undefined) this.document.defaultView?.clearTimeout(this.previewTimer);
@@ -1754,24 +2628,40 @@ export class NativeListWebEngine {
       setData(this.indexPreview, 'visible', false);
     }, 180);
   }
-  indexButtonAtEvent(event) {
-    const direct = event.target?.closest('[data-section-position]');
-    if (direct) return direct;
-    return this.document.elementFromPoint(event.clientX, event.clientY)?.closest('[data-section-position]') ?? undefined;
+  sectionIndexEntryAtEvent(event) {
+    const rail = this.indexRail.getBoundingClientRect();
+    if (this.sectionIndexEntries.length === 0 || rail.height <= 0) {
+      return undefined;
+    }
+    const availableHeight = Math.max(1, rail.height - SECTION_INDEX_EDGE_PADDING * 2);
+    const progress = Math.min(1, Math.max(0, (event.clientY - rail.top - SECTION_INDEX_EDGE_PADDING) / availableHeight));
+    const entryIndex = Math.round(progress * (this.sectionIndexEntries.length - 1));
+    const entry = this.sectionIndexEntries[entryIndex];
+    return entry ? {
+      entry,
+      previewClientY: event.clientY
+    } : undefined;
   }
   handleIndexPointer = event => {
     if (event.type === 'pointermove' && event.buttons === 0) return;
-    const button = this.indexButtonAtEvent(event);
-    if (!button) return;
+    const selection = this.sectionIndexEntryAtEvent(event);
+    if (!selection) return;
     event.preventDefault();
-    this.selectIndexPosition(Number(button.dataset.sectionPosition), button.textContent ?? '');
+    if (event.type === 'pointerdown') {
+      this.indexRail.setPointerCapture?.(event.pointerId);
+    }
+    this.selectIndexPosition(selection.entry.position, selection.entry.title, selection.previewClientY);
   };
   handleIndexClick = event => {
+    if ('detail' in event && typeof event.detail === 'number' && event.detail > 0) return;
     const target = event.target;
     if (!(target instanceof Element)) return;
-    const button = target.closest('[data-section-position]');
+    const button = target.closest('[data-section-entry-index]');
     if (!button) return;
-    this.selectIndexPosition(Number(button.dataset.sectionPosition), button.textContent ?? '');
+    const entry = this.sectionIndexEntries[Number(button.dataset.sectionEntryIndex)];
+    if (!entry) return;
+    const rect = button.getBoundingClientRect();
+    this.selectIndexPosition(entry.position, entry.title, rect.top + rect.height / 2);
   };
   handlePullStart = event => {
     if (this.pointerReorder?.pointerId === event.pointerId || !this.snapshot.capabilities?.pullToRefresh || this.viewport.scrollTop > 0 || event.pointerType !== 'touch' && event.pointerType !== 'pen') return;
@@ -1816,7 +2706,14 @@ export class NativeListWebEngine {
     const index = Number(rowElement?.dataset.nativeListRowIndex);
     const row = this.rows[index];
     if (!row || !this.isReorderable(row)) return;
-    if (row.type === 'walletGroup' && target.closest('[data-native-list-group-parent]')?.dataset.nativeListGroupParent !== 'true') return;
+    // OneKey patch: a child drag reorders its parent wallet group as one item.
+    // if (
+    // row.type === 'walletGroup' &&
+    // target.closest<HTMLElement>('[data-native-list-group-parent]')?.dataset
+    // .nativeListGroupParent !== 'true'
+    // )
+    // return;
+
     const view = this.document.defaultView;
     const state = {
       pointerId: event.pointerId,
@@ -1832,9 +2729,8 @@ export class NativeListWebEngine {
       active: false
     };
     this.pointerReorder = state;
-    if (state.pointerType === 'mouse') {
-      this.captureReorderPointer(state);
-    } else {
+    // OneKey patch: normal wallet taps retain their target until a drag is activated.
+    if (state.pointerType !== 'mouse') {
       state.longPressTimer = view?.setTimeout(() => this.activatePointerReorder(state), REORDER_TOUCH_LONG_PRESS_MS);
     }
   };
@@ -1935,6 +2831,20 @@ export class NativeListWebEngine {
     state.previewOffsetX = state.startX - rect.left;
     state.previewOffsetY = Math.min(previewHeight, Math.max(0, state.startY - rect.top));
     this.reorderPreview.replaceChildren(previewRow.cloneNode(true));
+    // Cloned previews need their own lease when a source row is recycled during dragging.
+    const originals = previewRow.querySelectorAll('img');
+    this.reorderPreview.querySelectorAll('img').forEach((image, index) => {
+      const original = originals.item(index);
+      const avatar = original ? webAvatarSources.get(original) : undefined;
+      if (!avatar) return;
+      const paint = image.previousElementSibling;
+      if (paint?.classList.contains('ok-native-list-selector-image-background')) {
+        image.addEventListener('load', () => {
+          paint.style.backgroundImage = 'url(' + JSON.stringify(image.currentSrc || image.src) + ')';
+        });
+      }
+      configureWebAvatar(image, avatar.source, avatar.uri);
+    });
     const sourceRow = state.workingRows[state.currentIndex];
     const badgeText = sourceRow ? webWalletGroupReorderBadge(sourceRow) : undefined;
     if (badgeText) {
@@ -1970,6 +2880,7 @@ export class NativeListWebEngine {
   }
   clearReorderPreviewVisual() {
     this.reorderPreview.hidden = true;
+    disposeWebImageRetries(this.reorderPreview);
     this.reorderPreview.replaceChildren();
     this.reorderPreview.style.removeProperty('transform');
     this.reorderPreview.style.removeProperty('transition');