From 7e2d994f975e9e572ce20b2a213604d9beaf3e4d Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 28 Jun 2021 12:31:24 +0300
Subject: [PATCH 1/4] add tokens view with simple render whitelist

---
 src/consts/index.ts  |  7 +++-
 src/router/index.ts  |  5 +++
 src/views/Tokens.vue | 82 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Tokens.vue

diff --git a/src/consts/index.ts b/src/consts/index.ts
index 8d5ce45a2..24c8eba0f 100644
--- a/src/consts/index.ts
+++ b/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: 'file-file-text-24',
+    title: PageNames.Tokens
   }
 ]
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 623f478dd..f7102aeac 100644
--- a/src/router/index.ts
+++ b/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
diff --git a/src/views/Tokens.vue b/src/views/Tokens.vue
new file mode 100644
index 000000000..57c37a1d3
--- /dev/null
+++ b/src/views/Tokens.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="content" v-loading="parentLoading">
+    <s-table
+      v-if="whitelistAssets.length"
+      :data="whitelistAssets"
+      :highlight-current-row="false"
+      size="small"
+    >
+      <s-table-column label="Name" width="300">
+        <template v-slot="{ $index, row }">
+          <div class="tokens-item-name">
+            <span>{{ $index + 1 }}</span>
+            <token-logo class="tokens-item__logo" :token-symbol="row.symbol"  />
+            <span>{{ row.name }}</span>
+          </div>
+        </template>
+      </s-table-column>
+      <s-table-column prop="symbol" label="Symbol" width="80"></s-table-column>
+      <s-table-column label="Address">
+        <template v-slot="{ row }">
+          <div class="tokens-item-name">
+            <span class="tokens-item__address">{{ row.address }}</span>
+          </div>
+        </template>
+      </s-table-column>
+    </s-table>
+  </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'
+
+@Component({
+  components: {
+    TokenLogo: lazyComponent(Components.TokenLogo)
+  }
+})
+export default class Tokens extends Mixins(LoadingMixin) {
+  @Getter('whitelistAssets', { namespace: 'assets' }) whitelistAssets!: Array<Asset>
+
+  log (scope) {
+    console.log(scope)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  min-width: 800px;
+  max-width: 1040px;
+  margin: 0 auto;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tokens-item {
+  &-name {
+    display: flex;
+    align-items: center;
+
+    & > *:not(:last-child) {
+      margin-right: $inner-spacing-mini;
+    }
+  }
+  &__logo {
+    display: inline-flex;
+  }
+  &__address {
+    white-space: nowrap;
+  }
+}
+</style>

From ada4b15025203c100414524051c7d3fef66178c2 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 2 Jul 2021 11:27:53 +0400
Subject: [PATCH 2/4] Update soramitsuUI.ts

---
 src/plugins/soramitsuUI.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/plugins/soramitsuUI.ts b/src/plugins/soramitsuUI.ts
index 9b49c1f55..0900535f1 100644
--- a/src/plugins/soramitsuUI.ts
+++ b/src/plugins/soramitsuUI.ts
@@ -37,6 +37,8 @@ const components = [
   Components.SSlider,
   Components.STab,
   Components.STabs,
+  Components.STable,
+  Components.STableColumn,
   Components.STooltip
 ]
 

From 5c81964a9125be7455775f68767f4a22aa4e43be Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Wed, 7 Jul 2021 13:43:40 +0300
Subject: [PATCH 3/4] update according to design

---
 src/consts/index.ts        |   2 +-
 src/lang/en.json           |   9 +-
 src/lang/messages.ts       |   9 +-
 src/plugins/soramitsuUI.ts |   4 +
 src/views/Tokens.vue       | 179 +++++++++++++++++++++++++++++--------
 5 files changed, 164 insertions(+), 39 deletions(-)

diff --git a/src/consts/index.ts b/src/consts/index.ts
index 24c8eba0f..13c261bd6 100644
--- a/src/consts/index.ts
+++ b/src/consts/index.ts
@@ -160,7 +160,7 @@ const OtherPagesMenu: Array<SidebarMenuItem> = [
     title: PageNames.About
   },
   {
-    icon: 'file-file-text-24',
+    icon: 'various-bone-24',
     title: PageNames.Tokens
   }
 ]
diff --git a/src/lang/en.json b/src/lang/en.json
index 0dafd6c39..54b0ee264 100644
--- a/src/lang/en.json
+++ b/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",
diff --git a/src/lang/messages.ts b/src/lang/messages.ts
index e657459fa..4b8f914f1 100644
--- a/src/lang/messages.ts
+++ b/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',
diff --git a/src/plugins/soramitsuUI.ts b/src/plugins/soramitsuUI.ts
index 0084d17ed..a5889f898 100644
--- a/src/plugins/soramitsuUI.ts
+++ b/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
diff --git a/src/views/Tokens.vue b/src/views/Tokens.vue
index 57c37a1d3..194d19c61 100644
--- a/src/views/Tokens.vue
+++ b/src/views/Tokens.vue
@@ -1,29 +1,60 @@
 <template>
-  <div class="content" v-loading="parentLoading">
+  <div class="container tokens-container" v-loading="parentLoading">
+    <generic-page-header :title="t('tokens.title')" class="page-header-title--tokens" />
     <s-table
       v-if="whitelistAssets.length"
-      :data="whitelistAssets"
+      :data="tableItems"
       :highlight-current-row="false"
       size="small"
+      class="tokens-table"
+      height="initial"
     >
-      <s-table-column label="Name" width="300">
-        <template v-slot="{ $index, row }">
-          <div class="tokens-item-name">
-            <span>{{ $index + 1 }}</span>
-            <token-logo class="tokens-item__logo" :token-symbol="row.symbol"  />
-            <span>{{ row.name }}</span>
-          </div>
+      <s-table-column label="#" width="40">
+        <template v-slot="{ $index }">
+          <span>{{ $index + 1 }}</span>
         </template>
       </s-table-column>
-      <s-table-column prop="symbol" label="Symbol" width="80"></s-table-column>
-      <s-table-column label="Address">
+      <s-table-column width="104">
+        <template #header>
+          <div class="tokens-table__center">
+            <span class="tokens-table__primary">{{ t('tokens.symbol') }}</span>
+          </div>
+        </template>
         <template v-slot="{ row }">
-          <div class="tokens-item-name">
-            <span class="tokens-item__address">{{ row.address }}</span>
+          <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" align="center">
+        <template #header>
+          <div class="tokens-table__center">
+            <s-icon name="various-bone-24" size="14px" />
           </div>
         </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>
 
@@ -36,47 +67,123 @@ import { Components } from '@/consts'
 import { lazyComponent } from '@/router'
 
 import LoadingMixin from '@/components/mixins/LoadingMixin'
+import TranslationMixin from '@/components/mixins/TranslationMixin'
 
 @Component({
   components: {
-    TokenLogo: lazyComponent(Components.TokenLogo)
+    GenericPageHeader: lazyComponent(Components.GenericPageHeader),
+    TokenLogo: lazyComponent(Components.TokenLogo),
+    TokenAddress: lazyComponent(Components.TokenAddress)
   }
 })
-export default class Tokens extends Mixins(LoadingMixin) {
+export default class Tokens extends Mixins(LoadingMixin, TranslationMixin) {
   @Getter('whitelistAssets', { namespace: 'assets' }) whitelistAssets!: Array<Asset>
 
-  log (scope) {
-    console.log(scope)
+  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" scoped>
-.content {
-  display: flex;
-  min-width: 800px;
-  max-width: 1040px;
-  margin: 0 auto;
-  text-align: center;
-  flex-direction: column;
+<style lang="scss">
+$item-height: 71px;
+
+.page-header-title--tokens {
   justify-content: center;
-  align-items: center;
 }
 
-.tokens-item {
-  &-name {
-    display: flex;
-    align-items: 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;
 
-    & > *:not(:last-child) {
-      margin-right: $inner-spacing-mini;
+        .cell {
+          padding: $inner-spacing-mini / 2 $inner-spacing-mini;
+        }
+      }
     }
   }
-  &__logo {
-    display: inline-flex;
+
+  .el-table__body-wrapper {
+    height: $item-height * 10 !important;
+  }
+
+  .token-address {
+    &__name {
+      display: block;
+    }
+  }
+}
+
+.tokens-table-pagination {
+  display: flex;
+
+  .el-pagination__total {
+    margin: auto;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.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);
+  }
+  &__center {
+    text-align: center;
+  }
+}
+
+.tokens-item {
+  &-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: 36px;
+      width: 36px;
+    }
   }
-  &__address {
-    white-space: nowrap;
+  &-data {
+    color: var(--s-color-base-content-primary);
+    font-size: var(--s-font-size-small);
+    font-weight: 300;
+    line-height: var(--s-line-height-medium);
   }
 }
 </style>

From c17f7dc7d784f459db8fe8117c5918ec7bd6cd58 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Wed, 7 Jul 2021 14:16:15 +0300
Subject: [PATCH 4/4] css fixes

---
 src/views/Tokens.vue | 42 +++++++++++++++++-------------------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/views/Tokens.vue b/src/views/Tokens.vue
index 194d19c61..fdbaba7b7 100644
--- a/src/views/Tokens.vue
+++ b/src/views/Tokens.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container tokens-container" v-loading="parentLoading">
+  <div class="container" v-loading="parentLoading">
     <generic-page-header :title="t('tokens.title')" class="page-header-title--tokens" />
     <s-table
       v-if="whitelistAssets.length"
@@ -7,18 +7,15 @@
       :highlight-current-row="false"
       size="small"
       class="tokens-table"
-      height="initial"
     >
       <s-table-column label="#" width="40">
         <template v-slot="{ $index }">
-          <span>{{ $index + 1 }}</span>
+          <span class="tokens-item-index">{{ $index + 1 }}</span>
         </template>
       </s-table-column>
-      <s-table-column width="104">
+      <s-table-column width="104" header-align="center" align="center">
         <template #header>
-          <div class="tokens-table__center">
-            <span class="tokens-table__primary">{{ t('tokens.symbol') }}</span>
-          </div>
+          <span class="tokens-table__primary">{{ t('tokens.symbol') }}</span>
         </template>
         <template v-slot="{ row }">
           <s-card size="mini" shadow="always" pressed>
@@ -26,11 +23,9 @@
           </s-card>
         </template>
       </s-table-column>
-      <s-table-column width="52" align="center">
+      <s-table-column width="52" header-align="center" align="center">
         <template #header>
-          <div class="tokens-table__center">
-            <s-icon name="various-bone-24" size="14px" />
-          </div>
+          <s-icon name="various-bone-24" size="14px" />
         </template>
         <template v-slot="{ row }">
           <token-logo class="tokens-item-logo" :token-symbol="row.symbol" />
@@ -97,8 +92,6 @@ export default class Tokens extends Mixins(LoadingMixin, TranslationMixin) {
 </script>
 
 <style lang="scss">
-$item-height: 71px;
-
 .page-header-title--tokens {
   justify-content: center;
 }
@@ -128,7 +121,7 @@ $item-height: 71px;
   }
 
   .el-table__body-wrapper {
-    height: $item-height * 10 !important;
+    height: auto !important;
   }
 
   .token-address {
@@ -140,6 +133,7 @@ $item-height: 71px;
 
 .tokens-table-pagination {
   display: flex;
+  margin-top: $inner-spacing-medium;
 
   .el-pagination__total {
     margin: auto;
@@ -148,6 +142,8 @@ $item-height: 71px;
 </style>
 
 <style lang="scss" scoped>
+$icon-size: 36px;
+
 .tokens-table {
   display: flex;
   flex-flow: column nowrap;
@@ -160,12 +156,14 @@ $item-height: 71px;
     color: var(--s-color-base-content-quaternary);
     font-size: var(--s-font-size-mini);
   }
-  &__center {
-    text-align: center;
-  }
 }
 
 .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;
@@ -175,15 +173,9 @@ $item-height: 71px;
   &-logo {
     &.token-logo {
       display: inline-flex;
-      height: 36px;
-      width: 36px;
+      height: $icon-size;
+      width: $icon-size;
     }
   }
-  &-data {
-    color: var(--s-color-base-content-primary);
-    font-size: var(--s-font-size-small);
-    font-weight: 300;
-    line-height: var(--s-line-height-medium);
-  }
 }
 </style>