From a1f3c95d4464019d972a7a7dd9d7602a5c0e314e Mon Sep 17 00:00:00 2001
From: cwlee <cwlee0@gmail.com>
Date: Mon, 21 Feb 2022 18:27:01 +0800
Subject: [PATCH 1/6] feat: display topup activity

---
 src/components/activity/ActivityItem.vue |  9 ++++++---
 src/modules/controllers.ts               | 13 +++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/activity/ActivityItem.vue b/src/components/activity/ActivityItem.vue
index fa6d78ba..085db99b 100644
--- a/src/components/activity/ActivityItem.vue
+++ b/src/components/activity/ActivityItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ACTIVITY_STATUS_CANCELLED, ACTIVITY_STATUS_SUCCESSFUL, ACTIVITY_STATUS_UNSUCCESSFUL } from "@toruslabs/base-controllers";
+import { ACTIVITY_ACTION_TOPUP, ACTIVITY_STATUS_CANCELLED, ACTIVITY_STATUS_UNSUCCESSFUL } from "@toruslabs/base-controllers";
 import { SolanaTransactionActivity } from "@toruslabs/solana-controllers";
 import dateFormat from "dateformat";
 import { computed } from "vue";
@@ -23,10 +23,10 @@ const openExplorerLink = (link: string) => {
 };
 const toggleDetails = (link: string) => {
   // showDetails.value = !showDetails.value;
-  openExplorerLink(link);
+  if (link.length) openExplorerLink(link);
 };
 const getTxStatusColor = (status: string): string => {
-  if (status === ACTIVITY_STATUS_SUCCESSFUL) return "#9BE8C7";
+  if (["finalized", "confirmed"].includes(status)) return "#9BE8C7";
   if (status === ACTIVITY_STATUS_UNSUCCESSFUL || status === ACTIVITY_STATUS_CANCELLED) return "#FEA29F";
   return "#E0E0E0";
 };
@@ -80,6 +80,9 @@ const amountIsVisible = computed(() => {
               {{ activity.send ? activity.to : activity.from }}
             </div>
           </div>
+          <div v-if="activity.action === ACTIVITY_ACTION_TOPUP" class="text-xs text-app-text-400 dark:text-app-text-dark-600 break-words">
+            Topup {{ activity.cryptoAmount }} {{ activity.cryptoCurrency }} from {{ activity.from }}
+          </div>
           <div
             v-if="!(activity.type === 'transfer' || activity.type === 'transferChecked')"
             class="text-xxs text-app-text-400 dark:text-app-text-dark-600 break-all"
diff --git a/src/modules/controllers.ts b/src/modules/controllers.ts
index d3c453dc..6dccdeca 100644
--- a/src/modules/controllers.ts
+++ b/src/modules/controllers.ts
@@ -4,6 +4,7 @@ import { Keypair, LAMPORTS_PER_SOL } from "@solana/web3.js";
 import {
   AccountImportedChannelData,
   addressSlicer,
+  ACTIVITY_ACTION_TOPUP,
   BasePopupChannelData,
   BillboardEvent,
   BROADCAST_CHANNELS,
@@ -18,6 +19,7 @@ import {
   ProviderConfig,
   SelectedAddresssChangeChannelData,
   THEME,
+  TransactionStatus,
   TX_EVENTS,
   UserInfo,
 } from "@toruslabs/base-controllers";
@@ -40,6 +42,8 @@ import OpenLoginFactory from "@/auth/OpenLogin";
 import config from "@/config";
 import TorusController, { DEFAULT_CONFIG, DEFAULT_STATE } from "@/controllers/TorusController";
 import { i18n } from "@/plugins/i18nPlugin";
+import { topupPlugin } from "@/plugins/Topup";
+import { TOPUP } from "@/plugins/Topup/interface";
 import { WALLET_SUPPORTED_NETWORKS } from "@/utils/const";
 import { CONTROLLER_MODULE_KEY, KeyState, TorusControllerState } from "@/utils/enums";
 import { backendStatePromise, delay, isMain, normalizeJson } from "@/utils/helpers";
@@ -121,6 +125,15 @@ class ControllerModule extends VuexModule {
           cryptoCurrency: addressSlicer(item.mintAddress),
         };
       }
+      if (item.action === ACTIVITY_ACTION_TOPUP) {
+        let provider = item.from?.toLowerCase() || TOPUP.MOONPAY;
+        if (provider === "ramp") provider = TOPUP.RAMPNETWORK;
+        return {
+          ...item,
+          status: ["success"].includes(item.status) ? TransactionStatus.finalized : TransactionStatus.submitted,
+          logoURI: topupPlugin[provider].getLogoUrl(this.isDarkMode),
+        };
+      }
       return item;
     });
   }

