AddEtherInput component (#90)

* component ConvertTokenInput added

* component `ConvertTokenInput` now accepts a prop `value`

* using web3js to convert Ether <-> Wei

* component uses ethers.utils instead of web3.utils for ether <-> wei conversion

* added InpuGroupProps to InputGroup

* renamed component name to EtherInput

* Removed convert functionality from the EtherInput component

* Deleted ConvertTokenInput Component

* Modify EtherInput

Co-authored-by: Dhaiwat Pandya <[email protected]>

Author: swetshaw

.changeset/sixty-boats-sip.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/components': minor
+---
+
+Added a EtherInput component that supports input in wei or ether and automatically converts it to wei for you!

packages/components/README.md

@@ -36,6 +36,7 @@ This is the list of components the package currently provides:
 - [NFTGallery](#nftgallery)
 - [Provider](#provider)
 - [TokenGate](#tokengate)
+- [EtherInput](#etherinput)
 
 ---
 
@@ -109,3 +110,15 @@ The TokenGate component lets you conditionally render some content depending on
   <p>This will be rendered if walletBalance is greater than or equal to 10.</p>
 </TokenGate>
 ```
+
+---
+
+### EtherInput
+
+EtherInput is an input field that accepts values in _wei_ or _ether_. It always returns the value to you in _wei_ so that you can easily use it to interact with contracts without any conversions.
+
+```tsx
+const [value, setValue] = useState();
+
+<EtherInput value={value} setValue={setValue} unit="ether" />; // value will always be in wei. eg. if someone enters 1 in the input, value will be 10^18
+```

packages/components/src/components/EtherInput/EtherInput.stories.tsx

@@ -0,0 +1,29 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+import { EtherInput } from '.';
+
+export default {
+  title: 'Components/EtherInput',
+  component: EtherInput
+};
+
+const Component = ({ ...props }) => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <>
+      <EtherInput
+        value={value}
+        onChange={val => setValue(val)}
+        {...props}
+        width="300px"
+      />
+      <Text>Value: {value} wei</Text>
+    </>
+  );
+};
+
+export const Ether = () => <Component unit="ether" />;
+export const Wei = () => <Component unit="wei" />;
+export const Label = () => <Component label="Enter value in wei" />;
+export const Error = () => <Component error="This is an error" />;

packages/components/src/components/EtherInput/EtherInput.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { EtherInput } from '.';
+import { ethers } from 'ethers';
+
+const WrappedEtherInput = props => {
+  const [value, setValue] = React.useState();
+
+  return (
+    <>
+      <EtherInput value={value} onChange={val => setValue(val)} {...props} />
+      <p data-testid="output">{value}</p>
+    </>
+  );
+};
+
+describe('EtherInput component', () => {
+  it('should render without throwing', async () => {
+    render(<WrappedEtherInput />);
+    const input = await screen.findByPlaceholderText('Enter value in ether');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('should handle ether inputs properly', async () => {
+    render(<WrappedEtherInput unit="ether" />);
+    const input = await screen.findByPlaceholderText('Enter value in ether');
+    const output = screen.getByTestId('output');
+    fireEvent.change(input, { target: { value: '1' } });
+    expect(output.textContent).toBe(ethers.utils.parseEther('1').toString());
+  });
+
+  it('should handle wei inputs properly', async () => {
+    render(<WrappedEtherInput unit="wei" />);
+    const input = await screen.findByPlaceholderText('Enter value in wei');
+    const output = screen.getByTestId('output');
+    fireEvent.change(input, { target: { value: '1' } });
+    expect(output.textContent).toBe('1');
+  });
+});

packages/components/src/components/EtherInput/EtherInput.tsx

@@ -0,0 +1,86 @@
+import {
+  Input,
+  InputGroup,
+  InputRightAddon,
+  FormErrorMessage,
+  InputGroupProps,
+  FormLabel,
+  FormControl
+} from '@chakra-ui/react';
+import React from 'react';
+import { ethers } from 'ethers';
+
+export interface EtherInputProps {
+  /**
+   * Specifies the value of the EtherInput
+   */
+  value: string;
+
+  /**
+   * Input unit of the value entered in EtherInput
+   */
+  unit?: 'wei' | 'ether';
+
+  /**
+   * The label for EtherInput
+   */
+  label?: string;
+
+  /**
+   * Accepts a function that would be triggered when the value inside EtherInput changes.
+   */
+  onChange: (value: string) => void;
+
+  /**
+   * Whether you want to display the unit on the right side of the input field or not.
+   * @default true
+   */
+  showUnit?: boolean;
+
+  placeholder?: string;
+
+  /**
+   * In case of an error, this prop would be used to display the error message. The component does not validate the input for you.
+   */
+  error?: string;
+}
+/**
+ * An input field that accepts ether values. Always returns the value in wei so that you can directly use it in transactions without any conversion.
+ */
+export const EtherInput: React.FC<EtherInputProps & InputGroupProps> = ({
+  value,
+  unit = 'ether',
+  label,
+  onChange,
+  showUnit = true,
+  placeholder,
+  error,
+  ...props
+}) => {
+  const [plainValue, setPlainValue] = React.useState<string>();
+  const _placeholder = placeholder || `Enter value in ${unit}`;
+
+  return (
+    <FormControl isInvalid={!!error}>
+      {label ? <FormLabel mb="8px">{label}: </FormLabel> : ''}
+      <InputGroup {...props}>
+        <Input
+          placeholder={_placeholder}
+          value={plainValue}
+          onChange={e => {
+            setPlainValue(e.target.value);
+            if (unit === 'ether') {
+              onChange(ethers.utils.parseEther(e.target.value).toString());
+            } else {
+              onChange(e.target.value);
+            }
+          }}
+        />
+        {showUnit && (
+          <InputRightAddon>{unit === 'ether' ? 'Ξ' : 'wei'}</InputRightAddon>
+        )}
+      </InputGroup>
+      {error && <FormErrorMessage>{error}</FormErrorMessage>}
+    </FormControl>
+  );
+};

packages/components/src/components/EtherInput/index.ts

@@ -0,0 +1 @@
+export * from './EtherInput';

packages/components/src/components/index.ts

@@ -6,3 +6,4 @@ export * from './NFTGallery';
 export * from './NFT';
 export * from './AddressInput';
 export * from './TokenGate';
+export * from './EtherInput';