From 58148bb2514804f157dd73aa64cf7691cfd97dee Mon Sep 17 00:00:00 2001 From: Razvan Tomegea Date: Thu, 22 Aug 2024 19:27:02 +0300 Subject: [PATCH] Added ability to switch networks (#39) * Fixes * fixed TokenRow.tsx * Removed EGLD from sovereign transfer * Refactor * Fixed tests * Added ability to switch networks * Merge conflicts --- src/App.tsx | 21 +++--- src/components/Button/Button.tsx | 1 + src/components/Dropdown/Dropdown.tsx | 71 +++++++++++++++++++ src/components/Dropdown/index.tsx | 1 + src/components/Layout/Header/Header.tsx | 7 +- .../NetworkSwitcher/NetworkSwitcher.tsx | 39 ++++++++++ src/components/NetworkSwitcher/index.ts | 1 + src/components/index.ts | 2 + src/config/config.devnet.ts | 60 ++++++++++++++-- src/config/config.gateway.ts | 60 ++++++++++++++-- src/config/config.mainnet.ts | 60 ++++++++++++++-- src/config/config.sovereign.ts | 63 ++++++++++++++-- src/config/config.testnet.ts | 60 ++++++++++++++-- src/helpers/api/getBaseURL.ts | 14 ++-- src/helpers/api/getCurrentNetwork.ts | 9 +++ src/helpers/api/index.ts | 1 + src/localConstants/dataTestIds.enum.ts | 2 + .../getSovereignTransferTransaction.ts | 5 +- .../hooks/useSovereignTransferForm.ts | 8 ++- src/redux/reducers.ts | 8 ++- src/redux/selectors/index.ts | 1 + src/redux/selectors/network.ts | 5 ++ src/redux/slices/index.ts | 1 + src/redux/slices/network.ts | 59 +++++++++++++++ .../adapter/gatewayAdapter/gatewayAdapter.ts | 17 +++-- .../getGatewayConfigForCurrentRequest.ts | 12 ++-- version.json | 2 +- 27 files changed, 519 insertions(+), 71 deletions(-) create mode 100644 src/components/Dropdown/Dropdown.tsx create mode 100644 src/components/Dropdown/index.tsx create mode 100644 src/components/NetworkSwitcher/NetworkSwitcher.tsx create mode 100644 src/components/NetworkSwitcher/index.ts create mode 100644 src/helpers/api/getCurrentNetwork.ts create mode 100644 src/redux/selectors/network.ts create mode 100644 src/redux/slices/network.ts diff --git a/src/App.tsx b/src/App.tsx index ca7ad0b3..15675673 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { Provider } from 'react-redux'; +import { Provider, useSelector } from 'react-redux'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { PersistGate } from 'redux-persist/integration/react'; @@ -9,27 +9,24 @@ import { Utilities } from 'components'; -import { - apiTimeout, - walletConnectV2ProjectId, - environment, - sampleAuthenticatedDomains, - API_URL -} from 'config'; +import { apiTimeout, walletConnectV2ProjectId } from 'config'; import { provider } from 'helpers/app'; import { PageNotFound, Unlock } from 'pages'; import { routeNames, routes } from 'routes'; import { BatchTransactionsContextProvider } from 'wrappers'; +import { networkSelector } from './redux/selectors'; import { persistor, store } from './redux/store'; const AppContent = () => { + const { activeNetwork } = useSelector(networkSelector); + return ( { }; export const MainApp = () => { + const { activeNetwork } = useSelector(networkSelector); + return ( diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 76d17151..f602c7ba 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -27,6 +27,7 @@ export const Button = ({ id={id} onClick={onClick} type={type} + {...otherProps} > {children} diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx new file mode 100644 index 00000000..260c4490 --- /dev/null +++ b/src/components/Dropdown/Dropdown.tsx @@ -0,0 +1,71 @@ +import { useState } from 'react'; +import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button } from '../Button'; + +export interface DropdownOption { + label: string; + value: string; +} + +interface DropdownPropsType { + initialOption: DropdownOption; + onSelectOption: (option: DropdownOption) => void; + options: DropdownOption[]; +} + +export const Dropdown = ({ + initialOption, + onSelectOption, + options +}: DropdownPropsType) => { + const [isOpen, setIsOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState(initialOption.label); + + const toggleDropdown = () => { + setIsOpen(!isOpen); + }; + + const handleSelectOption = (option: DropdownOption) => () => { + setSelectedOption(option.label); + onSelectOption(option); + toggleDropdown(); + }; + + return ( +
+ + + {isOpen && ( +
+
+ {options.map((option, index) => ( + + ))} +
+
+ )} +
+ ); +}; diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx new file mode 100644 index 00000000..2f29bad4 --- /dev/null +++ b/src/components/Dropdown/index.tsx @@ -0,0 +1 @@ +export * from './Dropdown'; diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx index f49b432f..65e0238e 100644 --- a/src/components/Layout/Header/Header.tsx +++ b/src/components/Layout/Header/Header.tsx @@ -1,10 +1,10 @@ import { useMatch } from 'react-router-dom'; import { MxLink } from 'components/MxLink'; -import { environment } from 'config'; import { useGetIsLoggedIn } from 'lib'; import { DataTestIdsEnum, RouteNamesEnum } from 'localConstants'; import { routeNames } from 'routes'; import MultiversXLogo from '../../../assets/img/multiversx-logo.svg?react'; +import { NetworkSwitcher } from '../../NetworkSwitcher'; export const Header = () => { const isLoggedIn = useGetIsLoggedIn(); @@ -27,10 +27,7 @@ export const Header = () => {