feat(sidebar): add wallet top up card

src/app/sidebar/sidebar-screen.tsx

@@ -10,9 +10,9 @@ import { useUserDispatch, useUserState } from "@/stores/user/user-context";
 
 import {
   BackBar,
+  SidebarWalletCard,
   UserHeader,
   type SidebarUserState,
-  VipBenefitsCard,
 } from "./components";
 
 import styles from "./components/sidebar-screen.module.css";
@@ -74,9 +74,9 @@ export function SidebarScreen() {
         </section>
 
         <section className={styles.cardSlot}>
-          <VipBenefitsCard
-            state={sidebarState}
-            onActivate={() => router.push(VIP_SUBSCRIPTION_URL)}
+          <SidebarWalletCard
+            creditBalance={user.creditBalance}
+            onTopUp={() => router.push(VIP_SUBSCRIPTION_URL)}
           />
         </section>