refactor: separate into components

src/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;

src/components/Body/WalletConnectTab/LegacyConnectionDetails.tsx

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

src/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;

src/components/Body/WalletConnectTab/URIInput.tsx

@@ -0,0 +1,57 @@
+import {
+  FormControl,
+  HStack,
+  FormLabel,
+  Tooltip,
+  Box,
+  Text,
+  Input,
+} from "@chakra-ui/react";
+import { InfoIcon } from "@chakra-ui/icons";
+
+interface URIInputParams {
+  uri: string;
+  setUri: (value: string) => void;
+  bg: string;
+  isConnected: boolean;
+}
+
+function URIInput({ uri, setUri, bg, isConnected }: URIInputParams) {
+  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>
+        <Input
+          placeholder="wc:xyz123"
+          aria-label="uri"
+          autoComplete="off"
+          value={uri}
+          onChange={(e) => setUri(e.target.value)}
+          bg={bg}
+          isDisabled={isConnected}
+        />
+      </Box>
+    </FormControl>
+  );
+}
+
+export default URIInput;

src/components/Body/WalletConnectTab/index.tsx

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