chore: bring changes from main to dev (#173)

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

## Description

- brings last changes from main into dev. I had to cherry pick those
commits, because since the last merge, doing a PR from main to dev
resulted in a lot of conflicts and duplicated changes.
- Main has two commits that weren't included in the last merge. One of
those commits is needed for #168

<!--- Describe your changes in detail -->

## Related Issue Or Context

<!--- 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: #<issue>

## How Has This Been Tested? Testing details.

<!--- 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. -->

## Types of changes

<!--- 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)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] Documentation

## Checklist:

<!--- 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: Anton Lykhoyda <[email protected]>

packages/widget/src/components/common/dropdown/dropdown.ts

@@ -40,14 +40,30 @@ export class Dropdown extends BaseComponent {
   @property({ type: Object })
   actionOption: HTMLTemplateResult | null = null;
 
+  @property({ type: String })
+  preSelectedOption = '';
+
   @state()
   selectedOption: DropdownOption | null = null;
 
   @property({ attribute: false })
   onOptionSelected: (option?: DropdownOption) => void = () => {};
 
+  _setPreselectedOption = (): void => {
+    if (this.preSelectedOption) {
+      const newOption =
+        this.options.find((o) => o.name === this.preSelectedOption) || null;
+
+      if (newOption) {
+        this.selectedOption = newOption;
+        this.onOptionSelected(newOption);
+      }
+    }
+  };
+
   connectedCallback(): void {
     super.connectedCallback();
+    this._setPreselectedOption();
     addEventListener('click', this._handleOutsideClick);
   }
 
@@ -58,14 +74,28 @@ export class Dropdown extends BaseComponent {
 
   updated(changedProperties: PropertyValues<this>): void {
     super.updated(changedProperties);
+
+    // Set pre-selected option after transfer is completed
+    if (
+      changedProperties.has('options') &&
+      this.preSelectedOption &&
+      this.selectedOption?.name !== this.preSelectedOption
+    ) {
+      this._setPreselectedOption();
+    }
+
     //if options changed, check if we have selected option that doesn't exist
     if (changedProperties.has('options') && this.selectedOption) {
       if (
         Array.isArray(this.options) &&
         !this.options.map((o) => o.value).includes(this.selectedOption.value)
       ) {
-        this.selectedOption = null;
-        this.onOptionSelected(undefined);
+        if (this.preSelectedOption) {
+          this._setPreselectedOption();
+        } else {
+          this.selectedOption = null;
+          this.onOptionSelected(undefined);
+        }
       }
     }
   }

packages/widget/src/components/common/index.ts

@@ -2,3 +2,4 @@ export { Button } from './buttons/button';
 export { ConnectWalletButton } from './buttons/connect-wallet';
 export { Dropdown } from './dropdown/dropdown';
 export { OverlayComponent } from './overlay-component';
+export { BaseComponent } from './base-component';

packages/widget/src/components/network-selector/network-selector.ts

@@ -5,7 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
 import { networkIconsMap } from '../../assets';
-import { BaseComponent } from '../common/base-component';
+import { BaseComponent } from '../common';
 import type { DropdownOption } from '../common/dropdown/dropdown';
 
 import { styles } from './styles';
@@ -28,6 +28,9 @@ export class NetworkSelector extends BaseComponent {
   @property({ type: String })
   direction?: Direction;
 
+  @property({ type: String })
+  selectedNetwork?: string;
+
   @property({ attribute: false })
   onNetworkSelected: (option?: Domain) => void = () => {};
 
@@ -55,6 +58,7 @@ export class NetworkSelector extends BaseComponent {
   render(): HTMLTemplateResult {
     return html`<div class="selectorContainer">
       <dropdown-component
+        .preSelectedOption=${this.selectedNetwork}
         .disabled=${this.disabled}
         .placeholder=${'Select the network'}
         .label=${this.direction}

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

@@ -73,7 +73,7 @@ export class FungibleTokenTransfer extends BaseComponent {
     }
 
     if (state === FungibleTransferState.COMPLETED) {
-      this.transferController.reset();
+      this.transferController.reset({ omitSourceNetworkReset: true });
     }
   };
 
@@ -100,6 +100,7 @@ export class FungibleTokenTransfer extends BaseComponent {
     return html` <form @submit=${() => {}}>
       <section class="networkSelectionWrapper">
         <sygma-network-selector
+          .selectedNetwork=${this.transferController.sourceNetwork?.name}
           .direction=${Directions.FROM}
           .icons=${true}
           .onNetworkSelected=${(network?: Domain) => {

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

@@ -16,7 +16,8 @@ export const styles = css`
     flex-direction: column;
     align-items: center;
     border-radius: 1.5rem;
-    border: 0.0625rem solid var(--zinc-200);
+    border: 1px solid var(--zinc-200);
+    margin-bottom: 1rem;
   }
 
   .destinationMessage {
@@ -36,7 +37,7 @@ export const styles = css`
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0rem 4.78125rem 0.9375rem 4.78125rem;
+    padding: 0 4.78125rem 0.9375rem 4.78125rem;
 
     color: var(--zinc-600);
     text-align: center;
@@ -53,9 +54,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     text-align: center;
-
     color: var(--zinc-500);
-    text-align: center;
     font-size: 0.75rem;
     font-style: normal;
     font-weight: 400;

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

@@ -1,5 +1,10 @@
-import { EVMAssetTransfer } from '@buildwithsygma/sygma-sdk-core';
+import {
+  EVMAssetTransfer,
+  FeeHandlerType,
+  type PercentageFee
+} from '@buildwithsygma/sygma-sdk-core';
 import { Web3Provider } from '@ethersproject/providers';
+import { constants, utils } from 'ethers';
 import { type FungibleTokenTransferController } from '../fungible-token-transfer';
 
 /**
@@ -29,12 +34,45 @@ export async function buildEvmFungibleTransactions(
 
   const evmTransfer = new EVMAssetTransfer();
   await evmTransfer.init(new Web3Provider(provider, providerChaiId), this.env);
+
+  // Hack to make fungible transfer behave like it does on substrate side
+  // where fee is deducted from user inputted amount rather than added on top
+  const originalTransfer = await evmTransfer.createFungibleTransfer(
+    address,
+    this.destinationNetwork.chainId,
+    this.destinationAddress,
+    this.selectedResource.resourceId,
+    this.resourceAmount.toString()
+  );
+  const originalFee = await evmTransfer.getFee(originalTransfer);
+  //in case of percentage fee handler, we are calculating what amount + fee will result int user inputed amount
+  //in case of fixed(basic) fee handler, fee is taken from native token
+  if (originalFee.type === FeeHandlerType.PERCENTAGE) {
+    const { lowerBound, upperBound, percentage } = originalFee as PercentageFee;
+    const userInputAmount = this.resourceAmount;
+    //calculate amount without fee (percentage)
+    const feelessAmount = userInputAmount
+      .mul(constants.WeiPerEther)
+      .div(utils.parseEther(String(1 + percentage)));
+
+    const calculatedFee = userInputAmount.sub(feelessAmount);
+    this.resourceAmount = feelessAmount;
+    //if calculated percentage fee is less than lower fee bound, substract lower bound from user input. If lower bound is 0, bound is ignored
+    if (calculatedFee.lt(lowerBound) && lowerBound.gt(0)) {
+      this.resourceAmount = userInputAmount.sub(lowerBound);
+    }
+    //if calculated percentage fee is more than upper fee bound, substract upper bound from user input. If upper bound is 0, bound is ignored
+    if (calculatedFee.gt(upperBound) && upperBound.gt(0)) {
+      this.resourceAmount = userInputAmount.sub(upperBound);
+    }
+  }
+
   const transfer = await evmTransfer.createFungibleTransfer(
     address,
     this.destinationNetwork.chainId,
     this.destinationAddress,
     this.selectedResource.resourceId,
-    String(this.resourceAmount)
+    this.resourceAmount.toString()
   );
   this.fee = await evmTransfer.getFee(transfer);
   this.pendingEvmApprovalTransactions = await evmTransfer.buildApprovals(

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

@@ -197,8 +197,10 @@ export class FungibleTokenTransferController implements ReactiveController {
     this.fee = null;
   }
 
-  reset(): void {
-    this.sourceNetwork = undefined;
+  reset({ omitSourceNetworkReset } = { omitSourceNetworkReset: false }): void {
+    if (!omitSourceNetworkReset) {
+      this.sourceNetwork = undefined;
+    }
     this.destinationNetwork = undefined;
     this.pendingEvmApprovalTransactions = [];
     this.pendingTransferTransaction = undefined;