chore: Added supportedchains to networkbutton

ApeSwapFinance · Nov 15, 2022 · f61f8b6 · f61f8b6
1 parent 81cf426
commit f61f8b6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git 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<Props> = ({ chainId, switchNetwork, t }) => {
-  const { onPresentNetworkModal } = useNetworkModal(switchNetwork, chainId, t);
+const NetworkButton: React.FC<Props> = ({ 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
@@ -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<Props> = ({ switchNetwork, chainId, t, onDismiss }) => {
-  const [selectedNetwork, networkList] = partition(networks, (network) => network.chainId === chainId);
+const SelectNetworkModal: React.FC<Props> = ({ 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 (
     <Modal maxWidth="350px" minWidth="350px" onDismiss={onDismiss}>
       <ModalHeader>

diff --git 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(
-    <SelectNetworkModal switchNetwork={switchNetwork} chainId={chainId} t={t} />,
+    <SelectNetworkModal switchNetwork={switchNetwork} chainId={chainId} t={t} supportedChains={supportedChains} />,
     true,
     false,
     "NetworkModal"