added popover

packages/wallet/package.json

@@ -18,6 +18,7 @@
     "@0xsequence/indexer": "^1.1.0",
     "@0xsequence/metadata": "^1.1.0",
     "@0xsequence/network": "^1.1.0",
+    "@radix-ui/react-popover": "^1.0.6",
     "@tanstack/react-query": "^4.29.5",
     "lodash": "^4.17.21",
     "react-copy-to-clipboard": "^5.1.0"

packages/wallet/src/shared/HomeHeader/components/AccountInformation.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react'
+
+import {
+  Box,
+  IconButton,
+  Text,
+  GradientAvatar,
+  SearchIcon,
+  ChevronDownIcon,
+  vars,
+} from '@0xsequence/design-system'
+
+import { useAccount } from 'wagmi'
+
+import { formatAddress } from '../../../utils'
+import * as styles from '../../styles.css'
+
+interface AccountInformationProps {
+  onClickAccount: () => void
+}
+
+export const AccountInformation = forwardRef(({
+  onClickAccount,
+}: AccountInformationProps, ref) => {
+  const { address } = useAccount()
+
+
+  return (
+    <Box gap="2" alignItems="center" style={{ height: "60px"}}>
+      <Box width="full" flexDirection="column" alignItems="center" justifyContent="center" >
+        <Box
+          onClick={onClickAccount}
+          gap="2"
+          alignItems="center"
+          justifyContent="center"
+          className={styles.clickable}
+          position="relative"
+          style={{
+            left: '-22px'
+          }}
+          // @ts-ignore-next-line
+          ref={ref}
+        >
+          <GradientAvatar size="sm" address={address || ''} />
+          <Text color="text100" fontWeight="medium" variant="normal">
+            {formatAddress(address || '')}
+          </Text>
+          <ChevronDownIcon />
+        </Box>
+      </Box>
+    </Box>
+  )
+})

packages/wallet/src/shared/HomeHeader/components/WalletDropdownContent.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react'
+import { Box, Button } from '@0xsequence/design-system'
+
+export const WalletDropdownContent = () => {
+
+  // Todo add forward ref and fix animation
+
+  return (
+    <Box
+      zIndex="30"
+      background="buttonGlass"
+      borderRadius="md"
+      style={{
+        position: 'relative',
+        pointerEvents: 'auto',
+        width: '370px',
+        height: '400px',
+        backdropFilter: 'blur(12.5px)',
+        top: '16px',
+        left: '16px',
+      }}
+    >
+      stuff goes here...
+      <Button label="click" onClick={() => console.log('click')} />
+    </Box>
+  )
+}

packages/wallet/src/shared/HomeHeader/index.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useRef, useEffect } from 'react'
+import {
+  Box,
+  Button,
+  IconButton,
+  SearchIcon,
+  vars,
+} from '@0xsequence/design-system'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { AnimatePresence, motion } from 'framer-motion'
+
+import { AccountInformation } from './components/AccountInformation'
+import { WalletDropdownContent } from './components/WalletDropdownContent'
+
+
+export const HomeHeader = () => {
+  const [openWalletDropdown, setOpenWalletDropdown] = useState<boolean>(false)
+
+  const onClickAccount = () => {
+    setOpenWalletDropdown(true)
+  }
+
+  const onClickSearch = () => {
+    console.log('clicked search')
+  }
+
+  return (
+    <Box as={motion.div}>
+      <PopoverPrimitive.Root open={openWalletDropdown}>
+        <PopoverPrimitive.Anchor />
+        <Box background="backgroundPrimary" zIndex="20" position="fixed" width="full">
+          <IconButton
+            onClick={onClickSearch}
+            icon={SearchIcon}
+            style={{ float: 'left', marginTop: '8px', backgroundColor: vars.colors.backgroundPrimary }}
+          />
+          <PopoverPrimitive.Trigger asChild>
+            <AccountInformation onClickAccount={onClickAccount} />
+          </PopoverPrimitive.Trigger>
+        </Box>
+
+        <AnimatePresence>
+          {openWalletDropdown && (
+          <PopoverPrimitive.Portal
+          >
+            <PopoverPrimitive.Content
+              asChild
+              side="bottom"
+              align="start"
+            >
+              <WalletDropdownContent />
+            </PopoverPrimitive.Content>
+          </PopoverPrimitive.Portal>
+        )}
+      </AnimatePresence>
+      </PopoverPrimitive.Root>
+    </Box>
+  )
+}