add translation keys

sora-xor · Mar 25, 2024 · d272516 · d272516
1 parent d25ad7c
commit d272516
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 deletions.
diff --git a/src/components/shared/Widget/Customise.vue b/src/components/shared/Widget/Customise.vue
@@ -1,17 +1,17 @@
 <template>
-  <base-widget v-bind="$attrs" title="Customise page">
+  <base-widget v-bind="$attrs" :title="t('customisePageText')">
     <template #filters>
       <el-popover popper-class="customise-widget-popper" trigger="click" v-model="visible" :visible-arrow="false">
         <s-button slot="reference" type="action" alternative size="small" icon="basic-settings-24" />
 
         <div class="customise">
-          <div class="customise-title">Customise page</div>
+          <div class="customise-title">{{ t('customisePageText') }}</div>
 
-          <div v-for="(model, name) in { widgetsModel, optionsModel }" :key="name" class="customise-options">
+          <div v-for="(model, name) in { widgets, options }" :key="name" class="customise-options">
             <s-divider />
             <label v-for="(value, key) in model" :key="key" class="customise-option">
               <s-switch :value="value" @input="toggle(name, model, key, $event)" />
-              <span>{{ key }}</span>
+              <span>{{ getLabel(key, name) }}</span>
             </label>
           </div>
 
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, ModelSync, PropSync } from 'vue-property-decorator';
+import { Component, Mixins, ModelSync, PropSync, Prop } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components, ObjectInit } from '@/consts';
@@ -36,14 +36,21 @@ import type { WidgetsVisibilityModel } from '@/types/layout';
   },
 })
 export default class CustomiseWidget extends Mixins(TranslationMixin) {
-  @PropSync('widgets', { default: ObjectInit, type: Object }) readonly widgetsModel!: WidgetsVisibilityModel;
-  @PropSync('options', { default: ObjectInit, type: Object }) readonly optionsModel!: WidgetsVisibilityModel;
+  @PropSync('widgetsModel', { default: ObjectInit, type: Object }) readonly widgets!: WidgetsVisibilityModel;
+  @PropSync('optionsModel', { default: ObjectInit, type: Object }) readonly options!: WidgetsVisibilityModel;
+  @Prop({ default: ObjectInit, type: Object }) readonly labels!: Record<string, string>;
 
   @ModelSync('value', 'input', { type: Boolean }) visible!: boolean;
 
-  toggle(name: string, model: WidgetsVisibilityModel, key: string, value: boolean) {
+  toggle(name: string, model: WidgetsVisibilityModel, key: string, value: boolean): void {
     this[name] = { ...model, [key]: value };
   }
+
+  getLabel(key: string, name: string): string {
+    if (key in this.labels) return this.labels[key];
+
+    return this.t(`${name}.${key}`);
+  }
 }
 </script>
 

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -1557,5 +1557,12 @@
         },
         "pricePerToken": "Price per 1 {token}"
     },
-    "calculatingText": "Calculating"
+    "calculatingText": "Calculating",
+    "customisePageText": "Customise page",
+    "editText": "Edit",
+    "resetText": "Reset",
+    "priceChartText": "{symbol} Price chart",
+    "options": {
+        "edit": "@:editText"
+    }
 }
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -5,7 +5,6 @@
     :draggable="options.edit"
     :resizable="options.edit"
     :lines="options.edit"
-    :compact="options.compact"
     :loading="parentLoading"
     :default-layouts="DefaultLayouts"
     v-model="widgets"
@@ -29,8 +28,8 @@
       <swap-transactions-widget v-bind="props" full extensive />
     </template>
     <template v-slot:[SwapWidgets.Customise]="{ reset, ...props }">
-      <customise-widget v-bind="props" :widgets.sync="widgets" :options.sync="options">
-        <s-button @click="reset">Reset</s-button>
+      <customise-widget v-bind="props" :widgets-model.sync="widgets" :options-model.sync="options" :labels="labels">
+        <s-button @click="reset">{{ t('resetText') }}</s-button>
       </customise-widget>
     </template>
     <template v-slot:[SwapWidgets.PriceChartA]="props">
@@ -57,14 +56,15 @@ import type { ResponsiveLayouts, WidgetsVisibilityModel } from '@/types/layout';
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
 enum SwapWidgets {
-  Form = 'form',
-  Chart = 'chart',
-  Transactions = 'transactions',
-  Distribution = 'distribution',
   Customise = 'customise',
+  // main
+  Form = 'swapForm',
+  Chart = 'swapChart',
+  Transactions = 'swapTransactions',
+  Distribution = 'swapDistribution',
   // additional
-  PriceChartA = 'chart_a',
-  PriceChartB = 'chart_b',
+  PriceChartA = 'swapTokenAPriceChart',
+  PriceChartB = 'swapTokenBPriceChart',
 }
 
 @Component({
@@ -139,7 +139,6 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
 
   options = {
     edit: false,
-    compact: false,
   };
 
   widgets: WidgetsVisibilityModel = {
@@ -151,6 +150,17 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
     [SwapWidgets.PriceChartB]: false,
   };
 
+  get labels(): Record<string, string> {
+    return {
+      [SwapWidgets.Form]: this.t('swapText'),
+      [SwapWidgets.Chart]: this.t('priceChartText'),
+      [SwapWidgets.Distribution]: this.t('swap.route'),
+      [SwapWidgets.Transactions]: this.tc('transactionText', 2),
+      [SwapWidgets.PriceChartA]: this.t('priceChartText', { symbol: this.tokenFrom?.symbol ?? '' }),
+      [SwapWidgets.PriceChartB]: this.t('priceChartText', { symbol: this.tokenTo?.symbol ?? '' }),
+    };
+  }
+
   @Watch('tokenFrom')
   @Watch('tokenTo')
   private updateRouteTokensParams() {