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

@@ -1,44 +1,62 @@
 import './shims';
 
+import { JsonRpcProvider, Web3Provider } from '@ethersproject/providers';
 import { config } from '@gluestack-ui/config';
 import { Box, GluestackUIProvider, SafeAreaView } from '@gluestack-ui/themed';
-import { LensConfig, LensProvider } from '@lens-protocol/react-native';
+import { IBindings, 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 { IProvider, useWalletConnectModal } from '@walletconnect/modal-react-native';
 import React, { useMemo } from 'react';
-import { createWalletClient, custom, WalletClient } from 'viem';
 
 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';
+import { getLensEnvironment } from './utils/environment';
+// import { bindings } from './utils/wallet';
 
-type RequestArguments = Parameters<IProvider['request']>[0];
+function prepareProvider(provider: IProvider | undefined): JsonRpcProvider {
+  console.log('prepareProvider', provider);
+
+  if (!provider) {
+    throw new Error('Provider not defined');
+  }
+
+  return new Web3Provider(provider);
+}
+
+function prepareSigner(provider: IProvider | undefined) {
+  console.log('prepareSigner', provider);
+
+  if (!provider) {
+    throw new Error('Provider not defined');
+  }
+
+  const ethersProvider = new Web3Provider(provider);
+
+  return ethersProvider.getSigner();
+}
+
+export function bindings(isConnected: boolean, provider: IProvider | undefined): IBindings {
+  console.log('bindings', isConnected);
+  return {
+    getProvider: async () => prepareProvider(provider),
+    getSigner: async () => prepareSigner(provider),
+  };
+}
 
 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 { provider, address, isConnected } = useWalletConnectModal();
+
+  console.log('address', address);
 
   const lensConfig: LensConfig = useMemo(
     () => ({
-      bindings: bindings(walletClient),
+      bindings: bindings(isConnected, provider),
       environment: getLensEnvironment(),
       storage: storage(),
+      origin: 'https://nativelens.com',
     }),
-    [walletClient],
+    [provider, isConnected],
   );
 
   return (

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/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}`);
-  }
-}

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

@@ -1,34 +1,28 @@
 import { JsonRpcProvider, Web3Provider } from '@ethersproject/providers';
 import { IBindings } from '@lens-protocol/react-native';
-import { WalletClient } from 'viem';
+import { IProvider } from '@walletconnect/modal-react-native';
 
-function clientToProvider(client: WalletClient): JsonRpcProvider {
-  if (!client.chain) {
-    throw new Error('Chain not defined');
+function prepareProvider(provider: IProvider | undefined): JsonRpcProvider {
+  if (!provider) {
+    throw new Error('Provider not defined');
   }
 
-  const network = {
-    chainId: client.chain.id,
-    name: client.chain.name,
-    ensAddress: client.chain.contracts?.ensRegistry?.address ?? '',
-  };
+  return new Web3Provider(provider);
+}
 
-  if (!client.chain) {
-    return new JsonRpcProvider(client.transport.url as string);
+function prepareSigner(provider: IProvider | undefined) {
+  if (!provider) {
+    throw new Error('Provider not defined');
   }
 
-  return new JsonRpcProvider(client.transport.url as string, network);
-}
-
-function clientToSigner(client: WalletClient) {
-  const provider = new Web3Provider(client.transport, 'any');
+  const ethersProvider = new Web3Provider(provider);
 
-  return provider.getSigner(client.account?.address);
+  return ethersProvider.getSigner();
 }
 
-export function bindings(client: WalletClient): IBindings {
+export function bindings(provider: IProvider | undefined): IBindings {
   return {
-    getProvider: async () => clientToProvider(client),
-    getSigner: async () => clientToSigner(client),
+    getProvider: async () => prepareProvider(provider),
+    getSigner: async () => prepareSigner(provider),
   };
 }