fix: server side supabase loading

package.json

@@ -30,7 +30,7 @@
 	},
 	"dependencies": {
 		"@aarc-xyz/deposit-widget": "^0.2.1",
-		"@clerk/nextjs": "^5.2.8",
+		"@clerk/nextjs": "^5.4.1",
 		"@clerk/themes": "^2.1.1",
 		"@headlessui/react": "^1.7.19",
 		"@popperjs/core": "^2.11.8",

src/app/home/page.tsx

@@ -4,13 +4,15 @@ import { Suspense } from "react";
 
 import Loader from "@/components/Loader";
 import LockerNav from "@/components/LockerNav";
-import { LockerPortfolioProvider } from "@/components/LockerPortfolioContext";
+import { LockerProvider } from "@/providers/LockerProvider";
 import { LockerDb, PolicyDb } from "@/types";
 import { TABLE_LOCKERS } from "@/utils/supabase/tables";
 
-import { supabaseServerClient } from "../utils/server";
+import { createClerkSupabaseClientSsr } from "../utils/server";
 
 async function HomePage() {
+	const supabaseServerClient = createClerkSupabaseClientSsr();
+
 	const { data: lockersData, error: lockersError } =
 		await supabaseServerClient
 			.from(TABLE_LOCKERS)
@@ -46,13 +48,13 @@ async function HomePage() {
 	return (
 		<div className="flex w-full flex-1 flex-col items-center py-12">
 			<Suspense fallback={<Loader />}>
-				<LockerPortfolioProvider
+				<LockerProvider
 					initialLockers={lockers}
 					initialPolicies={policies}
 					initialOfframpAddresses={[]}
 				>
 					<LockerNav />
-				</LockerPortfolioProvider>
+				</LockerProvider>
 			</Suspense>
 		</div>
 	);

src/app/utils/server.ts

@@ -32,5 +32,3 @@ export function createClerkSupabaseClientSsr() {
 		}
 	);
 }
-
-export const supabaseServerClient = createClerkSupabaseClientSsr();

src/components/LockerNav.tsx

@@ -1,12 +1,12 @@
 "use client";
 
+import { useLocker } from "../providers/LockerProvider";
 import LockerCreate from "./LockerCreate";
 import LockerPortfolio from "./LockerPortfolio";
-import { useLockerPortfolio } from "./LockerPortfolioContext";
 import LockerSetup from "./LockerSetup";
 
 function LockerNav() {
-	const { lockers, policies } = useLockerPortfolio();
+	const { lockers, policies } = useLocker();
 
 	const shouldCreateLocker = lockers && lockers.length === 0;
 	if (shouldCreateLocker) return <LockerCreate lockerIndex={0} />;

src/components/LockerPortfolio.tsx

@@ -17,10 +17,10 @@ import { getFundedChainIds } from "@/utils/getFundedChainIds";
 import { isChainSupported } from "@/utils/isChainSupported";
 import { isTestnet } from "@/utils/isTestnet";
 
-import { useLockerPortfolio } from "./LockerPortfolioContext";
+import { useLocker } from "../providers/LockerProvider";
 
 function LockerPortfolio() {
-	const { lockers, policies, txs, offrampAddresses } = useLockerPortfolio();
+	const { lockers, policies, txs, offrampAddresses } = useLocker();
 	const [errorMessage, setErrorMessage] = useState<string>("");
 	const [tokenList, setTokenList] = useState<Token[]>([]);
 	const [fundedChainIds, setFundedChainIds] = useState<number[]>([]);

src/components/LockerSetup.tsx

@@ -10,13 +10,13 @@ import { useAccount } from "wagmi";
 import ChannelPieChart from "@/components/ChannelPieChart";
 import ChannelSelection from "@/components/ChannelSelection";
 import DistributionBox from "@/components/DistributionBox";
-import Steps from "@/components/Steps";
 import TxTable from "@/components/TxTable";
 import { disclosures } from "@/data/constants/disclosures";
 import { errors } from "@/data/constants/errorMessages";
 import { useConnectModal } from "@/hooks/useConnectModal";
 import { usePolicyReviewModal } from "@/hooks/usePolicyReviewModal";
 import useSmartAccount from "@/hooks/useSmartAccount";
+import { useLocker } from "@/providers/LockerProvider";
 import { createPolicy } from "@/services/lockers";
 import {
 	Automation,
@@ -26,10 +26,10 @@ import {
 } from "@/types";
 import { isChainSupported } from "@/utils/isChainSupported";
 
-import { useLockerPortfolio } from "./LockerPortfolioContext";
+import Steps from "./Steps";
 
 function LockerSetup() {
-	const { lockers } = useLockerPortfolio();
+	const { lockers } = useLocker();
 	const [sendToAddress, setSendToAddress] = useState<string>(
 		lockers[0].ownerAddress
 	);

src/app/utils/useRealtimeTable.ts → src/hooks/useRealtimeTable.ts

@@ -7,8 +7,9 @@ import {
 } from "@supabase/supabase-js";
 import { useCallback, useEffect, useState } from "react";
 
-import { convertKeysToCamelCase } from "../../utils/strings";
-import { supabaseJwtClient } from "../../utils/supabase/jwt";
+import { convertKeysToCamelCase } from "@/utils/strings";
+import { supabaseJwtClient } from "@/utils/supabase/jwt";
+
 import { useJwt } from "./useJwt";
 
 export const useRealtimeTable = <T extends { id: number }>(

src/components/LockerPortfolioContext.tsx → src/providers/LockerProvider.tsx

@@ -2,7 +2,7 @@
 
 import { createContext, ReactNode, useContext, useMemo, useState } from "react";
 
-import { useRealtimeTable } from "@/app/utils/useRealtimeTable";
+import { useRealtimeTable } from "@/hooks/useRealtimeTable";
 import { LockerDb, PolicyDb, Tx } from "@/types";
 import {
 	TABLE_LOCKERS,
@@ -29,7 +29,7 @@ const LockerPortfolioContext = createContext<
 >(undefined);
 
 // Provider component
-export function LockerPortfolioProvider({
+export function LockerProvider({
 	initialLockers,
 	initialPolicies,
 	initialOfframpAddresses,
@@ -73,7 +73,7 @@ export function LockerPortfolioProvider({
 }
 
 // Custom hook for accessing the context
-export const useLockerPortfolio = (): LockerPortfolioContextProps => {
+export const useLocker = (): LockerPortfolioContextProps => {
 	const context = useContext(LockerPortfolioContext);
 	if (!context) {
 		throw new Error(