Merge pull request #62 from GetScatter/master

Better mobile support, and updating eosio libs for faster signing and fixes for node issues

package.json

@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "@veriff/js-sdk": "^1.0.0",
-    "@walletpack/bitcoin": "^1.0.55",
-    "@walletpack/core": "^1.0.50",
-    "@walletpack/eosio": "^0.0.61",
-    "@walletpack/ethereum": "^0.0.60",
-    "@walletpack/fio": "^0.0.28",
-    "@walletpack/tron": "^0.0.62",
+    "@walletpack/bitcoin": "^1.0.56",
+    "@walletpack/core": "^1.0.51",
+    "@walletpack/eosio": "^0.0.67",
+    "@walletpack/ethereum": "^0.0.61",
+    "@walletpack/fio": "^0.0.29",
+    "@walletpack/tron": "^0.0.63",
     "aes-oop": "^1.0.4",
     "bip32": "^2.0.4",
     "bip39": "^2.6.0",
@@ -49,9 +49,9 @@
     "@babel/cli": "^7.5.0",
     "@babel/core": "^7.5.0",
     "@babel/node": "^7.5.0",
+    "@fortawesome/fontawesome-pro": "^5.10.1",
     "@babel/preset-env": "^7.5.2",
     "@babel/register": "^7.4.4",
-    "@fortawesome/fontawesome-pro": "^5.10.1",
     "@vue/cli-plugin-babel": "^3.9.0",
     "@vue/cli-service": "^3.9.0",
     "chai": "^4.2.0",

src/components/ManageAccounts.vue

@@ -5,7 +5,7 @@
 			<Button v-show="!collapsedSidebar" v-tooltip="'Refresh'" small="1" :icon="`fal fa-sync ${loadingAccounts ? 'fa-spin' : ''}`" :disabled="loadingAccounts" @click.native="refreshAccounts" />
 			<Button v-show="!collapsedSidebar" v-tooltip="'Networks'" small="1" icon="fal fa-globe-americas" @click.native="manageNetworks" />
 			<Button v-show="!collapsedSidebar" v-tooltip="'Keys'" small="1" icon="fal fa-key" @click.native="manageKeys" />
-			<Button small="1" icon="fas fa-user" @click.native="toggleCollapsed" />
+			<Button v-if="!isMobile || !collapsedSidebar" small="1" icon="fas fa-user" @click.native="toggleCollapsed" />
 		</section>
 
 		<SearchBar placeholder="Search accounts..." v-show="!collapsedSidebar" v-on:terms="x => search = x" />
@@ -60,6 +60,7 @@
 	import BalanceService from '@walletpack/core/services/blockchain/BalanceService';
 	import Popups from "../util/Popups";
 	import PopupService from "../services/utility/PopupService";
+	import {RouteNames} from "../vue/Routing";
 
 	export default {
 		components:{
@@ -91,6 +92,9 @@
 			enabledAccounts(){
 				return SingularAccounts.accounts(this.networks);
 			},
+			isSettings(){
+				return this.$route.name === RouteNames.Settings
+			},
 		},
 		mounted(){
 			this.refreshAccounts()
@@ -161,6 +165,7 @@
 				} else {
 					SingularAccounts.setPredefinedAccount(network, account);
 				}
+
 			},
 			async removeAccount(account, network){
 				if(this.enabledAccounts.find(x => x.unique() === account.unique())){
@@ -211,7 +216,7 @@
 		width:$accountssidebar;
 		border-left:1px solid $borderlight;
 		padding:20px;
-		z-index:2;
+		z-index:3;
 
 		transition:width 0.2s ease;
 
@@ -416,4 +421,12 @@
 		}
 	}
 
+	.mobile {
+
+		.manage-accounts {
+			border-left: 1px solid transparent;
+			z-index:-1;
+		}
+	}
+
 </style>

src/components/NavigationBar.vue

@@ -3,7 +3,7 @@
 		<!--<router-link :to="{name:RouteNames.Dashboard}" class="item"><i class="fal fa-drafting-compass"></i> <span>Explore</span></router-link>-->
 		<router-link :to="{name:RouteNames.Wallet, query:{type:'assets'}}" class="item"><i class="fal fa-wallet"></i> <span>Wallet</span></router-link>
 		<router-link :to="{name:RouteNames.Identity}" class="item"><i class="fal fa-id-badge"></i> <span>Identity</span></router-link>
