From 5c3346fdcb27b3cca7b76144220d10efe987f09c Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sun, 3 Nov 2024 21:29:42 -0300
Subject: [PATCH 1/2] address page has blockie icon (based on address)

---
 src/components/AppSearch.vue            |  2 +-
 src/components/AppSearchResultEntry.vue | 12 ++----------
 src/components/MethodField.vue          |  2 +-
 src/lib/blockies/blockies.ts            | 11 +++++++++++
 src/pages/AccountPage.vue               | 16 ++++++++++++++++
 5 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/blockies/blockies.ts

diff --git a/src/components/AppSearch.vue b/src/components/AppSearch.vue
index 5ed2cdd78..878a15428 100644
--- a/src/components/AppSearch.vue
+++ b/src/components/AppSearch.vue
@@ -591,7 +591,7 @@ const handleResultClick = (item: SearchResult): void => {
         <div class="c-search__results">
             <template
                 v-for="(entry, index) in searchResults"
-                :key="entry.address ?? entry.hash"
+                :key="(entry.address) ?? entry.hash"
             >
                 <div
                     v-if="shouldShowDivider(index)"
diff --git a/src/components/AppSearchResultEntry.vue b/src/components/AppSearchResultEntry.vue
index ffaa01c6f..30a9fe4e4 100644
--- a/src/components/AppSearchResultEntry.vue
+++ b/src/components/AppSearchResultEntry.vue
@@ -11,8 +11,8 @@ import {
     SearchResultUnknown,
 } from 'src/types';
 
-import { createIcon } from '@download/blockies';
 import { computed } from 'vue';
+import { createIconFromData } from 'src/lib/blockies/blockies';
 
 const props = defineProps<{
     entry: SearchResult,
@@ -40,15 +40,7 @@ const item = {
     unknown: asUnknown(props.entry),
 };
 
-const createIconFromData = (data: string) => {
-    // https://github.com/download13/blockies
-    var imgData = createIcon({
-        seed: data,
-        size: 8,
-        scale: 3,
-    }).toDataURL();
-    return imgData;
-};
+
 
 const emit = defineEmits(['click']);
 
diff --git a/src/components/MethodField.vue b/src/components/MethodField.vue
index faa92f0b2..235254f2d 100644
--- a/src/components/MethodField.vue
+++ b/src/components/MethodField.vue
@@ -132,7 +132,7 @@ const setValues = async () => {
 
 <style lang="scss">
 .c-method {
-    width: 80px;
+    width: 150px;
     height: 24px;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/src/lib/blockies/blockies.ts b/src/lib/blockies/blockies.ts
new file mode 100644
index 000000000..f6b6e6d57
--- /dev/null
+++ b/src/lib/blockies/blockies.ts
@@ -0,0 +1,11 @@
+import { createIcon } from '@download/blockies';
+
+export const createIconFromData = (data: string) => {
+    // https://github.com/download13/blockies
+    const imgData = createIcon({
+        seed: data,
+        size: 8,
+        scale: 3,
+    }).toDataURL();
+    return imgData;
+};
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index b415c5ad5..2cc4248d0 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -7,6 +7,7 @@ import { contractManager } from 'src/boot/telosApi';
 import { evm } from 'src/boot/evm';
 import { toChecksumAddress } from 'src/lib/utils';
 import { SystemBalance, getSystemBalance } from 'src/lib/balance-utils';
+import { createIconFromData } from 'src/lib/blockies/blockies';
 import { getIcon } from 'src/lib/token-utils';
 import { Token } from 'src/types/Token';
 
@@ -155,6 +156,13 @@ async function loadAccount() {
                         :alt="contract.getName() + ' ERC20 token'"
                         :src="getIcon(contract.logoURI)"
                     />
+                    <img
+                        v-else
+                        :src="createIconFromData(accountAddress)"
+                        alt=""
+                        class="c-address__icon"
+                    >
+                    <!--
                     <q-icon
                         v-else-if="!contract"
                         name="account_circle"
@@ -165,6 +173,7 @@ async function loadAccount() {
                         :name="(contract.supportedInterfaces?.includes('erc721')) ? 'perm_media' : 'source'"
                         size="sm"
                     />
+                    -->
                     <span class="c-address__title">{{ title }}</span>
                     <span class="c-address__hex">{{ accountAddress }}</span>
                     <q-tooltip v-if="fullTitle" anchor="top middle" self="bottom middle">{{ fullTitle }} </q-tooltip>
@@ -420,6 +429,13 @@ async function loadAccount() {
 .c-address {
     @include page-container;
 
+    &__icon {
+        width: 22px;
+        height: 22px;
+        margin-right: 2px;
+        border-radius: 50%;
+    }
+
     &__info-container{
         margin-bottom: 2.5rem;
     }

From f2653364849e4cff6c0f672ed7c39b4c8036d773 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Tue, 5 Nov 2024 14:31:10 -0300
Subject: [PATCH 2/2] adding alt property for the blockie icon

---
 src/pages/AccountPage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 2cc4248d0..d08ba1c86 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -156,10 +156,11 @@ async function loadAccount() {
                         :alt="contract.getName() + ' ERC20 token'"
                         :src="getIcon(contract.logoURI)"
                     />
+                    <!-- Blockies icon for address + {{accountAddress}} -->
                     <img
                         v-else
                         :src="createIconFromData(accountAddress)"
-                        alt=""
+                        :alt="`Blockies icon for address ${accountAddress}`"
                         class="c-address__icon"
                     >
                     <!--