From 23f4cb75b58c8a11b844fd5e14c13213efbd4b4a Mon Sep 17 00:00:00 2001
From: SamueleA <batonenbois@gmail.com>
Date: Fri, 4 Aug 2023 12:32:21 -0400
Subject: [PATCH] added popover

---
 packages/wallet/package.json                  |  1 +
 packages/wallet/src/shared/HomeHeader.tsx     | 59 --------------
 .../components/AccountInformation.tsx         | 53 +++++++++++++
 .../components/WalletDropdownContent.tsx      | 27 +++++++
 .../wallet/src/shared/HomeHeader/index.tsx    | 59 ++++++++++++++
 pnpm-lock.yaml                                | 76 ++++++++++++++-----
 6 files changed, 197 insertions(+), 78 deletions(-)
 delete mode 100644 packages/wallet/src/shared/HomeHeader.tsx
 create mode 100644 packages/wallet/src/shared/HomeHeader/components/AccountInformation.tsx
 create mode 100644 packages/wallet/src/shared/HomeHeader/components/WalletDropdownContent.tsx
 create mode 100644 packages/wallet/src/shared/HomeHeader/index.tsx

diff --git a/packages/wallet/package.json b/packages/wallet/package.json
index 4d37833e..b0e81047 100644
--- a/packages/wallet/package.json
+++ b/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"
diff --git a/packages/wallet/src/shared/HomeHeader.tsx b/packages/wallet/src/shared/HomeHeader.tsx
deleted file mode 100644
index 0c96a9b9..00000000
--- a/packages/wallet/src/shared/HomeHeader.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React 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'
-
-export const HomeHeader = () => {
-  const { address } = useAccount()
-
-  const onClickSearch = () => {
-    console.log('clicked search')
-  }
-
-  const onClickAccount = () => {
-    console.log('clicked account')
-  }
-
-  return (
-    <>
-      <Box background="backgroundPrimary" zIndex="20" position="fixed" width="full">
-        <IconButton
-          onClick={onClickSearch}
-          icon={SearchIcon}
-          style={{ float: 'left', marginTop: '8px', backgroundColor: vars.colors.backgroundPrimary }}
-        />
-        <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: '-44px'
-                }}
-              >
-                <GradientAvatar size="sm" address={address || ''} />
-                <Text color="text100" fontWeight="medium" variant="normal">
-                  {formatAddress(address || '')}
-                </Text>
-                <ChevronDownIcon />
-              </Box>
-            </Box>
-        </Box>
-      </Box>
-    </>
-  )
-}
\ No newline at end of file
diff --git a/packages/wallet/src/shared/HomeHeader/components/AccountInformation.tsx b/packages/wallet/src/shared/HomeHeader/components/AccountInformation.tsx
new file mode 100644
index 00000000..c970803d
--- /dev/null
+++ b/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>
+  )
+})
\ No newline at end of file
diff --git a/packages/wallet/src/shared/HomeHeader/components/WalletDropdownContent.tsx b/packages/wallet/src/shared/HomeHeader/components/WalletDropdownContent.tsx
new file mode 100644
index 00000000..307004d6
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file
diff --git a/packages/wallet/src/shared/HomeHeader/index.tsx b/packages/wallet/src/shared/HomeHeader/index.tsx
new file mode 100644
index 00000000..836f47e5
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8db82a2..45909918 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -348,6 +348,9 @@ importers:
       '@0xsequence/network':
         specifier: ^1.1.0
         version: 1.1.0(ethers@5.7.2)