-		<router-link :to="{name:RouteNames.Apps}" class="item"><i class="fal fa-rocket"></i> <span>Apps</span></router-link>
+		<!--<router-link :to="{name:RouteNames.Apps}" class="item"><i class="fal fa-rocket"></i> <span>Apps</span></router-link>-->
 		<!--<router-link :to="{name:RouteNames.Socialize}" class="item"><i class="fal fa-comments"></i> <span>Socialize</span></router-link>-->
 	</section>
 </template>
@@ -27,7 +27,7 @@
 		bottom:0;
 		left:0;
 		right:0;
-		z-index:2;
+		z-index:3;
 		box-shadow: 0 2px 10px 0 rgba(7,153,255,0.08), 0 8px 60px 0 rgba(7,153,255,0.25);
 		border-left:1px solid $borderlight;
 		border-right:1px solid $borderlight;

src/components/TopActions.vue

@@ -1,12 +1,12 @@
 <template>
 	<section class="top-actions">
 		<section class="visible-bar" :class="{'active':loadingBalances}" :style="{'color':topActionsColor}">
-			<section class="balance" v-if="!isMobile">
-				<span class="number">{{currency}}<AnimatedNumber :number="totalBalance" /></span>
+			<section class="balance" v-if="!isSettings" :class="{'wallet':isWallet}">
+				<span class="number" v-if="!isMobile">{{currency}}<AnimatedNumber :number="totalBalance" /></span>
 				<span class="refresh" :class="{'loading':loadingBalances}" @click="refreshBalances">
 					<i class="fas fa-sync-alt" :class="{'animate-spin':loadingBalances}"></i>
-					<span v-if="!loadingBalances">Refresh Balances</span>
-					<span v-if="loadingBalances">Refreshing</span>
+					<span v-if="!isMobile && !loadingBalances">Refresh Balances</span>
+					<span v-if="!isMobile && loadingBalances">Refreshing</span>
 				</span>
 			</section>
 			<section>
@@ -15,7 +15,7 @@
 					<span v-if="!isSettings">Settings</span>
 					<span v-if="isSettings">Back</span>
 				</figure>
-				<figure v-if="isMobile" @click="toggleCollapsed" class="icon">
+				<figure v-if="isMobile && !isSettings" @click="toggleCollapsed" class="icon">
 					<i class="fas fa-user"></i>
 				</figure>
 				<!--<figure @click="selectAccount" class="icon"><i class="fal fa-user"></i><span>Accounts</span></figure>-->
@@ -110,6 +110,9 @@
 			isSettings(){
 				return this.$route.name === RouteNames.Settings
 			},
+			isWallet(){
+				return this.$route.name === RouteNames.Wallet
+			},
 			usingIdentity(){
 				return this.scatter.keychain.identities[0].ridl.toString().indexOf('::') > -1;
 			},
@@ -488,6 +491,22 @@
 						}
 					}
 				}
+				.balance {
+					&.wallet {
+						.number {
+							top:-20px;
+							opacity:0;
+						}
+						.refresh {
+							top:20px;
+							opacity:1;
+
+							i {
+								font-size: 22px;
+							}
+						}
+					}
+				}
 			}
 		}
 	}

src/components/popups/ExportPrivateKey.vue

@@ -13,6 +13,13 @@
 				<Input disabled="1" :text="privateKey" />
 				<Button v-tooltip="`Copy key`" icon="fas fa-copy" @click.native="copyKey" />
 			</section>
+
+			<section class="qr">
+				<img v-if="qr" :src="qr" />
+				<div v-else>
+					<i class="animate-spin fas fa-spinner"></i>
+				</div>
+			</section>
 		</section>
 
 
@@ -30,17 +37,20 @@
 	import {blockchainName} from '@walletpack/core/models/Blockchains'
 	import Popups from "../../util/Popups";
 	import PopupService from "../../services/utility/PopupService";
