Display chain information in key listing

mobile/app/(app)/chain-selection/index.tsx

@@ -64,7 +64,6 @@ function Page() {
         await gnonative.getChainID();
 
         const currentChain = await dispatch(getCurrentChain()).unwrap();
-        console.log('xxxxx', currentChain);
         dispatch(setSelectedChain(currentChain));
 
         setLoading(undefined);

mobile/app/(app)/home/home.tsx

@@ -3,7 +3,7 @@ import { FlatList, TouchableOpacity, View } from "react-native";
 import { useNavigation, useRouter } from "expo-router";
 import { Layout } from "@/components/index";
 import Text from "@/components/text";
-import { checkForKeyOnChains, initSignUpState, selectMasterPassword, useAppDispatch, useAppSelector } from "@/redux";
+import { checkForKeyOnChains, initSignUpState, selectMasterPassword, useAppDispatch, useAppSelector, selectKeyInfoChains } from "@/redux";
 import { KeyInfo, useGnoNativeContext } from "@gnolang/gnonative";
 import Octicons from '@expo/vector-icons/Octicons';
 import TextInput from "@/components/textinput";
@@ -24,6 +24,8 @@ export default function Page() {
   const dispatch = useAppDispatch();
   const masterPassword = useAppSelector(selectMasterPassword)
 
+  const keyInfoChains = useAppSelector(selectKeyInfoChains)
+
   useEffect(() => {
     const unsubscribe = navigation.addListener("focus", async () => {
       try {
@@ -76,6 +78,12 @@ export default function Page() {
     route.push("/add-key");
   }
 
+  const getChainNamePerKey = (keyInfo: KeyInfo): string[] | undefined => {
+    if (keyInfoChains instanceof Map &&  keyInfoChains?.has(keyInfo.address.toString())) {
+      return keyInfoChains.get(keyInfo.address.toString())
+    }
+  }
+
   if (loading) {
     return (
       <Layout.Container>
@@ -103,7 +111,7 @@ export default function Page() {
             <FlatList
               data={filteredAccounts}
               renderItem={({ item }) => (
-                <VaultListItem vault={item} onVaultPress={onChangeAccountHandler} />
+                <VaultListItem vault={item} onVaultPress={onChangeAccountHandler} chains={getChainNamePerKey(item)} />
               )}
               keyExtractor={(item) => item.name}
               ListEmptyComponent={<Text.Body>There are no items to list.</Text.Body>}

mobile/app/(app)/tosignin/index.tsx

@@ -3,7 +3,7 @@ import Button from "@/components/button";
 import VaultListItem from "@/components/list/vault-list/VaultListItem";
 import Spacer from "@/components/spacer";
 import Text from "@/components/text";
-import { checkForKeyOnChains, clearLinking, selectCallback, selectClientName, sendAddressToSoliciting, useAppDispatch, useAppSelector } from "@/redux";
+import { clearLinking, selectCallback, selectClientName, sendAddressToSoliciting, useAppDispatch, useAppSelector } from "@/redux";
 import { KeyInfo, useGnoNativeContext } from "@gnolang/gnonative";
 import { router, useNavigation } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
@@ -45,7 +45,6 @@ export default function Page() {
 
     const onCancel = () => {
         dispatch(clearLinking())
-        dispatch(checkForKeyOnChains())
         Linking.openURL(`${callback}?status=cancelled`);
         router.replace("/home")
     }

mobile/components/list/vault-list/VaultListItem.tsx

@@ -4,18 +4,25 @@ import { KeyInfo } from "@gnolang/gnonative";
 import { TouchableOpacity, View } from "react-native";
 import styled from "styled-components/native";
 import AntDesign from '@expo/vector-icons/AntDesign';
+import Row from "@/components/row";
 
 interface Props {
   vault: KeyInfo;
+  chains?: string[];
   onVaultPress: (vault: KeyInfo) => void;
 }
 
-const VaultListItem = ({ vault, onVaultPress }: Props) => {
+const VaultListItem = ({ vault, onVaultPress, chains = [] }: Props) => {
 
   return (
     <Container onPress={() => onVaultPress(vault)}>
-      <View style={{ flex: 1 }}>
-        <Text.Title>{vault.name}</Text.Title>
+      <View style={{ flex: 1, height: 40 }}>
+        <View style={{ flex: 1 }}>
+          <Text.BodyMedium>{vault.name}</Text.BodyMedium>
+        </View>
+        <View style={{ flex: 1 }}>
+          {chains ? <Text.Caption1 style={{ textAlign: 'left', paddingTop: 4 }}>{chains.join(', ')}</Text.Caption1> : null}
+        </View>
       </View>
       <AntDesign name="edit" size={24} color="black" />
     </Container>

mobile/redux/features/vaultEditSlice.ts

@@ -1,11 +1,12 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { selectChainsAvailable } from "./signupSlice";
 import { GnoNativeApi, KeyInfo } from "@gnolang/gnonative";
 import { ThunkExtra } from "@/providers/redux-provider";
 import { RootState } from "../root-reducer";
 
 export interface VaultState {
   vaultToEdit: KeyInfo | undefined;
-  keyinfosChains?: Map<string, string[]>;
+  keyInfoChains?: Map<string, string[]>;
 }
 
 const initialState: VaultState = {
@@ -44,25 +45,29 @@ export const saveChanges = createAsyncThunk<boolean, SaveChangesParam, ThunkExtr
  * */
 export const checkForKeyOnChains = createAsyncThunk<Map<string, string[]>, void, ThunkExtra>("vault/checkForKeyOnChains", async (_, thunkAPI) => {
   const gnonative = thunkAPI.extra.gnonative as GnoNativeApi;
-
   const keyinfos = await gnonative.listKeyInfo();
-  const chains = (thunkAPI.getState() as RootState).signUp.chainsAvailable;
+  const chains = await selectChainsAvailable(thunkAPI.getState() as RootState);
 
-  const keyinfosChains = new Map<string, string[]>();
+  const keyInfoChains = new Map<string, string[]>();
 
   for (const chain of chains) {
+    console.log("checking keys on chain", chain.chainName);
+
     await gnonative.setChainID(chain.chainId);
     await gnonative.setRemote(chain.gnoAddress);
 
     for (const key of keyinfos) {
       console.log(`Checking key ${key.name} on chain ${chain.chainName}`);
-      const queryResponse = await hasCoins(gnonative, key.address);
-      console.log(`Key ${key.name} on chain ${chain.chainName} has coins: ${queryResponse}`);
+      const keyHasCoins = await hasCoins(gnonative, key.address);
+      console.log(`Key ${key.name} on chain ${chain.chainName} has coins: ${keyHasCoins}`);
 
-      keyinfosChains.has(key.name) ? keyinfosChains.get(key.name)?.push(chain.chainId) : keyinfosChains.set(key.name, [chain.chainId]);
+      if (keyHasCoins) {
+        console.log(`Key ${key.name} on chain ${chain.chainName} has coins`, JSON.stringify(key));
+        keyInfoChains.has(key.address.toString()) ? keyInfoChains.get(key.address.toString())?.push(chain.chainName) : keyInfoChains.set(key.address.toString(), [chain.chainName]);
+      }
     }
   }
-  return keyinfosChains;
+  return keyInfoChains;
 });
 
 const hasCoins = async (gnonative: GnoNativeApi, address: Uint8Array) => {
@@ -93,16 +98,20 @@ export const vaultSlice = createSlice({
     }
   },
   extraReducers: (builder) => {
-    builder.addCase(checkForKeyOnChains.fulfilled, (state, action) => {
-      console.log("checkForKeyOnChains.fulfilled", action.payload);
-      state.keyinfosChains = action.payload;
-    })
+    builder.addCase(checkForKeyOnChains.rejected, (state, action) => {
+      console.error("checkForKeyOnChains.rejected", action.error);
+    }),
+      builder.addCase(checkForKeyOnChains.fulfilled, (state, action) => {
+        console.log("checkForKeyOnChains.fulfilled", action.payload);
+        state.keyInfoChains = action.payload;
+      })
   },
   selectors: {
     selectVaultToEdit: (state) => state.vaultToEdit,
+    selectKeyInfoChains: (state) => state.keyInfoChains,
   },
 });
 
 export const { setVaultToEdit } = vaultSlice.actions;
 
-export const { selectVaultToEdit } = vaultSlice.selectors;
+export const { selectVaultToEdit, selectKeyInfoChains } = vaultSlice.selectors;