From 2569e4ecb001da7cb643072524768b23eac1bb37 Mon Sep 17 00:00:00 2001
From: Victor Oliva <olivarra1@gmail.com>
Date: Fri, 8 Nov 2024 07:54:03 +0300
Subject: [PATCH] change accountId picker for shadcn component

---
 package.json                                  |   1 -
 src/codec-components/EditCodec/CAccountId.tsx | 232 +++++++++---------
 src/components/AccountIdDisplay.tsx           |   2 +-
 src/components/ui/button.tsx                  |  25 +-
 src/components/ui/command.tsx                 |  20 +-
 5 files changed, 143 insertions(+), 137 deletions(-)

diff --git a/package.json b/package.json
index c7f4308..5ddca92 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "semi": false
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.0",
     "@ledgerhq/hw-transport-webusb": "^6.29.4",
     "@noble/hashes": "^1.5.0",
     "@polkadot-api/descriptors": "file:.papi/descriptors",
diff --git a/src/codec-components/EditCodec/CAccountId.tsx b/src/codec-components/EditCodec/CAccountId.tsx
index f20db6f..7587b58 100644
--- a/src/codec-components/EditCodec/CAccountId.tsx
+++ b/src/codec-components/EditCodec/CAccountId.tsx
@@ -1,30 +1,33 @@
-import { PolkadotIdenticon } from "@/components/PolkadotIdenticon"
-import { useSynchronizeInput } from "@/components/useSynchroniseInput"
+import { AccountIdDisplay } from "@/components/AccountIdDisplay"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
 import {
   accountDetail$,
   accounts$,
-  getAccountMapKey,
   getPublicKey,
 } from "@/extension-accounts.state"
 import { identity$, isVerified } from "@/identity.state"
+import { cn } from "@/utils/cn"
 import { EditAccountId, NOTIN } from "@codec-components"
