feat: move to nextjs

components/Body/WalletConnectTab/ConnectionDetails.tsx

@@ -0,0 +1,38 @@
+import { Box, Text, Button, VStack, Avatar, Link } from "@chakra-ui/react";
+import { SessionTypes } from "@walletconnect/types";
+
+interface ConnectionDetailsParams {
+  web3WalletSession: SessionTypes.Struct;
+  killSession: () => void;
+}
+
+function ConnectionDetails({
+  web3WalletSession,
+  killSession,
+}: ConnectionDetailsParams) {
+  return (
+    <>
+      <Box mt={4} fontSize={24} fontWeight="semibold">
+        ✅ Connected To:
+      </Box>
+      <VStack>
+        <Avatar src={web3WalletSession.peer?.metadata?.icons[0]} />
+        <Text fontWeight="bold">{web3WalletSession.peer?.metadata?.name}</Text>
+        <Text fontSize="sm">
+          {web3WalletSession.peer?.metadata?.description}
+        </Text>
+        <Link
+          href={web3WalletSession.peer?.metadata?.url}
+          textDecor="underline"
+        >
+          {web3WalletSession.peer?.metadata?.url}
+        </Link>
+        <Box pt={6}>
+          <Button onClick={() => killSession()}>Disconnect ☠</Button>
+        </Box>
+      </VStack>
+    </>
+  );
+}
+
+export default ConnectionDetails;

components/Body/WalletConnectTab/Loading.tsx

@@ -0,0 +1,39 @@
+import {
+  Box,
+  Center,
+  Button,
+  VStack,
+  CircularProgress,
+} from "@chakra-ui/react";
+
+interface LoadingParams {
+  isConnected: boolean;
+  setLoading: (value: boolean) => void;
+  reset: (persistUri?: boolean) => void;
+}
+
+function Loading({ isConnected, setLoading, reset }: LoadingParams) {
+  return (
+    <Center>
+      <VStack>
+        <Box>
+          <CircularProgress isIndeterminate />
+        </Box>
+        {!isConnected && (
+          <Box pt={6}>
+            <Button
+              onClick={() => {
+                setLoading(false);
+                reset(true);
+              }}
+            >
+              Stop Loading ☠
+            </Button>
+          </Box>
+        )}
+      </VStack>
+    </Center>
+  );
+}
+
+export default Loading;

components/Body/WalletConnectTab/URIInput.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from "react";
+import {
+  FormControl,
+  HStack,
+  FormLabel,
+  Tooltip,
+  Box,
+  Text,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Button,
+} from "@chakra-ui/react";
+import { InfoIcon, DeleteIcon } from "@chakra-ui/icons";
+
+interface URIInputParams {
+  uri: string;
+  setUri: (value: string) => void;
+  isConnected: boolean;
+  initWalletConnect: () => void;
+}
+
+function URIInput({
+  uri,
+  setUri,
+  isConnected,
+  initWalletConnect,
+}: URIInputParams) {
+  const [pasted, setPasted] = useState(false);
+
+  useEffect(() => {
+    if (pasted) {
+      initWalletConnect();
+      setPasted(false);
+    }
+  }, [uri]);
+
+  return (
+    <FormControl my={4}>
+      <HStack>
+        <FormLabel>WalletConnect URI</FormLabel>
+        <Tooltip
+          label={
+            <>
+              <Text>Visit any dApp and select WalletConnect.</Text>
+              <Text>
+                Click "Copy to Clipboard" beneath the QR code, and paste it
+                here.
+              </Text>
+            </>
+          }
+          hasArrow
+          placement="top"
+        >
+          <Box pb="0.8rem">
+            <InfoIcon />
+          </Box>
+        </Tooltip>
+      </HStack>
+      <Box>
+        <InputGroup>
+          <Input
+            pr={isConnected ? "0" : "3.5rem"}
+            bg={"brand.lightBlack"}
+            placeholder="wc:xyz123"
+            aria-label="uri"
+            autoComplete="off"
+            value={uri}
+            onChange={(e) => setUri(e.target.value)}
+            onPaste={(e) => {
+              e.preventDefault();
+              setPasted(true);
+              setUri(e.clipboardData.getData("text"));
+            }}
+            isDisabled={isConnected}
+          />
+          {uri && !isConnected && (
+            <InputRightElement px="1rem" mr="0.5rem">
+              <Button h="1.75rem" size="sm" onClick={() => setUri("")}>
+                <DeleteIcon />
+              </Button>
+            </InputRightElement>
+          )}
+        </InputGroup>
+      </Box>
+    </FormControl>
+  );
+}
+
+export default URIInput;

components/Body/WalletConnectTab/index.tsx

@@ -0,0 +1,60 @@
+import { Center, Button } from "@chakra-ui/react";
+import { SessionTypes } from "@walletconnect/types";
+import ConnectionDetails from "./ConnectionDetails";
+import Loading from "./Loading";
+import URIInput from "./URIInput";
+
+interface WalletConnectTabParams {
+  uri: string;
+  setUri: (value: string) => void;
+  isConnected: boolean;
+  initWalletConnect: () => void;
+  loading: boolean;
+  setLoading: (value: boolean) => void;
+  reset: (persistUri?: boolean) => void;
+  killSession: () => void;
+  web3WalletSession: SessionTypes.Struct | undefined;
+}
+
+function WalletConnectTab({
+  uri,
+  setUri,
+  isConnected,
+  initWalletConnect,
+  loading,
+  setLoading,
+  reset,
+  killSession,
+  web3WalletSession,
+}: WalletConnectTabParams) {
+  return (
+    <>
+      <URIInput
+        uri={uri}
+        setUri={setUri}
+        isConnected={isConnected}
+        initWalletConnect={initWalletConnect}
+      />
+      <Center>
+        <Button onClick={() => initWalletConnect()} isDisabled={isConnected}>
+          Connect
+        </Button>
+      </Center>
+      {loading && (
+        <Loading
+          isConnected={isConnected}
+          setLoading={setLoading}
+          reset={reset}
+        />
+      )}
+      {web3WalletSession && isConnected && (
+        <ConnectionDetails
+          web3WalletSession={web3WalletSession}
+          killSession={killSession}
+        />
+      )}
+    </>
+  );
+}
+
+export default WalletConnectTab;