GoSTEAN · tali-creator · Oct 10, 2025 · Oct 10, 2025
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -1,8 +1,5 @@
 "use client";
 
-
-
-
 import { useState } from "react";
 import DashboardHome from "@/components/dashboard/tabs/dashboard";
 import QrPayment from "@/components/dashboard/tabs/qr-payment";
@@ -22,29 +19,28 @@ import { MobileBottomNav } from "@/components/dashboard/mobile-bottom-nav";
 import SendFunds from "@/components/dashboard/tabs/send-funds";
 import { ToastContainer } from "@/components/modals/toastContainer";
 import { useNotifications } from "@/components/hooks/useNotifications";
+import TopUp from "@/components/dashboard/tabs/top-up";
 
 export default function Dashboard() {
   const [activeTab, setActiveTab] = useState("Dashboard");
- const { toasts, removeToast } = useNotifications();
+  const { toasts, removeToast } = useNotifications();
 
   return (
     <ProtectedRoute>
       <div className="w-full flex-col bg-background mt-16 flex relative min-h-screen">
-
         <div className="flex relative w-full  overflow-y-scroll">
           <SideNav setTab={setActiveTab} activeTab={activeTab} />
 
           <div className="flex-1 relative lg:ml-64 overflow-x-auto">
             <TopNav tabTitle={activeTab} setTab={setActiveTab} />
 
             <div>
-
               {activeTab === "Dashboard" && (
                 <DashboardHome activeTab={setActiveTab} />
               )}
-               <ToastContainer toasts={toasts} onRemoveToast={removeToast} />
+              <ToastContainer toasts={toasts} onRemoveToast={removeToast} />
 
-              {activeTab === "Qr Payment" && <QrPayment />}
+              {activeTab === "QR Payment" && <QrPayment />}
               {activeTab === "Payment split" && <PaymentSplit />}
               {activeTab === "Swap" && <Swap />}
               {activeTab === "profile" && <Profile />}
@@ -55,14 +51,13 @@ export default function Dashboard() {
               {activeTab === "Notification" && <Notifications />}
               {activeTab === "Help" && <Help />}
               {activeTab === "Send" && <SendFunds />}
-
+              {activeTab === "Top Up" && <TopUp />}
             </div>
           </div>
         </div>
 
         <MobileBottomNav activeTab={activeTab} setActiveTab={setActiveTab} />
       </div>
-
     </ProtectedRoute>
   );
 }
diff --git a/components/context/AuthContext.tsx b/components/context/AuthContext.tsx
@@ -88,6 +88,7 @@ interface AuthContextType {
   ) => Promise<TransactionHistoryResponse>;
   // Deposit check function
   checkDeposits: () => Promise<DepositCheckResponse>;
+  checkDeploy: () => Promise<DepositCheckResponse>;
   // Send transaction function
   sendTransaction: (request: SendMoneyRequest) => Promise<SendMoneyResponse>;
   createSplitPayment: (
@@ -118,7 +119,15 @@ interface AuthContextType {
     page?: number;
     limit?: number;
   }) => Promise<GetMerchantPaymentHistoryResponse>;
-  fetchStatus: () => Promise<DepositCheckResponse>;
+  getMerchantPaymentStats: () => Promise<{
+    stats: {
+      total: number;
+      pending: number;
+      completed: number;
+      cancelled: number;
+      totalAmount: string;
+    };
+  }>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -476,7 +485,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       }
 
       const data = await response.json();
-
       if (data.addresses && Array.isArray(data.addresses)) {
         return data.addresses;
       } else {
@@ -919,6 +927,33 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       throw error;
     }
   };
