From e02c0d1cf25e4bb4a4373cccc8748a7bef3c71d0 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Thu, 9 Feb 2023 20:16:22 +0100
Subject: [PATCH] Fix phone and styles for card (#951)

Co-authored-by: Stefan Popov <17688105+stefashkaa@users.noreply.github.com>
---
 src/components/SoraCard/steps/Phone.vue | 13 +++++++++++--
 src/components/X1/X1Dialog.vue          | 15 +++++++++------
 src/store/soraCard/actions.ts           |  4 ++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/SoraCard/steps/Phone.vue b/src/components/SoraCard/steps/Phone.vue
index 2b4e93887..59d6412db 100644
--- a/src/components/SoraCard/steps/Phone.vue
+++ b/src/components/SoraCard/steps/Phone.vue
@@ -45,7 +45,7 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-import { mixins } from '@soramitsu/soraneo-wallet-web';
+import { mixins, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
 import { action, getter, state } from '@/store/decorators';
 import { VerificationStatus } from '@/types/card';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
@@ -53,6 +53,7 @@ import { XOR } from '@sora-substrate/util/build/assets/consts';
 @Component
 export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin) {
   @state.soraCard.authLogin authLogin!: any;
+  @state.wallet.settings.soraNetwork soraNetwork!: WALLET_CONSTS.SoraNetwork;
 
   @getter.soraCard.currentStatus private currentStatus!: VerificationStatus;
   @getter.soraCard.isEuroBalanceEnough isEuroBalanceEnough!: boolean;
@@ -134,6 +135,10 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin)
     return 'SEND SMS CODE';
   }
 
+  get isMainnet(): boolean {
+    return this.soraNetwork === WALLET_CONSTS.SoraNetwork.Prod;
+  }
+
   get sendSmsDisabled(): boolean {
     return !this.phoneNumber || this.smsSent;
   }
@@ -143,7 +148,11 @@ export default class Phone extends Mixins(TranslationMixin, mixins.LoadingMixin)
   }
 
   get phoneInputDescription(): string {
-    if (this.smsSent) return 'We’ve sent you an SMS code. Check your messages!';
+    if (this.smsSent) {
+      return this.isMainnet
+        ? 'We’ve sent you an SMS code. Check your messages!'
+        : 'Your code for testing purposes: 123456';
+    }
     return 'We’ll send you an SMS code.';
   }
 
diff --git a/src/components/X1/X1Dialog.vue b/src/components/X1/X1Dialog.vue
index dd108a524..13123e479 100644
--- a/src/components/X1/X1Dialog.vue
+++ b/src/components/X1/X1Dialog.vue
@@ -95,10 +95,10 @@ export default class X1Dialog extends Mixins(mixins.DialogMixin, mixins.LoadingM
 </script>
 
 <style lang="scss">
-.x1-dialog .el-dialog {
-  .wrapper {
-    min-height: 320px;
-  }
+.x1-dialog .el-dialog .wrapper {
+  min-height: 320px;
+  padding: $basic-spacing-medium;
+  margin: -10px -20px -20px;
 }
 </style>
 
@@ -110,9 +110,9 @@ export default class X1Dialog extends Mixins(mixins.DialogMixin, mixins.LoadingM
   border-radius: 28px;
   background-color: var(--s-color-status-error-background);
   padding: $basic-spacing;
-  margin-bottom: $basic-spacing / 2;
+  margin-bottom: $inner-spacing-small;
 
-  .disclaimer-warning-icon {
+  & &-warning-icon {
     margin-right: $basic-spacing;
 
     .s-icon-notifications-alert-triangle-24 {
@@ -125,4 +125,7 @@ export default class X1Dialog extends Mixins(mixins.DialogMixin, mixins.LoadingM
     margin-top: $basic-spacing / 2;
   }
 }
+[design-system-theme='dark'] .disclaimer-warning-icon .s-icon-notifications-alert-triangle-24 {
+  color: var(--s-color-base-content-primary);
+}
 </style>
diff --git a/src/store/soraCard/actions.ts b/src/store/soraCard/actions.ts
index bd0233955..d1b7e8391 100644
--- a/src/store/soraCard/actions.ts
+++ b/src/store/soraCard/actions.ts
@@ -9,13 +9,13 @@ import { Status } from '@/types/card';
 import { loadScript } from 'vue-plugin-load-script';
 
 const actions = defineActions({
-  calculateXorRestPrice(context, xorPerEuro): void {
+  calculateXorRestPrice(context, xorPerEuro: FPNumber): void {
     const { state, commit } = soraCardActionContext(context);
     const { totalXorBalance } = state;
     const euroToPay = FPNumber.HUNDRED.add(FPNumber.ONE).sub(totalXorBalance.mul(xorPerEuro));
     const euroToPayInXor = euroToPay.div(xorPerEuro);
 
-    commit.setXorPriceToDeposit(euroToPayInXor);
+    commit.setXorPriceToDeposit(euroToPayInXor.dp(3));
   },
 
   async calculateXorBalanceInEuros(context, { xorPerEuro, xorTotalBalance }): Promise<void> {