drop viem as unnecessary

examples/react-native/package.json

@@ -32,8 +32,7 @@
     "react-native-modal": "^13.0.1",
     "react-native-svg": "^13.14.0",
     "react-native-web": "^0.19.11",
-    "react-native-windows": "^0.73.11",
-    "viem": "^2.9.26"
+    "react-native-windows": "^0.73.11"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",

examples/react-native/src/App.tsx

@@ -4,42 +4,33 @@ import { config } from '@gluestack-ui/config';
 import { Box, GluestackUIProvider, SafeAreaView } from '@gluestack-ui/themed';
 import { LensConfig, LensProvider } from '@lens-protocol/react-native';
 import { storage } from '@lens-protocol/react-native/storage/mmkv';
-import { useWalletConnectModal, IProvider } from '@walletconnect/modal-react-native';
-import React, { useMemo } from 'react';
-import { createWalletClient, custom, WalletClient } from 'viem';
+import { IProvider, useWalletConnectModal } from '@walletconnect/modal-react-native';
+import React, { useEffect, useRef } from 'react';
 
 import { ConnectButton } from './components/ConnectButton';
 import { Main } from './components/Main';
 import { WalletConnectModal } from './components/WalletConnectModal';
-import { getLensEnvironment, getViemChain } from './utils/environment';
-import { bindings } from './utils/wallet';
-
-type RequestArguments = Parameters<IProvider['request']>[0];
+import { Deferred } from './utils/Deferred';
+import { bindings } from './utils/bindings';
+import { getLensEnvironment } from './utils/environment';
 
 export function App() {
   const { provider } = useWalletConnectModal();
 
-  const walletClient: WalletClient = useMemo(
-    () =>
-      createWalletClient({
-        chain: getViemChain(),
-        transport: custom({
-          async request({ method, params }: RequestArguments) {
-            return provider?.request({ method, params });
-          },
-        }),
-      }),
-    [provider],
-  );
+  const deferred = useRef(new Deferred<IProvider>());
 
-  const lensConfig: LensConfig = useMemo(
-    () => ({
-      bindings: bindings(walletClient),
-      environment: getLensEnvironment(),
-      storage: storage(),
-    }),
-    [walletClient],
-  );
+  useEffect(() => {
+    if (provider) {
+      deferred.current.resolve(provider);
+    }
+  }, [provider]);
+
+  const lensConfig: LensConfig = {
+    bindings: bindings(deferred.current.promise),
+    environment: getLensEnvironment(),
+    storage: storage(),
+    origin: 'https://nativelens.com',
+  };
 
   return (
     <GluestackUIProvider config={config}>

examples/react-native/src/components/ConnectButton.tsx

@@ -1,14 +1,17 @@
 import '@walletconnect/react-native-compat';
 import { Button, ButtonText } from '@gluestack-ui/themed';
+import { useLogout } from '@lens-protocol/react-native';
 import { useWalletConnectModal } from '@walletconnect/modal-react-native';
 import React from 'react';
 
 export function ConnectButton() {
   const { open, isConnected, provider } = useWalletConnectModal();
+  const { execute: logout } = useLogout();
 
   const onPress = () => {
     if (isConnected && provider) {
       void provider.disconnect();
+      void logout();
     } else {
       void open();
     }

examples/react-native/src/components/LoginForm.tsx

@@ -35,7 +35,7 @@ export function LoginForm({ address }: LoginFormProps) {
       <Heading size="lg" textAlign="center">
         Select a profile to log in
       </Heading>
-      <VStack gap="$4">
+      <VStack gap="$4" mb="$4">
         {profiles.map((profile) => (
           <LoginButton key={profile.id} address={address} profile={profile} />
         ))}

examples/react-native/src/components/Main.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 
 import { ErrorCallout } from './ErrorCallout';
 import { LoginForm } from './LoginForm';
-import { LogoutButton } from './LogoutButton';
 import { MyProfile } from './MyProfile';
 
 export function Main() {
@@ -44,7 +43,6 @@ export function Main() {
         <Text>
           Welcome <Text isTruncated>{session.address}</Text>, you need a Profile to use this app.
         </Text>
-        <LogoutButton />
       </VStack>
     );
   }

examples/react-native/src/components/MyProfile.tsx

@@ -12,8 +12,6 @@ import {
 import { Profile } from '@lens-protocol/react-native';
 import React from 'react';
 
-import { LogoutButton } from './LogoutButton';
-
 type ProfileAvatarProps = {
   profile: Profile;
 };
@@ -34,6 +32,7 @@ function ProfileAvatar({ profile }: ProfileAvatarProps) {
           source={{
             uri,
           }}
+          alt="profile image"
         />
       )}
     </Avatar>
@@ -94,10 +93,6 @@ export function MyProfile({ profile }: MyProfileProps) {
           <Text size="xs">following</Text>
         </Ticker>
       </Box>
-
-      <Divider my="$6" />
-
-      <LogoutButton />
     </Card>
   );
 }

examples/react-native/src/utils/Deferred.ts

@@ -0,0 +1,15 @@
+/**
+ * Unwraps the promise to allow resolving/rejecting outside the Promise constructor
+ */
+export class Deferred<T = void> {
+  readonly promise: Promise<T>;
+  resolve!: (value: T) => void;
+  reject!: (reason?: unknown) => void;
+
+  constructor() {
+    this.promise = new Promise<T>((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+}

examples/react-native/src/utils/bindings.ts

@@ -0,0 +1,28 @@
+import { JsonRpcProvider, JsonRpcSigner, Web3Provider } from '@ethersproject/providers';
+import { IBindings } from '@lens-protocol/react-native';
+import { IProvider } from '@walletconnect/modal-react-native';
+
+export function bindings(providerPromise: Promise<IProvider>): IBindings {
+  return {
+    getProvider: async (): Promise<JsonRpcProvider> => {
+      const provider = await providerPromise;
+
+      if (!provider) {
+        throw new Error('Provider not defined');
+      }
+
+      return new Web3Provider(provider);
+    },
+    getSigner: async (): Promise<JsonRpcSigner> => {
+      const provider = await providerPromise;
+
+      if (!provider) {
+        throw new Error('Provider not defined');
+      }
+
+      const ethersProvider = new Web3Provider(provider);
+
+      return ethersProvider.getSigner();
+    },
+  };
+}

examples/react-native/src/utils/environment.ts

@@ -1,6 +1,5 @@
 import { EnvironmentConfig, development, production } from '@lens-protocol/react-native';
 import Config from 'react-native-config';
-import { polygon, polygonAmoy } from 'viem/chains';
 
 const environment = Config.ENVIRONMENT || 'development';
 
@@ -25,14 +24,3 @@ export function getLensEnvironment(): EnvironmentConfig {
       throw new Error(`Unknown environment ${environment}`);
   }
 }
-
-export function getViemChain() {
-  switch (environment) {
-    case 'production':
-      return polygon;
-    case 'development':
-      return polygonAmoy;
-    default:
-      throw new Error(`Unknown environment ${environment}`);
-  }
-}