progress

Author: onmax

src/components/DualCurrencyInput.vue

@@ -1,7 +1,5 @@
 <template>
 <div class="dual-currency-input">
-
-    {{ exchangeRate }}
   <section :class="{ orange: !!invalidReason }">
     <div class="flex-row primary-amount">
       <AmountInput v-model="_cryptoAmount" :decimals="cryptoCurrencyDecimals">
@@ -36,29 +34,13 @@
       </AmountInput>
     </span>
   </section>
-
-  <MessageTransition class="message-section">
-    <template v-if="invalidReason === 'insufficient-limit'">
-        <!-- TEMP: wording TBD -->
-        <i18n path="Max swappable amount is {amount}">
-            <Amount slot="amount" :amount="maxCrypto"
-                :currency="fiatCurrency" hideDecimals />
-        </i18n><br />
-        <a @click="$emit('set-max')">{{ $t('Sell max') }}</a>
-    </template>
-    <template v-else-if="invalidReason === 'insufficient-balance'">
-        {{ $t('Insufficient balance.') }} <a @click="$emit('set-max')">{{ $t('Sell max') }}</a>
-    </template>
-  </MessageTransition>
 </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from '@vue/composition-api';
 import { CryptoCurrency, FiatCurrency } from '@/lib/Constants';
-import { Amount } from '@nimiq/vue-components';
 import AmountInput from './AmountInput.vue';
-import MessageTransition from './MessageTransition.vue';
 
 export default defineComponent({
     props: {
@@ -84,7 +66,7 @@ export default defineComponent({
         },
         cryptoCurrencyDecimals: {
             type: Number,
-            default: 2,
+            default: 5,
         },
         maxCrypto: Number,
         maxFiat: Number,
@@ -111,15 +93,17 @@ export default defineComponent({
         watch(_fiatAmount, (newVal) => {
             if (syncing.value) return;
             syncing.value = true;
-            const newCryptoValue = newVal * props.exchangeRate;
+            const newCryptoValue = Number(((newVal / props.exchangeRate) * 10 ** props.cryptoCurrencyDecimals)
+                .toFixed(props.cryptoCurrencyDecimals));
             context.emit('update:cryptoAmount', newCryptoValue);
             setTimeout(() => syncing.value = false, 100);
         }, { lazy: true });
 
         watch(_cryptoAmount, (newVal) => {
             if (syncing.value) return;
             syncing.value = true;
-            const newFiatValue = newVal / props.exchangeRate;
+            const newFiatValue = Number(((newVal / 10 ** props.cryptoCurrencyDecimals) * props.exchangeRate)
+                .toFixed(props.fiatCurrencyDecimals));
             context.emit('update:fiatAmount', newFiatValue);
             setTimeout(() => syncing.value = false, 100);
         }, { lazy: true });
@@ -133,8 +117,6 @@ export default defineComponent({
     },
     components: {
         AmountInput,
-        MessageTransition,
-        Amount,
     },
 });
 </script>
@@ -143,7 +125,6 @@ export default defineComponent({
 .dual-currency-input {
     text-align: center;
     margin-top: 3rem;
-    margin-bottom: 2rem;
 
     &.orange {
         color: var(--nimiq-orange);
@@ -284,26 +265,5 @@ export default defineComponent({
             }
         }
     }
-    .message-section.message-transition {
-        width: 100%;
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 21px;
-        text-align: center;
-        color: var(--nimiq-orange);
-
-        transition-delay: 0ms ;
-        --message-transition-duration: 200ms;
-
-        a {
-            text-decoration: underline;
-            cursor: pointer;
-        }
-
-        & ::v-deep .fadeY-enter,
-        & ::v-deep .fadeY-leave-to {
-            transform: translateY(-25%) !important;
-        }
-    }
 }
 </style>

src/components/SinpeUserInfo.vue

@@ -25,20 +25,18 @@
 </template>
 
 <script lang="ts">
+import { useSinpeMovilStore } from '@/stores/SinpeMovil';
 import { defineComponent } from '@vue/composition-api';
 
 export default defineComponent({
     props: {},
     setup() {
-        // const { label, phoneNumber, initials } = useSinpeMovilStore();
+        const { label, phoneNumber, initials } = useSinpeMovilStore();
 
         return {
-            // label,
-            // phoneNumber,
-            // initials,
-            label: 'Sinpe Móvil',
-            initials: 'SM',
-            phoneNumber: '+506 1234 5678',
+            label,
+            phoneNumber,
+            initials,
         };
     },
     components: {

src/components/layouts/Sidebar.vue

@@ -55,7 +55,7 @@
                 }}</template>
             </Tooltip>
 
-            <Tooltip v-if="$config.moonpay.enabled"
+            <Tooltip v-if="enabledSellProviders.length > 0"
                 preferredPosition="top right"
                 :container="$parent"
                 theme="inverse"
@@ -168,6 +168,7 @@
 import { defineComponent, ref, computed, onMounted } from '@vue/composition-api';
 import { GearIcon, Tooltip, InfoCircleIcon } from '@nimiq/vue-components';
 import { RouteName } from '@/router';
+import { SwapAsset } from '@nimiq/libswap';
 import { assetToCurrency } from '@/lib/swap/utils/Assets';
 import AnnouncementBox from '../AnnouncementBox.vue';
 import AccountMenu from '../AccountMenu.vue';
@@ -306,7 +307,7 @@ export default defineComponent({
 
         const sellModals = {
             [SellProvider.Moonpay]: RouteName.MoonpaySellInfo,
-            [SellProvider.SinpeMovil]: RouteName.SinpeMovilSellInfo,
+            [SellProvider.SinpeMovil]: RouteName.SinpeMovilInfo,
             [SellProvider.Simplex]: RouteName.SellCrypto, // This is a fallback, should never be reached
         };
 
@@ -315,7 +316,10 @@ export default defineComponent({
             const modalName: RouteName = enabledSellProviders.value.length === 1
                 ? sellModals[enabledSellProviders.value[0]]
                 : RouteName.SellCrypto; // TODO: SellCrypto is for SEPA operations. We need to add a new Sell Selector.
-            openModal(modalName);
+            const params = enabledSellProviders.value.includes(SellProvider.SinpeMovil)
+                ? { pair: JSON.stringify([SwapAsset.NIM, SwapAsset.CRC]) }
+                : undefined;
+            openModal(modalName, params);
         }
 
         const nimSellOptions = computed(() => {