Feat/topup activity

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"

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;

src/components/topup/gateways/Moonpay.vue

@@ -1,35 +1,32 @@
 <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";
 
 import config from "../../../config";
-import { TOPUP } from "../../../utils/topup";
 import BaseTopup, { QuoteResponse } from "./BaseTopup.vue";
 import { RequestObject } from "./types";
 
 async function getQuote(requestObject: RequestObject): Promise<QuoteResponse> {
   let response: any;
+
   try {
     const options = {
       headers: {
         "Content-Type": "application/json",
         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();
+    const res = await (error as Response).json();
+    throw new Error(res.message);
   }
-  // log.info(response);
 
   return {
     fee: response.feeAmount + response.networkFeeAmount + response.extraFeeAmount,

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;

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";
 

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,
@@ -40,6 +41,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 +124,14 @@ 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,
+          logoURI: topupPlugin[provider].getLogoUrl(this.isDarkMode),
+        };
+      }
       return item;
     });
   }

src/pages/wallet/TopUp.vue

@@ -5,14 +5,15 @@ 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.map((item) => topupPlugin[item].detail);
 const { t } = useI18n();
 
 watch(selectedProvider, () => {

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 };

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;
+}

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,
 };

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,
 };