From b9e1e17d2977bfd5aa538dd7e3d0ad441fc5c2b4 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 30 Nov 2022 11:16:09 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20[Transfer]=20Show=20displayN?=
 =?UTF-8?q?ame=20instead=20of=20address?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventModal/Transfer.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/EventModal/Transfer.vue b/src/components/EventModal/Transfer.vue
index de20acd73..e3e5e2b8f 100644
--- a/src/components/EventModal/Transfer.vue
+++ b/src/components/EventModal/Transfer.vue
@@ -103,7 +103,7 @@
       <FormField
         class="mx-[8px]"
         :label="$t('tx_modal_label_receiver')"
-      >{{ toWallet }}</FormField>
+      >{{ toDisplayName }}</FormField>
     </div>
     <template
       v-if="!isTransferring"
@@ -120,6 +120,7 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex';
 import { LIKE_ADDRESS_REGEX } from '~/util/nft';
 
 export default {
@@ -157,6 +158,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['getUserInfoByAddress']),
     errorMessage() {
       if (this.toWallet && !LIKE_ADDRESS_REGEX.test(this.toWallet)) {
         return this.$t('nft_details_page_errormessage_transfer_invalid');
@@ -172,6 +174,11 @@ export default {
     isReady() {
       return this.toWallet && !this.errorMessage;
     },
+    toDisplayName() {
+      return (
+        this.getUserInfoByAddress(this.toWallet)?.displayName || this.toWallet
+      );
+    },
   },
   watch: {
     isOpen(isOpen) {
@@ -189,6 +196,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['lazyGetUserInfoByAddress']),
     handleInputToWallet(value) {
       this.toWallet = value;
     },
@@ -196,6 +204,7 @@ export default {
       this.memo = value;
     },
     handleClickTransfer() {
+      this.lazyGetUserInfoByAddress(this.toWallet);
       this.$emit('submit', {
         toWallet: this.toWallet,
         nftId: this.selectedNFTId,

From b7325a6f9aec423c09825a9451ff183e58b9531a Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 30 Nov 2022 13:11:11 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20[Transfer]=20Add=20userAvata?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventModal/Transfer.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/EventModal/Transfer.vue b/src/components/EventModal/Transfer.vue
index e3e5e2b8f..8b0016686 100644
--- a/src/components/EventModal/Transfer.vue
+++ b/src/components/EventModal/Transfer.vue
@@ -103,7 +103,16 @@
       <FormField
         class="mx-[8px]"
         :label="$t('tx_modal_label_receiver')"
-      >{{ toDisplayName }}</FormField>
+      >
+        <div class="flex items-center gap-[8px]">
+          <Identity
+            v-if="toUserAvatar"
+            :avatar-url="toUserAvatar"
+            :avatar-size="36"
+          />
+          {{ toDisplayName | ellipsis }}
+        </div>
+      </FormField>
     </div>
     <template
       v-if="!isTransferring"
@@ -122,8 +131,12 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { LIKE_ADDRESS_REGEX } from '~/util/nft';
+import { ellipsis } from '~/util/ui';
 
 export default {
+  filters: {
+    ellipsis,
+  },
   props: {
     classId: {
       type: String,
@@ -179,6 +192,9 @@ export default {
         this.getUserInfoByAddress(this.toWallet)?.displayName || this.toWallet
       );
     },
+    toUserAvatar() {
+      return this.getUserInfoByAddress(this.toWallet)?.avatar;
+    },
   },
   watch: {
     isOpen(isOpen) {