diff --git a/packages/widget/src/components/address-input/address-input.ts b/packages/widget/src/components/address-input/address-input.ts index ca265292..da5c005e 100644 --- a/packages/widget/src/components/address-input/address-input.ts +++ b/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`
+ return html`
`; diff --git a/packages/widget/src/components/transfer/fungible/transfer-button/transfer-button.ts b/packages/widget/src/components/transfer/fungible/transfer-button/transfer-button.ts index b1203ae1..1b2d6652 100644 --- a/packages/widget/src/components/transfer/fungible/transfer-button/transfer-button.ts +++ b/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} >`; } diff --git a/packages/widget/src/controllers/transfers/fungible-token-transfer.ts b/packages/widget/src/controllers/transfers/fungible-token-transfer.ts index d72b828b..1f19466b 100644 --- a/packages/widget/src/controllers/transfers/fungible-token-transfer.ts +++ b/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; } diff --git a/packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts b/packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts index a4f68b0d..00e5547a 100644 --- a/packages/widget/tests/unit/components/transfer/fungible/fungible-token-transfer.test.ts +++ b/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, ''); }); });