Update loggedIn action to utilize Remote and ChainId (#172)

iuricmp · web-flow · commit 720aed0f6e74 · 2025-10-28T15:55:41.000Z
* fix: update loggedIn action to set remote and chainId received from GnoKey Mobile

* refactor to avoid default values
diff --git a/mobile/.env b/mobile/.env
@@ -1,15 +1,2 @@
 # Prod
-
-EXPO_PUBLIC_GNO_REMOTE=https://api.gno.berty.io:443
-EXPO_PUBLIC_FAUCET_REMOTE=https://faucetpass.gno.berty.io
-EXPO_PUBLIC_INDEXER_REMOTE=https://indexer.gno.berty.io
 EXPO_PUBLIC_NOTIFICATION_REMOTE=https://notification.gno.berty.io
-
-EXPO_PUBLIC_GNO_CHAIN_ID=dev
-
-# local
-
-# EXPO_PUBLIC_GNO_REMOTE=http://localhost:26657
-# EXPO_PUBLIC_FAUCET_REMOTE=http://localhost:5050
-# EXPO_PUBLIC_INDEXER_REMOTE=http://localhost:26660
-# EXPO_PUBLIC_NOTIFICATION_REMOTE=http://localhost:26661
diff --git a/mobile/app/_layout.tsx b/mobile/app/_layout.tsx
@@ -10,14 +10,9 @@ import { LinkingProvider } from "@gno/provider/linking-provider";
 
 const gnoDefaultConfig = {
   // @ts-ignore
-  remote: process.env.EXPO_PUBLIC_GNO_REMOTE!,
+  remote: '', // It will be set dynamically from linking state
   // @ts-ignore
-  chain_id: process.env.EXPO_PUBLIC_GNO_CHAIN_ID!,
-};
-
-const indexerDefaultConfig = {
-  // @ts-ignore
-  remote: process.env.EXPO_PUBLIC_INDEXER_REMOTE!,
+  chain_id: '', // It will be set dynamically from linking state
 };
 
 const notificationDefaultConfig = {
@@ -29,7 +24,7 @@ export default function AppLayout() {
   return (
     <GnoNativeProvider config={gnoDefaultConfig}>
       <NotificationProvider config={notificationDefaultConfig}>
-        <IndexerProvider config={indexerDefaultConfig}>
+        <IndexerProvider>
           <ReduxProvider>
             <LinkingProvider>
               <ThemeProvider value={DefaultTheme}>
diff --git a/mobile/app/index.tsx b/mobile/app/index.tsx
@@ -1,29 +1,50 @@
-import { View } from "react-native";
+import { Alert, View } from "react-native";
 import Button from "@gno/components/button";
 import Layout from "@gno/components/layout";
 import Ruller from "@gno/components/row/Ruller";
 import Text from "@gno/components/text";
-import { clearLinking, loggedIn, requestLoginForGnokeyMobile, selectAccount, selectBech32AddressSelected, selectLoginLoading, useAppDispatch, useAppSelector } from "@gno/redux";
+import {
+  clearLinking,
+  loggedIn,
+  requestLoginForGnokeyMobile,
+  selectAccount,
+  selectBech32AddressSelected,
+  selectLoginLoading,
+  selectRemoteURL,
+  useAppDispatch,
+  useAppSelector,
+} from "@gno/redux";
 import Spacer from "@gno/components/spacer";
 import * as Application from "expo-application";
 import { useEffect } from "react";
 import { useRouter } from "expo-router";
+import { useIndexerContext } from "@gno/provider/indexer-provider";
 
 export default function Root() {
   const dispatch = useAppDispatch();
   const route = useRouter();
-  const bech32AddressSelected = useAppSelector(selectBech32AddressSelected)
+  const bech32AddressSelected = useAppSelector(selectBech32AddressSelected);
+  const remoteURL = useAppSelector(selectRemoteURL);
   const account = useAppSelector(selectAccount);
   const loading = useAppSelector(selectLoginLoading);
 
+  const { initIndexer } = useIndexerContext();
+
   const appVersion = Application.nativeApplicationVersion;
 
   useEffect(() => {
-    if (loading) return
+    if (loading || !bech32AddressSelected || !remoteURL) return;
     console.log("bech32AddressSelected on index", bech32AddressSelected);
-    if (bech32AddressSelected) {
-      dispatch(loggedIn({ bech32: bech32AddressSelected as string }));
+
+    if (remoteURL !== "https://api.gno.berty.io:443") {
+      Alert.alert(
+        "Unsupported Remote URL",
+        "This build supports only https://api.gno.berty.io:443. Please update your remote URL and try again."
+      );
+      return;
     }
+    initIndexer("https://indexer.gno.berty.io");
+    dispatch(loggedIn());
   }, [bech32AddressSelected]);
 
   useEffect(() => {
diff --git a/mobile/redux/features/accountSlice.ts b/mobile/redux/features/accountSlice.ts
@@ -14,21 +14,24 @@ const initialState: CounterState = {
   loading: false,
 };
 
-interface LoginParam {
-  bech32: string;
-}
-
-export const loggedIn = createAsyncThunk<User, LoginParam, ThunkExtra>("account/loggedIn", async (param, thunkAPI) => {
+export const loggedIn = createAsyncThunk<User, void, ThunkExtra>("account/loggedIn", async (param, thunkAPI) => {
   console.log("Logging in", param);
-  const { bech32 } = param;
 
+  const { bech32AddressSelected: bech32, chainId, remoteURL } = (thunkAPI.getState() as RootState).linking;
+
+  if (!bech32 || !chainId || !remoteURL) {
+    throw new Error("No bech32 address, chainId or remoteURL found for login");
+  }
   const gnonative = thunkAPI.extra.gnonative as GnoNativeApi;
 
+  await gnonative.setChainID(chainId);
+  await gnonative.setRemote(remoteURL);
+
   const user: User = {
-    name: await getAccountName(bech32, gnonative) || 'Unknown',
+    name: (await getAccountName(bech32, gnonative)) || "Unknown",
     address: await gnonative.addressFromBech32(bech32),
     bech32,
-    avatar: await loadBech32AvatarFromChain(bech32, thunkAPI)
+    avatar: await loadBech32AvatarFromChain(bech32, thunkAPI),
   };
 
   return user;
@@ -41,9 +44,9 @@ async function getAccountName(bech32: string, gnonative: GnoNativeApi) {
     console.log("GetUserByAddress result:", accountNameStr);
     const accountName = accountNameStr.match(/\("(\w+)"/)?.[1];
     console.log("GetUserByAddress after regex", accountName);
-    return accountName
+    return accountName;
   } catch (error) {
-      console.error("Error getting account name", error);
+    console.error("Error getting account name", error);
   }
   return undefined;
 }
@@ -55,44 +58,64 @@ interface AvatarCallTxParams {
   callbackPath: string;
 }
 
-export const avatarTxAndRedirectToSign = createAsyncThunk<void, AvatarCallTxParams, ThunkExtra>("account/avatarTxAndRedirectToSign", async (props, thunkAPI) => {
-  const { mimeType, base64, callerAddressBech32, callbackPath } = props;
-
-  const gnonative = thunkAPI.extra.gnonative;
-
-  const gasFee = "1000000ugnot";
-  const gasWanted = BigInt(10000000);
-  const args: Array<string> = ["Avatar", String(`data:${mimeType};base64,` + base64)];
-  const reason = "Upload a new avatar";
-  // const session = (thunkAPI.getState() as RootState).linking.session;
-
-  await makeCallTx({ packagePath: "gno.land/r/demo/profile", fnc: "SetStringField", args, gasFee, gasWanted, callerAddressBech32, reason, callbackPath }, gnonative);
-});
-
-export const reloadAvatar = createAsyncThunk<string | undefined, void, ThunkExtra>("account/reloadAvatar", async (param, thunkAPI) => {
-
-  const state = await thunkAPI.getState() as CounterState;
-  // @ts-ignore
-  const bech32 = state.account?.account?.bech32;
-  if (bech32) {
-    return await loadBech32AvatarFromChain(bech32, thunkAPI);
+export const avatarTxAndRedirectToSign = createAsyncThunk<void, AvatarCallTxParams, ThunkExtra>(
+  "account/avatarTxAndRedirectToSign",
+  async (props, thunkAPI) => {
+    const { mimeType, base64, callerAddressBech32, callbackPath } = props;
+
+    const gnonative = thunkAPI.extra.gnonative;
+
+    const gasFee = "1000000ugnot";
+    const gasWanted = BigInt(10000000);
+    const args: Array<string> = ["Avatar", String(`data:${mimeType};base64,` + base64)];
+    const reason = "Upload a new avatar";
+    // const session = (thunkAPI.getState() as RootState).linking.session;
+
+    await makeCallTx(
+      {
+        packagePath: "gno.land/r/demo/profile",
+        fnc: "SetStringField",
+        args,
+        gasFee,
+        gasWanted,
+        callerAddressBech32,
+        reason,
+        callbackPath,
+      },
+      gnonative
+    );
   }
-  return undefined;
-});
+);
+
+export const reloadAvatar = createAsyncThunk<string | undefined, void, ThunkExtra>(
+  "account/reloadAvatar",
+  async (param, thunkAPI) => {
+    const state = (await thunkAPI.getState()) as CounterState;
+    // @ts-ignore
+    const bech32 = state.account?.account?.bech32;
+    if (bech32) {
+      return await loadBech32AvatarFromChain(bech32, thunkAPI);
+    }
+    return undefined;
+  }
+);
 
 const loadBech32AvatarFromChain = async (bech32: string, thunkAPI: ThunkExtra) => {
   const gnonative = thunkAPI.extra.gnonative as GnoNativeApi;
-  const DEFAULT_AVATAR = "https://www.gravatar.com/avatar/tmp"
+  const DEFAULT_AVATAR = "https://www.gravatar.com/avatar/tmp";
 
   try {
     console.log("Loading avatar for", bech32);
-    const response = await gnonative.qEval("gno.land/r/demo/profile", `GetStringField("${bech32}","Avatar", "${DEFAULT_AVATAR}")`);
-    return response.substring(2, response.length - "\" string)".length);
+    const response = await gnonative.qEval(
+      "gno.land/r/demo/profile",
+      `GetStringField("${bech32}","Avatar", "${DEFAULT_AVATAR}")`
+    );
+    return response.substring(2, response.length - '" string)'.length);
   } catch (error) {
     console.error("Error loading avatar", error);
   }
   return DEFAULT_AVATAR;
-}
+};
 
 export const accountSlice = createSlice({
   name: "account",
diff --git a/mobile/redux/features/linkingSlice.ts b/mobile/redux/features/linkingSlice.ts
@@ -7,13 +7,15 @@ import { RootState, ThunkExtra } from "redux/redux-provider";
 interface State {
     txJsonSigned: string | undefined;
     bech32AddressSelected: string | undefined;
-    // session: string | undefined;
+    chainId: string | undefined;
+    remoteURL: string | undefined;
 }
 
 const initialState: State = {
     txJsonSigned: undefined,
     bech32AddressSelected: undefined,
-    // session: undefined,
+    chainId: undefined,
+    remoteURL: undefined,
 };
 
 export const requestLoginForGnokeyMobile = createAsyncThunk<boolean>("tx/requestLoginForGnokeyMobile", async () => {
@@ -38,7 +40,6 @@ export const postTxAndRedirectToSign = createAsyncThunk<void, MakeTxAndRedirectP
     const gasWanted = BigInt(10000000);
     const reason = "Post a message";
     const callbackPath = "/post";
-    // const session = (thunkAPI.getState() as RootState).linking.session;
 
     await makeCallTx({ fnc, args, gasFee, gasWanted, callerAddressBech32, reason, callbackPath }, thunkAPI.extra.gnonative);
 })
@@ -54,7 +55,6 @@ type MakeCallTxParams = {
     callerAddressBech32: string,
     reason: string,
     callbackPath: string,
-    // session?: string,
 };
 
 export const makeCallTx = async (props: MakeCallTxParams, gnonative: GnoNativeApi): Promise<void> => {
@@ -74,19 +74,6 @@ export const makeCallTx = async (props: MakeCallTxParams, gnonative: GnoNativeAp
     url.searchParams.append('client_name', 'dSocial');
     url.searchParams.append('reason', reason);
     url.searchParams.append('callback', 'tech.berty.dsocial:/' + callbackPath);
-    // if (session) {
-    //     // Avoid edge case when the session is about to expire
-    //     const sessionInfo = JSON.parse(decodeURIComponent(session))
-    //     const secondsToExpire = (new Date(sessionInfo.expires_at).getTime() - new Date().getTime()) / 1000;
-    //     if (secondsToExpire < 30) {
-    //         url.searchParams.append('session_wanted', 'true');
-    //     } else {
-    //         // TODO: temporarily passing the session key. This should be removed once the session is used to self sign the tx
-    //         url.searchParams.append('session', session);
-    //     }
-    // } else {
-    //     url.searchParams.append('session_wanted', 'true');
-    // }
 
     console.log("redirecting to: ", url);
     Linking.openURL(url.toString());
@@ -134,7 +121,8 @@ export const linkingSlice = createSlice({
 
             state.bech32AddressSelected = queryParams?.address ? queryParams.address as string : undefined
             state.txJsonSigned = queryParams?.tx ? queryParams.tx as string : undefined
-            // state.session = queryParams?.session ? queryParams.session as string : state.session
+            state.chainId = queryParams?.chain_id ? queryParams.chain_id as string : undefined
+            state.remoteURL = queryParams?.remote ? queryParams.remote as string : undefined
         },
         clearLinking: (state) => {
             console.log("clearing linking data");
@@ -144,17 +132,12 @@ export const linkingSlice = createSlice({
     selectors: {
         selectQueryParamsTxJsonSigned: (state: State) => state.txJsonSigned as string | undefined,
         selectBech32AddressSelected: (state: State) => state.bech32AddressSelected as string | undefined,
-        // selectSessionValidUntil: (state: State) => {
-        //     const session = state.session;
-        //     if (!session) return undefined;
-        //     const sessionInfo = JSON.parse(decodeURIComponent(session));
-        //     return new Date(sessionInfo.expires_at);
-        // }
-    },
+        selectChainId: (state: State) => state.chainId as string | undefined,
+        selectRemoteURL: (state: State) => state.remoteURL as string | undefined,
+  },
 });
 
 export const { clearLinking, setLinkingData } = linkingSlice.actions;
 
-export const { selectQueryParamsTxJsonSigned, selectBech32AddressSelected,
-  // selectSessionValidUntil
- } = linkingSlice.selectors;
+export const { selectQueryParamsTxJsonSigned, selectBech32AddressSelected, selectChainId, selectRemoteURL } =
+  linkingSlice.selectors;
diff --git a/mobile/src/provider/indexer-provider.tsx b/mobile/src/provider/indexer-provider.tsx
@@ -1,46 +1,33 @@
-import { createContext, useContext, useEffect, useState } from "react";
-
+import { createContext, useContext, useState } from "react";
 import * as Grpc from "@gno/grpc/client";
-import { Client } from "@connectrpc/connect";
 
+import { Client } from "@connectrpc/connect";
 import { HelloResponse, HelloStreamResponse, UserAndPostID } from "@buf/gnolang_dsocial-indexer.bufbuild_es/indexerservice_pb";
 import { IndexerService } from "@buf/gnolang_dsocial-indexer.bufbuild_es/indexerservice_pb";
 
 export interface IndexerContextProps {
   getHomePosts: (userPostAddr: string, startIndex: bigint, endIndex: bigint) => Promise<[number, string]>;
   hello: (name: string) => Promise<HelloResponse>;
   helloStream: (name: string) => Promise<AsyncIterable<HelloStreamResponse>>;
-}
-
-interface ConfigProps {
-  remote: string;
+  initIndexer: (indexerUrl: string) => void;
+  indexerInstance?: Client<typeof IndexerService>;
 }
 
 interface IndexerProviderProps {
-  config: ConfigProps;
   children: React.ReactNode;
 }
 
 const IndexerContext = createContext<IndexerContextProps | null>(null);
 
-const IndexerProvider: React.FC<IndexerProviderProps> = ({ children, config }) => {
+const IndexerProvider: React.FC<IndexerProviderProps> = ({ children }) => {
   const [clientInstance, setClientInstance] = useState<Client<typeof IndexerService> | undefined>(undefined);
 
-  useEffect(() => {
-    (async () => {
-      if (clientInstance) {
-        return; // Prevent re-initialization
-      }
-      setClientInstance(initClient(config));
-    })();
-  }, []);
-
-  const initClient = (config: ConfigProps): Client<typeof IndexerService> => {
-    if (clientInstance) {
-      return clientInstance;
+  const initIndexer = (indexerUrl: string) => {
+    if (!indexerUrl) {
+      throw new Error("indexerUrl is required to initialize indexer client.");
     }
-
-    return Grpc.createIndexerClient(config.remote);
+    setClientInstance(Grpc.createIndexerClient(indexerUrl));
+    console.log("Indexer client initialized with URL:", indexerUrl);
   };
 
   const getClient = () => {
@@ -87,14 +74,12 @@ const IndexerProvider: React.FC<IndexerProviderProps> = ({ children, config }) =
     return client.helloStream({ name });
   };
 
-  if (!clientInstance) {
-    return null;
-  }
-
   const value = {
     getHomePosts,
     hello,
     helloStream,
+    initIndexer,
+    indexerInstance: clientInstance,
   };
 
   return <IndexerContext.Provider value={value}>{children}</IndexerContext.Provider>;
