fix: bug where user could proceed with invalid destination address (#176)

closes #164

Author: Lykhoyda

packages/widget/src/components/address-input/address-input.ts

@@ -6,7 +6,7 @@ import { when } from 'lit/directives/when.js';
 
 import type { PropertyValues } from '@lit/reactive-element';
 import { validateAddress } from '../../utils';
-import { BaseComponent } from '../common/base-component/base-component';
+import { BaseComponent } from '../common';
 
 import { styles } from './styles';
 
@@ -22,9 +22,7 @@ export class AddressInput extends BaseComponent {
   @property({ attribute: false })
   onAddressChange: (address: string) => void = () => {};
 
-  @property({
-    type: String
-  })
+  @property({ attribute: false })
   networkType: Network = Network.EVM;
 
   @state()
@@ -48,7 +46,6 @@ export class AddressInput extends BaseComponent {
     }
 
     this.errorMessage = validateAddress(trimedValue, this.networkType);
-
     this.onAddressChange(trimedValue);
   };
 
@@ -60,13 +57,13 @@ export class AddressInput extends BaseComponent {
   }
 
   render(): HTMLTemplateResult {
-    return html` <section class="inputAddressSection">
+    return html`<section class="inputAddressSection">
       <div class="inputAddressContainer">
         <label class="labelContainer">
           <span>Send to </span>
           ${when(
             this.errorMessage,
-            () => html` <span class="errorMessage">${this.errorMessage}</span>`
+            () => html`<span class="errorMessage">${this.errorMessage}</span>`
           )}</label
         >
         <textarea
@@ -79,7 +76,7 @@ export class AddressInput extends BaseComponent {
             }
           }}
           @input=${(evt: Event) =>
-            this.handleAddressChange((evt.target as HTMLInputElement).value)}
+            this.handleAddressChange((evt.target as HTMLTextAreaElement).value)}
         ></textarea>
       </div>
     </section>`;

packages/widget/src/components/transfer/fungible/transfer-button/transfer-button.ts

@@ -7,11 +7,11 @@ import type { Button } from '../../../common';
 import { BaseComponent } from '../../../common';
 
 const enabledStates = [
-  FungibleTransferState.WRONG_CHAIN,
-  FungibleTransferState.WALLET_NOT_CONNECTED,
   FungibleTransferState.PENDING_APPROVALS,
   FungibleTransferState.PENDING_TRANSFER,
-  FungibleTransferState.COMPLETED
+  FungibleTransferState.COMPLETED,
+  FungibleTransferState.WRONG_CHAIN,
+  FungibleTransferState.WALLET_NOT_CONNECTED
 ];
 
 const loadingStates = [
@@ -54,6 +54,10 @@ export class FungibleTransferButton extends BaseComponent {
           ],
           [FungibleTransferState.WALLET_NOT_CONNECTED, () => 'Connect Wallet'],
           [FungibleTransferState.WRONG_CHAIN, () => 'Switch chain'],
+          [
+            FungibleTransferState.INVALID_DESTINATION_ADDRESS,
+            () => 'Invalid Address'
+          ],
           [FungibleTransferState.PENDING_APPROVALS, () => 'Approve token'],
           [FungibleTransferState.PENDING_TRANSFER, () => 'Transfer'],
           [
@@ -67,7 +71,7 @@ export class FungibleTransferButton extends BaseComponent {
           [FungibleTransferState.COMPLETED, () => 'Start new transfer']
         ],
         () => 'Loading'
-      )!}
+      )}
       @click=${this.onClick}
     ></sygma-action-button>`;
   }

packages/widget/src/controllers/transfers/fungible-token-transfer.ts

@@ -12,6 +12,7 @@ import type { ReactiveController, ReactiveElement } from 'lit';
 import type { WalletContext } from '../../context';
 import { walletContext } from '../../context';
 import { MAINNET_EXPLORER_URL, TESTNET_EXPLORER_URL } from '../../constants';