From 6606da7f604c1a82efaaf589349f3567a6ae49e5 Mon Sep 17 00:00:00 2001
From: cwlee <cwlee0@gmail.com>
Date: Mon, 21 Feb 2022 18:30:53 +0800
Subject: [PATCH 2/6] feat: modularize topup plugin

---
 src/components/topup/gateways/BaseTopup.vue |  5 +-
 src/components/topup/gateways/Moonpay.vue   |  6 +-
 src/components/topup/gateways/RampTopup.vue |  6 +-
 src/controllers/TorusController.ts          |  4 +-
 src/pages/wallet/TopUp.vue                  | 33 +++++---
 src/plugins/Topup/index.ts                  | 19 ++---
 src/plugins/Topup/interface.ts              | 29 +++++++
 src/plugins/Topup/moonpay.ts                | 33 +++++++-
 src/plugins/Topup/ramp.ts                   | 46 ++++++++++++
 src/utils/topup.ts                          | 83 ---------------------
 10 files changed, 149 insertions(+), 115 deletions(-)
 create mode 100644 src/plugins/Topup/interface.ts
 delete mode 100644 src/utils/topup.ts

diff --git a/src/components/topup/gateways/BaseTopup.vue b/src/components/topup/gateways/BaseTopup.vue
index 19affd35..807a0c0b 100644
--- a/src/components/topup/gateways/BaseTopup.vue
+++ b/src/components/topup/gateways/BaseTopup.vue
@@ -9,7 +9,8 @@ import { useRouter } from "vue-router";
 import { Button, RoundLoader, SelectField, TextField } from "@/components/common";
 import { addToast } from "@/modules/app";
 import ControllerModule from "@/modules/controllers";
-import { TOPUP, TopupProviders } from "@/utils/topup";
+import { topupPlugin } from "@/plugins/Topup";
+import { TOPUP } from "@/plugins/Topup/interface";
 
 import { RequestObject } from "./types";
 
@@ -39,7 +40,7 @@ const props = withDefaults(
 const { t } = useI18n();
 const router = useRouter();
 const routeName = router.currentRoute.value.name?.toString() || TOPUP.MOONPAY;
-const selectedProvider = TopupProviders[routeName];
+const selectedProvider = topupPlugin[routeName].detail;
 const selectedCryptocurrency = ref(selectedProvider.validCryptocurrencies[0]);
 const selectedCurrency = ref(selectedProvider.validCurrencies[0]);
 const currency = ControllerModule.torus.currentCurrency;
diff --git a/src/components/topup/gateways/Moonpay.vue b/src/components/topup/gateways/Moonpay.vue
index b3ef5c84..699be7bf 100644
--- a/src/components/topup/gateways/Moonpay.vue
+++ b/src/components/topup/gateways/Moonpay.vue
@@ -3,8 +3,9 @@ import { get } from "@toruslabs/http-helpers";
 import { helpers, maxValue, minValue, required } from "@vuelidate/validators";
 import log from "loglevel";
 
+import { TOPUP } from "@/plugins/Topup/interface";
+
 import config from "../../../config";
-import { TOPUP } from "../../../utils/topup";
 import BaseTopup, { QuoteResponse } from "./BaseTopup.vue";
 import { RequestObject } from "./types";
 
@@ -27,7 +28,8 @@ async function getQuote(requestObject: RequestObject): Promise<QuoteResponse> {
     );
   } catch (error) {
     log.error(error);
-    throw await error.json();
+    // throw await error.json();
+    throw await error;
   }
   // log.info(response);
 
