-
-
-
+function HomePage() {
+ return (
+
+
+
);
}
-function HomePageExample2() {
- const { open, close } = useWeb3Modal();
-
- return (
-
-
- );
-}
-export default App;
\ No newline at end of file
+export default App;
diff --git a/basic/78-wallet-connect/v2/sign-example/README.md b/basic/78-wallet-connect/v2/sign-example/README.md
index b7f053c80..afa768191 100644
--- a/basic/78-wallet-connect/v2/sign-example/README.md
+++ b/basic/78-wallet-connect/v2/sign-example/README.md
@@ -1,3 +1,29 @@
+# Wallet Connect Sign Demo
-# Reference
-- https://github.com/WalletConnect/web3modal-examples/blob/main/walletconnect-modal-sign-react/src/pages/index.jsx
\ No newline at end of file
+This demo showcases how to set up Wallet Connect with React, using `wagmi` and `web3modal` for blockchain connection and user authentication.
+
+## Setup Instructions
+
+1. **Install Dependencies**
+ ```bash
+ yarn
+ ```
+
+2. **Create `.env` File**
+
+ Create a `.env` file in the root of your project and add your Wallet Connect Project ID. You can obtain a Project ID by signing up at [Wallet Connect Cloud](https://cloud.walletconnect.com).
+
+ ```plaintext
+ REACT_APP_PROJECT_ID=your_project_id_here
+ ```
+
+3. **Start the Demo**
+ ```bash
+ yarn start
+ ```
+
+## References
+
+For more details, see the following resources:
+- [Wagmi Getting Started](https://wagmi.sh/react/getting-started)
+- [Wagmi Connect Wallet Example](https://wagmi.sh/examples/connect-wallet)
diff --git a/basic/78-wallet-connect/v2/sign-example/src/App.js b/basic/78-wallet-connect/v2/sign-example/src/App.js
index dc9cd9c27..c6674b816 100644
--- a/basic/78-wallet-connect/v2/sign-example/src/App.js
+++ b/basic/78-wallet-connect/v2/sign-example/src/App.js
@@ -1,43 +1,44 @@
import { Button } from "@material-ui/core";
-import "./App.css";
-
import { useState, useEffect } from "react";
import Client from "@walletconnect/sign-client";
import { Web3Modal } from "@web3modal/standalone";
+import "./App.css";
-
-const web3Modal = new Web3Modal({
- projectId: process.env.REACT_APP_PROJECT_ID,
- walletConnectVersion: 2
-});
-
+// Initialize Web3Modal with WalletConnect Project ID
+const projectId = process.env.REACT_APP_PROJECT_ID || "453f2a8e1d89bc35b8bc49eb781167b9";
+const web3Modal = new Web3Modal({ projectId, walletConnectVersion: 2 });
function App() {
- const [client, setClient] = useState();
- const [session, setSession] = useState([]);
- const [account, setAccount] = useState([]);
+ const [client, setClient] = useState(null);
+ const [session, setSession] = useState(null);
+ const [account, setAccount] = useState("");
+
+ useEffect(() => {
+ if (!client) {
+ createClient();
+ }
+ }, [client]);
- /**
- * 1. Initialize a basic signing client , which is used to send messages.
- */
- async function createClient() {
+ // Initialize the WalletConnect client
+ const createClient = async () => {
try {
const newClient = await Client.init({
- projectId: process.env.REACT_APP_PROJECT_ID,
+ projectId,
relayUrl: "wss://relay.walletconnect.com",
});
setClient(newClient);
- await subscribeToEvents(newClient);
- } catch (e) {
- console.log(e);
+ subscribeToEvents(newClient);
+ } catch (error) {
+ console.error("Failed to create client:", error);
}
- }
+ };
- async function handleConnect() {
- /**
- * 2. Request to create a new session via sign client.
- */
- if (!client) throw Error("Client is not set");
+ // Connect to Wallet and create a session
+ const handleConnect = async () => {
+ if (!client) {
+ console.error("Client not initialized");
+ return;
+ }
try {
const proposalNamespace = {
eip155: {
@@ -48,43 +49,29 @@ function App() {
};
const { uri, approval } = await client.connect({
-
requiredNamespaces: proposalNamespace,
});
- /**
- * 3. The session is created, display the session url in QRcode format via Web3Modal.
- */
if (uri) {
web3Modal.openModal({ uri });
-
- /**
- * 4. Now wait for wallet side to confirm the connection.
- */
const sessionNamespace = await approval();
- /**
- * 5. After the wallet accept the session, it will returns the wallet address it chooses.
- */
- console.log('wallet confirmed')
- console.log(sessionNamespace);
onSessionConnected(sessionNamespace);
web3Modal.closeModal();
}
- } catch (e) {
- console.log(e);
+ } catch (error) {
+ console.error("Failed to connect:", error);
}
- }
+ };
- async function onSessionConnected(session) {
- try {
- setSession(session);
- setAccount(session.namespaces.eip155.accounts[0].slice(9));
- } catch (e) {
- console.log(e);
- }
- }
+ // Handle session confirmation
+ const onSessionConnected = (sessionNamespace) => {
+ setSession(sessionNamespace);
+ setAccount(sessionNamespace.namespaces.eip155.accounts[0].slice(9));
+ };
- async function handleDisconnect() {
+ // Disconnect session
+ const handleDisconnect = async () => {
+ if (!client || !session) return;
try {
await client.disconnect({
topic: session.topic,
@@ -92,94 +79,74 @@ function App() {
code: 6000,
});
reset();
- } catch (e) {
- console.log(e);
+ } catch (error) {
+ console.error("Failed to disconnect:", error);
}
- }
-
- async function subscribeToEvents(client) {
- if (!client)
- throw Error("Unable to subscribe to events. Client does not exist.");
- try {
- client.on("session_ping", (args) => {
- alert('ping received');
- });
-
- client.on("session_event", (args) => {
- console.log("EVENT", "session_event", args);
- });
+ };
- client.on("session_update", ({ topic, params }) => {
- console.log("EVENT", "session_update", { topic, params });
- const { namespaces } = params;
- const _session = client.session.get(topic);
- const updatedSession = { ..._session, namespaces };
- onSessionConnected(updatedSession);
- });
+ // Subscribe to WalletConnect events
+ const subscribeToEvents = (client) => {
+ client.on("session_ping", () => alert("Ping received"));
+ client.on("session_event", (args) => console.log("Event received:", args));
+ client.on("session_update", ({ topic, params }) => {
+ console.log("Session updated:", params);
+ const updatedSession = { ...client.session.get(topic), namespaces: params.namespaces };
+ onSessionConnected(updatedSession);
+ });
+ client.on("session_delete", () => {
+ console.log("Session deleted");
+ reset();
+ });
+ };
- client.on("session_delete", () => {
- console.log("The user has disconnected the session from their wallet.");
- reset();
- });
- } catch (e) {
- console.log(e);
+ // Sign a message
+ const handleSend = async () => {
+ if (!account || !session) {
+ console.error("No account or session found");
+ return;
}
- }
-
- /**
- * 6. Since the session is online, now you can send message to the wallet to sign.
- */
- async function handleSend() {
- if (!account.length) throw Error("No account found");
try {
- //args of personal_sign:https://docs.metamask.io/wallet/reference/personal_sign/
- const signParams = ["0x4d7920656d61696c206973206a6f686e40646f652e636f6d202d2031363931383133383031323731",account];
-
- console.log(signParams);
-
+ const message = "My email is john@doe.com - 1691813801271";
const result = await client.request({
topic: session.topic,
chainId: "eip155:1",
request: {
method: "personal_sign",
- params: signParams,
+ params: [message, account],
},
});
- console.log("result is "+ result);
- alert('sign result '+ result);
- } catch (e) {
- console.log(e);
+ alert("Signature: " + result);
+ } catch (error) {
+ console.error("Failed to sign:", error);
}
- }
+ };
+ // Reset session and account state
const reset = () => {
- setAccount([]);
- setSession([]);
+ setAccount("");
+ setSession(null);
};
- useEffect(() => {
- if (!client) {
- createClient();
- }
- }, [client]);
-
return (
-
Sign Demo
- {account.length ? (
+
WalletConnect Sign Demo
+ {account ? (
<>
-
{account}
-
-
+
Connected Account: {account}
+
+
) : (
-
)}
);
}
-
-export default App;
\ No newline at end of file
+export default App;