feat: credits UI

package.json

@@ -11,14 +11,14 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@aleph-front/core": "^1.29.1",
+    "@aleph-front/core": "^1.30.2",
     "@aleph-sdk/account": "^1.2.0",
     "@aleph-sdk/avalanche": "^1.5.0",
     "@aleph-sdk/client": "^1.4.5",
     "@aleph-sdk/core": "^1.6.2",
     "@aleph-sdk/ethereum": "^1.5.0",
     "@aleph-sdk/evm": "^1.6.2",
-    "@aleph-sdk/message": "^1.6.2",
+    "@aleph-sdk/message": "^1.6.3",
     "@aleph-sdk/solana": "^1.6.2",
     "@aleph-sdk/superfluid": "^1.4.5",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",

src/components/common/BorderBox/styles.tsx

@@ -13,6 +13,8 @@ export const BorderBox = styled.div<{
       backdrop-filter: blur(50px);
       color: ${theme.color.text}b3;
 
+      background: linear-gradient(90deg, ${g0}1a 0%, ${g1}1a 100%);
+
       &::before {
         content: '';
         position: absolute;
@@ -33,6 +35,7 @@ export const BorderBox = styled.div<{
         -webkit-mask-composite: exclude;
         mask-composite: exclude;
         -webkit-mask-composite: xor;
+
         background-image: linear-gradient(90deg, ${g0} 0%, ${g1} 100%);
       }
     `

src/components/common/ButtonLink/cmp.tsx

@@ -1,7 +1,8 @@
-import { memo } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import { Button } from '@aleph-front/core'
 import { ButtonLinkProps } from './types'
+import ResponsiveTooltip from '../ResponsiveTooltip'
 
 /**
  * A wrapper for the nextjs links that are styled as buttons
@@ -14,9 +15,19 @@ export const ButtonLink = ({
   kind = 'default',
   size = 'md',
   disabled,
+  disabledMessage,
+  tooltipPosition,
   children,
   ...rest
 }: ButtonLinkProps) => {
+  const targetRef = useRef<HTMLButtonElement>(null)
+
+  // Wait until after client-side hydration to show tooltip
+  const [renderTooltip, setRenderTooltip] = useState(false)
+  useEffect(() => {
+    setRenderTooltip(true)
+  }, [])
+
   const buttonNode = (
     <Button
       {...{
@@ -26,6 +37,7 @@ export const ButtonLink = ({
         kind,
         size,
         disabled,
+        ref: targetRef,
         ...rest,
       }}
     >
@@ -38,7 +50,17 @@ export const ButtonLink = ({
       {buttonNode}
     </Link>
   ) : (
-    buttonNode
+    <span>
+      {buttonNode}
+      {renderTooltip && disabledMessage && (
+        <ResponsiveTooltip
+          my={tooltipPosition?.my || 'bottom-center'}
+          at={tooltipPosition?.at || 'top-right'}
+          targetRef={targetRef}
+          content={disabledMessage}
+        />
+      )}
+    </span>
   )
 }
 ButtonLink.displayName = 'ButtonLink'

src/components/common/ButtonLink/types.ts

@@ -1,9 +1,12 @@
-import { ButtonProps } from '@aleph-front/core'
+import { ButtonProps, TooltipProps } from '@aleph-front/core'
 import { AnchorHTMLAttributes, ReactNode } from 'react'
 
 export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> &
   Omit<ButtonProps, 'variant' | 'color' | 'kind' | 'size'> &
   Partial<Pick<ButtonProps, 'variant' | 'color' | 'kind' | 'size'>> & {
     href: string
     children: ReactNode
+  } & {
+    disabledMessage?: ReactNode
+    tooltipPosition?: Pick<TooltipProps, 'my' | 'at'>
   }

src/components/common/CompositeTitle/cmp.tsx

@@ -1,13 +1,24 @@
-import { memo } from 'react'
-import { CompositeTitle, CompositeTitleProps } from '@aleph-front/core'
+import { ReactNode } from 'react'
+import {
+  CompositeTitle,
+  CompositeTitleProps,
+  TextGradient,
+} from '@aleph-front/core'
 
-export const SectionTitle = (props: CompositeTitleProps) => {
+export const CompositeSectionTitle = (props: CompositeTitleProps) => {
   return (
     <CompositeTitle
       {...{ as: 'h2', color: 'main0', numberColor: 'main0', ...props }}
     />
   )
 }
-SectionTitle.displayName = 'SectionTitle'
+CompositeSectionTitle.displayName = 'CompositeSectionTitle'
 
-export default memo(SectionTitle) as typeof SectionTitle
+export const SectionTitle = ({ children }: { children: ReactNode }) => {
+  return (
+    <TextGradient as="h2" color="main0" type="h5">
+      {children}
+    </TextGradient>
+  )
+}
+SectionTitle.displayName = 'SectionTitle'

src/components/common/CompositeTitle/index.ts

@@ -1 +1 @@
-export { default, default as SectionTitle } from './cmp'
+export { SectionTitle, CompositeSectionTitle } from './cmp'

src/components/common/DetailsMenuButton/cmp.tsx

@@ -0,0 +1,93 @@
+import {
+  memo,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { Button, Icon, Tooltip } from '@aleph-front/core'
+import Link from 'next/link'
+
+type MenuItem = {
+  label: string
+  href: string
+}
+
+type DetailsMenuButtonProps = {
+  menuItems: MenuItem[]
+}
+
+export const DetailsMenuButton = ({ menuItems }: DetailsMenuButtonProps) => {
+  const [open, setOpen] = useState(false)
+  const tooltipRef: RefObject<HTMLButtonElement> = useRef(null)
+
+  const handleClick = useCallback(() => setOpen(!open), [open, setOpen])
+  const handleClose = useCallback(() => setOpen(false), [setOpen])
+
+  // Handle click outside of the tooltip to close it
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        open &&
+        tooltipRef.current &&
+        !tooltipRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [open])
+
+  return (
+    <>
+      <Tooltip
+        open={open}
+        targetRef={tooltipRef}
+        onCloseClick={handleClose}
+        onClose={handleClose}
+        variant={2}
+        content={
+          <div tw="flex flex-col min-w-[9.25rem]">
+            {menuItems.map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                tw="py-2 px-3"
+                // tw="block px-4 py-2 text-sm text-base2 hover:bg-base1"
+              >
+                {item.label}
+              </Link>
+            ))}
+          </div>
+        }
+        my="top-right"
+        at="bottom-right"
+        margin={{ x: 0, y: 2 }}
+      />
+      <Button
+        kind="functional"
+        variant="textOnly"
+        onClick={handleClick}
+        ref={tooltipRef}
+      >
+        <div
+          className="bg-base0"
+          tw="h-10 w-12 flex items-center justify-center"
+        >
+          <Icon name="ellipsis" size="lg" />
+        </div>
+      </Button>
+    </>
+  )
+}
+DetailsMenuButton.displayName = 'DetailsMenuButton'
+
+export default memo(DetailsMenuButton) as typeof DetailsMenuButton

src/components/common/DetailsMenuButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './cmp'
+export type { ButtonLinkProps } from './types'

src/components/common/DetailsMenuButton/types.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from '@aleph-front/core'
+import { AnchorHTMLAttributes, ReactNode } from 'react'
+
+export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> &
+  Omit<ButtonProps, 'variant' | 'color' | 'kind' | 'size'> &
+  Partial<Pick<ButtonProps, 'variant' | 'color' | 'kind' | 'size'>> & {
+    href: string
+    children: ReactNode
+  }

src/components/common/EntityCard/cmp.tsx

@@ -52,6 +52,8 @@ export const EntityCard = ({
   dashboardPath = '#',
   createPath = '#',
   createTarget = '_self',
+  createDisabled = false,
+  createDisabledMessage,
   introductionButtonText,
   subItems = [],
   information,
@@ -159,6 +161,8 @@ export const EntityCard = ({
               size="sm"
               href={createPath}
               target={createTarget}
+              disabled={createDisabled}
+              disabledMessage={createDisabledMessage}
             >
               <Icon name="plus-circle" /> {introductionButtonText}
             </ButtonLink>
@@ -168,6 +172,8 @@ export const EntityCard = ({
   }, [
     createPath,
     createTarget,
+    createDisabled,
+    createDisabledMessage,
     dashboardPath,
     information,
     introductionButtonText,

src/components/common/EntityCard/types.ts

@@ -32,6 +32,8 @@ export type EntityCardProps = {
   dashboardPath?: string
   createPath?: string
   createTarget?: HTMLAttributeAnchorTarget
+  createDisabled?: boolean
+  createDisabledMessage?: ReactNode
   introductionButtonText?: string
   information: InformationProps
   storage?: number

src/components/common/ExternalLink/cmp.tsx

@@ -9,6 +9,7 @@ export const ExternalLink = ({
   color,
   typo,
   underline,
+  disabled = false,
   ...props
 }: ExternalLinkProps) => {
   return (
@@ -19,10 +20,11 @@ export const ExternalLink = ({
         $color={color}
         $typo={typo}
         $underline={underline}
+        $disabled={disabled}
         {...props}
       >
         {text ? text : href}
-        <Icon name="square-up-right" tw="ml-2.5" />
+        <Icon name="square-up-right" tw="ml-1" />
       </StyledExternalLink>
     </>
   )

src/components/common/ExternalLink/styles.ts

@@ -6,12 +6,20 @@ export type StyledExternalLinkProps = {
   $color?: keyof CoreTheme['color']
   $typo?: keyof CoreTheme['typo']
   $underline?: boolean
+  $disabled: boolean
 }
 
 export const StyledExternalLink = styled.a<StyledExternalLinkProps>`
-  ${({ theme, $color = 'white', $typo, $underline = false }) => css`
+  ${({ theme, $color = 'white', $typo, $underline = false, $disabled }) => css`
     color: ${theme.color[$color]};
     text-decoration: ${$underline ? 'underline' : 'none'};
     ${$typo ? getTypoCss($typo) : ''}
+
+    ${$disabled &&
+    css`
+      // pointer-events: none;
+      cursor: not-allowed;
+      color: ${theme.color.disabled};
+    `};
   `}
 `

src/components/common/ExternalLink/types.ts

@@ -7,4 +7,5 @@ export type ExternalLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   color?: keyof CoreTheme['color']
   typo?: keyof CoreTheme['typo']
   underline?: boolean
+  disabled?: boolean
 }