fix: wallet selection

Signed-off-by: Norman Meier <[email protected]>

App.tsx

@@ -159,11 +159,9 @@ const WalletSyncer: React.FC = memo(() => {
   const dispatch = useAppDispatch();
   useEffect(() => {
     if (!selectedWallet || selectedWallet.networkId !== selectedNetworkId) {
-      dispatch(
-        setSelectedWalletId(
-          wallets.find((w) => w.networkId === selectedNetworkId)?.id,
-        ),
-      );
+      const newWallet = wallets.find((w) => w.networkId === selectedNetworkId);
+      console.log("syncing wallet", newWallet);
+      dispatch(setSelectedWalletId(newWallet?.id));
     }
   }, [dispatch, selectedNetworkId, selectedWallet, wallets]);
   return null;

packages/components/TopMenu/TopMenuAccount.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { TextStyle, ViewStyle } from "react-native";
 
 import chevronRightSVG from "../../../assets/icons/chevron-right.svg";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
@@ -11,60 +11,53 @@ import FlexRow from "../FlexRow";
 import { OmniLink } from "../OmniLink";
 import { SVG } from "../SVG";
 import { UserNameInline } from "../UserNameInline";
-import { CustomPressable } from "../buttons/CustomPressable";
 
 export const TopMenuAccount: React.FC = () => {
   const selectedWallet = useSelectedWallet();
 
   return (
-    <FlexCol style={styles.container}>
+    <FlexCol style={containerCStyle}>
       <UserNameInline
         userId={selectedWallet?.userId || ""}
-        style={styles.userImageLine}
+        style={userImageLineCStyle}
       />
 
       <FlexRow alignItems="center" justifyContent="space-between">
-        {/*TODO: Replace CustomPressable by TouchableOpacity when the Multisig feature is available*/}
-        <CustomPressable>
-          {({ hovered }) => (
-            <FlexRow alignItems="center">
-              <BrandText style={styles.switchAccount}>
-                {hovered ? "Coming Soon" : "Switch Account"}
-              </BrandText>
-              <SVG source={chevronRightSVG} width={16} height={16} />
-            </FlexRow>
-          )}
-        </CustomPressable>
+        <OmniLink to={{ screen: "WalletManagerWallets" }}>
+          <FlexRow alignItems="center">
+            <BrandText style={switchAccountCStyle}>Change Wallet</BrandText>
+            <SVG source={chevronRightSVG} width={16} height={16} />
+          </FlexRow>
+        </OmniLink>
 
         <OmniLink
           to={{
             screen: "UserPublicProfile",
             params: { id: selectedWallet?.userId || "" },
           }}
         >
-          <BrandText style={styles.manageProfile}>Manage Profile</BrandText>
+          <BrandText style={manageProfileCStyle}>Manage Profile</BrandText>
         </OmniLink>
       </FlexRow>
     </FlexCol>
   );
 };
 
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  container: {
-    padding: layout.spacing_x2,
-  },
-  userImageLine: {
-    width: "100%",
-    marginBottom: layout.spacing_x1_5,
-  },
-  switchAccount: {
-    ...(fontSemibold14 as object),
-    marginRight: layout.spacing_x0_5,
-  },
-  manageProfile: {
-    ...(fontSemibold14 as object),
-    color: purpleLight,
-  },
-});
+const containerCStyle: ViewStyle = {
+  padding: layout.spacing_x2,
+};
+
+const userImageLineCStyle: ViewStyle = {
+  width: "100%",
+  marginBottom: layout.spacing_x1_5,
+};
+
+const switchAccountCStyle: TextStyle = {
+  ...fontSemibold14,
+  marginRight: layout.spacing_x0_5,
+};
+
+const manageProfileCStyle: TextStyle = {
+  ...fontSemibold14,
+  color: purpleLight,
+};

packages/components/connectWallet/ConnectKeplrButton.tsx

