From 5b9f63e68f3aaec1cb1ae35ce8e1d8fab5f46f35 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:42:53 +0500
Subject: [PATCH 1/2] fix(swaps): trader address validation is not reactive

- fix: AddressChecker.vue emitting isValid when addresss is ''
- ref: adapt Transfer.vue check if address is empty
- ref: AddressInput.vue dont show error input if address is empty with address check
---
 components/shared/AddressChecker.vue |  6 +-----
 components/shared/AddressInput.vue   | 21 +++++++++------------
 components/swap/landing.vue          | 28 +++++++++++++++++++++++-----
 components/transfer/Transfer.vue     |  2 +-
 locales/en.json                      |  1 +
 5 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/components/shared/AddressChecker.vue b/components/shared/AddressChecker.vue
index 475aebfb2c..3790485194 100644
--- a/components/shared/AddressChecker.vue
+++ b/components/shared/AddressChecker.vue
@@ -221,11 +221,7 @@ watch(showAddressCheck, () => {
 })
 
 watch(addressCheck, (check) => {
-  let isValid = !check
-
-  if (!isValid) {
-    isValid = check ? check.valid : false
-  }
+  const isValid = check ? check.valid : false
 
   emit('check', isValid)
 })
diff --git a/components/shared/AddressInput.vue b/components/shared/AddressInput.vue
index 0b2d17f682..604587c7f7 100644
--- a/components/shared/AddressInput.vue
+++ b/components/shared/AddressInput.vue
@@ -55,25 +55,22 @@ const props = withDefaults(
 
 const { chainProperties } = useChain()
 const error = ref<string | null>('')
-const isAddressCheckValid = ref<boolean>(true)
+const isAddressCheckValid = ref<boolean>()
 const ss58Format = computed(() => chainProperties.value?.ss58Format)
 
 const variant = computed(() => {
-  if (props.isInvalid || error.value || !isAddressCheckValid.value) {
+  const isNotEmpty = Boolean(inputValue.value)
+  const isInvalidWithAddressCheck = props.withAddressCheck && !isAddressCheckValid.value && isNotEmpty
+
+  if (props.isInvalid || error.value || isInvalidWithAddressCheck) {
     return 'danger'
   }
 
-  const isNotEmpty = !!inputValue.value
   const isValidAddress = isAddress(inputValue.value)
-  const isSuccessWithAddressCheck
-    = props.withAddressCheck && (!props.isInvalid || isAddressCheckValid.value)
-  const isSuccesssWithoutAddressCheck
-    = !props.withAddressCheck && isValidAddress
-
-  if (
-    isNotEmpty
-    && (isSuccessWithAddressCheck || isSuccesssWithoutAddressCheck)
-  ) {
+  const isSuccessWithAddressCheck = props.withAddressCheck && (!props.isInvalid || isAddressCheckValid.value)
+  const isSuccesssWithoutAddressCheck = !props.withAddressCheck && isValidAddress
+
+  if (isNotEmpty && (isSuccessWithAddressCheck || isSuccesssWithoutAddressCheck)) {
     return 'success'
   }
 
diff --git a/components/swap/landing.vue b/components/swap/landing.vue
index fea924305e..b02420c860 100644
--- a/components/swap/landing.vue
+++ b/components/swap/landing.vue
@@ -37,19 +37,19 @@
       <form @submit.prevent="handleSubmit">
         <AddressInput
           v-model="traderAddress"
+          :is-invalid="isYourAddress"
           placeholder="Enter wallet address"
-          :strict="false"
-          empty-on-error
           with-address-check
+          @check="handleAddressCheck"
         />
 
         <NeoButton
           type="submit"
-          :label="$t('swap.beginSwap')"
+          :label="label"
           size="large"
           class="text-base my-5 capitalize"
           expanded
-          :disabled="traderAddress === '' || traderAddress === accountId"
+          :disabled="disabled"
           native-type="submit"
           variant="primary"
         />
@@ -61,9 +61,27 @@
 <script lang="ts" setup>
 import { NeoButton } from '@kodadot1/brick'
 
-const { accountId } = useAuth()
+const { isCurrentOwner } = useAuth()
+const { $i18n } = useNuxtApp()
 
 const traderAddress = ref('')
+const isTraderAddressValid = ref(false)
+const isYourAddress = ref(false)
+
+const disabled = computed(() => traderAddress.value === '' || isYourAddress.value || !isTraderAddressValid.value)
+
+const label = computed(() => {
+  if (isYourAddress.value) {
+    return $i18n.t('swap.cantSwapWithYourself')
+  }
+
+  return $i18n.t('swap.beginSwap')
+})
+
+const handleAddressCheck = (isValid: boolean) => {
+  isTraderAddressValid.value = isValid
+  isYourAddress.value = isTraderAddressValid.value ? isCurrentOwner(traderAddress.value) : false
+}
 
 const handleSubmit = async () => {
   await navigateTo({ name: 'prefix-swap-id', params: { id: traderAddress.value } })
diff --git a/components/transfer/Transfer.vue b/components/transfer/Transfer.vue
index 37eabcf074..029abd3d3e 100644
--- a/components/transfer/Transfer.vue
+++ b/components/transfer/Transfer.vue
@@ -788,7 +788,7 @@ const onUsdFieldChange = (target: TargetAddress) => {
 }
 
 const handleAddressCheck = (target: TargetAddress, isValid: boolean) => {
-  target.isInvalid = !isValid
+  target.isInvalid = !target.address ? undefined : !isValid
 
   targetAddresses.value = [...targetAddresses.value]
 }
diff --git a/locales/en.json b/locales/en.json
index f873c9430c..ee188711a8 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1819,6 +1819,7 @@
     "acceptSwap": "Accepting Swap",
     "addToken": "Add Token",
     "beginSwap": "Begin Swap offer",
+    "cantSwapWithYourself": "You can't swap with yourself",
     "clickOnNft": "Click on any NFT to add it to your swap list.",
     "connectTrader": "Connect with a trader",
     "connectTraderInfo": "Enter the wallet address of the trader you want to engage with, and we’ll guide you through the secure process of making a swap offer.",

From d5d3308f021952210c631ced64098b6a5c5b752d Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 17 Dec 2024 07:36:33 +0500
Subject: [PATCH 2/2] ref(swaps): more reactive `begin swap` button to invalid
 address

---
 components/swap/landing.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/swap/landing.vue b/components/swap/landing.vue
index b02420c860..4cdda2f22d 100644
--- a/components/swap/landing.vue
+++ b/components/swap/landing.vue
@@ -68,13 +68,22 @@ const traderAddress = ref('')
 const isTraderAddressValid = ref(false)
 const isYourAddress = ref(false)
 
-const disabled = computed(() => traderAddress.value === '' || isYourAddress.value || !isTraderAddressValid.value)
+const isAddressEmpty = computed(() => !traderAddress.value)
+const disabled = computed(() => isAddressEmpty.value || isYourAddress.value || !isTraderAddressValid.value)
 
 const label = computed(() => {
   if (isYourAddress.value) {
     return $i18n.t('swap.cantSwapWithYourself')
   }
 
+  if (isAddressEmpty.value) {
+    return $i18n.t('transaction.inputAddressFirst')
+  }
+
+  if (!isTraderAddressValid.value) {
+    return $i18n.t('transaction.addressIncorrect')
+  }
+
   return $i18n.t('swap.beginSwap')
 })