feat: reset fields after transfer is complete (#163)

closes #133

Author: Lykhoyda

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

@@ -6,7 +6,7 @@ import { when } from 'lit/directives/when.js';
 
 import { chevronIcon, networkIconsMap } from '../../../assets';
 import { capitalize } from '../../../utils';
-import { BaseComponent } from '../base-component/base-component';
+import { BaseComponent } from '../base-component';
 
 import { styles } from './styles';
 
@@ -36,14 +36,30 @@ export class Dropdown extends BaseComponent {
   @property({ type: Array })
   options: DropdownOption[] = [];
 
+  @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);
   }
 
@@ -54,13 +70,27 @@ export class Dropdown extends BaseComponent {
 
   updated(changedProperties: PropertyValues<typeof 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 (
         !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/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/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

@@ -17,6 +17,7 @@ export const styles = css`
     align-items: center;
     border-radius: 1.5rem;
     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/fungible-token-transfer.ts

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