Pass AddressInput test

Author: naz3eh

packages/components/package.json

@@ -50,7 +50,6 @@
     "@web3-ui/hooks": "^0.1.0",
     "babel-loader": "^8.2.1",
     "classnames": "^2.2.6",
-    "ethereum-waffle": "^3.4.0",
     "ethers": "^5.5.1",
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",

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

@@ -1,16 +1,46 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { AddressInput } from '.';
-import { MockProvider } from 'ethereum-waffle';
+import { ethers } from 'ethers';
+import 'regenerator-runtime/runtime';
 
-describe('AddressInput', () => {
-  it('renders', () => {
-    const provider = new MockProvider();
-    const [value, setValue] = React.useState('');
+const WALLET_ADDRESS = '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266';
+const SIGNED_MESSAGE =
+  '0xa2162955fbfbac44ad895441a3501465861435d6615053a64fc9622d98061f1556e47c6655d0ea02df00ed6f6050298eea381b4c46f8148ecb617b32695bdc451c';
+
+const WINDOW_ETHEREUM = {
+  isMetaMask: true,
+  request: async (request: { method: string; params?: Array<unknown> }) => {
+    if (['eth_accounts', 'eth_requestAccounts'].includes(request.method)) {
+      return [WALLET_ADDRESS];
+    } else if (['personal_sign'].includes(request.method)) {
+      return SIGNED_MESSAGE;
+    }
+
+    throw Error(`Unknown request: ${request.method}`);
+  },
+};
+
+jest.mock('ethers', () => {
+  const original = jest.requireActual('ethers');
+  return {
+    ...original,
+    ethers: {
+      ...original.ethers,
+    },
+  };
+});
+
+const Component = () => {
+  const provider = new ethers.providers.Web3Provider(WINDOW_ETHEREUM);
+  const [value, setValue] = React.useState('');
 
-    const { container } = render(
-      <AddressInput value={value} onChange={(e) => setValue(e)} provider={provider} />
-    );
+  return <AddressInput value={value} onChange={(e) => setValue(e)} provider={provider} />;
+};
+
+describe('AddressInput', () => {
+  it('renders AddressInput correctly', () => {
+    const { container } = render(<Component />);
     expect(container);
   });
 });

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

@@ -37,13 +37,13 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
   ...props
 }) => {
   const [inputValue, setInputValue] = useState('');
-  const deboucedValue = useDebounce(inputValue, 700);
+  const debouncedValue = useDebounce(inputValue, 700);
   const [error, setError] = useState<null | string>(null);
   const regex = /^0x[a-fA-F0-9]{40}$/;
 
   const getAddressFromEns = async () => {
     try {
-      let address = await provider.resolveName(deboucedValue);
+      let address = await provider.resolveName(debouncedValue);
       if (!address) {
         setError('Invalid Input');
       }
@@ -55,16 +55,16 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
   };
 
   useEffect(() => {
-    if (deboucedValue) {
+    if (debouncedValue) {
       onChange('');
       setError(null);
-      if (regex.test(deboucedValue)) {
-        onChange(deboucedValue);
-      } else if (deboucedValue.endsWith('.eth') || deboucedValue.endsWith('.xyz')) {
+      if (regex.test(debouncedValue)) {
+        onChange(debouncedValue);
+      } else if (debouncedValue.endsWith('.eth') || debouncedValue.endsWith('.xyz')) {
         getAddressFromEns().then((address) => onChange(address ? address : ''));
       }
     }
-  }, [deboucedValue]);
+  }, [debouncedValue]);
 
   useEffect(() => {
     if (inputValue === '') {