diff --git a/src/widgets/Navbar/NetworkButton.tsx b/src/widgets/Navbar/NetworkButton.tsx index 6b1784ed..a51db3b0 100644 --- a/src/widgets/Navbar/NetworkButton.tsx +++ b/src/widgets/Navbar/NetworkButton.tsx @@ -2,19 +2,20 @@ import React from "react"; import { ArrowDropDownIcon } from "../../components/Svg"; import { useNetworkModal, SwitchNetwork } from "../NetworkModal"; -import { NETWORK_ICON, NETWORK_LABEL } from "../NetworkModal/config"; +import { ChainId, NETWORK_ICON, NETWORK_LABEL } from "../NetworkModal/config"; import { Button } from "../../components/Button"; import { Text } from "../../components/Text"; import styles from "./styles"; -interface Props { +export interface Props { chainId: number; switchNetwork: SwitchNetwork; t: (key: string) => string; + supportedChains?: ChainId[]; } -const NetworkButton: React.FC = ({ chainId, switchNetwork, t }) => { - const { onPresentNetworkModal } = useNetworkModal(switchNetwork, chainId, t); +const NetworkButton: React.FC = ({ chainId, switchNetwork, t, supportedChains }) => { + const { onPresentNetworkModal } = useNetworkModal(switchNetwork, chainId, t, supportedChains); const Icon = NETWORK_ICON[chainId]; return ( diff --git a/src/widgets/NetworkModal/SelectNetworkModal.tsx b/src/widgets/NetworkModal/SelectNetworkModal.tsx index cf1eb87c..9c25a960 100644 --- a/src/widgets/NetworkModal/SelectNetworkModal.tsx +++ b/src/widgets/NetworkModal/SelectNetworkModal.tsx @@ -3,21 +3,25 @@ import { partition } from "lodash"; import { Modal, ModalHeader } from "../Modal"; import { SwitchNetwork } from "./types"; import { Heading } from "../../components/Heading"; -import networks from "./config"; +import networks, { ChainId } from "./config"; import NetworkCard from "./NetworkCard"; import { Svg } from "../../components/Svg"; import { Flex } from "../../components/Flex"; import styles from "./styles"; -interface Props { +export interface Props { switchNetwork: SwitchNetwork; chainId: number; t: (key: string) => string; onDismiss?: () => void; + supportedChains?: ChainId[]; } -const SelectNetworkModal: React.FC = ({ switchNetwork, chainId, t, onDismiss }) => { - const [selectedNetwork, networkList] = partition(networks, (network) => network.chainId === chainId); +const SelectNetworkModal: React.FC = ({ switchNetwork, chainId, t, onDismiss, supportedChains }) => { + const filteredNetworks = supportedChains + ? networks.filter((network) => supportedChains?.includes(network.chainId)) + : networks; + const [selectedNetwork, networkList] = partition(filteredNetworks, (network) => network.chainId === chainId); return ( diff --git a/src/widgets/NetworkModal/useNetworkModal.tsx b/src/widgets/NetworkModal/useNetworkModal.tsx index 9675e88b..58c70ee9 100644 --- a/src/widgets/NetworkModal/useNetworkModal.tsx +++ b/src/widgets/NetworkModal/useNetworkModal.tsx @@ -2,14 +2,20 @@ import React from "react"; import { useModal } from "../Modal"; import { SwitchNetwork } from "./types"; import SelectNetworkModal from "./SelectNetworkModal"; +import { ChainId } from "./config"; interface ReturnType { onPresentNetworkModal: () => void; } -const useNetworkModal = (switchNetwork: SwitchNetwork, chainId: number, t: (key: string) => string): ReturnType => { +const useNetworkModal = ( + switchNetwork: SwitchNetwork, + chainId: number, + t: (key: string) => string, + supportedChains?: ChainId[] +): ReturnType => { const [onPresentNetworkModal] = useModal( - , + , true, false, "NetworkModal"