@onekeyfe/react-native-native-list 6.7.0-alpha.375 → 6.7.0-alpha.382

package/android/src/main/java/com/onekey/nativelist/NativeListDataRowRenderer.kt

@@ -22,6 +22,7 @@ internal class NativeListDataRowView(context: ThemedReactContext, fonts: NativeL
       gravity = Gravity.CENTER_VERTICAL
     }
   private val cells = List(4) { NativeListTableColumnView(context, fonts) }
+  private val trailingAccessories = NativeListAccessoryStack(context, fonts)
 
   override fun unselectedBackground(
     item: NativeListItem,
@@ -54,16 +55,20 @@ internal class NativeListDataRowView(context: ThemedReactContext, fonts: NativeL
     addView(visual)
     addView(accessories)
     addView(columns, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
+    addView(trailingAccessories)
     accessories.onAction = { key, view, slot, target ->
       emitAction(key, view, "trailingAccessory", slot, target)
     }
+    trailingAccessories.onAction = { key, view, slot, target ->
+      emitAction(key, view, "trailingAccessory", slot, target)
+    }
   }
 
   override fun defaultHeight(item: NativeListItem, layout: String): Int {
     val values = item.json.optJSONArray("columns") ?: JSONArray()
     val secondary =
       (0 until values.length()).any {
-        values.getJSONObject(it).optString("secondaryText").isNotEmpty()
+        nativeListDataColumnText(values.getJSONObject(it), "secondaryText").isNotEmpty()
       }
     return if (layout == "table") if (secondary) 60 else 52 else if (secondary) 64 else 56
   }
@@ -127,6 +132,9 @@ internal class NativeListDataRowView(context: ThemedReactContext, fonts: NativeL
     val accessoryStyle = JSONObject().put("value", style.optJSONObject("index"))
     accessories.bind(item, descriptors, theme, accessoryStyle, sourceScale, checkboxState)
     accessories.visibility = if (descriptors.length() == 0) GONE else VISIBLE
+    val trailing = data.optJSONArray("trailing") ?: JSONArray()
+    trailingAccessories.bind(item, trailing, theme, style, sourceScale, checkboxState)
+    trailingAccessories.visibility = if (trailing.length() == 0) GONE else VISIBLE
     accessories.layoutParams =
       LayoutParams(dp(32), LayoutParams.WRAP_CONTENT).apply { marginEnd = dp(10) }
     val values = data.getJSONArray("columns")
@@ -159,6 +167,7 @@ internal class NativeListDataRowView(context: ThemedReactContext, fonts: NativeL
             style,
             fixedTableGeometry = unstyled,
           )
+        cell.bindTitleIcons(value, theme, sourceScale)
         // Legacy table default: every column is a fixed 40dp, top-aligned block.
         cell.layoutParams =
           LayoutParams(
@@ -194,17 +203,20 @@ internal class NativeListDataRowView(context: ThemedReactContext, fonts: NativeL
     checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
   ) {
     accessories.updateSelection(item, checkboxState)
+    trailingAccessories.updateSelection(item, checkboxState)
   }
 
   override fun recycleContent() {
     visual.recycle()
     accessories.reset()
+    trailingAccessories.reset()
     cells.forEach { it.reset() }
   }
 
   override fun disposeContent() {
     visual.dispose()
     accessories.reset()
+    trailingAccessories.reset()
   }
 
   private companion object {
@@ -215,6 +227,8 @@ internal class NativeListDataRowView(context: ThemedReactContext, fonts: NativeL
 private class NativeListTableColumnView(context: android.content.Context, private val fonts: NativeListFonts) : LinearLayout(context) {
   private val primaryLine = LinearLayout(context)
   private val primary = NativeListTextView(context)
+  private val titleIcon = OneKeyIconView(context)
+  private val secondaryTitleIcon = OneKeyIconView(context)
   private val badges = LinearLayout(context)
   private val secondaryLine = LinearLayout(context)
   private val secondaryLeading = NativeListTextView(context)
@@ -256,6 +270,13 @@ private class NativeListTableColumnView(context: android.content.Context, privat
       },
     )
     primaryLine.addView(primary, LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT))
+    for (icon in listOf(titleIcon, secondaryTitleIcon)) {
+      icon.visibility = GONE
+      primaryLine.addView(
+        icon,
+        LayoutParams(dp(20), dp(20)).apply { marginStart = dp(4) },
+      )
+    }
     primaryLine.addView(
       badges,
       LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply {
@@ -270,6 +291,13 @@ private class NativeListTableColumnView(context: android.content.Context, privat
   }
 
   fun reset() {
+    primaryLine.gravity = Gravity.CENTER_VERTICAL
+    for (icon in listOf(titleIcon, secondaryTitleIcon)) {
+      icon.visibility = GONE
+      icon.iconName = ""
+      icon.contentDescription = null
+      icon.setOnClickListener(null)
+    }
     primaryLine.layoutParams.width = LayoutParams.WRAP_CONTENT
     primaryLine.layoutParams.height = LayoutParams.WRAP_CONTENT
     secondaryLine.layoutParams.height = LayoutParams.WRAP_CONTENT
@@ -292,6 +320,26 @@ private class NativeListTableColumnView(context: android.content.Context, privat
     badges.visibility = GONE
   }
 
+  fun bindTitleIcons(column: JSONObject, theme: JSONObject?, sourceScale: Boolean) {
+    for ((field, icon) in listOf(
+      "titleIcon" to titleIcon,
+      "secondaryTitleIcon" to secondaryTitleIcon,
+    )) {
+      val descriptor = column.optJSONObject(field) ?: continue
+      icon.iconName = descriptor.optString("name")
+      icon.glyphSizeDp = 20
+      icon.useSourceScale = sourceScale
+      icon.tintColor = parseNativeListColor(
+        descriptor.optString("tintColor").takeIf(String::isNotEmpty)
+          ?: theme?.optString("iconSubdued", "#00000072") ?: "#00000072"
+      )
+      icon.contentDescription = descriptor.optString("accessibilityLabel").takeIf(String::isNotEmpty)
+      icon.visibility = VISIBLE
+    }
+    if (primary.maxLines > 1 && (titleIcon.visibility == VISIBLE || secondaryTitleIcon.visibility == VISIBLE))
+      primaryLine.gravity = Gravity.TOP
+  }
+
   fun bind(
     column: JSONObject,
     rowBadges: JSONArray?,
@@ -326,7 +374,7 @@ private class NativeListTableColumnView(context: android.content.Context, privat
         .bind(view)
       if (resolved.optString("truncate") != "clip") view.ellipsize = TextUtils.TruncateAt.END
     }
-    bindText(primary, column.optString("text"), "columns", primarySize, "medium", primaryColor, 20)
+    bindText(primary, nativeListDataColumnText(column, "text"), "columns", primarySize, "medium", primaryColor, 20)
     bindText(
       secondaryLeading,
       column.optString("secondaryLeadingText"),
@@ -338,13 +386,15 @@ private class NativeListTableColumnView(context: android.content.Context, privat
     )
     bindText(
       secondary,
-      column.optString("secondaryText"),
+      nativeListDataColumnText(column, "secondaryText"),
       "columnSecondary",
       12f,
       "regular",
       secondaryColor,
       16,
     )
+    primary.text = dataSegments(primary.text, column.optJSONArray("textSegments"), primary.textSize)
+    secondary.text = dataSegments(secondary.text, column.optJSONArray("secondaryTextSegments"), secondary.textSize)
     if (rowBadges != null && rowBadges.length() > 0) {
       badges.visibility = VISIBLE
       for (index in 0 until minOf(2, rowBadges.length())) {
@@ -377,7 +427,7 @@ private class NativeListTableColumnView(context: android.content.Context, privat
       secondaryLeading.visibility = VISIBLE
       secondaryLine.visibility = VISIBLE
     }
-    val secondaryText = column.optString("secondaryText")
+    val secondaryText = nativeListDataColumnText(column, "secondaryText")
     if (secondaryText.isNotEmpty()) {
       secondary.visibility = VISIBLE
       secondaryLine.visibility = VISIBLE
@@ -404,7 +454,9 @@ private class NativeListTableColumnView(context: android.content.Context, privat
   ) {
     reset()
     gravity = Gravity.START
-    val value = android.text.SpannableStringBuilder(column.optString("text"))
+    val value = android.text.SpannableStringBuilder(dataSegments(
+      nativeListDataColumnText(column, "text"), column.optJSONArray("textSegments"),
+      sp(16f) * resources.displayMetrics.scaledDensity))
     value.setSpan(
       android.text.style.ForegroundColorSpan(primaryColor),
       0,
@@ -428,10 +480,12 @@ private class NativeListTableColumnView(context: android.content.Context, privat
           android.text.Spannable.SPAN_EXCLUSIVE_EXCLUSIVE,
         )
       }
-    val secondaryText = column.optString("secondaryText")
+    val secondaryText = nativeListDataColumnText(column, "secondaryText")
     if (secondaryText.isNotEmpty()) {
       val start = value.length
-      value.append("\n$secondaryText")
+      value.append("\n")
+      value.append(dataSegments(secondaryText, column.optJSONArray("secondaryTextSegments"),
+        sp(16f) * resources.displayMetrics.scaledDensity))
       value.setSpan(
         android.text.style.ForegroundColorSpan(secondaryColor),
         start,
@@ -461,6 +515,24 @@ private class NativeListTableColumnView(context: android.content.Context, privat
     primary.visibility = VISIBLE
   }
 
+  private fun dataSegments(fallback: CharSequence, segments: JSONArray?, fontSizePx: Float): CharSequence {
+    if (segments == null || segments.length() == 0) return fallback
+    val value = android.text.SpannableStringBuilder(fallback)
+    var offset = 0
+    for (index in 0 until segments.length()) {
+      val segment = segments.getJSONObject(index)
+      val end = offset + segment.optString("text").length
+      if (segment.optString("style") == "subscript" && end > offset) {
+        val density = resources.displayMetrics.density
+        val size = (kotlin.math.ceil(fontSizePx / density * 0.6f) * density).roundToInt()
+        value.setSpan(android.text.style.AbsoluteSizeSpan(size), offset, end,
+          android.text.Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+      }
+      offset = end
+    }
+    return value
+  }
+
   private fun applyStyle(style: JSONObject) {
     style.optJSONObject("columns")?.let {
       if (it.has("alignment")) {
@@ -485,3 +557,11 @@ private class NativeListTableColumnView(context: android.content.Context, privat
 
   private fun sp(value: Float): Float = NativeListScale.font(resources, value)
 }
+
+private fun nativeListDataColumnText(column: JSONObject, field: String): String {
+  val segments = column.optJSONArray("${field}Segments")
+  if (segments == null || segments.length() == 0) return column.optString(field)
+  return buildString {
+    for (index in 0 until segments.length()) append(segments.getJSONObject(index).optString("text"))
+  }
+}

package/android/src/main/java/com/onekey/nativelist/NativeListIdentityRenderer.kt

@@ -1,5 +1,6 @@
 package com.margelo.nitro.nativelist
 
+import android.graphics.PointF
 import android.graphics.drawable.GradientDrawable
 import android.text.Spannable
 import android.text.SpannableStringBuilder
@@ -8,6 +9,7 @@ import android.text.style.AbsoluteSizeSpan
 import android.text.style.ForegroundColorSpan
 import android.util.TypedValue
 import android.view.Gravity
+import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.widget.LinearLayout
@@ -28,17 +30,41 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
   private val mainColumn = LinearLayout(context)
   private val titleLine = PackedTitleLineLayout(context)
   private val title = NativeListTextView(context)
+  private val titleIcon = OneKeyIconView(context)
   private val subtitle = NativeListTextView(context)
   private val tertiary = NativeListTextView(context)
   private val badgeLine = NativeListTextView(context)
+  private val titleSuffixLabels = mutableListOf<NativeListTextView>()
+  private val titleSuffixMaxWidths = mutableListOf<Int>()
   private val trailingColumn = NativeListAccessoryStack(context, fonts)
   private val semanticBadgeLabels = mutableListOf<TextView>()
   private val semanticSubtitleLabels = mutableListOf<TextView>()
   private var walletBadgeLine: View? = null
   private var currentItem: NativeListItem? = null
   private var currentTheme: JSONObject? = null
+  private var longPressPoint: PointF? = null
+  private var longPressPointEpoch = -1L
   private val paintDefaults = mutableMapOf<TextView, Int>()
 
+  override fun onRowTouch(event: MotionEvent) {
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        longPressPoint = if (currentItem?.isRowPressEnabled == true) PointF(event.x, event.y) else null
+        longPressPointEpoch = bindingEpoch
+      }
+      MotionEvent.ACTION_MOVE -> {
+        if (longPressPointEpoch == bindingEpoch && longPressPoint != null &&
+          event.x >= 0 && event.y >= 0 && event.x < width && event.y < height
+        ) longPressPoint?.set(event.x, event.y)
+        else longPressPoint = null
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        longPressPoint = null
+        longPressPointEpoch = -1L
+      }
+    }
+  }
+
   override fun backgroundGroupPosition(
     item: NativeListItem,
     layout: String,
@@ -83,6 +109,7 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     titleLine.orientation = HORIZONTAL
     titleLine.gravity = Gravity.CENTER_VERTICAL
     titleLine.addView(title, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
+    titleLine.addView(titleIcon, LayoutParams(dp(20), dp(20)).apply { marginStart = dp(4) })
     titleLine.addView(badgeLine)
     trailingColumn.onAction = { key, view, slot, target ->
       emitAction(key, view, "trailingAccessory", slot, target, trailingColumn.anchorInset(view))
@@ -111,7 +138,7 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
 
   private fun showText(view: TextView, text: String, lines: Int) {
     view.text = text
-    view.maxLines = lines
+    view.maxLines = if (lines == 0) Int.MAX_VALUE else lines
     view.visibility = if (text.isEmpty()) GONE else VISIBLE
   }
 
@@ -135,10 +162,42 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     layout: String,
     checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
   ) {
+    cancelLongPress()
+    longPressPoint = null
+    longPressPointEpoch = -1L
     currentItem = item
+    val longPressActionKey = item.json.optString("longPressActionKey")
+    val boundEpoch = bindingEpoch
+    setOnLongClickListener(
+      if (longPressActionKey.isNotEmpty())
+        OnLongClickListener {
+          val point = longPressPoint
+          if (!isEnabled || !item.isRowPressEnabled || currentItem?.key != item.key ||
+            bindingEpoch != boundEpoch ||
+            (longPressPointEpoch == boundEpoch && point == null)) false
+          else {
+            val windowPoint = point?.takeIf { longPressPointEpoch == boundEpoch }?.let {
+              val location = IntArray(2)
+              getLocationInWindow(location)
+              PointF(location[0] + it.x, location[1] + it.y)
+            }
+            onAction?.invoke(item, longPressActionKey, null,
+              NativeListActionOrigin(this, this, bindingEpoch, "row",
+                windowPointPixels = windowPoint))
+            longPressPoint = null
+            longPressPointEpoch = -1L
+            true
+          }
+        }
+      else null
+    )
+    isLongClickable = longPressActionKey.isNotEmpty()
     currentTheme = theme
     removeAllViews()
     mainColumn.removeAllViews()
+    titleSuffixLabels.forEach(titleLine::removeView)
+    titleSuffixLabels.clear()
+    titleSuffixMaxWidths.clear()
     semanticBadgeLabels.clear()
     semanticSubtitleLabels.clear()
     walletBadgeLine = null
@@ -157,8 +216,12 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     mainColumn.gravity = Gravity.CENTER_VERTICAL
     titleLine.gravity = Gravity.CENTER_VERTICAL
     titleLine.packsChildrenAtStart = false
+    titleLine.leadingTextMaxWidth = Int.MAX_VALUE
     titleLine.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
     title.layoutParams = LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f)
+    titleIcon.visibility = GONE
+    titleIcon.contentDescription = null
+    titleIcon.setOnClickListener(null)
     for (view in listOf(title, subtitle, tertiary, badgeLine)) {
       view.text = ""
       view.visibility = GONE
@@ -294,6 +357,19 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
   private fun addLeading(visual: JSONObject?, sizeDp: Int, spacingDp: Int = 12) {
     // Legacy: a missing visual still reserves an empty, transparent leading slot.
     val descriptor = visual ?: JSONObject().put("backgroundColor", "#00000000")
+    val overlays = descriptor.optJSONArray("overlays")
+    if (overlays != null && (0 until minOf(2, overlays.length())).any { index ->
+        val overlay = overlays.optJSONObject(index) ?: return@any false
+        overlay.optInt("offsetX", overlay.optInt("offset", 2)) > 0 ||
+          overlay.optInt("offsetY", overlay.optInt("offset", 2)) > 0
+      }) {
+      // The badge extends beyond the avatar and the row's padded content box.
+      clipChildren = false
+      clipToPadding = false
+    }
+    leadingFrame.bitmapBorderWidth =
+      if (descriptor.optString("borderColor").isNotEmpty() &&
+        descriptor.optString("borderStyle") != "dashed") dp(1) else 0
     if (visual == null) leadingFrame.recycle()
     val item = currentItem!!
     val style = item.json.optJSONObject("style")?.optJSONObject("image") ?: JSONObject()
@@ -366,7 +442,58 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
   }
 
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val ratio = currentItem?.json?.optJSONObject("style")
+      ?.optDouble("leadingContentMaxWidthRatio", Double.NaN) ?: Double.NaN
+    titleLine.leadingTextMaxWidth =
+      if (ratio.isFinite() && ratio > 0.0 && ratio <= 1.0 && leadingFrame.parent === this) {
+        val inner = (MeasureSpec.getSize(widthMeasureSpec) - paddingLeft - paddingRight)
+          .coerceAtLeast(0)
+        val leading = leadingFrame.layoutParams as LayoutParams
+        val icon = if (titleIcon.visibility == VISIBLE) dp(24) else 0
+        (inner * ratio).roundToInt()
+          .minus(leading.width + leading.marginEnd + icon)
+          .coerceAtLeast(0)
+      } else Int.MAX_VALUE
+    titleSuffixLabels.forEachIndexed { index, label ->
+      label.maxWidth = titleSuffixMaxWidths[index]
+    }
     super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    if (titleSuffixLabels.isNotEmpty()) {
+      val fixedWidth =
+        (1 until titleLine.childCount).sumOf { index ->
+          val view = titleLine.getChildAt(index)
+          if (view.visibility == GONE || titleSuffixLabels.any { it === view }) 0
+          else {
+            val margins = view.layoutParams as MarginLayoutParams
+            view.measuredWidth + margins.leftMargin + margins.rightMargin
+          }
+        }
+      val suffixMargins = titleSuffixLabels.sumOf {
+        val margins = it.layoutParams as MarginLayoutParams
+        margins.leftMargin + margins.rightMargin
+      }
+      val available =
+        (titleLine.measuredWidth - fixedWidth - suffixMargins - dp(80)).coerceAtLeast(0)
+      val desired = titleSuffixLabels.mapIndexed { index, label ->
+        label.paint.measureText(label.text.toString()).roundToInt()
+          .coerceAtMost(titleSuffixMaxWidths[index])
+      }
+      val total = desired.sum()
+      var remaining = available
+      var changed = false
+      titleSuffixLabels.forEachIndexed { index, label ->
+        val share =
+          if (total <= available) desired[index]
+          else if (index == titleSuffixLabels.lastIndex) remaining
+          else (desired[index].toLong() * available / total).toInt()
+        remaining -= share
+        if (label.maxWidth != share) {
+          label.maxWidth = share
+          changed = true
+        }
+      }
+      if (changed) super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    }
     val item = currentItem ?: return
     if (
       item.hasExplicitHeight &&
@@ -424,6 +551,9 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
   }
 
   override fun recycleContent() {
+    cancelLongPress()
+    longPressPoint = null
+    longPressPointEpoch = -1L
     leadingFrame.recycle()
     trailingColumn.reset()
     currentItem = null
@@ -592,6 +722,48 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
     titleLine.packsChildrenAtStart = true
     title.ellipsize = TextUtils.TruncateAt.END
     showText(title, item.json.optString("title"), item.json.optInt("titleLines", 1))
+    item.json.optJSONArray("titleSuffixes")?.let { suffixes ->
+      for (index in 0 until suffixes.length()) {
+        val suffix = suffixes.optJSONObject(index) ?: continue
+        val label = NativeListTextView(context).apply {
+          text = suffix.optString("text")
+          typeface = fonts.regular(context)
+          textSize = sp(12f)
+          includeFontPadding = false
+          maxLines = 1
+          ellipsize = TextUtils.TruncateAt.END
+          setTextColor(
+            color(
+              theme,
+              if (suffix.optString("tone") == "disabled") "disabledText" else "secondaryText",
+              "#0000009B",
+            )
+          )
+        }
+        TextViewCompat.setLineHeight(label, dp(16))
+        val maxWidth =
+          if (suffix.has("maxWidth")) stylePx(suffix.optDouble("maxWidth")) else Int.MAX_VALUE
+        label.maxWidth = maxWidth
+        titleSuffixMaxWidths.add(maxWidth)
+        titleSuffixLabels.add(label)
+        titleLine.addView(
+          label,
+          titleLine.childCount - 1,
+          LayoutParams(LayoutParams.WRAP_CONTENT, dp(16)).apply { marginStart = dp(8) },
+        )
+      }
+    }
+    item.json.optJSONObject("titleIcon")?.let { icon ->
+      titleIcon.iconName = icon.optString("name")
+      titleIcon.glyphSizeDp = 20
+      titleIcon.useSourceScale = sourceScale
+      titleIcon.tintColor = safeColor(
+        icon.optString("tintColor").takeIf(String::isNotEmpty),
+        color(theme, "iconSubdued", "#00000072"),
+      )
+      titleIcon.contentDescription = icon.optString("accessibilityLabel").takeIf(String::isNotEmpty)
+      titleIcon.visibility = VISIBLE
+    }
     if (item.json.optString("presentation") == "accountSelector") {
       title.typeface = fonts.regular(context)
     }
@@ -711,6 +883,10 @@ internal class NativeListIdentityRowView(context: ThemedReactContext, fonts: Nat
           .let { kinds ->
             kinds.containsAll(listOf("value", "checkbox")) ||
               kinds == listOf("valuePair", "menu") ||
+              kinds == listOf("valuePair", "chevron") ||
+              (kinds == listOf("icon", "chevron") &&
+                accessories.getJSONObject(0).optString("name") == "RefreshCcwOutline" &&
+                accessories.getJSONObject(0).optString("actionKey").isEmpty()) ||
               (kinds == listOf("icon", "icon") &&
                 accessories.getJSONObject(0).optString("name") == "PencilOutline" &&
                 accessories.getJSONObject(1).optString("name") == "DragOutline")

package/android/src/main/java/com/onekey/nativelist/NativeListLeadingVisual.kt

@@ -27,6 +27,7 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
   private val cornerBackdrop = View(context)
   private val slots = mutableListOf<NativeListImageSlot>()
   private val overlaySlots = mutableListOf<NativeListImageSlot>()
+  private val overlayFallbackIcons = mutableListOf<OneKeyIconView>()
   private val overlays = mutableListOf<Pair<FrameLayout, JSONObject>>()
   private var visual = JSONObject()
   private var style = JSONObject()
@@ -159,6 +160,8 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
     }
     val placeholder = theme?.optString("strongBackground", "#0000000F") ?: "#0000000F"
     val fallbackIcon = visual.optJSONObject("fallbackIcon")
+    val fallbackBackground = fallbackIcon?.optString("backgroundColor")
+      ?.takeIf(String::isNotEmpty) ?: placeholder
     val sourceFallback =
       sources.firstOrNull()?.first?.optString("loadingStrategy", "none")?.let { it != "none" } ==
         true && (visual.has("fallbackText") || fallbackIcon != null)
@@ -179,7 +182,7 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
     val restored = fallbackKey?.let(NativeListSourceFallbackState::has) == true
     fallback.textSize = if (sourceScale) 13f else NativeListScale.font(resources, 13f)
     fallback.text = visual.optString("fallbackText").take(2)
-    fallback.setTextColor(color("#00000072"))
+    fallback.setTextColor(color(visual.optString("fallbackTextColor", "#00000072")))
     fallback.visibility =
       if (kind != "icon" && fallbackIcon == null && (sources.isEmpty() || restored)) VISIBLE
       else GONE
@@ -193,7 +196,9 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
       color(
         visual.optString("backgroundColor", if (sources.isEmpty()) placeholder else "#00000000")
       )
-    val backgroundColor = if (sourceFallback) color(placeholder) else visualBackground
+    val backgroundColor =
+      if (sources.isEmpty() && fallbackIcon?.has("backgroundColor") == true || restored) color(fallbackBackground)
+      else if (sourceFallback) color(placeholder) else visualBackground
     background =
       fill(backgroundColor, 0f).apply {
         if (kind == "icon" && iconBorder) setStroke(1, color("#0000001F"))
@@ -210,7 +215,7 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
         slot.recycle()
         slot.view.visibility = GONE
       } else {
-        slot.view.visibility = if (index > 0 || sourceFallback) INVISIBLE else VISIBLE
+        slot.view.visibility = if (index > 0 || restored) INVISIBLE else VISIBLE
         slot.bind(
           sources[index].first,
           "$key:leading:$index",
@@ -229,7 +234,7 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
               else NativeListSourceFallbackState.remember(it)
             }
             (background as? GradientDrawable)?.setColor(
-              if (loaded) visualBackground else color(placeholder)
+              if (loaded) visualBackground else color(fallbackBackground)
             )
             fallback.visibility = if (!loaded && fallbackIcon == null) VISIBLE else GONE
             icon.visibility = if (!loaded && fallbackIcon != null) VISIBLE else GONE
@@ -272,8 +277,18 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
         overlayCount = descriptors.size,
       )
     while (overlaySlots.size < descriptors.size) overlaySlots.add(NativeListImageSlot(reactContext))
+    while (overlayFallbackIcons.size < descriptors.size)
+      overlayFallbackIcons.add(OneKeyIconView(context))
     descriptors.forEachIndexed { index, data ->
       val frame = previousOverlays.getOrNull(index)?.first ?: FrameLayout(context)
+      val image = data.optJSONObject("image")
+      val fallbackData = data.optJSONObject("fallbackIcon")
+      val fallbackGlyph = overlayFallbackIcons[index].apply {
+        visibility = GONE
+        iconName = fallbackData?.optString("name") ?: ""
+        tintColor = color(fallbackData?.optString("tintColor", "#0000009B") ?: "#0000009B")
+        useSourceScale = sourceScale
+      }
       frame.background =
         fill(
           color(data.optString("backgroundColor", "#00000000")),
@@ -285,11 +300,15 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
       frame.outlineProvider = ViewOutlineProvider.BACKGROUND
       frame.clipToOutline = true
       val child: View =
-        data.optJSONObject("image")?.let { image ->
+        image?.let { source ->
           val slot = overlaySlots[index]
           slot.view.visibility = INVISIBLE
-          slot.bind(image, "$key:overlay:$index", placeholder = placeholder) {
+          val circularImage = data.optInt("padding", 0) > 0 &&
+            data.optInt("width", data.optInt("size", 20)) == overlayHeight(data)
+          slot.bind(source, "$key:overlay:$index", placeholder = placeholder,
+            round = circularImage) {
             slot.view.visibility = if (it) VISIBLE else INVISIBLE
+            fallbackGlyph.visibility = if (!it && fallbackData != null) VISIBLE else GONE
           }
           slot.view
         }
@@ -306,8 +325,13 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
               if (walletText) androidx.core.widget.TextViewCompat.setLineHeight(this, dp(16))
               else setLineSpacing(0f, 1f)
               typeface =
-                if (isWalletText(data)) fonts.regular(context)
-                else fonts.medium(context)
+                when (data.optString("fontWeight")) {
+                  "regular" -> fonts.regular(context)
+                  "medium" -> fonts.medium(context)
+                  "semibold" -> fonts.semibold(context)
+                  "bold" -> fonts.bold(context)
+                  else -> if (isWalletText(data)) fonts.regular(context) else fonts.medium(context)
+                }
               setTextColor(color(data.optString("tintColor", "#0000009B")))
             }
           } else {
@@ -321,11 +345,13 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
       val inset = data.optInt("padding", 0)
       if (isWalletText(data)) frame.setPadding(dp(2), 0, dp(2), 0)
       else frame.setPadding(dp(inset), dp(inset), dp(inset), dp(inset))
-      if (child.parent !== frame) {
-        frame.removeAllViews()
-        // A reused slot view may still belong to a frame dropped by an earlier bind.
-        (child.parent as? android.view.ViewGroup)?.removeView(child)
-        frame.addView(child, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+      frame.removeAllViews()
+      // A reused slot view may still belong to a frame dropped by an earlier bind.
+      (child.parent as? android.view.ViewGroup)?.removeView(child)
+      frame.addView(child, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+      if (image != null && fallbackData != null) {
+        (fallbackGlyph.parent as? android.view.ViewGroup)?.removeView(fallbackGlyph)
+        frame.addView(fallbackGlyph, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
       }
       if (frame.parent == null) addView(frame)
       overlays.add(frame to data)
@@ -383,8 +409,11 @@ internal class NativeListLeadingVisual(private val reactContext: ThemedReactCont
       )
     }
     place(fallback, 0, 0, w, h)
+    val explicitFallbackSize = visual.optJSONObject("fallbackIcon")
+      ?.optDouble("size", Double.NaN)?.takeIf { it.isFinite() && it > 0.0 }
     val iconSize =
-      if (sources.isNotEmpty() && visual.optJSONObject("fallbackIcon") != null)
+      if (explicitFallbackSize != null) dp(explicitFallbackSize.roundToInt())
+      else if (sources.isNotEmpty() && visual.optJSONObject("fallbackIcon") != null)
         (minOf(w, h) *
             if (visual.optJSONObject("fallbackIcon")?.optString("name") == "GlobusOutline") 1.2f
             else 1f)