From c17c9099857ba669e82f663b236e6ff655f1398e Mon Sep 17 00:00:00 2001 From: Cesare Naldi Date: Thu, 5 Oct 2023 14:22:03 +0200 Subject: [PATCH] First pass at new useLogin hook --- examples/web/src/App.tsx | 31 +- examples/web/src/HomePage.tsx | 22 +- examples/web/src/Layout.tsx | 12 + examples/web/src/LogInPage.tsx | 91 +++ .../web/src/components/auth/LoginButton.tsx | 6 + examples/web/src/components/auth/index.tsx | 1 + examples/web/src/components/header/Header.tsx | 5 +- .../src/apollo/cache/__helpers__/mocks.ts | 33 +- .../api-bindings/src/apollo/cache/session.ts | 83 +-- .../src/lens/__helpers__/queries.ts | 37 + .../src/lens/graphql/generated.ts | 25 +- .../src/lens/graphql/transaction.graphql | 2 + packages/domain/src/entities/Transactions.ts | 7 + .../authentication/__helpers__/mocks.ts | 8 + .../src/use-cases/profile/IProfileGateway.ts | 7 - .../domain/src/use-cases/profile/index.ts | 1 - .../adapters/AccessTokenStorage.ts | 67 ++ .../src/authentication/adapters/AuthApi.ts | 62 ++ .../authentication/adapters/Credentials.ts | 61 ++ .../adapters/CredentialsExpiryController.ts | 21 + .../adapters/CredentialsFactory.ts | 48 ++ .../adapters/CredentialsGateway.ts | 23 + .../adapters/CredentialsStorage.ts | 69 ++ .../authentication/adapters/LoginPresenter.ts | 43 ++ .../adapters/__helpers__/mocks.ts | 8 + .../__tests__/CredentialsFactory.spec.ts | 111 +++ .../__tests__/CredentialsGateway.spec.ts | 41 ++ .../adapters/useLoginController.ts | 29 + packages/react/src/authentication/index.ts | 1 + packages/react/src/authentication/useLogin.ts | 7 + packages/react/src/config.ts | 8 +- packages/react/src/helpers/tasks.ts | 64 ++ packages/react/src/index.ts | 1 + .../src/polls/adapters/SnapshotVoteFactory.ts | 232 +++++++ .../src/polls/adapters/SnapshotVoteRelayer.ts | 44 ++ .../src/polls/adapters/__helpers__/mocks.ts | 8 + .../__tests__/SnapshotVoteFactory.spec.ts | 284 ++++++++ .../__tests__/SnapshotVoteRelayer.spec.ts | 99 +++ packages/react/src/polls/adapters/types.ts | 77 +++ .../profile/adapters/IProfileCacheManager.ts | 10 + .../infrastructure/ProfileCacheManager.ts | 69 ++ packages/react/src/shared.tsx | 74 +- .../adapters/ITransactionFactory.ts | 45 ++ .../ISerializableTransactionFactory.ts | 46 ++ .../PendingTransactionGateway.ts | 209 ++++++ .../PendingTransactionGateway.spec.ts | 297 ++++++++ .../PendingTransactionGateway/index.ts | 6 + .../SelfFundedProtocolTransactionRequest.ts | 16 + .../adapters/__helpers__/mocks.ts | 97 +++ .../schemas/__tests__/Erc20Amount.spec.ts | 25 + .../schemas/__tests__/formatters.spec.ts | 57 ++ .../schemas/__tests__/validators.spec.ts | 653 ++++++++++++++++++ .../transactions/adapters/schemas/common.ts | 62 ++ .../transactions/adapters/schemas/erc20.ts | 16 + .../adapters/schemas/formatters.ts | 102 +++ .../transactions/adapters/schemas/profiles.ts | 122 ++++ .../adapters/schemas/publications.ts | 408 +++++++++++ .../adapters/schemas/transactions.ts | 166 +++++ .../adapters/schemas/validators.ts | 70 ++ .../infrastructure/TransactionFactory.ts | 310 +++++++++ .../infrastructure/TransactionObserver.ts | 164 +++++ .../infrastructure/__helpers__/mocks.ts | 85 +++ .../__tests__/TransactionFactory.spec.ts | 218 ++++++ .../__tests__/TransactionObserver.spec.ts | 342 +++++++++ .../src/wallet/adapters/ConcreteWallet.ts | 324 +++++++++ .../src/wallet/adapters/IProviderFactory.ts | 10 + .../src/wallet/adapters/WalletFactory.ts | 22 + .../src/wallet/adapters/WalletGateway.ts | 62 ++ .../src/wallet/adapters/__helpers__/mocks.ts | 136 ++++ .../adapters/__tests__/ConcreteWallet.spec.ts | 376 ++++++++++ .../adapters/__tests__/WalletGateway.spec.ts | 74 ++ packages/react/src/wallet/adapters/errors.ts | 11 + .../wallet/infrastructure/ProviderFactory.ts | 32 + .../wallet/infrastructure/SignerFactory.ts | 109 +++ .../wallet/infrastructure/WalletStorage.ts | 11 + .../infrastructure/__helpers__/mocks.ts | 36 + .../__tests__/ProviderFactory.spec.ts | 58 ++ .../__tests__/SignerFactory.spec.ts | 156 +++++ 78 files changed, 6716 insertions(+), 149 deletions(-) create mode 100644 examples/web/src/Layout.tsx create mode 100644 examples/web/src/LogInPage.tsx create mode 100644 examples/web/src/components/auth/LoginButton.tsx create mode 100644 examples/web/src/components/auth/index.tsx delete mode 100644 packages/domain/src/use-cases/profile/IProfileGateway.ts create mode 100644 packages/react/src/authentication/adapters/AccessTokenStorage.ts create mode 100644 packages/react/src/authentication/adapters/AuthApi.ts create mode 100644 packages/react/src/authentication/adapters/Credentials.ts create mode 100644 packages/react/src/authentication/adapters/CredentialsExpiryController.ts create mode 100644 packages/react/src/authentication/adapters/CredentialsFactory.ts create mode 100644 packages/react/src/authentication/adapters/CredentialsGateway.ts create mode 100644 packages/react/src/authentication/adapters/CredentialsStorage.ts create mode 100644 packages/react/src/authentication/adapters/LoginPresenter.ts create mode 100644 packages/react/src/authentication/adapters/__helpers__/mocks.ts create mode 100644 packages/react/src/authentication/adapters/__tests__/CredentialsFactory.spec.ts create mode 100644 packages/react/src/authentication/adapters/__tests__/CredentialsGateway.spec.ts create mode 100644 packages/react/src/authentication/adapters/useLoginController.ts create mode 100644 packages/react/src/authentication/index.ts create mode 100644 packages/react/src/authentication/useLogin.ts create mode 100644 packages/react/src/helpers/tasks.ts create mode 100644 packages/react/src/polls/adapters/SnapshotVoteFactory.ts create mode 100644 packages/react/src/polls/adapters/SnapshotVoteRelayer.ts create mode 100644 packages/react/src/polls/adapters/__helpers__/mocks.ts create mode 100644 packages/react/src/polls/adapters/__tests__/SnapshotVoteFactory.spec.ts create mode 100644 packages/react/src/polls/adapters/__tests__/SnapshotVoteRelayer.spec.ts create mode 100644 packages/react/src/polls/adapters/types.ts create mode 100644 packages/react/src/profile/adapters/IProfileCacheManager.ts create mode 100644 packages/react/src/profile/infrastructure/ProfileCacheManager.ts create mode 100644 packages/react/src/transactions/adapters/ITransactionFactory.ts create mode 100644 packages/react/src/transactions/adapters/PendingTransactionGateway/ISerializableTransactionFactory.ts create mode 100644 packages/react/src/transactions/adapters/PendingTransactionGateway/PendingTransactionGateway.ts create mode 100644 packages/react/src/transactions/adapters/PendingTransactionGateway/__tests__/PendingTransactionGateway.spec.ts create mode 100644 packages/react/src/transactions/adapters/PendingTransactionGateway/index.ts create mode 100644 packages/react/src/transactions/adapters/SelfFundedProtocolTransactionRequest.ts create mode 100644 packages/react/src/transactions/adapters/__helpers__/mocks.ts create mode 100644 packages/react/src/transactions/adapters/schemas/__tests__/Erc20Amount.spec.ts create mode 100644 packages/react/src/transactions/adapters/schemas/__tests__/formatters.spec.ts create mode 100644 packages/react/src/transactions/adapters/schemas/__tests__/validators.spec.ts create mode 100644 packages/react/src/transactions/adapters/schemas/common.ts create mode 100644 packages/react/src/transactions/adapters/schemas/erc20.ts create mode 100644 packages/react/src/transactions/adapters/schemas/formatters.ts create mode 100644 packages/react/src/transactions/adapters/schemas/profiles.ts create mode 100644 packages/react/src/transactions/adapters/schemas/publications.ts create mode 100644 packages/react/src/transactions/adapters/schemas/transactions.ts create mode 100644 packages/react/src/transactions/adapters/schemas/validators.ts create mode 100644 packages/react/src/transactions/infrastructure/TransactionFactory.ts create mode 100644 packages/react/src/transactions/infrastructure/TransactionObserver.ts create mode 100644 packages/react/src/transactions/infrastructure/__helpers__/mocks.ts create mode 100644 packages/react/src/transactions/infrastructure/__tests__/TransactionFactory.spec.ts create mode 100644 packages/react/src/transactions/infrastructure/__tests__/TransactionObserver.spec.ts create mode 100644 packages/react/src/wallet/adapters/ConcreteWallet.ts create mode 100644 packages/react/src/wallet/adapters/IProviderFactory.ts create mode 100644 packages/react/src/wallet/adapters/WalletFactory.ts create mode 100644 packages/react/src/wallet/adapters/WalletGateway.ts create mode 100644 packages/react/src/wallet/adapters/__helpers__/mocks.ts create mode 100644 packages/react/src/wallet/adapters/__tests__/ConcreteWallet.spec.ts create mode 100644 packages/react/src/wallet/adapters/__tests__/WalletGateway.spec.ts create mode 100644 packages/react/src/wallet/adapters/errors.ts create mode 100644 packages/react/src/wallet/infrastructure/ProviderFactory.ts create mode 100644 packages/react/src/wallet/infrastructure/SignerFactory.ts create mode 100644 packages/react/src/wallet/infrastructure/WalletStorage.ts create mode 100644 packages/react/src/wallet/infrastructure/__helpers__/mocks.ts create mode 100644 packages/react/src/wallet/infrastructure/__tests__/ProviderFactory.spec.ts create mode 100644 packages/react/src/wallet/infrastructure/__tests__/SignerFactory.spec.ts diff --git a/examples/web/src/App.tsx b/examples/web/src/App.tsx index 4a185a5a09..26c2e09162 100644 --- a/examples/web/src/App.tsx +++ b/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() {
- - } /> + } /> + } /> - - } /> - } /> - } /> - + }> + + } /> + } /> + } /> + - - } /> - } /> - } /> + + } /> + } /> + } /> + diff --git a/examples/web/src/HomePage.tsx b/examples/web/src/HomePage.tsx index 14f42042b0..24932ffa01 100644 --- a/examples/web/src/HomePage.tsx +++ b/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 ( - <> -

Home

- -
- {CATEGORIES.map(({ path, label }) => ( -
-

{label}

- View -
- ))} -
- +
+ {CATEGORIES.map(({ path, label }) => ( +
+

{label}

+ View +
+ ))} +
); } diff --git a/examples/web/src/Layout.tsx b/examples/web/src/Layout.tsx new file mode 100644 index 0000000000..39649831f7 --- /dev/null +++ b/examples/web/src/Layout.tsx @@ -0,0 +1,12 @@ +import { Outlet } from 'react-router-dom'; + +import { Breadcrumbs } from './components/Breadcrumbs'; + +export function Layout() { + return ( + <> + + + + ); +} diff --git a/examples/web/src/LogInPage.tsx b/examples/web/src/LogInPage.tsx new file mode 100644 index 0000000000..255000226b --- /dev/null +++ b/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) => { + 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 ; + } + + if (error) { + return ; + } + + if (profiles.length === 0) { + return

No profiles on this wallet.

; + } + + return ( +
+
+ Which Profile you want to log-in with? + + {profiles.map((profile, idx) => ( + + ))} + +
+ +
+
+
+ ); +} + +export function LogInPage() { + const { address, isDisconnected } = useAccount(); + + const { connect } = useConnect({ + connector: new InjectedConnector(), + }); + + return ( +
+ {isDisconnected && } + + {address && } +
+ ); +} diff --git a/examples/web/src/components/auth/LoginButton.tsx b/examples/web/src/components/auth/LoginButton.tsx new file mode 100644 index 0000000000..3f6ab9f3d9 --- /dev/null +++ b/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 Log in; +} diff --git a/examples/web/src/components/auth/index.tsx b/examples/web/src/components/auth/index.tsx new file mode 100644 index 0000000000..076da3b467 --- /dev/null +++ b/examples/web/src/components/auth/index.tsx @@ -0,0 +1 @@ +export * from './LoginButton'; diff --git a/examples/web/src/components/header/Header.tsx b/examples/web/src/components/header/Header.tsx index 0ce7c1b628..89a159acb9 100644 --- a/examples/web/src/components/header/Header.tsx +++ b/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', }} - > + > + +