add hash badge component

ui/src/components/Address.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="address">
+    <hash-badge :address="address" class="hash-badge"/>
     <a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
     <template v-else>
       <router-link v-if="link" :to="{ name: 'Inspect', params: { address } }">
@@ -15,8 +16,10 @@ import { ListingResult } from "@/types/base";
 import { fetcher } from "@/utils";
 import useSWRV from "swrv";
 import { computed, defineComponent } from "vue";
+import HashBadge from "./HashBadge.vue";
 
 export default defineComponent({
+  components: { HashBadge },
   name: "Address",
   props: {
     address: String,
@@ -74,4 +77,8 @@ export default defineComponent({
 .address {
   font-family: var(--monospace-font);
 }
+
+.hash-badge {
+  margin-right: .5em;
+}
 </style>

ui/src/components/HashBadge.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="hash-badge">
+    <canvas ref="canvas" :width="width" height="3" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+
+const BADGE_HEIGHT = 3;
+
+export default defineComponent({
+  name: "HashBadge",
+  props: {
+    address: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const canvas = ref<HTMLCanvasElement | undefined>(undefined);
+    const width = ref(0);
+
+    const bytes = [...props.address].map((c) => c.charCodeAt(0));
+    while (bytes.length % (3 * BADGE_HEIGHT) !== 0) {
+      bytes.push(bytes[bytes.length - 1]);
+    }
+
+    width.value = Math.ceil(bytes.length / 3 / BADGE_HEIGHT);
+
+    onMounted(() => {
+      const ctx = canvas.value?.getContext("2d");
+      if (!ctx) {
+        console.warn("Couldn't initialize canvas!");
+        return;
+      }
+
+      let idx = 0;
+      while (bytes.length > 0) {
+        const tmp = [];
+        while (bytes.length > 0 && tmp.length < 3) {
+          tmp.push(bytes.shift());
+        }
+        while (tmp.length < 3) {
+          tmp.push(tmp[tmp.length - 1]);
+        }
+
+        const r = (tmp[0]! / 128) * 255;
+        const g = (tmp[1]! / 128) * 255;
+        const b = (tmp[2]! / 128) * 255;
+        ctx.fillStyle = `rgb(${r},${g},${b})`;
+        ctx.fillRect(Math.floor(idx / BADGE_HEIGHT), idx % BADGE_HEIGHT, 1, 1);
+        idx++;
+      }
+    });
+
+    return {
+      canvas,
+      width,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.hash-badge {
+  display: inline-block;
+  height: 1em;
+}
+
+.hash-badge canvas {
+  height: 100%;
+  image-rendering: optimizeSpeed;
+}
+</style>