network funtionality added

aritroCoder · Dec 11, 2023 · 0c67f45 · 0c67f45
1 parent 2e36429
commit 0c67f45
Show file tree

Hide file tree

Showing 13 changed files with 181 additions and 50 deletions.
diff --git a/packages/site/src/components/CopyToClipboardButton.tsx b/packages/site/src/components/CopyToClipboardButton.tsx
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import Tooltip from '@mui/material/Tooltip';
+
+export const CopyToClipboardButton = ({ textToCopy }) => {
+  const [isTooltipOpen, setTooltipOpen] = useState(false);
+
+  const handleCopyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      setTooltipOpen(true);
+
+      // Hide tooltip after 2 seconds
+      setTimeout(() => {
+        setTooltipOpen(false);
+      }, 2000);
+    } catch (error) {
+      console.error('Unable to copy to clipboard', error);
+    }
+  };
+
+  return (
+    <>
+      <Tooltip title="Copy to Clipboard" open={isTooltipOpen}>
+        <ContentCopyIcon
+          style={{ marginLeft: '8px', cursor: 'pointer' }}
+          onClick={handleCopyToClipboard}
+        />
+      </Tooltip>
+    </>
+  );
+};
diff --git a/packages/site/src/components/Header.tsx b/packages/site/src/components/Header.tsx
@@ -9,6 +9,7 @@ import { connectSnap, getThemePreference, getSnap } from '../utils';
 import { HeaderButtons } from './Buttons';
 import { SnapLogo } from './SnapLogo';
 import { Toggle } from './Toggle';
+import { Network } from './Network';
 
 const HeaderWrapper = styled.header`
   display: flex;
@@ -64,7 +65,7 @@ export const Header = ({
     }
   };
   const [anchorEl, setAnchorEl] = useState(null);
-  const [selectedNetwork, setSelectedNetwork] = useState('mainnet');
+  const [selectedNetwork, setSelectedNetwork] = useState('devnet');
 
   const handleDropdownClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -78,14 +79,15 @@ export const Header = ({
     setSelectedNetwork(network);
     handleDropdownClose();
   };
+
   return (
     <HeaderWrapper>
       <LogoWrapper>
         <SnapLogo color={theme.colors.icon?.default} size={36} />
         <Title>SNAPTOS</Title>
       </LogoWrapper>
       <RightContainer>
-        <div
+        {/* <div
           style={{
             font: 'Roboto',
             fontSize: '1.6rem',
@@ -100,7 +102,6 @@ export const Header = ({
           }}
         >
           {selectedNetwork.toUpperCase()}{' '}
-          {/* Display the selected network in uppercase */}
           <ArrowDropDownCircleOutlinedIcon
             style={{
               fontSize: 15,
@@ -134,9 +135,9 @@ export const Header = ({
           >
             Devnet
           </MenuItem>
-
         </Menu>{' '}
-        <div style={{ marginRight: '20px' }} />
+        <div style={{ marginRight: '20px' }} /> */}
+        <Network/>
         <Toggle
           onToggle={handleToggleClick}
           defaultChecked={getThemePreference()}

diff --git a/packages/site/src/components/Network.tsx b/packages/site/src/components/Network.tsx
@@ -0,0 +1,78 @@
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { useState, useEffect } from 'react';
+import ArrowDropDownCircleOutlinedIcon from '@mui/icons-material/ArrowDropDownCircleOutlined';
+
+export const Network = () => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedNetwork, setSelectedNetwork] = useState('testnet');
+
+    const handleDropdownClick = (event) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleDropdownClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleNetworkSelect = (network) => {
+      setSelectedNetwork(network);
+      handleDropdownClose();
+    };
+    return (
+        <>
+        <div
+          style={{
+            font: 'Roboto',
+            fontSize: '1.6rem',
+            border: '1px solid #000',
+
+            borderRadius: '10px',
+            width: '10rem',
+            height: '3.4rem',
+            textAlign: 'center',
+            lineHeight: '3rem',
+            display: 'inline-block',
+          }}
+        >
+          {selectedNetwork.toUpperCase()}{' '}
+          {/* Display the selected network in uppercase */}
+          <ArrowDropDownCircleOutlinedIcon
+            style={{
+              fontSize: 15,
+              color: '#434343',
+              lineHeight: '3rem',          
+              display: 'inline-block'
+            }}
+            onClick={handleDropdownClick}
+          />
+        </div>
+        <Menu
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleDropdownClose}
+        >
+          <MenuItem
+            onClick={() => handleNetworkSelect('mainnet')}
+            sx={{ fontSize: '15px', font: 'Roboto' }}
+          >
+            Mainnet
+          </MenuItem>
+          <MenuItem
+            onClick={() => handleNetworkSelect('testnet')}
+            sx={{ fontSize: '15px', font: 'Roboto' }}
+          >
+            Testnet
+          </MenuItem>
+          <MenuItem
+            onClick={() => handleNetworkSelect('devnet')}
+            sx={{ fontSize: '15px', font: 'Roboto' }}
+          >
+            Devnet
+          </MenuItem>
+
+        </Menu>{' '}
+        <div style={{ marginRight: '20px' }} />
+        </>
+    )
+}
diff --git a/packages/site/src/components/index.ts b/packages/site/src/components/index.ts
@@ -6,3 +6,5 @@ export * from './MetaMask';
 export * from './PoweredBy';
 export * from './SnapLogo';
 export * from './Toggle';
+export * from './Network';
+export * from './CopyToClipboardButton';
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -55,9 +55,11 @@ import {
   LoginAccountButton,
   CreateAccountButton,
   SnapLogo,
+  CopyToClipboardButton
 } from '../components';
 import SendIcon from '@mui/icons-material/Send';
 import { SHA256 } from 'crypto-js';
+import {Network} from '../components';
 
 const Container = styled.div`
   display: flex;
