feat: add prop which allow update chain selection and reconnect (#89)

* feat: add prop which allow update chain selection and reconnect

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xdefi/wallets-connector",
-  "version": "2.3.5",
+  "version": "2.4.1",
   "description": "Cross chain wallets connector with react hooks",
   "author": "garageinc",
   "license": "MIT",

src/components/WalletsModal/SelectChainSection/SelectChainSection.tsx

@@ -17,21 +17,33 @@ import { IChainType } from 'src/constants'
 interface IProps {
   provider?: IProviderUserOptions | null
   onSelect: () => void
+  reconnectChains?: boolean
 }
 
-export const SelectChainSection = ({ provider, onSelect }: IProps) => {
+export const SelectChainSection = ({
+  provider,
+  onSelect,
+  reconnectChains
+}: IProps) => {
   const context = useContext(WalletsContext)
 
   const preSelectedChains = useMemo(() => {
+    const injectedChains = context?.getInjectedChains()
+    const connectedChains = injectedChains?.xdefi || injectedChains?.ctrl || []
+    if (connectedChains.length !== 0) {
+      return connectedChains
+    }
+
     if (
       !context?.chainSelectorOptions ||
       context.chainSelectorOptions === 'all'
     ) {
       return CHAIN_VALUES
     }
-    return CHAIN_VALUES.filter((val) =>
-      context.chainSelectorOptions.includes(val)
-    )
+
+    return CHAIN_VALUES.filter((val) => {
+      return context.chainSelectorOptions.includes(val)
+    })
   }, [context?.chainSelectorOptions])
 
   const [selectedChains, setSelectedChain] =
@@ -119,15 +131,22 @@ export const SelectChainSection = ({ provider, onSelect }: IProps) => {
 
   const isDisabled = useCallback(
     (chain) => {
+      if (reconnectChains) {
+        return false
+      }
       return Boolean(
         providerInjectedChains &&
           providerInjectedChains.some((chainName) => chain.value === chainName)
       )
     },
-    [providerInjectedChains]
+    [providerInjectedChains, reconnectChains]
   )
 
   useEffect(() => {
+    if (reconnectChains) {
+      return
+    }
+
     if (providerInjectedChains) {
       setSelectedChain((prev) => {
         return prev.filter(
@@ -136,7 +155,7 @@ export const SelectChainSection = ({ provider, onSelect }: IProps) => {
         )
       })
     }
-  }, [providerInjectedChains])
+  }, [providerInjectedChains, reconnectChains])
 
   return (
     <Container>
@@ -160,7 +179,7 @@ export const SelectChainSection = ({ provider, onSelect }: IProps) => {
       )}
       <ButtonWrapper>
         <PrimaryButton
-          label='Connect wallet'
+          label={reconnectChains ? 'Update chains selection' : 'Connect wallet'}
           fullWidth
           disabled={!selectedChains.length || loading}
           loading={loading}

src/components/WalletsModal/WalletsModal.tsx

@@ -1,7 +1,13 @@
-import React, { useCallback, useContext, useMemo, useState } from 'react'
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from 'react'
 import styled, { DefaultTheme } from 'styled-components'
 
-import { useWalletsOptions } from '../../hooks'
+import { useConnectorMultiChains, useWalletsOptions } from '../../hooks'
 import { useWalletsModal } from '../hooks'
 import { Modal, CloseModalSvg } from '../Modal/Modal'
 import { WalletProvider } from '../Provider'
@@ -15,20 +21,37 @@ interface IProps {
   isDark?: boolean
   themeBuilder?: (isDark: boolean) => DefaultTheme
   className?: string
+  forceReconnectChains?: boolean
 }
 
 export const WalletsModal = ({
   trigger: Trigger,
   themeBuilder,
   isDark = true,
-  className
+  className,
+  forceReconnectChains
 }: IProps) => {
-  const [isChainSelectorVisible, setIsChainSelectorVisible] =
-    useState<boolean>(false)
   const { providers: userOptions } = useWalletsOptions()
   const { isOpen, onClose, onOpen } = useWalletsModal()
   const context = useContext(WalletsContext)
 
+  const multiChains = useConnectorMultiChains()
+
+  const [isChainSelectorVisible, setIsChainSelectorVisible] =
+    useState<boolean>(false)
+
+  const isXdefiWalletConnected = !!multiChains?.injectedChains?.xdefi
+  const isCtrlWalletConnected = !!multiChains?.injectedChains?.ctrl
+  const shouldForceReconnectChains =
+    forceReconnectChains && (isXdefiWalletConnected || isCtrlWalletConnected)
+
+  useEffect(() => {
+    if (shouldForceReconnectChains) {
+      setIsChainSelectorVisible(true)
+      onOpen()
+    }
+  }, [shouldForceReconnectChains])
+
   const handleShowChainSelector = useCallback(() => {
     setIsChainSelectorVisible(true)
   }, [setIsChainSelectorVisible])
@@ -65,20 +88,28 @@ export const WalletsModal = ({
         className={className}
         renderHeader={
           isChainSelectorVisible
-            ? () => (
-                <CustomHeader>
-                  <SBackArrowSvg onClick={handleHideChainSelector} />
-                  <Title>Select chains</Title>
-                  <CloseModalSvg onClick={handleCloseModal} />
-                </CustomHeader>
-              )
+            ? () =>
+                shouldForceReconnectChains ? (
+                  <CustomHeader>
+                    <TitleAlignmentPlaceholder />
+                    <Title>Update selected chains</Title>
+                    <CloseModalSvg onClick={handleCloseModal} />
+                  </CustomHeader>
+                ) : (
+                  <CustomHeader>
+                    <SBackArrowSvg onClick={handleHideChainSelector} />
+                    <Title>Select chains</Title>
+                    <CloseModalSvg onClick={handleCloseModal} />
+                  </CustomHeader>
+                )
             : undefined
         }
       >
         {isChainSelectorVisible ? (
           <SelectChainSection
             provider={xdefiLikeProvider}
             onSelect={handleCloseModal}
+            reconnectChains={shouldForceReconnectChains}
           />
         ) : (
           <SRow>
@@ -138,3 +169,5 @@ const SBackArrowSvg = styled(BackArrowSvg)`
   width: 20px;
   height: 20px;
 `
+
+const TitleAlignmentPlaceholder = styled.div``