diff --git a/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts b/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts index b7af1da3..9f1c097e 100644 --- a/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts +++ b/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` +
+ Amount to receive: + + ${tokenBalanceToNumber( + this.transferController.resourceAmount, + decimals! + )} + ${symbol} + +
+ `; + } + return null; + } + renderTransferStatus(): HTMLTemplateResult { return html`
+ ${when(this.transferController.destinationAddress, () => + this.renderAmountOnDestination() + )}