resolve circular dependencies (#1414)

* fix(dcd): remove SelectRolePanel

* fix(dcd): extract constant and update import

* fix(dcd): refactor and pull useSubmit hook apart

* chore: prevent barrel file import

* chore: isolate more util functions

* Revert "fix(dcd): remove SelectRolePanel"

This reverts commit 960fb06.

* refactor: move fuelSign into utils

* fix(dcd): pull apart ToolbarPlugin

* fix: update imports

* fix: rename imports

* fix(dcd): pull apart EditGuildDrawerContext

* fix: update EditGuildProvider import

src/components/[guild]/AccessHub/hooks/useRemoveGuildPlatform.ts

@@ -1,7 +1,7 @@
 import useGuild from "components/[guild]/hooks/useGuild"
 import useShowErrorToast from "hooks/useShowErrorToast"
 import { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
-import { UseSubmitOptions } from "hooks/useSubmit/useSubmit"
+import { UseSubmitOptions } from "hooks/useSubmit/types"
 import useToast from "hooks/useToast"
 import fetcher from "utils/fetcher"
 

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

@@ -42,7 +42,7 @@ import { Chain } from "wagmiConfig/chains"
 import LeaveButton from "../LeaveButton"
 import useGuildPermission from "../hooks/useGuildPermission"
 import useUser from "../hooks/useUser"
-import Admins from "./components/Admins"
+import Admins from "./components/Admins/Admins"
 import BackgroundImageUploader from "./components/BackgroundImageUploader"
 import ChangingGuildPinDesignAlert from "./components/ChangingGuildPinDesignAlert"
 import ColorPicker from "./components/ColorPicker"

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

@@ -1,34 +1,11 @@
-import { useDisclosure } from "@chakra-ui/react"
-import dynamic from "next/dynamic"
-import { PropsWithChildren, createContext, useContext } from "react"
-import useGuild from "../hooks/useGuild"
-import useGuildPermission from "../hooks/useGuildPermission"
+import { createContext, useContext } from "react"
 
-const EditGuildDrawerContext = createContext<{
+export const EditGuildDrawerContext = createContext<{
   isOpen: boolean
   onOpen: () => void
   onClose: () => void
 }>(undefined)
 
-const DynamicEditGuildDrawer = dynamic(() => import("./EditGuildDrawer"))
-
-const EditGuildDrawerProvider = ({
-  children,
-}: PropsWithChildren<unknown>): JSX.Element => {
-  const { isDetailed } = useGuild()
-  const { isAdmin } = useGuildPermission()
-  const { isOpen, onOpen, onClose } = useDisclosure()
-
-  return (
-    <EditGuildDrawerContext.Provider value={{ isOpen, onOpen, onClose }}>
-      {children}
-      {isAdmin && isDetailed && (
-        <DynamicEditGuildDrawer isOpen={isOpen} onClose={onClose} />
-      )}
-    </EditGuildDrawerContext.Provider>
-  )
-}
-
 const useEditGuildDrawer = () => useContext(EditGuildDrawerContext)
 
-export { EditGuildDrawerProvider, useEditGuildDrawer }
+export { useEditGuildDrawer }

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

@@ -0,0 +1,24 @@
+import { useDisclosure } from "@chakra-ui/react"
+import dynamic from "next/dynamic"
+import { PropsWithChildren } from "react"
+import useGuild from "../hooks/useGuild"
+import useGuildPermission from "../hooks/useGuildPermission"
+import { EditGuildDrawerContext } from "./EditGuildDrawerContext"
+
+const DynamicEditGuildDrawer = dynamic(() => import("./EditGuildDrawer"))
+export const EditGuildDrawerProvider = ({
+  children,
+}: PropsWithChildren<unknown>): JSX.Element => {
+  const { isDetailed } = useGuild()
+  const { isAdmin } = useGuildPermission()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  return (
+    <EditGuildDrawerContext.Provider value={{ isOpen, onOpen, onClose }}>
+      {children}
+      {isAdmin && isDetailed && (
+        <DynamicEditGuildDrawer isOpen={isOpen} onClose={onClose} />
+      )}
+    </EditGuildDrawerContext.Provider>
+  )
+}

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

@@ -29,7 +29,7 @@ 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 TransferOwnership from "../TransferOwnership/TransferOwnership"
 
 export const isValidAddress = (address: string) =>
   ADDRESS_REGEX.test(address) || FUEL_ADDRESS_REGEX.test(address)

src/components/[guild]/JoinModal/hooks/useActiveMembershipUpdate.tsx

@@ -2,7 +2,7 @@ import type { AccessCheckJob, JoinJob } from "@guildxyz/types"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useMembership from "components/explorer/hooks/useMembership"
 import { useFetcherWithSign } from "hooks/useFetcherWithSign"
-import { UseSubmitOptions } from "hooks/useSubmit/useSubmit"
+import { UseSubmitOptions } from "hooks/useSubmit/types"
 import { atom, useAtom } from "jotai"
 import useSWRImmutable from "swr/immutable"
 import { groupBy } from "../utils/mapAccessJobState"

src/components/[guild]/JoinModal/hooks/useConnectPlatform.ts

@@ -7,7 +7,7 @@ import { env } from "env"
 import { useFetcherWithSign } from "hooks/useFetcherWithSign"
 import usePopupWindow from "hooks/usePopupWindow"
 import useSubmit, { SignedValidation, useSubmitWithSign } from "hooks/useSubmit"
-import { UseSubmitOptions } from "hooks/useSubmit/useSubmit"
+import { UseSubmitOptions } from "hooks/useSubmit/types"
 import { useSetAtom } from "jotai"
 import { OAuthResultParams } from "pages/oauth-result"
 import { useCallback, useMemo } from "react"

src/components/[guild]/JoinModal/hooks/useJoin.tsx

@@ -1,10 +1,10 @@
 import { JoinJob } from "@guildxyz/types"
 import { CircleWavyCheck } from "@phosphor-icons/react"
-import { GUILD_PIN_MAINTENANCE } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/MintGuildPin"
+import { GUILD_PIN_MAINTENANCE } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/constants"
 import { useMintGuildPinContext } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPinContext"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useUser from "components/[guild]/hooks/useUser"
-import { UseSubmitOptions } from "hooks/useSubmit/useSubmit"
+import { UseSubmitOptions } from "hooks/useSubmit/types"
 import { useToastWithButton, useToastWithTweetButton } from "hooks/useToast"
 import { useRouter } from "next/router"
 import { useState } from "react"

src/components/[guild]/JoinModal/hooks/useMembershipUpdate.tsx

@@ -6,7 +6,7 @@ import useMembership from "components/explorer/hooks/useMembership"
 import useCustomPosthogEvents from "hooks/useCustomPosthogEvents"
 import { useFetcherWithSign } from "hooks/useFetcherWithSign"
 import useSubmit from "hooks/useSubmit"
-import { UseSubmitOptions } from "hooks/useSubmit/useSubmit"
+import { UseSubmitOptions } from "hooks/useSubmit/types"
 import { atom, useAtom } from "jotai"
 import useUsersPoints from "rewards/Points/useUsersPoints"
 import getGuildPlatformsOfRoles from "../utils/getGuildPlatformsOfRoles"

src/components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/Fuel/MintFuelGuildPin.tsx

@@ -17,7 +17,7 @@ import { Modal } from "components/common/Modal"
 import { useMintGuildPinContext } from "../../MintGuildPinContext"
 import AlphaTag from "../../components/AlphaTag"
 import GuildPinImage from "../../components/GuildPinImage"
-import { GUILD_PIN_MAINTENANCE } from "../MintGuildPin"
+import { GUILD_PIN_MAINTENANCE } from "../constants"
 import FuelGuildPinFees from "./FuelGuildPinFees"
 import MintFuelGuildPinButton from "./MintFuelGuildPinButton"
 

src/components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/MintGuildPin.tsx

@@ -26,8 +26,7 @@ import TransactionStatusModal from "../components/TransactionStatusModal"
 import GuildPinOpenseaLink from "../components/TransactionStatusModal/components/GuildPinOpenseaLink"
 import MintGuildPinButton from "../components/buttons/MintGuildPinButton"
 import SwitchNetworkButton from "../components/buttons/SwitchNetworkButton"
-
-export const GUILD_PIN_MAINTENANCE = false
+import { GUILD_PIN_MAINTENANCE } from "./constants"
 
 const DynamicActivateGuildPinModal = dynamic(
   () => import("./components/ActivateGuildPinModal")

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

@@ -0,0 +1 @@
+export const GUILD_PIN_MAINTENANCE = false

src/components/lexical/plugins/ToolbarPlugin/ToolbarPlugin.tsx

@@ -23,7 +23,7 @@ import {
   $createQuoteNode,
   $isHeadingNode,
 } from "@lexical/rich-text"
-import { $isAtNodeEnd, $wrapNodes } from "@lexical/selection"
+import { $wrapNodes } from "@lexical/selection"
 import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils"
 import {
   ArrowClockwise,
@@ -56,8 +56,8 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react"
 import ImageEditor from "./components/ImageEditor"
 import LinkEditor from "./components/LinkEditor"
-
-export const LOW_PRIORITY = 1
+import { LOW_PRIORITY } from "./constants"
+import { getSelectedNode } from "./utils"
 
 const supportedBlockTypes = [
   "paragraph",
@@ -94,25 +94,6 @@ const blockTypeToBlockIcon: Record<
   code: Code,
 }
 
-export const getSelectedNode = (selection) => {
-  const anchor = selection.anchor
-  const focus = selection.focus
-  const anchorNode = selection.anchor.getNode()
-  const focusNode = selection.focus.getNode()
-
-  if (anchorNode === focusNode) {
-    return anchorNode
-  }
-
-  const isBackward = selection.isBackward()
-
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode
-  } else {
-    return $isAtNodeEnd(anchor) ? focusNode : anchorNode
-  }
-}
-
 const BlockOptionsMenuList = ({
   editor,
   blockType,

src/components/lexical/plugins/ToolbarPlugin/components/LinkEditor.tsx

@@ -21,7 +21,8 @@ import { $getSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND } from "lexi
 import { useCallback, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { ensureUrlProtocol } from "utils/ensureUrlProtocol"
-import { LOW_PRIORITY, getSelectedNode } from "../ToolbarPlugin"
+import { LOW_PRIORITY } from "../constants"
+import { getSelectedNode } from "../utils"
 
 type LinkEditorProps = {
   isOpen: boolean

src/components/lexical/plugins/ToolbarPlugin/constants.ts

@@ -0,0 +1 @@
+export const LOW_PRIORITY = 1

src/components/lexical/plugins/ToolbarPlugin/utils.ts

@@ -0,0 +1,20 @@
+import { $isAtNodeEnd } from "@lexical/selection"
+
+export const getSelectedNode = (selection) => {
+  const anchor = selection.anchor
+  const focus = selection.focus
+  const anchorNode = selection.anchor.getNode()
+  const focusNode = selection.focus.getNode()
+
+  if (anchorNode === focusNode) {
+    return anchorNode
+  }
+
+  const isBackward = selection.isBackward()
+
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode
+  }
+}

src/hooks/useSetKeyPair.ts

@@ -9,7 +9,7 @@ import { StoredKeyPair, setKeyPairToIdb } from "utils/keyPair"
 import { recaptchaAtom, shouldUseReCAPTCHAAtom } from "utils/recaptcha"
 import { checksumAddress } from "viem"
 import useSubmit from "./useSubmit"
-import { MessageParams, SignProps, UseSubmitOptions } from "./useSubmit/useSubmit"
+import { MessageParams, SignProps, UseSubmitOptions } from "./useSubmit/types"
 
 function getSiweMessage({
   addr,

src/hooks/useSubmit/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_MESSAGE = "Please sign this message"
+export const DEFAULT_SIGN_LOADING_TEXT = "Check your wallet"

src/hooks/useSubmit/index.ts

@@ -1,2 +1,2 @@
-export { default, sign, useSubmitWithSign } from "./useSubmit"
-export type { SignedValidation, Validation } from "./useSubmit"
+export { default, useSubmitWithSign } from "./useSubmit"
+export type { SignedValidation, Validation } from "./types"

src/hooks/useSubmit/types.ts

@@ -0,0 +1,46 @@
+import { Account } from "fuels"
+import { ValidationMethod } from "types"
+import { PublicClient, WalletClient } from "viem"
+
+type SignBaseProps = {
+  address: `0x${string}`
+  payload: string
+  chainId?: string
+  forcePrompt: boolean
+  keyPair?: CryptoKeyPair
+  msg?: string
+  ts?: number
+  getMessageToSign?: (params: MessageParams) => string
+}
+
+export type SignProps = SignBaseProps & {
+  publicClient: PublicClient
+  walletClient: WalletClient
+}
+
+export type FuelSignProps = SignBaseProps & { wallet: Account }
+
+export type SignedValidation = { signedPayload: string; validation: Validation }
+
+export type Validation = {
+  params: MessageParams
+  sig: string
+}
+
+export type MessageParams = {
+  msg: string
+  addr: string
+  method: ValidationMethod
+  chainId?: string
+  hash?: string
+  nonce: string
+  ts: string
+}
+
+export type UseSubmitOptions<ResponseType = void> = {
+  onSuccess?: (response: ResponseType) => void
+  onError?: (error: any) => void
+
+  // Use catefully! If this is set to true, a .onSubmit() call can reject!
+  allowThrow?: boolean
+}