+import { validateAddress } from '../../utils';
 import { buildEvmFungibleTransactions, executeNextEvmTransaction } from './evm';
 
 export enum FungibleTransferState {
@@ -20,6 +21,7 @@ export enum FungibleTransferState {
   MISSING_RESOURCE,
   MISSING_RESOURCE_AMOUNT,
   MISSING_DESTINATION_ADDRESS,
+  INVALID_DESTINATION_ADDRESS,
   WALLET_NOT_CONNECTED,
   WRONG_CHAIN,
   PENDING_APPROVALS,
@@ -40,7 +42,7 @@ export class FungibleTokenTransferController implements ReactiveController {
   public destinationNetwork?: Domain;
   public selectedResource?: Resource;
   public resourceAmount: BigNumber = ethers.constants.Zero;
-  public destinationAddress: string = '';
+  public destinationAddress?: string | null = '';
 
   public supportedSourceNetworks: Domain[] = [];
   public supportedDestinationNetworks: Domain[] = [];
@@ -110,6 +112,7 @@ export class FungibleTokenTransferController implements ReactiveController {
       this.sourceNetwork = undefined;
     }
     this.destinationNetwork = undefined;
+    this.selectedResource = undefined;
     this.pendingEvmApprovalTransactions = [];
     this.pendingEvmTransferTransaction = undefined;
     this.destinationAddress = '';
@@ -166,30 +169,31 @@ export class FungibleTokenTransferController implements ReactiveController {
 
   onDestinationAddressChange = (address: string): void => {
     this.destinationAddress = address;
-    if (this.destinationAddress.length === 0) {
+
+    if (this.destinationAddress && this.destinationAddress.length === 0) {
       this.pendingEvmApprovalTransactions = [];
       this.pendingEvmTransferTransaction = undefined;
+      this.destinationAddress = null;
     }
     void this.buildTransactions();
     this.host.requestUpdate();
   };
 
   getTransferState(): FungibleTransferState {
+    // Enabled state
     if (this.transferTransactionId) {
       return FungibleTransferState.COMPLETED;
     }
+
+    // Loading states
     if (this.waitingUserConfirmation) {
       return FungibleTransferState.WAITING_USER_CONFIRMATION;
     }
     if (this.waitingTxExecution) {
       return FungibleTransferState.WAITING_TX_EXECUTION;
     }
-    if (this.pendingEvmApprovalTransactions.length > 0) {
-      return FungibleTransferState.PENDING_APPROVALS;
-    }
-    if (this.pendingEvmTransferTransaction) {
-      return FungibleTransferState.PENDING_TRANSFER;
-    }
+
+    // Error States
     if (!this.sourceNetwork) {
       return FungibleTransferState.MISSING_SOURCE_NETWORK;
     }
@@ -199,12 +203,24 @@ export class FungibleTokenTransferController implements ReactiveController {
     if (!this.selectedResource) {
       return FungibleTransferState.MISSING_RESOURCE;
     }
-    if (this.resourceAmount.eq(0)) {
-      return FungibleTransferState.MISSING_RESOURCE_AMOUNT;
-    }
+
     if (this.destinationAddress === '') {
       return FungibleTransferState.MISSING_DESTINATION_ADDRESS;
     }
+
+    if (
+      this.destinationAddress === null ||
+      this.destinationAddress === undefined ||
+      validateAddress(this.destinationAddress, this.destinationNetwork.type)
+    ) {
+      return FungibleTransferState.INVALID_DESTINATION_ADDRESS;
+    }
+
+    if (this.resourceAmount.eq(0)) {
+      return FungibleTransferState.MISSING_RESOURCE_AMOUNT;
+    }
+
+    // Enabled States
     if (
       !this.walletContext.value?.evmWallet &&
       !this.walletContext.value?.substrateWallet
@@ -218,6 +234,14 @@ export class FungibleTokenTransferController implements ReactiveController {
     ) {
       return FungibleTransferState.WRONG_CHAIN;
     }
+
+    if (this.pendingEvmApprovalTransactions.length > 0) {
+      return FungibleTransferState.PENDING_APPROVALS;
+    }
+    if (this.pendingEvmTransferTransaction) {
+      return FungibleTransferState.PENDING_TRANSFER;
+    }
+
     return FungibleTransferState.UNKNOWN;
   }
 

packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts

@@ -97,6 +97,6 @@ describe('Fungible token Transfer', function () {
       'sygma-address-input'
     ) as AddressInput;
 
-    assert(sygmaAddressInput.address === '');
+    assert.equal(sygmaAddressInput.address, '');
   });
 });