Implement display of transaction hashes

app/components/Tx.tsx

@@ -0,0 +1,52 @@
+import { TransactionId } from "@penumbra-zone/protobuf/penumbra/core/txhash/v1/txhash_pb";
+import { k12 } from "@noble/hashes/sha3-addons";
+import { Tooltip, TooltipProvider } from "@penumbra-zone/ui/Tooltip";
+import { bytesToHex } from "@noble/hashes/utils";
+
+// data -> 64 bit hash -> 16 4bit hue values -> 16 floats in [0, 1]
+const fingerprintToHues = (data: Uint8Array): number[] => {
+  const hash = k12(data, { dkLen: 8 });
+  const out: number[] = [];
+  for (const b of hash) {
+    out.push((b & 0xf) / 0xf);
+    out.push(((b >> 4) & 0xf) / 0xf);
+  }
+  return out;
+};
+
+const PixelGrid = ({ hues }: { hues: number[] }) => {
+  const S = 0.8;
+  const L = 0.5;
+  const padded = hues.concat(Array(16).fill(0.0)).slice(0, 16);
+  const values = padded.map((h, i) => ({
+    x: i % 4,
+    y: Math.floor(i / 4),
+    h,
+    key: i,
+  }));
+  return (
+    <svg viewBox="0 0 4 4" width="1.5em" height="1.5em">
+      {values.map((v) => (
+        <rect
+          key={v.key}
+          width="1"
+          height="1"
+          x={v.x}
+          y={v.y}
+          fill={`hsl(${v.h * 360}, ${S * 100}%, ${L * 100}%)`}
+        />
+      ))}
+    </svg>
+  );
+};
+
+export default ({ transactionId }: { transactionId: TransactionId }) => {
+  const bytes = transactionId.inner;
+  return (
+    <TooltipProvider>
+      <Tooltip message={bytesToHex(bytes)}>
+        <PixelGrid hues={fingerprintToHues(bytes)} />
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

app/routes/_index.tsx

@@ -14,6 +14,7 @@ import {
 import testServiceClient from "~/server/grpc/wmuServiceClient";
 import Timestamp from "~/components/Timestamp";
 import AddressComponent from "~/components/AddressComponent";
+import Tx from "~/components/Tx";
 
 const TransferRow = ({ transfer }: { transfer: Transfer }) => {
   if (!transfer.timestamp) {
@@ -27,9 +28,11 @@ const TransferRow = ({ transfer }: { transfer: Transfer }) => {
   if (!receiver) {
     throw new Error("missing receiver in transfer");
   }
+  const tx = transfer?.tx;
 
   return (
     <Table.Tr>
+      <Table.Td>{tx ? <Tx transactionId={tx} /> : undefined}</Table.Td>
       <Table.Td>
         <ValueViewComponent valueView={transfer.value} />
       </Table.Td>
@@ -60,6 +63,7 @@ const ShowTransfers = ({ transfers }: { transfers: Transfer[] }) => {
     <Table>
       <Table.Thead>
         <Table.Tr>
+          <Table.Th>Tx</Table.Th>
           <Table.Th>Value</Table.Th>
           <Table.Th>From</Table.Th>
           <Table.Th>To</Table.Th>

app/server/grpc/wmuServiceClient.ts

@@ -53,7 +53,6 @@ const transfers = async (
     .selectAll()
     .execute();
   const transfers = query.map((x) => {
-    console.log(x);
     const value = new Value({
       assetId: new AssetId({ inner: x.asset_id }),
       amount: new Amount(splitLoHi(BigInt(x.amount))),

package.json

@@ -17,6 +17,7 @@
     "@bufbuild/protobuf": "^1.10.0",
     "@bufbuild/protoc-gen-es": "^1.10.0",
     "@connectrpc/protoc-gen-connect-es": "^1.4.0",
+    "@noble/hashes": "^1.6.1",
     "@penumbra-labs/registry": "^12.0.0",
     "@penumbra-zone/protobuf": "^6.3.0",
     "@penumbra-zone/types": "^26.2.1",

vite.config.ts.timestamp-1733370528092-e9ebda0c666f2.mjs

@@ -0,0 +1,23 @@
+// vite.config.ts
+import { vitePlugin as remix } from "file:///home/lucas/Work/Penumbra/wheresmyum/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_typ_zaks5nzsgydl2bdmxedpgoukjq/node_modules/@remix-run/dev/dist/index.js";
+import { defineConfig } from "file:///home/lucas/Work/Penumbra/wheresmyum/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index.js";
+import tsconfigPaths from "file:///home/lucas/Work/Penumbra/wheresmyum/node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected]_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [
+    remix({
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true
+      }
+    }),
+    tsconfigPaths()
+  ],
+  css: {
+    postcss: true
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9sdWNhcy9Xb3JrL1BlbnVtYnJhL3doZXJlc215dW1cIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9ob21lL2x1Y2FzL1dvcmsvUGVudW1icmEvd2hlcmVzbXl1bS92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vaG9tZS9sdWNhcy9Xb3JrL1BlbnVtYnJhL3doZXJlc215dW0vdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyB2aXRlUGx1Z2luIGFzIHJlbWl4IH0gZnJvbSBcIkByZW1peC1ydW4vZGV2XCI7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHRzY29uZmlnUGF0aHMgZnJvbSBcInZpdGUtdHNjb25maWctcGF0aHNcIjtcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIHJlbWl4KHtcbiAgICAgIGZ1dHVyZToge1xuICAgICAgICB2M19mZXRjaGVyUGVyc2lzdDogdHJ1ZSxcbiAgICAgICAgdjNfcmVsYXRpdmVTcGxhdFBhdGg6IHRydWUsXG4gICAgICAgIHYzX3Rocm93QWJvcnRSZWFzb246IHRydWUsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIHRzY29uZmlnUGF0aHMoKSxcbiAgXSxcbiAgY3NzOiB7XG4gICAgcG9zdGNzczogdHJ1ZSxcbiAgfSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUE4UixTQUFTLGNBQWMsYUFBYTtBQUNsVSxTQUFTLG9CQUFvQjtBQUM3QixPQUFPLG1CQUFtQjtBQUUxQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxNQUFNO0FBQUEsTUFDSixRQUFRO0FBQUEsUUFDTixtQkFBbUI7QUFBQSxRQUNuQixzQkFBc0I7QUFBQSxRQUN0QixxQkFBcUI7QUFBQSxNQUN2QjtBQUFBLElBQ0YsQ0FBQztBQUFBLElBQ0QsY0FBYztBQUFBLEVBQ2hCO0FBQUEsRUFDQSxLQUFLO0FBQUEsSUFDSCxTQUFTO0FBQUEsRUFDWDtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==