From 271d14aeb9a8c68bd47e7e259b596e14b38e75e0 Mon Sep 17 00:00:00 2001
From: anthony2399 <anthonykhoury23991@hotmail.com>
Date: Mon, 18 Nov 2024 15:11:51 +0200
Subject: [PATCH] feat: finalized UI for poap plugin, missing final decision
 for api key handling

---
 package.json                                  |  1 +
 .../src/lib/components/PoapCard/index.tsx     | 53 +++++++----
 .../src/lib/hooks/usePoaps/index.ts           |  2 +-
 .../ui/src/lib/ui/ToolTip/ToolTip.module.css  | 88 +++++++++++++++++++
 .../@justweb3/ui/src/lib/ui/ToolTip/index.tsx | 27 ++++++
 packages/@justweb3/ui/src/lib/ui/index.ts     | 15 ++--
 yarn.lock                                     | 50 +++++++++++
 7 files changed, 212 insertions(+), 24 deletions(-)
 create mode 100644 packages/@justweb3/ui/src/lib/ui/ToolTip/ToolTip.module.css
 create mode 100644 packages/@justweb3/ui/src/lib/ui/ToolTip/index.tsx

diff --git a/package.json b/package.json
index c19786e4..57eae960 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@rainbow-me/rainbowkit": "^2.0.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
diff --git a/packages/@justweb3/poap-plugin/src/lib/components/PoapCard/index.tsx b/packages/@justweb3/poap-plugin/src/lib/components/PoapCard/index.tsx
index f01ecc75..d0ad1888 100644
--- a/packages/@justweb3/poap-plugin/src/lib/components/PoapCard/index.tsx
+++ b/packages/@justweb3/poap-plugin/src/lib/components/PoapCard/index.tsx
@@ -1,29 +1,50 @@
+import { P, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@justweb3/ui';
 import React from 'react';
 import { POAP } from '../../hooks';
 
 interface POAPCardProps {
-    poap: POAP;
+  poap: POAP;
 }
 
 const POAPCard: React.FC<POAPCardProps> = ({ poap }) => {
-    return (
-        <a href={`https://collectors.poap.xyz/token/${poap.event.id}`} target="_blank" rel="noopener noreferrer">
+  return (
+    <a href={`https://collectors.poap.xyz/token/${poap.event.id}`} target="_blank" rel="noopener noreferrer">
+      <TooltipProvider delayDuration={100}>
+        <Tooltip>
+          <TooltipTrigger asChild>
             <img
-                src={poap.event.image_url}
-                alt={poap.event.name}
-                width={60}
-                height={60}
-                style={{
-                    background: `url(${poap.event.image_url})`,
-                    outline: '4px solid var(--justweb3-foreground-color-4)',
-                    borderRadius: '50%',
-                    boxShadow: '0px 0px 10px 0px var(--justweb3-foreground-color-2)',
-                    cursor: 'pointer'
-                }}
+              src={poap.event.image_url}
+              alt={poap.event.name}
+              width={60}
+              height={60}
+              style={{
+                background: `url(${poap.event.image_url})`,
+                outline: '4px solid var(--justweb3-foreground-color-4)',
+                borderRadius: '50%',
+                boxShadow: '0px 0px 10px 0px var(--justweb3-foreground-color-2)',
+                cursor: 'pointer'
+              }}
             />
-        </a>
+          </TooltipTrigger>
+          <TooltipContent style={{ zIndex: 9999 }}>
+            <P style={{
+              fontSize: '9px',
+              fontWeight: 900,
+              lineHeight: '150%',
+              color: 'inherit'
+            }}>#{poap.event.id}</P>
+            <P style={{
+              fontSize: '10px',
+              fontWeight: 400,
+              lineHeight: '150%',
+              color: 'inherit'
+            }}>{poap.event.name}</P>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </a>
 
-    );
+  );
 };
 
 export default POAPCard;
diff --git a/packages/@justweb3/poap-plugin/src/lib/hooks/usePoaps/index.ts b/packages/@justweb3/poap-plugin/src/lib/hooks/usePoaps/index.ts
index d88675cb..85e71cf5 100644
--- a/packages/@justweb3/poap-plugin/src/lib/hooks/usePoaps/index.ts
+++ b/packages/@justweb3/poap-plugin/src/lib/hooks/usePoaps/index.ts
@@ -35,7 +35,7 @@ export const getPoaps = async (address: string) => {
     {
       headers: {
         Accept: 'application/json',
-        // TODO: apikey
+        // TODO: handle api key functionality
         'x-api-key': '',
       },
     }
diff --git a/packages/@justweb3/ui/src/lib/ui/ToolTip/ToolTip.module.css b/packages/@justweb3/ui/src/lib/ui/ToolTip/ToolTip.module.css
new file mode 100644
index 00000000..afd1fd7e
--- /dev/null
+++ b/packages/@justweb3/ui/src/lib/ui/ToolTip/ToolTip.module.css
@@ -0,0 +1,88 @@
+.tooltipContent {
+  z-index: 190;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  background-color: var(--justweb3-primary-color);
+  padding: 4px;
+  font-size: 10px;
+  color: var(--justweb3-background-color);
+  animation: fadeInZoom 0.2s ease-in-out;
+}
+
+.tooltipContent[data-state='closed'] {
+  animation: fadeOutZoom 0.2s ease-in-out;
+}
+
+.tooltipContent[data-side='top'] {
+  animation: slideInFromBottom 0.2s ease-in-out;
+}
+
+.tooltipContent[data-side='bottom'] {
+  animation: slideInFromTop 0.2s ease-in-out;
+}
+
+.tooltipContent[data-side='left'] {
+  animation: slideInFromRight 0.2s ease-in-out;
+}
+
+.tooltipContent[data-side='right'] {
+  animation: slideInFromLeft 0.2s ease-in-out;
+}
+
+@keyframes fadeInZoom {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeOutZoom {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slideInFromTop {
+  from {
+    transform: translateY(-8px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    transform: translateY(8px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-8px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(8px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
diff --git a/packages/@justweb3/ui/src/lib/ui/ToolTip/index.tsx b/packages/@justweb3/ui/src/lib/ui/ToolTip/index.tsx
new file mode 100644
index 00000000..380d6ddd
--- /dev/null
+++ b/packages/@justweb3/ui/src/lib/ui/ToolTip/index.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import styles from "./ToolTip.module.css";
+import clsx from "clsx";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ sideOffset = 4, className, ...props }, ref) => (
+    <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={clsx(styles.tooltipContent, className)}
+            {...props}
+        />
+    </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/@justweb3/ui/src/lib/ui/index.ts b/packages/@justweb3/ui/src/lib/ui/index.ts
index 0f19adc3..5be7fdc5 100644
--- a/packages/@justweb3/ui/src/lib/ui/index.ts
+++ b/packages/@justweb3/ui/src/lib/ui/index.ts
@@ -1,15 +1,16 @@
 export * from './Avatar';
-export * from './Button';
-export * from './Divider';
-export * from './Input';
 export * from './Badge';
+export * from './Button';
+export * from './Carousel';
 export * from './Dialog';
+export * from './Divider';
 export * from './Dropdown';
-export * from './Text';
+export * from './Form';
+export * from './Input';
 export * from './LoadingSpinner';
-export * from './Carousel';
+export * from './OTPInput';
 export * from './Popover';
 export * from './Separator';
-export * from './OTPInput';
-export * from './Form';
 export * from './Tabs';
+export * from './Text';
+export * from './ToolTip';
diff --git a/yarn.lock b/yarn.lock
index a54d1cc5..02b6f149 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7545,6 +7545,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-tooltip@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "@radix-ui/react-tooltip@npm:1.1.4"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.0"
+    "@radix-ui/react-portal": "npm:1.1.2"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-visually-hidden": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/721cfb0bf34e74af5a58d89a73e087522517b9502fb7ae9d1dc99137d4952f2bfd1696001e17aa83dfb533c39b4333030149562ebfe62d31238a1a2995bc6bd6
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
@@ -7644,6 +7674,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-visually-hidden@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-visually-hidden@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/db138dd5f3c94958a9f836740d4408c89c4a73e770eaba5ead921e69b3c0d196c5cd58323d82829a9bc05a74873c299195dfd8366b9808e53a9a3dbca5a1e5fe
+  languageName: node
+  linkType: hard
+
 "@radix-ui/rect@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/rect@npm:1.1.0"
@@ -26186,6 +26235,7 @@ __metadata:
     "@radix-ui/react-radio-group": "npm:^1.2.1"
     "@radix-ui/react-switch": "npm:^1.1.1"
     "@radix-ui/react-tabs": "npm:^1.1.1"
+    "@radix-ui/react-tooltip": "npm:^1.1.4"
     "@rainbow-me/rainbowkit": "npm:^2.0.2"
     "@rollup/plugin-commonjs": "npm:^25.0.7"
     "@rollup/plugin-json": "npm:^6.1.0"