minor fixes

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

@@ -183,6 +183,7 @@ export class FungibleTokenTransfer
           .amountToReceive=${BigNumber.from(0)}
           .sourceDomainConfig=${sourceDomainConfig}
           .selectedResource=${selectedResource}
+          .fee=${this.executionController.fee}
         ></sygma-fungible-transfer-detail>
       </section>
       <section>

packages/widget/src/controllers/execution.ts

@@ -1,7 +1,9 @@
 import { ReactiveController } from 'lit';
 import { SubstrateTransactionExecutor } from '../lib/substrateTransactionExecutor';
 import { TransferElement } from '../interfaces';
-import { EvmTransactionExecutor } from '../lib/EvmTransactionExecutor';
+import { EvmTransactionExecutor } from '../lib/evmTransactionExecutor';
+import { EvmFee } from '@buildwithsygma/evm';
+import { SubstrateFee } from 'node_modules/@buildwithsygma/substrate/dist-esm/types';
 
 export enum ExeuctionState {
   Executing = 'Executing',
@@ -14,6 +16,8 @@ export enum ExeuctionState {
 export class ExecutionController implements ReactiveController {
   host: TransferElement;
 
+  fee: EvmFee | SubstrateFee | undefined;
+
   state: ExeuctionState;
 
   private executions: Array<
@@ -25,8 +29,12 @@ export class ExecutionController implements ReactiveController {
 
   hostConnected(): void {}
 
-  getNextTransactionTitle(): string {
+  getExecutingTransactionTitle(): string {
     if (this.executing) return this.executing.title;
+    return '';
+  }
+
+  getNextTransactionTitle(): string {
     if (this.executions.length > 0) return this.executions[0].title;
     return '';
   }
@@ -43,19 +51,21 @@ export class ExecutionController implements ReactiveController {
   }
 
   onExecutorsReady(
-    executors: Array<EvmTransactionExecutor | SubstrateTransactionExecutor>
+    executors: Array<EvmTransactionExecutor | SubstrateTransactionExecutor>,
+    fee: EvmFee | SubstrateFee | undefined
   ) {
     this.executions = executors;
+    this.fee = fee;
     this.state = ExeuctionState.Ready;
   }
 
   async execute() {
     const next = this.executions.shift();
     try {
       if (next) {
+        this.executing = next;
         this.state = ExeuctionState.Executing;
         this.host.validationController.updateState();
-        this.executing = next;
         await this.executing.executeTransaction();
         this.state = ExeuctionState.Ready;
         if (this.executions.length === 0) {

packages/widget/src/controllers/selections.ts

@@ -139,6 +139,10 @@ export class SelectionsController implements ReactiveController {
   }
 
   private selectResource(resource?: Resource) {
+    if (this.selectedResource) {
+      this.host.tokenBalanceController.resetBalance();
+    }
+
     if (resource) {
       this.host.tokenBalanceController.startBalanceUpdates(
         resource,
@@ -211,11 +215,11 @@ export class SelectionsController implements ReactiveController {
 
   reset() {
     this.host.tokenBalanceController.resetBalance();
-    this.selectedSource = undefined;
-    this.selectedDestination = undefined;
-    this.selectedResource = undefined;
     this.bigAmount = BigNumber.from(0);
     this.displayAmount = '';
     this.recipientAddress = '';
+    this.selectedDestination = undefined;
+    this.selectedResource = undefined;
+    this.selectedSource = undefined;
   }
 }

packages/widget/src/controllers/transactionBuilder.ts

@@ -8,12 +8,14 @@ import { ApiPromise, SubmittableResult } from '@polkadot/api';
 import { TransferElement } from '../interfaces';
 import {
   createFungibleAssetTransfer,
+  EvmFee,
   TransactionRequest
 } from '@buildwithsygma/evm';
 import { SubstrateTransactionExecutor } from '../lib/substrateTransactionExecutor';
 import { Signer, SubmittableExtrinsic } from '@polkadot/api/types';
 import { createSubstrateFungibleAssetTransfer } from '@buildwithsygma/substrate';
-import { EvmTransactionExecutor } from '../lib/EvmTransactionExecutor';
+import { EvmTransactionExecutor } from '../lib/evmTransactionExecutor';
+import { SubstrateFee } from 'node_modules/@buildwithsygma/substrate/dist-esm/types';
 
 type EvmFungibleTransfer = Awaited<
   ReturnType<typeof createFungibleAssetTransfer>
@@ -178,7 +180,9 @@ export class TransactionBuilderController implements ReactiveController {
           provider
         });
 
+        let fee: SubstrateFee | EvmFee | undefined;
         if (transfer) {
+          fee = await transfer?.getFee();
           const executors = [];
           if (sourceIsEvm) {
             executors.push(
@@ -199,7 +203,7 @@ export class TransactionBuilderController implements ReactiveController {
             );
           }
 
-          this.host.executionController.onExecutorsReady(executors);
+          this.host.executionController.onExecutorsReady(executors, fee);
           this.status = TransactionBuilderStatus.Built;
           this.host.validationController.updateState();
         }

packages/widget/src/controllers/validation.ts

@@ -38,7 +38,8 @@ export class ValidationController implements ReactiveController {
     const sel = this.host.selectionsController;
     const { error, message } = validateSelections(
       sel,
-      this.walletContext.value
+      this.walletContext.value,
+      this.host.tokenBalanceController.balance
     );
 
     if (error && AMOUNT_ERRORS.includes(error)) {
@@ -82,23 +83,27 @@ export class ValidationController implements ReactiveController {
   }
 
   validateExecutionState(): boolean {
-    let nextTitle = this.host.executionController.getNextTransactionTitle();
+    let nextTitle;
     switch (this.host.executionController.state) {
       case ExeuctionState.Complete:
         this.host.executionController.reset();
         this.host.selectionsController.reset();
         return true;
       case ExeuctionState.Ready:
+        nextTitle = this.host.executionController.getNextTransactionTitle();
         this.transferButtonText = `Execute ${nextTitle}`;
         this.transferButtonLoading = false;
         this.transferButtonDisabled = false;
         return true;
       case ExeuctionState.Failed:
+        nextTitle = this.host.executionController.getNextTransactionTitle();
         this.transferButtonText = `Execution Failed ${nextTitle}`;
         this.transferButtonDisabled = true;
         this.transferButtonLoading = false;
         return false;
       case ExeuctionState.Executing:
+        nextTitle =
+          this.host.executionController.getExecutingTransactionTitle();
         this.transferButtonText = `Executing ${nextTitle}`;
         this.transferButtonLoading = true;
         this.transferButtonDisabled = true;

packages/widget/src/lib/selectionErrors.ts

@@ -3,6 +3,7 @@ import { SelectionsController } from '../controllers/selections';
 import { validateAddress } from '../utils';
 import { WalletContext } from '../context';
 import { Network } from '@buildwithsygma/core';
+import { parseUnits } from 'ethers/lib/utils';
 
 export enum SelectionError {
   SOURCE_MISSING = 'SOURCE_MISSING',
@@ -37,7 +38,8 @@ const ERROR_MESSAGES: Record<SelectionError, string> = {
  */
 export function getSelectionError(
   selectionsController: SelectionsController,
-  walletContext?: WalletContext
+  walletContext?: WalletContext,
+  balance?: BigNumber
 ) {
   const {
     selectedSource,
@@ -57,12 +59,17 @@ export function getSelectionError(
     error = SelectionError.RESOURCE_MISSING;
   } else if (!displayAmount || displayAmount.length === 0) {
     error = SelectionError.AMOUNT_MISSING;
-  } else if (BigNumber.from(displayAmount).lte(0)) {
+  } else if (displayAmount === '') {
     error = SelectionError.ZERO_AMOUNT;
   } else if (!recipientAddress || recipientAddress.length === 0) {
     error = SelectionError.RECIPIENT_ADDRESS_MISSING;
   } else if (validateAddress(recipientAddress, selectedDestination.type)) {
     error = SelectionError.INVALID_RECIPIENT_ADDRESS;
+  } else if (balance && selectedResource && displayAmount) {
+    const bigAmount = parseUnits(displayAmount, selectedResource.decimals!);
+    if (bigAmount.gt(balance)) {
+      error = SelectionError.AMOUNT_EXCEEDS_BALANCE;
+    }
   } else if (selectedSource) {
     const { type } = selectedSource;
     if (type === Network.SUBSTRATE) {
@@ -96,12 +103,13 @@ export function getSelectionError(
  */
 export function validateSelections(
   selectionsController: SelectionsController,
-  walletContext?: WalletContext
+  walletContext?: WalletContext,
+  balance?: BigNumber
 ): {
   message: string | null;
   error: SelectionError | null;
 } {
-  const error = getSelectionError(selectionsController, walletContext);
+  const error = getSelectionError(selectionsController, walletContext, balance);
   if (error) return { message: ERROR_MESSAGES[error], error };
   return { message: null, error: null };
 }