init: impersonator functional
This commit is contained in:
CodinMaster
250
src/components/Body/index.js
Normal file
250
src/components/Body/index.js
Normal file
@@ -0,0 +1,250 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Container,
|
||||
Input,
|
||||
FormControl,
|
||||
useColorMode,
|
||||
FormLabel,
|
||||
Button,
|
||||
Box,
|
||||
Avatar,
|
||||
Text,
|
||||
Link,
|
||||
VStack,
|
||||
Spacer,
|
||||
Select,
|
||||
} from "@chakra-ui/react";
|
||||
import WalletConnect from "@walletconnect/client";
|
||||
import networkInfo from "./networkInfo";
|
||||
|
||||
function Body() {
|
||||
const { colorMode } = useColorMode();
|
||||
const bgColor = { light: "white", dark: "gray.700" };
|
||||
|
||||
const [address, setAddress] = useState("");
|
||||
const [uri, setUri] = useState("");
|
||||
const [chainIdIndex, setChainIdIndex] = useState(0);
|
||||
const [connector, setConnector] = useState();
|
||||
const [peerMeta, setPeerMeta] = useState();
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const session = getCachedSession();
|
||||
|
||||
if (session) {
|
||||
let _connector = new WalletConnect({ session });
|
||||
|
||||
setConnector(_connector);
|
||||
setAddress(_connector.accounts[0]);
|
||||
setUri(_connector.uri);
|
||||
setPeerMeta(_connector.peerMeta);
|
||||
setIsConnected(true);
|
||||
|
||||
const chainId = _connector.chainId.chainID;
|
||||
for (let i = 0; i < networkInfo.length; i++) {
|
||||
if (networkInfo[i].chainID == chainId) {
|
||||
setChainIdIndex(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (connector) {
|
||||
subscribeToEvents();
|
||||
}
|
||||
}, [connector]);
|
||||
|
||||
const getCachedSession = () => {
|
||||
const local = localStorage ? localStorage.getItem("walletconnect") : null;
|
||||
|
||||
let session = null;
|
||||
if (local) {
|
||||
try {
|
||||
session = JSON.parse(local);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
return session;
|
||||
};
|
||||
|
||||
const initWalletConnect = async () => {
|
||||
try {
|
||||
let _connector = new WalletConnect({ uri });
|
||||
|
||||
if (!_connector.connected) {
|
||||
await _connector.createSession();
|
||||
}
|
||||
|
||||
setConnector(_connector);
|
||||
setUri(_connector.uri);
|
||||
} catch (err) {
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
const subscribeToEvents = () => {
|
||||
console.log("ACTION", "subscribeToEvents");
|
||||
|
||||
if (connector) {
|
||||
connector.on("session_request", (error, payload) => {
|
||||
console.log("EVENT", "session_request");
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
console.log("SESSION_REQUEST", payload.params);
|
||||
setPeerMeta(payload.params[0].peerMeta);
|
||||
});
|
||||
|
||||
connector.on("session_update", (error) => {
|
||||
console.log("EVENT", "session_update");
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
|
||||
connector.on("call_request", async (error, payload) => {
|
||||
console.log("EVENT", "call_request", "method", payload.method);
|
||||
console.log("EVENT", "call_request", "params", payload.params);
|
||||
|
||||
// if (error) {
|
||||
// throw error;
|
||||
// }
|
||||
|
||||
// await getAppConfig().rpcEngine.router(payload, this.state, this.bindedSetState);
|
||||
});
|
||||
|
||||
connector.on("connect", (error, payload) => {
|
||||
console.log("EVENT", "connect");
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
// this.setState({ connected: true });
|
||||
});
|
||||
|
||||
connector.on("disconnect", (error, payload) => {
|
||||
console.log("EVENT", "disconnect");
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
// this.resetApp();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const approveSession = () => {
|
||||
console.log("ACTION", "approveSession");
|
||||
if (connector) {
|
||||
let chainId = networkInfo[chainIdIndex].chainID;
|
||||
if (!chainId) {
|
||||
chainId = 1; // default to ETH Mainnet if no network selected
|
||||
}
|
||||
connector.approveSession({ chainId, accounts: [address] });
|
||||
setIsConnected(true);
|
||||
}
|
||||
};
|
||||
|
||||
const rejectSession = () => {
|
||||
console.log("ACTION", "rejectSession");
|
||||
if (connector) {
|
||||
connector.rejectSession();
|
||||
setPeerMeta(null);
|
||||
}
|
||||
};
|
||||
|
||||
const killSession = () => {
|
||||
console.log("ACTION", "killSession");
|
||||
if (connector) {
|
||||
connector.killSession();
|
||||
|
||||
setPeerMeta(null);
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container my="16" minW={["0", "0", "2xl", "2xl"]}>
|
||||
<FormControl>
|
||||
<FormLabel>Enter Address to Impersonate</FormLabel>
|
||||
<Input
|
||||
placeholder="Address"
|
||||
aria-label="address"
|
||||
value={address}
|
||||
onChange={(e) => setAddress(e.target.value)}
|
||||
bg={bgColor[colorMode]}
|
||||
isDisabled={isConnected}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl my={4}>
|
||||
<FormLabel>WalletConnect URI</FormLabel>
|
||||
<Input
|
||||
placeholder="wc:xyz123"
|
||||
aria-label="uri"
|
||||
value={uri}
|
||||
onChange={(e) => setUri(e.target.value)}
|
||||
bg={bgColor[colorMode]}
|
||||
isDisabled={isConnected}
|
||||
/>
|
||||
</FormControl>
|
||||
<Select
|
||||
mb={4}
|
||||
placeholder="Select Network"
|
||||
variant="filled"
|
||||
_hover={{ cursor: "pointer" }}
|
||||
value={chainIdIndex}
|
||||
onChange={(e) => {
|
||||
setChainIdIndex(e.target.value);
|
||||
}}
|
||||
isDisabled={isConnected}
|
||||
>
|
||||
{networkInfo.map((network, i) => (
|
||||
<option value={i} key={i}>
|
||||
{network.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<Button onClick={initWalletConnect} isDisabled={isConnected}>
|
||||
Connect
|
||||
</Button>
|
||||
{peerMeta && (
|
||||
<>
|
||||
<Box mt={4} fontSize={24} fontWeight="semibold">
|
||||
{isConnected ? "✅ Connected To:" : "⚠ Allow to Connect"}
|
||||
</Box>
|
||||
<VStack>
|
||||
<Avatar src={peerMeta.icons[0]} alt={peerMeta.name} />
|
||||
<Text fontWeight="bold">{peerMeta.name}</Text>
|
||||
<Text fontSize="sm">{peerMeta.description}</Text>
|
||||
<Link href={peerMeta.url} textDecor="underline">
|
||||
{peerMeta.url}
|
||||
</Link>
|
||||
{!isConnected && (
|
||||
<Box pt={6}>
|
||||
<Button onClick={approveSession} mr={10}>
|
||||
Approve ✔
|
||||
</Button>
|
||||
<Button onClick={rejectSession}>Reject ❌</Button>
|
||||
</Box>
|
||||
)}
|
||||
{isConnected && (
|
||||
<Box pt={6}>
|
||||
<Button onClick={killSession}>Disconnect ☠</Button>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default Body;
|
||||
48
src/components/Body/networkInfo.js
Normal file
48
src/components/Body/networkInfo.js
Normal file
@@ -0,0 +1,48 @@
|
||||
const networkInfo = [
|
||||
{
|
||||
chainID: 1,
|
||||
name: "Ethereum Mainnet",
|
||||
},
|
||||
{
|
||||
chainID: 137,
|
||||
name: "Polygon",
|
||||
},
|
||||
{
|
||||
chainID: 56,
|
||||
name: "Binance Smart Chain",
|
||||
},
|
||||
{
|
||||
chainID: 10,
|
||||
name: "Optimistic Ethereum",
|
||||
},
|
||||
{
|
||||
chainID: 250,
|
||||
name: "Fantom Opera",
|
||||
},
|
||||
{
|
||||
chainID: 43114,
|
||||
name: "Avalanche",
|
||||
},
|
||||
{
|
||||
chainID: 100,
|
||||
name: "xDAI",
|
||||
},
|
||||
{
|
||||
chainID: 42,
|
||||
name: "Kovan Testnet",
|
||||
},
|
||||
{
|
||||
chainID: 3,
|
||||
name: "Ropsten Testnet",
|
||||
},
|
||||
{
|
||||
chainID: 4,
|
||||
name: "Rinkeby Testnet",
|
||||
},
|
||||
{
|
||||
chainID: 5,
|
||||
name: "Goerli Testnet",
|
||||
},
|
||||
];
|
||||
|
||||
export default networkInfo;
|
||||
59
src/components/Footer.js
Normal file
59
src/components/Footer.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import {
|
||||
useColorMode,
|
||||
Flex,
|
||||
HStack,
|
||||
VStack,
|
||||
Heading,
|
||||
Spacer,
|
||||
Link,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faGithub,
|
||||
faLinkedin,
|
||||
faTwitter,
|
||||
} from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
const Social = ({ icon, link }) => {
|
||||
return (
|
||||
<Link href={link} isExternal>
|
||||
<FontAwesomeIcon icon={icon} size="lg" />
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
function Footer() {
|
||||
const { colorMode } = useColorMode();
|
||||
const underlineColor = { light: "gray.500", dark: "gray.400" };
|
||||
|
||||
return (
|
||||
<Flex py="4" borderTop="2px" borderTopColor={underlineColor[colorMode]}>
|
||||
<Spacer flex="1" />
|
||||
<VStack>
|
||||
<Heading size="md">
|
||||
Built by:{" "}
|
||||
<Link href="https://apoorvlathey.com/" isExternal>
|
||||
<Text decoration="underline" display="inline">
|
||||
Apoorv Lathey
|
||||
</Text>{" "}
|
||||
<ExternalLinkIcon />
|
||||
</Link>
|
||||
</Heading>
|
||||
<HStack spacing={8} mt={10}>
|
||||
<Social icon={faTwitter} link="https://twitter.com/apoorvlathey" />
|
||||
<Social icon={faGithub} link="https://github.com/CodinMaster" />
|
||||
<Social
|
||||
icon={faLinkedin}
|
||||
link="https://www.linkedin.com/in/apoorvlathey/"
|
||||
/>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Spacer flex="1" />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
29
src/components/Navbar.js
Normal file
29
src/components/Navbar.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import { Button, useColorMode, Flex, Heading, Spacer } from "@chakra-ui/react";
|
||||
import { SunIcon, MoonIcon } from "@chakra-ui/icons";
|
||||
|
||||
function Navbar() {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
const underlineColor = { light: "gray.500", dark: "gray.400" };
|
||||
|
||||
return (
|
||||
<Flex
|
||||
py="4"
|
||||
px={["2", "4", "10", "10"]}
|
||||
borderBottom="2px"
|
||||
borderBottomColor={underlineColor[colorMode]}
|
||||
>
|
||||
<Spacer flex="1" />
|
||||
<Heading maxW={["302px", "4xl", "4xl", "4xl"]}>
|
||||
🎭 Impersonator 🕵️
|
||||
</Heading>
|
||||
<Flex flex="1" justifyContent="flex-end">
|
||||
<Button onClick={toggleColorMode} rounded="full" h="40px" w="40px">
|
||||
{colorMode === "light" ? <MoonIcon /> : <SunIcon />}
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
Reference in New Issue
Block a user