forked from LaconicNetwork/cosmos-explorer
finish withdraw and transfer
This commit is contained in:
liangping
@@ -84,6 +84,7 @@ export default {
|
||||
} else if (txhash.test(key)) {
|
||||
this.$router.push({ name: 'transaction', params: { chain: c.chain_name, hash: key } })
|
||||
} else if (addr.test(key)) {
|
||||
this.$router.push({ name: 'chain-account', params: { chain: c.chain_name, address: key } })
|
||||
// console.log('address', key)
|
||||
}
|
||||
}
|
||||
|
||||
+96
-1
@@ -5,14 +5,24 @@ import { sha256 } from '@cosmjs/crypto'
|
||||
// ledger
|
||||
import TransportWebBLE from '@ledgerhq/hw-transport-web-ble'
|
||||
import TransportWebUSB from '@ledgerhq/hw-transport-webusb'
|
||||
import { SigningStargateClient } from '@cosmjs/stargate'
|
||||
// import Cosmos from '@ledgerhq/hw-app-cosmos'
|
||||
import CosmosApp from 'ledger-cosmos-js'
|
||||
import { LedgerSigner } from '@cosmjs/ledger-amino'
|
||||
import {
|
||||
makeAuthInfoBytes, makeSignBytes, Registry,
|
||||
} from '@cosmjs/proto-signing'
|
||||
import { encodeSecp256k1Signature } from '@cosmjs/amino'
|
||||
import { Uint53 } from '@cosmjs/math'
|
||||
import { TxRaw } from '@cosmjs/stargate/build/codec/cosmos/tx/v1beta1/tx'
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
import duration from 'dayjs/plugin/duration'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import localeData from 'dayjs/plugin/localeData'
|
||||
|
||||
const COSMOS_PATH = [44, 118, 0, 0, 0]
|
||||
|
||||
dayjs.extend(localeData)
|
||||
dayjs.extend(duration)
|
||||
dayjs.extend(relativeTime)
|
||||
@@ -21,7 +31,87 @@ export async function connectLedger(transport = 'usb') {
|
||||
const trans = await transport === 'usb' ? TransportWebUSB.create() : TransportWebBLE.create()
|
||||
return new CosmosApp(trans)
|
||||
}
|
||||
const COSMOS_PATH = [44, 118, 0, 0, 0]
|
||||
|
||||
/* eslint-enable */
|
||||
function unharden(hdPath) {
|
||||
return hdPath.map(n => (n.isHardened() ? n.toNumber() - 2 ** 31 : n.toNumber()))
|
||||
}
|
||||
|
||||
function makeSignDoc(bodyBytes, authInfoBytes, chainId, accountNumber) {
|
||||
return {
|
||||
bodyBytes,
|
||||
authInfoBytes,
|
||||
chainId,
|
||||
accountNumber: Uint53.fromString(String(accountNumber)),
|
||||
}
|
||||
}
|
||||
|
||||
export async function signDirect(signer, signerAddress, messages, fee, memo, { accountNumber, sequence, chainId }) {
|
||||
// const accountFromSigner = (await this.signer.getAccounts()).find(account => account.address === signerAddress)
|
||||
// if (!accountFromSigner) {
|
||||
// throw new Error("Failed to retrieve account from signer");
|
||||
// }
|
||||
const accountFromSigner = await signer.getAddressAndPubKey(COSMOS_PATH, 'cosmos')
|
||||
if (!accountFromSigner) {
|
||||
throw new Error('Failed to retrieve account from signer')
|
||||
}
|
||||
const { pubkey } = accountFromSigner
|
||||
console.log('accout:', accountFromSigner, pubkey)
|
||||
const txBodyEncodeObject = {
|
||||
typeUrl: '/cosmos.tx.v1beta1.TxBody',
|
||||
value: {
|
||||
messages,
|
||||
memo,
|
||||
},
|
||||
}
|
||||
const txBodyBytes = new Registry().encode(txBodyEncodeObject)
|
||||
const gasLimit = Uint53.fromString(String(fee.gas))
|
||||
console.log('account from signer: ', txBodyBytes, gasLimit)
|
||||
const authInfoBytes = makeAuthInfoBytes([pubkey], fee.amount, gasLimit, sequence)
|
||||
console.log('authinfo: ', authInfoBytes, chainId, accountNumber)
|
||||
const signDoc = makeSignDoc(txBodyBytes, authInfoBytes, chainId, accountNumber)
|
||||
console.log('signdoc: ', signDoc, signer)
|
||||
// const { signature, signed } = await signer.signDirect(signerAddress, signDoc)
|
||||
const signBytes = makeSignBytes(signDoc)
|
||||
const hashedMessage = sha256(signBytes)
|
||||
const signature = await signer.sign(unharden(COSMOS_PATH), hashedMessage)
|
||||
const signatureBytes = new Uint8Array([...signature.r(32), ...signature.s(32)])
|
||||
const stdSignature = encodeSecp256k1Signature(pubkey, signatureBytes)
|
||||
|
||||
console.log('custom sign:', txBodyBytes, authInfoBytes, signDoc)
|
||||
return TxRaw.fromPartial({
|
||||
bodyBytes: txBodyBytes,
|
||||
authInfoBytes,
|
||||
signatures: [fromBase64(stdSignature)],
|
||||
})
|
||||
}
|
||||
|
||||
export async function sign(device, chainId, signerAddress, messages, fee, memo, signerData) {
|
||||
let transport
|
||||
let signer
|
||||
switch (device) {
|
||||
case 'ledgerBle':
|
||||
transport = await TransportWebBLE.create()
|
||||
signer = new LedgerSigner(transport)
|
||||
break
|
||||
case 'ledgerUSB':
|
||||
transport = await TransportWebUSB.create()
|
||||
signer = new LedgerSigner(transport)
|
||||
break
|
||||
case 'keplr':
|
||||
default:
|
||||
if (!window.getOfflineSigner || !window.keplr) {
|
||||
throw new Error('Please install keplr extension')
|
||||
}
|
||||
await window.keplr.enable(chainId)
|
||||
signer = window.getOfflineSignerOnlyAmino(chainId)
|
||||
}
|
||||
|
||||
// Ensure the address has some tokens to spend
|
||||
const client = await SigningStargateClient.offline(signer)
|
||||
return client.signAmino(signerAddress, messages, fee, memo, signerData)
|
||||
// return signDirect(signer, signerAddress, messages, fee, memo, signerData)
|
||||
}
|
||||
|
||||
export async function getLedgerAddress(transport = 'blu') {
|
||||
const trans = transport === 'usb' ? await TransportWebUSB.create() : await TransportWebBLE.create()
|
||||
@@ -51,6 +141,11 @@ export function toDuration(value) {
|
||||
return dayjs.duration(value).humanize()
|
||||
}
|
||||
|
||||
// unit(y M d h m s ms)
|
||||
export function timeIn(time, amount, unit = 's') {
|
||||
return dayjs().isAfter(dayjs(time).add(amount, unit))
|
||||
}
|
||||
|
||||
export function toDay(time, format = 'long') {
|
||||
if (format === 'long') {
|
||||
return dayjs(time).format('YYYY-MM-DD HH:mm')
|
||||
|
||||
+42
-7
@@ -1,6 +1,9 @@
|
||||
import fetch from 'node-fetch'
|
||||
// import axios from 'axios'
|
||||
import store from '@/store'
|
||||
import compareVersions from 'compare-versions'
|
||||
import { TxRaw } from '@cosmjs/stargate/build/codec/cosmos/tx/v1beta1/tx'
|
||||
import { toBase64 } from '@cosmjs/encoding'
|
||||
import {
|
||||
Proposal, ProposalTally, Proposer, StakingPool, Votes, Deposit,
|
||||
Validator, StakingParameters, Block, ValidatorDistribution, StakingDelegation, WrapStdTx,
|
||||
@@ -40,8 +43,8 @@ const chainAPI = class ChainFetch {
|
||||
return true
|
||||
}
|
||||
|
||||
async getLatestBlock() {
|
||||
return this.get('/blocks/latest').then(data => Block.create(data))
|
||||
async getLatestBlock(config = null) {
|
||||
return this.get('/blocks/latest', config).then(data => Block.create(data))
|
||||
}
|
||||
|
||||
async getBlockByHeight(height) {
|
||||
@@ -183,9 +186,11 @@ const chainAPI = class ChainFetch {
|
||||
})
|
||||
}
|
||||
|
||||
async get(url) {
|
||||
this.getSelectedConfig()
|
||||
const ret = await fetch(this.config.api + url).then(response => response.json())
|
||||
async get(url, config = null) {
|
||||
if (!config) {
|
||||
this.getSelectedConfig()
|
||||
}
|
||||
const ret = await fetch((config ? config.api : this.config.api) + url).then(response => response.json())
|
||||
return ret
|
||||
}
|
||||
|
||||
@@ -194,8 +199,8 @@ const chainAPI = class ChainFetch {
|
||||
return ret
|
||||
}
|
||||
|
||||
async getAuthAccount(address) {
|
||||
return this.get('/auth/accounts/'.concat(address)).then(data => commonProcess(data))
|
||||
async getAuthAccount(address, config = null) {
|
||||
return this.get('/auth/accounts/'.concat(address), config).then(data => commonProcess(data))
|
||||
}
|
||||
|
||||
async getBankAccountBalance(address) {
|
||||
@@ -245,6 +250,36 @@ const chainAPI = class ChainFetch {
|
||||
static async fetchTokenQuote(symbol) {
|
||||
return ChainFetch.fetchCoinMarketCap(`/quote/${symbol}`)
|
||||
}
|
||||
|
||||
async broadcastTx(bodyBytes, config = null) {
|
||||
const txString = toBase64(TxRaw.encode(bodyBytes).finish())
|
||||
const txRaw = {
|
||||
tx_bytes: txString,
|
||||
mode: 'BROADCAST_MODE_SYNC',
|
||||
}
|
||||
return this.post('/cosmos/tx/v1beta1/txs', txRaw, config)
|
||||
}
|
||||
|
||||
async post(url = '', data = {}, config = null) {
|
||||
if (!config) {
|
||||
this.getSelectedConfig()
|
||||
}
|
||||
// Default options are marked with *
|
||||
const response = await fetch((config ? config.api : this.config.api) + url, {
|
||||
method: 'POST', // *GET, POST, PUT, DELETE, etc.
|
||||
// mode: 'cors', // no-cors, *cors, same-origin
|
||||
// credentials: 'same-origin', // redirect: 'follow', // manual, *follow, error
|
||||
// referrerPolicy: 'origin', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
Accept: '*/*',
|
||||
'Accept-Encoding': 'gzip, deflate, br',
|
||||
},
|
||||
body: JSON.stringify(data), // body data type must match "Content-Type" header
|
||||
})
|
||||
// const response = axios.post((config ? config.api : this.config.api) + url, data)
|
||||
return response.json() // parses JSON response into native JavaScript objects
|
||||
}
|
||||
}
|
||||
|
||||
export default chainAPI
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import {
|
||||
makeAuthInfoBytes, makeSignDoc, Registry,
|
||||
// makeSignBytes,
|
||||
} from '@cosmjs/proto-signing'
|
||||
|
||||
export default class Client {
|
||||
async signDirect(signerAddress, messages, fee, memo, { accountNumber, sequence, chainId }) {
|
||||
// const accountFromSigner = (await this.signer.getAccounts()).find(account => account.address === signerAddress)
|
||||
// if (!accountFromSigner) {
|
||||
// throw new Error('Failed to retrieve account from signer')
|
||||
// }
|
||||
const pubkey = ''
|
||||
const txBodyEncodeObject = {
|
||||
typeUrl: '/cosmos.tx.v1beta1.TxBody',
|
||||
value: {
|
||||
messages,
|
||||
memo,
|
||||
},
|
||||
}
|
||||
const txBodyBytes = new Registry().encode(txBodyEncodeObject)
|
||||
const gasLimit = 1
|
||||
const authInfoBytes = makeAuthInfoBytes([pubkey], fee.amount, gasLimit, sequence)
|
||||
const signDoc = makeSignDoc(txBodyBytes, authInfoBytes, chainId, accountNumber)
|
||||
|
||||
const { signature, signed } = await this.signer.signDirect(signerAddress, signDoc)
|
||||
return tx_4.TxRaw.fromPartial({
|
||||
bodyBytes: signed.bodyBytes,
|
||||
authInfoBytes: signed.authInfoBytes,
|
||||
signatures: [encoding_1.fromBase64(signature.signature)],
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-modal
|
||||
id="transfer-window"
|
||||
centered
|
||||
size="md"
|
||||
title="Transfer Tokens"
|
||||
hide-header-close
|
||||
scrollable
|
||||
@hidden="resetModal"
|
||||
@ok="handleOk"
|
||||
@show="loadBalance"
|
||||
>
|
||||
<validation-observer ref="simpleRules">
|
||||
<b-form>
|
||||
<b-row>
|
||||
<b-col v-if="account">
|
||||
<b-form-group
|
||||
label="Sender"
|
||||
label-for="Account"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-input-group-prepend is-text>
|
||||
<b-avatar
|
||||
:src="account.logo"
|
||||
size="18"
|
||||
variant="light-primary"
|
||||
rounded
|
||||
/>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
:value="account.addr"
|
||||
readonly
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Recipient"
|
||||
label-for="Recipient"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="recipient"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-form-input
|
||||
id="Recipient"
|
||||
v-model="recipient"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
/>
|
||||
<!-- <b-input-group-append is-text>
|
||||
<b-avatar
|
||||
src="BookIcon"
|
||||
size="18"
|
||||
variant="light-primary"
|
||||
rounded
|
||||
/>
|
||||
</b-input-group-append> -->
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Available Token"
|
||||
label-for="Token"
|
||||
>
|
||||
<validation-provider
|
||||
#default="{ errors }"
|
||||
rules="required"
|
||||
name="Token"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="token"
|
||||
>
|
||||
<b-form-select-option
|
||||
v-for="item in balance"
|
||||
:key="item.denom"
|
||||
:value="item.denom"
|
||||
>
|
||||
{{ format(item) }}
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Amount"
|
||||
label-for="Amount"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required|regex:^([0-9\.]+)$"
|
||||
name="amount"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-form-input
|
||||
id="Amount"
|
||||
v-model="amount"
|
||||
:state="errors.length > 0 ? false:null"
|
||||
placeholder="Input a number"
|
||||
type="number"
|
||||
/>
|
||||
<b-input-group-append is-text>
|
||||
MAX
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Fee"
|
||||
label-for="Fee"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
name="fee"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-form-input v-model="fee" />
|
||||
<b-form-select
|
||||
v-model="feeDenom"
|
||||
>
|
||||
<b-form-select-option
|
||||
v-for="item in feeDenoms"
|
||||
:key="item.denom"
|
||||
:value="item.denom"
|
||||
>
|
||||
{{ item.denom }}
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
</b-input-group-prepend></b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Memo"
|
||||
label-for="Memo"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="memo"
|
||||
>
|
||||
<b-form-input
|
||||
id="Memo"
|
||||
v-model="memo"
|
||||
max="2"
|
||||
/>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Wallet"
|
||||
label-for="wallet"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
name="wallet"
|
||||
>
|
||||
<b-form-radio-group
|
||||
v-model="wallet"
|
||||
stacked
|
||||
class="demo-inline-spacing"
|
||||
>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="keplr"
|
||||
class="mb-1 mt-1"
|
||||
>
|
||||
Keplr
|
||||
</b-form-radio>
|
||||
<!-- <b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerUSB"
|
||||
class="mb-1 mt-1"
|
||||
disabled
|
||||
>
|
||||
Ledger (USB)
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerBle"
|
||||
class="mb-1 mt-1"
|
||||
disabled
|
||||
>
|
||||
Ledger (Bluetooth)
|
||||
</b-form-radio> -->
|
||||
</b-form-radio-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
</validation-observer>
|
||||
{{ error }}
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate'
|
||||
import {
|
||||
BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
|
||||
BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend,
|
||||
} from 'bootstrap-vue'
|
||||
import {
|
||||
required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
|
||||
} from '@validations'
|
||||
import {
|
||||
formatToken, getLocalAccounts, getLocalChains, sign, timeIn,
|
||||
} from '@/libs/data'
|
||||
import chainAPI from '@/libs/fetch'
|
||||
import { Cosmos } from '@cosmostation/cosmosjs'
|
||||
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
|
||||
|
||||
export default {
|
||||
name: 'TransforDialogue',
|
||||
components: {
|
||||
BModal,
|
||||
BRow,
|
||||
BCol,
|
||||
BForm,
|
||||
BInputGroup,
|
||||
BInputGroupAppend,
|
||||
BInputGroupPrepend,
|
||||
BFormInput,
|
||||
BAvatar,
|
||||
BFormGroup,
|
||||
BFormSelect,
|
||||
BFormSelectOption,
|
||||
BFormRadioGroup,
|
||||
BFormRadio,
|
||||
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
// eslint-disable-next-line vue/no-unused-components
|
||||
ToastificationContent,
|
||||
},
|
||||
props: {
|
||||
address: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chainId: '',
|
||||
selectedChain: '',
|
||||
balance: [],
|
||||
token: '',
|
||||
amount: null,
|
||||
memo: '',
|
||||
recipient: null,
|
||||
fee: 800,
|
||||
feeDenom: '',
|
||||
wallet: 'keplr',
|
||||
error: null,
|
||||
sequence: 1,
|
||||
accountNumber: 0,
|
||||
|
||||
required,
|
||||
password,
|
||||
email,
|
||||
min,
|
||||
integer,
|
||||
url,
|
||||
alpha,
|
||||
between,
|
||||
digits,
|
||||
length,
|
||||
alphaDash,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
feeDenoms() {
|
||||
return this.balance.filter(item => !item.denom.startsWith('ibc'))
|
||||
},
|
||||
account() {
|
||||
// if (accounts && accounts[this.name]) {
|
||||
// const config = accounts[this.name]
|
||||
// const addr = config.address.find(x => x.addr === this.address)
|
||||
// if (addr) return addr
|
||||
// }
|
||||
return this.computeAccount()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// console.log('address: ', this.address)
|
||||
},
|
||||
methods: {
|
||||
computeAccount() {
|
||||
const accounts = getLocalAccounts()
|
||||
const chains = getLocalChains()
|
||||
const values = Object.values(accounts)
|
||||
for (let i = 0; i < values.length; i += 1) {
|
||||
const addr = values[i].address.find(x => x.addr === this.address)
|
||||
if (addr) {
|
||||
this.selectedChain = chains[addr.chain]
|
||||
return addr
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
loadBalance() {
|
||||
if (this.address) {
|
||||
chainAPI.getBankBalance(this.selectedChain.api, this.address).then(res => {
|
||||
if (res && res.length > 0) {
|
||||
this.balance = res
|
||||
this.token = this.balance[0].denom
|
||||
this.feeDenom = this.balance[0].denom
|
||||
}
|
||||
})
|
||||
this.$http.getLatestBlock(this.selectedChain).then(ret => {
|
||||
this.chainId = ret.block.header.chain_id
|
||||
const notSynced = timeIn(ret.block.header.time, 10, 'm')
|
||||
if (notSynced) {
|
||||
this.error = 'Client is not synced or blockchain is halted'
|
||||
} else {
|
||||
this.error = null
|
||||
}
|
||||
})
|
||||
this.$http.getAuthAccount(this.address, this.selectedChain).then(ret => {
|
||||
if (ret.value.base_vesting_account) {
|
||||
this.accountNumber = ret.value.base_vesting_account.base_account.account_number
|
||||
this.sequence = ret.value.base_vesting_account.base_account.sequence
|
||||
if (!this.sequence) this.sequence = 0
|
||||
} else {
|
||||
this.accountNumber = ret.value.account_number
|
||||
this.sequence = ret.value.sequence ? ret.value.sequence : 0
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleOk(bvModalEvt) {
|
||||
// console.log('send')
|
||||
// Prevent modal from closing
|
||||
bvModalEvt.preventDefault()
|
||||
// Trigger submit handler
|
||||
// this.handleSubmit()
|
||||
this.send().then(ret => {
|
||||
// console.log(ret)
|
||||
this.error = ret
|
||||
})
|
||||
},
|
||||
resetModal() {
|
||||
this.feeDenom = ''
|
||||
this.error = null
|
||||
},
|
||||
format(v) {
|
||||
return formatToken(v)
|
||||
},
|
||||
async sendCosmos() {
|
||||
const cosmos = new Cosmos(this.selectedChain.api, this.chainId)
|
||||
cosmos.getAccounts()
|
||||
},
|
||||
async send() {
|
||||
const txMsgs = [
|
||||
{
|
||||
typeUrl: '/cosmos.bank.v1beta1.MsgSend',
|
||||
value: {
|
||||
fromAddress: this.address,
|
||||
toAddress: this.recipient,
|
||||
amount: [
|
||||
{
|
||||
amount: String((Number(this.amount) * 1000000).toFixed()),
|
||||
denom: this.token,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const txFee = {
|
||||
amount: [
|
||||
{
|
||||
amount: this.fee,
|
||||
denom: this.feeDenom,
|
||||
},
|
||||
],
|
||||
gas: '200000',
|
||||
}
|
||||
|
||||
const signerData = {
|
||||
accountNumber: this.accountNumber,
|
||||
sequence: this.sequence,
|
||||
chainId: this.chainId,
|
||||
}
|
||||
|
||||
console.log('tx:', txMsgs)
|
||||
|
||||
sign(
|
||||
this.wallet,
|
||||
this.chainId,
|
||||
this.address,
|
||||
txMsgs,
|
||||
txFee,
|
||||
this.memo,
|
||||
signerData,
|
||||
).then((bodyBytes, s) => {
|
||||
console.log('signed: ', bodyBytes, s)
|
||||
this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
|
||||
console.log(res)
|
||||
this.$bvModal.hide('transfer-window')
|
||||
this.$toast({
|
||||
component: ToastificationContent,
|
||||
props: {
|
||||
title: 'Transaction sent!',
|
||||
icon: 'EditIcon',
|
||||
variant: 'success',
|
||||
},
|
||||
})
|
||||
}).catch(e => {
|
||||
this.error = e
|
||||
})
|
||||
}).catch(e => {
|
||||
this.error = e
|
||||
})
|
||||
// Send tokens
|
||||
// return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
|
||||
return ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-modal
|
||||
id="withdraw-window"
|
||||
centered
|
||||
size="md"
|
||||
title="Withdraw Rewards"
|
||||
hide-header-close
|
||||
scrollable
|
||||
@hidden="resetModal"
|
||||
@ok="handleOk"
|
||||
@show="loadBalance"
|
||||
>
|
||||
<validation-observer ref="simpleRules">
|
||||
<b-form>
|
||||
<b-row>
|
||||
<b-col v-if="account">
|
||||
<b-form-group
|
||||
label="Sender"
|
||||
label-for="Account"
|
||||
>
|
||||
<b-input-group class="mb-25">
|
||||
<b-input-group-prepend is-text>
|
||||
<b-avatar
|
||||
:src="account.logo"
|
||||
size="18"
|
||||
variant="light-primary"
|
||||
rounded
|
||||
/>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
:value="account.addr"
|
||||
readonly
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Fee"
|
||||
label-for="Fee"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
name="fee"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-form-input v-model="fee" />
|
||||
<b-form-select
|
||||
v-model="feeDenom"
|
||||
>
|
||||
<b-form-select-option
|
||||
v-for="item in feeDenoms"
|
||||
:key="item.denom"
|
||||
:value="item.denom"
|
||||
>
|
||||
{{ item.denom }}
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
</b-input-group-prepend></b-input-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Memo"
|
||||
label-for="Memo"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="memo"
|
||||
>
|
||||
<b-form-input
|
||||
id="Memo"
|
||||
v-model="memo"
|
||||
max="2"
|
||||
/>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label="Wallet"
|
||||
label-for="wallet"
|
||||
>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
rules="required"
|
||||
name="wallet"
|
||||
>
|
||||
<b-form-radio-group
|
||||
v-model="wallet"
|
||||
stacked
|
||||
class="demo-inline-spacing"
|
||||
>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="keplr"
|
||||
class="mb-1 mt-1"
|
||||
>
|
||||
Keplr
|
||||
</b-form-radio>
|
||||
<!-- <b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerUSB"
|
||||
class="mb-1 mt-1"
|
||||
disabled
|
||||
>
|
||||
Ledger (USB)
|
||||
</b-form-radio>
|
||||
<b-form-radio
|
||||
v-model="wallet"
|
||||
name="wallet"
|
||||
value="ledgerBle"
|
||||
class="mb-1 mt-1"
|
||||
disabled
|
||||
>
|
||||
Ledger (Bluetooth)
|
||||
</b-form-radio> -->
|
||||
</b-form-radio-group>
|
||||
<small class="text-danger">{{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
</validation-observer>
|
||||
{{ error }}
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate'
|
||||
import {
|
||||
BModal, BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
|
||||
BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend,
|
||||
} from 'bootstrap-vue'
|
||||
import {
|
||||
required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
|
||||
} from '@validations'
|
||||
import {
|
||||
formatToken, getLocalAccounts, getLocalChains, sign, timeIn,
|
||||
} from '@/libs/data'
|
||||
import chainAPI from '@/libs/fetch'
|
||||
|
||||
export default {
|
||||
name: 'TransforDialogue',
|
||||
components: {
|
||||
BModal,
|
||||
BRow,
|
||||
BCol,
|
||||
BForm,
|
||||
BInputGroup,
|
||||
BInputGroupPrepend,
|
||||
BFormInput,
|
||||
BAvatar,
|
||||
BFormGroup,
|
||||
BFormSelect,
|
||||
BFormSelectOption,
|
||||
BFormRadioGroup,
|
||||
BFormRadio,
|
||||
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
},
|
||||
props: {
|
||||
address: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chainId: '',
|
||||
selectedChain: '',
|
||||
balance: [],
|
||||
delegations: [],
|
||||
memo: '',
|
||||
fee: 800,
|
||||
feeDenom: '',
|
||||
wallet: 'keplr',
|
||||
error: null,
|
||||
sequence: 1,
|
||||
accountNumber: 0,
|
||||
|
||||
required,
|
||||
password,
|
||||
email,
|
||||
min,
|
||||
integer,
|
||||
url,
|
||||
alpha,
|
||||
between,
|
||||
digits,
|
||||
length,
|
||||
alphaDash,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
feeDenoms() {
|
||||
return this.balance.filter(item => !item.denom.startsWith('ibc'))
|
||||
},
|
||||
account() {
|
||||
// if (accounts && accounts[this.name]) {
|
||||
// const config = accounts[this.name]
|
||||
// const addr = config.address.find(x => x.addr === this.address)
|
||||
// if (addr) return addr
|
||||
// }
|
||||
return this.computeAccount()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// console.log('address: ', this.address)
|
||||
},
|
||||
methods: {
|
||||
computeAccount() {
|
||||
const accounts = getLocalAccounts()
|
||||
const chains = getLocalChains()
|
||||
const values = Object.values(accounts)
|
||||
for (let i = 0; i < values.length; i += 1) {
|
||||
const addr = values[i].address.find(x => x.addr === this.address)
|
||||
if (addr) {
|
||||
this.selectedChain = chains[addr.chain]
|
||||
return addr
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
loadBalance() {
|
||||
if (this.address) {
|
||||
chainAPI.getBankBalance(this.selectedChain.api, this.address).then(res => {
|
||||
if (res && res.length > 0) {
|
||||
this.balance = res
|
||||
const token = this.balance.find(i => !i.denom.startsWith('ibc'))
|
||||
if (token) this.feeDenom = token.denom
|
||||
}
|
||||
})
|
||||
this.$http.getLatestBlock(this.selectedChain).then(ret => {
|
||||
this.chainId = ret.block.header.chain_id
|
||||
const notSynced = timeIn(ret.block.header.time, 10, 'm')
|
||||
if (notSynced) {
|
||||
this.error = 'Client is not synced or blockchain is halted'
|
||||
} else {
|
||||
this.error = null
|
||||
}
|
||||
})
|
||||
this.$http.getAuthAccount(this.address, this.selectedChain).then(ret => {
|
||||
if (ret.value.base_vesting_account) {
|
||||
this.accountNumber = ret.value.base_vesting_account.base_account.account_number
|
||||
this.sequence = ret.value.base_vesting_account.base_account.sequence
|
||||
if (!this.sequence) this.sequence = 0
|
||||
} else {
|
||||
this.accountNumber = ret.value.account_number
|
||||
this.sequence = ret.value.sequence ? ret.value.sequence : 0
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$http.getStakingDelegations(this.address).then(res => {
|
||||
this.delegations = res.delegation_responses
|
||||
})
|
||||
},
|
||||
handleOk(bvModalEvt) {
|
||||
// console.log('send')
|
||||
// Prevent modal from closing
|
||||
bvModalEvt.preventDefault()
|
||||
// Trigger submit handler
|
||||
// this.handleSubmit()
|
||||
this.sendTx().then(ret => {
|
||||
// console.log(ret)
|
||||
this.error = ret
|
||||
})
|
||||
},
|
||||
resetModal() {
|
||||
this.feeDenom = ''
|
||||
this.error = null
|
||||
},
|
||||
format(v) {
|
||||
return formatToken(v)
|
||||
},
|
||||
async sendTx() {
|
||||
const txMsgs = []
|
||||
this.delegations.forEach(i => {
|
||||
console.log(i.delegation.validator_address)
|
||||
txMsgs.push({
|
||||
typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
|
||||
value: {
|
||||
delegatorAddress: this.address,
|
||||
validatorAddress: i.delegation.validator_address,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
if (txMsgs.length === 0) {
|
||||
this.error = 'No delegation found'
|
||||
return ''
|
||||
}
|
||||
if (!this.accountNumber) {
|
||||
this.error = 'Account number should not be empty!'
|
||||
return ''
|
||||
}
|
||||
|
||||
const txFee = {
|
||||
amount: [
|
||||
{
|
||||
amount: this.fee,
|
||||
denom: this.feeDenom,
|
||||
},
|
||||
],
|
||||
gas: '200000',
|
||||
}
|
||||
|
||||
const signerData = {
|
||||
accountNumber: this.accountNumber,
|
||||
sequence: this.sequence,
|
||||
chainId: this.chainId,
|
||||
}
|
||||
|
||||
console.log('tx:', txMsgs, txFee, signerData)
|
||||
|
||||
sign(
|
||||
this.wallet,
|
||||
this.chainId,
|
||||
this.address,
|
||||
txMsgs,
|
||||
txFee,
|
||||
this.memo,
|
||||
signerData,
|
||||
).then((bodyBytes, s) => {
|
||||
console.log('signed: ', bodyBytes, s)
|
||||
this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
|
||||
console.log(res)
|
||||
}).catch(e => {
|
||||
this.error = e
|
||||
})
|
||||
}).catch(e => {
|
||||
this.error = e
|
||||
})
|
||||
// Send tokens
|
||||
// return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
|
||||
return ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -38,6 +38,7 @@
|
||||
<b-card-header class="pt-0 pl-0 pr-0">
|
||||
<b-card-title>Assets</b-card-title>
|
||||
<b-button
|
||||
v-b-modal.transfer-window
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>
|
||||
@@ -103,6 +104,7 @@
|
||||
<b-card-header class="pt-0 pl-0 pr-0">
|
||||
<b-card-title>Delegation</b-card-title>
|
||||
<b-button
|
||||
v-b-modal.withdraw-window
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>
|
||||
@@ -169,7 +171,7 @@
|
||||
v-for="p, index in account.value.vesting_periods"
|
||||
:key="index"
|
||||
>
|
||||
<td>{{ p.length }} - {{ formatLength(p.length) }} </td><td>{{ formatToken(p.amount) }}</td>
|
||||
<td><small>{{ p.length }} <br>{{ formatLength(p.length) }}</small> </td><td>{{ formatToken(p.amount) }}</td>
|
||||
</b-tr>
|
||||
</b-table-simple>
|
||||
</b-td>
|
||||
@@ -210,12 +212,16 @@
|
||||
placement="bottom"
|
||||
>
|
||||
<vue-qr :text="address" />
|
||||
</b-popover></div>
|
||||
</b-popover>
|
||||
|
||||
<operation-transfer-component :address="address" />
|
||||
<operation-withdraw-component :address="address" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BCard, BAvatar, BPopover, BTable, BRow, BCol, BTableSimple, BTr, BTd, BTbody, BCardHeader, BCardTitle, BButton, BCardBody,
|
||||
BCard, BAvatar, BPopover, BTable, BRow, BCol, BTableSimple, BTr, BTd, BTbody, BCardHeader, BCardTitle, BButton, BCardBody, VBModal,
|
||||
} from 'bootstrap-vue'
|
||||
import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
|
||||
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
|
||||
@@ -228,6 +234,8 @@ import {
|
||||
import { $themeColors } from '@themeConfig'
|
||||
import ObjectFieldComponent from './ObjectFieldComponent.vue'
|
||||
import ChartjsComponentDoughnutChart from './ChartjsComponentDoughnutChart.vue'
|
||||
import OperationTransferComponent from './OperationTransferComponent.vue'
|
||||
import OperationWithdrawComponent from './OperationWithdrawComponent.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -251,8 +259,11 @@ export default {
|
||||
ToastificationContent,
|
||||
ObjectFieldComponent,
|
||||
ChartjsComponentDoughnutChart,
|
||||
OperationTransferComponent,
|
||||
OperationWithdrawComponent,
|
||||
},
|
||||
directives: {
|
||||
'b-modal': VBModal,
|
||||
Ripple,
|
||||
},
|
||||
data() {
|
||||
|
||||
+54
-39
@@ -2,13 +2,12 @@
|
||||
<div class="text-center">
|
||||
|
||||
<b-tabs
|
||||
v-for="item,index in accounts"
|
||||
:key="index"
|
||||
pills
|
||||
active-nav-item-class="font-weight-bolder"
|
||||
>
|
||||
<b-tab
|
||||
v-for="item,index in accounts"
|
||||
:key="index"
|
||||
>
|
||||
<b-tab>
|
||||
<template #title>
|
||||
<feather-icon icon="UserIcon" />
|
||||
<span>{{ item.name }}</span>
|
||||
@@ -48,6 +47,8 @@
|
||||
</template>
|
||||
<b-dropdown-item
|
||||
v-if="balances[acc.addr]"
|
||||
v-b-modal.transfer-window
|
||||
@click="transfer(acc.addr)"
|
||||
>
|
||||
<feather-icon icon="SendIcon" /> Transfer
|
||||
</b-dropdown-item>
|
||||
@@ -116,14 +117,14 @@
|
||||
class="addzone"
|
||||
>
|
||||
<feather-icon icon="PlusIcon" />
|
||||
Import Accounts
|
||||
Connect Wallet
|
||||
</b-card>
|
||||
<!-- modal add accout -->
|
||||
<b-modal
|
||||
id="add-account"
|
||||
centered
|
||||
size="lg"
|
||||
title="Add Account"
|
||||
title="Connect Wallet"
|
||||
hide-footer
|
||||
hide-header-close
|
||||
cancel-disabled
|
||||
@@ -131,7 +132,9 @@
|
||||
>
|
||||
<user-account-import-address />
|
||||
</b-modal>
|
||||
|
||||
<operation-transfer-component
|
||||
:address.sync="selectedAddress"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -146,6 +149,7 @@ import {
|
||||
formatTokenAmount, formatTokenDenom, getLocalAccounts, getLocalChains,
|
||||
} from '@/libs/data'
|
||||
import UserAccountImportAddress from './UserAccountImportAddress.vue'
|
||||
import OperationTransferComponent from './OperationTransferComponent.vue'
|
||||
// import { SigningCosmosClient } from '@cosmjs/launchpad'
|
||||
|
||||
export default {
|
||||
@@ -163,6 +167,7 @@ export default {
|
||||
BDropdownItem,
|
||||
UserAccountImportAddress,
|
||||
FeatherIcon,
|
||||
OperationTransferComponent,
|
||||
},
|
||||
directives: {
|
||||
'b-modal': VBModal,
|
||||
@@ -170,6 +175,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedAddress: '',
|
||||
selectedName: '',
|
||||
transferWindow: false,
|
||||
accounts: [],
|
||||
balances: {},
|
||||
ibcDenom: {},
|
||||
@@ -177,41 +185,48 @@ export default {
|
||||
}
|
||||
},
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
transfer(addr) {
|
||||
this.selectedAddress = addr
|
||||
console.log(this.selectedAddress)
|
||||
},
|
||||
completeAdd() {
|
||||
this.$set(this, 'accounts', getLocalAccounts())
|
||||
this.init()
|
||||
this.$bvModal.hide('add-account')
|
||||
},
|
||||
formatDenom(v) {
|
||||
|
||||
Reference in New Issue
Block a user