Refactor components to drop ChakraUI (#336)

Author: Dhaiwat10

.changeset/two-hotels-argue.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/components': minor
+---
+
+Refactor `Address` component to not use ChakraUI anymore. It uses plain CSS now. The functionality remains unchanged.

packages/components/src/components/Address/Address.css

@@ -0,0 +1,10 @@
+.Web3UI_Address__Container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.Web3UI_Address__ErrorMessage {
+  color: red;
+  margin-top: 4px;
+}

packages/components/src/components/Address/Address.tsx

@@ -1,13 +1,7 @@
-import {
-  Box,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  Text,
-} from '@chakra-ui/react';
 import { CopyIcon, CheckIcon } from '@chakra-ui/icons';
 import React, { useState, useEffect } from 'react';
 import { ethers } from 'ethers';
+import './Address.css';
 
 export interface AddressProps {
   /**
@@ -30,6 +24,10 @@ export interface AddressProps {
    * Set to true for ENS lookup
    */
   ens?: boolean;
+  /**
+   * className for the container
+   */
+  className?: string;
 }
 
 /**
@@ -41,6 +39,7 @@ export const Address: React.FC<AddressProps> = ({
   copiable = false,
   shortened = false,
   ens = false,
+  className,
 }) => {
   const [error, setError] = useState<undefined | string>(undefined);
   const [copied, setCopied] = useState<boolean>(false);
@@ -98,25 +97,21 @@ export const Address: React.FC<AddressProps> = ({
   }, []);
 
   return (
-    <FormControl isInvalid={!!error}>
-      <Flex
+    <>
+      <div
         data-testid="address-container"
-        alignItems="center"
-        cursor={copiable ? 'pointer' : 'initial'}
+        className={`Web3UI_Address__Container ${className}`}
+        style={{ cursor: copiable ? 'pointer' : 'initial' }}
         onClick={handleClick}
       >
-        <Text>{ensName || displayAddress}</Text>
-        {copiable && (
-          <Box ml="auto">
-            {copied ? (
-              <CheckIcon color="green.500" />
-            ) : (
-              <CopyIcon color="gray.300" />
-            )}
-          </Box>
+        <p>{ensName || displayAddress}</p>
+        {copiable && copied ? (
+          <CheckIcon marginLeft="auto" color="green.500" />
+        ) : (
+          <CopyIcon marginLeft="auto" color="gray.300" />
         )}
-      </Flex>
-      <FormErrorMessage>{error}</FormErrorMessage>
-    </FormControl>
+      </div>
+      <p className="Web3UI_Address__Error">{error}</p>
+    </>
   );
 };

packages/components/src/components/AddressInput/AddressInput.css

@@ -0,0 +1,19 @@
+.Web3UI_AddressInput__Container {
+  display: flex;
+  flex-direction: column;
+}
+
+/* .Web3UI_AddressInput__Label {
+} */
+
+.Web3UI_AddressInput__Input {
+  margin-top: 4px;
+  padding: 8px;
+  border-radius: 7px;
+  border: 1px solid #ccc;
+}
+
+.Web3UI_AddressInput__ErrorMessage {
+  color: red;
+  margin-top: 4px;
+}

packages/components/src/components/AddressInput/AddressInput.tsx

@@ -1,14 +1,8 @@
-import {
-  FormControl,
-  FormLabel,
-  Input,
-  FormErrorMessage,
-  InputProps,
-} from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 import { ethers } from 'ethers';
 import { useDebounce } from './useDebounce';
 import { JsonRpcSigner } from '@ethersproject/providers';
+import './AddressInput.css';
 
 export interface AddressInputProps {
   /**
@@ -27,16 +21,32 @@ export interface AddressInputProps {
    * Change handler for the text input
    */
   onChange: (value: string) => void;
+  /**
+   * className for the container
+   */
+  className?: string;
+  /**
+   * className for the input
+   */
+  inputClassName?: string;
 }
 
 /**
  * A text input component that is used to get ETH addresses. ENS support included. You can also pass all the styling props of the Chakra UI Input component.
  */
-export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
+export const AddressInput: React.FC<
+  AddressInputProps &
+    React.DetailedHTMLProps<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >
+> = ({
   provider,
   value: _value,
   onChange,
   label,
+  className,
+  inputClassName,
   ...props
 }) => {
   const [inputValue, setInputValue] = useState('');
@@ -80,15 +90,15 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
   }, [inputValue]);
 
   return (
-    <FormControl isInvalid={!!error}>
-      {label && <FormLabel>Input address</FormLabel>}
-      <Input
-        isInvalid={!!error}
+    <div className={`Web3UI_AddressInput__Container ${className}`}>
+      {label && <label className="Web3UI_AddressInput__Label">{label}</label>}
+      <input
+        className={`Web3UI_AddressInput__Input ${inputClassName}`}
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         {...props}
       />
-      <FormErrorMessage>{error ? ' ' + error : ''}</FormErrorMessage>
-    </FormControl>
+      {error && <p className="Web3UI_AddressInput__ErrorMessage">{error}</p>}
+    </div>
   );
 };