create SwapFormWidget

src/components/pages/OrderBook/BookChartsWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <swap-chart
+  <price-chart-widget
     :dex-id="dexId"
     :base-asset="baseAsset"
     :quote-asset="quoteAsset"
@@ -22,7 +22,7 @@ import type { DexId } from '@sora-substrate/util/build/dex/consts';
 
 @Component({
   components: {
-    SwapChart: lazyComponent(Components.SwapChart),
+    PriceChartWidget: lazyComponent(Components.PriceChartWidget),
   },
 })
 export default class BookChartsWidget extends Mixins(TranslationMixin) {

src/components/pages/Swap/ChartWidget.vue

@@ -0,0 +1,24 @@
+<template>
+  <price-chart-widget :base-asset="tokenFrom" :quote-asset="tokenTo" :is-available="isAvailable" />
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+import { getter, state } from '@/store/decorators';
+
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+
+@Component({
+  components: {
+    PriceChartWidget: lazyComponent(Components.PriceChartWidget),
+  },
+})
+export default class SwapChartWidget extends Mixins() {
+  @state.swap.isAvailable isAvailable!: boolean;
+  @getter.swap.tokenFrom tokenFrom!: Nullable<AccountAsset>;
+  @getter.swap.tokenTo tokenTo!: Nullable<AccountAsset>;
+}
+</script>