feat: Add WalletInformation section

Author: wzrdx

src/components/account/Overview.tsx

@@ -1,5 +1,6 @@
 import ProfileSection from './ProfileSection';
 import PublicProfile from './PublicProfile';
+import WalletInformation from './WalletInformation';
 
 export default function Profile() {
     return (
@@ -8,10 +9,8 @@ export default function Profile() {
                 <PublicProfile />
             </ProfileSection>
 
-            <ProfileSection title="Account">
-                <div>PersonalInformation</div>
-                {/* TODO: USDC Balance */}
-                {/* <PersonalInformation /> */}
+            <ProfileSection title="Wallet">
+                <WalletInformation />
             </ProfileSection>
         </div>
     );

…omponents/account/BillingMonthSelect.tsx …account/invoicing/BillingMonthSelect.tsxsrc/components/account/BillingMonthSelect.tsx renamed to src/components/account/invoicing/BillingMonthSelect.tsx src/components/account/BillingMonthSelect.tsx renamed to src/components/account/invoicing/BillingMonthSelect.tsx

@@ -0,0 +1,33 @@
+import { config } from '@lib/config';
+import { BlockchainContextType, useBlockchainContext } from '@lib/contexts/blockchain';
+import { fBI } from '@lib/utils';
+import { DetailsCard } from '@shared/cards/DetailsCard';
+import ProfileRow from '@shared/ProfileRow';
+import { useEffect, useState } from 'react';
+import ProfileSectionWrapper from './ProfileSectionWrapper';
+
+export default function WalletInformation() {
+    const { fetchErc20Balance } = useBlockchainContext() as BlockchainContextType;
+
+    const [usdcBalance, setUsdcBalance] = useState<bigint>(0n);
+
+    // Init
+    useEffect(() => {
+        fetchErc20Balance(config.usdcContractAddress).then((balance) => {
+            setUsdcBalance(balance);
+        });
+    }, []);
+
+    return (
+        <ProfileSectionWrapper>
+            {/* Account */}
+            <div className="col gap-2">
+                <DetailsCard>
+                    <div className="col gap-4 sm:gap-1.5">
+                        <ProfileRow label="$USDC Balance" value={fBI(usdcBalance, 6)} />
+                    </div>
+                </DetailsCard>
+            </div>
+        </ProfileSectionWrapper>
+    );
+}

…/components/account/DraftInvoiceCard.tsx …s/account/invoicing/DraftInvoiceCard.tsxsrc/components/account/DraftInvoiceCard.tsx renamed to src/components/account/invoicing/DraftInvoiceCard.tsx src/components/account/DraftInvoiceCard.tsx renamed to src/components/account/invoicing/DraftInvoiceCard.tsx

@@ -112,6 +112,10 @@ layer(base);
     @apply text-sm font-medium;
 }
 
+.section-title {
+    @apply flex min-h-[28px] items-center text-[17px] font-semibold;
+}
+
 /* Scrollbar */
 *::-webkit-scrollbar {
     width: 8px;

src/components/account/Invoicing.tsx …mponents/account/invoicing/Invoicing.tsxsrc/components/account/Invoicing.tsx renamed to src/components/account/invoicing/Invoicing.tsx src/components/account/Invoicing.tsx renamed to src/components/account/invoicing/Invoicing.tsx

@@ -1,5 +1,5 @@
 import BurnReport from '@components/account/BurnReport';
-import Invoicing from '@components/account/Invoicing';
+import Invoicing from '@components/account/invoicing/Invoicing';
 import Profile from '@components/account/profile/Profile';
 import { routePath } from '@lib/routes/route-paths';
 import CustomTabs from '@shared/CustomTabs';
@@ -9,14 +9,14 @@ import { RiBillLine, RiFireLine } from 'react-icons/ri';
 import { useNavigate } from 'react-router-dom';
 
 function Account() {
-    const [selectedTab, setSelectedTab] = useState<'profile' | 'invoicing' | 'burn-report'>('profile');
+    const [selectedTab, setSelectedTab] = useState<'invoicing' | 'profile' | 'burn-report'>('invoicing');
     const navigate = useNavigate();
 
     useEffect(() => {
         const params = new URLSearchParams(window.location.search);
         const tab = params.get('tab');
 
-        if (tab && (tab === 'profile' || tab === 'invoicing' || tab === 'burn-report')) {
+        if (tab && (tab === 'invoicing' || tab === 'profile' || tab === 'burn-report')) {
             setSelectedTab(tab);
         }
     }, [window.location.search]);
@@ -25,16 +25,16 @@ function Account() {
         <div className="col w-full flex-1 gap-5">
             <CustomTabs
                 tabs={[
-                    {
-                        key: 'profile',
-                        title: 'Profile',
-                        icon: <CgProfile />,
-                    },
                     {
                         key: 'invoicing',
                         title: 'Invoicing',
                         icon: <RiBillLine />,
                     },
+                    {
+                        key: 'profile',
+                        title: 'Profile',
+                        icon: <CgProfile />,
+                    },
                     {
                         key: 'burn-report',
                         title: 'Burn Report',
@@ -51,8 +51,8 @@ function Account() {
                 }}
             />
 
-            {selectedTab === 'profile' && <Profile />}
             {selectedTab === 'invoicing' && <Invoicing />}
+            {selectedTab === 'profile' && <Profile />}
             {selectedTab === 'burn-report' && <BurnReport />}
         </div>
     );