display known identies in tx history

components/ui/PrivateTxHistory.vue

@@ -68,7 +68,7 @@
                 <div
                   class="wallet-address mt-1 text-xs text-gray-500 whitespace-nowrap"
                 >
-                  {{ note.account }}
+                  {{ displayAccount(note.account) }}
                 </div>
               </div>
             </td>
@@ -126,16 +126,31 @@
 
 <script setup lang="ts">
 import { formatDate } from "@/helpers/date";
-import { ref, defineProps, defineExpose } from "vue";
+import { ref, defineProps, computed, defineExpose } from "vue";
 import { useAccount } from "@/store/account.ts";
 import { useNotes } from "@/store/notes.ts";
+import { decodeAddress, encodeAddress } from "@polkadot/util-crypto";
 import { Note, NoteDirection } from "@/lib/notes";
 import { divideBigIntToFloat } from "@/helpers/numbers";
 import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
+import { identities as polkadotPeopleIdentities } from "@/lib/polkadotPeopleIdentities";
+import { identities as wellKnownIdentities } from "@/lib/wellKnownIdentites";
+
+//const identityLut = [...polkadotPeopleIdentities, ...wellKnownIdentities];
+const identityLut = wellKnownIdentities;
 
 const accountStore = useAccount();
 const noteStore = useNotes();
 
+const displayAccount = computed(() => (account: string) => {
+  if (account === accountStore.getAddress) {
+    return "You";
+  }
+  const pdotAddress = encodeAddress(account, 0);
+  const identity = identityLut.find((i) => i.address === pdotAddress);
+  return identity ? identity.username + " " + account : account;
+});
+
 const props = defineProps({
   show: {
     type: Boolean,

lib/wellKnownIdentites.ts

@@ -8,4 +8,12 @@ export const identities = [
     username: "Integritee",
     address: "1nCmfpJL8ZwRDXre6iENJDy88os8DxGGAVQTGMRgfyzFrXk",
   },
+  {
+    username: "Tester1",
+    address: "12umYDRtDzF4fd6fKe3GKKQ2K76wu7uXdRaHkQKSHrRMmmsm",
+  },
+  {
+    username: "Tester2",
+    address: "13ueD4C3hvyagpap431WTPnNr4spEYCVv8gKr8gKDz88j9f5",
+  },
 ];