Merge pull request #131 from radixdlt/add-dapps-dropdown

feat: add dapps dropdown
radixdlt · Sep 21, 2023 · c622751 · c622751
2 parents 5419e1e + 078a737
commit c622751
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/examples/components/Layout.tsx b/examples/components/Layout.tsx
@@ -51,6 +51,7 @@ function Header(props: BoxProps) {
       sx={[
         {
           p: 2,
+          pr: 3,
           gap: 2,
           bgcolor: 'background.surface',
           display: 'flex',

diff --git a/examples/layouts/Header.tsx b/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>
   )

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,6 +51,7 @@ function Header(props: BoxProps) { @@
           sx={[
             {
               p: 2,
+              pr: 3,
               gap: 2,
               bgcolor: 'background.surface',
               display: 'flex',
@@ Expand Down @@