Add basic version of MultiAddressInput (#296)

* Add basic version of MultiAddressInput

* Add credits for original authors

* Add a simple docstring and update placeholder

* Add changeset

Author: Dhaiwat10

.changeset/purple-hats-battle.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/components': minor
+---
+
+Add `MultiAddressInput` component

packages/components/src/assets/.gitkeep

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { NETWORKS, Provider, useReadOnlyProvider } from '@web3-ui/hooks';
+import { MultiAddressInput, Entry } from './MultiAddressInput';
+
+export default {
+  title: 'Components/MultiAddressInput',
+  component: MultiAddressInput,
+};
+
+const AddressUsingProvider = () => {
+  const mainnetProvider = useReadOnlyProvider(
+    'https://mainnet.infura.io/v3/21bc321f21a54c528dc084f5ed7f8df7'
+  );
+  const [value, setValue] = React.useState<Entry[]>([]);
+
+  useEffect(() => {
+    console.log({ value });
+  }, [value]);
+
+  if (!mainnetProvider) {
+    return null;
+  }
+
+  return (
+    <>
+      <MultiAddressInput
+        value={value}
+        onChange={setValue}
+        ensProvider={mainnetProvider}
+        placeholder="Enter ENS names or addresses"
+      />
+    </>
+  );
+};
+
+export const WithWallet = () => (
+  <Provider network={NETWORKS.rinkeby}>
+    <AddressUsingProvider />
+  </Provider>
+);

packages/components/src/components/MultiAddressInput/MultiAddressInput.stories.tsx

@@ -0,0 +1,115 @@
+import {
+  Box,
+  Textarea,
+  HStack,
+  Tag,
+  TagLabel,
+  TagCloseButton,
+  Wrap,
+  Spinner,
+  VStack,
+  TextareaProps,
+} from '@chakra-ui/react';
+import React, { ChangeEvent, FC, useState } from 'react';
+import { ethers } from 'ethers';
+
+export type Entry = {
+  address: string | null;
+  ens: string | null;
+  input: string;
+  isValid: boolean;
+};
+
+export interface MultiAddressInputProps {
+  ensProvider: ethers.providers.EnsProvider;
+  value: Entry[];
+  onChange: (entries: Entry[]) => void;
+  placeholder?: string;
+  inputProps?: TextareaProps;
+}
+
+/*
+ * Original authors: Hans and Bliss from the Moonshot Collective
+ * Original source code: https://github.com/moonshotcollective/pay.party/blob/develop/packages/react-app/src/routes/create/components/MultiAddressInput.jsx
+ * @dev This component lets you input multiple addresses and ENS names.
+ */
+export const MultiAddressInput: FC<MultiAddressInputProps> = ({
+  ensProvider,
+  value,
+  onChange,
+  placeholder = 'Enter ENS names or addresses here',
+  inputProps,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const addressBadge = (entry: Entry) => {
+    return (
+      <Box p="1" key={entry.input}>
+        <HStack spacing={4}>
+          <Tag size="md" key="md" borderRadius="full" variant="solid">
+            <TagLabel color={entry.isValid ? 'default' : 'red.300'}>
+              {entry.input}
+            </TagLabel>
+            <TagCloseButton
+              onClick={() => {
+                onChange(value.filter((obj) => obj.input !== entry.input));
+              }}
+            />
+          </Tag>
+        </HStack>
+      </Box>
+    );
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const lastInput = e.target.value[e.target.value.length - 1];
+    if (lastInput === ',' || lastInput === '\n') {
+      const splitInput = e.currentTarget.value
+        .split(/[ ,\n]+/)
+        .filter((c: string) => c !== '')
+        .map(async (uin: string) => {
+          const val: Entry = {
+            input: uin,
+            isValid: false,
+            address: null,
+            ens: null,
+          };
+          try {
+            if (uin.endsWith('.eth') || uin.endsWith('.xyz')) {
+              val.address = await ensProvider.resolveName(uin);
+              val.ens = uin;
+            } else {
+              val.ens = await ensProvider.lookupAddress(uin);
+              val.address = uin;
+            }
+            val.isValid = true;
+          } catch {
+            val.isValid = false;
+            console.error('Bad Address: ' + uin);
+          }
+          return val;
+        });
+      setIsLoading(true);
+      Promise.all(splitInput)
+        .then((d) => {
+          onChange([...value, ...d]);
+        })
+        .finally(() => setIsLoading(false));
+      e.target.value = '';
+    }
+  };
+
+  return (
+    <VStack>
+      <Wrap>{value && value.map(addressBadge)}</Wrap>
+      <Textarea
+        rows={1}
+        placeholder={placeholder}
+        onChange={handleChange}
+        disabled={isLoading}
+        {...inputProps}
+      />
+      {isLoading && <Spinner size="sm" />}
+    </VStack>
+  );
+};

packages/components/src/components/MultiAddressInput/MultiAddressInput.tsx

@@ -0,0 +1,2 @@
+export { MultiAddressInput } from './MultiAddressInput';
+export type { MultiAddressInputProps, Entry } from './MultiAddressInput';

packages/components/src/components/MultiAddressInput/index.ts

@@ -8,3 +8,4 @@ export * from './AddressInput';
 export * from './TokenGate';
 export * from './EtherInput';
 export * from './TokenBalance';
+export * from './MultiAddressInput';