feat: Validate contract with enter key - MEED-7025 - Meeds-io/MIPs#118 (

#57) This change will validate the token contract with enter key.
Meeds-io · Sep 27, 2024 · 9146b9d · 9146b9d
1 parent 9f21282
commit 9146b9d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/gamification-evm-webapp/src/main/resources/locale/addon/Gamification_en.properties b/gamification-evm-webapp/src/main/resources/locale/addon/Gamification_en.properties
@@ -13,7 +13,7 @@ gamification.event.form.minAmount=Minimum amount
 gamification.event.form.minAmount.placeholder=Enter the minimum amount
 gamification.event.detail.invalidContractAddress.error=Please enter a valid contract address
 gamification.event.detail.invalidERC20ContractAddress.error=No smart contract found at this address
-gamification.event.detail.verifyToken.message=Click the Checkmark icon to verify this address
+gamification.event.detail.verifyToken.message=Click the Checkmark icon or press "Enter" to verify this address
 gamification.event.detail.display.contractAddress=Contract address token
 gamification.event.detail.invalidSenderAddress.error=Please enter a valid sender address
 gamification.event.detail.invalidRecipientAddress.error=Please enter a valid recipient address

diff --git a/...n-evm-webapp/src/main/webapp/vue-app/connectorEventExtensions/components/EvmEventForm.vue b/...n-evm-webapp/src/main/webapp/vue-app/connectorEventExtensions/components/EvmEventForm.vue
@@ -51,6 +51,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
         outlined
         required
         dense
+        @keyup.enter="retrieveERC20Token"
         @input="handleAddress"
         @change="checkContractAddress(contractAddress)">
         <template #append-outer>
@@ -269,26 +270,28 @@ export default {
       return addressUrlRegex.test(contractAddress);
     },
     retrieveERC20Token() {
-      this.loading = true;
-      return this.$evmConnectorService.getTokenDetailsByAddress({contractAddress: this.contractAddress, blockchainNetwork: this.selected?.providerUrl})
-        .then(token => {
-          this.erc20Token = token;
-          this.eventProperties = {
-            contractAddress: this.contractAddress,
-            blockchainNetwork: this.selected?.providerUrl,
-            networkId: this.selected?.networkId,
-            tokenName: token.name,
-            tokenSymbol: token.symbol,
-            tokenDecimals: token.decimals,
-          };
-          document.dispatchEvent(new CustomEvent('event-form-filled', {detail: this.eventProperties}));
-        })
-        .then(() => this.loading = false )
-        .catch(() => {
-          this.isValidERC20Address = false;
-          this.erc20Token = null;
-          this.loading = false;
-        });
+      if (this.isValidAddress) {
+        this.loading = true;
+        return this.$evmConnectorService.getTokenDetailsByAddress({contractAddress: this.contractAddress, blockchainNetwork: this.selected?.providerUrl})
+          .then(token => {
+            this.erc20Token = token;
+            this.eventProperties = {
+              contractAddress: this.contractAddress,
+              blockchainNetwork: this.selected?.providerUrl,
+              networkId: this.selected?.networkId,
+              tokenName: token.name,
+              tokenSymbol: token.symbol,
+              tokenDecimals: token.decimals,
+            };
+            document.dispatchEvent(new CustomEvent('event-form-filled', {detail: this.eventProperties}));
+          })
+          .then(() => this.loading = false )
+          .catch(() => {
+            this.isValidERC20Address = false;
+            this.erc20Token = null;
+            this.loading = false;
+          });
+      }
     },
     resetERC20Token() {
       this.erc20Token = null;