+  const checkDeploy = async (): Promise<DepositCheckResponse> => {
+    if (!token) {
+      throw new Error("Authentication required to check deplow");
+    }
+
+    try {
+      const response = await fetch(
+        "https://velo-node-backend.onrender.com/checkdeploy/balances/testnet/deploy",
+        {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`Failed to check deploy: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error("Error checking deploy:", error);
+      throw error;
+    }
+  };
 
   const createSplitPayment = async (
     data: CreateSplitPaymentRequest
@@ -1077,14 +1112,16 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   };
 
-  const createMerchantPayment = async (requestBody: any): Promise<any> => {
+  const createMerchantPayment = async (
+    requestBody: CreateMerchantPaymentRequest
+  ): Promise<CreateMerchantPaymentResponse> => {
     if (!token) {
       throw new Error("Authentication required to create merchant payment");
     }
 
     try {
       const response = await fetch(
-        "https://velo-node-backend.onrender.com/merchant/create",
+        "https://velo-node-backend.onrender.com/merchant/payments",
         {
           method: "POST",
           headers: {
@@ -1108,16 +1145,21 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   };
 
-  const getMerchantPaymentStatus = async (paymentId: string): Promise<any> => {
+  const getMerchantPaymentStatus = async (
+    paymentId: string
+  ): Promise<GetMerchantPaymentStatusResponse> => {
     if (!token) {
       throw new Error("Authentication required to get merchant payment status");
     }
 
     try {
+      // Clean up the payment ID - remove any spaces
+      const cleanPaymentId = paymentId.replace(/\s+/g, "");
+
       const response = await fetch(
-        `https://velo-node-backend.onrender.com/merchant/payment/${paymentId}`,
+        `https://velo-node-backend.onrender.com/merchant/payments/${cleanPaymentId}/monitor`,
         {
-          method: "GET",
+          method: "POST",
           headers: {
             Authorization: `Bearer ${token}`,
             "Content-Type": "application/json",
@@ -1131,7 +1173,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
         );
       }
 
-      return await response.json();
+      const data = await response.json();
+      return data;
     } catch (error) {
       console.error("Error getting merchant payment status:", error);
       throw error;
@@ -1175,7 +1218,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     status?: string;
     page?: number;
     limit?: number;
-  }): Promise<any> => {
+  }): Promise<GetMerchantPaymentHistoryResponse> => {
     if (!token) {
       throw new Error(
         "Authentication required to get merchant payment history"
@@ -1214,14 +1257,22 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   };
 
-  const fetchStatus = async (): Promise<DepositCheckResponse> => {
+  const getMerchantPaymentStats = async (): Promise<{
+    stats: {
+      total: number;
+      pending: number;
+      completed: number;
+      cancelled: number;
+      totalAmount: string;
+    };
+  }> => {
     if (!token) {
-      throw new Error("Authentication required to check deposits");
+      throw new Error("Authentication required to get merchant payment stats");
     }
 
     try {
       const response = await fetch(
-        "https://velo-node-backend.onrender.com/merchant/my-payments",
+        "https://velo-node-backend.onrender.com/merchant/payments/stats",
         {
           method: "GET",
           headers: {
@@ -1232,12 +1283,14 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       );
 
       if (!response.ok) {
-        throw new Error(`Failed to check Status: ${response.status}`);
+        throw new Error(
+          `Failed to get merchant payment stats: ${response.status}`
+        );
       }
-      console.log("Payment Status", response);
+
       return await response.json();
     } catch (error) {
-      console.error("Error checking deposits:", error);
+      console.error("Error getting merchant payment stats:", error);
       throw error;
     }
   };
@@ -1274,7 +1327,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     getMerchantPaymentStatus,
     payMerchantInvoice,
     getMerchantPaymentHistory,
-    fetchStatus,
+    checkDeploy,
+    getMerchantPaymentStats,
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

diff --git a/components/dashboard/mobile-bottom-nav.tsx b/components/dashboard/mobile-bottom-nav.tsx
@@ -11,7 +11,7 @@ interface MobileBottomNavProps {
 
 const navItems = [
   { icon: Home, label: "Dashboard", active: true },
-  { icon: QrCode, label: "Qr Payment", active: false },
+  { icon: QrCode, label: "QR Payment", active: false },
   { icon: Send, label: "Send", active: false },
   { icon: ArrowDownToLine, label: "Receive funds", active: false },
   { icon: History, label: "History", active: false },

diff --git a/components/dashboard/quick-actions.tsx b/components/dashboard/quick-actions.tsx
@@ -1,15 +1,14 @@
+import { QrCode, Users, Send, ArrowDownToLine } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/cards";
+import { Button } from "../ui/buttons";
+import { Dispatch, SetStateAction } from "react";
 
-import { QrCode, Users, Send, ArrowDownToLine } from "lucide-react"
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/cards"
-import { Button } from "../ui/buttons"
-import { Dispatch, SetStateAction } from "react"
-
-interface quickActionProps  {
-setTab: Dispatch<SetStateAction<string>>
+interface quickActionProps {
+  setTab: Dispatch<SetStateAction<string>>;
 }
 const actions = [
   {
-    title: "Qr Payment",
+    title: "QR Payment",
     description: "Scan or generate QR codes",
     icon: QrCode,
     gradient: "from-primary to-accent",
@@ -32,9 +31,15 @@ const actions = [
     icon: ArrowDownToLine,
     gradient: "from-accent to-primary",
   },
-]
+  {
+    title: "Top Up",
+    description: "Buy crypto with NGN",
+    icon: ArrowDownToLine,
+    gradient: "from-primary to-accent",
+  },
+];
 
-export function QuickActions({setTab}: quickActionProps) {
+export function QuickActions({ setTab }: quickActionProps) {
   return (
     <Card className="border-border/50 mb-8 bg-card/50 backdrop-blur-sm">
       <CardHeader>
@@ -43,26 +48,30 @@ export function QuickActions({setTab}: quickActionProps) {
       <CardContent>
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
           {actions.map((action) => {
-            const Icon = action.icon
+            const Icon = action.icon;
             return (
               <Button
-              onClick={() => setTab(action.title)}
+                onClick={() => setTab(action.title)}
                 key={action.title}
                 variant="outline"
                 className="h-auto flex-col gap-4 p-6 bg-transparent border-border/50 hover:border-primary/30 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10"
               >
-                <div className={`rounded-xl p-3 bg-gradient-to-br ${action.gradient} shadow-lg`}>
+                <div
+                  className={`rounded-xl p-3 bg-gradient-to-br ${action.gradient} shadow-lg`}
+                >
                   <Icon className="h-6 w-6 text-white" />
                 </div>
                 <div className="text-center">
                   <div className="font-semibold text-sm">{action.title}</div>
-                  <div className="text-xs text-muted-foreground mt-1">{action.description}</div>
+                  <div className="text-xs text-muted-foreground mt-1">
+                    {action.description}
+                  </div>
                 </div>
               </Button>
-            )
+            );
           })}
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
diff --git a/components/dashboard/side-nav.tsx b/components/dashboard/side-nav.tsx
@@ -25,10 +25,11 @@ import Link from "next/link";
 const navigation = [
   { name: "Dashboard", icon: LayoutDashboard, current: true },
   { name: "Receive funds", icon: ArrowDownToLine, current: false },
-  { name: "Qr Payment", icon: CreditCard, current: false },
+  { name: "QR Payment", icon: CreditCard, current: false },
   { name: "Send", icon: Send, current: false },
   { name: "Payment split", icon: Split, current: false },
   { name: "Swap", icon: ArrowLeftRight, current: false },
+  { name: "Top Up", icon: ArrowDownToLine, current: false },
   { name: "History", icon: History, current: false },
   { name: "Help", icon: HelpCircle, current: false },
 ]

diff --git a/components/dashboard/stats-cards.tsx b/components/dashboard/stats-cards.tsx
@@ -23,7 +23,7 @@ export function StatsCards({
   const { totalBalance, loading, error } = useTotalBalance();
   const { notifications } = useNotifications();
   const totalTransactions = notifications.filter((notification) => {
-    return notification.title === "Deposit Received" || notification.title === "Token Sent";
+    return notification.title === "Deposit Received" || notification.title === "Tokens Sent";
   });
 
     const split = notifications.filter((notification) => {