wait for txns in get free deso flows (#309)

* wait for txns in get free deso flows

* lint and format

* Committed -> InMempool

Author: lazynina

src/app/get-deso/get-deso.component.html

@@ -45,6 +45,13 @@ <h3 class="text--neutral-white">Get starter $DESO</h3>
           (error)="onCaptchaError($event)"
         >
         </ng-hcaptcha>
+        <div
+          *ngIf="captchaFlowSpinner"
+          class="padding-top--medium display--flex flex--column items--center"
+        >
+          <div>Waiting for your $DESO to arrive.</div>
+          <div class="spinner-border" style="width: 6rem; height: 6rem"></div>
+        </div>
         <div *ngIf="captchaFailed" class="warning--error margin-top--small">
           There was an issue verifying your captcha. Please
           <a (click)="resetCaptcha()">reset the captcha</a> and try again, or

src/app/get-deso/get-deso.component.ts

@@ -48,6 +48,8 @@ export class GetDesoComponent implements OnInit {
   captchaFailed = false;
   // Whether the backend is offering rewards for solving captchas.
   captchaAvailable = true;
+  // Loader shown while waiting for DESO to arrive.
+  captchaFlowSpinner = false;
 
   publicKeyCopied = false;
 
@@ -160,19 +162,26 @@ export class GetDesoComponent implements OnInit {
   }
 
   onCaptchaVerify(token: string): void {
-    this.backendAPIService.VerifyHCaptcha(token, this.publicKeyAdded).subscribe(
-      (res) => {
-        if (res.Success) {
-          this.isFinishFlowDisabled = false;
-          this.finishFlow();
-        } else {
+    this.captchaFlowSpinner = true;
+    this.backendAPIService
+      .VerifyHCaptcha(token, this.publicKeyAdded)
+      .subscribe(
+        async (res) => {
+          if (res.Success) {
+            await this.backendAPIService
+              .GetTxn(res.TxnHashHex, 'InMempool')
+              .toPromise();
+            this.isFinishFlowDisabled = false;
+            this.finishFlow();
+          } else {
+            this.captchaFailed = true;
+          }
+        },
+        (err) => {
           this.captchaFailed = true;
         }
-      },
-      (err) => {
-        this.captchaFailed = true;
-      }
-    );
+      )
+      .add(() => (this.captchaFlowSpinner = false));
   }
 
   onCaptchaExpired(event: any): void {

src/app/sign-up-get-starter-deso/sign-up-get-starter-deso.component.html

@@ -285,13 +285,21 @@ <h3 class="text--neutral-white">Confirm your authentication code</h3>
       </div>
     </div>
     <div class="margin-top--medium">
+      <div
+        *ngIf="submittingPhoneNumberVerificationCode"
+        class="padding-top--medium display--flex flex--column items--center"
+      >
+        <div>Waiting for your $DESO to arrive.</div>
+        <div class="spinner-border" style="width: 6rem; height: 6rem"></div>
+      </div>
       <button
         data-control-name="get-starter-deso-confirm-code-button"
         (click)="submitVerificationCode()"
         [ngClass]="{
           disabled: !verificationCodeForm.valid,
           'btn-loading': submittingPhoneNumberVerificationCode
         }"
+        [disabled]="submittingPhoneNumberVerificationCode"
         class="button--primary button--medium margin-bottom--medium"
       >
         Confirm
@@ -300,6 +308,7 @@ <h3 class="text--neutral-white">Confirm your authentication code</h3>
         data-control-name="get-starter-deso-back-button"
         *ngIf="displayForSignupFlow"
         (click)="backButtonClickedOnSubmitVerificationScreen()"
+        [disabled]="submittingPhoneNumberVerificationCode"
         class="button--primary--outline button--medium"
       >
         Back

src/app/sign-up-get-starter-deso/sign-up-get-starter-deso.component.ts

@@ -300,7 +300,8 @@ export class SignUpGetStarterDESOComponent implements OnInit {
         this.verificationCodeForm.value.verificationCode
       )
       .subscribe(
-        (res) => {
+        async (res) => {
+          await this.backendApi.GetTxn(res.TxnHashHex, 'InMempool').toPromise();
           this.screenToShow =
             SignUpGetStarterDESOComponent.COMPLETED_PHONE_NUMBER_VERIFICATION_SCREEN;
           this.phoneNumberVerified.emit();