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/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..a89a7aba 100644
--- a/src/components/topup/gateways/Moonpay.vue
+++ b/src/components/topup/gateways/Moonpay.vue
@@ -1,15 +1,16 @@
 <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: {
@@ -17,19 +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();
+    const res = await (error as Response).json();
+    throw new Error(res.message);
   }
-  // log.info(response);
 
   return {
     fee: response.feeAmount + response.networkFeeAmount + response.extraFeeAmount,
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/modules/controllers.ts b/src/modules/controllers.ts
index d3c453dc..d672e63a 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,
@@ -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;
     });
   }
diff --git a/src/pages/wallet/TopUp.vue b/src/pages/wallet/TopUp.vue
index a59d6c8d..69a0763f 100644
--- a/src/pages/wallet/TopUp.vue
+++ b/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, () => {
diff --git a/src/plugins/Topup/index.ts b/src/plugins/Topup/index.ts
index 88deff13..c2e559e5 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 };
-    }),
-  },
-};