forked from cerc-io/cosmos-explorer
finish account
This commit is contained in:
parent
20a1ea7ca0
commit
fea3980009
@ -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",
|
||||
|
@ -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
|
||||
},
|
||||
},
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
|
315
src/views/FormWizardNumber.vue
Normal file
315
src/views/FormWizardNumber.vue
Normal file
@ -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>
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<b-card v-if="assets">
|
||||
<b-card-title>
|
||||
Onchain Assets
|
||||
Assets
|
||||
</b-card-title>
|
||||
<b-table
|
||||
:items="assets"
|
||||
|
227
src/views/UserAccounts.vue
Normal file
227
src/views/UserAccounts.vue
Normal file
@ -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>
|
11
src/views/UserAddressBook.vue
Normal file
11
src/views/UserAddressBook.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
0
src/views/UserPortfolio.vue
Normal file
0
src/views/UserPortfolio.vue
Normal file
11
src/views/UserSetting.vue
Normal file
11
src/views/UserSetting.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
20
yarn.lock
20
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"
|
||||
|
Loading…
Reference in New Issue
Block a user