feat: display amount to be received on destination

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

@@ -5,6 +5,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import '../../../context/wallet';
 import { choose } from 'lit/directives/choose.js';
+import { when } from 'lit/directives/when.js';
 import type { Eip1193Provider } from 'packages/widget/src/interfaces';
 import {
   FungibleTokenTransferController,
@@ -16,9 +17,10 @@ import '../../resource-amount-selector';
 import './transfer-button';
 import './transfer-status';
 import '../../network-selector';
+import { BaseComponent } from '../../common';
 import { Directions } from '../../network-selector/network-selector';
 import { WalletController } from '../../../controllers';
-import { BaseComponent } from '../../common/base-component';
+import { tokenBalanceToNumber } from '../../../utils/token';
 import { styles } from './styles';
 
 @customElement('sygma-fungible-transfer')
@@ -73,6 +75,28 @@ export class FungibleTokenTransfer extends BaseComponent {
     }
   };
 
+  renderAmountOnDestination(): HTMLTemplateResult | null {
+    if (
+      this.transferController.selectedResource &&
+      this.transferController.pendingTransferTransaction !== undefined
+    ) {
+      const { decimals, symbol } = this.transferController.selectedResource;
+      return html`
+        <div class="amountOnDestination">
+          <span> Amount to receive: </span>
+          <span>
+            ${tokenBalanceToNumber(
+              this.transferController.resourceAmount,
+              decimals!
+            )}
+            ${symbol}
+          </span>
+        </div>
+      `;
+    }
+    return null;
+  }
+
   renderTransferStatus(): HTMLTemplateResult {
     return html` <section>
       <sygma-transfer-status
@@ -143,6 +167,9 @@ export class FungibleTokenTransfer extends BaseComponent {
         </sygma-address-input>
       </section>
       <section>
+        ${when(this.transferController.destinationAddress, () =>
+          this.renderAmountOnDestination()
+        )}
         <sygma-fungible-transfer-detail
           .selectedResource=${this.transferController.selectedResource}
           .fee=${this.transferController.fee}

packages/widget/src/components/transfer/fungible/styles.ts

@@ -13,4 +13,14 @@ export const styles = css`
     align-items: stretch;
     gap: 0.5rem;
   }
+
+  .amountOnDestination {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 0.5rem;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
 `;

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

@@ -76,7 +76,7 @@ export class FungibleTokenTransferController implements ReactiveController {
   protected buildEvmTransactions = buildEvmFungibleTransactions;
   protected executeNextEvmTransaction = executeNextEvmTransaction;
   protected pendingEvmApprovalTransactions: UnsignedTransaction[] = [];
-  protected pendingTransferTransaction?:
+  public pendingTransferTransaction?:
     | UnsignedTransaction
     | SubstrateTransaction;
 
@@ -96,13 +96,6 @@ export class FungibleTokenTransferController implements ReactiveController {
     ReactiveElement
   >;
 
-  isWalletDisconnected(context: WalletContext): boolean {
-    // Skip the method call during init
-    if (Object.values(context).length === 0) return false;
-
-    return !(!!context.evmWallet || !!context.substrateWallet);
-  }
-
   get sourceSubstrateProvider(): ApiPromise | undefined {
     if (this.sourceNetwork && this.sourceNetwork.type === Network.SUBSTRATE) {
       const domainConfig = this.config.getDomainConfig(
@@ -126,6 +119,13 @@ export class FungibleTokenTransferController implements ReactiveController {
     );
   }
 
+  isWalletDisconnected(context: WalletContext): boolean {
+    // Skip the method call during init
+    if (Object.values(context).length === 0) return false;
+
+    return !(!!context.evmWallet || !!context.substrateWallet);
+  }
+
   constructor(host: ReactiveElement) {
     (this.host = host).addController(this);
     this.config = new Config();

packages/widget/src/controllers/transfers/substrate/build.ts

@@ -31,6 +31,8 @@ export async function buildSubstrateFungibleTransactions(
   );
 
   this.fee = await substrateTransfer.getFee(transfer);
+
+  this.resourceAmount = this.resourceAmount.sub(this.fee.fee.toString());
   this.pendingTransferTransaction = substrateTransfer.buildTransferTransaction(
     transfer,
     this.fee

packages/widget/src/controllers/wallet-manager/manager.ts

@@ -147,7 +147,6 @@ export class WalletController implements ReactiveController {
       }
     }
   }
-
   connectEvmWallet = async (
     network: Domain,
     options?: {

packages/widget/src/widget.ts

@@ -106,9 +106,9 @@ class SygmaProtocolWidget
         .appMetadata=${this.appMetadata}
         .theme=${this.theme}
         .walletConnectOptions=${this.walletConnectOptions}
-        .walletModules=${this.walletModules}
       >
         <sygma-wallet-context-provider
+          .walletModules=${this.walletModules}
           .substrateProviders=${this.substrateProviders}
           .environment=${this.environment}
         >