Fetch balances from Albatross network during Checkout

nimiq · Sep 5, 2023 · e1cf406 · e1cf406
1 parent a46dc56
commit e1cf406
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/src/components/CheckoutCardNimiq.vue b/src/components/CheckoutCardNimiq.vue
@@ -88,7 +88,6 @@
             </PageFooter>
         </template>
     </SmallPage>
-    <Network ref="network" :visible="false" @head-change="onHeadChange"/>
 </div>
 </template>
 
@@ -116,15 +115,14 @@ import staticStore from '../lib/StaticStore';
 import { WalletInfo } from '../lib/WalletInfo';
 import { WalletStore } from '../lib/WalletStore';
 import { ParsedNimiqDirectPaymentOptions } from '../lib/paymentOptions/NimiqPaymentOptions';
-import Network from './Network.vue';
+import { NetworkClient } from '../lib/NetworkClient';
 import StatusScreen from './StatusScreen.vue';
 import CheckoutCard from './CheckoutCard.vue';
 import CurrencyInfo from './CurrencyInfo.vue';
 
 @Component({components: {
     AccountSelector,
     CurrencyInfo,
-    Network,
     PageBody,
     PageFooter,
     SmallPage,
@@ -158,6 +156,7 @@ class CheckoutCardNimiq
     private height: number = 0;
     private delayedShowStatusScreen: boolean = this.showStatusScreen;
     private _delayedHideStatusScreenTimeout: number = -1;
+    private network!: NetworkClient;
 
     protected async created() {
         if (this.paymentOptions.currency !== Currency.NIM) {
@@ -168,7 +167,10 @@ class CheckoutCardNimiq
 
     protected async mounted() {
         super.mounted();
-        // Requires Network child component to be rendered
+
+        this.network = NetworkClient.Instance;
+        await this.network.init();
+
         this.addConsensusListeners();
         this.updateBalancePromise = this.getBalances().then((balances) => {
             this.balancesUpdating = false;
@@ -236,8 +238,7 @@ class CheckoutCardNimiq
         const addresses = accountsAndContracts.map((accountOrContract) => accountOrContract.userFriendlyAddress);
 
         // Get balances through pico consensus, also triggers head-change event
-        const network = (this.$refs.network as Network);
-        const balances: Map<string, number> = await network.getBalances(addresses);
+        const balances: Map<string, number> = await this.network.getBalance(addresses);
 
         // Update accounts/contracts with their balances
         // (The accounts are still references to themselves in the wallets' accounts maps)
@@ -248,9 +249,9 @@ class CheckoutCardNimiq
             if ('type' in accountOrContract && accountOrContract.type === Nimiq.Account.Type.VESTING) {
                 // Calculate available amount for vesting contract
                 accountOrContract.balance = (accountOrContract as VestingContractInfo)
-                    .calculateAvailableAmount(this.height, Nimiq.Policy.coinsToSatoshis(balance));
+                    .calculateAvailableAmount(this.height, balance);
             } else {
-                accountOrContract.balance = Nimiq.Policy.coinsToSatoshis(balance);
+                accountOrContract.balance = balance;
             }
         }
 
@@ -278,14 +279,19 @@ class CheckoutCardNimiq
         this.height = head.height;
     }
 
-    private addConsensusListeners() {
-        const network = (this.$refs.network as Network);
-        network.$on(Network.Events.API_READY,
-            () => this.statusScreenStatus = this.$t('Contacting seed nodes...') as string);
-        network.$on(Network.Events.CONSENSUS_SYNCING,
-            () => this.statusScreenStatus = this.$t('Syncing consensus...') as string);
-        network.$on(Network.Events.CONSENSUS_ESTABLISHED,
-            () => this.statusScreenStatus = this.$t('Requesting balances...') as string);
+    private async addConsensusListeners() {
+        this.statusScreenStatus = this.$t('Contacting seed nodes...') as string;
+
+        const client = await this.network.innerClient!;
+        client.addConsensusChangedListener((consensus) => {
+            if (consensus === 'connecting') {
+                this.statusScreenStatus = this.$t('Contacting seed nodes...') as string;
+            } else if (consensus === 'syncing') {
+                this.statusScreenStatus = this.$t('Syncing consensus...') as string;
+            } else if (consensus === 'established') {
+                this.statusScreenStatus = this.$t('Requesting balances...') as string;
+            }
+        });
     }
 
     private async setAccountOrContract(walletId: string, address: string, isFromRequest = false) {

diff --git a/src/i18n/en.po b/src/i18n/en.po
@@ -408,7 +408,8 @@ msgstr ""
 msgid "Connecting to Nimiq..."
 msgstr ""
 
-#: src/components/CheckoutCardNimiq.vue:284
+#: src/components/CheckoutCardNimiq.vue:283
+#: src/components/CheckoutCardNimiq.vue:288
 #: src/views/CashlinkManage.vue:186
 #: src/views/CheckoutTransmission.vue:71
 msgid "Contacting seed nodes..."
@@ -891,7 +892,7 @@ msgstr ""
 msgid "Request failed: "
 msgstr ""
 
-#: src/components/CheckoutCardNimiq.vue:288
+#: src/components/CheckoutCardNimiq.vue:292
 msgid "Requesting balances..."
 msgstr ""
 
@@ -999,7 +1000,7 @@ msgstr ""
 msgid "Syncing"
 msgstr ""
 
-#: src/components/CheckoutCardNimiq.vue:286
+#: src/components/CheckoutCardNimiq.vue:290
 #: src/views/AddVestingContract.vue:11
 #: src/views/CashlinkManage.vue:188
 #: src/views/CheckoutTransmission.vue:73
@@ -1152,7 +1153,7 @@ msgstr ""
 msgid "Unsupported Request"
 msgstr ""
 
-#: src/components/CheckoutCardNimiq.vue:318
+#: src/components/CheckoutCardNimiq.vue:324
 msgid "Updating balances"
 msgstr ""
 

diff --git a/src/lib/NetworkClient.ts b/src/lib/NetworkClient.ts
@@ -54,6 +54,10 @@ export class NetworkClient {
         return [] as Array<PlainVestingContract & { address: string }>; // TODO
     }
 
+    public get innerClient() {
+        return this._clientPromise!;
+    }
+
     private get client() {
         if (!this._clientPromise) throw new Error('NetworkClient not initialized');
         return this._clientPromise.then(async (client) => {