-import {
-  Combobox,
-  ComboboxButton,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from "@headlessui/react"
-import {
-  getSs58AddressInfo,
-  SS58String,
-} from "@polkadot-api/substrate-bindings"
+import { getSs58AddressInfo } from "@polkadot-api/substrate-bindings"
+import { toHex } from "@polkadot-api/utils"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { combineKeys } from "@react-rxjs/utils"
-import { CheckCircle } from "lucide-react"
+import { Check, ChevronsUpDown } from "lucide-react"
 import { FC, useState } from "react"
 import { map, switchMap, take } from "rxjs"
-import { twMerge } from "tailwind-merge"
 
 const hintedAccounts$ = state(
   combineKeys(
@@ -55,129 +58,114 @@ const hintedAccounts$ = state(
 )
 
 export const CAccountId: EditAccountId = ({ value, onValueChanged }) => {
-  const [localInput, setLocalInput] = useSynchronizeInput(
-    value,
-    onValueChanged,
-    parseValue,
-  )
   const accounts = useStateObservable(hintedAccounts$)
-  const valueIdentity = useStateObservable(
-    identity$(value === NOTIN ? "" : value),
-  )
 
   const [query, setQuery] = useState("")
   const queryInfo = getSs58AddressInfo(query)
-  const filteredAccounts =
-    query === ""
-      ? Array.from(accounts.values())
-      : Array.from(accounts.values()).filter(
-          (account) =>
-            account.address.toLowerCase().includes(query.toLowerCase()) ||
-            (account.name &&
-              account.name.toLowerCase().includes(query.toLowerCase())),
-        )
+
+  const [open, _setOpen] = useState(false)
+  const setOpen = (value: boolean) => {
+    _setOpen(value)
+    setQuery("")
+  }
+
+  const valueIsNew =
+    value !== NOTIN &&
+    !accounts.has(toHex(getPublicKey(value) ?? new Uint8Array()))
 
   return (
-    <Combobox
-      value={localInput}
-      onChange={(v) => setLocalInput(v ?? "")}
-      onClose={() => setQuery("")}
-      immediate
-    >
-      <ComboboxButton
-        className={twMerge(
-          "border px-3 py-2 border-slate-500 leading-tight text-white focus-within:outline",
-          "flex items-center gap-2",
-          value === NOTIN ? "border-yellow-400" : null,
-        )}
-      >
-        {localInput && (
-          <PolkadotIdenticon
-            className="flex-shrink-0"
-            publicKey={getPublicKey(localInput)}
-            size={20}
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="flex w-64 justify-between overflow-hidden px-2"
+          forceSvgSize={false}
+        >
+          {value !== NOTIN ? (
+            <AccountIdDisplay value={value} className="overflow-hidden" />
+          ) : (
+            <span className="opacity-80">Select…</span>
+          )}
+          <ChevronsUpDown size={14} className="opacity-50 flex-shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-0">
+        <Command>
+          <CommandInput
+            placeholder="Filter…"
+            value={query}
+            onValueChange={setQuery}
           />
-        )}
-        <ComboboxInput
-          className="bg-transparent outline-none w-full select-all"
-          aria-label="AccountId"
-          displayValue={(address: string) =>
-            valueIdentity?.displayName ??
-            accounts.get(getAccountMapKey(address))?.name ??
-            address
-          }
-          onChange={(event) => setQuery(event.target.value)}
-        />
-      </ComboboxButton>
-      <ComboboxOptions
-        anchor="bottom start"
-        className={twMerge(
-          "max-h-96 rounded border border-black p-2 bg-polkadot-800 [--anchor-gap:4px]",
-        )}
-      >
-        {filteredAccounts.length > 0 ? (
-          filteredAccounts.map((account) => (
-            <AccountOption
-              key={account.address}
-              account={account.address}
-              publicKey={getPublicKey(account.address)}
-            />
-          ))
-        ) : queryInfo.isValid ? (
-          <AccountOption account={query} publicKey={queryInfo.publicKey} />
-        ) : (
-          <div className="text-slate-400">
-            The value is not a valid Account ID
-          </div>
-        )}
-      </ComboboxOptions>
-    </Combobox>
+          <CommandList>
+            <CommandEmpty>
+              <div className="text-slate-400">
+                The value is not a valid Account ID
+              </div>
+            </CommandEmpty>
+            <CommandGroup>
+              {Array.from(accounts.entries()).map(([key, account]) => (
+                <AccountOption
+                  key={key}
+                  account={account.address}
+                  selected={value === account.address}
+                  onSelect={() => {
+                    onValueChanged(account.address)
+                    setOpen(false)
+                  }}
+                />
+              ))}
+              {valueIsNew && (
+                <AccountOption
+                  account={value}
+                  selected={true}
+                  onSelect={() => setOpen(false)}
+                />
+              )}
+              {queryInfo.isValid && (
+                <AccountOption
+                  account={query}
+                  selected={value === query}
+                  onSelect={() => {
+                    onValueChanged(query)
+                    setOpen(false)
+                  }}
+                />
+              )}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   )
 }
 
-const AccountOption: FC<{ account: string; publicKey: Uint8Array | null }> = ({
-  account,
-  publicKey,
-}) => {
+const AccountOption: FC<{
+  account: string
+  selected: boolean
+  onSelect: () => void
+}> = ({ account, selected, onSelect }) => {
   const details = useStateObservable(accountDetail$(account))
   const identity = useStateObservable(identity$(account))
 
   const name = identity?.displayName ?? details?.name
 
   return (
-    <ComboboxOption
-      value={account}
-      className="data-[focus]:bg-polkadot-700 cursor-pointer flex flex-row items-center gap-2 p-1 rounded overflow-hidden"
+    <CommandItem
+      value={account + "_" + name}
+      onSelect={onSelect}
+      className="flex flex-row items-center gap-2 p-1"
+      forceSvgSize={false}
     >
-      <PolkadotIdenticon
-        className="flex-shrink-0"
-        publicKey={publicKey}
-        size={32}
-      />
-      <div className="flex flex-col justify-center text-white leading-tight overflow-hidden">
-        {name && (
-          <span className="inline-flex items-center gap-1">
-            {name}
-            {isVerified(identity) && (
-              <CheckCircle size={16} className="text-green-400" />
-            )}
-          </span>
+      <AccountIdDisplay value={account} className="overflow-hidden" />
+      <Check
+        size={12}
+        className={cn(
+          "ml-auto flex-shrink-0",
+          selected ? "opacity-100" : "opacity-0",
         )}
-        <span className="text-slate-400 text-ellipsis overflow-hidden">
-          {account}
-        </span>
-      </div>
-    </ComboboxOption>
+      />
+    </CommandItem>
   )
 }
-
-const getValidationError = (value: string) => {
-  if (value === "") return null
-  const { isValid } = getSs58AddressInfo(value)
-  return isValid ? null : "Invalid address"
-}
-const parseValue = (value: string): SS58String | NOTIN => {
-  if (value.trim() === "") return NOTIN
-  if (getValidationError(value)) return NOTIN
-  return value
-}
diff --git a/src/components/AccountIdDisplay.tsx b/src/components/AccountIdDisplay.tsx
index 248485f..6c72bec 100644
--- a/src/components/AccountIdDisplay.tsx
+++ b/src/components/AccountIdDisplay.tsx
@@ -21,7 +21,7 @@ export const AccountIdDisplay: FC<{
       <PolkadotIdenticon
         className="flex-shrink-0"
         publicKey={getPublicKey(value)}
-        size={32}
+        size={28}
       />
       <div className="flex flex-col justify-center text-white leading-tight overflow-hidden">
         {name && (
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 36496a2..368839c 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -30,26 +30,41 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  forceSvgSize?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      forceSvgSize = true,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(
+          buttonVariants({ variant, size, className }),
+          forceSvgSize &&
+            "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        )}
         ref={ref}
         {...props}
       />
     )
-  }
+  },
 )
 Button.displayName = "Button"
 
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 0ac9af3..f8d3205 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -14,7 +14,7 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -45,7 +45,7 @@ const CommandInput = React.forwardRef<
       ref={ref}
       className={cn(
         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -88,7 +88,7 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -110,13 +110,17 @@ CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    forceSvgSize?: boolean
+  }
+>(({ className, forceSvgSize = true, ...props }, ref) => (
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      forceSvgSize &&
+        "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
     )}
     {...props}
   />
@@ -132,7 +136,7 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />