From 317211a48e1d3949b112c59854c28fa37957fc4b Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Fri, 23 May 2025 04:52:16 +0000
Subject: [PATCH] [Dashboard] migrate CurrencySelector to shadcn (#7137)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- migrate shared CurrencySelector from Chakra UI to shadcn/ui
- use tailwindcss classes and Radix-based Select

## Checklist
- [x] `pnpm biome check apps/dashboard/src/components/shared/CurrencySelector.tsx --apply`
- [ ] `pnpm test` *(fails: spawn anvil ENOENT)*

<!-- start pr-codex -->

---

## PR-Codex overview
This PR refactors the `CurrencySelector` component to improve its structure and styling. It replaces certain UI elements with a new `Select` component, enhances props for better functionality, and updates the layout for a more modern appearance.

### Detailed summary
- Changed `CurrencySelectorProps` to include new props: `onChange`, `className`, `isDisabled`.
- Refactored the component to use a `Select` from the UI library instead of native HTML elements.
- Updated event handling to utilize `onValueChange` for the `Select`.
- Improved styling and layout for better user experience.
- Replaced `Flex` components with `div` and applied conditional class names for styling.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Updated the CurrencySelector component to use custom UI components and Tailwind CSS for styling, replacing Chakra UI elements.
  - Simplified the component's props and adjusted event handling for the new select interface.
  - Maintained existing functionality and behavior while improving consistency with the app's design system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/shared/CurrencySelector.tsx    | 157 ++++++++++--------
 1 file changed, 89 insertions(+), 68 deletions(-)

diff --git a/apps/dashboard/src/components/shared/CurrencySelector.tsx b/apps/dashboard/src/components/shared/CurrencySelector.tsx
index 35a1b6f9dd2..e6be75df4c6 100644
--- a/apps/dashboard/src/components/shared/CurrencySelector.tsx
+++ b/apps/dashboard/src/components/shared/CurrencySelector.tsx
@@ -1,12 +1,23 @@
-import { Flex, Input, Select, type SelectProps } from "@chakra-ui/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 import { CURRENCIES, type CurrencyMetadata } from "constants/currencies";
 import { useMemo, useState } from "react";
 import { NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS, isAddress } from "thirdweb";
-import { Button } from "tw-components";
 import { useAllChainsData } from "../../hooks/chains/allChains";
 
-interface CurrencySelectorProps extends SelectProps {
+interface CurrencySelectorProps {
   value: string;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  className?: string;
+  isDisabled?: boolean;
   small?: boolean;
   hideDefaultCurrencies?: boolean;
   showCustomCurrency?: boolean;
@@ -15,7 +26,7 @@ interface CurrencySelectorProps extends SelectProps {
   contractChainId: number;
 }
 
-export const CurrencySelector: React.FC<CurrencySelectorProps> = ({
+export function CurrencySelector({
   value,
   onChange,
   small,
@@ -24,8 +35,9 @@ export const CurrencySelector: React.FC<CurrencySelectorProps> = ({
   isPaymentsSelector = false,
   defaultCurrencies = [],
   contractChainId: chainId,
-  ...props
-}) => {
+  className,
+  isDisabled,
+}: CurrencySelectorProps) {
   const { idToChain } = useAllChainsData();
   const chain = chainId ? idToChain.get(chainId) : undefined;
 
@@ -92,40 +104,41 @@ export const CurrencySelector: React.FC<CurrencySelectorProps> = ({
 
   if (isAddingCurrency && !hideDefaultCurrencies) {
     return (
-      <div className="flex flex-col">
-        <Flex align="center">
-          <Button
-            borderRadius="4px 0px 0px 4px"
-            colorScheme="primary"
-            onClick={() => setIsAddingCurrency(false)}
-          >
-            &lt;-
-          </Button>
-          <Input
-            w="auto"
-            isRequired
-            placeholder="ERC20 Address"
-            borderRadius="none"
-            value={editCustomCurrency}
-            onChange={(e) => setEditCustomCurrency(e.target.value)}
-          />
-          <Button
-            borderRadius="0px 4px 4px 0px"
-            colorScheme="primary"
-            onClick={addCustomCurrency}
-            isDisabled={!isAddress(editCustomCurrency)}
-          >
-            Save
-          </Button>
-        </Flex>
+      <div className="flex items-center">
+        <Button
+          className="rounded-r-none rounded-l-md"
+          onClick={() => setIsAddingCurrency(false)}
+        >
+          &lt;-
+        </Button>
+        <Input
+          className="w-full rounded-none"
+          required
+          placeholder="ERC20 Address"
+          value={editCustomCurrency}
+          onChange={(e) => setEditCustomCurrency(e.target.value)}
+        />
+        <Button
+          className="rounded-r-md rounded-l-none"
+          onClick={addCustomCurrency}
+          disabled={!isAddress(editCustomCurrency)}
+        >
+          Save
+        </Button>
       </div>
     );
   }
 
   return (
-    <Flex direction="column" mt={small && !hideDefaultCurrencies ? 5 : 0}>
+    <div
+      className={cn(
+        "flex flex-col",
+        small && !hideDefaultCurrencies && "mt-5",
+        className,
+      )}
+    >
       <Select
-        position="relative"
+        disabled={isDisabled}
         value={
           isPaymentsSelector
             ? value
@@ -133,46 +146,54 @@ export const CurrencySelector: React.FC<CurrencySelectorProps> = ({
               ? NATIVE_TOKEN_ADDRESS.toLowerCase()
               : value?.toLowerCase()
         }
-        onChange={(e) => {
-          if (e.target.value === "custom") {
+        onValueChange={(val) => {
+          if (val === "custom") {
             setIsAddingCurrency(true);
           } else {
-            onChange?.(e);
+            onChange?.({
+              target: { value: val },
+            } as React.ChangeEvent<HTMLSelectElement>);
           }
         }}
-        placeholder="Select Currency"
-        {...props}
       >
-        {chainId &&
-          !hideDefaultCurrencies &&
-          currencyOptions.map((currency: CurrencyMetadata, idx: number) => (
-            <option
-              key={`${currency.address}-${idx}`}
-              value={
-                isPaymentsSelector
-                  ? currency.symbol
-                  : currency.address.toLowerCase()
-              }
+        <SelectTrigger>
+          <SelectValue placeholder="Select Currency" />
+        </SelectTrigger>
+        <SelectContent>
+          {chainId &&
+            !hideDefaultCurrencies &&
+            currencyOptions.map((currency: CurrencyMetadata, idx: number) => (
+              <SelectItem
+                key={`${currency.address}-${idx}`}
+                value={
+                  isPaymentsSelector
+                    ? currency.symbol
+                    : currency.address.toLowerCase()
+                }
+              >
+                {currency.symbol} ({currency.name})
+              </SelectItem>
+            ))}
+          {isCustomCurrency &&
+            !isPaymentsSelector &&
+            initialValue !== NATIVE_TOKEN_ADDRESS.toLowerCase() && (
+              <SelectItem key={initialValue} value={initialValue}>
+                {initialValue}
+              </SelectItem>
+            )}
+          {customCurrency && (
+            <SelectItem
+              key={customCurrency}
+              value={customCurrency.toLowerCase()}
             >
-              {currency.symbol} ({currency.name})
-            </option>
-          ))}
-        {isCustomCurrency &&
-          !isPaymentsSelector &&
-          initialValue !== NATIVE_TOKEN_ADDRESS.toLowerCase() && (
-            <option key={initialValue} value={initialValue}>
-              {initialValue}
-            </option>
+              {customCurrency}
+            </SelectItem>
           )}
-        {customCurrency && (
-          <option key={customCurrency} value={customCurrency.toLowerCase()}>
-            {customCurrency}
-          </option>
-        )}
-        {!hideDefaultCurrencies && showCustomCurrency && (
-          <option value="custom">Custom ERC20</option>
-        )}
+          {!hideDefaultCurrencies && showCustomCurrency && (
+            <SelectItem value="custom">Custom ERC20</SelectItem>
+          )}
+        </SelectContent>
       </Select>
-    </Flex>
+    </div>
   );
-};
+}