refactor: moves avatar to component

src/components/AccountInfoModal.vue

@@ -23,7 +23,7 @@
       </div>
       <div class="content">
         <div class="address">
-          <img :src="`https://avatars.z52da5wt.xyz/${address}`" alt="" />
+          <AddressAvatar :address="address" />
           <span>{{ `${address.slice(0, 6)}...${address.slice(-3)}` }}</span>
         </div>
         <div class="links">
@@ -90,12 +90,14 @@ import DeleteIcon from '@/assets/delete.svg';
 import AnimatedSpinner from '@/assets/animated-spinner.svg';
 import Alert from '@/assets/alert.svg';
 import Check from '@/assets/check.svg';
+import AddressAvatar from '@/components/AddressAvatar.vue';
 import ButtonPlain from './ButtonPlain.vue';
 import ClipboardCopy from './ClipboardCopy.vue';
 import ModalDefault from './ModalDefault.vue';
 
 export default {
   components: {
+    AddressAvatar,
     ModalDefault,
     ClipboardCopy,
     ButtonPlain,

src/components/AddressAvatar.vue

@@ -0,0 +1,15 @@
+<template>
+  <img :src="`https://avatars.z52da5wt.xyz/${address}`" :alt="address" />
+</template>
+<script>
+export default {
+  name: 'AddressAvatar',
+  props: {
+    address: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/components/Header.vue

@@ -34,7 +34,7 @@
             <AnimatedSpinner />
           </template>
           <template v-else>
-            <img :src="`https://avatars.z52da5wt.xyz/${address}`" alt="" />
+            <AddressAvatar :address="address" />
             <span class="h-xs">{{ `${address.slice(0, 6)}...${address.slice(-3)}` }}</span>
           </template>
         </div>
@@ -126,6 +126,7 @@ import AeLogo from '@/assets/logo.svg';
 import AeLogoSmall from '@/assets/logo-small.svg';
 import BackArrow from '@/assets/back.svg';
 import AnimatedSpinner from '@/assets/animated-spinner.svg';
+import AddressAvatar from '@/components/AddressAvatar.vue';
 import ActionsMenu from './ActionsMenu.vue';
 import AeBalance from './AeBalance.vue';
 import NavigationMenu from './NavigationMenu.vue';
@@ -134,6 +135,7 @@ import ButtonPlain from './ButtonPlain.vue';
 
 export default {
   components: {
+    AddressAvatar,
     AeLogo,
     AeLogoSmall,
     BackArrow,

src/components/TokenSelector/TokenImportCard.vue

@@ -6,7 +6,7 @@
     </div>
 
     <div class="token-info">
-      <img :src="`https://avatars.z52da5wt.xyz/${token.contract_id}`" alt="" />
+      <AddressAvatar :address="token.contract_id" />
       <div class="symbol">
         {{ token.symbol }}
       </div>
@@ -32,10 +32,12 @@
 <script>
 import { mapGetters } from 'vuex';
 import QuestionCircleIcon from '@/assets/question-circle.svg';
+import AddressAvatar from '@/components/AddressAvatar.vue';
 import ButtonDefault from '../ButtonDefault.vue';
 
 export default {
   components: {
+    AddressAvatar,
     ButtonDefault,
     QuestionCircleIcon,
   },

src/views/SwapView.vue

@@ -44,7 +44,7 @@
       @click="approve"
     >
       <div class="allowance">
-        <img :src="`https://avatars.z52da5wt.xyz/${tokenA.contract_id}`" alt="" />
+        <AddressAvatar :address="tokenA.contract_id" />
         {{ approveBtnMessage }}
       </div>
       <ButtonTooltip :tooltip="$t('swap.permissionToolTip', { msg: tokenA.symbol })">
@@ -87,9 +87,11 @@ import AnimatedSpinner from '@/assets/animated-spinner.svg';
 import saveTokenSelectionMixin from '@/mixins/saveTokenSelectionMixin';
 import approvalMixin from '@/mixins/allowanceMixin';
 import setSwapRoutesMixin from '@/mixins/setSwapRoutesMixin';
+import AddressAvatar from '@/components/AddressAvatar.vue';
 
 export default {
   components: {
+    AddressAvatar,
     MainWrapper,
     InputToken,
     ButtonPlain,