-const path = require("path");
-const execa = require("execa");
-const webpack = require("webpack");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const WebpackAutoInject = require("webpack-auto-inject-version");
-const ChromeReloadPlugin = require("wcer");
-const { resolve, page, assetsPath } = require("./util");
+const path = require('path')
+const execa = require('execa')
+const webpack = require('webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const WebpackAutoInject = require('webpack-auto-inject-version')
+const ChromeReloadPlugin = require('wcer')
+const { resolve, page, assetsPath } = require('./util')
-var gitHash = execa.sync("git", ["rev-parse", "--short", "HEAD"]).stdout;
-console.log("gitHash:", gitHash);
+var gitHash = execa.sync('git', ['rev-parse', '--short', 'HEAD']).stdout
+console.log('gitHash:', gitHash)
module.exports = {
entry: {
- popup: resolve("src/popup"),
- prompt: resolve("src/prompt"),
- options: resolve("src/options"),
- content: resolve("src/content"),
- background: resolve("src/background"),
- inject: resolve("src/content/inject")
+ popup: resolve('src/popup.js'),
+ prompt: resolve('src/prompt.js'),
+ content: resolve('src/content.js'),
+ inject: resolve('src/inject.js'),
+ background: resolve('src/background.js')
},
output: {
- path: resolve("dist"),
- publicPath: "/",
- filename: "js/[name].js",
- chunkFilename: "js/[name].js"
+ path: resolve('dist'),
+ publicPath: '/',
+ filename: 'js/[name].js',
+ chunkFilename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.css$/,
- use: ["vue-style-loader", "css-loader"]
+ use: ['vue-style-loader', 'css-loader']
},
{
test: /\.scss$/,
- use: ["vue-style-loader", "css-loader", "sass-loader"]
+ use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.sass$/,
- use: ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"]
+ use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
},
{
test: /\.vue$/,
- loader: "vue-loader",
+ loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
- scss: ["vue-style-loader", "css-loader", "sass-loader"],
+ scss: ['vue-style-loader', 'css-loader', 'sass-loader'],
sass: [
- "vue-style-loader",
- "css-loader",
- "sass-loader?indentedSyntax"
+ 'vue-style-loader',
+ 'css-loader',
+ 'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
},
{
test: /\.js$/,
- loader: "babel-loader",
+ loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: "url-loader",
+ loader: 'url-loader',
options: {
limit: 10000,
- name: assetsPath("img/[name].[hash:7].[ext]")
+ name: assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
- loader: "url-loader",
+ loader: 'url-loader',
options: {
limit: 10000,
- name: assetsPath("media/[name].[hash:7].[ext]")
+ name: assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: "url-loader",
+ loader: 'url-loader',
options: {
limit: 10000,
- name: assetsPath("fonts/[name].[hash:7].[ext]")
+ name: assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
resolve: {
alias: {
- vue$: "vue/dist/vue.esm.js",
- "@": resolve("src")
+ vue$: 'vue/dist/vue.esm.js',
+ '@': resolve('src')
},
- extensions: ["*", ".js", ".vue", ".json"]
+ extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
page({
- title: "popup title",
- name: "popup",
- chunks: ["popup"]
+ title: 'popup title',
+ name: 'popup',
+ chunks: ['popup']
}),
page({
- title: "options title",
- name: "options",
- chunks: ["options"]
+ title: 'options title',
+ name: 'options',
+ chunks: ['options']
}),
page({
- title: "转账",
- name: "prompt",
- chunks: ["prompt"]
+ title: '转账',
+ name: 'prompt',
+ chunks: ['prompt']
}),
new CopyWebpackPlugin([
{
- from: resolve("static")
+ from: resolve('static')
}
]),
new ChromeReloadPlugin({
port: 23333,
- manifest: resolve("src/manifest.js")
+ manifest: resolve('src/manifest.js')
}),
new webpack.DefinePlugin({
- "version.hash": JSON.stringify(gitHash)
+ 'version.hash': JSON.stringify(gitHash)
}),
new WebpackAutoInject({
PACKAGE_JSON_PATH: './package.json',
performance: {
hints: false
}
-};
+}
{
"name": "chrome-extension-wallet",
- "version": "0.3.0",
+ "version": "0.4.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz",
"integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg=="
},
+ "aes-oop": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/aes-oop/-/aes-oop-1.0.4.tgz",
+ "integrity": "sha512-bUZIzuZg2PoYoHS6SeuLyvEmDlhOYvRVvJ23MA8j+RC+lrf4Oep7v6xmwfdZytrDAeesMhQn50kf7NQ9PgxjgA==",
+ "requires": {
+ "sjcl": "1.0.8"
+ }
+ },
"ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
},
"ansi-escapes": {
"version": "3.1.0",
- "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
+ "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
"integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw=="
},
"ansi-html": {
}
}
},
+ "extension-streams": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/extension-streams/-/extension-streams-1.0.7.tgz",
+ "integrity": "sha512-AFPvzPXvdhEbbSaI0gwdq4ODmE4/yRVJsgbLsdRvk3gQOzDy2Pp9q8uC5dvJfcyCW2SSV9Uhwq6d23NZ4tflyw==",
+ "requires": {
+ "aes-oop": "1.0.4"
+ }
+ },
"external-editor": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
},
+ "sjcl": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/sjcl/-/sjcl-1.0.8.tgz",
+ "integrity": "sha512-LzIjEQ0S0DpIgnxMEayM1rq9aGwGRG4OnZhCdjx7glTaJtf4zRfpg87ImfjSJjoW9vKpagd82McDOwbRT5kQKQ=="
+ },
"slash": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
"babel-preset-es2015": "^6.24.1",
"bytom-js-sdk": "^1.4.0",
"clipboard": "^2.0.1",
+ "extension-streams": "^1.0.7",
"file-saver": "^2.0.0-rc.3",
"iview": "^3.0.0",
"moment": "^2.22.2",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.2"
}
-}
\ No newline at end of file
+}
+++ /dev/null
-let bytom = {};
-
-var bg = chrome.extension.getBackgroundPage();
-
-bytom.Query = bg.bytomQuery;
-bytom.System = bg.bytomSystem;
-bytom.Account = bg.bytomAccount;
-bytom.Transaction = bg.bytomTransaction;
-
-export default bytom;
\ No newline at end of file
<style lang="" scoped>
.warp {
- z-index: 1;
+ z-index: 1;
}
.topbar {
- font-size: 19px;
+ font-size: 19px;
}
.topbar .topbar-left {
- width: 120px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- padding-top: 20px;
- padding-left: 20px;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding-top: 20px;
+ padding-left: 20px;
}
.topbar-left .btn-menu {
- float: left;
- margin-right: 8px;
+ float: left;
+ margin-right: 8px;
}
.topbar-left .btn-menu i {
- font-size: 100%;
+ font-size: 100%;
}
.topbar-left .alias {
- height: 25px;
- font-size: 19px;
- line-height: 28px;
+ height: 25px;
+ font-size: 19px;
+ line-height: 28px;
}
.topbar .topbar-right {
- float: right;
- margin-top: 20px;
- margin-right: 20px;
- border: 2px solid #fff;
- border-radius: 18px;
- padding: 0 10px;
- font: 12px system-ui;
- text-align: center;
+ float: right;
+ margin-top: 20px;
+ margin-right: 20px;
+ border: 2px solid #fff;
+ border-radius: 18px;
+ padding: 0 10px;
+ font: 12px system-ui;
+ text-align: center;
}
.topbar-right .lamp {
- display: inline-block;
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background-color: #02f823;
- margin-right: 2px;
- position: relative;
- top: -2px;
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: #02f823;
+ margin-right: 2px;
+ position: relative;
+ top: -2px;
}
.content {
- margin-top: 20px;
- text-align: center;
- padding: 0 30px 20px;
+ margin-top: 20px;
+ text-align: center;
+ padding: 0 30px 20px;
}
.content .token-icon {
- display: inline-flex;
- height: 40px;
- width: 40px;
- padding: 8px;
- margin: 8px;
+ display: inline-flex;
+ height: 40px;
+ width: 40px;
+ padding: 8px;
+ margin: 8px;
}
.content .amount {
- padding-bottom: 10px;
+ padding-bottom: 10px;
}
.content .token-amount {
- font-size: 45px;
- line-height: 45px;
+ font-size: 45px;
+ line-height: 45px;
}
.token-amount .asset {
- font-size: 18px;
- margin-left: 2px;
+ font-size: 18px;
+ margin-left: 2px;
}
.qrcode {
- margin-left: 5px;
- vertical-align: middle;
- cursor: pointer;
+ margin-left: 5px;
+ vertical-align: middle;
+ cursor: pointer;
}
.btn-transfer {
- width: 200px;
+ width: 200px;
}
.transactions {
- font-size: 15px;
- height: 275px;
+ font-size: 15px;
+ height: 275px;
}
.transactions h3 {
- font-size: 18px;
- font-weight: inherit;
- color: #cacaca;
- text-align: center;
- padding: 5px 0;
+ font-size: 18px;
+ font-weight: inherit;
+ color: #cacaca;
+ text-align: center;
+ padding: 5px 0;
}
.transactions .list {
- padding: 0 20px;
+ padding: 0 20px;
}
.list-item {
- display: block;
- padding: 5px 10px;
- border-bottom: 1px solid #5e5e5e;
+ display: block;
+ padding: 5px 10px;
+ border-bottom: 1px solid #5e5e5e;
}
.list-item .value {
- float: right;
- margin-top: 13px;
+ float: right;
+ margin-top: 13px;
}
.account-address {
- cursor: pointer;
+ cursor: pointer;
}
.btn-creation {
- display: block;
- width: 200px;
- margin: 0 auto;
+ display: block;
+ width: 200px;
+ margin: 0 auto;
}
</style>
<template>
- <div id="app" class="warp">
- <section class="bg-green">
- <div class="topbar">
- <div class="topbar-right">
- <i class="lamp"></i>
- <select v-model="network" @change="netToggle">
- <option value="mainnet">{{ $t('main.mainNet') }}</option>
- <option value="testnet">{{ $t('main.testNet') }}</option>
- </select>
- </div>
- <div class="topbar-left">
- <a class="btn-menu" href="#"><i class="iconfont icon-menu" @click="$refs.menu.open()"></i></a>
- <span class="alias">{{accountInfo.alias}}</span>
- </div>
- </div>
- <div class="content">
- <img src="../../assets/logo.png" class="token-icon">
- <div v-if="accountInfo.address!=undefined" class="amount">
- <div class="token-amount">{{accountInfo.balance}}<span class="asset">BTM</span></div>
- <p class="account-address">
- <span class="address-text" :title="addressTitle" :data-clipboard-text="accountInfo.address">{{accountInfo.address_short}}</span>
- <i class="iconfont qrcode" @click="showQrcode"></i>
- </p>
- </div>
- <a v-if="accountInfo.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">{{ $t('main.transfer') }}</a>
- </div>
- </section>
+ <div id="app" class="warp">
+ <section class="bg-green">
+ <div class="topbar">
+ <div class="topbar-right">
+ <i class="lamp"></i>
+ <select v-model="network" @change="networkToggle">
+ <option value="mainnet">{{ $t('main.mainNet') }}</option>
+ <option value="testnet">{{ $t('main.testNet') }}</option>
+ </select>
+ </div>
+ <div class="topbar-left">
+ <a class="btn-menu" href="#">
+ <i class="iconfont icon-menu" @click="$refs.menu.open()"></i>
+ </a>
+ <span class="alias">{{currentAccount.alias}}</span>
+ </div>
+ </div>
+ <div class="content">
+ <img src="../../assets/logo.png" class="token-icon">
+ <div v-if="currentAccount.address!=undefined" class="amount">
+ <div class="token-amount">
+ {{currentAccount.balance}}
+ <span class="asset">BTM</span>
+ </div>
+ <p class="account-address">
+ <span class="address-text" :title="addressTitle" :data-clipboard-text="currentAccount.address">{{currentAccount.address_short}}</span>
+ <i class="iconfont qrcode" @click="showQrcode"></i>
+ </p>
+ </div>
+ <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">{{ $t('main.transfer') }}</a>
+ </div>
+ </section>
- <section v-if="accountInfo.address!=undefined" class="transactions">
- <h3 class="bg-gray">{{ $t('main.record') }}</h3>
- <vue-scroll @handle-scroll="handleScroll">
- <ul class="list">
- <li class="list-item" v-for="(transcation, index) in transcations" :key="index" @click="$refs.trxInfo.open(transcation, accountInfo.address)">
- <div class="value">{{transcation.direct}} {{transcation.val.toFixed(2)}} BTM</div>
- <div>
- <div v-if="transcation.is_confirmed" class="time">{{transcation.block_timestamp | moment}}</div>
- <div v-else class="time">{{transcation.submission_timestamp | moment}}</div>
- <div class="addr">{{transcation.address}}</div>
- </div>
- </li>
- </ul>
- </vue-scroll>
- </section>
- <section v-else>
- <p style="width: 250px; margin: 30px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
- <a class="btn btn-primary btn-creation bg-green" @click="$refs.menu.open('creation')">{{ $t('main.create') }}</a>
- </section>
+ <section v-if="currentAccount.address!=undefined" class="transactions">
+ <h3 class="bg-gray">{{ $t('main.record') }}</h3>
+ <vue-scroll @handle-scroll="handleScroll">
+ <li class="list-item" v-for="(transcation, index) in transcations" :key="index" @click="$refs.trxInfo.open(transcation, currentAccount.address)">
+
<div class="value">{{transcation.direct}} {{transcation.val.toFixed(2)}} BTM</div>
+
<div v-if="transcation.is_confirmed" class="time">{{transcation.block_timestamp | moment}}</div>
+
<div v-else class="time">{{transcation.submission_timestamp | moment}}</div>
+
<div class="addr">{{transcation.address}}</div>
+ </div>
+ </li>
+ </ul>
+ </vue-scroll>
+ </section>
+ <section v-else>
+
<p style="width: 250px; margin: 30px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
+
<a class="btn btn-primary btn-creation bg-green" @click="$refs.menu.open('creation')">{{ $t('main.create') }}</a>
+ </section>
- <!-- modal -->
- <Qrcode ref="qrcode"></Qrcode>
- <Menu ref="menu" @on-current-account="accountLoader" @accounts-clear="accountClear"></Menu>
- <Transfer ref="transfer" :fee="fee" :feeTypeOptions="feeTypeOptions" @on-success="refreshTransactions"></Transfer>
- <TxInfo ref="trxInfo" @on-success="refreshTransactions"></TxInfo>
- </div>
+ <!-- modal -->
+ <Qrcode ref="qrcode"></Qrcode>
+ <Menu ref="menu" :accounts="accounts" :selectedAccount="currentAccount" @on-account-change="accountToggle"></Menu>
+ <Transfer ref="transfer" :fee="fee" :feeTypeOptions="feeTypeOptions" @on-success="refreshAccounts"></Transfer>
+ <TxInfo ref="trxInfo" @on-success="refreshTransactions"></TxInfo>
+ </div>
</template>
<script>
import Qrcode from "../transfer/qrcode";
import Transfer from "../transfer/transfer";
import TxInfo from "../transfer/detail";
-import bytom from "../common/bytom";
+import account from "../../models/account";
+import transaction from "../../models/transaction";
import utils from "../common/utils";
export default {
- name: "",
- components: {
- Menu,
- Qrcode,
- Transfer,
- TxInfo
- },
- data() {
- return {
- feeTypeOptions: [this.$t('transfer.feeType')],
- fee: this.$t('transfer.feeType'),
- network: "mainnet",
- clipboard: new ClipboardJS(".address-text"),
- addressTitle: this.$t("main.copy"),
- menuOpen: false,
- maskOpen: false,
- accountInfo: {},
- transcations: [],
- start: 0,
- limit: 10
- };
- },
- methods: {
- handleScroll(vertical, horizontal, nativeEvent) {
- if (vertical.process == 0) {
- this.start = 0;
- return;
- }
-
- if (vertical.process == 1) {
- this.start += this.limit;
- this.appendTransactions();
- }
- },
- netToggle: function(val) {
- bytom.System.setupNet(this.network);
- localStorage.bytomNet = this.network;
-
- this.$refs.menu.updateAccounts();
- },
- accountClear: function() {
- this.accountInfo = {};
- this.transcations = [];
+ name: "",
+ components: {
+ Menu,
+ Qrcode,
+ Transfer,
+ TxInfo
},
- accountLoader: function(accountInfo) {
- this.accountInfo = accountInfo;
- this.accountInfo.address_short = utils.shortAddress(
- this.accountInfo.address
- );
- this.refreshTransactions();
+ data() {
+ return {
+ feeTypeOptions: [this.$t("transfer.feeType")],
+ fee: this.$t("transfer.feeType"),
+ network: "mainnet",
+ clipboard: new ClipboardJS(".address-text"),
+ addressTitle: this.$t("main.copy"),
+ menuOpen: false,
+ maskOpen: false,
+ accounts: [],
+ currentAccount: {},
+ transcations: [],
+ start: 0,
+ limit: 10
+ };
},
- showQrcode: function() {
- this.$refs.qrcode.open(this.accountInfo.address);
- },
- transferOpen: function() {
- this.fee = this.$t('transfer.feeType');
- this.feeTypeOptions = [this.$t('transfer.feeType')];
- this.$refs.transfer.open(this.accountInfo);
+ watch: {
+ currentAccount(newVal) {
+ if (newVal.guid == undefined) {
+ return;
+ }
+
+ this.setupShortAddr(newVal.address)
+ this.refreshBalance(newVal.guid);
+ this.refreshTransactions(newVal.guid, newVal.address).then(transcations => {
+ this.transcations = transcations
+ });
+ }
},
- transcationsFormat: function(transactions) {
- transactions.forEach(transaction => {
- let inputSum = 0;
- let outputSum = 0;
- let selfInputSum = 0;
- let selfoutputSum = 0;
- let inputAddresses = [];
- let outputAddresses = [];
- transaction.inputs.forEach(input => {
- inputSum += input.amount;
- if (input.address == this.accountInfo.address) {
- selfInputSum += input.amount;
- return;
- }
+ methods: {
+ setupShortAddr(address) {
+ this.currentAccount.address_short = utils.shortAddress(address);
+ },
+ setupClipboard() {
+ this.clipboard.on("success", e => {
+ this.$dialog.show({
+ header: this.$t("dialog.header"),
+ body: this.$t("dialog.copy.success")
+ });
+ });
+ this.clipboard.on("error", e => {
+ this.$dialog.show({
+ header: this.$t("dialog.header"),
+ body: this.$t("dialog.copy.fail")
+ });
+ });
+ },
+ setupRefreshTimer() {
+ setInterval(() => {
+ this.refreshBalance(this.currentAccount.guid)
+ }, 10000)
+ },
+ setupNetwork() {
+ this.network = localStorage.bytomNet;
+ account.setupNet(this.network);
+ },
+ networkToggle: function (val) {
+ localStorage.bytomNet = this.network;
+ account.setupNet(this.network);
+ this.refreshAccounts();
+ },
+ accountToggle: function (selectedAccount) {
+ localStorage.currentAccount = JSON.stringify(selectedAccount);
+ this.currentAccount = selectedAccount;
+ this.refreshAccounts();
+ },
+ showQrcode: function () {
+ this.$refs.qrcode.open(this.currentAccount.address);
+ },
+ transferOpen: function () {
+ this.fee = this.$t("transfer.feeType");
+ this.feeTypeOptions = [this.$t("transfer.feeType")];
+ this.$refs.transfer.open(this.currentAccount);
+ },
+ transcationsFormat: function (transactions) {
+ transactions.forEach(transaction => {
+ let inputSum = 0;
+ let outputSum = 0;
+ let selfInputSum = 0;
+ let selfoutputSum = 0;
+ let inputAddresses = [];
+ let outputAddresses = [];
+ transaction.inputs.forEach(input => {
+ inputSum += input.amount;
+ if (input.address == this.currentAccount.address) {
+ selfInputSum += input.amount;
+ return;
+ }
- inputAddresses.push(input.address);
- });
- transaction.outputs.forEach(output => {
- outputSum += output.amount;
- if (output.address == this.accountInfo.address) {
- selfoutputSum += output.amount;
- return;
- }
+ inputAddresses.push(input.address);
+ });
+ transaction.outputs.forEach(output => {
+ outputSum += output.amount;
+ if (output.address == this.currentAccount.address) {
+ selfoutputSum += output.amount;
+ return;
+ }
- outputAddresses.push(output.address);
- });
+ outputAddresses.push(output.address);
+ });
- let val = selfoutputSum - selfInputSum;
- if (val > 0) {
- transaction.direct = "+";
- transaction.address = utils.shortAddress(inputAddresses.pop());
- } else {
- val = selfInputSum - selfoutputSum;
- transaction.direct = "-";
- transaction.address = utils.shortAddress(outputAddresses.pop());
- }
- transaction.val = Number(val / 100000000);
- transaction.fee = Number(inputSum - outputSum) / 100000000;
- });
- },
- refreshTransactions: function() {
- this.transcations = [];
- if (this.accountInfo.guid == undefined) {
- return;
- }
+ let val = selfoutputSum - selfInputSum;
+ if (val > 0) {
+ transaction.direct = "+";
+ transaction.address = utils.shortAddress(inputAddresses.pop());
+ } else {
+ val = selfInputSum - selfoutputSum;
+ transaction.direct = "-";
+ transaction.address = utils.shortAddress(outputAddresses.pop());
+ }
+ transaction.val = Number(val / 100000000);
+ transaction.fee = Number(inputSum - outputSum) / 100000000;
+ });
+ },
+ refreshAccounts: function () {
+ account.list().then(accounts => {
+ this.accounts = accounts;
+ if (accounts.length == 0) {
+ return;
+ }
- bytom.Transaction.list(this.accountInfo.guid, this.accountInfo.address)
- .then(ret => {
- let transactions = ret.result.data;
- if (transactions == null) {
- return;
- }
+ if (localStorage.currentAccount != undefined) {
+ this.currentAccount = JSON.parse(localStorage.currentAccount);
+ } else {
+ this.currentAccount = accounts[0];
+ }
+ });
+ },
+ refreshBalance: function (guid) {
+ account.balance(guid).then(balance => {
+ this.currentAccount.balance = balance
+ }).catch(error => {
+ console.log(error);
+ });
+ },
+ refreshTransactions: function (guid, address) {
+ return new Promise((resolve, reject) => {
+ transaction.list(guid, address).then(ret => {
+ let transactions = ret.result.data;
+ if (transactions == null) {
+ return;
+ }
- this.transcationsFormat(transactions);
- console.log("formatTx", transactions);
- this.transcations = transactions;
- })
- .catch(error => {
- console.log(error);
- });
- },
- appendTransactions: function() {
- bytom.Transaction.list(
- this.accountInfo.guid,
- this.accountInfo.address,
- this.start,
- this.limit
- )
- .then(ret => {
- let transactions = ret.result.data;
- if (transactions == null || ret._links.next == undefined) {
- return;
- }
+ this.transcationsFormat(transactions);
+ console.log("formatTx", transactions);
+ resolve(transactions)
+ }).catch(error => {
+ console.log(error);
+ reject(error)
+ });
+ })
+ },
+ handleScroll(vertical, horizontal, nativeEvent) {
+ if (vertical.process == 0) {
+ this.start = 0;
+ return;
+ }
- this.transcationsFormat(transactions);
- console.log("formatTx", transactions);
- transactions.forEach(transaction => {
- this.transcations.push(transaction);
- });
- })
- .catch(error => {
- console.log(error);
- });
- }
- },
- mounted() {
- if (localStorage.bytomNet != undefined) {
- this.network = localStorage.bytomNet;
+ if (vertical.process == 1) {
+ this.start += this.limit;
+ this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transcations => {
+ transactions.forEach(transaction => {
+ this.transcations.push(transaction);
+ });
+ });
+ }
+ }
+ },
+ mounted() {
+ this.setupClipboard();
+ this.setupRefreshTimer();
+ this.setupNetwork();
+ this.refreshAccounts();
+ },
+ beforeDestroy() {
+ this.clipboard.destroy();
}
- this.refreshTransactions();
-
- this.clipboard.on("success", e => {
- this.$dialog.show({
- header: this.$t("dialog.header"),
- body: this.$t("dialog.copy.success")
- });
- });
- this.clipboard.on("error", e => {
- this.$dialog.show({
- header: this.$t("dialog.header"),
- body: this.$t("dialog.copy.fail")
- });
- });
- },
- beforeDestroy() {
- this.clipboard.destroy();
- }
};
</script>
\ No newline at end of file
<style scoped>
-
</style>
<template>
<MenuPage :title="$t('backup.title')" @back="back">
- <div style="text-align: center">
- <div style="width: 200px;" class="btn bg-green" @click="backup">{{ $t('backup.button') }}</div>
- </div>
+
<div style="text-align: center">
+
<div style="width: 200px;" class="btn bg-green" @click="backup">{{ $t('backup.button') }}</div>
+ </div>
</MenuPage>
</template>
<script>
-import bytom from "../common/bytom";
+import account from "../../models/account";
import FileSaver from "file-saver";
export default {
- name: "",
- data() {
- return {};
- },
- methods: {
- back: function() {
- this.$emit("on-back");
- },
- close: function() {
- this.$emit("on-exit");
+ name: "",
+ data() {
+ return {};
},
- backup() {
- bytom.Account.backup().then(txt => {
- var blob = new Blob([txt], {
- type: "text/plain;charset=utf-8"
- });
- FileSaver.saveAs(blob, "bytom_chrome_wallet_backup.txt");
- });
+ methods: {
+ back: function () {
+ this.$emit("on-back");
+ },
+ close: function () {
+ this.$emit("on-exit");
+ },
+ backup() {
+ account.backup().then(txt => {
+ var blob = new Blob([txt], {
+ type: "text/plain;charset=utf-8"
+ });
+ FileSaver.saveAs(blob, "bytom_chrome_wallet_backup.txt");
+ });
+ }
}
- }
};
</script>
\ No newline at end of file
<style scoped>
.form-item {
- background: transparent;
- margin: 0;
+ background: transparent;
+ margin: 0;
}
.form-item .form-item-content {
- padding: 0 10px;
- background-color: #282f38;
- border-radius: 5px;
+ padding: 0 10px;
+ background-color: #282f38;
+ border-radius: 5px;
}
.form-item .form-item-label {
- float: none;
- width: 200px;
- line-height: 35px;
- margin: 0 5px;
+ float: none;
+ width: 200px;
+ line-height: 35px;
+ margin: 0 5px;
}
.form-item .btn {
- width: 200px;
- margin-top: 15px;
+ width: 200px;
+ margin-top: 15px;
}
</style>
<template>
<MenuPage :title="$t('createAccount.title')" @back="back">
- <div class="form">
- <div class="form-item">
- <label class="form-item-label">{{ $t('createAccount.accountAlias') }}</label>
- <div class="form-item-content">
- <input type="text" v-model="formItem.accAlias">
+ <div class="form">
+ <div class="form-item">
+ <label class="form-item-label">{{ $t('createAccount.accountAlias') }}</label>
+ <div class="form-item-content">
+ <input type="text" v-model="formItem.accAlias">
+ </div>
</div>
- </div>
- <div class="form-item">
- <label class="form-item-label">{{ $t('createAccount.keyAlias') }}</label>
- <div class="form-item-content">
- <input type="text" v-model="formItem.keyAlias">
+ <div class="form-item">
+ <label class="form-item-label">{{ $t('createAccount.keyAlias') }}</label>
+ <div class="form-item-content">
+ <input type="text" v-model="formItem.keyAlias">
+ </div>
</div>
- </div>
- <div class="form-item">
- <label class="form-item-label">{{ $t('createAccount.keyPassword') }}</label>
- <div class="form-item-content">
- <input type="password" v-model="formItem.passwd1">
+ <div class="form-item">
+ <label class="form-item-label">{{ $t('createAccount.keyPassword') }}</label>
+ <div class="form-item-content">
+ <input type="password" v-model="formItem.passwd1">
+ </div>
</div>
- </div>
- <div class="form-item">
- <label class="form-item-label">{{ $t('createAccount.confirmPassword') }}</label>
- <div class="form-item-content">
- <input type="password" v-model="formItem.passwd2">
+ <div class="form-item">
+ <label class="form-item-label">{{ $t('createAccount.confirmPassword') }}</label>
+ <div class="form-item-content">
+ <input type="password" v-model="formItem.passwd2">
+ </div>
+ </div>
+ <div class="tips">{{tips}}</div>
+ <div class="form-item bg-gray" style="text-align: center">
+ <div class="btn bg-green" @click="create">{{ $t('createAccount.create') }}</div>
</div>
- </div>
- <div class="tips">{{tips}}</div>
- <div class="form-item bg-gray" style="text-align: center">
- <div class="btn bg-green" @click="create">{{ $t('createAccount.create') }}</div>
- </div>
</div>
</MenuPage>
</template>
<script>
-import bytom from "../common/bytom";
+import account from "../../models/account";
export default {
- name: "",
- components: {},
- data() {
- return {
- formItem: {
- accAlias: "",
- keyAlias: "",
- passwd1: "",
- passwd2: ""
- },
- tips: ""
- };
- },
- methods: {
- back: function() {
- this.$emit("on-back", "creation");
- },
- close: function() {
- this.$emit("on-exit", "creation");
+ name: "",
+ components: {},
+ data() {
+ return {
+ formItem: {
+ accAlias: "",
+ keyAlias: "",
+ passwd1: "",
+ passwd2: ""
+ },
+ tips: ""
+ };
},
- create: function() {
- if (this.formItem.accAlias == "") {
- this.$dialog.show({
- body: this.$t("createAccount.inputAlias")
- });
- return;
- }
- if (this.formItem.keyAlias == "") {
- this.$dialog.show({
- body: this.$t("createAccount.inputKey")
- });
- return;
- }
- if (this.formItem.passwd1 == "") {
- this.$dialog.show({
- body: this.$t("createAccount.inputPass")
- });
- return;
- }
- if (this.formItem.passwd1 != this.formItem.passwd2) {
- this.tips = this.$t('createAccount.passwordAgain');
- return;
- }
+ methods: {
+ back: function (accountInfo) {
+ this.$emit("on-back", accountInfo);
+ },
+ close: function () {
+ this.$emit("on-exit", "creation");
+ },
+ create: function () {
+ if (this.formItem.accAlias == "") {
+ this.$dialog.show({
+ body: this.$t("createAccount.inputAlias")
+ });
+ return;
+ }
+ if (this.formItem.keyAlias == "") {
+ this.$dialog.show({
+ body: this.$t("createAccount.inputKey")
+ });
+ return;
+ }
+ if (this.formItem.passwd1 == "") {
+ this.$dialog.show({
+ body: this.$t("createAccount.inputPass")
+ });
+ return;
+ }
+ if (this.formItem.passwd1 != this.formItem.passwd2) {
+ this.tips = this.$t('createAccount.passwordAgain');
+ return;
+ }
- let loader = this.$loading.show({
- container: this.fullPage ? null : this.$refs.formContainer,
- canCancel: true,
- onCancel: this.onCancel
- });
+ let loader = this.$loading.show({
+ container: this.fullPage ? null : this.$refs.formContainer,
+ canCancel: true,
+ onCancel: this.onCancel
+ });
- bytom.Account.create(
- this.formItem.accAlias,
- this.formItem.keyAlias,
- this.formItem.passwd1
- )
- .then(res => {
- console.log("bytom.Account.create", res);
- this.formItem = {};
- loader.hide();
- this.back();
- })
- .catch(err => {
- console.log(err);
- loader.hide();
- this.$dialog.show({
- body: err.message
- });
- // this.tips = err.message;
- });
- }
- },
- mounted() {}
+ account.create(this.formItem.accAlias, this.formItem.keyAlias, this.formItem.passwd1).then(res => {
+ console.log("bytom.Account.create", res);
+ this.formItem = {};
+ this.back(res);
+ loader.hide();
+ }).catch(err => {
+ console.log(err);
+ loader.hide();
+ this.$dialog.show({
+ body: err.message
+ });
+ // this.tips = err.message;
+ });
+ }
+ },
+ mounted() { }
};
</script>
\ No newline at end of file
<style scoped>
.body {
- padding: 20px 15px;
+ padding: 20px 15px;
}
input {
- width: 165px;
+ width: 165px;
}
</style>
<template>
- <MenuPage title="导入账户" @back="back">
- <div class="form-item">
- <input type="file" ref="file" @change="tirggerFile($event)">
- </div>
- <div class="btn bg-green" @click="recovery">从种子导入</div>
- </MenuPage>
+ <MenuPage title="导入账户" @back="back">
+
<div class="form-item">
+ <input type="file" ref="file" @change="tirggerFile($event)">
+ </div>
+
<div class="btn bg-green" @click="recovery">从种子导入</div>
+ </MenuPage>
</template>
<script>
-import bytom from "../common/bytom";
+import account from "../../models/account";
import getLang from "../../assets/language/sdk";
export default {
- name: "",
- data() {
- return {
- fileTxt: ""
- };
- },
- methods: {
- back: function() {
- this.$emit("on-back");
+ name: "",
+ data() {
+ return {
+ fileTxt: ""
+ };
},
- close: function() {
- this.$emit("on-exit");
- },
- tirggerFile: function(event) {
- var reader = new FileReader();
- reader.onload = e => {
- this.fileTxt = e.target.result;
- };
+ methods: {
+ back: function () {
+ this.$emit("on-back");
+ },
+ close: function () {
+ this.$emit("on-exit");
+ },
+ tirggerFile: function (event) {
+ var reader = new FileReader();
+ reader.onload = e => {
+ this.fileTxt = e.target.result;
+ };
- var file = event.target.files[0];
- reader.readAsText(file);
- },
- recovery: function() {
- bytom
- .restore(this.fileTxt)
- .then(res => {
- this.close();
- console.log("recovery", res);
- })
- .catch(error => {
- this.$dialog.show({
- body: getLang(error.message),
- });
- });
+ var file = event.target.files[0];
+ reader.readAsText(file);
+ },
+ recovery: function () {
+ account.restore(this.fileTxt).then(res => {
+ this.close();
+ console.log("recovery", res);
+ }).catch(error => {
+ this.$dialog.show({
+ body: getLang(error.message),
+ });
+ });
+ }
}
- }
};
</script>
\ No newline at end of file
<style scoped>
.mc-wrap {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 994;
- width: 55%;
- height: 100%;
- padding: 40px;
- background-color: #3c454b;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 994;
+ width: 55%;
+ height: 100%;
+ padding: 40px;
+ background-color: #3c454b;
}
.accounts {
- width: 100%;
- height: 200px;
- overflow-x: hidden;
- overflow-y: scroll;
- margin-bottom: 25px;
+ width: 100%;
+ height: 200px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ margin-bottom: 25px;
}
.accounts::-webkit-scrollbar {
- display: none;
+ display: none;
}
.accounts i {
- font-size: 24px;
+ font-size: 24px;
}
.menu {
- border-top: 1px solid #c9c9c9;
- padding-top: 15px;
+ border-top: 1px solid #c9c9c9;
+ padding-top: 15px;
}
.account {
- width: 150px;
- display: inline-block;
- vertical-align: middle;
+ width: 150px;
+ display: inline-block;
+ vertical-align: middle;
}
.account-alias {
- width: 150px;
- font-size: 19px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ width: 150px;
+ font-size: 19px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
.account-asset {
- font-size: 15px;
+ font-size: 15px;
}
</style>
<template>
-<div>
- <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
- <div v-show="maskShow" class="mask"></div>
- <transition name="left-menu" v-on:after-leave="close"
- enter-active-class="animated slideInLeft faster"
- leave-active-class="animated slideOutLeft faster">
- <div v-show="show" class="mc-wrap">
- <MenuPage :title="$t('menu.title')" @back="close">
- <div class="list accounts">
- <div v-for="(account, index) in accounts" :key="index" @click="accountSelected(account)">
- <div :class="(currentAccount != undefined && account.address == currentAccount.address) ? 'list-item active': 'list-item'">
- <i class="iconfont icon-user"></i>
- <div class="account">
- <div class="account-alias">{{account.alias}}</div>
- <div class="account-asset">{{account.balance}} BTM</div>
+ <div>
+ <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
+ <div v-show="maskShow" class="mask"></div>
+ <transition name="left-menu" v-on:after-leave="close" enter-active-class="animated slideInLeft faster" leave-active-class="animated slideOutLeft faster">
+ <div v-show="show" class="mc-wrap">
+ <MenuPage :title="$t('menu.title')" @back="close">
+ <div class="list accounts">
+ <div v-for="(account, index) in accounts" :key="index" @click="accountSelected(account)">
+ <div :class="(currAccount != undefined && account.address == currAccount.address) ? 'list-item active': 'list-item'">
+ <i class="iconfont icon-user"></i>
+ <div class="account">
+ <div class="account-alias">{{account.alias}}</div>
+ <div class="account-asset">{{account.balance}} BTM</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="list menu">
+ <div class="list-item" @click="currView='creation'">
+ <i class="iconfont icon-plusbox"></i>{{ $t('menu.createAccount') }}
+ </div>
+ <div class="list-item" @click="currView='backup'">
+ <i class="iconfont icon-backup"></i>{{ $t('menu.backup') }}
+ </div>
+ <div class="list-item" @click="currView='help'">
+ <i class="iconfont icon-help"></i>{{ $t('menu.help') }}
+ </div>
+ <div class="list-item" @click="currView='settings'">
+ <i class="iconfont icon-settings"></i>{{ $t('menu.setting') }}
+ </div>
+ </div>
+ </MenuPage>
+
+ <!-- child-page -->
+ <div>
+ <Creation key="creation" v-show="view.creation" @on-back="accountSelected" @on-exit="close"></Creation>
+ <Recovery key="recovery" v-show="view.recovery" @on-back="goBack" @on-exit="close"></Recovery>
+ <Bakcup key="backup" v-show="view.backup" @on-back="goBack" @on-exit="close"></Bakcup>
+ <Help key="help" v-show="view.help" @on-back="goBack" @on-exit="close"></Help>
+ <Settings key="settings" v-show="view.settings" @on-back="goBack" @on-exit="close"></Settings>
</div>
- </div>
- </div>
- </div>
- <div class="list menu">
- <div class="list-item" @click="currView='creation'">
- <i class="iconfont icon-plusbox"></i>{{ $t('menu.createAccount') }}
- </div>
- <div class="list-item" @click="currView='backup'">
- <i class="iconfont icon-backup"></i>{{ $t('menu.backup') }}
- </div>
- <div class="list-item" @click="currView='help'">
- <i class="iconfont icon-help"></i>{{ $t('menu.help') }}
</div>
- <div class="list-item" @click="currView='settings'">
- <i class="iconfont icon-settings"></i>{{ $t('menu.setting') }}
- </div>
- </div>
- </MenuPage>
-
- <!-- child-page -->
- <div>
- <Creation key="creation" v-show="view.creation" @on-back="goBack" @on-exit="close"></Creation>
- <Recovery key="recovery" v-show="view.recovery" @on-back="goBack" @on-exit="close"></Recovery>
- <Bakcup key="backup" v-show="view.backup" @on-back="goBack" @on-exit="close"></Bakcup>
- <Help key="help" v-show="view.help" @on-back="goBack" @on-exit="close"></Help>
- <Settings key="settings" v-show="view.settings" @on-back="goBack" @on-exit="close"></Settings>
- </div>
- </div>
- </transition>
- </div>
+ </transition>
+ </div>
</template>
<script>
import Bakcup from "./menu-backup";
import Help from "./menu-help";
import Settings from "./menu-settings";
-import bytom from "../common/bytom";
export default {
- name: "",
- components: {
- Creation,
- Recovery,
- Bakcup,
- Help,
- Settings
- },
- data() {
- return {
- show: false,
- maskShow: false,
- currView: "",
- accounts: [],
- currentAccount: ""
- };
- },
- computed: {
- view() {
- const { currView } = this;
- return {
- creation: currView === "creation",
- recovery: currView === "recovery",
- backup: currView === "backup",
- help: currView === "help",
- settings: currView === "settings"
- };
- }
- },
- watch: {
- currView: function() {
- //
- }
- },
- methods: {
- open: function(child) {
- this.show = true;
- this.maskShow = true;
- this.currView = child;
- },
- close: function() {
- this.show = false;
- this.maskShow = false;
- this.currView = "";
+ props: {
+ accounts: "",
+ selectedAccount: ""
},
- goBack: function(from) {
- this.currView = "";
- if (from == "creation") {
- this.updateAccounts();
- }
+ name: "",
+ components: {
+ Creation,
+ Recovery,
+ Bakcup,
+ Help,
+ Settings
},
- accountSelected: function(accountInfo) {
- localStorage.currentAccount = JSON.stringify(accountInfo);
- this.currentAccount = accountInfo;
- this.$emit("on-current-account", this.currentAccount);
- this.close();
+ data() {
+ return {
+ show: false,
+ maskShow: false,
+ currView: "",
+ currAccount: ""
+ };
},
- updateAccounts: function() {
- bytom.Account.list().then(accounts => {
- this.accounts = accounts;
- if (accounts.length == 0) {
- this.$emit("accounts-clear");
- return;
+ computed: {
+ view() {
+ const { currView } = this;
+ return {
+ creation: currView === "creation",
+ recovery: currView === "recovery",
+ backup: currView === "backup",
+ help: currView === "help",
+ settings: currView === "settings"
+ };
}
-
- if (localStorage.currentAccount != undefined) {
- this.currentAccount = JSON.parse(localStorage.currentAccount);
- } else {
- this.currentAccount = accounts[0];
+ },
+ watch: {
+ selectedAccount(newVal) {
+ this.currAccount = newVal
}
- this.$emit("on-current-account", this.currentAccount);
- });
- }
- },
- mounted() {
- if (localStorage.bytomNet != undefined) {
- bytom.System.setupNet(localStorage.bytomNet);
+ },
+ methods: {
+ open: function (child) {
+ this.show = true;
+ this.maskShow = true;
+ this.currView = child;
+ },
+ close: function () {
+ this.show = false;
+ this.maskShow = false;
+ this.currView = "";
+ },
+ goBack: function (from) {
+ this.currView = "";
+ },
+ accountSelected: function (accountInfo) {
+ // this.accounts.push(accountInfo);
+ // this.currAccount = accountInfo;
+ this.$emit("on-account-change", accountInfo);
+ this.close();
+ },
}
-
- this.updateAccounts();
- }
};
</script>
\ No newline at end of file
-import Vue from "vue";
-import moment from "moment";
-import VueI18n from "vue-i18n";
-import Loading from "vue-loading-overlay";
-import vuescroll from "vuescroll/dist/vuescroll-native";
-import "vue-loading-overlay/dist/vue-loading.css";
-import "vuescroll/dist/vuescroll.css";
+import Vue from 'vue'
+import moment from 'moment'
+import VueI18n from 'vue-i18n'
+import Loading from 'vue-loading-overlay'
+import vuescroll from 'vuescroll/dist/vuescroll-native'
+import 'vue-loading-overlay/dist/vue-loading.css'
+import 'vuescroll/dist/vuescroll.css'
-import EntryHome from "./entry/home";
-import EntryWelcome from "./entry/welcome";
-import EntryTransfer from "./entry/transfer";
-import Dialog from "./components/dialog";
-import vSelect from "./components/select";
-import MenuPage from "./components/menu-page";
-import messages, { have } from "../assets/language";
-import "../assets/style.css";
+import EntryHome from './entry/home'
+import EntryWelcome from './entry/welcome'
+import EntryTransfer from './entry/transfer'
+import Dialog from '../components/dialog'
+import vSelect from '../components/select'
+import MenuPage from '../components/menu-page'
+import messages, { have } from '../assets/language'
+import '../assets/style.css'
-Vue.use(VueI18n);
+Vue.use(VueI18n)
const i18n = new VueI18n({
- fallbackLocale: "en",
- locale: have(localStorage.lang) ? localStorage.lang : "cn",
+ fallbackLocale: 'en',
+ locale: have(localStorage.lang) ? localStorage.lang : 'cn',
messages
-});
-Vue.use(i18n);
-Vue.use(vuescroll);
-Vue.use(MenuPage);
-Vue.use(Loading);
-Vue.use(Dialog, i18n);
-Vue.component("v-select", vSelect);
+})
+Vue.use(i18n)
+Vue.use(vuescroll)
+Vue.use(MenuPage)
+Vue.use(Loading)
+Vue.use(Dialog, i18n)
+Vue.component('v-select', vSelect)
Vue.prototype.$vuescrollConfig = {
- mode: "pure-native",
+ mode: 'pure-native',
bar: {
keepShow: true,
- background: "#c9c9c9"
+ background: '#c9c9c9'
}
-};
+}
-Vue.filter("moment", function(value, formatString) {
- formatString = formatString || "YYYY-MM-DD HH:mm:ss";
- return moment(value * 1000).format(formatString);
-});
+Vue.filter('moment', function(value, formatString) {
+ formatString = formatString || 'YYYY-MM-DD HH:mm:ss'
+ return moment(value * 1000).format(formatString)
+})
-let Application = {};
+let Application = {}
Application.welcome = function() {
new Vue({
- el: "#app",
+ el: '#app',
i18n: i18n,
render: h => h(EntryWelcome)
- });
-};
+ })
+}
Application.launth = function() {
new Vue({
- el: "#app",
+ el: '#app',
i18n: i18n,
render: h => h(EntryHome)
- });
-};
+ })
+}
Application.transfer = function() {
new Vue({
- el: "#app",
+ el: '#app',
i18n: i18n,
render: h => h(EntryTransfer)
- });
-};
+ })
+}
-export default Application;
+export default Application
<style lang="" scoped>
.warp {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 600px;
- z-index: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 600px;
+ z-index: 2;
}
.header {
- height: 60px;
+ height: 60px;
}
.content {
- padding: 25px 30px;
+ padding: 25px 30px;
}
.ft {
- border-radius: 5px;
- padding: 0 20px !important;
- line-height: 45px;
- margin-bottom: 20px;
+ border-radius: 5px;
+ padding: 0 20px !important;
+ line-height: 45px;
+ margin-bottom: 20px;
}
.ft .from {
- overflow-x: hidden;
- width: 90px;
+ overflow-x: hidden;
+ width: 90px;
}
.ft .to {
- overflow-x: hidden;
- padding-left: 20px;
- float: right;
+ overflow-x: hidden;
+ padding-left: 20px;
+ float: right;
}
.right-arrow {
- width: 32px;
- height: 32px;
- border-top: 12px solid #3c454b;
- border-right: 12px solid #3c454b;
- transform: rotate(45deg);
- position: absolute;
- left: 105px;
+ width: 32px;
+ height: 32px;
+ border-top: 12px solid #3c454b;
+ border-right: 12px solid #3c454b;
+ transform: rotate(45deg);
+ position: absolute;
+ left: 105px;
}
.row {
- padding: 12px 10px;
+ padding: 12px 10px;
}
.value {
- float: right;
+ float: right;
}
.value .uint {
- font-size: 12px;
- margin-left: 3px;
+ font-size: 12px;
+ margin-left: 3px;
}
.fee-intro {
- font-size: 10px;
+ font-size: 10px;
}
.btn-inline {
- display: flex;
- padding: 0;
+ display: flex;
+ padding: 0;
}
.btn-inline .btn {
- margin: 10px 15px;
+ margin: 10px 15px;
}
</style>
<template>
- <div>
- <transition name="page-transfer"
- <!-- enter-active-class="animated slideInUp faster"
- leave-active-class="animated slideOutDown faster"> -->
- <div v-show="show" class="warp bg-gray">
- <section class="header bg-green">
- <i class="iconfont icon-back" @click="show=false"></i>
- </section>
+ <div>
+ <transition name="page-transfer" <!-- enter-active-class="animated slideInUp faster" leave-active-class="animated slideOutDown faster"> -->
+ <div v-show="show" class="warp bg-gray">
+ <section class="header bg-green">
+ <i class="iconfont icon-back" @click="show=false"></i>
+ </section>
- <section class="content">
- <div class="row bg-green ft">
- <div class="col from">{{account.alias}}</div>
- <div class="col right-arrow"></div>
- <div class="col to">{{transaction.toShort}}</div>
- </div>
- <div class="row">
- <div class="col label">{{ $t('transfer.transferAmount') }}</div>
- <div class="col value">{{transaction.amount}}<span class="uint">BTM</span></div>
- </div>
- <div class="row">
- <div class="col label">{{ $t('transfer.transferCost') }}</div>
- <div class="col value">{{transaction.cost}}<span class="uint">CNY</span></div>
- </div>
- <div class="row">
- <div class="col label">{{ $t('transfer.fee') }}</div>
- <div class="col value">{{transaction.fee}}<span class="uint">BTM</span></div>
- </div>
+ <section class="content">
+
<div class="row bg-green ft">
+
<div class="col from">{{account.alias}}</div>
+
<div class="col right-arrow"></div>
+
<div class="col to">{{transaction.toShort}}</div>
+ </div>
+
<div class="col label">{{ $t('transfer.transferAmount') }}</div>
+
<div class="col value">{{transaction.amount}}<span class="uint">BTM</span></div>
+ </div>
+
<div class="col label">{{ $t('transfer.transferCost') }}</div>
+
<div class="col value">{{transaction.cost}}<span class="uint">CNY</span></div>
+ </div>
+
<div class="col label">{{ $t('transfer.fee') }}</div>
+
<div class="col value">{{transaction.fee}}<span class="uint">BTM</span></div>
+ </div>
- <div class="divider" style="margin-top: 130px; margin-bottom: 10px;"></div>
- <div class="row" style="text-align: right;">
- <div class="col label" style="line-height: 50px;">{{ $t('transfer.total') }}</div>
- <div class="col value">
- <p class="fee-intro">{{ $t('transfer.totalTip') }}</p>
- {{Number(transaction.amount)+Number(transaction.fee)}}<span class="uint">BTM</span>
- </div>
- </div>
- <div class="row" style="margin: 20px;">
- <div class="btn bg-green" @click="$refs.modalPasswd.open()">{{ $t('transfer.confirm') }}</div>
+ <div class="divider" style="margin-top: 130px; margin-bottom: 10px;"></div>
+ <div class="row" style="text-align: right;">
+ <div class="col label" style="line-height: 50px;">{{ $t('transfer.total') }}</div>
+ <div class="col value">
+ <p class="fee-intro">{{ $t('transfer.totalTip') }}</p>
+ {{Number(transaction.amount)+Number(transaction.fee)}}<span class="uint">BTM</span>
+ </div>
+ </div>
+ <div class="row" style="margin: 20px;">
+ <div class="btn bg-green" @click="$refs.modalPasswd.open()">{{ $t('transfer.confirm') }}</div>
+ </div>
+ </section>
</div>
- </section>
- </div>
- </transition>
+ </transition>
- <modalPasswd ref="modalPasswd" @confirm="transfer"></modalPasswd>
- </div>
+ <modalPasswd ref="modalPasswd" @confirm="transfer"></modalPasswd>
+ </div>
</template>
<script>
-import bytom from "../common/bytom";
import utils from "../common/utils";
+import transaction from "../../models/transaction";
import modalPasswd from "./modal-passwd";
import getLang from "../../assets/language/sdk";
export default {
- components: {
- modalPasswd
- },
- data() {
- return {
- show: false,
- rawData: {},
- account: {},
- transaction: {
- to: "",
- toShort: "",
- amount: 0,
- fee: ""
- }
- };
- },
- methods: {
- open: function(account, transaction, data) {
- this.account = account;
- this.transaction = transaction;
- this.transaction.toShort = utils.shortAddress(transaction.to, 4);
- this.rawData = data;
- this.show = true;
+ components: {
+ modalPasswd
},
- close: function() {
- this.show = false;
+ data() {
+ return {
+ show: false,
+ rawData: {},
+ account: {},
+ transaction: {
+ to: "",
+ toShort: "",
+ amount: 0,
+ fee: ""
+ }
+ };
},
- transfer: function(passwd) {
- let loader = this.$loading.show({
- // Optional parameters
- container: null,
- canCancel: true,
- onCancel: this.onCancel
- });
+ methods: {
+ open: function (account, transaction, data) {
+ this.account = account;
+ this.transaction = transaction;
+ this.transaction.toShort = utils.shortAddress(transaction.to, 4);
+ this.rawData = data;
+ this.show = true;
+ },
+ close: function () {
+ this.show = false;
+ },
+ transfer: function (passwd) {
+ let loader = this.$loading.show({
+ // Optional parameters
+ container: null,
+ canCancel: true,
+ onCancel: this.onCancel
+ });
- // rawData, password
- bytom.Transaction.transfer(this.account.guid, this.rawData, passwd)
- .then(ret => {
- loader.hide();
- this.close();
- this.$emit("on-success");
- this.$dialog.show({
- body: this.$t("transfer.success")
- });
- })
- .catch(error => {
- loader.hide();
- this.$dialog.show({
- body: getLang(error.message)
- });
- });
+ // rawData, password
+ transaction.transfer(this.account.guid, this.rawData, passwd)
+ .then(ret => {
+ loader.hide();
+ this.close();
+ this.$emit("on-success");
+ this.$dialog.show({
+ body: this.$t("transfer.success")
+ });
+ })
+ .catch(error => {
+ loader.hide();
+ this.$dialog.show({
+ body: getLang(error.message)
+ });
+ });
+ }
}
- }
};
</script>
\ No newline at end of file
<style lang="" scoped>
.warp {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 600px;
- z-index: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 600px;
+ z-index: 2;
}
.header {
- height: 150px;
+ height: 150px;
}
.balance {
- text-align: center;
- margin-top: 15px;
+ text-align: center;
+ margin-top: 15px;
}
.balance .token-icon {
- height: 38px;
- width: 38px;
- margin-right: 5px;
+ height: 38px;
+ width: 38px;
+ margin-right: 5px;
}
.balance .token-amount {
- display: inline-block;
- font-size: 45px;
- line-height: 45px;
+ display: inline-block;
+ font-size: 45px;
+ line-height: 45px;
}
.balance .token-amount .asset {
- font-size: 18px;
- margin-left: 2px;
+ font-size: 18px;
+ margin-left: 2px;
}
.form {
- padding: 10px 20px;
+ padding: 10px 20px;
}
.form-item-group {
- display: flex;
+ display: flex;
}
.form-item-group .form-item {
- width: 40%;
+ width: 40%;
}
.btn-inline {
- display: flex;
- padding: 0;
+ display: flex;
+ padding: 0;
}
.btn-inline .btn {
- margin: 10px 15px;
+ margin: 10px 15px;
}
</style>
<template>
- <div>
- <transition name="page-transfer"
- enter-active-class="animated fadeInLeft faster"
- leave-active-class="animated fadeOutLeft faster">
- <div v-show="show" class="warp bg-gray">
- <section class="header bg-green">
- <i class="iconfont icon-back" @click="close"></i>
- <div class="balance">
- <img src="../../assets/logo.png" class="token-icon">
- <div class="token-amount">{{account.balance}}<span class="asset">BTM</span></div>
- </div>
- </section>
-
- <section class="form">
- <div class="form-item-group">
- <div class="form-item">
- <!-- <label>账户</label> -->
- <v-select :clearable="false" v-model="guid" style="height: 32px;width: 125px;" label="alias" :options="accounts"></v-select>
- </div>
- <div class="form-item" style="margin-left: 20px;">
- <!-- <label>资产</label> -->
- <v-select :clearable="false" v-model="selectAsset" style="height: 32px;" label="name" :options="assetOptions"></v-select>
- </div>
- </div>
- <div class="form-item">
- <label class="form-item-label">{{ $t('transfer.address') }}</label>
- <div class="form-item-content" style="margin-left: 80px;">
- <input type="text" v-model="transaction.to">
- </div>
- </div>
- <div class="form-item">
- <label class="form-item-label">{{ $t('transfer.quantity') }}</label>
- <div class="form-item-content" style="margin-left: 80px; display: flex;">
- <input type="number" v-model="transaction.amount" placeholder="0">
- <span style="width: 40px; font-size: 15px;">{{unit}}</span>
- </div>
- </div>
- <div class="form-item">
- <label class="form-item-label">≈</label>
- <div class="form-item-content" style="margin-left: 80px; display: flex;">
- <input type="number" v-model="transaction.cost" placeholder="0" disabled>
- <span style="width: 40px; font-size: 15px;">CNY</span>
- </div>
- </div>
- <div class="form-item">
- <label class="form-item-label">{{ $t('transfer.fee') }}</label>
- <div class="form-item-content" style="margin-left: 80px;">
- <v-select :clearable="false" v-model="fee" style="height: 32px;" :options="feeTypeOptions"></v-select>
+ <div>
+ <transition name="page-transfer" enter-active-class="animated fadeInLeft faster" leave-active-class="animated fadeOutLeft faster">
+ <div v-show="show" class="warp bg-gray">
+ <section class="header bg-green">
+ <i class="iconfont icon-back" @click="close"></i>
+ <div class="balance">
+ <img src="../../assets/logo.png" class="token-icon">
+ <div class="token-amount">
+ {{account.balance}}
+ <span class="asset">BTM</span>
+ </div>
+ </div>
+ </section>
+
+ <section class="form">
+ <div class="form-item-group">
+ <div class="form-item">
+ <!-- <label>账户</label> -->
+ <v-select :clearable="false" v-model="guid" style="height: 32px;width: 125px;" label="alias" :options="accounts"></v-select>
+ </div>
+ <div class="form-item" style="margin-left: 20px;">
+ <!-- <label>资产</label> -->
+ <v-select :clearable="false" v-model="selectAsset" style="height: 32px;" label="name" :options="assetOptions"></v-select>
+ </div>
+ </div>
+ <div class="form-item">
+ <label class="form-item-label">{{ $t('transfer.address') }}</label>
+ <div class="form-item-content" style="margin-left: 80px;">
+ <input type="text" v-model="transaction.to">
+ </div>
+ </div>
+ <div class="form-item">
+ <label class="form-item-label">{{ $t('transfer.quantity') }}</label>
+ <div class="form-item-content" style="margin-left: 80px; display: flex;">
+ <input type="number" v-model="transaction.amount" placeholder="0">
+ <span style="width: 40px; font-size: 15px;">{{unit}}</span>
+ </div>
+ </div>
+ <div class="form-item">
+ <label class="form-item-label">≈</label>
+ <div class="form-item-content" style="margin-left: 80px; display: flex;">
+ <input type="number" v-model="transaction.cost" placeholder="0" disabled>
+ <span style="width: 40px; font-size: 15px;">CNY</span>
+ </div>
+ </div>
+ <div class="form-item">
+ <label class="form-item-label">{{ $t('transfer.fee') }}</label>
+ <div class="form-item-content" style="margin-left: 80px;">
+ <v-select :clearable="false" v-model="fee" style="height: 32px;" :options="feeTypeOptions"></v-select>
+ </div>
+ </div>
+ <br>
+ <div style="width: 200px; margin: 0 auto;">
+ <div class="btn bg-green" @click="send">{{ $t('transfer.send') }}</div>
+ </div>
+ </section>
</div>
- </div>
- <br>
- <div style="width: 200px; margin: 0 auto;">
- <div class="btn bg-green" @click="send">{{ $t('transfer.send') }}</div>
- </div>
- </section>
- </div>
- </transition>
+ </transition>
- <Confirm ref="transferConfirm" @on-success="close"></Confirm>
- </div>
+ <Confirm ref="transferConfirm" @on-success="confirmSuccess"></Confirm>
+ </div>
</template>
<script>
-import bytom from "../common/bytom";
+import account from "../../models/account";
+import transaction from "../../models/transaction";
import getLang from "../../assets/language/sdk";
import Confirm from "./confirm";
export default {
- components: {
- Confirm
- },
- data() {
- const ASSET_BTM =
- "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
- return {
- selectAsset: {
- assets:
- "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
- name: "BTM"
- },
- assetOptions: [
- {
- assets:
- "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
- name: "BTM"
- }
- ],
- show: false,
- accounts: [],
- unit: "",
- assets: {
- ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
- },
- guid: null,
- account: {
- guid: ""
- },
- transaction: {
- to: "",
- asset: ASSET_BTM,
- amount: "",
- fee: "",
- cost: ""
- }
- };
- },
- props: {
- fee: {
- type: String,
- default() {
- return this.$t("transfer.feeType");
- }
+ components: {
+ Confirm
},
- feeTypeOptions: {
- type: Array,
- default() {
- return [this.$t("transfer.feeType")];
- }
- }
- },
- watch: {
- selectAsset: function(val) {
- this.transaction.asset = val.assets;
+ data() {
+ const ASSET_BTM =
+ "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
+ return {
+ selectAsset: {
+ assets:
+ "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
+ name: "BTM"
+ },
+ assetOptions: [
+ {
+ assets:
+ "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
+ name: "BTM"
+ }
+ ],
+ show: false,
+ accounts: [],
+ unit: "",
+ assets: {
+ ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
+ },
+ guid: null,
+ account: {
+ guid: ""
+ },
+ transaction: {
+ to: "",
+ asset: ASSET_BTM,
+ amount: "",
+ fee: "",
+ cost: ""
+ }
+ };
},
- "transaction.amount": function(newAmount) {
- bytom.Query.asset(this.transaction.asset).then(ret => {
- this.transaction.cost = Number(ret.result.data.cny_price*newAmount).toFixed(2);
- });
+ props: {
+ fee: {
+ type: String,
+ default() {
+ return this.$t("transfer.feeType");
+ }
+ },
+ feeTypeOptions: {
+ type: Array,
+ default() {
+ return [this.$t("transfer.feeType")];
+ }
+ }
},
- guid: function(newGuid) {
- this.accounts.forEach(account => {
- if (account.guid == newGuid.guid) {
- this.account = account;
- return;
+ watch: {
+ selectAsset: function (val) {
+ this.transaction.asset = val.assets;
+ },
+ "transaction.amount": function (newAmount) {
+ transaction.asset(this.transaction.asset).then(ret => {
+ this.transaction.cost = Number(ret.result.data.cny_price * newAmount).toFixed(2);
+ });
+ },
+ guid: function (newGuid) {
+ this.accounts.forEach(account => {
+ if (account.guid == newGuid.guid) {
+ this.account = account;
+ return;
+ }
+ });
}
- });
- }
- },
- methods: {
- open: function(accountInfo) {
- this.show = true;
+ },
+ methods: {
+ open: function (accountInfo) {
+ this.show = true;
- bytom.Account.list().then(accounts => {
- this.accounts = accounts;
- let options = [];
- this.accounts.forEach(function(element) {
- options.push({ label: element.alias, value: element.guid });
- });
- this.options = options;
- });
+ account.list().then(accounts => {
+ this.accounts = accounts;
+ let options = [];
+ this.accounts.forEach(function (element) {
+ options.push({ label: element.alias, value: element.guid });
+ });
+ this.options = options;
+ });
- this.account = accountInfo;
- this.guid = accountInfo;
- this.unit = this.assets[this.transaction.asset];
- },
- close: function() {
- this.show = false;
- this.transaction.to = "";
- this.transaction.amount = "";
- },
- send: function() {
- if (this.transaction.to == "") {
- this.$dialog.show({
- body: this.$t("transfer.emptyTo")
- });
- return;
- }
+ this.account = accountInfo;
+ this.guid = accountInfo;
+ this.unit = this.assets[this.transaction.asset];
+ },
+ close: function () {
+ this.show = false;
+ this.transaction.to = "";
+ this.transaction.amount = "";
+ },
+ confirmSuccess: function () {
+ this.$emit("on-success");
+ this.close()
+ },
+ send: function () {
+ if (this.transaction.to == "") {
+ this.$dialog.show({
+ body: this.$t("transfer.emptyTo")
+ });
+ return;
+ }
- if (this.transaction.amount <= 0) {
- this.$dialog.show({
- body: this.$t("transfer.noneBTM")
- });
- return;
- }
+ if (this.transaction.amount <= 0) {
+ this.$dialog.show({
+ body: this.$t("transfer.noneBTM")
+ });
+ return;
+ }
- let loader = this.$loading.show({
- // Optional parameters
- container: null,
- canCancel: true,
- onCancel: this.onCancel
- });
- bytom.Transaction.build(
- this.account.guid,
- this.transaction.to,
- this.transaction.asset,
- this.transaction.amount,
- this.transaction.fee
- )
- .then(ret => {
- loader.hide();
+ let loader = this.$loading.show({
+ // Optional parameters
+ container: null,
+ canCancel: true,
+ onCancel: this.onCancel
+ });
+ transaction.build(
+ this.account.guid,
+ this.transaction.to,
+ this.transaction.asset,
+ this.transaction.amount,
+ this.transaction.fee
+ )
+ .then(ret => {
+ loader.hide();
- this.transaction.fee = Number(ret.result.data.fee / 100000000);
- this.$refs.transferConfirm.open(
- this.account,
- this.transaction,
- ret.result.data
- );
- })
- .catch(error => {
- loader.hide();
- this.$dialog.show({
- body: getLang(error.message)
- });
- });
+ this.transaction.fee = Number(ret.result.data.fee / 100000000);
+ this.$refs.transferConfirm.open(
+ this.account,
+ this.transaction,
+ ret.result.data
+ );
+ })
+ .catch(error => {
+ loader.hide();
+ this.$dialog.show({
+ body: getLang(error.message)
+ });
+ });
+ }
}
- }
};
</script>
\ No newline at end of file
<style scoped>
.content {
- margin-left: 135px;
+ margin-left: 135px;
}
.content-cn {
- margin-left: 85px;
+ margin-left: 85px;
}
.form-item-label {
- width: 135px;
+ width: 135px;
}
.form-item-label-cn {
- width: 85px;
+ width: 85px;
}
</style>
</template>
<script>
-import bytom from "../common/bytom";
+import account from "../../models/account";
let mainNet = null;
let testNet = null;
export default {
- name: "",
- data() {
- return {
- nets: [],
- selected: mainNet,
- formItem: {
- accAlias: "",
- keyAlias: "",
- passwd1: "",
- passwd2: ""
- }
- };
- },
- computed : {
- formItemLabel: function() {
- if (this.i18n == "cn") {
- return "form-item-label form-item-label-cn";
- } else if (this.i18n == "en") {
- return "form-item-label";
- }
- return "form-item-label form-item-label-cn";
+ name: "",
+ data() {
+ return {
+ nets: [],
+ selected: mainNet,
+ formItem: {
+ accAlias: "",
+ keyAlias: "",
+ passwd1: "",
+ passwd2: ""
+ }
+ };
},
- formItemContent: function() {
- if (this.i18n == "cn") {
- return "form-item-content content-cn";
- } else if (this.i18n == "en") {
- return "form-item-content content";
- }
- return "form-item-label form-item-label-cn";
- }
- },
- props: {
- i18n: {
- type: String,
- default: 'cn',
- }
- },
- methods: {
- create: function() {
- if (this.formItem.accAlias == "") {
- this.$dialog.show({
- body: this.$t("createAccount.inputAlias")
- });
- return;
- }
- if (this.formItem.keyAlias == "") {
- this.$dialog.show({
- body: this.$t("createAccount.inputKey")
- });
- return;
- }
- if (this.formItem.passwd1 == "") {
- this.$dialog.show({
- body: this.$t("createAccount.inputPass")
- });
- return;
- }
- if (this.formItem.passwd1 != this.formItem.passwd2) {
- this.$dialog.show({
- body: this.$t('createAccount.passwordAgain'),
- });
- return;
- }
- let loader = this.$loading.show({
- container: null,
- canCancel: true,
- onCancel: this.onCancel
- });
- bytom.Account.create(
- this.formItem.accAlias,
- this.formItem.keyAlias,
- this.formItem.passwd1
- )
- .then(res => {
- localStorage.login = true;
- loader.hide();
- window.location.reload();
- this.formItem = {};
- })
- .catch(err => {
- loader.hide();
- this.$dialog.show({
- body: err.message,
- });
- });
+ computed: {
+ formItemLabel: function () {
+ if (this.i18n == "cn") {
+ return "form-item-label form-item-label-cn";
+ } else if (this.i18n == "en") {
+ return "form-item-label";
+ }
+ return "form-item-label form-item-label-cn";
+ },
+ formItemContent: function () {
+ if (this.i18n == "cn") {
+ return "form-item-content content-cn";
+ } else if (this.i18n == "en") {
+ return "form-item-content content";
+ }
+ return "form-item-label form-item-label-cn";
+ }
},
- recover: function() {
- this.$emit("next");
+ props: {
+ i18n: {
+ type: String,
+ default: 'cn',
+ }
},
- },
- watch: {
- selected: function(value) {
- localStorage.bytomNet = value.value;
- bytom.System.setupNet(value.value);
- }
- },
- mounted() {
- mainNet = {label: this.$t('main.mainNetShort'), value: "mainnet"};
- testNet = {label: this.$t('main.testNetShort'), value: "testnet"};
- this.nets = [mainNet, testNet];
- if (localStorage.bytomNet != undefined) {
- bytom.System.setupNet(localStorage.bytomNet);
- if (localStorage.bytomNet == "mainnet") {
- this.selected = mainNet;
- } else if (localStorage.bytomNet == "testnet") {
- this.selected = testNet;
- }
- } else {
- this.selected = mainNet;
- localStorage.bytomNet = "mainnet";
+ methods: {
+ create: function () {
+ if (this.formItem.accAlias == "") {
+ this.$dialog.show({
+ body: this.$t("createAccount.inputAlias")
+ });
+ return;
+ }
+ if (this.formItem.keyAlias == "") {
+ this.$dialog.show({
+ body: this.$t("createAccount.inputKey")
+ });
+ return;
+ }
+ if (this.formItem.passwd1 == "") {
+ this.$dialog.show({
+ body: this.$t("createAccount.inputPass")
+ });
+ return;
+ }
+ if (this.formItem.passwd1 != this.formItem.passwd2) {
+ this.$dialog.show({
+ body: this.$t('createAccount.passwordAgain'),
+ });
+ return;
+ }
+ let loader = this.$loading.show({
+ container: null,
+ canCancel: true,
+ onCancel: this.onCancel
+ });
+ account.create(this.formItem.accAlias, this.formItem.keyAlias, this.formItem.passwd1).then(res => {
+ localStorage.login = true;
+ loader.hide();
+ window.location.reload();
+ this.formItem = {};
+ }).catch(err => {
+ loader.hide();
+ this.$dialog.show({
+ body: err.message,
+ });
+ });
+ },
+ recover: function () {
+ this.$emit("next");
+ },
+ },
+ watch: {
+ selected: function (value) {
+ localStorage.bytomNet = value.value;
+ // bytom.System.setupNet(value.value);
+ }
+ },
+ mounted() {
+ mainNet = { label: this.$t('main.mainNetShort'), value: "mainnet" };
+ testNet = { label: this.$t('main.testNetShort'), value: "testnet" };
+ this.nets = [mainNet, testNet];
+ if (localStorage.bytomNet != undefined) {
+ // bytom.System.setupNet(localStorage.bytomNet);
+ if (localStorage.bytomNet == "mainnet") {
+ this.selected = mainNet;
+ } else if (localStorage.bytomNet == "testnet") {
+ this.selected = testNet;
+ }
+ } else {
+ this.selected = mainNet;
+ localStorage.bytomNet = "mainnet";
+ }
}
- }
};
</script>
\ No newline at end of file
<div class="form-item">
<label class="form-item-label">{{ $t('createAccount.file') }}</label>
<div class="form-item-content" style="margin-left: 95px;">
- <input type="file" @change="tirggerFile($event)">
+ <input type="file" @change="tirggerFile($event)">
</div>
</div>
<div class="btn-group">
</template>
<script>
-import bytom from "../common/bytom";
+import account from "../../models/account";
import getLang from "../../assets/language/sdk";
export default {
- name: "",
- data() {
- return {
- formData: {}
- };
- },
- methods: {
- tirggerFile: function(event) {
- var reader = new FileReader();
- reader.onload = e => {
- this.fileTxt = e.target.result;
- };
-
- var file = event.target.files[0];
- reader.readAsText(file);
- },
- recovery: function() {
- bytom.Account.restore(this.fileTxt)
- .then(res => {
- window.location.reload();
- localStorage.login = true;
- })
- .catch(error => {
- this.$dialog.show({
- body: getLang(error.message)
- });
- });
+ name: "",
+ data() {
+ return {
+ formData: {}
+ };
},
- back: function() {
- this.$emit("back");
+ methods: {
+ tirggerFile: function (event) {
+ var reader = new FileReader();
+ reader.onload = e => {
+ this.fileTxt = e.target.result;
+ };
+
+ var file = event.target.files[0];
+ reader.readAsText(file);
+ },
+ recovery: function () {
+ account.restore(this.fileTxt).then(res => {
+ window.location.reload();
+ localStorage.login = true;
+ }).catch(error => {
+ this.$dialog.show({
+ body: getLang(error.message)
+ });
+ });
+ },
+ back: function () {
+ this.$emit("back");
+ }
}
- }
};
</script>
\ No newline at end of file
--- /dev/null
+import { LocalStream } from 'extension-streams'
+
+export default class Background {
+ constructor() {
+ this.setupInternalMessaging()
+ }
+
+ setupInternalMessaging() {
+ LocalStream.watch((request, sendResponse) => {
+ console.log(request)
+ // const message = InternalMessage.fromJson(request)
+ // this.dispatchMessage(sendResponse, message)
+ })
+ }
+
+ dispatchMessage(sendResponse, message) {
+ switch (message.type) {
+ case InternalMessageTypes.SET_SEED:
+ // Background.setSeed(sendResponse, message.payload)
+ break
+ }
+ }
+
+ static transfer(sendResponse) {
+ var optionsUrl = chrome.extension.getURL('pages/prompt.html')
+ console.log(optionsUrl)
+ chrome.tabs.query({ url: optionsUrl }, tabs => {
+ console.log(22, tabs)
+ chrome.windows.create(
+ { url: optionsUrl, type: 'popup', width: 350, height: 625, left: 0 },
+ () => {
+ chrome.extension.sendMessage(
+ { cmd: '来自前台页面的主动调用' },
+ function(response) {
+ console.log(123, response)
+ }
+ ) //测试前台掉后台
+ }
+ )
+ })
+ }
+}
+
+const background = new Background()
+++ /dev/null
-import bytom from "./bytom";
-
-function account(bytom) {
- this.bytom = bytom;
-}
-
-account.prototype.create = function(
- accountAlias,
- keyAlias,
- passwd,
- success,
- error
-) {
- let retPromise = new Promise((resolve, reject) => {
- this.bytom.keys
- .create(keyAlias, passwd)
- .then(res => {
- this.bytom.accounts
- .createAccountUseServer(res.xpub, accountAlias)
- .then(ret => {
- resolve(ret);
- })
- .catch(error => {
- reject(error);
- });
- })
- .catch(error => {
- reject(error);
- });
- });
- return retPromise;
-};
-
-account.prototype.backup = function() {
- return bytom.wallet.backup();
-};
-account.prototype.restore = function(walletImage) {
- return bytom.wallet.restore(walletImage);
-};
-
-export default account;
+++ /dev/null
-import Bytom from "bytom-js-sdk";
-
-var networks = {
- testnet: "https://api-dev.bycoin.im:8000/"
-};
-
-var bytom = new Bytom(networks, chrome.runtime.getURL("wasm/main.wasm"));
-
-// bytom.sdk.networks = function() {
-// return bytom.networks;
-// };
-bytom.sdk.setupNet = function(network) {
- bytom.setNetType(network);
-};
-
-export default bytom.sdk;
+++ /dev/null
-console.log("This is BACKGROUND page!");
-
-import bytom from "./bytom";
-import query from "./query";
-import account from "./account";
-import transaction from "./transaction";
-
-const ASSET_BTM =
- "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
-
-var globalAccounts = [];
-
-function refreshBalances() {
- globalAccounts.forEach(account => {
- bytom.accounts.listAddressUseServer(account.guid).then(addresses => {
- let balance = 0;
- addresses.forEach(item => {
- if (item.balances != null) {
- item.balances.forEach(asset => {
- if (asset.asset == ASSET_BTM) {
- balance += asset.balance;
- }
- });
- }
- });
-
- if (account.balance != balance) {
- account.balance = balance / 100000000;
- }
- });
- });
-}
-
-function refreshAccounts(success) {
- bytom.accounts
- .listAccountUseServer()
- .then(accounts => {
- console.log("refreshAccounts", accounts);
- globalAccounts = accounts;
- globalAccounts.forEach(account => {
- if (account.balance == null) {
- account.balance = 0;
- }
- });
- success();
- })
- .catch(error => {
- console.log(error);
- });
-}
-refreshAccounts(refreshBalances);
-setInterval(refreshBalances, 10000);
-
-var bytomQuery = new query(bytom);
-var bytomAccount = new account(bytom);
-var bytomTransaction = new transaction(bytom);
-bytomAccount.list = function() {
- let retPromise = new Promise((resolve, reject) => {
- refreshAccounts(() => {
- refreshBalances();
- resolve(globalAccounts);
- });
- });
- return retPromise;
-};
-
-window.bytomSystem = bytom;
-window.bytomQuery = bytomQuery;
-window.bytomAccount = bytomAccount;
-window.bytomTransaction = bytomTransaction;
-
-chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
- console.log("收到来自content-script的消息：");
- console.log(request);
- console.log(sender);
- console.log(sendResponse);
- // sendResponse("我是后台，我已收到你的消息：" + JSON.stringify(request));
-
- if (request.bty == "transfer") {
- var optionsUrl = chrome.extension.getURL("pages/prompt.html");
- console.log(optionsUrl);
- chrome.tabs.query({ url: optionsUrl }, (tabs) => {
- console.log(22, tabs)
- chrome.windows.create({ url: optionsUrl, type: "popup", width: 350, height: 625, left: 0 }, ()=>{
- chrome.extension.sendMessage( {cmd: "来自前台页面的主动调用"}, function(response) { console.log(123, response); } );//测试前台掉后台
- });
-
- });
- }
-});
+++ /dev/null
-import bytom from "./bytom";
-
-function query(bytom) {
- this.bytom = bytom;
-}
-
-query.prototype.blockCount = function() {
- return bytom.query.getblockcount();
-};
-query.prototype.asset = function(asset_id) {
- return bytom.query.asset(asset_id);
-};
-
-export default query;
+++ /dev/null
-import bytom from "./bytom";
-
-function transaction(bytom) {
- this.bytom = bytom;
-}
-
-transaction.prototype.list = function(guid, address, start, limit) {
- return this.bytom.transaction.list(guid, address, start, limit);
-};
-
-transaction.prototype.build = function(guid, to, asset, amount, fee){
- let retPromise = new Promise((resolve, reject) => {
- this.bytom.transaction.buildPayment(guid, to, asset, Number(amount*100000000)).then(res => {
- resolve(res);
- }).catch(error => {
- reject(error);
- });
- })
- return retPromise;
-}
-transaction.prototype.transfer = function(guid, transaction, password){
- let retPromise = new Promise((resolve, reject) => {
- this.bytom.transaction.signTransaction(guid, JSON.stringify(transaction), password).then(ret => {
- this.bytom.transaction.submitPayment(guid, ret.raw_transaction, ret.signatures).then(res3 => {
- resolve(res3);
- }).catch(error => {
- reject(error);
- });
- }).catch(error => {
- reject(error);
- });
- })
-
- return retPromise
-}
-
-export default transaction;
+++ /dev/null
-const EVT_MAP = {}
-
-chrome.runtime.onMessage.addListener(({ event, params }, sender, sendResponse) => {
- const fn = EVT_MAP[event]
- if (fn) {
- fn(params, sendResponse)
- }
- return true
-})
-
-export default {
- $on (event, fn) {
- EVT_MAP[event] = fn
- },
-
- $off (event) {
- delete EVT_MAP[event]
- },
-
- $emit (event, params, inBg) {
- return new Promise(resolve => {
- if (inBg) {
- chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
- const activeId = tabs[0] ? tabs[0].id : ''
- if (activeId) {
- chrome.tabs.sendMessage(activeId, { event, params }, resolve)
- }
- })
- } else {
- chrome.runtime.sendMessage({ event, params }, resolve)
- }
- })
- }
-}
\ No newline at end of file
--- /dev/null
+import { EncryptedStream, LocalStream } from 'extension-streams'
+
+class Content {
+ constructor() {
+ this.setupInjectScript()
+ this.setupEncryptedStream()
+ }
+
+ setupInjectScript() {
+ const content = chrome.extension.getURL('js/content.js')
+ let script = document.createElement('script')
+ script.setAttribute('type', 'text/javascript')
+ script.setAttribute('src', content)
+ document.body.appendChild(script)
+ }
+
+ setupEncryptedStream() {
+ // stream = new EncryptedStream('bytom', IdGenerator.text(256))
+ // stream.listenWith(msg => this.contentListener(msg))
+ }
+
+ contentListener(msg) {
+ console.log('event.data', msg)
+ }
+}
+
+const content = new Content()
+++ /dev/null
-console.log("This is CONTENT page!");
+++ /dev/null
-const content = chrome.extension.getURL("js/content.js");
-const script = document.createElement("script");
-script.setAttribute("type", "text/javascript");
-script.setAttribute("src", content);
-document.body.appendChild(script);
-
-// setup listenr
-window.addEventListener("message", function (event) {
- if (event.source != window) {
- return;
- }
-
- console.log("event.data", event.data);
- if(event.data.bty == 'transfer'){
- chrome.runtime.sendMessage(event.data, function (response) {
- console.log("transfer response", response);
- });
- }
-
-},false);
\ No newline at end of file
--- /dev/null
+console.log('This is CONTENT page!')
--- /dev/null
+import bytom from './bytom'
+
+let account = {
+ setupNet: bytom.setupNet
+}
+
+account.create = function(accountAlias, keyAlias, passwd, success, error) {
+ let retPromise = new Promise((resolve, reject) => {
+ bytom.keys
+ .create(keyAlias, passwd)
+ .then(res => {
+ bytom.accounts
+ .createAccountUseServer(res.xpub, accountAlias)
+ .then(ret => {
+ resolve(ret)
+ })
+ .catch(error => {
+ reject(error)
+ })
+ })
+ .catch(error => {
+ reject(error)
+ })
+ })
+ return retPromise
+}
+
+const ASSET_BTM =
+ 'ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'
+
+account.balance = function(guid, dstAsset) {
+ if (dstAsset == undefined) {
+ dstAsset = ASSET_BTM
+ }
+
+ let retPromise = new Promise((resolve, reject) => {
+ bytom.accounts
+ .listAddressUseServer(guid)
+ .then(addresses => {
+ let balance = 0
+ addresses.forEach(item => {
+ if (item.balances != null) {
+ item.balances.forEach(asset => {
+ if (asset.asset == dstAsset) {
+ balance += asset.balance
+ }
+ })
+ }
+ })
+ resolve(balance / 100000000)
+ })
+ .catch(error => {
+ reject(error)
+ })
+ })
+ return retPromise
+}
+
+account.list = function() {
+ let retPromise = new Promise((resolve, reject) => {
+ bytom.accounts
+ .listAccountUseServer()
+ .then(accounts => {
+ accounts.forEach(account => {
+ this.balance(account.guid).then(balance => {
+ account.balance = balance
+ })
+ })
+ resolve(accounts)
+ })
+ .catch(error => {
+ reject(error)
+ })
+ })
+
+ return retPromise
+}
+
+account.backup = function() {
+ return bytom.wallet.backup()
+}
+
+account.restore = function(walletImage) {
+ return bytom.wallet.restore(walletImage)
+}
+
+export default account
--- /dev/null
+import bytom from "./bytom";
+
+function query(bytom) {
+ this.bytom = bytom;
+}
+
+
+export default query;
--- /dev/null
+import bytom from "./bytom";
+
+let transaction = {};
+
+transaction.list = function(guid, address, start, limit) {
+ return bytom.transaction.list(guid, address, start, limit);
+};
+
+transaction.blockCount = function() {
+ return bytom.query.getblockcount();
+};
+
+transaction.asset = function(asset_id) {
+ return bytom.query.asset(asset_id);
+};
+
+transaction.build = function(guid, to, asset, amount, fee) {
+ let retPromise = new Promise((resolve, reject) => {
+ bytom.transaction
+ .buildPayment(guid, to, asset, Number(amount * 100000000))
+ .then(res => {
+ resolve(res);
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
+ return retPromise;
+};
+
+transaction.transfer = function(guid, transaction, password) {
+ let retPromise = new Promise((resolve, reject) => {
+ bytom.transaction
+ .signTransaction(guid, JSON.stringify(transaction), password)
+ .then(ret => {
+ bytom.transaction
+ .submitPayment(guid, ret.raw_transaction, ret.signatures)
+ .then(res3 => {
+ resolve(res3);
+ })
+ .catch(error => {
+ reject(error);
+ });
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
+
+ return retPromise;
+};
+
+export default transaction;
+++ /dev/null
-<template>
- <div id="app">
- <img src="../assets/logo.png">
- <h1>{{ msg }}</h1>
- </div>
-</template>
-
-<script>
-export default {
- name: 'app',
- data () {
- return {
- msg: 'This is options page !'
- }
- }
-}
-</script>
-
-<style lang="scss">
-#app {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
-}
-
-h1, h2 {
- font-weight: normal;
-}
-
-ul {
- list-style-type: none;
- padding: 0;
-}
-
-li {
- display: inline-block;
- margin: 0 10px;
-}
-
-a {
- color: #42b983;
-}
-</style>
+++ /dev/null
-import Vue from 'vue'
-import App from './App.vue'
-
-new Vue({
- el: '#app',
- render: h => h(App)
-})
--- /dev/null
+import App from './app'
+
+class Popup {
+ constructor() {
+ if (localStorage.login == undefined) {
+ App.welcome()
+ return
+ }
+
+ App.launth()
+ }
+}
+
+const popup = new Popup()
+++ /dev/null
-import App from "../app";
-
-class Popup {
- constructor() {
- if (localStorage.login == undefined) {
- App.welcome();
- return;
- }
-
- App.launth();
- }
-}
-
-const popup = new Popup();
--- /dev/null
+// import App from "../app";
+
+class Prompt {
+ constructor() {
+ // App.transfer();
+ }
+}
+
+const prompt = new Prompt()
+++ /dev/null
-import App from "../app";
-
-class Prompt {
- constructor() {
- App.transfer();
- }
-}
-
-const prompt = new Prompt();
OSDN Git Service
