[Dashboard] migrate solidity inputs to shadcn (#7148)

## Summary
- migrate solidity bool, int, bytes, and string inputs to shadcn/ui and tailwind

## Testing
- `pnpm biome check --apply apps/dashboard/src/contract-ui/components/solidity-inputs/bool-input.tsx apps/dashboard/src/contract-ui/components/solidity-inputs/bytes-input.tsx apps/dashboard/src/contract-ui/components/solidity-inputs/int-input.tsx apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx`
- `pnpm test` *(fails: spawn anvil ENOENT)*

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the UI components in the `solidity-inputs` directory to use a consistent styling approach and improve the layout by replacing certain components with more flexible alternatives.

### Detailed summary
- Updated imports from `tw-components` to a local `@/components/ui` for `Button` and `Input`.
- Replaced `ButtonGroup` with a `div` for better styling control in `SolidityBoolInput`.
- Adjusted button variants from `solid` to `default` for consistency.
- Introduced a `showConversionButton` flag in `SolidityIntInput` for conditional rendering.
- Changed `InputGroup` to `div` in `SolidityIntInput` and `SolidityStringInput` for layout flexibility.
- Used `cn` utility for conditional class names in `Input` components.
- Updated button and input placements to enhance responsiveness and 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

- **Style**
  - Updated input components to use custom UI elements and Tailwind CSS for consistent styling.
  - Replaced Chakra UI and third-party components with locally defined UI components and native HTML elements.
  - Improved button and input layouts for better visual consistency across boolean, integer, byte, and string input fields.

- **New Features**
  - Enhanced integer input with conditional display of a conversion button based on input value format.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jnsdls

apps/dashboard/src/contract-ui/components/solidity-inputs/bool-input.tsx

@@ -1,5 +1,4 @@
-import { ButtonGroup } from "@chakra-ui/react";
-import { Button } from "tw-components";
+import { Button } from "@/components/ui/button";
 import type { SolidityInputProps } from ".";
 
 export const SolidityBoolInput: React.FC<SolidityInputProps> = ({
@@ -11,22 +10,24 @@ export const SolidityBoolInput: React.FC<SolidityInputProps> = ({
   const watchInput = form.watch(inputName);
   return (
     <div className="flex flex-row">
-      <ButtonGroup isAttached size="sm" colorScheme="blue">
+      <div className="inline-flex overflow-hidden rounded-md border border-border">
         <Button
+          size="sm"
           onClick={() => form.setValue(inputName, "true")}
-          borderColor="borderColor"
-          variant={watchInput === "true" ? "solid" : "outline"}
+          variant={watchInput === "true" ? "default" : "outline"}
+          className="rounded-none border-r-0"
         >
           True
         </Button>
         <Button
+          size="sm"
           onClick={() => form.setValue(inputName, "false")}
-          borderColor="borderColor"
-          variant={watchInput === "false" ? "solid" : "outline"}
+          variant={watchInput === "false" ? "default" : "outline"}
+          className="rounded-none rounded-l-none"
         >
           False
         </Button>
-      </ButtonGroup>
+      </div>
     </div>
   );
 };

apps/dashboard/src/contract-ui/components/solidity-inputs/bytes-input.tsx

@@ -1,4 +1,4 @@
-import { Input } from "@chakra-ui/react";
+import { Input } from "@/components/ui/input";
 import { validateBytes } from "./helpers";
 import type { SolidityInputWithTypeProps } from "./index";
 

apps/dashboard/src/contract-ui/components/solidity-inputs/int-input.tsx

@@ -1,8 +1,8 @@
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { InputGroup, InputRightElement } from "@chakra-ui/react";
+import { cn } from "@/lib/utils";
 import { useCallback } from "react";
 import { toWei } from "thirdweb";
-import { Button } from "tw-components";
 import type { SolidityInputWithTypeProps } from ".";
 import { validateInt } from "./helpers";
 
@@ -47,21 +47,28 @@ export const SolidityIntInput: React.FC<SolidityInputWithTypeProps> = ({
 
   const formValue = form.watch(inputName) || "";
 
+  const showConversionButton =
+    formValue.includes(".") || formValue.includes(",");
+
   return (
-    <InputGroup>
+    <div className="relative">
       <Input
         placeholder={solidityType}
         {...restOfInputProps}
         value={form.watch(inputName)}
         onChange={handleChange}
+        className={cn(
+          showConversionButton && "pr-28",
+          restOfInputProps.className,
+        )}
       />
-      {(formValue.includes(".") || formValue.includes(",")) && (
-        <InputRightElement width="auto" px={1}>
+      {showConversionButton && (
+        <div className="absolute inset-y-0 right-0 flex items-center pr-1">
           <Button variant="ghost" size="sm" onClick={handleConversion}>
             Convert to WEI
           </Button>
-        </InputRightElement>
+        </div>
       )}
-    </InputGroup>
+    </div>
   );
 };

apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx

@@ -1,6 +1,6 @@
 import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 import { useDashboardStorageUpload } from "@3rdweb-sdk/react/hooks/useDashboardStorageUpload";
-import { Box, InputGroup, InputRightElement } from "@chakra-ui/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { PINNED_FILES_QUERY_KEY_ROOT } from "app/(app)/team/[team_slug]/(team)/~/usage/storage/your-files";
 import { IpfsUploadButton } from "components/ipfs-upload/button";
@@ -33,17 +33,17 @@ export const SolidityStringInput: React.FC<SolidityInputWithTypeProps> = ({
     nameOrInput !== "_baseURIForTokens";
 
   return (
-    <InputGroup display="flex">
+    <div className="relative flex">
       <Input
         placeholder="string"
         disabled={storageUpload.isPending}
-        className="pr-[90px] md:pr-[160px]"
+        className={cn("pr-[90px] md:pr-[160px]", restOfInputProps.className)}
         {...restOfInputProps}
         value={form.watch(inputName)}
         onChange={handleChange}
       />
       {showButton && (
-        <InputRightElement mx={1} width={{ base: "75px", md: "160px" }}>
+        <div className="absolute inset-y-0 right-0 flex items-center pr-1">
           <IpfsUploadButton
             onUpload={(uri) => {
               if (functionName) {
@@ -66,13 +66,11 @@ export const SolidityStringInput: React.FC<SolidityInputWithTypeProps> = ({
             }}
             storageUpload={storageUpload}
           >
-            <Box display={{ base: "none", md: "block" }} mr={1} as="span">
-              Upload to
-            </Box>
+            <span className="mr-1 hidden md:block">Upload to</span>
             IPFS
           </IpfsUploadButton>
-        </InputRightElement>
+        </div>
       )}
-    </InputGroup>
+    </div>
   );
 };