+	import QRService from "../../services/utility/QRService";
 
 	export default {
 		props:['popin', 'closer'],
 		data(){return {
 			privateKey:null,
+			qr:null,
 		}},
-		created(){
+		async created(){
 			if(window.wallet){
-				window.wallet.getPrivateKey(this.keypair.id, this.keypair.blockchains[0]).then(privateKey => {
+				window.wallet.getPrivateKey(this.keypair.id, this.keypair.blockchains[0]).then(async privateKey => {
 					if(!privateKey) this.closer(null);
 					this.privateKey = privateKey;
+					this.qr = await QRService.createQR(privateKey);
 				})
 			}
 		},
@@ -67,6 +77,30 @@
 		width:calc(100% - 80px);
 		margin:0 auto;
 
+		$qr:120px;
+		.qr {
+			display:inline-block;
+			height:$qr;
+			width:$qr;
+			background:red;
+
+			img {
+				height:$qr;
+				width:$qr;
+			}
+
+			div {
+				height:$qr;
+				width:$qr;
+				font-size: 48px;
+				display:flex;
+				justify-content: center;
+				align-items: center;
+				margin:0 auto;
+				color:$grey;
+			}
+		}
+
 		.sub-title {
 			background:$red;
 			padding:5px 10px;

src/components/popups/ManageKeys.vue

@@ -38,6 +38,7 @@
 					<br>
 
 					<Button text="Generate New Key" style="margin-bottom:5px;" primary="1" @click.native="generateKey" />
+					<Button text="Import From QR" @click.native="importQR" />
 					<Button v-if="canUseHardware" text="Import From Hardware" primary="1" @click.native="importingHardware = true" />
 				</section>
 
@@ -69,7 +70,7 @@
 										<Button v-if="!key.external" v-tooltip="`Convert blockchains`" icon="fal fa-link" @click.native="convertKeypair(key)" />
 										<Button v-if="detachedKey(key)" icon="fal fa-ban" v-tooltip="`Remove key`" @click.native="removeKey(key)" />
 										<Button v-if="canManuallyLink(key)" icon="fal fa-user" v-tooltip="`Manually link account`" @click.native="manuallyLinkAccount(key)" />
-										<Button primary="1" v-if="!key.external" text="Export" icon="fal fa-key" @click.native="exportKey(key)" />
+										<Button style="flex:0 0 auto;" primary="1" v-if="!key.external" text="Export" icon="fal fa-key" @click.native="exportKey(key)" />
 									</section>
 
 								</section>
@@ -155,6 +156,8 @@
 			...mapState([
 				'scatter',
 				'accountCache',
+				'isMobile',
+				'isMobileDevice',
 			]),
 			importing(){
 				return this.popin.data.props.importing
@@ -206,6 +209,13 @@
 					this.importingHardware = false;
 				}
 			},
+			async importQR(){
+				PopupService.push(Popups.scanQR(key => {
+					if(!key) return;
+					this.privateKey = key;
+					this.checkTextKey();
+				}));
+			},
 			async generateKey(){
 				const keypair = Keypair.placeholder();
 				keypair.blockchains = [this.blockchain];

src/components/wallet/Assets.vue

@@ -671,11 +671,11 @@
 					opacity:0;
 					display:flex;
 					align-items: center;
-					height:100%;
-					top:0;
 					bottom:0;
 					right:0;
 					transform:translateX(50px);
+					height:100%;
+					top:0;
 
 					button {
 						margin-left:5px;
@@ -757,6 +757,7 @@
 					&:focus {
 						.balance {
 							opacity:1;
+							transform:translateX(0px);
 						}
 					}
 				}
@@ -785,17 +786,23 @@
 					flex-direction:row;
 					justify-content:stretch;
 					transform:translateX(0px);
+					height:auto;
+					top:auto;
 
 					button {
 						flex-grow:1;
 						margin:0;
 						border:0;
 						border-radius:0;
+
+						&:last-child {
+							border-bottom-right-radius:4px;
+						}
 					}
 				}
 
 				.balance {
-					font-size: $font-size-large;
+					font-size: $font-size-medium;
 				}
 			}
 		}

src/services/utility/SingletonService.js

@@ -69,7 +69,7 @@ export default class SingletonService {
 		WebsocketAPIService.getApps();
 
 		// Allows free CPU for EOS Mainnet
-		EosioHelpers.apiPayingEosio();
+		// EosioHelpers.apiPayingEosio();
 
 
 

src/util/WalletTalk.js

@@ -256,7 +256,9 @@ export default class WalletTalk {
 					changePassword:async () => true,
 					hardwareTypes:async () => [],
 					hardwareKeys:() => [],
-					getPrivateKey:() => null,
+					getPrivateKey:async () => {
+						return '5KQwrPbwdL6PhXujxW37FSSQZ1JiwsST4cqQzDeyXtP79zkvFD3';
+					},
 					sign:() => 'tester',
 					encrypt:() => null,
 					decrypt:() => null,

src/views/Settings.vue

@@ -650,6 +650,8 @@
 	}
 
 	.settings {
+		position: relative;
+		z-index:10;
 
 		.loading-networks {
 			margin-top:20px;