Add tokens view

src/consts/index.ts

@@ -69,7 +69,8 @@ export enum PageNames {
   PageNotFound = 'PageNotFound',
   Bridge = 'Bridge',
   BridgeTransaction = 'BridgeTransaction',
-  BridgeTransactionsHistory = 'BridgeTransactionsHistory'
+  BridgeTransactionsHistory = 'BridgeTransactionsHistory',
+  Tokens = 'Tokens'
 }
 
 export enum Components {
@@ -157,6 +158,10 @@ const OtherPagesMenu: Array<SidebarMenuItem> = [
   {
     icon: 'file-file-text-24',
     title: PageNames.About
+  },
+  {
+    icon: 'various-bone-24',
+    title: PageNames.Tokens
   }
 ]
 

src/lang/en.json

@@ -258,7 +258,8 @@
         "About": "About",
         "Stats": "Stats",
         "Support": "Support",
-        "CreatePair": "Create Pair"
+        "CreatePair": "Create Pair",
+        "Tokens": "Tokens"
     },
     "social": {
         "twitter": "Twitter",
@@ -624,6 +625,12 @@
         "outputMessage": "Output is estimated. If the price changes more than {slippageTolerance}% your transaction will revert.",
         "confirmTitle": "You will receive"
     },
+    "tokens": {
+        "title": "Listed Tokens",
+        "symbol": "Symbol",
+        "name": "Name",
+        "assetId": "Asset ID"
+    },
     "dexSettings": {
         "title": "Transaction settings",
         "marketAlgorithm": "@.upper:marketAlgorithmText",

src/lang/messages.ts

@@ -62,7 +62,8 @@ export default {
     [PageNames.About]: 'About',
     [PageNames.Stats]: 'Stats',
     [PageNames.Support]: 'Support',
-    [PageNames.CreatePair]: 'Create Pair'
+    [PageNames.CreatePair]: 'Create Pair',
+    [PageNames.Tokens]: 'Tokens'
   },
   social: {
     twitter: 'Twitter',
@@ -443,6 +444,12 @@ export default {
     outputMessage: 'Output is estimated. If the price changes more than {slippageTolerance}% your transaction will revert.',
     confirmTitle: 'You will receive'
   },
+  tokens: {
+    title: 'Listed Tokens',
+    symbol: 'Symbol',
+    name: 'Name',
+    assetId: 'Asset ID'
+  },
   dexSettings: {
     title: 'Transaction settings',
     marketAlgorithm: '@.upper:marketAlgorithmText',

src/plugins/soramitsuUI.ts

@@ -31,6 +31,8 @@ import SSlider from '@soramitsu/soramitsu-js-ui/src/components/Slider'
 import SSwitch from '@soramitsu/soramitsu-js-ui/src/components/Switch'
 import STab from '@soramitsu/soramitsu-js-ui/src/components/Tab/STab'
 import STabs from '@soramitsu/soramitsu-js-ui/src/components/Tab/STabs'
+import STable from '@soramitsu/soramitsu-js-ui/src/components/Table/STable'
+import STableColumn from '@soramitsu/soramitsu-js-ui/src/components/Table/STableColumn'
 import STooltip from '@soramitsu/soramitsu-js-ui/src/components/Tooltip'
 
 import store from '@/store'
@@ -63,6 +65,8 @@ Vue.use(SSlider)
 Vue.use(SSwitch)
 Vue.use(STab)
 Vue.use(STabs)
+Vue.use(STable)
+Vue.use(STableColumn)
 Vue.use(STooltip)
 Vue.prototype.$prompt = MessageBox.prompt
 Vue.prototype.$alert = MessageBox.alert

src/router/index.ts

@@ -80,6 +80,11 @@ const routes: Array<RouteConfig> = [
     name: PageNames.Rewards,
     component: lazyView(PageNames.Rewards)
   },
+  {
+    path: '/tokens',
+    name: PageNames.Tokens,
+    component: lazyView(PageNames.Tokens)
+  },
   {
     path: '/stats',
     name: PageNames.Stats

src/views/Tokens.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="container" v-loading="parentLoading">
+    <generic-page-header :title="t('tokens.title')" class="page-header-title--tokens" />
+    <s-table
+      v-if="whitelistAssets.length"
+      :data="tableItems"
+      :highlight-current-row="false"
+      size="small"
+      class="tokens-table"
+    >
+      <s-table-column label="#" width="40">
+        <template v-slot="{ $index }">
+          <span class="tokens-item-index">{{ $index + 1 }}</span>
+        </template>
+      </s-table-column>
+      <s-table-column width="104" header-align="center" align="center">
+        <template #header>
+          <span class="tokens-table__primary">{{ t('tokens.symbol') }}</span>
+        </template>
+        <template v-slot="{ row }">
+          <s-card size="mini" shadow="always" pressed>
+            <div class="tokens-item-symbol">{{ row.symbol }}</div>
+          </s-card>
+        </template>
+      </s-table-column>
+      <s-table-column width="52" header-align="center" align="center">
+        <template #header>
+          <s-icon name="various-bone-24" size="14px" />
+        </template>
+        <template v-slot="{ row }">
+          <token-logo class="tokens-item-logo" :token-symbol="row.symbol" />
+        </template>
+      </s-table-column>
+      <s-table-column>
+        <template #header>
+          <span class="tokens-table__primary">{{ t('tokens.name') }}</span>&nbsp;
+          <span class="tokens-table__secondary">({{ t('tokens.assetId') }})</span>
+        </template>
+        <template v-slot="{ row }">
+          <token-address :name="row.name" :symbol="row.symbol" :address="row.address" />
+        </template>
+      </s-table-column>
+    </s-table>
+    <s-pagination
+      class="tokens-table-pagination"
+      :layout="'prev, total, next'"
+      :current-page.sync="currentPage"
+      :page-size="pageAmount"
+      :total="whitelistAssets.length"
+      @prev-click="handlePrevClick"
+      @next-click="handleNextClick"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import { Asset } from '@sora-substrate/util'
+
+import { Components } from '@/consts'
+import { lazyComponent } from '@/router'
+
+import LoadingMixin from '@/components/mixins/LoadingMixin'
+import TranslationMixin from '@/components/mixins/TranslationMixin'
+
+@Component({
+  components: {
+    GenericPageHeader: lazyComponent(Components.GenericPageHeader),
+    TokenLogo: lazyComponent(Components.TokenLogo),
+    TokenAddress: lazyComponent(Components.TokenAddress)
+  }
+})
+export default class Tokens extends Mixins(LoadingMixin, TranslationMixin) {
+  @Getter('whitelistAssets', { namespace: 'assets' }) whitelistAssets!: Array<Asset>
+
+  currentPage = 1
+  pageAmount = 10
+
+  get tableItems (): Array<Asset> {
+    return this.whitelistAssets.slice((this.currentPage - 1) * this.pageAmount, this.currentPage * this.pageAmount)
+  }
+
+  handlePrevClick (current: number): void {
+    this.currentPage = current
+  }
+
+  handleNextClick (current: number): void {
+    this.currentPage = current
+  }
+}
+</script>
+
+<style lang="scss">
+.page-header-title--tokens {
+  justify-content: center;
+}
+
+.tokens-table.el-table {
+  background: transparent;
+
+  thead {
+    text-transform: uppercase;
+    font-size: var(--s-font-size-small);
+    letter-spacing: var(--s-letter-spacing-mini);
+  }
+
+  tr, th {
+    &, &:hover {
+      background: transparent;
+
+      & > td,
+      & > th {
+        background: transparent;
+
+        .cell {
+          padding: $inner-spacing-mini / 2 $inner-spacing-mini;
+        }
+      }
+    }
+  }
+
+  .el-table__body-wrapper {
+    height: auto !important;
+  }
+
+  .token-address {
+    &__name {
+      display: block;
+    }
+  }
+}
+
+.tokens-table-pagination {
+  display: flex;
+  margin-top: $inner-spacing-medium;
+
+  .el-pagination__total {
+    margin: auto;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$icon-size: 36px;
+
+.tokens-table {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+
+  &__primary {
+    color: var(--s-color-base-content-secondary);
+  }
+  &__secondary {
+    color: var(--s-color-base-content-quaternary);
+    font-size: var(--s-font-size-mini);
+  }
+}
+
+.tokens-item {
+  &-index {
+    color: var(--s-color-base-content-tertiary);
+    font-size: var(--s-font-size-small);
+    font-weight: 800;
+  }
+  &-symbol {
+    font-size: var(--s-font-size-big);
+    font-weight: 800;
+    line-height: var(--s-line-height-big);
+    text-align: center;
+  }
+  &-logo {
+    &.token-logo {
+      display: inline-flex;
+      height: $icon-size;
+      width: $icon-size;
+    }
+  }
+}
+</style>