✨ Realm QR Code

package.json

@@ -31,6 +31,7 @@
     "next": "^15.1.5",
     "next-i18next": "^15.4.2",
     "next-nprogress-bar": "^2.4.3",
+    "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",

src/pages/realms/[id].tsx

@@ -14,10 +14,13 @@ import {
   ListItemIcon,
   ListItemText,
   Typography,
+  useTheme,
 } from '@mui/material'
 import { GetServerSideProps } from 'next'
 import { checkAuthenticatedClient, getAttachmentUrl, redirectToLogin, sni, useUserStore } from 'solar-js-sdk'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { QRCodeSVG } from 'qrcode.react'
 
 import PublicIcon from '@mui/icons-material/Public'
 import ErrorIcon from '@mui/icons-material/Error'
@@ -48,6 +51,10 @@ export default function Realm({ realm }: any) {
   const [publicChannels, setPublicChannels] = useState<any[]>([])
   const [checkedChannels, setCheckedChannels] = useState<string[]>([])
 
+  const searchParams = useSearchParams()
+
+  const isShare = useMemo(() => searchParams.has('share'), [searchParams])
+
   function handleCheckChannel(value: string) {
     const currentIndex = checkedChannels.indexOf(value)
     const newChecked = [...checkedChannels]
@@ -104,6 +111,8 @@ export default function Realm({ realm }: any) {
     }
   }
 
+  const theme = useTheme()
+
   return (
     <Box
       sx={{
@@ -133,6 +142,23 @@ export default function Realm({ realm }: any) {
             </Typography>
             <Typography sx={{ mt: 3 }}>{realm.description}</Typography>
 
+            {isShare ? (
+              <Box mt={3} mx="auto" width={256}>
+                <QRCodeSVG
+                  title="Realm QR Code"
+                  value={'https://solsynth.dev/realms/' + realm.alias}
+                  level="H"
+                  bgColor="#00000000"
+                  fgColor={theme.palette.text.primary}
+                  size={256}
+                />
+
+                <Typography textAlign="center" mt={2}>
+                  Scan the QR Code above to join
+                </Typography>
+              </Box>
+            ) : (
+              <>
                 {publicChannels.length > 0 && (
                   <Box sx={{ mt: 3 }}>
                     <Typography fontSize={14} mx={1} sx={{ opacity: 0.75, mb: 0.5, textAlign: 'center' }}>
@@ -193,6 +219,8 @@ export default function Realm({ realm }: any) {
                     Join
                   </Button>
                 )}
+              </>
+            )}
           </CardContent>
         </Card>
       </Container>