Merge pull request #868 from telosnetwork/829-add-identicons-to-addre…

…sscontracttoken-pages

#829 | address page has blockie icon (based on address)

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)"

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']);
 

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;

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;
+};

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,14 @@ async function loadAccount() {
                         :alt="contract.getName() + ' ERC20 token'"
                         :src="getIcon(contract.logoURI)"
                     />
+                    <!-- Blockies icon for address + {{accountAddress}} -->
+                    <img
+                        v-else
+                        :src="createIconFromData(accountAddress)"
+                        :alt="`Blockies icon for address ${accountAddress}`"
+                        class="c-address__icon"
+                    >
+                    <!--
                     <q-icon
                         v-else-if="!contract"
                         name="account_circle"
@@ -165,6 +174,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 +430,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;
     }