diff --git a/src/components/topup/gateways/RampTopup.vue b/src/components/topup/gateways/RampTopup.vue
index df1a1738..07fa09d6 100644
--- a/src/components/topup/gateways/RampTopup.vue
+++ b/src/components/topup/gateways/RampTopup.vue
@@ -12,12 +12,14 @@ import { Button, RoundLoader, SelectField, TextField } from "@/components/common
 import config from "@/config";
 import { addToast } from "@/modules/app";
 import ControllerModule from "@/modules/controllers";
-import { TOPUP, TopupProviders } from "@/utils/topup";
+import { topupPlugin } from "@/plugins/Topup";
+import { TOPUP } from "@/plugins/Topup/interface";
+// import { TOPUP,  } from "@/utils/topup";
 
 const { t } = useI18n();
 const router = useRouter();
 const routeName = router.currentRoute.value.name?.toString() || TOPUP.MOONPAY;
-const selectedProvider = TopupProviders[routeName];
+const selectedProvider = topupPlugin[routeName].detail;
 const selectedCryptocurrency = ref(selectedProvider.validCryptocurrencies[0]);
 const selectedCurrency = ref(selectedProvider.validCurrencies[0]);
 const currency = ControllerModule.torus.currentCurrency;
diff --git a/src/controllers/TorusController.ts b/src/controllers/TorusController.ts
index 41449d87..49971fb1 100644
--- a/src/controllers/TorusController.ts
+++ b/src/controllers/TorusController.ts
@@ -73,7 +73,8 @@ import { Duplex } from "readable-stream";
 
 import OpenLoginHandler from "@/auth/OpenLoginHandler";
 import config from "@/config";
