Social account recovery option & modal instead of toast

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

@@ -1,6 +1,7 @@
 import { usePrevious } from "@chakra-ui/react"
 import useUser from "components/[guild]/hooks/useUser"
 import { usePostHogContext } from "components/_app/PostHogProvider"
+import { useWeb3ConnectionManager } from "components/_app/Web3ConnectionManager"
 import useShowErrorToast from "hooks/useShowErrorToast"
 import { SignedValdation, useSubmitWithSign } from "hooks/useSubmit"
 import { useEffect } from "react"
@@ -57,7 +58,8 @@ const useConnectPlatform = (
   platform: PlatformName,
   onSuccess?: () => void,
   isReauth?: boolean, // Temporary, once /connect works without it, we can remove this
-  scope?: string
+  scope?: string,
+  isRecovery?: boolean
 ) => {
   const { platformUsers } = useUser()
   const { onOpen, authData, isAuthenticating, ...rest } =
@@ -76,6 +78,7 @@ const useConnectPlatform = (
       platformName: platform,
       authData,
       reauth: isReauth || undefined,
+      disconnectFromExistingUser: isRecovery || undefined,
     })
   }, [authData, platformUsers])
 
@@ -92,6 +95,7 @@ const useConnectPlatform = (
 const useConnect = (onSuccess?: () => void, isAutoConnect = false) => {
   const { captureEvent } = usePostHogContext()
   const showErrorToast = useShowErrorToast()
+  const { showPlatformMergeModal } = useWeb3ConnectionManager()
 
   const { mutate: mutateUser } = useUser()
 
@@ -152,7 +156,15 @@ const useConnect = (onSuccess?: () => void, isAutoConnect = false) => {
       }
 
       captureEvent("Platform connection error", errorObject)
-      showErrorToast(toastError ?? rawError)
+
+      if (toastError?.startsWith("Before connecting your")) {
+        const [, addressOrDomain] = toastError.match(
+          /^Before connecting your (?:.*?) account, please disconnect it from this address: (.*?)$/
+        )
+        showPlatformMergeModal(addressOrDomain, platformName)
+      } else {
+        showErrorToast(toastError ?? rawError)
+      }
     },
   })
 }

src/components/_app/Web3ConnectionManager/Web3ConnectionManager.tsx

@@ -9,12 +9,14 @@ import useContractWalletInfoToast from "hooks/useContractWalletInfoToast"
 import useToast from "hooks/useToast"
 import { useRouter } from "next/router"
 import {
-  createContext,
   PropsWithChildren,
+  createContext,
   useContext,
   useEffect,
   useState,
 } from "react"
+import { PlatformName } from "types"
+import PlatformMergeErrorModal from "./components/PlatformMergeErrorModal"
 import WalletSelectorModal from "./components/WalletSelectorModal"
 import useConnectFromLocalStorage from "./hooks/useConnectFromLocalStorage"
 import useEagerConnect from "./hooks/useEagerConnect"
@@ -38,6 +40,10 @@ const Web3Connection = createContext({
   isDelegateConnection: false,
   setIsDelegateConnection: (_: boolean) => {},
   isNetworkChangeInProgress: false,
+  showPlatformMergeModal: (
+    _addressOrDomain: string,
+    _platformName: PlatformName
+  ) => {},
 })
 
 const Web3ConnectionManager = ({
@@ -64,6 +70,14 @@ const Web3ConnectionManager = ({
     onOpen: openAccountModal,
     onClose: closeAccountModal,
   } = useDisclosure()
+  const {
+    isOpen: isPlatformMergeModalOpen,
+    onOpen: openPlatformMergeModal,
+    onClose: closePlatformMergeModal,
+  } = useDisclosure()
+  const [accountMergeAddress, setAccountMergeAddress] = useState<string>("")
+  const [accountMergePlatformName, setAccountMergePlatformName] =
+    useState<PlatformName>()
 
   const [isDelegateConnection, setIsDelegateConnection] = useState<boolean>(false)
 
@@ -101,9 +115,19 @@ const Web3ConnectionManager = ({
     }
   }
 
+  const showPlatformMergeModal = (
+    addressOrDomain: string,
+    platformName: PlatformName
+  ) => {
+    setAccountMergeAddress(addressOrDomain)
+    setAccountMergePlatformName(platformName)
+    openPlatformMergeModal()
+  }
+
   return (
     <Web3Connection.Provider
       value={{
+        showPlatformMergeModal,
         isWalletSelectorModalOpen,
         openWalletSelectorModal,
         closeWalletSelectorModal,
@@ -127,6 +151,12 @@ const Web3ConnectionManager = ({
         onClose={closeWalletSelectorModal}
       />
       <NetworkModal isOpen={isNetworkModalOpen} onClose={closeNetworkModal} />
+      <PlatformMergeErrorModal
+        onClose={closePlatformMergeModal}
+        isOpen={isPlatformMergeModalOpen}
+        addressOrDomain={accountMergeAddress}
+        platformName={accountMergePlatformName}
+      />
     </Web3Connection.Provider>
   )
 }

src/components/_app/Web3ConnectionManager/components/PlatformMergeErrorModal.tsx

@@ -0,0 +1,102 @@
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  chakra,
+} from "@chakra-ui/react"
+import { useWeb3React } from "@web3-react/core"
+import useConnectPlatform from "components/[guild]/JoinModal/hooks/useConnectPlatform"
+import Button from "components/common/Button"
+import Link from "components/common/Link"
+import useToast from "hooks/useToast"
+import platforms from "platforms/platforms"
+import { PlatformName } from "types"
+import capitalize from "utils/capitalize"
+import shortenHex from "utils/shortenHex"
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  addressOrDomain: string
+  platformName: PlatformName
+}
+
+const PlatformMergeErrorModal = ({
+  isOpen,
+  onClose,
+  addressOrDomain,
+  platformName,
+}: Props) => {
+  const { account } = useWeb3React()
+  const toast = useToast()
+  const socialAccountName = platforms[platformName]?.name ?? "social"
+  const { onConnect, isLoading } = useConnectPlatform(
+    platformName ?? "DISCORD",
+    () => {
+      toast({
+        status: "success",
+        title: "Recovered",
+        description: `${capitalize(
+          socialAccountName
+        )} account successfully recovered!`,
+      })
+      onClose()
+    },
+    undefined,
+    undefined,
+    true
+  )
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size={"lg"}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          {capitalize(socialAccountName)} account already connected
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody display={"flex"} flexDir={"column"} gap={5}>
+          <Box>
+            This {socialAccountName} account is already connected to this address:{" "}
+            <chakra.span fontWeight={"bold"}>{addressOrDomain}</chakra.span>
+          </Box>
+          <Box>
+            If you have control over the above address, you can switch to it, and
+            link your current address ({account ? shortenHex(account) : ""}) to it by
+            following{" "}
+            <Link
+              colorScheme="primary"
+              target="_blank"
+              href={
+                "https://help.guild.xyz/en/articles/6947559-how-to-un-link-wallet-addresses"
+              }
+            >
+              this guide
+            </Link>
+          </Box>
+          In case you have lost control over the mentioned address, you can recover
+          your {socialAccountName} account by clicking the recover button below
+        </ModalBody>
+        <ModalFooter display={"flex"} gap={4} mt="-4">
+          <Button onClick={() => onClose()} variant="outline">
+            Close
+          </Button>
+          <Button
+            onClick={() => onConnect()}
+            isLoading={isLoading}
+            colorScheme="primary"
+          >
+            Recover
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default PlatformMergeErrorModal