Add ability to set project name dynamically

.changeset/angry-walls-grin.md

@@ -0,0 +1,5 @@
+---
+"@everipedia/iq-login": patch
+---
+
+Adds ability to add project name from outside

src/components/iq-login-provider.tsx

@@ -15,27 +15,32 @@ import {
 	metaMaskWallet,
 	rainbowWallet,
 } from "@rainbow-me/rainbowkit/wallets";
+import { createContext } from "react";
 
 interface IqLoginProviderProps {
 	children: React.ReactNode;
 	cookie?: string;
 	chain: Chain;
 	walletConnectProjectId: string;
 	web3AuthProjectId: string;
+	projectName: string;
 }
 
+export const ProjectContext = createContext<string>("");
+
 export function IqLoginProvider({
 	children,
 	cookie,
 	chain,
 	walletConnectProjectId,
 	web3AuthProjectId,
+	projectName,
 }: IqLoginProviderProps) {
 	const queryClient = getQueryClient();
 	const web3AuthInstance = createWeb3AuthInstance(chain, web3AuthProjectId);
 
 	const config = getDefaultConfig({
-		appName: "IQ.wiki",
+		appName: projectName,
 		projectId: walletConnectProjectId,
 		chains: [chain],
 		wallets: [
@@ -58,15 +63,17 @@ export function IqLoginProvider({
 	const initialStates = cookieToInitialState(config, cookie);
 
 	return (
-		<QueryClientProvider client={queryClient}>
-			<WagmiProvider config={config} initialState={initialStates}>
-				<RainbowKitProvider theme={iqWikiTheme}>
-					<Web3AuthProvider web3AuthInstance={web3AuthInstance}>
-						{children}
-					</Web3AuthProvider>
-				</RainbowKitProvider>
-			</WagmiProvider>
-		</QueryClientProvider>
+		<ProjectContext.Provider value={projectName}>
+			<QueryClientProvider client={queryClient}>
+				<WagmiProvider config={config} initialState={initialStates}>
+					<RainbowKitProvider theme={iqWikiTheme}>
+						<Web3AuthProvider web3AuthInstance={web3AuthInstance}>
+							{children}
+						</Web3AuthProvider>
+					</RainbowKitProvider>
+				</WagmiProvider>
+			</QueryClientProvider>
+		</ProjectContext.Provider>
 	);
 }
 

src/lib/hooks/use-auth.ts

@@ -6,8 +6,9 @@ import { useWeb3Auth } from "../../components/web3-auth-provider";
 import type { UserInfo } from "@web3auth/base";
 import { useMutation } from "@tanstack/react-query";
 import type { GetWalletClientReturnType } from "@wagmi/core";
-import { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import { AUTH_TOKEN_KEY } from "../constants";
+import { ProjectContext } from "../../components/iq-login-provider";
 
 export const useTokenStore = create<{
 	token: string | null;
@@ -21,6 +22,7 @@ export const useAuth = () => {
 	const { token, setToken } = useTokenStore((state) => state);
 	const { data: walletClient } = useWalletClient();
 	const { user: web3AuthUser } = useWeb3Auth();
+	const projectName = useContext(ProjectContext);
 
 	const disconnectMutation = useDisconnect({
 		mutation: {
@@ -33,14 +35,15 @@ export const useAuth = () => {
 
 	const signTokenMutation = useMutation({
 		mutationFn: async () =>
-			(await fetchStoredToken()) ?? (await generateNewToken(walletClient)),
+			(await fetchStoredToken()) ??
+			(await generateNewToken(projectName, walletClient)),
 		onSuccess: (newToken) => {
 			setToken(newToken);
 		},
 	});
 
 	const reSignTokenMutation = useMutation({
-		mutationFn: async () => await generateNewToken(walletClient),
+		mutationFn: async () => await generateNewToken(projectName, walletClient),
 		onSuccess: (newToken) => {
 			setToken(newToken);
 		},
@@ -69,15 +72,17 @@ export const useAuth = () => {
 	};
 };
 
-async function generateNewToken(walletClient?: GetWalletClientReturnType) {
+async function generateNewToken(
+	projectName: string,
+	walletClient?: GetWalletClientReturnType,
+) {
 	if (!walletClient) {
 		throw new Error("Wallet client not available");
 	}
 	const freshToken = await sign(
 		(msg) => walletClient.signMessage({ message: msg }),
 		{
-			statement:
-				"Welcome to IQ.wiki ! Click to sign in and accept the IQ.wiki Terms of Service. This request will not trigger a blockchain transaction or cost any gas fees. Your authentication status will reset after 1 year. ",
+			statement: `Welcome to ${projectName}! Click to sign in and accept the ${projectName} Terms of Service. This request will not trigger a blockchain transaction or cost any gas fees. Your authentication status will reset after 1 year.`,
 			expires_in: "1y",
 		},
 	);