21 | {props.children}
22 |
23 | );
24 |
--------------------------------------------------------------------------------
/src/hooks/useERC20Transfers.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useMoralis, useMoralisWeb3Api } from "react-moralis";
3 |
4 | export const useERC20Transfers = () => {
5 | const { account } = useMoralisWeb3Api();
6 | const { isInitialized, account: walletAddress, chainId } = useMoralis();
7 | const [ERC20Transfers, setERC20Transfers] = useState();
8 |
9 | useEffect(() => {
10 | if (isInitialized) fetchERC20Transfers().then((result) => setERC20Transfers(result));
11 | // eslint-disable-next-line react-hooks/exhaustive-deps
12 | }, [isInitialized, chainId, walletAddress]);
13 |
14 | const fetchERC20Transfers = async () => {
15 | return await account.getTokenTransfers({ address: walletAddress, chain: chainId }).then((result) => result.result);
16 | };
17 | return { fetchERC20Transfers, ERC20Transfers, chainId };
18 | };
19 |
--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | }
6 |
7 | ul[class],
8 | ol[class] {
9 | padding: 0;
10 | }
11 |
12 | body,
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | p,
18 | ul[class],
19 | ol[class],
20 | li,
21 | figure,
22 | figcaption,
23 | blockquote,
24 | dl,
25 | dd {
26 | margin: 0;
27 | }
28 |
29 | body {
30 | min-height: 100vh;
31 | scroll-behavior: smooth;
32 | text-rendering: optimizeSpeed;
33 | line-height: 1.5;
34 | background-color: white;
35 | }
36 |
37 | ul[class],
38 | ol[class] {
39 | list-style: none;
40 | }
41 |
42 | a:not([class]) {
43 | text-decoration-skip-ink: auto;
44 | }
45 |
46 | img {
47 | max-width: 100%;
48 | display: block;
49 | }
50 |
51 | article > * + * {
52 | margin-top: 1em;
53 | }
54 |
55 | input,
56 | button,
57 | textarea,
58 | select {
59 | font: inherit;
60 | }
61 |
--------------------------------------------------------------------------------
/src/hooks/useERC20Balance.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useMoralis, useMoralisWeb3Api } from "react-moralis";
3 |
4 | export const useERC20Balance = (params) => {
5 | const { account } = useMoralisWeb3Api();
6 | const { isInitialized, chainId, account: walletAddress } = useMoralis();
7 |
8 | const [assets, setAssets] = useState();
9 |
10 | useEffect(() => {
11 | if (isInitialized) {
12 | fetchERC20Balance().then((balance) => setAssets(balance));
13 | }
14 | // eslint-disable-next-line react-hooks/exhaustive-deps
15 | }, [isInitialized, chainId, walletAddress]);
16 |
17 | const fetchERC20Balance = async () => {
18 | return await account
19 | .getTokenBalances({ address: walletAddress, chain: params?.chain || chainId })
20 | .then((result) => result);
21 | };
22 |
23 | return { fetchERC20Balance, assets };
24 | };
25 |
--------------------------------------------------------------------------------
/src/pages/_app.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { MoralisProvider } from "react-moralis";
3 | import Head from "next/head";
4 |
5 | import BaseLayout from "components/BaseLayout";
6 |
7 | import "styles/index.css";
8 |
9 | /** Get your free Moralis Account https://moralis.io/ */
10 |
11 | const APP_ID = process.env.NEXT_PUBLIC_MORALIS_APPLICATION_ID;
12 | const SERVER_URL = process.env.NEXT_PUBLIC_MORALIS_SERVER_URL;
13 |
14 | const isServerInfo = Boolean(APP_ID && SERVER_URL);
15 |
16 | const Application = ({ Component, pageProps }) => {
17 | return (
18 | <>
19 |
20 |
27 | 
33 |
37 | {formattedData &&
38 | (isUSDMode
39 | ? formattedData.formattedUsd
40 | : formattedData.formattedNative)}
41 |
42 |
43 | );
44 | }
45 | export default TokenPrice;
46 |
--------------------------------------------------------------------------------
/src/components/InchDex/components/InchModal.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function InchModal({ open, onClose, setToken, tokenList }) {
4 | if (!open) return null;
5 |
6 | return (
7 |
8 | {!tokenList
9 | ? null
10 | : Object.keys(tokenList).map((token, index) => (
11 |
46 | );
47 | }
48 |
49 | export default InchModal;
50 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to `ethereum-boilerplate`
2 |
3 | ## Setting up the project for debugging and contributing
4 |
5 | ### Setting up you local machine:
6 |
7 | - [Fork](https://github.com/ethereum-boilerplate/ethereum-boilerplate) this project and clone the fork on your local machine:
8 |
9 | ```sh
10 | git clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git
11 | cd ethereum-boilerplate # go into the clone directory
12 | npm install # install all the node dependencies
13 | ```
14 |
15 | Make sure to have a ESlint and Prettier plugin installed to check for code-smells and auto-formatting.
16 |
17 | ### Pull Requests
18 |
19 | 1. Fork the repo and create your branch from `main`.
20 | 2. Make sure your code lints and is correctly formatted.
21 |
22 | ### Known Issues
23 |
24 | We use GitHub issues to track public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new issue, try to make sure your problem doesn't already exist.
25 |
26 | ### Coding Style
27 |
28 | Please follow the [Coding Style](https://github.com/ethereum-boilerplate/ethereum-boilerplate/blob/main/CODING_STYLE.md).
29 |
30 | ## License
31 |
32 | By contributing to the ethereum-boilerplate, you agree that your contributions will be licensed under its license.
33 |
--------------------------------------------------------------------------------
/src/helpers/formatters.js:
--------------------------------------------------------------------------------
1 | export const n6 = new Intl.NumberFormat("en-us", {
2 | style: "decimal",
3 | minimumFractionDigits: 0,
4 | maximumFractionDigits: 6,
5 | });
6 | export const n4 = new Intl.NumberFormat("en-us", {
7 | style: "decimal",
8 | minimumFractionDigits: 0,
9 | maximumFractionDigits: 4,
10 | });
11 |
12 | export const c2 = new Intl.NumberFormat("en-us", {
13 | style: "currency",
14 | currency: "USD",
15 | minimumFractionDigits: 2,
16 | maximumFractionDigits: 2,
17 | });
18 |
19 | /**
20 | * Returns a string of form "abc...xyz"
21 | * @param {string} str string to string
22 | * @param {number} n number of chars to keep at front/end
23 | * @returns {string}
24 | */
25 | export const getEllipsisTxt = (str, n = 6) => {
26 | if (str) {
27 | return `${str.slice(0, n)}...${str.slice(str.length - n)}`;
28 | }
29 | return "";
30 | };
31 |
32 | export const tokenValue = (value, decimals) => (decimals ? value / Math.pow(10, decimals) : value);
33 |
34 | /**
35 | * Return a formatted string with the symbol at the end
36 | * @param {number} value integer value
37 | * @param {number} decimals number of decimals
38 | * @param {string} symbol token symbol
39 | * @returns {string}
40 | */
41 | export const tokenValueTxt = (value, decimals, symbol) => `${n4.format(tokenValue(value, decimals))} ${symbol}`;
42 |
--------------------------------------------------------------------------------
/src/components/Contract/ContractMethods.jsx:
--------------------------------------------------------------------------------
1 | import { Button, Card, Form, Input } from "antd";
2 | import Text from "antd/lib/typography/Text";
3 |
4 | const ContractMethods = ({ displayedContractFunctions, responses }) => {
5 | return displayedContractFunctions.map((item, key) => (
6 | {
19 | setToken(tokenList[token]);
20 | onClose();
21 | }}
22 | key={index}>
23 | 
32 |
44 | ))}
45 |
33 |
43 | {tokenList[token].name}
34 | 40 | {tokenList[token].symbol} 41 | 42 |
62 |
64 | {
68 | return record.token_address;
69 | }}
70 | />
71 |
72 |
73 | );
74 | }
75 | export default ERC20Balance;
76 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ethereum-boilerplate",
3 | "homepage": "http://ethereum-boilerplate.github.io/ethereum-boilerplate",
4 | "version": "0.1.0",
5 | "dependencies": {
6 | "@ant-design/icons": "^4.7.0",
7 | "@walletconnect/web3-provider": "^1.6.6",
8 | "antd": "^4.16.13",
9 | "moralis": "^0.0.135",
10 | "next": "^12.0.4",
11 | "react": "^17.0.2",
12 | "react-blockies": "^1.4.1",
13 | "react-dom": "^17.0.2",
14 | "react-moralis": "^0.3.0",
15 | "react-router": "^5.2.1",
16 | "react-router-dom": "^5.3.0",
17 | "react-scripts": "4.0.3",
18 | "sharp": "^0.29.3",
19 | "web-vitals": "^1.0.1"
20 | },
21 | "devDependencies": {
22 | "@next/eslint-plugin-next": "^12.0.4",
23 | "@testing-library/jest-dom": "^5.11.4",
24 | "@testing-library/react": "^11.1.0",
25 | "@testing-library/user-event": "^12.1.10",
26 | "cross-env": "^7.0.3",
27 | "eslint": "^7.24.0",
28 | "eslint-config-next": "^12.0.4",
29 | "gh-pages": "^3.2.3",
30 | "touch-cli": "^0.0.1",
31 | "yarn": "^1.22.17"
32 | },
33 | "scripts": {
34 | "dev": "next dev",
35 | "start": "next start",
36 | "lint": "next lint",
37 | "prebuild": "yarn lint",
38 | "build": "next build",
39 | "postbuild": "yarn export",
40 | "export": "next export",
41 | "test": "next test",
42 | "devchain": "node truffle/scripts/devChain.js",
43 | "connect": "moralis-admin-cli connect-local-devchain",
44 | "watch:events": "moralis-admin-cli add-contract",
45 | "deploy": "node truffle/scripts/deployContract.js",
46 | "deploy:page": "cross-env-shell \"yarn build && touch out/.nojekyll && gh-pages -d out -t true\""
47 | },
48 | "browserslist": {
49 | "production": [
50 | ">0.2%",
51 | "not dead",
52 | "not op_mini all"
53 | ],
54 | "development": [
55 | "last 1 chrome version",
56 | "last 1 firefox version",
57 | "last 1 safari version"
58 | ]
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/Wallet/components/Assets.jsx:
--------------------------------------------------------------------------------
1 | import { useERC20Balance } from "hooks/useERC20Balance";
2 | import { useMoralis } from "react-moralis";
3 |
4 | const styles = {
5 | content: {
6 | width: "100%",
7 | maxHeight: "400px",
8 | display: "flex",
9 | flexDirection: "column",
10 | justifyContent: "space-between",
11 | overflow: "auto",
12 | },
13 | row: {
14 | display: "flex",
15 | justifyContent: "flex-start",
16 | alignItems: "center",
17 | padding: "15px 20px",
18 | borderTop: "1px solid #e7eaf3",
19 | },
20 | right: {
21 | textAlign: "left",
22 | marginLeft: "15px",
23 | },
24 | text: { display: "inline", marginRight: "10px" },
25 | };
26 | export default function Assets() {
27 | const { assets } = useERC20Balance();
28 | const { Moralis } = useMoralis();
29 |
30 | if (!assets) return <>No Data;
31 |
32 | return (
33 |
57 | )}
58 |