- {{ $t('Choose an Address') }}
-
-
- {{ $t('{appName} is asking for an address to use.', { appName: request.appName }) }}
-
+
+ {{ $t('Choose an Address') }}
+
+ {{ $t('{appName} is asking for an address to use.', { appName: request.appName }) }}
+
+
+
+
+ {{ $t('Choose an Account') }}
+
+ {{ $t('{appName} is asking for an account to use.', { appName: request.appName }) }}
+
+
+
+ {{ $t('Choose an Address') }}
+
+ {{ $t('Choose which Nimiq address to use.') }}
+
+
+
goToOnboarding(false)"/>
+
+
+
+
+
+
+
+
+
+
+
+
import { Component } from 'vue-property-decorator';
-import { Getter, Mutation } from 'vuex-class';
+import { Getter, Mutation, State } from 'vuex-class';
import { SmallPage, AccountSelector } from '@nimiq/vue-components';
+import { PageHeader, PageBody, PageFooter, Identicon, CaretRightSmallIcon } from '@nimiq/vue-components';
// @ts-ignore Could not find a declaration file for module '@nimiq/iqons'.
import { getBackgroundColorName } from '@nimiq/iqons';
import BitcoinSyncBaseView from './BitcoinSyncBaseView.vue';
@@ -52,14 +103,34 @@ import { ContractInfo } from '../lib/ContractInfo';
import WalletInfoCollector from '../lib/WalletInfoCollector';
import { WalletStore } from '../lib/WalletStore';
import { BtcAddressInfo } from '../lib/bitcoin/BtcAddressInfo';
+import { AccountType } from '../lib/Constants';
+import LoginFileIcon from '../components/icons/LoginFileIcon.vue';
+import LedgerIcon from '../components/icons/LedgerIcon.vue';
-@Component({components: { AccountSelector, SmallPage, StatusScreen, GlobalClose }})
+@Component({components: {
+ AccountSelector,
+ SmallPage,
+ StatusScreen,
+ GlobalClose,
+ PageHeader,
+ PageBody,
+ PageFooter,
+ Identicon,
+ CaretRightSmallIcon,
+ LoginFileIcon,
+ LedgerIcon,
+}})
export default class ChooseAddress extends BitcoinSyncBaseView {
@Static private request!: ParsedChooseAddressRequest;
@Getter private findWallet!: (id: string) => WalletInfo | undefined;
@Getter private processedWallets!: WalletInfo[];
+ @State private wallets!: WalletInfo[];
+
+ private AccountType = AccountType;
+ private preSelectedWallet: WalletInfo | null = null;
+
@Mutation('setActiveAccount') private $setActiveAccount!: (payload: {
walletId: string,
userFriendlyAddress: string,
@@ -100,14 +171,16 @@ export default class ChooseAddress extends BitcoinSyncBaseView {
external: BtcAddressInfo[];
};
try {
- btcAddresses = await WalletInfoCollector.detectBitcoinAddresses(walletInfo.btcXPub, /* startIndex */ 0);
+ btcAddresses = await WalletInfoCollector.detectBitcoinAddresses(
+ walletInfo.btcXPub,
+ /* startIndex */ 0,
+ /* onlyUnusedExternal */ 2,
+ );
} catch (error) {
this.state = this.State.SYNCING_FAILED;
this.error = error.message;
return;
}
- walletInfo.btcAddresses = btcAddresses;
- await WalletStore.Instance.put(walletInfo);
const unusedExternalAddresses = btcAddresses.external.filter((addressInfo) => !addressInfo.used);
if (unusedExternalAddresses.length > 0) {
// We try to use the 2nd unused address, because the first is reserved for swaps and not displayed
@@ -144,33 +217,130 @@ export default class ChooseAddress extends BitcoinSyncBaseView {
}
this.$router.push({name: RequestType.ONBOARD});
}
+
+ private backgroundClass(address: string) {
+ let color = getBackgroundColorName(address).toLowerCase() as string;
+
+ // Convert from public to CSS names
+ if (color === 'yellow') color = 'gold';
+ else if (color === 'indigo') color = 'blue';
+ else if (color === 'blue') color = 'light-blue';
+ else if (color === 'teal') color = 'green';
+ else if (color === 'green') color = 'light-green';
+
+ return `nq-${color}-bg`;
+ }
+
+ private async setWallet(wallet: WalletInfo, userSelected = true) {
+ if (wallet.accounts.size === 1) {
+ this.accountSelected(wallet.id, wallet.accounts.keys().next().value);
+ } else {
+ this.preSelectedWallet = wallet;
+ }
+ }
}