FEAT: Add tooltip to show the state

packages/ui/package.json

@@ -46,6 +46,7 @@
     "@heroicons/react": "^2.1.3",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-toast": "^1.1.5",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-react-ui": "^0.9.35",

packages/ui/src/__tests__/widgets/token-upgrade-utils.test.ts

@@ -0,0 +1,35 @@
+import {
+  getVariantByIndex,
+  shortenAddress,
+} from "../../widgets/token-upgrade/utils"
+import { expect, test } from "vitest"
+
+test("should shorten address", () => {
+  expect(shortenAddress("Bk9ErfcwzZ8MgSPdEgfmkreNHad9ik8jYP8um")).toEqual(
+    "Bk9..8um",
+  )
+  expect(
+    shortenAddress("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v", "USDC"),
+  ).toEqual("USDC")
+  expect(
+    shortenAddress("Bk9ErfcwzZ8MgSPdEgfmkreNHad9ik8jYP8um", undefined, 2),
+  ).toEqual("Bk..um")
+  expect(shortenAddress("Bk9")).toEqual("Bk9")
+})
+
+test("should get variant by index", () => {
+  const variants = ["a", "b", "c", "d"]
+  expect(getVariantByIndex(variants, 0)).toEqual("a")
+  expect(getVariantByIndex(variants, 1)).toEqual("b")
+  expect(getVariantByIndex(variants, 2)).toEqual("c")
+  expect(getVariantByIndex(variants, 3)).toEqual("d")
+  expect(getVariantByIndex(variants, 4)).toEqual("a")
+  expect(getVariantByIndex(variants, 5)).toEqual("b")
+  expect(getVariantByIndex(variants, 6)).toEqual("c")
+  expect(getVariantByIndex(variants, 7)).toEqual("d")
+  expect(getVariantByIndex(variants, 8)).toEqual("a")
+  expect(getVariantByIndex(variants, 9)).toEqual("b")
+  expect(getVariantByIndex(variants, 10)).toEqual("c")
+  expect(getVariantByIndex(variants, 11)).toEqual("d")
+  expect(getVariantByIndex(variants, 12)).toEqual("a")
+})

packages/ui/src/entities/token/validators/raw.ts

