From fea39800099aa2335a03bc5a28ee2b64a164798a Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Fri, 13 Aug 2021 23:08:04 +0800
Subject: [PATCH] finish account

---
 package.json                         |   2 +
 src/layouts/components/Navbar.vue    |  60 ++++-
 src/libs/data/data.js                |  56 +++--
 src/libs/fetch.js                    |  32 +++
 src/router/index.js                  |  58 ++++-
 src/views/FormWizardNumber.vue       | 315 +++++++++++++++++++++++++++
 src/views/SummaryAssetsComponent.vue |   2 +-
 src/views/UserAccounts.vue           | 227 +++++++++++++++++++
 src/views/UserAddressBook.vue        |  11 +
 src/views/UserPortfolio.vue          |   0
 src/views/UserSetting.vue            |  11 +
 yarn.lock                            |  20 +-
 12 files changed, 771 insertions(+), 23 deletions(-)
 create mode 100644 src/views/FormWizardNumber.vue
 create mode 100644 src/views/UserAccounts.vue
 create mode 100644 src/views/UserAddressBook.vue
 create mode 100644 src/views/UserPortfolio.vue
 create mode 100644 src/views/UserSetting.vue

diff --git a/package.json b/package.json
index 10b2b33f..cf40908f 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "vue-echarts": "5.0.0-beta.0",
     "vue-feather-icons": "5.1.0",
     "vue-flatpickr-component": "8.1.6",
+    "vue-flex-waterfall": "^1.0.7",
     "vue-form-wizard": "0.8.4",
     "vue-i18n": "8.22.2",
     "vue-loader": "^15.9.6",
