receipt + learning + wallet + ...

src/pages/wallet/Wallet.tsx

@@ -5,10 +5,13 @@ import Tabs from '../../components/Tabs'
 import Online from './components/Online'
 import CardtoCard from './components/CardtoCard'
 import Sheba from './components/Sheba'
+import { useGetWalletBalance } from './hooks/useWalletData'
+import { NumberFormat } from '../../config/func'
 
 const Wallet: FC = () => {
 
     const { t } = useTranslation('global')
+    const getWalletBalance = useGetWalletBalance()
     const [activeTab, setActiveTab] = useState<string>('online')
 
     return (
@@ -17,6 +20,15 @@ const Wallet: FC = () => {
                 {t('wallet.increese_wallet')}
             </div>
 
+            <div className='mt-7 xl:px-10 px-6 w-full items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[70px] justify-between rounded-[32px] bg-white bg-opacity-45'>
+                <div className='xl:text-base text-sm'>{t('wallet.balance')}</div>
+
+                <div className='h-8 text-black rounded-xl text-sm gap-1 w-fit xl:px-14 px-4 bg-[#EEF0F7] flex items-center'>
+                    {NumberFormat(getWalletBalance.data?.data?.balance)}
+                    <div>تومان</div>
+                </div>
+            </div>
+
             <div className='mt-8 flex gap-6'>
                 <div className='flex-1'>
                     <Tabs

src/pages/wallet/hooks/useWalletData.ts

@@ -9,6 +9,13 @@ export const useGetGetWays = () => {
   });
 };
 
+export const useGetWalletBalance = () => {
+  return useQuery({
+    queryKey: ["wallet-balance"],
+    queryFn: api.getWalletBalance,
+  });
+};
+
 export const usePayment = () => {
   return useMutation({
     mutationFn: (variables: PaymentType) => api.payment(variables),

src/pages/wallet/service/WalletService.ts

@@ -6,6 +6,11 @@ export const getGetWays = async () => {
   return data;
 };
 
+export const getWalletBalance = async () => {
+  const { data } = await axios.get(`/wallets/balance`);
+  return data;
+};
+
 export const payment = async (params: PaymentType) => {
   const { data } = await axios.post(`/payments/deposit/gateway`, params);
   return data;