Request and display address labels

Author: Destiner

src/components/TableOpFeed.vue

@@ -93,6 +93,7 @@ import { Address, Hex, zeroAddress } from 'viem';
 import { computed, watch } from 'vue';
 
 import IconArrowRight from '@/components/IconArrowRight.vue';
+import useLabels from '@/composables/useLabels';
 import { Chain, getChainName } from '@/utils/chains';
 import { toRelativeTime } from '@/utils/conversion';
 import {
@@ -101,6 +102,8 @@ import {
 } from '@/utils/entryPoint';
 import { formatRelativeTime } from '@/utils/formatting';
 
+const { getLabelText } = useLabels();
+
 const props = defineProps<{
   ops: UserOp[];
   page: number;
@@ -131,17 +134,20 @@ const columns = computed(() => [
   }),
   columnHelper.accessor('sender', {
     header: 'Sender',
-    cell: (cell) => cell.getValue(),
+    cell: (cell) =>
+      getAddressLabel(cell.row.getValue('chain'), cell.getValue()),
   }),
   columnHelper.accessor('bundler', {
     header: 'Bundler',
-    cell: (cell) => cell.getValue(),
+    cell: (cell) =>
+      getAddressLabel(cell.row.getValue('chain'), cell.getValue()),
   }),
   columnHelper.accessor('paymaster', {
     header: 'Paymaster',
     cell: (cell) => {
-      const value = cell.getValue();
-      return value === zeroAddress ? '—' : value;
+      const address = cell.getValue();
+      const value = getAddressLabel(cell.row.getValue('chain'), address);
+      return address === zeroAddress ? '—' : value;
     },
   }),
   columnHelper.accessor('entryPoint', {
@@ -188,6 +194,10 @@ watch(
     table.setPageIndex(props.page);
   },
 );
+
+function getAddressLabel(chain: Chain, address: Address): string {
+  return getLabelText(chain, address) || address;
+}
 </script>
 
 <script lang="ts">

src/pages/Home.vue

@@ -18,15 +18,19 @@
 
 <script setup lang="ts">
 import { useIntervalFn } from '@vueuse/core';
-import { computed, onMounted, ref } from 'vue';
+import { Address } from 'viem';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import TableOpFeed, { UserOp as UserOpRow } from '@/components/TableOpFeed.vue';
 import useEnv from '@/composables/useEnv';
+import useLabels from '@/composables/useLabels';
 import IndexerService, { FeedUserOp } from '@/services/indexer';
+import { CHAINS, Chain } from '@/utils/chains';
 import { isUserOpHash } from '@/utils/validation/pattern';
 
 const router = useRouter();
+const { requestLabels } = useLabels();
 const { indexerEndpoint } = useEnv();
 
 onMounted(() => {
@@ -70,6 +74,27 @@ function handleSubmit(): void {
   }
   router.push({ name: 'op', params: { hash: query.value } });
 }
+
+const addresses = computed<Record<Chain, Address[]>>(() => {
+  return Object.fromEntries(
+    CHAINS.map((chain) => {
+      return [
+        chain,
+        ops.value
+          .filter((op) => op.chainId === chain)
+          .map((op) => [op.sender, op.bundler, op.paymaster])
+          .flat(),
+      ];
+    }),
+  ) as Record<Chain, Address[]>;
+});
+
+watch(addresses, () => {
+  for (const chain of CHAINS) {
+    const chainAddresses = addresses.value[chain];
+    requestLabels(chain, chainAddresses);
+  }
+});
 </script>
 
 <style scoped>

src/pages/Op.vue

@@ -30,7 +30,9 @@
                 of account
                 <BlockInfo
                   :value="userOpData.sender"
-                  :label="userOpData.sender"
+                  :label="
+                    getAddressLabel(userOpData.chainId, userOpData.sender)
+                  "
                   type="address"
                   :chain="userOpData.chainId"
                 />
@@ -46,7 +48,9 @@
                 via
                 <BlockInfo
                   :value="userOpData.paymaster"
-                  :label="userOpData.paymaster"
+                  :label="
+                    getAddressLabel(userOpData.chainId, userOpData.paymaster)
+                  "
                   type="address"
                   :chain="userOpData.chainId"
                 />
@@ -55,7 +59,9 @@
                 Bundled by
                 <BlockInfo
                   :value="userOpData.bundler"
-                  :label="userOpData.bundler"
+                  :label="
+                    getAddressLabel(userOpData.chainId, userOpData.bundler)
+                  "
                   type="address"
                   :chain="userOpData.chainId"
                 />
@@ -117,6 +123,7 @@ import BlockInfo from '@/components/BlockInfo.vue';
 import IconCheckCircled from '@/components/IconCheckCircled.vue';
 import IconCrossCircled from '@/components/IconCrossCircled.vue';
 import useEnv from '@/composables/useEnv';
+import useLabels from '@/composables/useLabels';
 import EvmService, { Transaction, TransactionReceipt } from '@/services/evm';
 import IndexerService, { TransactionUserOp } from '@/services/indexer';
 import {
@@ -134,6 +141,7 @@ import {
 import { formatRelativeTime } from '@/utils/formatting';
 
 const { alchemyApiKey, indexerEndpoint } = useEnv();
+const { requestLabels, getLabelText } = useLabels();
 const route = useRoute();
 
 const hash = computed(() => route.params.hash as Hex);
@@ -203,6 +211,24 @@ const actualGasCost = computed<bigint | null>(() =>
   userOpEvent.value ? userOpEvent.value.actualGasCost : null,
 );
 
+const addresses = computed<Address[]>(() => {
+  if (!userOpData.value) {
+    return [];
+  }
+  return [
+    userOpData.value.sender,
+    userOpData.value.bundler,
+    userOpData.value.paymaster,
+  ];
+});
+
+watch(addresses, () => {
+  if (!userOpData.value) {
+    return;
+  }
+  requestLabels(userOpData.value.chainId, addresses.value);
+});
+
 function formatEther(value: bigint): string {
   return `${formatNumber(fromWei(value, 18))} ETH`;
 }
@@ -232,6 +258,10 @@ function fromWei(value: bigint | number, decimals: number): number {
   }
   return parseFloat(formatUnits(BigInt(value.toString()), decimals));
 }
+
+function getAddressLabel(chain: Chain, address: Address): string {
+  return getLabelText(chain, address) || address;
+}
 </script>
 
 <style scoped>