82 |
94 |
97 |
98 |
99 |
101 |
102 |
104 | {/*
105 | */}
107 |
108 |
110 |
111 |
113 | {/*
114 |
115 |
116 | Ethereum} key="1">
117 |
119 | Binance Smart Chain} key="2">
120 |
122 | Polygon} key="3">
123 |
125 |
126 |
127 |
128 |
130 |
131 |
133 |
134 |
136 |
137 |
139 |
140 |
142 | */}
143 |
144 |
146 |
147 |
149 |
150 | <>Please login using the "Authenticate" button
151 |
152 |
153 |
154 |
199 |
219 |
220 | );
221 |
222 | export default App;
223 |
--------------------------------------------------------------------------------
/src/components/Account/Account.jsx:
--------------------------------------------------------------------------------
1 | import { useMoralis } from "react-moralis";
2 | import { getEllipsisTxt } from "helpers/formatters";
3 | import Blockie from "../Blockie";
4 | import { Button, Card, Modal } from "antd";
5 | import { useState } from "react";
6 | import Address from "../Address/Address";
7 | import { SelectOutlined } from "@ant-design/icons";
8 | import { getExplorer } from "helpers/networks";
9 | import Text from "antd/lib/typography/Text";
10 | import { connectors } from "./config";
11 | const styles = {
12 | account: {
13 | height: "42px",
14 | padding: "0 15px",
15 | display: "flex",
16 | justifyContent: "center",
17 | alignItems: "center",
18 | width: "fit-content",
19 | borderRadius: "12px",
20 | backgroundColor: "rgb(244, 244, 244)",
21 | cursor: "pointer",
22 | },
23 | text: {
24 | color: "#21BF96",
25 | },
26 | connector: {
27 | alignItems: "center",
28 | display: "flex",
29 | flexDirection: "column",
30 | height: "auto",
31 | justifyContent: "center",
32 | marginLeft: "auto",
33 | marginRight: "auto",
34 | padding: "20px 5px",
35 | cursor: "pointer",
36 | },
37 | icon: {
38 | alignSelf: "center",
39 | fill: "rgb(40, 13, 95)",
40 | flexShrink: "0",
41 | marginBottom: "8px",
42 | height: "30px",
43 | },
44 | };
45 |
46 | function Account() {
47 | const { authenticate, isAuthenticated, account, chainId, logout } =
48 | useMoralis();
49 | const [isModalVisible, setIsModalVisible] = useState(false);
50 | const [isAuthModalVisible, setIsAuthModalVisible] = useState(false);
51 |
52 | if (!isAuthenticated || !account) {
53 | return (
54 | <>
55 | setIsAuthModalVisible(true)}>
56 |
58 | Authenticate
57 |
79 | Connect Wallet
80 |
81 |
82 | {connectors.map(({ title, icon, connectorId }, key) => (
83 |
101 | {
87 | try {
88 | await authenticate({ provider: connectorId });
89 | window.localStorage.setItem("connectorId", connectorId);
90 | setIsAuthModalVisible(false);
91 | } catch (e) {
92 | console.error(e);
93 | }
94 | }}
95 | >
96 | 
97 | {title}
98 |
99 | ))}
100 | setIsModalVisible(true)}>
125 |
130 | 126 | {getEllipsisTxt(account, 6)} 127 |
128 |
157 |
162 |
166 |
61 | {props.avatar === "left" &&
66 | );
67 | }
68 |
69 | export default Address;
70 |
71 | const Check = () => (
72 |
86 | );
87 |
--------------------------------------------------------------------------------
/src/components/Address/identicon.css:
--------------------------------------------------------------------------------
1 | .identicon {
2 | border-radius: 50px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/AddressInput.jsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from "react";
2 | import { useMoralis, useMoralisWeb3Api } from "react-moralis";
3 | import { getEllipsisTxt } from "../helpers/formatters";
4 | import Blockie from "./Blockie";
5 | import { Input } from "antd";
6 | import { SearchOutlined } from "@ant-design/icons";
7 |
8 | function AddressInput(props) {
9 | const input = useRef(null);
10 | const { web3 } = useMoralis();
11 | const [address, setAddress] = useState("");
12 | const [validatedAddress, setValidatedAddress] = useState("");
13 | const [isDomain, setIsDomain] = useState(false);
14 | const {
15 | resolve: { resolveDomain },
16 | } = useMoralisWeb3Api();
17 |
18 | // eslint-disable-next-line react-hooks/exhaustive-deps
19 | useEffect(() => {
20 | if (validatedAddress) props.onChange(isDomain ? validatedAddress : address);
21 | }, [props, validatedAddress, isDomain, address]);
22 |
23 | const updateAddress = useCallback(
24 | async (value) => {
25 | setAddress(value);
26 | if (isSupportedDomain(value)) {
27 | const processPromise = function (promise) {
28 | promise
29 | .then((addr) => {
30 | setValidatedAddress(addr);
31 | setIsDomain(true);
32 | })
33 | .catch(() => {
34 | setValidatedAddress("");
35 | });
36 | };
37 | if (value.endsWith(".eth")) {
38 | processPromise(web3?.eth?.ens?.getAddress(value));
39 | } else {
40 | processPromise(
41 | resolveDomain({
42 | domain: value,
43 | }).then((r) => r?.address),
44 | );
45 | }
46 | } else if (value.length === 42) {
47 | setValidatedAddress(getEllipsisTxt(value, 10));
48 | setIsDomain(false);
49 | } else {
50 | setValidatedAddress("");
51 | setIsDomain(false);
52 | }
53 | },
54 | [resolveDomain, web3?.eth?.ens],
55 | );
56 |
57 | const Cross = () => (
58 |
81 | );
82 |
83 | return (
84 |
95 | ) : (
96 | {props.size ? getEllipsisTxt(address, props.size) : address}
63 | {props.avatar === "right" &&
119 |
120 |
128 |
129 |
130 | );
131 | }
132 |
133 | export default Chains;
134 |
--------------------------------------------------------------------------------
/src/components/Chains/Logos.jsx:
--------------------------------------------------------------------------------
1 | export const AvaxLogo = () => (
2 |
18 | );
19 |
20 | export const BSCLogo = () => (
21 |
37 | );
38 |
39 | export const ETHLogo = () => (
40 |
74 | );
75 |
76 | export const PolygonLogo = () => (
77 |
93 | );
94 |
--------------------------------------------------------------------------------
/src/components/Chains/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./Chains";
2 |
--------------------------------------------------------------------------------
/src/components/Contract/Contract.jsx:
--------------------------------------------------------------------------------
1 | import { Card, Form, notification } from "antd";
2 | import { useMemo, useState } from "react";
3 | import Address from "components/Address/Address";
4 | import { useMoralis, useMoralisQuery } from "react-moralis";
5 | import { getEllipsisTxt } from "helpers/formatters";
6 | import ContractMethods from "./ContractMethods";
7 | import ContractResolver from "./ContractResolver";
8 |
9 | export default function Contract() {
10 | const { Moralis, chainId } = useMoralis();
11 | const [responses, setResponses] = useState({});
12 | const [contract, setContract] = useState();
13 |
14 | /**Moralis Live query for displaying contract's events*/
15 | const { data } = useMoralisQuery("Events", (query) => query, [], {
16 | live: true,
17 | });
18 |
19 | /** Automatically builds write and read components for interacting with contract*/
20 | const displayedContractFunctions = useMemo(() => {
21 | if (!contract?.abi) return [];
22 | return contract.abi.filter((method) => method["type"] === "function");
23 | }, [contract]);
24 |
25 | /** Returns true in case if contract is deployed to active chain in wallet */
26 | const isDeployedToActiveChain = useMemo(() => {
27 | if (!contract?.networks) return undefined;
28 | return [parseInt(chainId, 16)] in contract.networks;
29 | }, [contract, chainId]);
30 |
31 | const contractAddress = useMemo(() => {
32 | if (!isDeployedToActiveChain) return null;
33 | return contract.networks[parseInt(chainId, 16)]?.["address"] || null;
34 | }, [chainId, contract, isDeployedToActiveChain]);
35 |
36 | /** Default function for showing notifications*/
37 | const openNotification = ({ message, description }) => {
38 | notification.open({
39 | placement: "bottomRight",
40 | message,
41 | description,
42 | });
43 | };
44 |
45 | return (
46 |
55 |
64 | Your contract: {contract?.contractName}
65 |
71 |
72 | }
73 | size="large"
74 | style={{
75 | width: "60%",
76 | boxShadow: "0 0.5rem 1.2rem rgb(189 197 209 / 20%)",
77 | border: "1px solid #e7eaf3",
78 | borderRadius: "0.5rem",
79 | }}
80 | >
81 |
78 |
81 | Click or drag Contract file to this area to upload 82 |
83 |84 | Supports JSON Contract data generated by Truffle and HardHat. JSON 85 | File should contain ABI, address and contract name 86 |
87 | 88 | )} 89 |
8 | {!tokenList
9 | ? null
10 | : Object.keys(tokenList).map((token, index) => (
11 |
48 | );
49 | }
50 |
51 | export default InchModal;
52 |
--------------------------------------------------------------------------------
/src/components/DEX/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./DEX";
2 |
--------------------------------------------------------------------------------
/src/components/ERC20Balance.jsx:
--------------------------------------------------------------------------------
1 | import { useMoralis, useERC20Balances } from "react-moralis";
2 | import { Skeleton, Table } from "antd";
3 | import { getEllipsisTxt } from "../helpers/formatters";
4 |
5 | function ERC20Balance(props) {
6 | const { data: assets } = useERC20Balances(props);
7 | const { Moralis } = useMoralis();
8 |
9 | const columns = [
10 | {
11 | title: "",
12 | dataIndex: "logo",
13 | key: "logo",
14 | render: (logo) => (
15 | {
19 | setToken(tokenList[token]);
20 | onClose();
21 | }}
22 | key={index}
23 | >
24 | 
33 |
46 | ))}
47 |
34 |
45 | {tokenList[token].name}
35 | 42 | {tokenList[token].symbol} 43 | 44 |
52 |
54 | {
58 | return record.token_address;
59 | }}
60 | />
61 |
62 |
63 | );
64 | }
65 | export default ERC20Balance;
66 |
--------------------------------------------------------------------------------
/src/components/ERC20Transfers/ERC20Transfers.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useMoralis } from "react-moralis";
3 | import { getEllipsisTxt } from "../../helpers/formatters";
4 | import { getExplorer } from "../../helpers/networks";
5 | import "antd/dist/antd.css";
6 | import { Skeleton, Table } from "antd";
7 | import { useERC20Transfers } from "hooks/useERC20Transfers";
8 |
9 | function ERC20Transfers() {
10 | const { ERC20Transfers, chainId } = useERC20Transfers();
11 | const { Moralis } = useMoralis();
12 |
13 | const columns = [
14 | {
15 | title: "Token",
16 | dataIndex: "address",
17 | key: "address",
18 | render: (token) => getEllipsisTxt(token, 8),
19 | },
20 | {
21 | title: "From",
22 | dataIndex: "from_address",
23 | key: "from_address",
24 | render: (from) => getEllipsisTxt(from, 8),
25 | },
26 | {
27 | title: "To",
28 | dataIndex: "to_address",
29 | key: "to_address",
30 | render: (to) => getEllipsisTxt(to, 8),
31 | },
32 | {
33 | title: "Value",
34 | dataIndex: "value",
35 | key: "value",
36 | render: (value, item) =>
37 | parseFloat(Moralis.Units.FromWei(value, item.decimals)).toFixed(6),
38 | },
39 | {
40 | title: "Hash",
41 | dataIndex: "transaction_hash",
42 | key: "transaction_hash",
43 | render: (hash) => (
44 |
49 | View Transaction
50 |
51 | ),
52 | },
53 | ];
54 |
55 | let key = 0;
56 | return (
57 |