chore: URL on lab pages (#2702)

Co-authored-by: Enes <enesozturk.d@gmail.com>

apps/laboratory/src/components/AppKitButtons.tsx

@@ -2,7 +2,7 @@ import { Stack, Card, CardHeader, Heading, CardBody, Box, StackDivider } from '@
 
 export function AppKitButtons() {
   return (
-    <Card marginTop={20}>
+    <Card marginTop={10}>
       <CardHeader>
         <Heading size="md">AppKit Interactions</Heading>
       </CardHeader>

apps/laboratory/src/layout/LayoutHeader.tsx

@@ -6,14 +6,16 @@ import {
   Spacer,
   Link as CLink,
   useDisclosure,
-  useColorMode
+  useColorMode,
+  Text
 } from '@chakra-ui/react'
 import Link from 'next/link'
 import { IoSettingsOutline } from 'react-icons/io5'
 import { OptionsDrawer } from './OptionsDrawer'
 import { CustomWallet } from './CustomWallet'
 import { DownloadIcon } from '@chakra-ui/icons'
 import { useChakraToast } from '../components/Toast'
+import { useEffect, useState } from 'react'
 
 function downloadLogs(toast: ReturnType<typeof useChakraToast>) {
   type WindowWithLogs = typeof Window & {
@@ -38,6 +40,11 @@ export function LayoutHeader() {
   const toast = useChakraToast()
   const { colorMode } = useColorMode()
 
+  const [host, setHost] = useState('')
+  useEffect(() => {
+    setHost(window.location.href)
+  }, [])
+
   return (
     <>
       <Stack direction={['column', 'column', 'row']} marginBlockStart={10} justifyContent="center">
@@ -69,6 +76,7 @@ export function LayoutHeader() {
           Logs
         </Button>
       </Stack>
+      <Text fontSize="2xs">{host}</Text>
 
       <OptionsDrawer controls={controls} />
       <CustomWallet controls={controlsCW} />