From 66485fcb3e3adfbea109bd2b4fc0cb47e70a790d Mon Sep 17 00:00:00 2001
From: ProPratik1405 <sariapratik@gmail.com>
Date: Sun, 27 Feb 2022 22:53:00 +0530
Subject: [PATCH] Network Button Added

---
 packages/ui/react-ui/src/NetworkButton.tsx | 42 ++++++++++++++++++++++
 packages/ui/react-ui/src/index.ts          |  1 +
 2 files changed, 43 insertions(+)
 create mode 100644 packages/ui/react-ui/src/NetworkButton.tsx

diff --git a/packages/ui/react-ui/src/NetworkButton.tsx b/packages/ui/react-ui/src/NetworkButton.tsx
new file mode 100644
index 000000000..d5f2bdd6d
--- /dev/null
+++ b/packages/ui/react-ui/src/NetworkButton.tsx
@@ -0,0 +1,42 @@
+import React, { FC, useState, useEffect, useCallback } from 'react';
+import { useWallet, useConnection } from '@solana/wallet-adapter-react';
+import { Button, ButtonProps } from './Button';
+import { WalletAdapterNetworks } from './NetworkModal';
+import { useNetworkModal } from './useNetworkModal';
+
+export interface NetworkButtonProps {
+    className?: string;
+}
+
+export const NetworkButton: FC<NetworkButtonProps> = ({ className = '' }) => {
+    const { endpoint } = useConnection();
+    const [network, setNetwork] = useState<{ label: string; value: string }>(WalletAdapterNetworks[0]);
+    const { setModalVisible } = useNetworkModal();
+
+    const openNetworkModal = useCallback(() => {
+        setModalVisible(true);
+    }, []);
+    const determineCluster = () => {
+        if (endpoint === 'https://api.devnet.solana.com' || endpoint === 'http://api.devnet.solana.com') {
+            setNetwork(WalletAdapterNetworks[2]);
+        } else if (endpoint === 'https://api.testnet.solana.com' || endpoint === 'http://testnet.solana.com') {
+            setNetwork(WalletAdapterNetworks[1]);
+        } else if (
+            endpoint === 'https://api.mainnet-beta.solana.com/' ||
+            endpoint === 'http://api.mainnet-beta.solana.com/'
+        ) {
+            setNetwork(WalletAdapterNetworks[0]);
+        } else {
+            setNetwork({ label: 'Custom', value: 'Custom' });
+        }
+    };
+    console.log(endpoint);
+    useEffect(() => {
+        determineCluster();
+    });
+    return (
+        <Button className={className} onClick={openNetworkModal}>
+            {network.label}
+        </Button>
+    );
+};
diff --git a/packages/ui/react-ui/src/index.ts b/packages/ui/react-ui/src/index.ts
index e6866c192..ef82ecaaa 100644
--- a/packages/ui/react-ui/src/index.ts
+++ b/packages/ui/react-ui/src/index.ts
@@ -8,3 +8,4 @@ export * from './WalletIcon';
 export * from './WalletMultiButton';
 export * from './NetworkModalProvider';
 export * from './NetworkModal';
+export * from "./NetworkButton";
\ No newline at end of file