wallet

2026-07-04 12:26:28 +03:30
parent 95814d6b00
commit 23f47705bb
9 changed files with 225 additions and 5 deletions
@@ -0,0 +1,44 @@
+import { type FC, useState } from "react";
+import { EmptyWallet } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import { formatPrice } from "@/helpers/func";
+import { useGetWalletBalance } from "../hooks/useWalletData";
+import ChargeModal from "./ChargeModal";
+import MoonLoader from "react-spinners/MoonLoader";
+
+const WalletHeader: FC = () => {
+  const { t } = useTranslation("global");
+  const [showChargeModal, setShowChargeModal] = useState(false);
+  const { data, isLoading } = useGetWalletBalance();
+
+  const balance = data?.data?.balance ?? 0;
+
+  return (
+    <>
+      <div className="flex items-center gap-2 bg-[#F5F5F5] rounded-xl px-3 h-9">
+        <EmptyWallet size={18} color="black" />
+        <div className="text-xs whitespace-nowrap min-w-[80px]">
+          {isLoading ? (
+            <MoonLoader size={12} color="#000" />
+          ) : (
+            formatPrice(balance)
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={() => setShowChargeModal(true)}
+          className="text-xs bg-primary text-white rounded-lg px-3 h-7 whitespace-nowrap hover:opacity-90 transition-opacity"
+        >
+          {t("wallet.charge")}
+        </button>
+      </div>
+
+      <ChargeModal
+        open={showChargeModal}
+        onClose={() => setShowChargeModal(false)}
+      />
+    </>
+  );
+};
+
+export default WalletHeader;