feat: add dapps dropdown

examples/components/Layout.tsx

@@ -51,6 +51,7 @@ function Header(props: BoxProps) {
       sx={[
         {
           p: 2,
+          pr: 3,
           gap: 2,
           bgcolor: 'background.surface',
           display: 'flex',

examples/layouts/Header.tsx

@@ -1,6 +1,7 @@
 // @ts-ignore
 import radixLogo from '../assets/radix-icon_128x128.png'
 import * as React from 'react'
+import '@radixdlt/dapps-dropdown'
 import Box from '@mui/joy/Box'
 import Typography from '@mui/joy/Typography'
 import IconButton from '@mui/joy/IconButton'
@@ -18,6 +19,10 @@ declare global {
         React.HTMLAttributes<HTMLElement>,
         HTMLElement
       >
+      'radix-dapps-dropdown': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
     }
   }
 }
@@ -57,7 +62,14 @@ export const Header = ({
         </Typography>
       </Box>
 
-      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1.5 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 1.5,
+        }}
+      >
         <Select
           value={networkId}
           onChange={(_, value) => {
@@ -74,6 +86,7 @@ export const Header = ({
         </Select>
 
         <radix-connect-button></radix-connect-button>
+        <radix-dapps-dropdown></radix-dapps-dropdown>
       </Box>
     </Layout.Header>
   )

package.json

@@ -70,6 +70,7 @@
     "@mui/joy": "^5.0.0-alpha.76",
     "@mui/material": "^5.12.1",
     "@radixdlt/radix-engine-toolkit": "0.4.0",
+    "@radixdlt/dapps-dropdown": "^0.2.0",
     "@radixdlt/rola": "^0.3.1-rcnet-v3.1.1",
     "@types/elliptic": "^6.4.14",
     "@types/jest": "^29.4.0",