@@ -1,4 +1,4 @@
-import type { ParsedAccountData } from "@solana/web3.js"
+import type { ParsedAccountData as TParsedAccountData } from "@solana/web3.js"
 import {
   any,
   boolean,
@@ -11,7 +11,7 @@ import {
   type,
 } from "superstruct"
 
-const ParsedAccountData: Describe<ParsedAccountData> = object({
+const ParsedAccountData: Describe<TParsedAccountData> = object({
   program: string(),
   parsed: object(),
   space: number(),

packages/ui/src/widgets/token-upgrade/badge.tsx

@@ -1,19 +1,20 @@
 import React from "react"
 import { cva, VariantProps } from "class-variance-authority"
+import { twMerge } from "tailwind-merge"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600",
+  "gap-x-2.5 inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600",
   {
     variants: {
       accent: {
-        gray: "bg-gray-100 text-gray-600",
-        red: "bg-red-100 text-red-700",
-        yellow: "bg-yellow-100 text-yellow-800",
-        green: "bg-green-100 text-green-700",
-        blue: "bg-blue-100 text-blue-700",
-        indigo: "bg-indigo-100 text-indigo-700",
-        purple: "bg-purple-100 text-purple-700",
-        pink: "bg-pink-100 text-pink-700",
+        gray: "!bg-gray-100 text-gray-600",
+        red: "!bg-red-100 text-red-700",
+        yellow: "!bg-yellow-100 text-yellow-800",
+        green: "!bg-green-100 text-green-700",
+        blue: "!bg-blue-100 text-blue-700",
+        indigo: "!bg-indigo-100 text-indigo-700",
+        purple: "!bg-purple-100 text-purple-700",
+        pink: "!bg-pink-100 text-pink-700",
       },
     },
     defaultVariants: {
@@ -24,10 +25,32 @@ const badgeVariants = cva(
 
 interface BadgeProps
   extends VariantProps<typeof badgeVariants>,
-    React.ComponentPropsWithoutRef<"span"> {}
+    React.ComponentPropsWithRef<"span"> {}
 
-export function Badge({ accent, children }: BadgeProps) {
-  return <span className={badgeVariants({ accent })}>{children}</span>
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ accent, children, className, ...props }, ref) => {
+    return (
+      <span
+        className={twMerge(badgeVariants({ accent }), className)}
+        {...props}
+        ref={ref}
+      >
+        {children}
+      </span>
+    )
+  },
+)
+Badge.displayName = "Badge"
+
+export enum AccentVariant {
+  "gray" = "gray",
+  "red" = "red",
+  "yellow" = "yellow",
+  "green" = "green",
+  "blue" = "blue",
+  "indigo" = "indigo",
+  "purple" = "purple",
+  "pink" = "pink",
 }
 
 export const variants = {

packages/ui/src/widgets/token-upgrade/token-extensions.tsx

@@ -1,35 +1,66 @@
-import React, { useMemo } from "react"
-import { Badge } from "./badge"
+import React, { Fragment, useMemo } from "react"
+import { Badge, variants, AccentVariant } from "./badge"
+import { getVariantByIndex, shortenAddress } from "./utils"
 import { TokenExtensionList } from "../../entities/token/use-token-extension"
-import { shortenAddress } from "./utils"
+import * as Popover from "@radix-ui/react-popover"
 
 interface TokenExtensionProps extends React.ComponentPropsWithoutRef<"div"> {
   address: string
   extensions: TokenExtensionList
 }
 
 export function TokenExtensions({ address, extensions }: TokenExtensionProps) {
-  const displayAddress = useMemo(() => shortenAddress(address), [address])
+  const displayAddress = useMemo(
+    () => shortenAddress(address, undefined, 14),
+    [address],
+  )
 
   return (
     <div>
-      <h3 className="text-base font-semibold leading-6 text-gray-900">
-        Token has these extensions enabled
+      <h3 className="truncate text-ellipsis text-base font-semibold leading-6 text-gray-900">
+        You will receive the following token:
       </h3>
-      <dl className="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg border border-b bg-white md:grid-cols-3 md:divide-x md:divide-y-0">
+      <dl className="mt-2.5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg border border-b bg-white md:grid-cols-3 md:divide-x md:divide-y-0">
         <div className="px-4 py-5 sm:p-6">
           <dt className="text-base font-normal text-gray-900">
-            {displayAddress} extensions
+            <span className="font-mono">{displayAddress}</span>
           </dt>
-          {extensions?.length ?? 0 > 0 ? (
+          {(extensions?.length ?? 0) > 0 ? (
             <dd
               aria-description="List of extensions enabled for the token"
               aria-label="Enabled Extensions"
-              className="mt-1 flex items-baseline justify-between md:block lg:flex"
+              className="mt-1 flex flex-wrap gap-x-2 gap-y-1.5 items-baseline"
             >
-              {extensions?.map(({ extension }) => (
-                <Badge key={extension}>{extension}</Badge>
-              ))}
+              {extensions?.map(({ extension, state }, i) => {
+                return (
+                  <Fragment key={extension}>
+                    <Popover.Root>
+                      <Popover.Trigger asChild>
+                        <Badge
+                          aria-label="Token Extension"
+                          accent={
+                            getVariantByIndex(
+                              variants.accent,
+                              i,
+                            ) as AccentVariant
+                          }
+                          className="cursor-pointer"
+                        >
+                          {extension}
+                        </Badge>
+                      </Popover.Trigger>
+                      <Popover.Content
+                        className="w-[260px] rounded bg-white p-2 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
+                        sideOffset={5}
+                      >
+                        <div className="overflow-x-auto font-mono">
+                          {JSON.stringify(state)}
+                        </div>
+                      </Popover.Content>
+                    </Popover.Root>
+                  </Fragment>
+                )
+              })}
             </dd>
           ) : (
             <dd

packages/ui/src/widgets/token-upgrade/token-info.tsx

@@ -1,4 +1,4 @@
-import React, {  useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { cva, VariantProps } from "class-variance-authority"
 import { TokenExtensions } from "./token-extensions"
 import { useTokenExtension } from "../../entities/token/use-token-extension"

packages/ui/src/widgets/token-upgrade/utils.ts

@@ -1,15 +1,21 @@
+export function getVariantByIndex(variants: string[], variant: number) {
+  const len = variants.length
+  const base = Math.floor(variant / len)
+  return variants[variant - base * len]
+}
+
 export function shortenAddress(
   address: string,
   symbol?: string,
   length = 3,
 ): string {
-  let s = symbol
-  if (!s && address?.length > length) {
+  let s
+  if (!symbol && address.length > length) {
     s = address.slice(0, length) + ".." + address.slice(-1 * length)
-  } else if (!s && address?.length <= length) {
+  } else if (!symbol && address.length <= length) {
     s = address
   } else {
-    s = address.slice(0, length - 1) + ".."
+    s = symbol || address.slice(0, length - 1) + ".."
   }
   return s
 }

packages/ui/tailwind.config.ts

@@ -3,19 +3,17 @@ import preset, {
   typographyStyles,
 } from "token-upgrade-ui-shared/tailwind.config.ts"
 import typographyPlugin from "@tailwindcss/typography"
-import { blackA, violet } from "@radix-ui/colors"
+import { blackA, mauve, violet } from "@radix-ui/colors"
 
 export default {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/@radix-ui/**"
-  ],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/@radix-ui/**"],
   preset: [preset],
   theme: {
     typography: typographyStyles,
     extend: {
       colors: () => ({
         ...blackA,
+        ...mauve,
         ...violet,
       }),
       keyframes: {
@@ -33,11 +31,34 @@ export default {
           from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
           to: { transform: "translateX(calc(100% + var(--viewport-padding)))" },
         },
+        slideUpAndFade: {
+          from: { opacity: "0", transform: "translateY(2px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        slideRightAndFade: {
+          from: { opacity: "0", transform: "translateX(-2px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+        slideDownAndFade: {
+          from: { opacity: "0", transform: "translateY(-2px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        slideLeftAndFade: {
+          from: { opacity: "0", transform: "translateX(2px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
       },
       animation: {
         hide: "hide 100ms ease-in",
         slideIn: "slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)",
         swipeOut: "swipeOut 100ms ease-out",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade:
+          "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideDownAndFade:
+          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade:
+          "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
       },
     },
   },