@@ -67,6 +68,7 @@
     "vuex": "3.6.0"
   },
   "devDependencies": {
+    "@cosmjs/launchpad": "^0.25.6",
     "@vue/cli-plugin-babel": "~4.5.9",
     "@vue/cli-plugin-eslint": "~4.5.9",
     "@vue/cli-plugin-router": "~4.5.9",
diff --git a/src/layouts/components/Navbar.vue b/src/layouts/components/Navbar.vue
index 3318fc16..c703c8de 100644
--- a/src/layouts/components/Navbar.vue
+++ b/src/layouts/components/Navbar.vue
@@ -61,14 +61,65 @@
       <dark-Toggler class="d-none d-lg-block" />
       <search-bar />
       <locale />
+      <b-dropdown
+        class="ml-1"
+        variant="link"
+        no-caret
+        toggle-class="p-0"
+        right
+      >
+
+        <template #button-content>
+          <b-button
+            v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+            variant="primary"
+            class="btn-icon"
+          >
+            <feather-icon icon="UserIcon" />
+          </b-button>
+        </template>
+
+        <b-dropdown-item :to="{ name: 'portfolio' }">
+          <feather-icon
+            icon="PieChartIcon"
+            size="16"
+          />
+          <span class="align-middle ml-50">Portofolio</span>
+        </b-dropdown-item>
+
+        <b-dropdown-item :to="{ name: 'accounts' }">
+          <feather-icon
+            icon="KeyIcon"
+            size="16"
+          />
+          <span class="align-middle ml-50">Accounts</span>
+        </b-dropdown-item>
+
+        <b-dropdown-item :to="{ name: 'addresses' }">
+          <feather-icon
+            icon="BookOpenIcon"
+            size="16"
+          />
+          <span class="align-middle ml-50">Address Book</span>
+        </b-dropdown-item>
+
+        <b-dropdown-item :to="{ name: 'setting' }">
+          <feather-icon
+            icon="SettingsIcon"
+            size="16"
+          />
+          <span class="align-middle ml-50">Setting</span>
+        </b-dropdown-item>
+      </b-dropdown>
     </b-navbar-nav>
   </div>
 </template>
 
 <script>
 import {
-  BLink, BNavbarNav, BMedia, BMediaAside, BAvatar, BMediaBody, VBTooltip,
+  BLink, BNavbarNav, BMedia, BMediaAside, BAvatar, BMediaBody, VBTooltip, BButton, BDropdown, BDropdownItem,
 } from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
 import DarkToggler from '@core/layouts/components/app-navbar/components/DarkToggler.vue'
 import Locale from '@core/layouts/components/app-navbar/components/Locale.vue'
 import SearchBar from '@core/layouts/components/app-navbar/components/SearchBar.vue'
@@ -84,6 +135,9 @@ export default {
     BMedia,
     BMediaAside,
     BMediaBody,
+    BButton,
+    BDropdown,
+    BDropdownItem,
 
     // Navbar Components
     DarkToggler,
@@ -94,6 +148,7 @@ export default {
   },
   directives: {
     'b-tooltip': VBTooltip,
+    Ripple,
   },
   props: {
     toggleVerticalMenuActive: {
@@ -108,9 +163,6 @@ export default {
   },
   computed: {
     selected_chain() {
-      // const c = this.$route.params.chain
-      // const has = Object.keys(store.state.chains.config).findIndex(i => i === c)
-      // const selected = (has > -1) ? store.state.chains.config[c] : store.state.chains.config.cosmos
       return store.state.chains.selected
     },
   },
diff --git a/src/libs/data/data.js b/src/libs/data/data.js
index 5a8c766f..3fee231b 100644
--- a/src/libs/data/data.js
+++ b/src/libs/data/data.js
@@ -12,6 +12,22 @@ dayjs.extend(localeData)
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
+export function getLocalObject(name) {
+  const text = localStorage.getItem(name)
+  if (text) {
+    return JSON.parse(text)
+  }
+  return null
+}
+
+export function getLocalChains() {
+  return getLocalObject('chains')
+}
+
+export function getLocalAccounts() {
+  return getLocalObject('accounts')
+}
+
 export function toDuration(value) {
   return dayjs.duration(value).humanize()
 }
@@ -76,25 +92,33 @@ export function isToken(value) {
   return is
 }
 
-export function formatToken(token) {
-  if (token) {
-    let denom = token.denom.toUpperCase()
+export function formatTokenDenom(tokenDenom) {
+  if (tokenDenom) {
+    let denom = tokenDenom.toUpperCase()
     if (denom.charAt(0) === 'U') {
       denom = denom.substring(1)
-      const amount = token.amount / 1000000
-      if (amount > 10) {
-        return `${parseFloat(amount.toFixed())} ${denom}`
-      }
-      return `${parseFloat(amount)} ${denom}`
+    } else if (denom === 'BASECRO') {
+      denom = 'CRO'
     }
-    if (denom === 'BASECRO') {
-      const amount = token.amount / 1000000
-      if (amount > 10) {
-        return `${parseFloat(amount.toFixed())} CRO`
-      }
-      return `${parseFloat(amount)} CRO`
-    }
-    return `${parseFloat(token.amount)} ${denom}`
+    return denom
+  }
+  return tokenDenom
+}
+
+export function formatTokenAmount(tokenAmount, fraction = 2, denom = 'uatom') {
+  if (denom.startsWith('u')) {
+    // for special case
+  }
+  const amount = tokenAmount / 1000000
+  if (amount > 10) {
+    return parseFloat(amount.toFixed(fraction))
+  }
+  return parseFloat(amount)
+}
+
+export function formatToken(token) {
+  if (token) {
+    return `${formatTokenAmount(token.amount, 2, token.denom)} ${formatTokenDenom(token.denom)}`
   }
   return token
 }
diff --git a/src/libs/fetch.js b/src/libs/fetch.js
index 6a9db0ce..20b30821 100644
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -188,6 +188,38 @@ const chainAPI = class ChainFetch {
     const ret = await fetch(this.config.api + url).then(response => response.json())
     return ret
   }
+
+  static fetch(host, url) {
+    const ret = fetch(host + url).then(response => response.json())
+    return ret
+  }
+
+  static async getAuthAccount(baseurl, address) {
+    return ChainFetch.fetch(baseurl, '/auth/accounts/'.concat(address)).then(data => commonProcess(data))
+  }
+
+  static async getBankBalance(baseurl, address) {
+    return ChainFetch.fetch(baseurl, '/bank/balances/'.concat(address)).then(data => commonProcess(data))
+  }
+
+  static async getIBCDenomTrace(baseurl, hash) {
+    const h = hash.substring(hash.indexOf('/'))
+    return ChainFetch.fetch(baseurl, '/ibc/applications/transfer/v1beta1/denom_traces/'.concat(h)).then(data => commonProcess(data))
+  }
+
+  static async getIBCDenomTraceText(baseurl, hash) {
+    return ChainFetch.getIBCDenomTrace(baseurl, hash).then(res => res.denom_trace.base_denom)
+  }
+
+  // CoinMarketCap
+  static async fetchCoinMarketCap(url) {
+    const host = 'https://price.ping.pub'
+    return fetch(host + url).then(response => response.json())
+  }
+
+  static async fetchTokenQuote(symbol) {
+    return ChainFetch.fetchCoinMarketCap(`/quote/${symbol}`)
+  }
 }
 
 export default chainAPI
diff --git a/src/router/index.js b/src/router/index.js
index 917ba5e8..f76bebe9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,6 +26,62 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/user/setting',
+      name: 'setting',
+      component: () => import('@/views/UserSetting.vue'),
+      meta: {
+        pageTitle: 'Setting',
+        breadcrumb: [
+          {
+            text: 'Setting',
+            active: true,
+          },
+        ],
+      },
+    },
+    {
+      path: '/user/portfolio',
+      name: 'portfolio',
+      component: () => import('@/views/UserPortfolio.vue'),
+      meta: {
+        pageTitle: 'Portfolio',
+        breadcrumb: [
+          {
+            text: 'Portfolio',
+            active: true,
+          },
+        ],
+      },
+    },
+    {
+      path: '/user/accounts',
+      name: 'accounts',
+      component: () => import('@/views/UserAccounts.vue'),
+      meta: {
+        pageTitle: 'Accounts',
+        breadcrumb: [
+          {
+            text: 'Accounts',
+            active: true,
+          },
+        ],
+      },
+    },
+    {
+      path: '/user/address',
+      name: 'addresses',
+      component: () => import('@/views/UserAddressBook.vue'),
+      meta: {
+        pageTitle: 'Address Book',
+        breadcrumb: [
+          {
+            text: 'Transaction',
+            active: true,
+          },
+        ],
+      },
+    },
     // chain modules
     {
       path: '/:chain/',
@@ -189,7 +245,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   const c = to.params.chain
-  store.commit('select', { chain_name: c })
+  if (c) store.commit('select', { chain_name: c })
 
   const config = JSON.parse(localStorage.getItem('chains'))
   // const has = Object.keys(config).findIndex(i => i === c)
diff --git a/src/views/FormWizardNumber.vue b/src/views/FormWizardNumber.vue
new file mode 100644
index 00000000..c99e8f58
--- /dev/null
+++ b/src/views/FormWizardNumber.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <form-wizard
+      color="#7367F0"
+      :title="null"
+      :subtitle="null"
+      shape="square"
+      finish-button-text="Submit"
+      back-button-text="Previous"
+      @on-complete="formSubmitted"
+    >
+      <!-- Device tab -->
+      <tab-content
+        title="Device"
+        :before-change="validationFormDevice"
+      >
+        <validation-observer
+          ref="deviceRules"
+          tag="form"
+        >
+          <b-row>
+            <b-col md="12">
+              <b-form-group
+                label="Select a device to import accounts"
+                label-for="device"
+              >
+                <validation-provider
+                  #default="{ errors }"
+                  name="device"
+                  rules="required"
+                >
+                  <div class="demo-inline-spacing">
+                    <b-form-radio
+                      v-model="device"
+                      name="device"
+                      value="keplr"
+                      checked
+                    >
+                      Keplr
+                    </b-form-radio>
+                    <b-form-radio
+                      v-model="device"
+                      name="device"
+                      value="ledger"
+                      disabled
+                    >
+                      Ledger Nano
+                    </b-form-radio>
+                    <b-form-radio
+                      v-model="device"
+                      name="device"
+                      value="nmemonic"
+                      disabled
+                    >
+                      Nmemonic
+                    </b-form-radio>
+                  </div>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </validation-observer>
+      </tab-content>
+
+      <!-- address  -->
+      <tab-content
+        title="Accounts"
+        :before-change="validationFormAddress"
+      >
+        <validation-observer
+          ref="accountRules"
+          tag="form"
+        >
+          <b-row>
+            <b-col md="12">
+              <b-form-group
+                label="Account Name"
+                label-for="account_name"
+              >
+                <validation-provider
+                  #default="{ errors }"
+                  name="Account Name"
+                  rules="required"
+                >
+                  <b-form-input
+                    id="account_name"
+                    v-model="name"
+                    :state="errors.length > 0 ? false:null"
+                    placeholder="Keplr"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+            <b-col md="12">
+              <b-form-group
+                label="Import Address For Chains:"
+              >
+                <validation-provider
+                  #default="{ errors }"
+                  name="addrs"
+                  rules="required"
+                >
+                  <div class="demo-inline-spacing text-uppercase">
+                    <b-row>
+                      <b-col
+                        v-for="item, key in chains"
+                        :key="key"
+                        cols="3"
+                        class="mb-25"
+                      >
+                        <b-form-checkbox
+                          v-model="selected"
+                          name="addrs"
+                          :value="key"
+                        >
+                          <b-avatar
+                            :src="item.logo"
+                            size="18"
+                            variant="light-primary"
+                            rounded=""
+                          />
+                          {{ item.chain_name }}
+                        </b-form-checkbox>
+                      </b-col>
+                    </b-row>
+                  </div>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </validation-observer>
+      </tab-content>
+
+      <tab-content
+        title="Confirmation"
+      >
+        <div class="d-flex border-bottom mb-2">
+          <feather-icon
+            icon="UserIcon"
+            size="19"
+            class="mb-50"
+          />
+          <h4 class="mb-0 ml-50">
+            {{ name }}
+          </h4>
+        </div>
+
+        <b-row class="mb-2">
+          <b-col
+            v-for="i in addresses"
+            :key="i.addr"
+            cols="12"
+          >
+            <b-input-group class="mb-25">
+              <b-input-group-prepend is-text>
+                <b-avatar
+                  :src="i.logo"
+                  size="18"
+                  variant="light-primary"
+                  rounded
+                />
+              </b-input-group-prepend>
+              <b-form-input :value="i.addr" />
+            </b-input-group>
+          </b-col>
+        </b-row>
+      </tab-content>
+    </form-wizard>
+
+  </div>
+</template>
+
+<script>
+import { FormWizard, TabContent } from 'vue-form-wizard'
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+// import 'vue-form-wizard/dist/vue-form-wizard.min.css'
+import 'vue-form-wizard/dist/vue-form-wizard.min.css'
+import {
+  BRow,
+  BCol,
+  BFormGroup,
+  BFormInput,
+  BFormRadio,
+  BFormCheckbox,
+  BAvatar,
+  BInputGroup,
+  BInputGroupPrepend,
+} from 'bootstrap-vue'
+import { required } from '@validations'
+import store from '@/store'
+import { addressDecode, addressEnCode } from '@/libs/data'
+import { Bech32 } from '@cosmjs/encoding'
+
+export default {
+  components: {
+    ValidationProvider,
+    ValidationObserver,
+    FormWizard,
+    TabContent,
+    BAvatar,
+    BRow,
+    BCol,
+    BFormGroup,
+    BFormInput,
+    BFormRadio,
+    BFormCheckbox,
+    BInputGroup,
+    BInputGroupPrepend,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
+  },
+  data() {
+    return {
+      device: 'keplr',
+      name: '',
+      options: {},
+      required,
+      selected: [],
+      accounts: null,
+    }
+  },
+  computed: {
+    chains() {
+      const config = JSON.parse(localStorage.getItem('chains'))
+      return config
+    },
+
+    addresses() {
+      if (!this.accounts) return []
+      const { data } = addressDecode(this.accounts[0].address)
+      return this.selected.map(x => {
+        const { logo, addr_prefix } = this.chains[x]
+        const addr = addressEnCode(addr_prefix, data)
+        return { chain: x, addr, logo }
+      })
+    },
+  },
+  created() {
+    const { selected } = store.state.chains
+    if (selected && selected.chain_name) {
+      this.selected.push(selected.chain_name)
+    }
+  },
+  methods: {
+    async cennectKeplr() {
+      if (!window.getOfflineSigner || !window.keplr) {
+        // eslint-disable-next-line no-alert
+        alert('Please install keplr extension')
+        return null
+      }
+      const chainId = 'cosmoshub'
+      await window.keplr.enable(chainId)
+      const offlineSigner = window.getOfflineSigner(chainId)
+      return offlineSigner.getAccounts()
+    },
+    formSubmitted() {
+      const string = localStorage.getItem('accounts')
+      const accounts = string ? JSON.parse(string) : {}
+
+      accounts[this.name] = {
+        name: this.name,
+        device: this.device,
+        address: this.addresses,
+      }
+      localStorage.setItem('accounts', JSON.stringify(accounts))
+
+      this.$toast({
+        component: ToastificationContent,
+        props: {
+          title: 'Address Saved!',
+          icon: 'EditIcon',
+          variant: 'success',
+        },
+      })
+    },
+    async validationFormDevice() {
+      await this.cennectKeplr().then(accounts => {
+        if (accounts) {
+          this.accounts = accounts
+          const key = Bech32.decode(accounts[0].address)
+          console.log(accounts, key)
+        }
+      })
+      return new Promise((resolve, reject) => {
+        this.$refs.deviceRules.validate().then(success => {
+          if (success) {
+            resolve(true)
+          }
+          reject()
+        })
+      })
+    },
+    validationFormAddress() {
+      return new Promise((resolve, reject) => {
+        this.$refs.accountRules.validate().then(success => {
+          if (success) {
+            resolve(true)
+          } else {
+            reject()
+          }
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+  @import '@core/scss/vue/pages/ui-feather.scss';
+  @import '@core/scss/vue/libs/vue-wizard.scss';
+</style>
diff --git a/src/views/SummaryAssetsComponent.vue b/src/views/SummaryAssetsComponent.vue
index b0075186..31434222 100644
--- a/src/views/SummaryAssetsComponent.vue
+++ b/src/views/SummaryAssetsComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card v-if="assets">
     <b-card-title>
-      Onchain Assets
+      Assets
     </b-card-title>
     <b-table
       :items="assets"
diff --git a/src/views/UserAccounts.vue b/src/views/UserAccounts.vue
new file mode 100644
index 00000000..2ebe3706
--- /dev/null
+++ b/src/views/UserAccounts.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="text-center">
+
+    <b-tabs
+      pills
+      active-nav-item-class="font-weight-bolder"
+    >
+      <b-tab
+        v-for="item,index in accounts"
+        :key="index"
+      >
+        <template #title>
+          <feather-icon icon="UserIcon" />
+          <span>{{ item.name }}</span>
+        </template>
+
+        <b-row>
+          <b-col
+            v-for="acc, j in item.address"
+            :key="j"
+            sm="12"
+            md="6"
+            xl="4"
+            :class="(balances[acc.addr])? 'order-1' : 'order-9' "
+          >
+
+            <b-card
+              no-body
+              class="card-browser-states text-truncate"
+            >
+              <b-card-header>
+                <div>
+                  <b-card-title> <span class="text-uppercase">{{ acc.chain }}</span></b-card-title>
+                </div>
+                <feather-icon
+                  icon="MoreVerticalIcon"
+                  size="18"
+                  class="cursor-pointer"
+                />
+              </b-card-header>
+              <b-card-body>
+                <b-row>
+                  <b-col>
+                    <div class="d-flex justify-content-between">
+                      <b-avatar
+                        :src="acc.logo"
+                        size="28"
+                        variant="light-primary"
+                        rounded
+                      />
+                      <h3>${{ formatBalance(balances[acc.addr]) }}</h3>
+                    </div>
+                    <small class="pl-1 float-right text-muted text-overflow ">
+                      {{ acc.addr }}
+                    </small>
+                  </b-col>
+                </b-row>
+                <b-row v-if="balances[acc.addr]">
+                  <b-col>
+                    <b-tabs
+                      active-nav-item-class="font-weight-bold text-second"
+                    >
+                      <b-tab title="Assets">
+                        <div
+                          v-for="b,i in balances[acc.addr]"
+                          :key="i"
+                          class="d-flex justify-content-between align-items-center"
+                        >
+                          <div class="ml-25 font-weight-bolder text-uppercase">
+                            {{ formatDenom(b.denom) }}
+                          </div>
+                          <div class="d-flex flex-column text-right">
+                            <span class="font-weight-bold mb-0">{{ formatAmount(b.amount) }}</span>
+                            <span class="font-small-2 text-muted text-nowrap">${{ formatCurrency(b.amount, b.denom) }}</span>
+                          </div>
+                        </div>
+                      </b-tab>
+                    </b-tabs>
+                  </b-col>
+                </b-row>
+              </b-card-body>
+            </b-card>
+          </b-col>
+        </b-row>
+
+      </b-tab>
+    </b-tabs>
+
+    <b-card
+      v-b-modal.modal-center
+      class="addzone"
+    >
+      <feather-icon icon="PlusIcon" />
+      Import Accounts
+    </b-card>
+    <!-- modal vertical center -->
+    <b-modal
+      id="modal-center"
+      centered
+      size="lg"
+      title="Add Account"
+      hide-footer
+      hide-header-close
+      cancel-disabled
+      scrollable
+    >
+      <form-wizard-number />
+    </b-modal>
+
+  </div>
+</template>
+
+<script>
+import chainAPI from '@/libs/fetch'
+import {
+  BCard, BCardHeader, BCardTitle, BCardBody, VBModal, BRow, BCol, BTabs, BTab, BAvatar,
+} from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
+import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
+import {
+  formatTokenAmount, formatTokenDenom, getLocalAccounts, getLocalChains,
+} from '@/libs/data'
+import FormWizardNumber from './FormWizardNumber.vue'
+// import { SigningCosmosClient } from '@cosmjs/launchpad'
+
+export default {
+  components: {
+    BAvatar,
+    BCard,
+    BRow,
+    BCol,
+    BTabs,
+    BTab,
+    BCardHeader,
+    BCardBody,
+    BCardTitle,
+    FormWizardNumber,
+    FeatherIcon,
+  },
+  directives: {
+    'b-modal': VBModal,
+    Ripple,
+  },
+  data() {
+    return {
+      accounts: [],
+      balances: {},
+      ibcDenom: {},
+      quotes: {},
+    }
+  },
+  created() {
+    this.accounts = getLocalAccounts()
+    const chains = getLocalChains()
+    if (this.accounts) {
+      Object.keys(this.accounts).forEach(acc => {
+        this.accounts[acc].address.forEach(add => {
+          chainAPI.getBankBalance(chains[add.chain].api, add.addr).then(res => {
+            if (res && res.length > 0) {
+              this.$set(this.balances, add.addr, res)
+              res.forEach(token => {
+                let symbol
+                if (token.denom.startsWith('ibc')) {
+                  chainAPI.getIBCDenomTraceText(chains[add.chain].api, token.denom).then(denom => {
+                    this.$set(this.ibcDenom, token.denom, denom)
+                    symbol = formatTokenDenom(denom)
+                  })
+                } else {
+                  symbol = formatTokenDenom(token.denom)
+                }
+                if (symbol) {
+                  if (!this.quotes[symbol]) {
+                    chainAPI.fetchTokenQuote(symbol).then(quote => {
+                      this.$set(this.quotes, symbol, quote)
+                    })
+                  }
+                }
+              })
+            }
+          })
+        })
+      })
+    }
+  },
+  methods: {
+    formatDenom(v) {
+      const denom = (v.startsWith('ibc') ? this.ibcDenom[v] : v)
+      return formatTokenDenom(denom)
+    },
+    formatAmount(v) {
+      return formatTokenAmount(v)
+    },
+    formatCurrency(amount, denom) {
+      const qty = this.formatAmount(amount)
+      const d2 = this.formatDenom(denom)
+      const userCurrency = 'USD'
+      const quote = this.quotes[d2]
+      if (quote && quote.quote) {
+        const { price } = quote.quote[userCurrency]
+        return parseFloat((qty * price).toFixed(2))
+      }
+      return 0
+    },
+    formatBalance(v) {
+      if (v) {
+        const ret = v.map(x => this.formatCurrency(x.amount, x.denom)).reduce((t, c) => t + c)
+        return parseFloat(ret.toFixed(2))
+      }
+      return 0
+    },
+  },
+}
+</script>
+
+<style lang="css">
+.addzone {
+    border: 2px dashed #ced4da;
+    background: #fff;
+    border-radius: 6px;
+    cursor: pointer;
+    box-shadow: none;
+}
+.addzone :hover {
+    border: 2px dashed #7367F0;
+}
+
+</style>
diff --git a/src/views/UserAddressBook.vue b/src/views/UserAddressBook.vue
new file mode 100644
index 00000000..8c56444e
--- /dev/null
+++ b/src/views/UserAddressBook.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="" />
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/UserPortfolio.vue b/src/views/UserPortfolio.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/UserSetting.vue b/src/views/UserSetting.vue
new file mode 100644
index 00000000..8c56444e
--- /dev/null
+++ b/src/views/UserSetting.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="" />
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/yarn.lock b/yarn.lock
index aa5af979..00398a92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -950,6 +950,19 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
+"@cosmjs/launchpad@^0.25.6":
+  version "0.25.6"
+  resolved "https://registry.yarnpkg.com/@cosmjs/launchpad/-/launchpad-0.25.6.tgz#c75f5d21be57af55fcb892f929520fa97f2d5bcc"
+  integrity sha512-4Yhn4cX50UE6jZz/hWqKeeCmvrlrz0BBwOdYX/29k25FqP+oLAow1xKm6UxgYuuAq8Pg/bUvswxSqwegZJTb6g==
+  dependencies:
+    "@cosmjs/amino" "^0.25.6"
+    "@cosmjs/crypto" "^0.25.6"
+    "@cosmjs/encoding" "^0.25.6"
+    "@cosmjs/math" "^0.25.6"
+    "@cosmjs/utils" "^0.25.6"
+    axios "^0.21.1"
+    fast-deep-equal "^3.1.3"
+
 "@cosmjs/math@^0.25.6":
   version "0.25.6"
   resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.25.6.tgz#25c7b106aaded889a5b80784693caa9e654b0c28"
@@ -2304,7 +2317,7 @@ axios-mock-adapter@1.19.0:
     fast-deep-equal "^3.1.3"
     is-buffer "^2.0.3"
 
-axios@0.21.1:
+axios@0.21.1, axios@^0.21.1:
   version "0.21.1"
   resolved "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz"
   integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
@@ -11061,6 +11074,11 @@ vue-flatpickr-component@8.1.6:
   dependencies:
     flatpickr "^4.6.6"
 
+vue-flex-waterfall@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/vue-flex-waterfall/-/vue-flex-waterfall-1.0.7.tgz#843597024eb3f880a03b949baad1f6b4be9f68ff"
+  integrity sha512-YaxIUEvBQAOwBMastaJ8z5gFZFa+pZHHrpoTcZxxfCRZUdOxFBjLoyzCP9q+T8WlAhjeHD+Zsaeor9kKzRpccg==
+
 vue-form-wizard@0.8.4:
   version "0.8.4"
   resolved "https://registry.npmjs.org/vue-form-wizard/-/vue-form-wizard-0.8.4.tgz"