Add dropdown to component library and update connect button with addr…

…ess (#1053) * Add dropdown * Change to disconnect * Add mobile check * Small button * Update disclosure * Update src/components/dropdown.tsx Co-authored-by: Alex <[email protected]> --------- Co-authored-by: Chase Fleming <[email protected]> Co-authored-by: Alex <[email protected]>
onflow · Dec 17, 2024 · 1b28064 · 1b28064
1 parent bfffa7c
commit 1b28064
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@headlessui/react": "1.7.13",
+    "@headlessui/react": "^2.2.0",
     "@mdx-js/react": "^3.1.0",
     "@onflow/fcl": "^1.13.1",
     "@tailwindcss/aspect-ratio": "0.4.2",

diff --git a/src/components/connect-button.tsx b/src/components/connect-button.tsx
@@ -1,15 +1,34 @@
 import React from 'react';
 import { useCurrentUser } from '@site/src/hooks/use-current-user';
 import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
+import Dropdown from '@site/src/components/dropdown';
+import { useIsMobile } from '@site/src/hooks/use-is-mobile';
+
+const shortenAddress = (address: string, isMobile: boolean) => {
+  if (!address) return '';
+  return isMobile ? `${address.slice(0, 4)}...${address.slice(-3)}` : address;
+};
 
 const ConnectButton: React.FC = () => {
   const { user, logIn, logOut } = useCurrentUser();
+  const isMobile = useIsMobile();
+
+  if (!user.loggedIn) {
+    return (
+      <Button size="sm" className="mr-2" onClick={logIn}>
+        Connect
+      </Button>
+    );
+  }
+
+  const dropdownItems = [
+    { label: 'Disconnect', onClick: logOut },
+  ];
+
+  const fullAddress = user.addr ?? 'Unknown';
+  const displayAddress = shortenAddress(fullAddress, isMobile);
 
-  return (
-    <Button size="sm" className="mr-2" onClick={user.loggedIn ? logOut : logIn}>
-      {user.loggedIn ? 'Disconnect' : 'Connect'}
-    </Button>
-  );
+  return <Dropdown buttonLabel={displayAddress} items={dropdownItems} />;
 };
 
 export default ConnectButton;
diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import clsx from 'clsx';
+
+const BASE_CLASSES =
+  'inline-flex items-center justify-center font-semibold text-center border transition duration-200 cursor-pointer';
+const VARIANT_CLASSES = 'bg-black text-white hover:bg-gray-800 active:bg-gray-900';
+const MENU_CLASSES =
+  'text-white bg-black border border-gray-700 hover:bg-gray-800 active:bg-gray-900 transition duration-200';
+
+export interface DropdownItem {
+  label: string;
+  onClick: () => void;
+}
+
+interface DropdownProps {
+  buttonLabel: string;
+  items: DropdownItem[];
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, items }) => {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      {/* Button */}
+      <MenuButton
+        className={clsx(BASE_CLASSES, VARIANT_CLASSES, 'px-4 py-2 rounded-md text-sm')}
+      >
+        {buttonLabel}
+      </MenuButton>
+
+      {/* Dropdown Menu */}
+      <MenuItems
+        anchor="bottom end"
+        className="absolute right-0 mt-1 w-52 rounded-md shadow-lg focus:outline-none z-[999]"
+        style={{ position: 'absolute', zIndex: 999, top: '100%' }}
+      >
+        {items.map((item, index) => (
+          <MenuItem key={`${index}${item.label}`}>
+            {({ active }) => (
+              <button
+                onClick={item.onClick}
+                className={clsx(
+                  MENU_CLASSES,
+                  'w-full px-4 py-2 cursor-pointer',
+                  active && 'bg-gray-800',
+                  index === 0 && 'rounded-t-md',
+                  index === items.length - 1 && 'rounded-b-md'
+                )}
+              >
+                {item.label}
+              </button>
+            )}
+          </MenuItem>
+        ))}
+      </MenuItems>
+    </Menu>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
diff --git a/src/hooks/use-current-user.ts b/src/hooks/use-current-user.ts
@@ -11,6 +11,7 @@ interface FlowUser {
 
 interface UseCurrentUserReturn {
   user: FlowUser;
+  addr: string;
   logIn: () => Promise<void>;
   logOut: () => void;
 }

diff --git a/src/hooks/use-is-mobile.tsx b/src/hooks/use-is-mobile.tsx
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+export const useIsMobile = (breakpoint: number = 640) => {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < breakpoint);
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [breakpoint]);
+
+  return isMobile;
+};
diff --git a/src/ui/design-system/src/lib/Components/SporksCard/index.tsx b/src/ui/design-system/src/lib/Components/SporksCard/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Disclosure } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import clsx from 'clsx'
 import CopyIcon from '../../../../images/action/copy.svg'
 import ChevronDownIcon from '../../../../images/arrows/chevron-down.svg'
