feat: display amount to be received on destination (#168)

<!--- Provide a general summary of your changes in the Title above -->

<!--- Describe your changes in detail -->
- display amount to receive in destination

<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Otherwise, describe context and motivation for change here -->

Closes: #156

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] Documentation

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have commented my code, particularly in hard-to-understand
areas.
- [ ] I have ensured that all acceptance criteria (or expected behavior)
from issue are met
- [ ] I have updated the documentation locally and in sygma-docs.
- [ ] I have added tests to cover my changes.
- [ ] I have ensured that all the checks are passing and green, I've
signed the CLA bot

---------

Signed-off-by: Marin Petrunic <[email protected]>
Co-authored-by: Marin Petrunić <[email protected]>
Co-authored-by: Filip Štoković <[email protected]>
Co-authored-by: Anton Lykhoyda <[email protected]>
Co-authored-by: Saad Ahmed <[email protected]>
Co-authored-by: mj52951 <[email protected]>
Co-authored-by: mj52951 <[email protected]>

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

@@ -77,7 +77,7 @@ export class FungibleTokenTransferController implements ReactiveController {
   protected buildEvmTransactions = buildEvmFungibleTransactions;
   protected executeNextEvmTransaction = executeNextEvmTransaction;
   protected pendingEvmApprovalTransactions: UnsignedTransaction[] = [];
-  protected pendingTransferTransaction?:
+  public pendingTransferTransaction?:
     | UnsignedTransaction
     | SubstrateTransaction;
 
@@ -134,6 +134,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}
         >