Add routes to pages for navigation (#4)

* Add routes to pages

* Set up material ui

* Handle review comments

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.14",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,9 +14,12 @@
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "@walletconnect/modal": "^2.6.2",
+    "@walletconnect/sign-client": "^2.11.3",
+    "@walletconnect/types": "^2.11.3",
     "assert": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -39,10 +45,10 @@
     ]
   },
   "devDependencies": {
-    "husky": "^9.0.11",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "eslint": "^8.55.0",
-    "eslint-plugin-react": "^7.33.2"
+    "eslint-plugin-react": "^7.33.2",
+    "husky": "^9.0.11"
   }
 }

src/App.tsx

@@ -1,33 +1,21 @@
 import React from "react";
-import { useWalletConnectContext } from "./context/WalletConnectContext";
+import { BrowserRouter as Router,  Routes, Route  } from 'react-router-dom';
+
+import ConnectWallet from "./pages/ConnectWallet";
+import SignWithEthereum from "./pages/SignWithEthereum";
+import SignWithCosmos from "./pages/SignWithCosmos";
+import Success from "./pages/Success";
 
 function App() {
-  const { connect, session } = useWalletConnectContext();
-
   return (
-    <>
-      {!session ? (
-        <div>
-          <h1>Connect wallet </h1>
-          <button onClick={connect}>Connect</button>
-        </div>
-      ) : (
-        <>
-          <h1>Connected</h1>
-          <p>Session Topic: {session.pairingTopic}</p>
-          <p>Ethereum accounts: </p>
-          <ul>{session.namespaces.eip155.accounts.map((address, index) => 
-            <li key={index}>{address}</li>
-          )}
-          </ul>
-          <p>Cosmos accounts: </p>
-          <ul>{session.namespaces.cosmos.accounts.map((address, index) => 
-            <li key={index}>{address}</li>
-          )}
-          </ul>
-        </>
-      )}
-    </>
+    <Router>
+      <Routes>
+        <Route path="/" element={<ConnectWallet />} />
+        <Route path="/sign-with-ethereum" element={<SignWithEthereum />} />
+        <Route path="/sign-with-cosmos" element={<SignWithCosmos />} />
+        <Route path="/success" element={<Success />} />
+      </Routes>
+    </Router>
   );
 }
 

src/context/WalletConnectContext.tsx

@@ -29,6 +29,7 @@ const web3Modal = new WalletConnectModal({
   chains: ["eip155:1"],
 });
 
+// TODO: Disconnect session
 export const WalletConnectProvider = ({
   children,
 }: {

src/pages/ConnectWallet.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom'
+
+import { useWalletConnectContext } from "../context/WalletConnectContext";
+
+// TODO: Connect wallet should not be accessible if session already exists
+const ConnectWallet = () => {
+  const { connect } = useWalletConnectContext();
+  const navigate = useNavigate()
+  const handler = async () => {
+    await connect();
+    navigate("/sign-with-ethereum")
+  }
+
+  return (
+    <div>
+      <h1>Connect wallet </h1>
+      <button onClick={handler}>Connect</button>
+    </div>
+  );
+};
+
+export default ConnectWallet;

src/pages/SignWithCosmos.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom'
+
+const SignWithCosmos = () => {
+  return (
+    <div>
+      <Link to="/success"><button>sign with cosmos</button></Link>
+    </div>
+  );
+};
+
+export default SignWithCosmos;

src/pages/SignWithEthereum.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import assert from 'assert';
+import { Link } from 'react-router-dom'
+
+import { useWalletConnectContext } from '../context/WalletConnectContext';
+
+const SignWithEthereum = () => {
+  const { session } = useWalletConnectContext();
+  assert(session, "Session not found")
+
+  return (
+    <div>
+      <h1>Connected</h1>
+      <p>Session id: {session.topic}</p>
+      <p>Ethereum accounts: </p>
+      <ul>{session.namespaces.eip155.accounts.map((address, index) =>
+        <li key={index}>{address}</li>
+      )}
+      </ul>
+      <p>Cosmos accounts: </p>
+      <ul>{session.namespaces.cosmos.accounts.map((address, index) =>
+        <li key={index}>{address}</li>
+      )}
+      </ul>
+      <Link to="/sign-with-cosmos"><button>Sign with ethereum</button></Link>
+    </div>
+  );
+};
+
+export default SignWithEthereum;

src/pages/Success.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Success = () => {
+  return (
+    <div>
+      Success
+    </div>
+  );
+};
+
+export default Success;