First pass at new useLogin hook

examples/web/src/App.tsx

@@ -1,4 +1,5 @@
 import { LensConfig, LensProvider, development } from '@lens-protocol/react';
+import { bindings as wagmiBindings } from '@lens-protocol/wagmi';
 import { XMTPProvider } from '@xmtp/react-sdk';
 import { Toaster } from 'react-hot-toast';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
@@ -7,8 +8,9 @@ import { polygonMumbai } from 'wagmi/chains';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import { publicProvider } from 'wagmi/providers/public';
 
-import { Home } from './HomePage';
-import { Breadcrumbs } from './components/Breadcrumbs';
+import { HomePage } from './HomePage';
+import { Layout } from './Layout';
+import { LogInPage } from './LogInPage';
 import { GenericErrorBoundary } from './components/GenericErrorBoundary';
 import { ErrorMessage } from './components/error/ErrorMessage';
 import { Header } from './components/header/Header';
@@ -41,6 +43,7 @@ const config = createConfig({
 const lensConfig: LensConfig = {
   environment: development,
   storage: localStorage(),
+  bindings: wagmiBindings(),
 };
 
 export function App() {
@@ -51,21 +54,23 @@ export function App() {
           <Router>
             <Header />
             <main>
-              <Breadcrumbs />
               <GenericErrorBoundary fallback={ErrorMessage}>
                 <Routes>
-                  <Route index element={<Home />} />
+                  <Route index element={<HomePage />} />
+                  <Route path="/login" element={<LogInPage />} />
 
-                  <Route path="/publications">
-                    <Route index element={<PublicationsPage />} />
-                    <Route path="usePublication" element={<UsePublication />} />
-                    <Route path="usePublications" element={<UsePublications />} />
-                  </Route>
+                  <Route element={<Layout />}>
+                    <Route path="/publications">
+                      <Route index element={<PublicationsPage />} />
+                      <Route path="usePublication" element={<UsePublication />} />
+                      <Route path="usePublications" element={<UsePublications />} />
+                    </Route>
 
-                  <Route path="/profiles">
-                    <Route index element={<ProfilesPage />} />
-                    <Route path="useProfile" element={<UseProfile />} />
-                    <Route path="useProfiles" element={<UseProfiles />} />
+                    <Route path="/profiles">
+                      <Route index element={<ProfilesPage />} />
+                      <Route path="useProfile" element={<UseProfile />} />
+                      <Route path="useProfiles" element={<UseProfiles />} />
+                    </Route>
                   </Route>
                 </Routes>
               </GenericErrorBoundary>

examples/web/src/HomePage.tsx

@@ -2,19 +2,15 @@ import { Link } from 'react-router-dom';
 
 import { CATEGORIES } from './config';
 
-export function Home() {
+export function HomePage() {
   return (
-    <>
-      <h1>Home</h1>
-
-      <div>
-        {CATEGORIES.map(({ path, label }) => (
-          <article key={path}>
-            <h2>{label}</h2>
-            <Link to={path}>View</Link>
-          </article>
-        ))}
-      </div>
-    </>
+    <div>
+      {CATEGORIES.map(({ path, label }) => (
+        <article key={path}>
+          <h2>{label}</h2>
+          <Link to={path}>View</Link>
+        </article>
+      ))}
+    </div>
   );
 }

examples/web/src/Layout.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom';
+
+import { Breadcrumbs } from './components/Breadcrumbs';
+
+export function Layout() {
+  return (
+    <>
+      <Breadcrumbs />
+      <Outlet />
+    </>
+  );
+}

examples/web/src/LogInPage.tsx

@@ -0,0 +1,91 @@
+import { ProfileId, useLogin, useProfiles } from '@lens-protocol/react';
+import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom';
+import { useAccount, useConnect } from 'wagmi';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+
+import { ErrorMessage } from './components/error/ErrorMessage';
+import { Loading } from './components/loading/Loading';
+import { never } from './utils';
+
+function ProfilesList({ owner }: { owner: string }) {
+  const navigate = useNavigate();
+  const { execute: login, isPending: isLoginPending } = useLogin();
+  const { data: profiles, error, loading } = useProfiles({ where: { ownedBy: [owner] } });
+
+  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const form = event.currentTarget;
+    const formData = new FormData(form);
+
+    const profileId = (formData.get('id') as string) ?? never();
+
+    const result = await login({
+      address: owner,
+      profileId: profileId as ProfileId,
+    });
+
+    if (result.isSuccess()) {
+      toast.success(`Welcome ${String(result.value.handle)}`);
+      return navigate('/');
+    }
+
+    toast.error(result.error.message);
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return <ErrorMessage error={error} />;
+  }
+
+  if (profiles.length === 0) {
+    return <p>No profiles on this wallet.</p>;
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <fieldset>
+        <legend>Which Profile you want to log-in with?</legend>
+
+        {profiles.map((profile, idx) => (
+          <label key={profile.id}>
+            <input
+              disabled={isLoginPending}
+              type="radio"
+              defaultChecked={idx === 0}
+              name="id"
+              value={profile.id}
+            />
+            {profile.handle}
+          </label>
+        ))}
+
+        <div>
+          <button disabled={isLoginPending} type="submit">
+            Continue
+          </button>
+        </div>
+      </fieldset>
+    </form>
+  );
+}
+
+export function LogInPage() {
+  const { address, isDisconnected } = useAccount();
+
+  const { connect } = useConnect({
+    connector: new InjectedConnector(),
+  });
+
+  return (
+    <div>
+      {isDisconnected && <button onClick={() => connect()}>Connect first</button>}
+
+      {address && <ProfilesList owner={address} />}
+    </div>
+  );
+}

examples/web/src/components/auth/LoginButton.tsx

@@ -0,0 +1,6 @@
+import { Link } from 'react-router-dom';
+
+// TODO render log out button once useSession is implemented
+export function LoginButton() {
+  return <Link to="/login">Log in</Link>;
+}

examples/web/src/components/auth/index.tsx

@@ -0,0 +1 @@
+export * from './LoginButton';

examples/web/src/components/header/Header.tsx

@@ -1,6 +1,7 @@
 import { NavLink } from 'react-router-dom';
 
 import { CATEGORIES } from '../../config';
+import { LoginButton } from '../auth';
 
 export function Header() {
   return (
@@ -25,7 +26,9 @@ export function Header() {
             justifyContent: 'space-between',
             gap: '1rem',
           }}
-        ></div>
+        >
+          <LoginButton />
+        </div>
       </div>
 
       <nav>

packages/api-bindings/src/apollo/cache/__helpers__/mocks.ts

@@ -1,22 +1,12 @@
-import { ApolloCache, NormalizedCacheObject, ReactiveVar } from '@apollo/client';
+import { ApolloCache, NormalizedCacheObject } from '@apollo/client';
 import { faker } from '@faker-js/faker';
-import { mockCreatePostRequest, mockWalletData } from '@lens-protocol/domain/mocks';
-import { ProfileIdentifier, WalletData } from '@lens-protocol/domain/use-cases/lifecycle';
+import { mockCreatePostRequest, mockSessionData } from '@lens-protocol/domain/mocks';
 import { AnyTransactionRequest } from '@lens-protocol/domain/use-cases/transactions';
 
 import { createLensCache } from '../createLensCache';
-import {
-  authenticatedProfile,
-  authenticatedWallet,
-  notAuthenticated,
-  updateSession,
-} from '../session';
+import { authenticated, notAuthenticated, updateSession } from '../session';
 import { TransactionState, TxStatus } from '../transactions';
 
-export type MockCacheConfiguration = {
-  activeWalletVar?: ReactiveVar<WalletData | null>;
-};
-
 export function mockLensCache(): ApolloCache<NormalizedCacheObject> {
   return createLensCache();
 }
@@ -32,17 +22,16 @@ export function mockTransactionState<T extends AnyTransactionRequest>(
   };
 }
 
-export function simulateAuthenticatedWallet(wallet = mockWalletData()) {
-  updateSession(authenticatedWallet(wallet));
-}
-
-export function simulateAuthenticatedProfile(
-  profile: ProfileIdentifier,
-  wallet = mockWalletData(),
-) {
-  updateSession(authenticatedProfile(wallet, profile));
+/**
+ * @deprecated flagged as possibly not needed
+ */
+export function simulateAuthenticated(data = mockSessionData()) {
+  updateSession(authenticated(data));
 }
 
+/**
+ * @deprecated flagged as possibly not needed
+ */
 export function simulateNotAuthenticated() {
   updateSession(notAuthenticated());
 }