devop: cleanup

Author: gamalielhere

src/components/OrderForm/BuyForm.vue

@@ -29,7 +29,7 @@
           :error-messages="loading.alertMessage"
           :disabled="loading.data"
           :rules="rules"
-        ></v-text-field>
+        />
         <v-select
           style="max-width: 130px"
           class="rounded-right no-left-border buy-input"
@@ -99,6 +99,7 @@
           required
           variant="outlined"
           rounded="left"
+          readonly
           :rules="rules"
           :disabled="loading.data"
         ></v-text-field>
@@ -539,7 +540,6 @@ const networkPrice = computed(() => {
     : "0";
 });
 const networkFeeToFiat = computed(() => {
-  console.log(networkFeeWei.value, networkPrice.value);
   return fromWei(
     toBN(networkFeeWei.value).muln(parseFloat(networkPrice.value))
   );
@@ -605,17 +605,15 @@ const topperPrice = computed(() => {
 });
 const topperNetworkFeeText = computed(() => {
   return `${form.cryptoSelected} network fee (for transfers to your wallet) ~${
-    formatFiatValue(0.2, currencyConfig.value).value
+    formatFiatValue("0.2", currencyConfig.value).value
   }`;
 });
 const topperFiatAmount = computed(() => {
   return topperAvailable.value ? form.fiatAmount : "0.00";
 });
 const topperFiatFee = computed(() => {
-  const { cryptoAmount } = form;
   return topperAvailable.value
     ? BigNumber(topperFiatAmount.value)
-        .times(cryptoAmount)
         .times(0.029)
         .toFixed(fiatCurrency.value.decimals)
     : 0;

src/components/OrderForm/BuyProviders.vue

@@ -7,7 +7,7 @@
       </v-icon>
       <div class="mew-heading-2">Select provider</div>
     </div>
-    <div class="mew-heading-4">
+    <div class="mew-heading-2 font-weight-regular pb-2">
       Spending <b>{{ topperQuote.plusFeeF }}</b>
     </div>
     <div v-if="!processingBuy">
@@ -25,16 +25,16 @@
           <div class="d-flex mb-1 align-center justify-space-between">
             <div
               class="d-flex mew-heading-3"
-              :class="hideMoonpay ? 'text-red' : ''"
+              :class="disableMoonpay ? 'text-red' : ''"
             >
               {{ moonpayQuote.cryptoToFiat }}
               <div class="d-flex align-center">
                 <span
                   class="mew-heading-3 pl-1 mr-1"
-                  :class="hideMoonpay ? 'text-red' : ''"
+                  :class="disableMoonpay ? 'text-red' : ''"
                   >{{ selectedCryptoName }}</span
                 >
-                <v-tooltip v-if="!hideMoonpay" location="bottom">
+                <v-tooltip v-if="!disableMoonpay" location="bottom">
                   <template #activator="{ props }">
                     <v-icon
                       v-bind="props"
@@ -78,7 +78,7 @@
             class="grey-light greyPrimary--text"
             width="100%"
             variant="flat"
-            :disabled="hideMoonpay || loading"
+            :disabled="disableMoonpay || loading"
             @click.native="buy"
             >{{ moonpayBtnTitle }}</v-btn
           >
@@ -91,13 +91,20 @@
       <div class="section-block pa-5 mb-6">
         <div v-if="!loading" class="mb-3">
           <div class="d-flex mb-1 align-center justify-space-between">
-            <div class="d-flex mew-heading-3">
+            <div
+              class="d-flex mew-heading-3"
+              :class="disableSimplex ? 'text-red' : ''"
+            >
               {{ simplexQuote.cryptoToFiat }}
               <div class="d-flex align-center">
-                <span class="mew-heading-3 pl-1 mr-1">{{
-                  selectedCryptoName
-                }}</span>
-                <v-tooltip location="bottom">
+                <span
+                  :class="[
+                    disableSimplex ? 'text-red' : '',
+                    'mew-heading-3 pl-1 mr-1',
+                  ]"
+                  >{{ selectedCryptoName }}</span
+                >
+                <v-tooltip location="bottom" v-if="!disableSimplex">
                   <template #activator="{ props }">
                     <v-icon
                       v-bind="props"
@@ -146,7 +153,7 @@
         <div class="mew-label mb-5">Visa, Mastercard</div>
         <div>
           <v-btn
-            :disabled="loading"
+            :disabled="loading || disableSimplex"
             size="large"
             class="grey-light greyPrimary--text"
             width="100%"
@@ -162,13 +169,20 @@
       <div class="section-block pa-5">
         <div v-if="!loading" class="mb-3">
           <div class="d-flex mb-1 align-center justify-space-between">
-            <div class="d-flex mew-heading-3">
+            <div
+              class="d-flex mew-heading-3"
+              :class="disableTopper ? 'text-red' : ''"
+            >
               {{ topperQuote.cryptoToFiat }}
               <div class="d-flex align-center">
-                <span class="mew-heading-3 pl-1 mr-1">{{
-                  selectedCryptoName
-                }}</span>
-                <v-tooltip location="bottom">
+                <span
+                  :class="[
+                    disableTopper ? 'text-red' : '',
+                    'mew-heading-3 pl-1 mr-1',
+                  ]"
+                  >{{ selectedCryptoName }}</span
+                >
+                <v-tooltip location="bottom" v-if="!disableTopper">
                   <template #activator="{ props }">
                     <v-icon
                       v-bind="props"
@@ -227,7 +241,7 @@
         </div>
         <div>
           <v-btn
-            :disabled="loading"
+            :disabled="loading || disableTopper"
             size="large"
             class="grey-light greyPrimary--text"
             width="100%"
@@ -268,6 +282,7 @@ import {
   executeTopperPayment,
 } from "./order";
 import { defineComponent, inject } from "vue";
+import BigNumber from "bignumber.js";
 
 export default defineComponent({
   name: "BuyProviders",
@@ -336,8 +351,14 @@ export default defineComponent({
     isEUR() {
       return this.selectedFiatName === "EUR" || this.selectedFiatName === "GBP";
     },
-    hideMoonpay() {
-      return this.onlySimplex;
+    disableMoonpay() {
+      return BigNumber(this.moonpayQuote.cryptoToFiat).isLessThanOrEqualTo(0);
+    },
+    disableSimplex() {
+      return BigNumber(this.simplexQuote.cryptoToFiat).isLessThanOrEqualTo(0);
+    },
+    disableTopper() {
+      return BigNumber(this.topperQuote.cryptoToFiat).isLessThanOrEqualTo(0);
     },
     simplexBtnTitle() {
       return "BUY WITH SIMPLEX";

src/components/OrderForm/components/TokenSelect.vue

@@ -199,10 +199,7 @@ export default defineComponent({
       const a = this.tokensList.filter((token) => {
         const tokenSymbol = token.name.toLowerCase();
         const tokenName = token.subtext.toLowerCase();
-        if (
-          this.hasValidPrices(token.symbol) &&
-          (tokenSymbol.includes(filterText) || tokenName.includes(filterText))
-        )
+        if (tokenSymbol.includes(filterText) || tokenName.includes(filterText))
           return token;
       });
       return a;
@@ -212,14 +209,15 @@ export default defineComponent({
     },
     networkList() {
       return this.isSell
-        ? this.networks.filter(
-            (network) => network.name !== "DOT" && network.name !== "KSM"
-          )
+        ? this.networks.filter((network) => network.name === "ETH")
         : this.networks;
     },
     filteredNetworkList() {
+      const withTokensNetwork = this.networkList.filter(
+        (network) => network.tokens.length > 0
+      );
       const filter = this.networkSearchInput.toLowerCase();
-      return this.networkList.filter(
+      return withTokensNetwork.filter(
         (network) =>
           network.name.toLowerCase().includes(filter) ||
           network.name_long.toLowerCase().includes(filter) ||

src/layouts/LandingPage.vue

@@ -6,10 +6,10 @@
     <div class="background-image pt-15">
       <v-container>
         <v-row>
-          <v-col cols="12" md="5" lg="7">
+          <v-col cols="12" md="5" lg="6">
             <HeaderComponent />
           </v-col>
-          <v-col cols="12" md="7" lg="5">
+          <v-col cols="12" md="7" lg="6">
             <OrderForm />
           </v-col>
         </v-row>