add use case for specify wallet usage

Author: theothersideofgods

docs/usage.mdx

@@ -414,4 +414,173 @@ For advanced configuration options, you can provide additional options to the Ch
 
 - [InterchainJS Documentation](https://docs.hyperweb.io/interchainjs)
 - [Chain Registry Documentation](https://github.com/hyperweb-io/chain-registry)
-- [Example Applications](https://github.com/hyperweb-io/interchain-kit/tree/main/examples)
+- [Example Applications](https://github.com/hyperweb-io/interchain-kit/tree/main/examples)
+
+## Signing Arbitrary Messages with Cosmos Wallet
+
+Interchain Kit allows you to sign arbitrary messages using a Cosmos Wallet:
+
+```tsx
+import {
+  CosmosWallet,
+  ExtensionWallet,
+  isInstanceOf,
+  MultiChainWallet,
+} from "@interchain-kit/core";
+import { useChain } from "@interchain-kit/react";
+import { useState } from "react";
+
+const CosmosWalletExample: React.FC = () => {
+  // Connect to a specific chain
+  const { wallet, connect, address, disconnect, chain } =
+    useChain("osmosistestnet");
+
+  const [message, setMessage] = useState("");
+  const [signature, setSignature] = useState("");
+
+  const handleConnect = async () => {
+    connect();
+  };
+
+  const handleDisconnect = async () => {
+    disconnect();
+  };
+
+  const handleSignArbitrary = async () => {
+
+    // get specific wallet to use its own methods
+
+    const cosmosWallet = wallet.getWalletOfType(CosmosWallet);
+
+    if (cosmosWallet) {
+      const signed = await cosmosWallet.signArbitrary(
+        chain.chainId as string,
+        address,
+        message
+      );
+
+      setSignature(signed.signature);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Cosmos Wallet</h1>
+      {address ? (
+        <div>
+          <p>Connected Address: {address}</p>
+          <button onClick={handleDisconnect}>Disconnect</button>
+        </div>
+      ) : (
+        <button onClick={handleConnect}>Connect Wallet</button>
+      )}
+
+      <div>
+        <h2>Sign Arbitrary Message</h2>
+        <textarea
+          rows={4}
+          cols={50}
+          placeholder="Enter a message to sign"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+        <br />
+        <button onClick={handleSignArbitrary}>
+          Sign Message
+        </button>
+        {signature && (
+          <div>
+            <h3>Signature:</h3>
+            <pre>{signature}</pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+```
+
+This example demonstrates how to:
+1. Connect to a specific chain using `useChain`
+2. Get a Cosmos wallet instance using `wallet.getWalletOfType(CosmosWallet)`
+3. Sign arbitrary messages with `cosmosWallet.signArbitrary()`
+4. Display the resulting signature to the user
+
+## Signing Messages with Ethereum Wallet
+
+Interchain Kit also allows you to sign messages using an Ethereum Wallet:
+
+```tsx
+import { EthereumWallet } from "@interchain-kit/core";
+import { useChain } from "@interchain-kit/react";
+import React, { useState } from "react";
+
+const EthereumWalletExample: React.FC = () => {
+  const [message, setMessage] = useState<string>("");
+  const [signature, setSignature] = useState<string | null>(null);
+
+  // Connect to Ethereum chain
+  const { connect, address, disconnect, wallet } = useChain("ethereum");
+
+  const connectWallet = async () => {
+    connect();
+  };
+
+  const disconnectWallet = async () => {
+    disconnect();
+    setSignature(null);
+  };
+
+  const signMessage = async () => {
+
+    // get specific wallet to use its own methods
+
+    const ethereumWallet = wallet.getWalletOfType(EthereumWallet);
+    if (ethereumWallet) {
+      try {
+        const signedMessage = await ethereumWallet.signMessage(message);
+        setSignature(signedMessage);
+      } catch (error) {
+        console.error("Error signing message:", error);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2>Ethereum Sign Message Example</h2>
+      {!address ? (
+        <button onClick={connectWallet}>Connect Wallet</button>
+      ) : (
+        <button onClick={disconnectWallet}>Disconnect Wallet</button>
+      )}
+      <div>
+        <div>
+          <strong>Connected:</strong> {address}
+        </div>
+        <textarea
+          rows={3}
+          style={{ width: "100%", marginTop: 16 }}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+        <button style={{ marginTop: 16 }} onClick={signMessage}>
+          Sign Message
+        </button>
+      </div>
+      {signature && (
+        <div style={{ marginTop: 16 }}>
+          <strong>Signature:</strong>
+          <pre>{signature}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+This example demonstrates how to:
+1. Connect to the Ethereum chain using `useChain("ethereum")`
+2. Get an Ethereum wallet instance using `wallet.getWalletOfType(EthereumWallet)`
+3. Sign messages with `ethereumWallet.signMessage()`
+4. Display the resulting signature to the user

examples/react/src/App.tsx

@@ -8,6 +8,7 @@ import LedgerExample from "./pages/leger";
 import Mobile from "./pages/mobile";
 import CosmosWalletPage from "./pages/cosmos-wallet";
 import TestDisconnect from "./pages/test-disconnect";
+import EthereumSignMessage from "./pages/ethereum-wallet";
 
 function Layout() {
   return <Outlet />;
@@ -26,6 +27,7 @@ export default function App() {
         <Route path="mobile" element={<Mobile />} />
         <Route path="cosmos-wallet" element={<CosmosWalletPage />} />
         <Route path="test-disconnect" element={<TestDisconnect />} />
+        <Route path="ethereum-wallet" element={<EthereumSignMessage />} />
       </Route>
     </Routes>
   );

examples/react/src/main.tsx

@@ -49,14 +49,14 @@ import { create } from "domain";
 
 const chainNames: string[] = [
   // "injectivetestnet",
-  "osmosistestnet",
+  // "osmosistestnet",
   // "osmosis",
   // "juno",
   // "cosmoshub",
   // "stargaze",
   // "noble",
   // "seitestnet2",
-  // "ethereum",
+  "ethereum",
   // "cosmoshubtestnet",
 ];
 // const chainNames = ["osmosistestnet"];

examples/react/src/pages/cosmos-wallet.tsx

@@ -1,14 +1,10 @@
-import {
-  CosmosWallet,
-  ExtensionWallet,
-  isInstanceOf,
-  MultiChainWallet,
-} from "@interchain-kit/core";
+import { CosmosWallet } from "@interchain-kit/core";
 import { useChain } from "@interchain-kit/react";
 import { useState } from "react";
 
 const CosmosWalletPage: React.FC = () => {
-  const { wallet, connect, address, disconnect, chain } = useChain("osmosis");
+  const { wallet, connect, address, disconnect, chain } =
+    useChain("osmosistestnet");
 
   const [message, setMessage] = useState("");
   const [signature, setSignature] = useState("");
@@ -22,11 +18,9 @@ const CosmosWalletPage: React.FC = () => {
   };
 
   const handleSignArbitrary = async () => {
-    if (wallet instanceof MultiChainWallet) {
-      const cosmosWallet = (await wallet.getWalletByChainType(
-        "cosmos"
-      )) as CosmosWallet;
+    const cosmosWallet = wallet.getWalletOfType(CosmosWallet);
 
+    if (cosmosWallet) {
       const signed = await cosmosWallet.signArbitrary(
         chain.chainId as string,
         address,

examples/react/src/pages/ethereum-wallet.tsx

@@ -0,0 +1,66 @@
+import { EthereumWallet } from "@interchain-kit/core";
+import { useChain } from "@interchain-kit/react";
+import React, { useState } from "react";
+
+const EthereumSignMessage: React.FC = () => {
+  const [message, setMessage] = useState<string>("");
+  const [signature, setSignature] = useState<string | null>(null);
+
+  const { connect, address, disconnect, wallet } = useChain("ethereum");
+
+  const connectWallet = async () => {
+    connect();
+  };
+
+  const disconnectWallet = async () => {
+    disconnect();
+    setSignature(null);
+  };
+
+  const signMessage = async () => {
+    const ethereumWallet = wallet.getWalletOfType(EthereumWallet);
+    if (ethereumWallet) {
+      try {
+        const signedMessage = await ethereumWallet.signMessage(message);
+        setSignature(signedMessage);
+      } catch (error) {
+        console.error("Error signing message:", error);
+      }
+    }
+  };
+
+  return (
+    <div
+      style={{ maxWidth: 500, margin: "2rem auto", fontFamily: "sans-serif" }}
+    >
+      <h2>Ethereum Sign Message Example</h2>
+      {!address ? (
+        <button onClick={connectWallet}>Connect Wallet</button>
+      ) : (
+        <button onClick={disconnectWallet}>Disconnect Wallet</button>
+      )}
+      <div>
+        <div>
+          <strong>Connected:</strong> {address}
+        </div>
+        <textarea
+          rows={3}
+          style={{ width: "100%", marginTop: 16 }}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+        <button style={{ marginTop: 16 }} onClick={signMessage}>
+          Sign Message
+        </button>
+      </div>
+      {signature && (
+        <div style={{ marginTop: 16 }}>
+          <strong>Signature:</strong>
+          <pre style={{ whiteSpace: "break-spaces" }}>{signature}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EthereumSignMessage;

packages/core/src/wallets/ethereum-wallet.ts

@@ -4,6 +4,7 @@ import { BaseWallet } from "./base-wallet";
 import { delay, getClientFromExtension } from "../utils";
 import { EthereumNetwork } from "../types/ethereum";
 import { IGenericOfflineSigner } from '@interchainjs/types';
+import { fromByteArray, toByteArray } from "base64-js";
 
 export class EthereumWallet extends BaseWallet {
 
@@ -38,6 +39,7 @@ export class EthereumWallet extends BaseWallet {
   async disconnect(chainId: Chain["chainId"]): Promise<void> {
     // throw new Error("Method not implemented.");
     console.log('eth disconnect')
+    return new Promise((resolve, reject) => { resolve() })
   }
   async switchChain(chainId: string): Promise<void> {
     if (!chainId.startsWith("0x")) {
@@ -125,4 +127,33 @@ export class EthereumWallet extends BaseWallet {
     console.log('transactionHash:', txHash);
     return txHash;
   }
+
+  async signMessage(message: string) {
+    if (!this.ethereum) {
+      throw new Error("MetaMask is not installed");
+    }
+
+    try {
+      // Request account access
+      const accounts = await this.ethereum.request({
+        method: "eth_requestAccounts",
+      });
+      const account = accounts[0];
+
+      // Encode message to Base64
+      const hexMessage = fromByteArray(new TextEncoder().encode(message));
+
+      // Sign the message
+      const signature = await this.ethereum.request({
+        method: "personal_sign",
+        params: [hexMessage, account],
+      });
+
+      console.log("Signature:", signature);
+      return signature;
+    } catch (error) {
+      console.error("Error signing message:", error);
+      throw error;
+    }
+  }
 }