-import topupPlugin from "@/plugins/Topup";
+import { topupPlugin } from "@/plugins/Topup";
+import { TOPUP } from "@/plugins/Topup/interface";
 import { WALLET_SUPPORTED_NETWORKS } from "@/utils/const";
 import {
   BUTTON_POSITION,
@@ -86,7 +87,6 @@ import {
 import { getRandomWindowId, getRelaySigned, getUserLanguage, normalizeJson } from "@/utils/helpers";
 import { constructTokenData } from "@/utils/instruction_decoder";
 import { SolAndSplToken } from "@/utils/interfaces";
-import { TOPUP } from "@/utils/topup";
 
 import { PKG } from "../const";
 
diff --git a/src/pages/wallet/TopUp.vue b/src/pages/wallet/TopUp.vue
index a59d6c8d..f2c63ea7 100644
--- a/src/pages/wallet/TopUp.vue
+++ b/src/pages/wallet/TopUp.vue
@@ -5,16 +5,21 @@ import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 
 import controllerModule from "@/modules/controllers";
-import { TOPUP, TopupProvider, TopupProviders } from "@/utils/topup";
+import { activeProvider, topupPlugin } from "@/plugins/Topup";
+import { TOPUP, TopupProviderDetails } from "@/plugins/Topup/interface";
 
 const router = useRouter();
 
 const routeName = router.currentRoute.value.name === "walletTopUp" ? TOPUP.MOONPAY : router.currentRoute.value.name;
-const selectedProvider = ref<TopupProvider>(TopupProviders[routeName?.toString() || TOPUP.MOONPAY]);
+const selectedProvider = ref<TopupProviderDetails>(topupPlugin[routeName?.toString() || TOPUP.MOONPAY].detail);
 
-const providers = Object.values(TopupProviders);
+const providers = activeProvider;
 const { t } = useI18n();
 
+const getProviderDetail = (provider: TOPUP) => {
+  return topupPlugin[provider].detail;
+};
+
 watch(selectedProvider, () => {
   router.push({ name: selectedProvider.value.name });
 });
@@ -26,7 +31,13 @@ watch(selectedProvider, () => {
       <RadioGroup v-model="selectedProvider">
         <RadioGroupLabel class="sr-only">{{ t("walletTopUp.serverSize") }}</RadioGroupLabel>
         <div class="space-y-4">
-          <RadioGroupOption v-for="provider in providers" :key="provider.name" v-slot="{ checked }" :value="provider" as="template">
+          <RadioGroupOption
+            v-for="provider in providers"
+            :key="getProviderDetail(provider).name"
+            v-slot="{ checked }"
+            :value="getProviderDetail(provider)"
+            as="template"
+          >
             <div
               class="relative grid grid-cols-2 rounded-md border bg-white dark:bg-app-gray-700 shadow dark:shadow-dark px-4 gt-sm:px-6 py-4 cursor-pointer hover:bg-app-gray-200 focus:outline-none"
               :class="checked ? 'border-app-primary-500' : 'border-app-gray-200 dark:border-transparent'"
@@ -38,24 +49,28 @@ watch(selectedProvider, () => {
                     <circle v-if="checked" cx="12" cy="12" r="8" fill="currentColor" />
                   </svg>
                 </div>
-                <img :src="provider.logo(controllerModule.isDarkMode)" :alt="provider.name" class="w-24" />
+                <img :src="getProviderDetail(provider).logo(controllerModule.isDarkMode)" :alt="getProviderDetail(provider).name" class="w-24" />
               </div>
               <RadioGroupDescription as="div" class="col-span-1 whitespace-pre-wrap">
                 <div class="text-right font-medium text-xs text-app-text-600 dark:text-app-text-dark-500">
-                  {{ `${t("walletTopUp.paywith")} ${provider.paymentMethod}` }}
+                  {{ `${t("walletTopUp.paywith")} ${getProviderDetail(provider).paymentMethod}` }}
                 </div>
                 <div class="text-right font-medium text-xs text-app-text-600 dark:text-app-text-dark-500">
                   <span class="font-bold">{{ `${t("walletTopUp.fees")}:` }}</span
-                  >: {{ provider.fee }}
+                  >: {{ getProviderDetail(provider).fee }}
                 </div>
                 <div class="text-right ml-1 text-xs text-app-text-600 dark:text-app-text-dark-500 gt-sm:ml-0">
                   <span class="font-bold">{{ t("walletTopUp.limits") }}</span
-                  >: {{ provider.limit }}
+                  >: {{ getProviderDetail(provider).limit }}
                 </div>
                 <div class="text-right ml-1 text-xs text-app-text-600 dark:text-app-text-dark-500 gt-sm:ml-0">
                   <span class="font-bold">{{ t("walletTopUp.currencies") }}</span
                   >:
-                  {{ provider.validCryptocurrencies.map((k) => k.value).join(", ") }}
+                  {{
+                    getProviderDetail(provider)
+                      .validCryptocurrencies.map((k) => k.value)
+                      .join(", ")
+                  }}
                 </div>
               </RadioGroupDescription>
             </div>
diff --git a/src/plugins/Topup/index.ts b/src/plugins/Topup/index.ts
index 88deff13..73245c95 100644
--- a/src/plugins/Topup/index.ts
+++ b/src/plugins/Topup/index.ts
@@ -1,20 +1,11 @@
-import { PaymentParams } from "@toruslabs/base-controllers";
-
-import { TOPUP } from "../../utils/topup";
+import { TOPUP, TopUpProvider } from "./interface";
 import moonpay from "./moonpay";
 import ramp from "./ramp";
 
-interface TopUp {
-  orderUrl: (
-    state: { selectedAddress: string; email: string },
-    params: PaymentParams,
-    instanceId: string,
-    redirectFlow?: boolean,
-    redirectURL?: string
-  ) => Promise<URL>;
-}
+// export const activeProvider = [TOPUP.MOONPAY];
+export const activeProvider = [TOPUP.MOONPAY, TOPUP.RAMPNETWORK];
 
-export default {
+export const topupPlugin = {
   [TOPUP.RAMPNETWORK]: ramp,
   [TOPUP.MOONPAY]: moonpay,
-} as { [k: string]: TopUp };
+} as { [k: string]: TopUpProvider };
diff --git a/src/plugins/Topup/interface.ts b/src/plugins/Topup/interface.ts
new file mode 100644
index 00000000..37f1bd57
--- /dev/null
+++ b/src/plugins/Topup/interface.ts
@@ -0,0 +1,29 @@
+import { PaymentParams } from "@toruslabs/base-controllers";
+
+export const enum TOPUP {
+  RAMPNETWORK = "rampNetwork",
+  MOONPAY = "moonpay",
+}
+
+export type TopupProviderDetails = {
+  name: string;
+  description: string;
+  paymentMethod: string;
+  fee: string;
+  limit: string;
+  logo: (darkMode: boolean) => string;
+  validCryptocurrencies: { value: string; label: string; symbol: string }[];
+  validCurrencies: { value: string; label: string }[];
+};
+
+export interface TopUpProvider {
+  detail: TopupProviderDetails;
+  orderUrl: (
+    state: { selectedAddress: string; email: string },
+    params: PaymentParams,
+    instanceId: string,
+    redirectFlow?: boolean,
+    redirectURL?: string
+  ) => Promise<URL>;
+  getLogoUrl: (darkMode?: boolean) => string;
+}
diff --git a/src/plugins/Topup/moonpay.ts b/src/plugins/Topup/moonpay.ts
index a5c7fa5c..37166232 100644
--- a/src/plugins/Topup/moonpay.ts
+++ b/src/plugins/Topup/moonpay.ts
@@ -2,8 +2,32 @@ import { PaymentParams } from "@toruslabs/base-controllers";
 import { get } from "@toruslabs/http-helpers";
 import log from "loglevel";
 
+import MoonpayLogo from "@/assets/moonpay-logo.svg";
+import MoonpayLogoLight from "@/assets/moonpay-logo-white.svg";
 import config from "@/config";
-import { TOPUP } from "@/utils/topup";
+
+import { TOPUP, TopupProviderDetails } from "./interface";
+
+const configDetails: TopupProviderDetails = {
+  name: TOPUP.MOONPAY,
+  description: "walletTopUp.description",
+  paymentMethod: "Credit / Debit Card / Bank Transfer",
+  fee: "4.5% or 5 USD",
+  limit: "2,000€/day, 10,000€/mo",
+  logo: (darkMode: boolean) => {
+    return darkMode ? MoonpayLogoLight : MoonpayLogo;
+  },
+  validCryptocurrencies: [
+    {
+      value: "SOL",
+      label: "SOL",
+      symbol: "sol",
+    },
+  ],
+  validCurrencies: ["USD", "EUR", "GBP"].map((k) => {
+    return { value: k, label: k };
+  }),
+};
 
 export const getSignature = async (requestObject: { url: string }) => {
   try {
@@ -61,6 +85,13 @@ const orderUrl = async (
   //   return new URL(url);
 };
 
+const getLogoUrl = (darkMode?: boolean) => {
+  if (darkMode) return MoonpayLogoLight;
+  return MoonpayLogo;
+};
+
 export default {
+  detail: configDetails,
   orderUrl,
+  getLogoUrl,
 };
diff --git a/src/plugins/Topup/ramp.ts b/src/plugins/Topup/ramp.ts
index 67dce502..390a4786 100644
--- a/src/plugins/Topup/ramp.ts
+++ b/src/plugins/Topup/ramp.ts
@@ -1,7 +1,47 @@
 import { PaymentParams } from "@toruslabs/base-controllers";
 
+import RampLogo from "@/assets/rampnetwork-logo.svg";
+import RampLogoLight from "@/assets/rampnetwork-logo-white.svg";
 import config from "@/config";
 
+import { TOPUP, TopupProviderDetails } from "./interface";
+
+const configDetails: TopupProviderDetails = {
+  name: TOPUP.RAMPNETWORK,
+  description: "Rampnetwork",
+  paymentMethod: "Credit / Debit / Apple Pay",
+  fee: "0.62% to 2.9%",
+  limit: "5,000€/purchase, 20,000€/mo",
+  logo: (darkMode?: boolean) => {
+    return darkMode ? RampLogoLight : RampLogo;
+  },
+  validCryptocurrencies: [
+    {
+      value: "SOL",
+      label: "SOL",
+      symbol: "SOLANA_SOL",
+    },
+    {
+      value: "USDT",
+      label: "USDT",
+      symbol: "SOLANA_USDT",
+    },
+    {
+      value: "KIN",
+      label: "KIN",
+      symbol: "SOLANA_KIN",
+    },
+    {
+      value: "USDC",
+      label: "USDC",
+      symbol: "SOLANA_USDC",
+    },
+  ],
+  validCurrencies: ["USD", "EUR", "GBP", "PLN"].map((k) => {
+    return { value: k, label: k };
+  }),
+};
+
 const orderUrl = async (
   state: { selectedAddress: string; email: string },
   params: PaymentParams,
@@ -45,6 +85,12 @@ const orderUrl = async (
   return finalUrl;
 };
 
+const getLogoUrl = (darkMode?: boolean) => {
+  if (darkMode) return RampLogoLight;
+  return RampLogo;
+};
 export default {
+  detail: configDetails,
   orderUrl,
+  getLogoUrl,
 };
diff --git a/src/utils/topup.ts b/src/utils/topup.ts
deleted file mode 100644
index 49f283fe..00000000
--- a/src/utils/topup.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import MoonpayLogo from "@/assets/moonpay-logo.svg";
-import MoonpayLogoLight from "@/assets/moonpay-logo-white.svg";
-// import RampLogo from "@/assets/rampnetwork-logo.svg";
-// import RampLogoLight from "@/assets/rampnetwork-logo-white.svg";
-
-export const enum TOPUP {
-  RAMPNETWORK = "rampNetwork",
-  MOONPAY = "moonpay",
-}
-
-export type TopupProvider = {
-  name: string;
-  description: string;
-  paymentMethod: string;
-  fee: string;
-  limit: string;
-  logo: (darkMode: boolean) => string;
-  validCryptocurrencies: { value: string; label: string; symbol: string }[];
-  validCurrencies: { value: string; label: string }[];
-};
-
-export const TopupProviders: { [providerName: string]: TopupProvider } = {
-  // [TOPUP.RAMPNETWORK]: {
-  //   name: TOPUP.RAMPNETWORK,
-  //   title: `Rampnetwork ${t("walletTopUp.description")}`,
-  //   paymentMethod: "Credit / Debit / Apple Pay",
-  //   fee: "0.62% to 2.9%",
-  //   limit: "5,000€/purchase, 20,000€/mo",
-  //   logo: (darkMode) => {
-  //     return darkMode ? RampLogoLight : RampLogo;
-  //   },
-  //   validCryptocurrencies: [
-  //     {
-  //       value: "SOL",
-  //       label: "SOL",
-  //       symbol: "SOLANA_SOL",
-  //     },
-  //     {
-  //       value: "USDT",
-  //       label: "USDT",
-  //       symbol: "SOLANA_USDT",
-  //     },
-  //     {
-  //       value: "KIN",
-  //       label: "KIN",
-  //       symbol: "SOLANA_KIN",
-  //     },
-  //     {
-  //       value: "USDC",
-  //       label: "USDC",
-  //       symbol: "SOLANA_USDC",
-  //     },
-  //   ],
-  //   validCurrencies: ["USD", "EUR", "GBP", "PLN"].map((k) => {
-  //     return { value: k, label: k };
-  //   }),
-  // },
-  [TOPUP.MOONPAY]: {
-    name: TOPUP.MOONPAY,
-    description: "walletTopUp.description",
-    paymentMethod: "Credit / Debit Card / Bank Transfer",
-    fee: "4.5% or 5 USD",
-    limit: "2,000€/day, 10,000€/mo",
-    logo: (darkMode: boolean) => {
-      return darkMode ? MoonpayLogoLight : MoonpayLogo;
-    },
-    validCryptocurrencies: [
-      {
-        value: "SOL",
-        label: "SOL",
-        symbol: "sol",
-      },
-      {
-        value: "USDC (SOL)",
-        label: "USDC (SOL)",
-        symbol: "usdc_sol",
-      },
-    ],
-    validCurrencies: ["USD", "EUR", "GBP"].map((k) => {
-      return { value: k, label: k };
-    }),
-  },
-};

From 9ca8c9c1e3e3b2d4954051d4e7b49aa657234c5e Mon Sep 17 00:00:00 2001
From: cwlee <cwlee0@gmail.com>
Date: Mon, 21 Feb 2022 18:45:33 +0800
Subject: [PATCH 3/6] fix: update provider

---
 src/plugins/Topup/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/Topup/index.ts b/src/plugins/Topup/index.ts
index 73245c95..c2e559e5 100644
--- a/src/plugins/Topup/index.ts
+++ b/src/plugins/Topup/index.ts
@@ -2,8 +2,8 @@ import { TOPUP, TopUpProvider } from "./interface";
 import moonpay from "./moonpay";
 import ramp from "./ramp";
 
-// export const activeProvider = [TOPUP.MOONPAY];
-export const activeProvider = [TOPUP.MOONPAY, TOPUP.RAMPNETWORK];
+export const activeProvider = [TOPUP.MOONPAY];
+// export const activeProvider = [TOPUP.MOONPAY, TOPUP.RAMPNETWORK];
 
 export const topupPlugin = {
   [TOPUP.RAMPNETWORK]: ramp,

From 4904ff5ef962d4e97ad45a09bac8b833f65ebf64 Mon Sep 17 00:00:00 2001
From: cwlee <cwlee0@gmail.com>
Date: Wed, 23 Feb 2022 12:52:08 +0800
Subject: [PATCH 4/6] fix: topup status reclassification

---
 src/modules/controllers.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/modules/controllers.ts b/src/modules/controllers.ts
index 6dccdeca..d672e63a 100644
--- a/src/modules/controllers.ts
+++ b/src/modules/controllers.ts
@@ -19,7 +19,6 @@ import {
   ProviderConfig,
   SelectedAddresssChangeChannelData,
   THEME,
-  TransactionStatus,
   TX_EVENTS,
   UserInfo,
 } from "@toruslabs/base-controllers";
@@ -130,7 +129,6 @@ class ControllerModule extends VuexModule {
         if (provider === "ramp") provider = TOPUP.RAMPNETWORK;
         return {
           ...item,
-          status: ["success"].includes(item.status) ? TransactionStatus.finalized : TransactionStatus.submitted,
           logoURI: topupPlugin[provider].getLogoUrl(this.isDarkMode),
         };
       }

From 52b548009bc0c80956a1e0c76d01280480ccc892 Mon Sep 17 00:00:00 2001
From: cwlee <cwlee0@gmail.com>
Date: Wed, 23 Feb 2022 13:34:53 +0800
Subject: [PATCH 5/6] fix: simplies topup provider details

---
 src/pages/wallet/TopUp.vue | 28 +++++++---------------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/src/pages/wallet/TopUp.vue b/src/pages/wallet/TopUp.vue
index f2c63ea7..69a0763f 100644
--- a/src/pages/wallet/TopUp.vue
+++ b/src/pages/wallet/TopUp.vue
@@ -13,13 +13,9 @@ const router = useRouter();
 const routeName = router.currentRoute.value.name === "walletTopUp" ? TOPUP.MOONPAY : router.currentRoute.value.name;
 const selectedProvider = ref<TopupProviderDetails>(topupPlugin[routeName?.toString() || TOPUP.MOONPAY].detail);
 
-const providers = activeProvider;
+const providers = activeProvider.map((item) => topupPlugin[item].detail);
 const { t } = useI18n();
 
-const getProviderDetail = (provider: TOPUP) => {
-  return topupPlugin[provider].detail;
-};
-
 watch(selectedProvider, () => {
   router.push({ name: selectedProvider.value.name });
 });
@@ -31,13 +27,7 @@ watch(selectedProvider, () => {
       <RadioGroup v-model="selectedProvider">
         <RadioGroupLabel class="sr-only">{{ t("walletTopUp.serverSize") }}</RadioGroupLabel>
         <div class="space-y-4">
-          <RadioGroupOption
-            v-for="provider in providers"
-            :key="getProviderDetail(provider).name"
-            v-slot="{ checked }"
-            :value="getProviderDetail(provider)"
-            as="template"
-          >
+          <RadioGroupOption v-for="provider in providers" :key="provider.name" v-slot="{ checked }" :value="provider" as="template">
             <div
               class="relative grid grid-cols-2 rounded-md border bg-white dark:bg-app-gray-700 shadow dark:shadow-dark px-4 gt-sm:px-6 py-4 cursor-pointer hover:bg-app-gray-200 focus:outline-none"
               :class="checked ? 'border-app-primary-500' : 'border-app-gray-200 dark:border-transparent'"
@@ -49,28 +39,24 @@ watch(selectedProvider, () => {
                     <circle v-if="checked" cx="12" cy="12" r="8" fill="currentColor" />
                   </svg>
                 </div>
-                <img :src="getProviderDetail(provider).logo(controllerModule.isDarkMode)" :alt="getProviderDetail(provider).name" class="w-24" />
+                <img :src="provider.logo(controllerModule.isDarkMode)" :alt="provider.name" class="w-24" />
               </div>
               <RadioGroupDescription as="div" class="col-span-1 whitespace-pre-wrap">
                 <div class="text-right font-medium text-xs text-app-text-600 dark:text-app-text-dark-500">
-                  {{ `${t("walletTopUp.paywith")} ${getProviderDetail(provider).paymentMethod}` }}
+                  {{ `${t("walletTopUp.paywith")} ${provider.paymentMethod}` }}
                 </div>
                 <div class="text-right font-medium text-xs text-app-text-600 dark:text-app-text-dark-500">
                   <span class="font-bold">{{ `${t("walletTopUp.fees")}:` }}</span
-                  >: {{ getProviderDetail(provider).fee }}
+                  >: {{ provider.fee }}
                 </div>
                 <div class="text-right ml-1 text-xs text-app-text-600 dark:text-app-text-dark-500 gt-sm:ml-0">
                   <span class="font-bold">{{ t("walletTopUp.limits") }}</span
-                  >: {{ getProviderDetail(provider).limit }}
+                  >: {{ provider.limit }}
                 </div>
                 <div class="text-right ml-1 text-xs text-app-text-600 dark:text-app-text-dark-500 gt-sm:ml-0">
                   <span class="font-bold">{{ t("walletTopUp.currencies") }}</span
                   >:
-                  {{
-                    getProviderDetail(provider)
-                      .validCryptocurrencies.map((k) => k.value)
-                      .join(", ")
-                  }}
+                  {{ provider.validCryptocurrencies.map((k) => k.value).join(", ") }}
                 </div>
               </RadioGroupDescription>
             </div>

From 02b773a1ae76de10c3b97d370f3f6667e3bbb827 Mon Sep 17 00:00:00 2001
From: cwlee <cwlee0@gmail.com>
Date: Thu, 3 Mar 2022 12:22:56 +0800
Subject: [PATCH 6/6] fix: error handling

---
 src/components/topup/gateways/Moonpay.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/topup/gateways/Moonpay.vue b/src/components/topup/gateways/Moonpay.vue
index 699be7bf..a89a7aba 100644
--- a/src/components/topup/gateways/Moonpay.vue
+++ b/src/components/topup/gateways/Moonpay.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { get } from "@toruslabs/http-helpers";
 import { helpers, maxValue, minValue, required } from "@vuelidate/validators";
-import log from "loglevel";
 
 import { TOPUP } from "@/plugins/Topup/interface";
 
@@ -11,6 +10,7 @@ import { RequestObject } from "./types";
 
 async function getQuote(requestObject: RequestObject): Promise<QuoteResponse> {
   let response: any;
+
   try {
     const options = {
       headers: {
@@ -18,20 +18,15 @@ async function getQuote(requestObject: RequestObject): Promise<QuoteResponse> {
         Accept: "application/json",
       },
     };
-    // response = await get(
-    //   `${config.moonpayApiQuoteHost}/v3/currencies/ask_price?cryptoCurrencies=${requestObject.digital_currency}&apiKey=${config.moonpayTestAPIKEY}` +
-    //     `&fiatCurrency=${requestObject.fiat_currency}&areFeesIncluded=true`,
     response = await get(
       `${config.moonpayApiQuoteHost}/v3/currencies/${requestObject.digital_currency}/buy_quote?apiKey=${config.moonpayLiveAPIKEY}` +
         `&baseCurrencyCode=${requestObject.fiat_currency.toLowerCase()}&baseCurrencyAmount=${requestObject.requested_amount}&areFeesIncluded=true`,
       options
     );
   } catch (error) {
-    log.error(error);
-    // throw await error.json();
-    throw await error;
+    const res = await (error as Response).json();
+    throw new Error(res.message);
   }
-  // log.info(response);
 
   return {
     fee: response.feeAmount + response.networkFeeAmount + response.extraFeeAmount,