@@ -225,6 +227,7 @@ const Index = () => {
   const [open, setOpen] = useState(false);
   const [txnHistory, setTxnHistory] = useState([]);
   const [txncCronJobActive, setTxnCronJobActive] = useState(false);
+  const [isMainet, setIsMainnet] = useState(false);
 
   const milliToDate = (milli: any) => {
     const monthNames = [
@@ -277,7 +280,7 @@ const Index = () => {
 
   const transactionCronJob = () => {
     const interval = setInterval(async () => {
-      const getTxn = await sendTxnHistory();
+      const getTxn = await sendTxnHistory(selectedNetwork);
       setTxnHistory(getTxn.txnHistory);
     }, 5000);
     console.log(interval);
@@ -382,7 +385,7 @@ const Index = () => {
   };
   const handleSendGetAccount = async () => {
     try {
-      const accountinfo: any = await sendGetAccount(password);
+      const accountinfo: any = await sendGetAccount(password, selectedNetwork);
       const { accountInfo } = accountinfo;
       const { address, bal } = accountInfo;
       setAddress(address);
@@ -401,7 +404,7 @@ const Index = () => {
       const hashedPassword = SHA256(inputPassword).toString();
       const accountinfo: any = await sendGetData(hashedPassword);
       const { address } = accountinfo;
-      const bal = await sendGetBalance();
+      const bal = await sendGetBalance(selectedNetwork);
       setAddress(address);
       setBalance(bal);
       setShowCreateAccountCard(false);
@@ -415,8 +418,8 @@ const Index = () => {
   const handleCoinTransfer = async () => {
     closeSendModal();
     try {
-      await sendCoin(recipientAddress, sendAmount);
-      const updatedBalance = await sendGetBalance();
+      await sendCoin(recipientAddress, sendAmount , selectedNetwork);
+      const updatedBalance = await sendGetBalance(selectedNetwork);
       setBalance(updatedBalance);
     } catch (error) {
       console.error(error);
@@ -430,8 +433,8 @@ const Index = () => {
   }, [isCreatingAccount]);
   const handleFundMeWithFaucet = async () => {
     try {
-      await sendFundMe();
-      const updatedBalance = await sendGetBalance();
+      await sendFundMe(selectedNetwork);
+      const updatedBalance = await sendGetBalance(selectedNetwork);
       setBalance(updatedBalance);
     } catch (error) {
       console.error(error);
@@ -441,7 +444,7 @@ const Index = () => {
 
   const handleGetAllTransactions = async () => {
     try {
-      const getTxn = await sendTxnHistory();
+      const getTxn = await sendTxnHistory(selectedNetwork);
       setTxnHistory(getTxn.txnHistory);
       toggleOpen();
       if (!txncCronJobActive) {
@@ -457,7 +460,7 @@ const Index = () => {
   /*DROP-DOWN LOGIC*/
 
   const [anchorEl, setAnchorEl] = useState(null);
-  const [selectedNetwork, setSelectedNetwork] = useState('mainnet');
+  const [selectedNetwork, setSelectedNetwork] = useState('testnet');
 
   const handleDropdownClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -467,10 +470,17 @@ const Index = () => {
     setAnchorEl(null);
   };
 
-  const handleNetworkSelect = (network) => {
+  const handleNetworkSelect =  async (network) => {
     setSelectedNetwork(network);
     handleDropdownClose();
-    // Add logic here to handle the selected network (e.g., switch network configuration)
+    if(network === 'mainnet'){
+      setIsMainnet(true);
+    }
+    else{
+      setIsMainnet(false);
+      const updatedBalance = await sendGetBalance(network);
+      setBalance(updatedBalance);
+    }
   };
   return (
     <Container>
@@ -544,7 +554,7 @@ const Index = () => {
             margin="normal"
           />
           <TextField
-            label="Amount"
+            label="Amount (APT)"
             type="number"
             value={sendAmount}
             onChange={handleAmountChange}
@@ -723,7 +733,7 @@ const Index = () => {
                 }}
                 onClick={() => {
                   window.open(
-                    `https://explorer.aptoslabs.com/account/${address}?network=devnet`,
+                    `https://explorer.aptoslabs.com/account/${address}?network=${selectedNetwork}`,
                     '_blank',
                   );
                 }}
@@ -736,10 +746,7 @@ const Index = () => {
                     <Typography variant="body1">
                       {address ? address : 'Loading...'}
                     </Typography>
-                    <ContentCopyIcon
-                      style={{ marginLeft: '8px', cursor: 'pointer' }}
-                      onClick={() => {}}
-                    />
+                    <CopyToClipboardButton textToCopy={address} />
                   </div>
                 </AccountModalContent>
               </AccountInfoBox>
@@ -748,7 +755,7 @@ const Index = () => {
                   gutterBottom
                   style={{ textAlign: 'center' }}
                 >
-                  {balance / Math.pow(10, 8)} APT
+                  {isMainet? 0 : balance / Math.pow(10, 8)} APT
                 </Typography>
 
               <HorizontalButtonContainer>
@@ -773,7 +780,7 @@ const Index = () => {
                     <SendIcon style={{ marginRight: '5px' }} />
                     SEND
                   </Button>
-                  <Button
+                  {!isMainet && <Button
                     variant="contained"
                     onClick={handleFundMeWithFaucet}
                     style={{
@@ -796,7 +803,7 @@ const Index = () => {
                   >
                     <Faucet style={{ fill: 'white', marginRight: '5px' }} />
                     FAUCET
-                  </Button>
+                  </Button>}
                   <Button
                     variant="contained"
                     onClick={handleGetAllTransactions}
@@ -884,7 +891,7 @@ const Index = () => {
                 }}
                 onClick={() => {
                   window.open(
-                    `https://explorer.aptoslabs.com/txn/${txn.hash}?network=devnet`,
+                    `https://explorer.aptoslabs.com/txn/${txn.hash}?network=${selectedNetwork}`,
                     '_blank',
                   );
                 }}