Add swap and main panel

src/app/components/main-panel.js

@@ -0,0 +1,24 @@
+import { AbstractPanel } from './panel'
+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
+
+const css = csjs`
+  .pluginsContainer {
+    height: 100%;
+    display: flex;
+    overflow-y: hidden;
+  }
+`
+
+export class MainPanel extends AbstractPanel {
+  constructor (appStore, options) {
+    super('mainPanel', appStore, options)
+  }
+
+  render () {
+    return yo`
+      <div class=${css.pluginsContainer}>
+        ${this.view}
+      </div>`
+  }
+}

src/app/components/swap-panel.js

@@ -0,0 +1,84 @@
+import { AbstractPanel } from './panel'
+const csjs = require('csjs-inject')
+const yo = require('yo-yo')
+
+const css = csjs`
+  .panel {
+    height: 100%;
+    overflow-y: hidden; 
+  }
+  .swapitTitle {
+    text-transform: uppercase;
+  }
+  .swapitHeader {
+    height: 35px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .swapitHeader h6 {
+    margin: 0;
+  }
+  .icons i {
+    height: 80%;
+    cursor: pointer;
+  }
+  .pluginsContainer {
+    height: calc(100% - 35px);
+    overflow: auto;
+  }
+`
+
+const options = {
+  default: true,
+  displayHeader: true
+}
+
+export class SwapPanel extends AbstractPanel {
+
+  constructor (appStore) {
+    super('swapPanel', appStore, options)
+    this.header = this.renderHeader()
+    this.store = appStore
+  }
+
+  /**
+   * Display content and update the header
+   * @param {String} name The name of the plugin to display
+   */
+  showContent (name) {
+    super.showContent(name)
+    yo.update(this.header, this.renderHeader())
+  }
+
+  /** The header of the swap panel */
+  renderHeader () {
+    let name = ' - '
+    let hasSettings = false
+    if (this.active) {
+      const { profile } = this.store.getOne(this.active)
+      name = profile.displayName ? profile.displayName : profile.name
+      hasSettings = profile.settings || false
+    }
+    return yo`
+    <header class="${css.swapitHeader}">
+      <h6 class="${css.swapitTitle}">${name}</h6>
+      <div class="${css.icons}">
+        ${hasSettings
+            ? yo`<i class="fas fa-cog"></i>`
+            : yo`<i></i>`}
+      </div>
+    </header>`
+  }
+
+  render () {
+    return yo`
+      <section class="${css.panel}">
+        ${this.header}
+        <div class="${css.pluginsContainer}">
+          ${this.view}
+        </div>
+      </section>`
+  }
+}