+      '@radix-ui/react-popover':
+        specifier: ^1.0.6
+        version: 1.0.6(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
       '@tanstack/react-query':
         specifier: ^4.29.5
         version: 4.29.5(react-dom@18.2.0)(react@18.2.0)
@@ -2215,7 +2218,7 @@ packages:
   /@changesets/apply-release-plan@6.1.3:
     resolution: {integrity: sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/config': 2.3.0
       '@changesets/get-version-range-type': 0.3.2
       '@changesets/git': 2.0.0
@@ -2233,7 +2236,7 @@ packages:
   /@changesets/assemble-release-plan@5.2.3:
     resolution: {integrity: sha512-g7EVZCmnWz3zMBAdrcKhid4hkHT+Ft1n0mLussFMcB1dE2zCuwcvGoy9ec3yOgPGF4hoMtgHaMIk3T3TBdvU9g==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/errors': 0.1.4
       '@changesets/get-dependents-graph': 1.3.5
       '@changesets/types': 5.2.1
@@ -2336,7 +2339,7 @@ packages:
   /@changesets/get-release-plan@3.0.16:
     resolution: {integrity: sha512-OpP9QILpBp1bY2YNIKFzwigKh7Qe9KizRsZomzLe6pK8IUo8onkAAVUD8+JRKSr8R7d4+JRuQrfSSNlEwKyPYg==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/assemble-release-plan': 5.2.3
       '@changesets/config': 2.3.0
       '@changesets/pre': 1.0.14
@@ -2352,7 +2355,7 @@ packages:
   /@changesets/git@1.5.0:
     resolution: {integrity: sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/errors': 0.1.4
       '@changesets/types': 5.2.1
       '@manypkg/get-packages': 1.1.3
@@ -2363,7 +2366,7 @@ packages:
   /@changesets/git@2.0.0:
     resolution: {integrity: sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/errors': 0.1.4
       '@changesets/types': 5.2.1
       '@manypkg/get-packages': 1.1.3
@@ -2388,7 +2391,7 @@ packages:
   /@changesets/pre@1.0.14:
     resolution: {integrity: sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/errors': 0.1.4
       '@changesets/types': 5.2.1
       '@manypkg/get-packages': 1.1.3
@@ -2398,7 +2401,7 @@ packages:
   /@changesets/read@0.5.9:
     resolution: {integrity: sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/git': 2.0.0
       '@changesets/logger': 0.0.5
       '@changesets/parse': 0.3.16
@@ -2419,7 +2422,7 @@ packages:
   /@changesets/write@0.2.3:
     resolution: {integrity: sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/types': 5.2.1
       fs-extra: 7.0.1
       human-id: 1.0.2
@@ -2620,7 +2623,7 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.21.4
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.2
@@ -3617,7 +3620,7 @@ packages:
   /@manypkg/find-root@1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@types/node': 12.20.55
       find-up: 4.1.0
       fs-extra: 8.1.0
@@ -3626,7 +3629,7 @@ packages:
   /@manypkg/get-packages@1.1.3:
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@changesets/types': 4.1.0
       '@manypkg/find-root': 1.1.0
       fs-extra: 8.1.0
@@ -4466,6 +4469,41 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.0.27)(react@18.2.0)
 
+  /@radix-ui/react-popover@1.0.6(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.27)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.0.27)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.0.27)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.0.27)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.0.27)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.27)(react@18.2.0)
+      '@types/react': 18.0.27
+      '@types/react-dom': 18.0.10
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.0.27)(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-popper@1.1.2(@types/react-dom@18.0.10)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
     peerDependencies:
@@ -5170,7 +5208,7 @@ packages:
   /@solana/web3.js@1.76.0:
     resolution: {integrity: sha512-aJtF/nTs+9St+KtTK/wgVJ+SinfjYzn+3w1ygYIPw8ST6LH+qHBn8XkodgDTwlv/xzNkaVz1kkUDOZ8BPXyZWA==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@noble/curves': 1.0.0
       '@noble/hashes': 1.3.0
       '@solana/buffer-layout': 4.0.1
@@ -5453,7 +5491,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@babel/code-frame': 7.21.4
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@types/aria-query': 5.0.1
       aria-query: 5.1.3
       chalk: 4.1.2
@@ -7373,7 +7411,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       cosmiconfig: 7.1.0
       resolve: 1.22.2
     dev: false
@@ -7482,7 +7520,7 @@ packages:
       '@babel/preset-env': 7.20.2(@babel/core@7.20.2)
       '@babel/preset-react': 7.18.6(@babel/core@7.20.2)
       '@babel/preset-typescript': 7.18.6(@babel/core@7.20.2)
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       babel-plugin-macros: 3.1.0
       babel-plugin-transform-react-remove-prop-types: 0.4.24
     transitivePeerDependencies:
@@ -12183,7 +12221,7 @@ packages:
   /media-query-parser@2.0.2:
     resolution: {integrity: sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
 
   /media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
@@ -14399,7 +14437,7 @@ packages:
   /regenerator-transform@0.15.1:
     resolution: {integrity: sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
 
   /regex-parser@2.2.11:
     resolution: {integrity: sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==}
@@ -14607,7 +14645,7 @@ packages:
   /rpc-websockets@7.5.1:
     resolution: {integrity: sha512-kGFkeTsmd37pHPMaHIgN1LVKXMi0JD782v4Ds9ZKtLlwdTKjn+CxM9A9/gLT2LaOuEcEFGL98h1QWQtlOIdW0w==}
     dependencies:
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       eventemitter3: 4.0.7
       uuid: 8.3.2
       ws: 8.13.0(bufferutil@4.0.7)(utf-8-validate@5.0.10)
@@ -16441,7 +16479,7 @@ packages:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0)
       '@babel/core': 7.20.2
       '@babel/preset-env': 7.20.2(@babel/core@7.20.2)
-      '@babel/runtime': 7.20.1
+      '@babel/runtime': 7.21.5
       '@rollup/plugin-babel': 5.3.1(@babel/core@7.20.2)(rollup@2.79.1)
       '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)