fix missing option + result binary highlight

src/codec-components/BinaryViewCodec/codec-components.tsx

@@ -45,6 +45,7 @@ export const CAccountId: EditAccountId = CPrimitive
 export const CBytes: EditBytes = CPrimitive
 
 export const COption: EditOption = ({ path, value, inner }) => {
+  const isActive = useStateObservable(isActive$(path.join(".")))
   const focus = useSubtreeFocus()
   const sub = focus.getNextPath(path)
   if (sub) {
@@ -55,14 +56,17 @@ export const COption: EditOption = ({ path, value, inner }) => {
   // TODO Looking at scale-ts, Option<Boolean> seems to be 00, 01 or 02! (None, Some(true), Some(false))
   // but can't find it at the docs? https://docs.substrate.io/reference/scale-codec/
   return (
-    <span>
-      {toConcatHex(u8.enc(value ? 1 : 0))}
+    <span className={highlight(isActive)}>
+      <span className={headerHighlight(isActive)}>
+        {toConcatHex(u8.enc(value ? 1 : 0))}
+      </span>
       {inner}
     </span>
   )
 }
 
 export const CResult: EditResult = ({ value, inner, path }) => {
+  const isActive = useStateObservable(isActive$(path.join(".")))
   const focus = useSubtreeFocus()
   const sub = focus.getNextPath(path)
   if (sub) return inner
@@ -70,8 +74,10 @@ export const CResult: EditResult = ({ value, inner, path }) => {
   if (value === NOTIN) return <MissingData />
 
   return (
-    <span>
-      {toConcatHex(u8.enc(value.success ? 0 : 1))}
+    <span className={highlight(isActive)}>
+      <span className={headerHighlight(isActive)}>
+        {toConcatHex(u8.enc(value.success ? 0 : 1))}
+      </span>
       {inner}
     </span>
   )

src/pages/Extrinsics/BinaryDisplay.tsx

@@ -13,6 +13,7 @@ import { Binary, HexString } from "@polkadot-api/substrate-bindings"
 import { toHex } from "@polkadot-api/utils"
 import { FC, useState } from "react"
 import { twMerge } from "tailwind-merge"
+import "./binaryDisplay.css"
 
 export const BinaryDisplay: FC<{
   codecType: number
@@ -46,6 +47,7 @@ export const BinaryDisplay: FC<{
         <CopyText text={hex ?? ""} disabled={!hex} className="h-5" />
         <div
           className={twMerge(
+            "binary-display-codec",
             "text-sm tabular-nums overflow-hidden flex-1",
             wrap ? "break-words" : "whitespace-nowrap text-ellipsis h-5",
           )}

src/pages/Extrinsics/binaryDisplay.css

@@ -0,0 +1,3 @@
+.binary-display-codec span {
+    transition: 0.2s margin;
+}