Merge pull request #911 from lens-protocol/release/20240412

Release 2.1.0

examples/lens-next-app/package.json

@@ -18,8 +18,8 @@
     "next": "^14.1.1",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^2.7.6",
-    "wagmi": "^2.5.6"
+    "viem": "^2.9.16",
+    "wagmi": "^2.5.19"
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",

examples/lens-next-app/src/components/Web3Provider.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { WagmiProvider, createConfig, http } from "wagmi";
-import { polygon, polygonMumbai } from "wagmi/chains";
+import { polygon, polygonAmoy } from "wagmi/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ConnectKitProvider, getDefaultConfig } from "connectkit";
 import { LensConfig, LensProvider, development, production } from "@lens-protocol/react-web";
@@ -15,9 +15,9 @@ type ConnectKitConfig = Parameters<typeof getDefaultConfig>[0];
 const appConfigs = {
   development: {
     connectkit: {
-      chains: [polygonMumbai],
+      chains: [polygonAmoy],
       transports: {
-        [polygonMumbai.id]: http(),
+        [polygonAmoy.id]: http(),
       },
     } as Partial<ConnectKitConfig>,
     lens: {

examples/node/README.md

@@ -5,7 +5,7 @@ This package is a collection of simple node.js scripts showcasing the `@lens-pro
 ## Getting Started
 
 Some scripts require a wallet to authenticate the LensClient. Copy `.env.example` file to `.env` and define the private key for the wallet you want to use with the scripts. Best practice is to create a new test wallet. You don't need any funds in the wallet to experiment with the LensClient SDK.
-But you will need a bit of MUMBAI MATIC to upload data or files to devnet Irys. You can get it from [the faucet](https://faucet.polygon.technology/).
+But you will need a bit of AMOY MATIC to upload data or files to devnet Irys. You can get it from [the faucet](https://faucet.polygon.technology/).
 
 ### Run a script
 

examples/node/scripts/handle/resolveAddress.ts

@@ -5,7 +5,7 @@ async function main() {
     environment: development,
   });
 
-  const address = await client.handle.resolveAddress({ handle: 'test/wagmi' });
+  const address = await client.handle.resolveAddress({ handle: 'lens/wagmi' });
 
   console.log(`Address: `, address);
 }

examples/node/scripts/misc/onboarding.ts

@@ -18,7 +18,7 @@ dotenv.config();
 const typedAbi = abi as ethers.ContractInterface;
 
 const permissonlessCreatorAddress = {
-  development: '0xCb4FB63c3f13CB83cCD6F10E9e5F29eC250329Cc',
+  development: '0x36440da1D98FF46637f0b98AAA082bc77977B49B',
   production: '0x0b5e6100243f793e480DE6088dE6bA70aA9f3872',
 };
 
@@ -27,12 +27,10 @@ if (!process.env.INFURA_API_KEY) {
 }
 
 const rpcUrl = {
-  development: `https://polygon-mumbai.infura.io/v3/${process.env.INFURA_API_KEY}`,
+  development: `https://polygon-amoy.infura.io/v3/${process.env.INFURA_API_KEY}`,
   production: `https://polygon.infura.io/v3/${process.env.INFURA_API_KEY}`,
 };
 
-const HANDLE_NAMESPACE = 'test'; // use 'lens' namespace for production
-
 async function main() {
   // prepare new handle
   const requestedHandle = 'jane_doe'; // input from the user
@@ -50,7 +48,7 @@ async function main() {
 
   // check if the requested handle is available
   const handleOwnerAddress = await client.handle.resolveAddress({
-    handle: `${HANDLE_NAMESPACE}/${requestedHandle}`,
+    handle: `lens/${requestedHandle}`,
   });
 
   if (handleOwnerAddress) {
@@ -112,7 +110,7 @@ async function main() {
   console.log('A new profile has been successfully minted.');
 
   // now fetch the newly created profile to get the id
-  const fullHandle = `${HANDLE_NAMESPACE}/${requestedHandle}`;
+  const fullHandle = `lens/${requestedHandle}`;
 
   const profile = await client.profile.fetch({
     forHandle: fullHandle,

examples/node/scripts/profile/fetch.ts

@@ -14,7 +14,7 @@ async function main() {
 
   // by handle
   const profileByHandle = await client.profile.fetch({
-    forHandle: 'test/@firstprofile',
+    forHandle: 'lens/firstprofile',
   });
 
   console.log(`Profile fetched by handle: `, {

examples/node/scripts/profile/fetchAll.ts

@@ -28,7 +28,7 @@ async function main() {
 
   // by a list of Lens handles
   const profilesByHandle = await client.profile.fetchAll({
-    where: { handles: ['test/@firstprofile'] },
+    where: { handles: ['lens/firstprofile'] },
   });
 
   console.log(

examples/node/scripts/profile/recipes/profileMetadata.ts

@@ -12,7 +12,7 @@ dotenv.config();
 const typedAbi = abi as ethers.ContractInterface;
 
 const lensHubAddress = {
-  development: '0x4fbffF20302F3326B20052ab9C217C44F6480900',
+  development: '0xA2574D9DdB6A325Ad2Be838Bd854228B80215148',
   production: '0xDb46d1Dc155634FbC732f92E853b10B288AD5a1d',
 };
 
@@ -21,7 +21,7 @@ if (!process.env.INFURA_API_KEY) {
 }
 
 const rpcUrl = {
-  development: `https://polygon-mumbai.infura.io/v3/${process.env.INFURA_API_KEY}`,
+  development: `https://polygon-amoy.infura.io/v3/${process.env.INFURA_API_KEY}`,
   production: `https://polygon.infura.io/v3/${process.env.INFURA_API_KEY}`,
 };
 

examples/node/scripts/publication/recipes/openActionWalletOnly.ts

@@ -10,7 +10,7 @@ dotenv.config();
 const typedAbi = abi as ethers.ContractInterface;
 
 const publicActionProxyAddress = {
-  development: '0xab5607f5447d538fc79bb32364ddecd8f76d7ee8',
+  development: '0x88c8fa7C470d9d94aDfA40187157917B26A548d3',
   production: '0x53582b1b7BE71622E7386D736b6baf87749B7a2B',
 };
 
@@ -19,7 +19,7 @@ if (!process.env.INFURA_API_KEY) {
 }
 
 const rpcUrl = {
-  development: `https://polygon-mumbai.infura.io/v3/${process.env.INFURA_API_KEY}`,
+  development: `https://polygon-amoy.infura.io/v3/${process.env.INFURA_API_KEY}`,
   production: `https://polygon.infura.io/v3/${process.env.INFURA_API_KEY}`,
 };
 

examples/node/scripts/shared/uploadWithIrys.ts

@@ -7,21 +7,21 @@ export async function uploadWithIrys(data: { [key: string]: unknown }): Promise<
     url: 'https://devnet.irys.xyz',
     token: 'matic',
     key: walletPrivateKey,
-    config: { providerUrl: 'https://rpc-mumbai.maticvigil.com/' },
+    config: { providerUrl: 'https://rpc-amoy.polygon.technology/' },
   });
 
   const atomicBalance = await irys.getLoadedBalance();
   const balance = irys.utils.fromAtomic(atomicBalance);
 
   console.log(
-    `Irys balance for wallet ${String(irys.address)} is ${balance.toString()} MUMBAI MATIC`,
+    `Irys balance for wallet ${String(irys.address)} is ${balance.toString()} AMOY MATIC`,
   );
 
   // fund Irys balance if empty
   if (balance.eq(0)) {
-    console.log('Trying to fund your irys balance with 0.1 MUMBAI MATIC');
+    console.log('Trying to fund your irys balance with 0.1 AMOY MATIC');
 
-    await irys.fund(0.1e18); // 0.1 MUMBAI MATIC
+    await irys.fund(0.1e18); // 0.1 AMOY MATIC
   }
 
   const serialized = JSON.stringify(data);

examples/web/package.json

@@ -31,8 +31,8 @@
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.20.0",
     "readable-web-to-node-stream": "^3.0.2",
-    "viem": "^2.7.6",
-    "wagmi": "^2.5.6"
+    "viem": "^2.9.16",
+    "wagmi": "^2.5.19"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",

examples/web/src/App.tsx

@@ -32,6 +32,7 @@ import {
   UseClaimHandle,
   UseCurrencies,
   UseInviteWallets,
+  UseLatestPaidActions,
   UseNotifications,
   UseResolveAddress,
   UseSignFrameAction,
@@ -186,6 +187,7 @@ export function App() {
                   <Route path="useNotifications" element={<UseNotifications />} />
                   <Route path="useCurrencies" element={<UseCurrencies />} />
                   <Route path="useApproveModule" element={<UseApproveModule />} />
+                  <Route path="useLatestPaidActions" element={<UseLatestPaidActions />} />
                   <Route path="useClaimHandle" element={<UseClaimHandle />} />
                   <Route path="useInviteWallets" element={<UseInviteWallets />} />
                   <Route path="useResolveAddress" element={<UseResolveAddress />} />

examples/web/src/Providers.tsx

@@ -2,14 +2,14 @@ import { LensConfig, LensProvider, development } from '@lens-protocol/react-web'
 import { bindings } from '@lens-protocol/wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider, createConfig, http } from 'wagmi';
-import { polygon, polygonMumbai } from 'wagmi/chains';
+import { polygon, polygonAmoy } from 'wagmi/chains';
 
 const queryClient = new QueryClient();
 
 const wagmiConfig = createConfig({
-  chains: [polygonMumbai, polygon],
+  chains: [polygonAmoy, polygon],
   transports: {
-    [polygonMumbai.id]: http(),
+    [polygonAmoy.id]: http(),
     [polygon.id]: http(),
   },
 });

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

@@ -2,6 +2,7 @@ import { profileId, useLogin, useProfilesManaged } from '@lens-protocol/react-we
 import { toast } from 'react-hot-toast';
 
 import { never } from '../../utils';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 import { ErrorMessage } from '../error/ErrorMessage';
 import { Loading } from '../loading/Loading';
 
@@ -23,7 +24,7 @@ export function LoginForm({ owner, onSuccess }: { owner: string; onSuccess?: ()
     });
 
     if (result.isSuccess()) {
-      toast.success(`Welcome ${String(result.value?.handle?.fullHandle ?? result.value?.id)}`);
+      toast.success(`Welcome ${String(result.value && formatProfileIdentifier(result.value))}`);
       return onSuccess?.();
     }
 
@@ -56,7 +57,7 @@ export function LoginForm({ owner, onSuccess }: { owner: string; onSuccess?: ()
               name="id"
               value={profile.id}
             />
-            {profile.handle?.fullHandle ?? profile.id}
+            {formatProfileIdentifier(profile)}
           </label>
         ))}
 

examples/web/src/components/cards.tsx

@@ -7,6 +7,7 @@ import {
 import { ReactNode } from 'react';
 
 import { ProfilePicture } from '../profiles/components/ProfilePicture';
+import { formatProfileIdentifier } from '../utils/formatProfileIdentifier';
 
 function MetadataSwitch({ metadata }: { metadata: PublicationMetadata }) {
   switch (metadata.__typename) {
@@ -89,10 +90,7 @@ export function PublicationCard({ publication, children }: PublicationCardProps)
       >
         <ProfilePicture picture={publication.by.metadata?.picture ?? null} />
         <p>
-          {publication.__typename} by{' '}
-          {publication.by.metadata?.displayName ??
-            publication.by.handle?.fullHandle ??
-            publication.by.id}
+          {publication.__typename} by {formatProfileIdentifier(publication.by)}
         </p>
       </div>
       <PublicationSwitch publication={publication} />
@@ -118,7 +116,7 @@ export function CommentCard({ comment }: CommentCardProps) {
         }}
       >
         <ProfilePicture picture={comment.by.metadata?.picture ?? null} />
-        <p>{comment.by.metadata?.displayName ?? comment.by.handle?.fullHandle ?? comment.by.id}</p>
+        <p>{formatProfileIdentifier(comment.by)}</p>
       </div>
       <MetadataSwitch metadata={comment.metadata} />
     </section>

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

@@ -1,11 +1,37 @@
 import { SessionType, useSession } from '@lens-protocol/react-web';
+import { Suspense } from 'react';
 import { NavLink } from 'react-router-dom';
 
 import { CATEGORIES } from '../../config';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 import { LoginButton, LogoutButton } from '../auth';
 
+function AuthenticationBar() {
+  const { data: session } = useSession({ suspense: true });
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '1rem',
+      }}
+    >
+      {session.authenticated && (
+        <strong>
+          {session.type === SessionType.WithProfile
+            ? formatProfileIdentifier(session.profile)
+            : session.address}
+        </strong>
+      )}
+
+      {session.authenticated ? <LogoutButton /> : <LoginButton />}
+    </div>
+  );
+}
+
 export function Header() {
-  const { data: session } = useSession();
   return (
     <header>
       <div
@@ -21,26 +47,9 @@ export function Header() {
         <span>
           <strong>🌿 Lens SDK</strong>
         </span>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: '1rem',
-          }}
-        >
-          {session?.authenticated && (
-            <strong>
-              {session.type === SessionType.WithProfile
-                ? session.profile?.metadata?.displayName ??
-                  session.profile.handle?.fullHandle ??
-                  session.profile.id
-                : session.address}
-            </strong>
-          )}
-
-          {session?.authenticated ? <LogoutButton /> : <LoginButton />}
-        </div>
+        <Suspense>
+          <AuthenticationBar />
+        </Suspense>
       </div>
 
       <nav>

examples/web/src/hooks/useIrysUploader.ts

@@ -15,7 +15,7 @@ async function getWebIrys(client: Client<Transport, Chain, Account>) {
     url: 'https://devnet.irys.xyz',
     token: 'matic',
     wallet: {
-      rpcUrl: 'https://rpc-mumbai.maticvigil.com/',
+      rpcUrl: 'https://rpc-amoy.polygon.technology/',
       name: 'ethersv5',
       provider: new Web3Provider(client.transport),
     },
@@ -39,9 +39,9 @@ export function useIrysUploadHandler() {
     const confirm = window.confirm(
       `In this example we will now upload metadata file via the Irys.
     
-    Please make sure your wallet is connected to the Polygon Mumbai testnet.
+    Please make sure your wallet is connected to the Polygon Amoy testnet.
     
-    You can get some Mumbai MATIC from the Mumbai Faucet: https://mumbaifaucet.com/`,
+    You can get some Amoy MATIC from the Amoy Faucet: https://faucet.polygon.technology/`,
     );
 
     if (!confirm) {

examples/web/src/inbox/components/ConversationCard.tsx

@@ -3,6 +3,7 @@ import { EnhancedConversation } from '@lens-protocol/react-web/inbox';
 import { ReactNode } from 'react';
 
 import { ProfilePicture } from '../../profiles/components/ProfilePicture';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 
 type PeerProfileProps = {
   profile: Profile;
@@ -12,7 +13,7 @@ function PeerProfile({ profile }: PeerProfileProps) {
   return (
     <div>
       <ProfilePicture picture={profile.metadata?.picture || null} />
-      <div>{profile.handle?.fullHandle || profile.id}</div>
+      <div>{formatProfileIdentifier(profile)}</div>
     </div>
   );
 }

examples/web/src/inbox/components/ConversationComposer.tsx

@@ -2,6 +2,7 @@ import { Profile } from '@lens-protocol/react-web';
 import { useStartLensConversation } from '@lens-protocol/react-web/inbox';
 
 import { never } from '../../utils';
+import { formatProfileIdentifier } from '../../utils/formatProfileIdentifier';
 
 type ConversationComposerProps = {
   peerProfile: Profile;
@@ -40,7 +41,7 @@ export function ConversationComposer({ peerProfile }: ConversationComposerProps)
         ></textarea>
 
         <button type="submit" disabled={isLoading}>
-          {`Send a first message to ${peerProfile.handle?.fullHandle || peerProfile.id}`}
+          {`Send a first message to ${formatProfileIdentifier(peerProfile)}`}
         </button>
 
         {!!error && <div>Something went wrong</div>}