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;