From 171c4436ea3cb0112d67bb311c5cfab0f1ae74a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20S=CC=8Ctokovic=CC=81?= <filip.stokovic@gmail.com>
Date: Mon, 22 Jan 2024 21:05:46 +0100
Subject: [PATCH] chore: use enum for `Direction` (to/from)

---
 .../network-selector/network-selector.ts         | 16 ++++++++--------
 packages/widget/src/widget.ts                    |  5 +++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/widget/src/components/network-selector/network-selector.ts b/packages/widget/src/components/network-selector/network-selector.ts
index 2cdf442a..25d31887 100644
--- a/packages/widget/src/components/network-selector/network-selector.ts
+++ b/packages/widget/src/components/network-selector/network-selector.ts
@@ -5,10 +5,12 @@ import { map } from 'lit/directives/map.js';
 import { capitalize } from '../../utils';
 import { styles } from './styles';
 
-const directions = {
-  from: 'From',
-  to: 'To'
-};
+export const Directions = {
+  FROM: 'From',
+  TO: 'To'
+} as const;
+
+type Direction = (typeof Directions)[keyof typeof Directions];
 
 @customElement('sygma-network-selector')
 export class NetworkSelector extends LitElement {
@@ -27,7 +29,7 @@ export class NetworkSelector extends LitElement {
   @property({
     type: String
   })
-  direction?: 'from' | 'to';
+  direction?: Direction;
 
   @property({
     type: Object,
@@ -66,9 +68,7 @@ export class NetworkSelector extends LitElement {
 
   render(): HTMLTemplateResult {
     return html` <div class="selectorContainer">
-      <label for="selector" class="directionLabel"
-        >${this.direction && directions[this.direction]}</label
-      >
+      <label for="selector" class="directionLabel">${this.direction}</label>
       <section class="selectorSection">
         <select
           @change=${(event: Event) => this.onChange.bind(this)(event)}
diff --git a/packages/widget/src/widget.ts b/packages/widget/src/widget.ts
index 09ff921d..469f55ec 100644
--- a/packages/widget/src/widget.ts
+++ b/packages/widget/src/widget.ts
@@ -6,6 +6,7 @@ import { switchNetworkIcon, sygmaLogo } from './assets';
 import { WidgetController } from './controllers/widget';
 import './components/network-selector';
 import './components/amount-selector';
+import { Directions } from './components/network-selector/network-selector';
 
 @customElement('sygmaprotocol-widget')
 class SygmaProtocolWidget extends LitElement {
@@ -24,7 +25,7 @@ class SygmaProtocolWidget extends LitElement {
           </section>
           <section>
             <sygma-network-selector
-              .direction=${'from'}
+              .direction=${Directions.FROM}
               .icons=${true}
               .onNetworkSelected=${this.widgetController
                 .onSourceNetworkSelected}
@@ -34,7 +35,7 @@ class SygmaProtocolWidget extends LitElement {
           </section>
           <section>
             <sygma-network-selector
-              .direction=${'from'}
+              .direction=${Directions.TO}
               .icons=${true}
               .onNetworkSelected=${this.widgetController
                 .onDestinationNetworkSelected}