resolve some circular dependencies (#1399)

* chore: ignore bun.lockb

* fix(dcd): resolve around OpenseaLink and CollectNtfContext

* fix(dcd): resolve around ../MintGuildPin/Fuel/hooks

* fix(dcd): resolve around **/AddTokenPanel

* fix: update import

* fix(dcd): resolve around AddPoapPanel

* chore: delete empty file

* fix(dcd): resolve around EditGuild/*/Admins

* fix(dcd): resolve around requirements/Form

* fix: add back ExpectedAnswerCard.tsx

* fix: add optional chaining to view

* chore: rename ExpectedAnswerCardView

* chore: remove optional chainings

src/components/[guild]/CreateFormModal/formConfig.tsx

@@ -9,15 +9,15 @@ import {
 import OptionIcon from "components/common/StyledSelect/components/CustomSelectOption/components/OptionIcon"
 import { ComponentType, ReactNode } from "react"
 import {
-  ExpectedFieldDataProps,
   ExpectedMultipleChoiceDisplay,
   ExpectedRateDisplay,
   ExpectedStringDisplay,
-} from "requirements/Form/components/ExpectedAnswerCard"
+} from "requirements/Form/components/ExpectedAnswerCardDisplay"
 import { ExpectedMultipleChoice } from "requirements/Form/components/ExpectedAnswerRequirements/ExpectedMultipleChoice"
 import ExpectedNumber from "requirements/Form/components/ExpectedAnswerRequirements/ExpectedNumber"
 import ExpectedRate from "requirements/Form/components/ExpectedAnswerRequirements/ExpectedRate"
 import ExpectedSingleChoice from "requirements/Form/components/ExpectedAnswerRequirements/ExpectedSingleChoice"
+import { ExpectedFieldDataProps } from "requirements/Form/components/types"
 import ExpectedString from "../../../requirements/Form/components/ExpectedAnswerRequirements/ExpectedString"
 import { CreateForm } from "../RolePlatforms/components/AddRoleRewardModal/components/AddFormPanel"
 import { MultipleChoice, SingleChoice } from "./components/Display/Choice"

src/components/[guild]/EditGuild/components/Admins/Admins.tsx

@@ -5,17 +5,31 @@ import {
   FormLabel,
   Tag,
 } from "@chakra-ui/react"
+import { HStack, Icon, forwardRef } from "@chakra-ui/react"
+import { Warning } from "@phosphor-icons/react"
+import {
+  CreatableSelect,
+  GroupBase,
+  MultiValueGenericProps,
+  Props,
+  chakraComponents,
+} from "chakra-react-select"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
 import useUser from "components/[guild]/hooks/useUser"
+import CopyableAddress from "components/common/CopyableAddress"
 import GuildAvatar from "components/common/GuildAvatar"
+import StyledSelect from "components/common/StyledSelect"
+import CustomMenuList from "components/common/StyledSelect/components/CustomMenuList"
 import { useMemo } from "react"
-import { useController, useFormContext } from "react-hook-form"
+import { PropsWithChildren, useEffect } from "react"
+import { useController, useFormContext, useWatch } from "react-hook-form"
 import { FUEL_ADDRESS_REGEX, SelectOption } from "types"
 import { ADDRESS_REGEX } from "utils/guildCheckout/constants"
 import shortenHex from "utils/shortenHex"
+import { useEnsAddress } from "wagmi"
+import { mainnet } from "wagmi/chains"
 import TransferOwnership from "../TransferOwnership"
-import AdminSelect from "./components/AdminSelect"
 
 export const isValidAddress = (address: string) =>
   ADDRESS_REGEX.test(address) || FUEL_ADDRESS_REGEX.test(address)
@@ -127,4 +141,84 @@ const Admins = () => {
   )
 }
 
+type PropsHelper = MultiValueGenericProps<unknown, boolean, GroupBase<unknown>>
+const CustomMultiValueLabel = (props: PropsWithChildren<PropsHelper>) => {
+  const domain = isValidAddress(props.data.value) ? undefined : props.data.value
+  const { data: resolvedAddress } = useEnsAddress({
+    name: domain,
+    chainId: mainnet.id,
+  })
+
+  const { setError, setValue, control, trigger } = useFormContext()
+  const admins = useWatch({ control: control, name: "admins" })
+
+  useEffect(() => {
+    if (
+      domain &&
+      resolvedAddress &&
+      !admins.includes(resolvedAddress.toLowerCase())
+    ) {
+      setValue(
+        "admins",
+        admins.map((admin) =>
+          admin.address === domain ? { address: resolvedAddress } : admin
+        )
+      )
+
+      trigger("admins")
+    }
+
+    if (resolvedAddress === null) {
+      setError("admins", {
+        message: "Resolving address failed",
+      })
+    }
+  }, [domain, resolvedAddress, admins, setValue, trigger, setError])
+
+  return (
+    <chakraComponents.MultiValueLabel {...props}>
+      <HStack gap="0">
+        {resolvedAddress === null ||
+        admins.includes(resolvedAddress?.toLowerCase()) ? (
+          <Icon as={Warning} mr={1} color="red.300" boxSize={4} weight="bold" />
+        ) : (
+          props.data.img
+        )}
+        <CopyableAddress
+          address={props.data.value}
+          domain={domain ?? resolvedAddress}
+          size="sm"
+        />
+      </HStack>
+    </chakraComponents.MultiValueLabel>
+  )
+}
+
+const AdminSelect = forwardRef((props: Props, ref) => (
+  <StyledSelect
+    as={CreatableSelect}
+    size="lg"
+    components={{
+      MultiValueLabel: CustomMultiValueLabel,
+      Input: (inputProps) => (
+        <chakraComponents.Input {...inputProps} placeholder="Paste address" />
+      ),
+      DropdownIndicator: () => null,
+      MenuList: (props) => <CustomMenuList {...props} noResultText="No members" />,
+    }}
+    openMenuOnClick={false}
+    ref={ref}
+    {...props}
+    chakraStyles={{
+      valueContainer: (base) => ({ ...base, py: 2, px: 3 }),
+      multiValue: (base) => ({ ...base, minH: "7" }),
+      input: (provided) => ({
+        ...provided,
+        pl: 1,
+        minWidth: "14ch",
+      }),
+    }}
+  />
+))
+
 export default Admins

src/components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/Fuel/hooks/constants.ts

@@ -0,0 +1,3 @@
+export const FUEL_GUILD_PIN_CONTRACT_ID_0X =
+  "0xb67efb48d800c5f5394163f5b5b4a9e6b06dc5c9e5fc3a49fa73e6b84bc3863b"
+export const FUEL_FAKE_CHAIN_ID = 123456789

src/components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/Fuel/hooks/useAlreadyMinted.ts

@@ -4,7 +4,7 @@ import useUser from "components/[guild]/hooks/useUser"
 import useSWRImmutable from "swr/immutable"
 import type { GuildActionInput } from "../GuildPinContractAbi"
 import { GuildPinContractAbi__factory } from "../GuildPinContractAbi_factory"
-import { FUEL_GUILD_PIN_CONTRACT_ID_0X } from "./useMintFuelGuildPin"
+import { FUEL_GUILD_PIN_CONTRACT_ID_0X } from "./constants"
 
 const useAlreadyMinted = () => {
   const { id: userId } = useUser()

src/components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/Fuel/hooks/useFuelGuildPinFee.ts

@@ -1,7 +1,7 @@
 import { useWallet } from "@fuels/react"
 import useSWRImmutable from "swr/immutable"
 import { GuildPinContractAbi__factory } from "../GuildPinContractAbi_factory"
-import { FUEL_GUILD_PIN_CONTRACT_ID_0X } from "./useMintFuelGuildPin"
+import { FUEL_GUILD_PIN_CONTRACT_ID_0X } from "./constants"
 
 const useFuelGuildPinFee = () => {
   const { wallet } = useWallet()

src/components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/Fuel/hooks/useMintFuelGuildPin.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { usePostHogContext } from "@/components/Providers/PostHogProvider"
 import { useAccount, useProvider, useWallet } from "@fuels/react"
 import useGuild from "components/[guild]/hooks/useGuild"
@@ -11,6 +10,7 @@ import parseFuelAddress from "utils/parseFuelAddress"
 import { useMintGuildPinContext } from "../../../MintGuildPinContext"
 import type { ClaimParametersInput, GuildActionInput } from "../GuildPinContractAbi"
 import { GuildPinContractAbi__factory } from "../GuildPinContractAbi_factory"
+import { FUEL_FAKE_CHAIN_ID, FUEL_GUILD_PIN_CONTRACT_ID_0X } from "./constants"
 import useFuelGuildPinFee from "./useFuelGuildPinFee"
 
 type FuelMintData = {
@@ -28,10 +28,6 @@ type FuelMintData = {
   signature: string
 }
 
-export const FUEL_GUILD_PIN_CONTRACT_ID_0X =
-  "0xb67efb48d800c5f5394163f5b5b4a9e6b06dc5c9e5fc3a49fa73e6b84bc3863b"
-export const FUEL_FAKE_CHAIN_ID = 123456789
-
 const useMintFuelGuildPin = () => {
   const { captureEvent } = usePostHogContext()
   const { id, name, urlName } = useGuild()

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPoapPanel/components/UploadMintLinks.tsx

@@ -1,8 +1,10 @@
 import { FormControl, FormLabel, Stack, Text, Textarea } from "@chakra-ui/react"
+import { File } from "@phosphor-icons/react"
+import Button from "components/common/Button"
 import FormErrorMessage from "components/common/FormErrorMessage"
+import useDropzone from "hooks/useDropzone"
 import { useFormContext, useWatch } from "react-hook-form"
 import { ImportPoapForm } from "../AddPoapPanel"
-import UploadTxt from "./UploadTxt"
 
 const LEGACY_POAP_MINT_LINK_BASE = "http://poap.xyz/claim/"
 const POAP_MINT_LINK_BASE = "http://poap.xyz/mint/"
@@ -22,7 +24,7 @@ export const validatePoapLinks = (links: string[]) =>
         )
     )
 
-export const INVALID_LINKS_ERROR = {
+const INVALID_LINKS_ERROR = {
   type: "validate",
   message: "Your list includes invalid mint links!",
 }
@@ -80,4 +82,57 @@ const UploadMintLinks = ({ isOptional }: Props) => {
     </FormControl>
   )
 }
+
+const UploadTxt = () => {
+  const { setValue, setError, clearErrors } = useFormContext<ImportPoapForm>()
+
+  const { isDragActive, getRootProps, getInputProps } = useDropzone({
+    multiple: false,
+    accept: { "text/plain": [".txt"] },
+    onDrop: (accepted, fileRejections) => {
+      clearErrors("texts")
+
+      if (fileRejections?.length > 0) {
+        setError("texts", {
+          type: "validate",
+          message: fileRejections[0].errors[0].message,
+        })
+        return
+      }
+
+      if (accepted.length > 0) parseTxt(accepted[0])
+    },
+  })
+
+  const parseTxt = (file: File) => {
+    const fileReader = new FileReader()
+    fileReader.onload = () => {
+      clearErrors("texts")
+      const lines = fileReader.result?.toString()?.split("\n")
+
+      if (!validatePoapLinks(lines)) {
+        setError("texts", INVALID_LINKS_ERROR)
+        return
+      }
+
+      setValue("texts", lines)
+    }
+
+    fileReader.readAsText(file)
+  }
+
+  return (
+    <Button
+      {...getRootProps()}
+      as="label"
+      leftIcon={<File />}
+      h={10}
+      maxW="max-content"
+    >
+      <input {...getInputProps()} hidden />
+      {isDragActive ? "Drop the file here" : "Upload .txt"}
+    </Button>
+  )
+}
+
 export default UploadMintLinks