fix(friends): fix disabled add friends input bug

components/interactables/ContextMenu/ContextMenu.vue

@@ -2,7 +2,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapGetters, mapState } from 'vuex'
-import { ContextMenuItem } from '~/store/ui/types'
+import { ContextMenuItem, EmojiUsage } from '~/store/ui/types'
 
 export default Vue.extend({
   props: {
@@ -14,7 +14,7 @@ export default Vue.extend({
   computed: {
     ...mapGetters('ui', ['getSortedMostUsedEmojis']),
     ...mapState(['settings', 'ui']),
-    mostUsedEmojis() {
+    mostUsedEmojis(): EmojiUsage[] {
       return this.getSortedMostUsedEmojis.slice(0, 4)
     },
   },

components/interactables/Input/Input.html

@@ -16,6 +16,7 @@
       :placeholder="placeholder"
       @input="update"
       ref="input"
+      :maxLength="maxLength"
     />
     <button
       v-if="deleteIcon && internalText.length"

components/interactables/Input/Input.vue

@@ -89,6 +89,10 @@ export default Vue.extend({
       required: false,
       default: false,
     },
+    maxLength: {
+      type: Number,
+      default: 256,
+    },
   },
   data() {
     return {

components/views/friends/add/Add.html

@@ -2,27 +2,27 @@
   <TypographyTitle :size="6" :text="$t('friends.add')" />
   <TypographyText :text="$t('friends.add_description')" />
   <UiSpacer :height="10" />
-  <InteractablesInputGroup
+  <!-- max size of solana public key is 44 https://docs.solana.com/cli/transfer-tokens#receive-tokens -->
+  <InteractablesInput
+    v-model="accountID"
     class="search-container"
     type="primary"
     size="small"
     :placeholder="$t('friends.search_placeholder')"
+    :maxLength="44"
     @update="_searchFriend"
-    v-model="accountID"
-    :loading="searching"
+    ref="input"
     autofocus
-  >
-    <user-plus-icon size="1x" />
-  </InteractablesInputGroup>
-  <TypographyError v-if="error" :text="$t(error)" class="error" />
+  />
+  <TypographyError v-if="error" :text="$t(error)" />
+  <UiLoadersLoadingBar v-else-if="searching" />
   <FriendsFriend
-    v-if="friend"
+    v-else-if="friend"
     :friend="friend"
     @requestSent="onFriendRequestSent"
     send
   />
-  <span v-if="featureReadyToShow">
-    <UiSpacer :height="10" />
+  <!-- <UiSpacer :height="10" />
     <TypographyHorizontalRuleText plaintext value="OR" />
     <UiSpacer :height="10" />
     <TypographyTitle :size="6" :text="$t('friends.add_via_qr')" />
@@ -42,11 +42,10 @@
             </div>
             <div class="column">
               <TypographyText :text="$t('friends.friend_code')" />
-              <qrcode-vue :value="friendInviteUrl" :size="size" level="H" />
+              <qrcode-vue :value="friendInviteUrl" :size="150" level="H" />
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </span>
+    </div> -->
 </div>

components/views/friends/add/Add.vue

@@ -1,19 +1,15 @@
 <template src="./Add.html"></template>
 <script lang="ts">
-import { PublicKey } from '@solana/web3.js'
 // @ts-ignore
 import QrcodeVue from 'qrcode.vue'
-
 import { UserPlusIcon } from 'satellite-lucide-icons'
 
 import Vue from 'vue'
 import { mapState } from 'vuex'
-
 import { debounce } from 'lodash'
 import { Friend } from '~/types/ui/friends'
-import ServerProgram from '~/libraries/Solana/ServerProgram/ServerProgram'
-import SolanaManager from '~/libraries/Solana/SolanaManager/SolanaManager'
 import UsersProgram from '~/libraries/Solana/UsersProgram/UsersProgram'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
   components: {
@@ -22,18 +18,19 @@ export default Vue.extend({
   },
   data() {
     return {
-      size: 150,
-      featureReadyToShow: false,
       error: '',
       accountID: '',
       searching: false,
       friend: null as Friend | null,
     }
   },
   computed: {
-    ...mapState(['accounts']),
+    ...mapState({
+      myAccountID: (state) => (state as RootState).accounts.active,
+      allFriends: (state) => (state as RootState).friends.all,
+    }),
     friendInviteUrl(): string {
-      return `${location.origin}/#/friends/list/${this.accounts.active}`
+      return `${location.origin}/#/friends/list/${this.myAccountID}`
     },
   },
   mounted() {
@@ -47,6 +44,7 @@ export default Vue.extend({
       if (!this.accountID.length) {
         this.error = ''
         this.friend = null
+        this.searching = false
         return
       }
       if (this.accountID.length >= 40) {
@@ -59,23 +57,19 @@ export default Vue.extend({
       this.friend = null
       this.searching = true
       const accountID = this.accountID.trim()
-      if (accountID === this.$store.state.accounts.active) {
+      if (accountID === this.myAccountID) {
         this.error = this.$t('friends.self_add') as string
         return
       }
       if (
-        this.$store.state.friends.all.filter(
-          (f: Friend) => f?.account?.accountId === accountID,
-        ).length === 1
+        this.allFriends.some((f: Friend) => f?.account?.accountId === accountID)
       ) {
         this.error = this.$t('friends.already_friend') as string
         return
       }
       this.error = ''
       try {
-        const $SolanaManager: SolanaManager = Vue.prototype.$SolanaManager
-        const usersProgram: UsersProgram = new UsersProgram($SolanaManager)
-
+        const usersProgram: UsersProgram = new UsersProgram(this.$SolanaManager)
         const friend = await usersProgram.getUserInfo(accountID)
         if (!friend) {
           this.error = this.$t('friends.not_found') as string
@@ -97,14 +91,17 @@ export default Vue.extend({
 
       this.searching = false
     },
-    onFriendRequestSent(error: string) {
-      this.friend = null
-      this.accountID = ''
-      if (!error) {
-        this.$toast.show(this.$t('friends.request_sent') as string)
-      } else {
+    onFriendRequestSent(error?: string) {
+      if (error) {
         this.error = error
+        return
       }
+      this.friend = null
+      this.accountID = ''
+      // @ts-ignore
+      const input = this.$refs.input.$refs.input as HTMLInputElement
+      input.value = ''
+      this.$toast.show(this.$t('friends.request_sent') as string)
     },
   },
 })

components/views/friends/friend/Friend.vue

@@ -2,7 +2,6 @@
 <script lang="ts">
 import { PublicKey } from '@solana/web3.js'
 import Vue, { PropType } from 'vue'
-
 import {
   XIcon,
   CheckIcon,
@@ -11,18 +10,12 @@ import {
   CircleIcon,
   SmartphoneIcon,
 } from 'satellite-lucide-icons'
-
+import { ContextMenuItem } from '~/store/ui/types'
 import { Friend } from '~/types/ui/friends'
 import ContextMenu from '~/components/mixins/UI/ContextMenu'
 import { AddFriendEnum } from '~/libraries/Enums/enums'
 import { Config } from '~/config'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    removeFriend: () => void
-  }
-}
-
 export default Vue.extend({
   components: {
     XIcon,
@@ -59,9 +52,6 @@ export default Vue.extend({
     return {
       loadCheck: false,
       loading: '' as AddFriendEnum,
-      contextMenuValues: [
-        { text: this.$t('context.remove'), func: this.removeFriend },
-      ],
     }
   },
   computed: {
@@ -72,6 +62,9 @@ export default Vue.extend({
         this.friend?.request?.userInfo?.photoHash
       return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
     },
+    contextMenuValues(): ContextMenuItem[] {
+      return [{ text: this.$t('context.remove'), func: this.removeFriend }]
+    },
   },
   beforeDestroy() {
     this.$store.commit('ui/toggleContextMenu', false)
@@ -81,7 +74,7 @@ export default Vue.extend({
       this.loading = AddFriendEnum.SENDING
       try {
         await this.$store.dispatch('friends/createFriendRequest', {
-          friendToKey: new PublicKey(this.$props.friend.account.accountId),
+          friendToKey: new PublicKey(this.friend.account.accountId),
         })
         this.$emit('requestSent', '')
       } catch (e: any) {
@@ -95,11 +88,11 @@ export default Vue.extend({
       this.loadCheck = true
       try {
         await this.$store.dispatch('friends/acceptFriendRequest', {
-          friendRequest: this.$props.friend.request,
+          friendRequest: this.friend.request,
         })
         const query = { limit: Config.chat.defaultMessageLimit, skip: 0 }
         this.$store.commit('textile/setConversation', {
-          address: this.$props.friend.address,
+          address: this.friend.address,
           messages: [],
           limit: query.limit,
           skip: query.skip,
@@ -117,7 +110,7 @@ export default Vue.extend({
       try {
         await this.$store.dispatch(
           'friends/denyFriendRequest',
-          this.$props.friend.request,
+          this.friend.request,
         )
       } finally {
         this.loading = AddFriendEnum.EMPTY
@@ -140,14 +133,14 @@ export default Vue.extend({
       try {
         await this.$store.dispatch(
           'friends/removeFriendRequest',
-          this.$props.friend.request,
+          this.friend.request,
         )
       } finally {
         this.loading = AddFriendEnum.EMPTY
       }
     },
     sendMessageRequest() {
-      this.$router.push(`/chat/direct/${this.$props.friend.address}`)
+      this.$router.push(`/chat/direct/${this.friend.address}`)
     },
   },
 })