From 9836d28e9acd9e00a9bf03b967bd579e977255a3 Mon Sep 17 00:00:00 2001
From: maxlm-devico <98474638+maxlm-devico@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:20:52 +0200
Subject: [PATCH] feat: add prop which allow update chain selection and
 reconnect (#89)

* feat: add prop which allow update chain selection and reconnect
---
 package.json                                  |  2 +-
 .../SelectChainSection/SelectChainSection.tsx | 33 ++++++++---
 src/components/WalletsModal/WalletsModal.tsx  | 57 +++++++++++++++----
 3 files changed, 72 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 5608fa1..dbaca08 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/WalletsModal/SelectChainSection/SelectChainSection.tsx b/src/components/WalletsModal/SelectChainSection/SelectChainSection.tsx
index a404c65..c864ba1 100644
--- a/src/components/WalletsModal/SelectChainSection/SelectChainSection.tsx
+++ b/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}
diff --git a/src/components/WalletsModal/WalletsModal.tsx b/src/components/WalletsModal/WalletsModal.tsx
index e311030..3ef8341 100644
--- a/src/components/WalletsModal/WalletsModal.tsx
+++ b/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,13 +88,20 @@ 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
         }
       >
@@ -79,6 +109,7 @@ export const WalletsModal = ({
           <SelectChainSection
             provider={xdefiLikeProvider}
             onSelect={handleCloseModal}
+            reconnectChains={shouldForceReconnectChains}
           />
         ) : (
           <SRow>
@@ -138,3 +169,5 @@ const SBackArrowSvg = styled(BackArrowSvg)`
   width: 20px;
   height: 20px;
 `
+
+const TitleAlignmentPlaceholder = styled.div``