feat: add verifier input on mint form (#213)

* fix: ethereum tx provider hook typing

* feat: add base code for verifier dropdown select

* feat: fetch verifiers from subgraph

* refactor: use combobox for selecting verifier

ui/graphql/queries.graphql

@@ -45,6 +45,12 @@ query getNFA($id: ID!) {
   }
 }
 
+query getVerifiers {
+  verifiers {
+    id
+  }
+}
+
 # query to get the ens name of an address
 query getENSNames($address: ID!) {
   account(id: $address) {

ui/src/integrations/ethereum/hooks/ethereum-hooks.tsx

@@ -49,14 +49,14 @@ const createWriteContractContext = <
     providerName,
   });
 
-  const Provider: React.FC = ({
+  const Provider = ({
     children,
     config: {
       prepare: prepareConfig = {},
       transaction: transactionConfig = {},
       write: writeConfig = {},
     } = {},
-  }: EthereumHooks.WriteContext.ProviderProps<TFunctionName>) => {
+  }: EthereumHooks.WriteContext.ProviderProps<TFunctionName>): JSX.Element => {
     const [args, setArgs] = useState<TFunctionArguments>();
 
     const prepare = usePrepareContractWrite({

ui/src/store/features/ens/async-thunk/resolve-address.ts

@@ -30,7 +30,7 @@ export const resolveAddress = createAsyncThunk<void, string>(
     } catch (error) {
       AppLog.error('Failed to resolve ENS name by address', error);
       dispatch(
-        ENSActions.setAddress({ key: address, value: { state: 'loading' } })
+        ENSActions.setAddress({ key: address, value: { state: 'failed' } })
       );
     }
   }

ui/src/views/mint/nfa-step/form-step/mint-form.context.ts

@@ -13,6 +13,7 @@ export type MintFormContext = {
     logoColor: FormField;
     ens: FormField;
     domainURL: FormField;
+    verifier: FormField;
     isValid: ReactState<boolean>;
   };
 };
@@ -51,6 +52,7 @@ export const useMintFormContextInit = (): MintFormContext => ({
       StringValidators.isUrl,
     ]),
     ens: useFormField('ens', [], ''),
+    verifier: useFormField('verifier', [StringValidators.required]),
     isValid: useState(false),
   },
 });

ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.tsx

@@ -1,11 +1,99 @@
-import { Button, Card, Flex, Stepper, Switch, Text } from '@/components';
+import { useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+
+import { getVerifiersDocument } from '@/../.graphclient';
+import {
+  Button,
+  Card,
+  Flex,
+  Form,
+  ResolvedAddress,
+  Stepper,
+  Switch,
+  Text,
+} from '@/components';
+import { useENSStore } from '@/store';
 
 import { Mint } from '../../mint.context';
 import { MintCardHeader } from '../../mint-card';
+import { useMintFormContext } from '../form-step';
+
+// TODO: remove mocked items after graphql api is fixed
+const mockedItems = [
+  '0xdBb04e00D5ec8C9e3aeF811D315Ee7C147c5DBFD',
+  '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
+];
+
+const SelectVerifier: React.FC = () => {
+  const {
+    form: { verifier },
+  } = useMintFormContext();
+
+  const {
+    value: [selectedVerifier, setSelectedVerifier],
+  } = verifier;
+
+  const { addressMap } = useENSStore();
+
+  const { data } = useQuery(getVerifiersDocument);
+
+  const items = useMemo(() => {
+    if (!data) return [];
+
+    const verifiers = data.verifiers
+      .map<string>((verifier) => verifier.id.toString())
+      .concat(mockedItems);
+
+    return verifiers.map((verifier) => ({
+      address: verifier,
+      ens: addressMap[verifier]?.value,
+    }));
+  }, [data, addressMap]);
+
+  useEffect(() => {
+    if (!selectedVerifier && items.length > 0) {
+      setSelectedVerifier(items[0].address);
+    }
+  }, [selectedVerifier, setSelectedVerifier, items]);
+
+  return (
+    <Form.Field context={verifier}>
+      <Form.Combobox
+        items={items}
+        handleValue={(item) => item.address}
+        queryKey={['address', 'ens']}
+      >
+        {({ Field, Options }) => (
+          <>
+            <Field>
+              {(selected) =>
+                selected ? (
+                  <ResolvedAddress>{selected.address}</ResolvedAddress>
+                ) : (
+                  'Select a Verifier'
+                )
+              }
+            </Field>
+            <Options>
+              {(item) => <ResolvedAddress>{item.address}</ResolvedAddress>}
+            </Options>
+          </>
+        )}
+      </Form.Combobox>
+    </Form.Field>
+  );
+};
 
 export const VerifyNFAStep: React.FC = () => {
   const { prevStep } = Stepper.useContext();
   const { verifyNFA, setVerifyNFA, setNfaStep } = Mint.useContext();
+  const {
+    form: {
+      verifier: {
+        value: [verifier],
+      },
+    },
+  } = useMintFormContext();
 
   const handleNextStep = (): void => {
     setNfaStep(2);
@@ -36,7 +124,13 @@ export const VerifyNFAStep: React.FC = () => {
             <Text css={{ color: '$slate12' }}>Verify NFA</Text>
             <Switch checked={verifyNFA} onChange={setVerifyNFA} />
           </Card.Text>
-          <Button colorScheme="blue" variant="solid" onClick={handleNextStep}>
+          <SelectVerifier />
+          <Button
+            colorScheme="blue"
+            variant="solid"
+            onClick={handleNextStep}
+            disabled={!verifier}
+          >
             Continue
           </Button>
         </Flex>