Send Checkout transaction to PoS network

src/views/CheckoutTransmission.vue

@@ -12,25 +12,31 @@
                 @alternative-action="cancel"
                 lightBlue
             />
-            <Network ref="network" :visible="false"/>
         </SmallPage>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { Static } from '../lib/StaticStore';
 import { State } from 'vuex-class';
 import { SmallPage } from '@nimiq/vue-components';
-import Network from '../components/Network.vue';
+import type * as Nimiq from '@nimiq/albatross-wasm';
 import StatusScreen from '../components/StatusScreen.vue';
 import KeyguardClient from '@nimiq/keyguard-client';
 import { i18n } from '../i18n/i18n-setup';
 import { ERROR_CANCELED } from '../lib/Constants';
+import { bytesToHex, hexToBytes } from '../lib/BufferUtils';
+import { SignedTransaction } from '../../client/PublicRequestTypes';
+import { NetworkClient } from '../lib/NetworkClient';
 
-@Component({components: {StatusScreen, Network, SmallPage}})
+enum TxSendError {
+    TRANSACTION_EXPIRED = 'Transaction is expired',
+    TRANSACTION_NOT_RELAYED = 'Transaction could not be relayed',
+    TRANSACTION_INVALID = 'Transaction invalid',
+}
+
+@Component({components: {StatusScreen, SmallPage}})
 export default class CheckoutTransmission extends Vue {
-    @Static private keyguardRequest!: KeyguardClient.SignTransactionRequest;
     @State private keyguardResult!: KeyguardClient.SignTransactionResult;
 
     private status: string = i18n.t('Connecting to network...') as string;
@@ -43,38 +49,77 @@ export default class CheckoutTransmission extends Vue {
     }
 
     private async mounted() {
-        this.addConsensusListeners();
-        const tx = await (this.$refs.network as Network).createTx(Object.assign({
-            signerPubKey: this.keyguardResult.publicKey,
-        }, this.keyguardResult, this.keyguardRequest));
+        const { Transaction } = await window.loadAlbatross();
+
+        const hex = bytesToHex(this.keyguardResult.serializedTx);
+        const tx = Transaction.fromAny(hex);
 
         try {
-            const result = await (this.$refs.network as Network).sendToNetwork(tx);
+            await NetworkClient.Instance.init();
+            const client = await NetworkClient.Instance.innerClient;
+            this.addConsensusListener(client);
+
+            await client.waitForConsensusEstablished();
+            const details = await client.sendTransaction(tx);
+
+            if (details.state === 'new') {
+                throw new Error(TxSendError.TRANSACTION_NOT_RELAYED);
+            }
+
+            if (details.state === 'expired') {
+                throw new Error(TxSendError.TRANSACTION_EXPIRED);
+            }
+
+            if (details.state === 'invalidated') {
+                throw new Error(TxSendError.TRANSACTION_INVALID);
+            }
+
             this.state = StatusScreen.State.SUCCESS;
 
+            const plain = tx.toPlain();
+            const result: SignedTransaction = {
+                serializedTx: hex,
+                hash: plain.transactionHash,
+                raw: {
+                    ...plain,
+                    senderType: tx.senderType,
+                    recipientType: tx.recipientType,
+                    proof: tx.proof,
+                    signerPublicKey: 'publicKey' in plain.proof
+                        ? hexToBytes(plain.proof.publicKey)
+                        : 'creatorPublicKey' in plain.proof
+                            ? hexToBytes(plain.proof.creatorPublicKey)
+                            : new Uint8Array(0),
+                    signature: 'signature' in plain.proof
+                        ? hexToBytes(plain.proof.signature)
+                        : 'creatorSignature' in plain.proof
+                            ? hexToBytes(plain.proof.creatorSignature)
+                            : new Uint8Array(0),
+                    extraData: tx.data,
+                    networkId: tx.networkId,
+                },
+            };
+
             setTimeout(() => this.$rpc.resolve(result), StatusScreen.SUCCESS_REDIRECT_DELAY);
-        } catch (error) {
+        } catch (err) {
+            const error = err as Error;
             this.state = StatusScreen.State.WARNING;
-            if (error.message === Network.Errors.TRANSACTION_EXPIRED) {
+            if (error.message === TxSendError.TRANSACTION_EXPIRED) {
                 this.message = this.$t('Transaction is expired') as string;
-            } else if (error.message === Network.Errors.TRANSACTION_NOT_RELAYED) {
+            } else if (error.message === TxSendError.TRANSACTION_NOT_RELAYED) {
                 this.message = this.$t('Transaction could not be relayed') as string;
             } else {
                 this.message = error.message;
             }
         }
     }
 
-    private addConsensusListeners() {
-        const network = (this.$refs.network as Network);
-        network.$on(Network.Events.API_READY, () =>
-            this.status = this.$t('Contacting seed nodes...') as string);
-        network.$on(Network.Events.CONSENSUS_SYNCING, () =>
-            this.status = this.$t('Syncing consensus...') as string);
-        network.$on(Network.Events.CONSENSUS_ESTABLISHED, () =>
-            this.status = this.$t('Sending transaction...') as string);
-        network.$on(Network.Events.TRANSACTION_PENDING, () =>
-            this.status = this.$t('Awaiting receipt confirmation...') as string);
+    private addConsensusListener(client: Nimiq.Client) {
+        client.addConsensusChangedListener((state) => {
+            if (state === 'connecting') this.status = this.$t('Contacting seed nodes...') as string;
+            if (state === 'syncing') this.status = this.$t('Syncing consensus...') as string;
+            if (state === 'established') this.status = this.$t('Sending transaction...') as string;
+        });
     }
 
     private get title(): string {
@@ -94,4 +139,3 @@ export default class CheckoutTransmission extends Vue {
     }
 }
 </script>
-