@@ -54,7 +54,7 @@ const Spork = ({ heading, timestamp, sporkMetadata }: SporksCardProps) => {
         return (
           <>
             <div className={cardStyles}>
-              <Disclosure.Button className="flex w-full cursor-pointer justify-between px-2 py-6 ease-in">
+              <DisclosureButton className="flex w-full cursor-pointer justify-between px-2 py-6 ease-in">
                 <div className="flex items-center">
                   <span className="pr-4 text-2xl font-bold">{heading}</span>
                   <span className="border-l border-primary-gray-100 pl-4 text-primary-gray-300 dark:border-primary-gray-400">
@@ -64,9 +64,9 @@ const Spork = ({ heading, timestamp, sporkMetadata }: SporksCardProps) => {
                 <div className="dark:text-primary-gray-200">
                   {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
                 </div>
-              </Disclosure.Button>
+              </DisclosureButton>
             </div>
-            <Disclosure.Panel>
+            <DisclosurePanel>
               <div className="flex-col pb-4">
                 {accessNode && (
                   <CardItem label="Access Node" data={accessNode} />
@@ -77,7 +77,7 @@ const Spork = ({ heading, timestamp, sporkMetadata }: SporksCardProps) => {
                 <CardItem label="Root State Commit" data={rootStateCommit} />
                 <CardItem label="Git Commit" data={gitCommit} />
               </div>
-            </Disclosure.Panel>
+            </DisclosurePanel>
           </>
         )
       }}

diff --git a/yarn.lock b/yarn.lock
@@ -3144,13 +3144,22 @@
   dependencies:
     "@floating-ui/dom" "^1.2.1"
 
-"@floating-ui/react-dom@^2.0.0":
+"@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
   integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
+"@floating-ui/react@^0.26.16":
+  version "0.26.28"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
+  integrity sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.2"
+    "@floating-ui/utils" "^0.2.8"
+    tabbable "^6.0.0"
+
 "@floating-ui/utils@^0.1.3":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
@@ -3199,13 +3208,6 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@headlessui/[email protected]":
-  version "1.7.13"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.13.tgz#fd150b394954e9f1d86ed2340cffd1217d6e7628"
-  integrity sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==
-  dependencies:
-    client-only "^0.0.1"
-
 "@headlessui/react@^1.7.18":
   version "1.7.19"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"
@@ -3214,6 +3216,16 @@
     "@tanstack/react-virtual" "^3.0.0-beta.60"
     client-only "^0.0.1"
 
+"@headlessui/react@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-2.2.0.tgz#a8e32f0899862849a1ce1615fa280e7891431ab7"
+  integrity sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==
+  dependencies:
+    "@floating-ui/react" "^0.26.16"
+    "@react-aria/focus" "^3.17.1"
+    "@react-aria/interactions" "^3.21.3"
+    "@tanstack/react-virtual" "^3.8.1"
+
 "@headlessui/tailwindcss@^0.2.0":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@headlessui/tailwindcss/-/tailwindcss-0.2.1.tgz#1becc201f69358a40e08bd676acc234b2cabe6e4"
@@ -4802,6 +4814,57 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
   integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
 
+"@react-aria/focus@^3.17.1":
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.19.0.tgz#82b9a5b83f023b943a7970df3d059f49d61df05d"
+  integrity sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==
+  dependencies:
+    "@react-aria/interactions" "^3.22.5"
+    "@react-aria/utils" "^3.26.0"
+    "@react-types/shared" "^3.26.0"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-aria/interactions@^3.21.3", "@react-aria/interactions@^3.22.5":
+  version "3.22.5"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.22.5.tgz#9cd8c93b8b6988f1d315d3efb450119d1432bbb8"
+  integrity sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==
+  dependencies:
+    "@react-aria/ssr" "^3.9.7"
+    "@react-aria/utils" "^3.26.0"
+    "@react-types/shared" "^3.26.0"
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/ssr@^3.9.7":
+  version "3.9.7"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.7.tgz#d89d129f7bbc5148657e6c952ac31c9353183770"
+  integrity sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/utils@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.26.0.tgz#833cbfa33e75d15835b757791b3f754432d2f948"
+  integrity sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==
+  dependencies:
+    "@react-aria/ssr" "^3.9.7"
+    "@react-stately/utils" "^3.10.5"
+    "@react-types/shared" "^3.26.0"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-stately/utils@^3.10.5":
+  version "3.10.5"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.5.tgz#47bb91cd5afd1bafe39353614e5e281b818ebccc"
+  integrity sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-types/shared@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.26.0.tgz#21a8b579f0097ee78de18e3e580421ced89e4c8c"
+  integrity sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==
+
 "@redocly/ajv@^8.11.0":
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/@redocly/ajv/-/ajv-8.11.0.tgz#2fad322888dc0113af026e08fceb3e71aae495ae"
@@ -5277,6 +5340,13 @@
     "@svgr/plugin-jsx" "8.1.0"
     "@svgr/plugin-svgo" "8.1.0"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
 "@szmarczak/http-timer@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a"
@@ -5325,6 +5395,13 @@
   dependencies:
     "@tanstack/virtual-core" "3.10.8"
 
+"@tanstack/react-virtual@^3.8.1":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.11.2.tgz#d6b9bd999c181f0a2edce270c87a2febead04322"
+  integrity sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==
+  dependencies:
+    "@tanstack/virtual-core" "3.11.2"
+
 "@tanstack/[email protected]":
   version "8.20.5"
   resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
@@ -5335,6 +5412,11 @@
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz#975446a667755222f62884c19e5c3c66d959b8b4"
   integrity sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==
 
+"@tanstack/[email protected]":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz#00409e743ac4eea9afe5b7708594d5fcebb00212"
+  integrity sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==
+
 "@tokenizer/token@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276"
@@ -16432,6 +16514,11 @@ system-architecture@^0.1.0:
   resolved "https://registry.yarnpkg.com/system-architecture/-/system-architecture-0.1.0.tgz#71012b3ac141427d97c67c56bc7921af6bff122d"
   integrity sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==
 
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tailwind-merge@^2.2.1:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.4.tgz#4bf574e81fa061adeceba099ae4df56edcee78d1"
@@ -16770,6 +16857,11 @@ tslib@^2.0.0, tslib@^2.3.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
   integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==
 
+tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"