feat: wc qrreader done

front/package.json

@@ -28,6 +28,7 @@
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-qr-reader-es6": "2.2.1-2",
     "viem": "^1.18.0",
     "wagmi": "^1.0.6"
   },

front/src/components/HomePage/index.tsx

@@ -2,14 +2,14 @@
 
 import OnBoarding from "@/components/OnBoarding";
 import { useMe } from "@/providers/MeProvider";
-import { Button, Flex } from "@radix-ui/themes";
+import { Flex } from "@radix-ui/themes";
 import Balance from "../Balance";
 import NavBar from "../NavBar";
 import History from "../History";
 import TopBar from "../TopBar";
 
 export default function Home() {
-  const { me, disconnect, isMounted } = useMe();
+  const { me, isMounted } = useMe();
 
   if (!isMounted) return null;
 
@@ -20,7 +20,6 @@ export default function Home() {
         <Balance />
         <NavBar />
         <History />
-        <Button onClick={disconnect}>Logout</Button>
       </Flex>
     );
   } else {

front/src/components/NavBar/index.tsx

@@ -5,6 +5,7 @@ import { useModal } from "@/providers/ModalProvider";
 import { PaperPlaneIcon, CornersIcon } from "@radix-ui/react-icons";
 import { SendTransaction } from "@/components/SendTransaction";
 import { useEffect } from "react";
+import QrReaderModal from "../QrReaderModal";
 
 export default function NavBar() {
   const { open } = useModal();
@@ -19,7 +20,12 @@ export default function NavBar() {
       >
         <PaperPlaneIcon />
       </Button>
-      <Button size="4" variant="outline" style={{ flexGrow: 1 }}>
+      <Button
+        size="4"
+        variant="outline"
+        style={{ flexGrow: 1 }}
+        onClick={() => open(<QrReaderModal />)}
+      >
         <CornersIcon style={{ width: 20, height: 20 }} />
       </Button>
     </Flex>

front/src/components/QrReaderModal/index.tsx

@@ -0,0 +1,108 @@
+import ReactQrReader from "react-qr-reader-es6";
+import { Text, TextField, Button, Flex } from "@radix-ui/themes";
+import { useState } from "react";
+import { CheckCircledIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { useWalletConnect } from "@/libs/wallet-connect";
+import Spinner from "../Spinner";
+import { useModal } from "@/providers/ModalProvider";
+
+export default function QrReaderModal() {
+  const [input, setInput] = useState<string>("");
+  const [success, setSuccess] = useState<boolean>(false);
+  const { close } = useModal();
+
+  const { pairSession, pairingState, sessions } = useWalletConnect();
+  function handleScan(data: string | null) {
+    if (data) {
+      if (data.startsWith("wc:")) {
+        pairSession({
+          uri: data,
+          onSuccess: (pairingTopic) => {
+            setSuccess(true);
+            setTimeout(() => {
+              close();
+            }, 3000);
+          },
+          onError: () => {},
+        });
+      }
+      if (data.startsWith("0x")) {
+        console.log("TODO: handle ethereum address");
+      }
+    }
+  }
+
+  const isLoading = Object.values(pairingState).some((element) => element.isLoading);
+
+  if (success) {
+    return (
+      <Flex
+        direction="column"
+        width="100%"
+        style={{ flexGrow: 1 }}
+        justify={"center"}
+        align={"center"}
+      >
+        <CheckCircledIcon height="40" width="40" color="var(--accent-11)" />
+      </Flex>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Flex direction="column" width="100%" style={{ flexGrow: 1 }} justify={"center"}>
+        <Spinner />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column" width="100%" align={"center"} gap={"3"}>
+      <ReactQrReader
+        style={{
+          borderRadius: " 10px",
+          width: "90%",
+          overflow: "hidden",
+          background: "var(--gray-5)",
+        }}
+        showViewFinder={false}
+        onError={(err) => console.error(err)}
+        onScan={handleScan}
+      />
+      <Text>or</Text>
+
+      <Flex gap="2">
+        <TextField.Root size={"3"}>
+          <TextField.Slot>
+            <MagnifyingGlassIcon height="16" width="16" />
+          </TextField.Slot>
+          <TextField.Input
+            placeholder="wc:…"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+          />
+        </TextField.Root>
+        <Button
+          variant="outline"
+          onClick={() => {
+            if (input.startsWith("wc:")) {
+              pairSession({
+                uri: input,
+                onSuccess: (pairingTopic) => {
+                  setSuccess(true);
+                  setTimeout(() => {
+                    close();
+                  }, 3000);
+                },
+                onError: () => {},
+              });
+            }
+          }}
+          size={"3"}
+        >
+          {isLoading ? "is connecting" : "Connect"}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}

front/src/components/SettingsPage/index.tsx

@@ -10,11 +10,13 @@ import Link from "next/link";
 import { useWalletConnect } from "@/libs/wallet-connect";
 import SessionCard from "../SessionCard";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export default function SettingsPage() {
   const { me, disconnect, isMounted } = useMe();
   const { sessions } = useWalletConnect();
   const [isCopied, setIsCopied] = useState(false);
+  const router = useRouter();
 
   if (!isMounted) return null;
 
@@ -53,7 +55,10 @@ export default function SettingsPage() {
             </Tooltip>
             <Button
               size={"3"}
-              onClick={disconnect}
+              onClick={() => {
+                disconnect();
+                router.push("/");
+              }}
               style={{ width: "110px" }}
               color={"red"}
               variant="outline"