chore: use enum for Direction (to/from)

sygmaprotocol · Jan 23, 2024 · 171c443 · 171c443
1 parent c3f1e38
commit 171c443
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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}