@@ -16,6 +16,7 @@ import {
 import {
   setIsKeplrConnected,
   setSelectedNetworkId,
+  setSelectedWalletId,
 } from "../../store/slices/settings";
 import { useAppDispatch } from "../../store/store";
 
@@ -56,7 +57,13 @@ export const ConnectKeplrButton: React.FC<{
 
       await keplr.enable(network.chainId);
 
+      const offlineSigner = await keplr.getOfflineSignerAuto(network.chainId);
+      const accounts = await offlineSigner.getAccounts();
+
       dispatch(setSelectedNetworkId(network.id));
+      if (accounts.length) {
+        dispatch(setSelectedWalletId("keplr-" + accounts[0].address));
+      }
       dispatch(setIsKeplrConnected(true));
 
       onDone && onDone();

packages/components/connectWallet/ConnectLeapButton.tsx

@@ -1,3 +1,4 @@
+import { OfflineSigner } from "@cosmjs/proto-signing";
 import React from "react";
 import { Linking } from "react-native";
 
@@ -15,6 +16,7 @@ import {
 import {
   setIsLeapConnected,
   setSelectedNetworkId,
+  setSelectedWalletId,
 } from "../../store/slices/settings";
 import { useAppDispatch } from "../../store/store";
 
@@ -56,7 +58,15 @@ export const ConnectLeapButton: React.FC<{
 
       await leap.enable(network.chainId);
 
+      const offlineSigner: OfflineSigner = await leap.getOfflineSignerAuto(
+        network.chainId,
+      );
+      const accounts = await offlineSigner.getAccounts();
+
       dispatch(setSelectedNetworkId(network.id));
+      if (accounts.length) {
+        dispatch(setSelectedWalletId("leap-" + accounts[0].address));
+      }
       dispatch(setIsLeapConnected(true));
 
       onDone && onDone();

packages/context/WalletsProvider/keplr.ts

@@ -5,10 +5,10 @@ import { useSelector } from "react-redux";
 import { useSelectedNetworkInfo } from "./../../hooks/useSelectedNetwork";
 import { Wallet } from "./wallet";
 import { NetworkKind, getUserId } from "../../networks";
+import { teritoriNetwork } from "../../networks/teritori";
 import {
   selectIsKeplrConnected,
   setIsKeplrConnected,
-  setSelectedWalletId,
 } from "../../store/slices/settings";
 import { useAppDispatch } from "../../store/store";
 import { WalletProvider } from "../../utils/walletProvider";
@@ -77,11 +77,11 @@ export const useKeplr: () => UseKeplrResult = () => {
           console.error("no keplr");
           return;
         }
-        if (selectedNetworkInfo?.kind !== NetworkKind.Cosmos) {
-          setReady(true);
-          return;
-        }
-        const chainId = selectedNetworkInfo.chainId;
+        const targetNetwork =
+          selectedNetworkInfo?.kind === NetworkKind.Cosmos
+            ? selectedNetworkInfo
+            : teritoriNetwork;
+        const chainId = targetNetwork.chainId;
         if (!chainId) {
           setReady(true);
           console.error("missing chain id");
@@ -102,7 +102,7 @@ export const useKeplr: () => UseKeplrResult = () => {
   }, [hasKeplr, isKeplrConnected, dispatch, selectedNetworkInfo]);
 
   const wallets = useMemo(() => {
-    let networkId = "";
+    let networkId = teritoriNetwork.id;
     if (selectedNetworkInfo?.kind === NetworkKind.Cosmos) {
       networkId = selectedNetworkInfo.id;
     }
@@ -120,10 +120,7 @@ export const useKeplr: () => UseKeplrResult = () => {
       return [wallet];
     }
     const wallets = addresses.map((address, index) => {
-      let userId = "";
-      if (selectedNetworkInfo?.kind === NetworkKind.Cosmos) {
-        userId = getUserId(networkId, address);
-      }
+      const userId = getUserId(networkId, address);
 
       const wallet: Wallet = {
         address,
@@ -141,12 +138,5 @@ export const useKeplr: () => UseKeplrResult = () => {
     return wallets;
   }, [addresses, selectedNetworkInfo]);
 
-  useEffect(() => {
-    const selectedWallet = wallets.find((w) => w.connected);
-    if (selectedWallet && selectedNetworkInfo?.kind === NetworkKind.Cosmos) {
-      dispatch(setSelectedWalletId(selectedWallet.id));
-    }
-  }, [dispatch, selectedNetworkInfo?.kind, wallets]);
-
   return hasKeplr ? [true, ready, wallets] : [false, ready, undefined];
 };

packages/context/WalletsProvider/leap.ts

@@ -4,10 +4,10 @@ import { useSelector } from "react-redux";
 import { useSelectedNetworkInfo } from "./../../hooks/useSelectedNetwork";
 import { Wallet } from "./wallet";
 import { NetworkKind, getUserId } from "../../networks";
+import { teritoriNetwork } from "../../networks/teritori";
 import {
   selectIsLeapConnected,
   setIsLeapConnected,
-  setSelectedWalletId,
 } from "../../store/slices/settings";
 import { useAppDispatch } from "../../store/store";
 import { WalletProvider } from "../../utils/walletProvider";
@@ -82,11 +82,11 @@ export const useLeap: () => UseLeapResult = () => {
           console.error("no leap");
           return;
         }
-        if (selectedNetworkInfo?.kind !== NetworkKind.Cosmos) {
-          setReady(true);
-          return;
-        }
-        const chainId = selectedNetworkInfo.chainId;
+        const targetNetwork =
+          selectedNetworkInfo?.kind === NetworkKind.Cosmos
+            ? selectedNetworkInfo
+            : teritoriNetwork;
+        const chainId = targetNetwork.chainId;
         if (!chainId) {
           setReady(true);
           console.error("missing chain id");
@@ -109,7 +109,7 @@ export const useLeap: () => UseLeapResult = () => {
   }, [hasLeap, isLeapConnected, dispatch, selectedNetworkInfo]);
 
   const wallets = useMemo(() => {
-    let networkId = "";
+    let networkId = teritoriNetwork.id;
     if (selectedNetworkInfo?.kind === NetworkKind.Cosmos) {
       networkId = selectedNetworkInfo.id;
     }
@@ -127,10 +127,7 @@ export const useLeap: () => UseLeapResult = () => {
       return [wallet];
     }
     const wallets = addresses.map((address, index) => {
-      let userId = "";
-      if (selectedNetworkInfo?.kind === NetworkKind.Cosmos) {
-        userId = getUserId(networkId, address);
-      }
+      const userId = getUserId(networkId, address);
 
       const wallet: Wallet = {
         address,
@@ -141,19 +138,12 @@ export const useLeap: () => UseLeapResult = () => {
         connected: true,
         id: `leap-${address}`,
       };
-      console.log("leap", index, wallet);
+
       return wallet;
     });
 
     return wallets;
   }, [addresses, selectedNetworkInfo]);
 
-  useEffect(() => {
-    const selectedWallet = wallets.find((w) => w.connected);
-    if (selectedWallet && selectedNetworkInfo?.kind === NetworkKind.Cosmos) {
-      dispatch(setSelectedWalletId(selectedWallet.id));
-    }
-  }, [dispatch, selectedNetworkInfo?.kind, wallets]);
-
   return hasLeap ? [true, ready, wallets] : [false, ready, undefined];
 };

packages/context/WalletsProvider/metamask.ts

@@ -4,6 +4,7 @@ import { useMemo, useEffect } from "react";
 import { Wallet } from "./wallet";
 import { useSelectedNetworkInfo } from "../../hooks/useSelectedNetwork";
 import { NetworkKind, getUserId } from "../../networks";
+import { ethereumNetwork } from "../../networks/ethereum";
 import { setSelectedWalletId } from "../../store/slices/settings";
 import { useAppDispatch } from "../../store/store";
 import { WalletProvider } from "../../utils/walletProvider";
@@ -21,18 +22,23 @@ export const useMetamask: () => UseMetamaskResult = () => {
 
   const wallet: Wallet | undefined = useMemo(() => {
     if (!address || !isConnected) return;
+    let targetNetworkId = ethereumNetwork.id;
+    if (selectedNetworkInfo?.kind === NetworkKind.Ethereum) {
+      targetNetworkId = selectedNetworkInfo.id;
+    }
+    const userId = getUserId(targetNetworkId, address);
     const walletId = `metamask-${address}`;
     const wallet: Wallet = {
       id: walletId,
       address,
       provider: WalletProvider.Metamask,
       networkKind: NetworkKind.Ethereum,
-      networkId: selectedNetworkInfo?.id || "",
-      userId: getUserId(selectedNetworkInfo?.id, address || ""),
+      networkId: targetNetworkId,
+      userId,
       connected: isConnected,
     };
     return wallet;
-  }, [address, isConnected, selectedNetworkInfo?.id]);
+  }, [address, isConnected, selectedNetworkInfo]);
 
   useEffect(() => {
     if (

packages/hooks/useRewards.ts

@@ -16,7 +16,8 @@ export type Reward = {
   amount: string;
   price: number;
 };
-export type TotalRewards = {
+
+type TotalRewards = {
   denom: string;
   amount: string;
   price: number;

packages/networks/gno-dev/index.ts

@@ -16,9 +16,9 @@ export const gnoDevNetwork: GnoNetworkInfo = {
   idPrefix: "gnodev",
   chainId: "dev",
   endpoint: "http://127.0.0.1:36657/http://127.0.0.1:26657",
-  txExplorer: "https://etherscan.io/tx/$hash",
-  accountExplorer: "https://etherscan.io/address/$address",
-  contractExplorer: "https://etherscan.io/address/$address",
+  txExplorer: "https://gnoscan.io/transactions/details?txhash=$hash",
+  accountExplorer: "https://gnoscan.io/accounts/$address",
+  contractExplorer: "https://gnoscan.io/realms/details?path=$address",
   testnet: true,
   backendEndpoint: "http://localhost:9090",
   vaultContractAddress: "",

packages/networks/gno-teritori/index.ts

@@ -16,9 +16,9 @@ export const gnoTeritoriNetwork: GnoNetworkInfo = {
   idPrefix: "gnotori",
   chainId: "teritori-1",
   endpoint: "https://testnet.gno.teritori.com:26658",
-  txExplorer: "https://etherscan.io/tx/$hash",
-  accountExplorer: "https://etherscan.io/address/$address",
-  contractExplorer: "https://etherscan.io/address/$address",
+  txExplorer: "https://gnoscan.io/transactions/details?txhash=$hash",
+  accountExplorer: "https://gnoscan.io/accounts/$address",
+  contractExplorer: "https://gnoscan.io/realms/details?path=$address",
   testnet: true,
   backendEndpoint: "https://dapp-backend.testnet.teritori.com",
   vaultContractAddress: "",

packages/networks/gno-test3/index.ts

@@ -12,9 +12,9 @@ export const gnoTest3Network: GnoNetworkInfo = {
   idPrefix: "gnotest3",
   chainId: "test3",
   endpoint: "https://rpc.test3.gno.land",
-  txExplorer: "https://etherscan.io/tx/$hash",
-  accountExplorer: "https://etherscan.io/address/$address",
-  contractExplorer: "https://etherscan.io/address/$address",
+  txExplorer: "https://gnoscan.io/transactions/details?txhash=$hash",
+  accountExplorer: "https://gnoscan.io/accounts/$address",
+  contractExplorer: "https://gnoscan.io/realms/details?path=$address",
   testnet: true,
   backendEndpoint: "https://dapp-backend.mainnet.teritori.com",
   vaultContractAddress: "",