setConnect(false) } />
108 |
109 | );
110 | }
111 |
--------------------------------------------------------------------------------
/src/components/ConnectModal.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import { useWeb3React } from "@web3-react/core";
4 | import Dialog from "@material-ui/core/Dialog";
5 | import DialogContent from "@material-ui/core/DialogContent";
6 | import MuiDialogTitle from "@material-ui/core/DialogTitle";
7 | import Slide from "@material-ui/core/Slide";
8 | import IconButton from "@material-ui/core/IconButton";
9 | import CloseIcon from "@material-ui/icons/Close";
10 | import { Typography, Button } from "@material-ui/core";
11 |
12 | import mmLogo from "./../images/mm.png";
13 | import wcLogo from "./../images/wc.svg";
14 | import cwLogo from "./../images/cw.svg";
15 |
16 | import { injected, walletconnect, walletlink } from "./../connectors";
17 |
18 | const connectorsByName = {
19 | MetaMask: injected,
20 | WalletConnect: walletconnect,
21 | "Coinbase Wallet": walletlink,
22 | };
23 |
24 | const connectorsLogo = {
25 | MetaMask: mmLogo,
26 | WalletConnect: wcLogo,
27 | "Coinbase Wallet": cwLogo,
28 | };
29 |
30 | const useStyles = makeStyles((theme) => ({
31 | root: {
32 | margin: 0,
33 | padding: theme.spacing(2),
34 | },
35 | closeButton: {
36 | position: "absolute",
37 | right: theme.spacing(1),
38 | top: theme.spacing(1),
39 | color: theme.palette.grey[500],
40 | },
41 | btn: {
42 | minWidth: 300,
43 | padding: 16,
44 | justifyContent: "flex-start",
45 | textTransform: "none",
46 | },
47 | grow: {
48 | flexGrow: 1,
49 | },
50 | img: {
51 | width: "auto",
52 | maxWidth: 26,
53 | maxHeight: 24,
54 | margin: "0 auto",
55 | },
56 | }));
57 |
58 | const Transition = React.forwardRef(function Transition(props, ref) {
59 | return ;
60 | });
61 |
62 | const DialogTitle = (props) => {
63 | const classes = useStyles();
64 | const { children, onClose, ...other } = props;
65 | return (
66 |
67 | {children}
68 | {onClose ? (
69 |
74 |
75 |
76 | ) : null}
77 |
78 | );
79 | };
80 |
81 | export default function ConnectModal({ isOpen, onClose }) {
82 | const classes = useStyles();
83 |
84 | const { activate } = useWeb3React();
85 |
86 | const handleClose = () => {
87 | onClose && onClose();
88 | };
89 |
90 | return (
91 |
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/src/components/DeprecatedNetwork.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Alert from "@material-ui/lab/Alert";
3 |
4 | export default function DeprecatedNetwork({ chainId }) {
5 | return (
6 | <>
7 | {chainId === 4 ? (
8 |
9 | Rinkeby network support is deprecated, it will be disabled soon.
10 |
11 | ) : (
12 | ""
13 | )}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/DomainEventsGraph.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import {
4 | Gitgraph,
5 | templateExtend,
6 | Orientation,
7 | TemplateName
8 | } from "@gitgraph/react";
9 |
10 | const useStyles = makeStyles(() => ({
11 | header: {
12 | paddingTop: 30
13 | },
14 | }));
15 |
16 | const DomainEventsGraph = ({ events }) => {
17 | const classes = useStyles();
18 |
19 | const _template = templateExtend(TemplateName.Metro, {
20 | branch: {
21 | lineWidth: 3
22 | },
23 | commit: {
24 | spacing: 40,
25 | message: {
26 | displayHash: false,
27 | displayAuthor: false,
28 | },
29 | dot: {
30 | size: 5,
31 | }
32 | },
33 | tag: {
34 | pointerWidth: 6,
35 | },
36 | });
37 |
38 | return (
39 | <>
40 |
44 | {(gitgraph) => {
45 | const master = gitgraph.branch("Registry");
46 | if (events) {
47 | events.events.map(e => {
48 | // master.commit({
49 | // subject: e.event,
50 | // tag: e.blockNumber.toString()
51 | // });
52 | master.commit(e.event);
53 | master.tag(e.blockNumber.toString());
54 | })
55 | }
56 | }}
57 |
58 |
59 | );
60 | };
61 |
62 | export default DomainEventsGraph;
63 |
--------------------------------------------------------------------------------
/src/components/DomainEventsTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Table from '@material-ui/core/Table';
4 | import TableBody from '@material-ui/core/TableBody';
5 | import TableCell from '@material-ui/core/TableCell';
6 | import TableContainer from '@material-ui/core/TableContainer';
7 | import TableHead from '@material-ui/core/TableHead';
8 | import TableRow from '@material-ui/core/TableRow';
9 | import CircularProgress from '@material-ui/core/CircularProgress';
10 |
11 | import { ZERO_ADDRESS } from './../utils/constants';
12 | import EtherscanAddress from './EtherscanAddress';
13 | import EtherscanBlock from './EtherscanBlock';
14 | import EtherscanTransaction from './EtherscanTransaction';
15 |
16 | const useStyles = makeStyles(() => ({
17 | header: {
18 | paddingTop: 30
19 | },
20 | loader: {
21 | width: '100%',
22 | display: 'flex',
23 | flexDirection: 'column',
24 | alignItems: 'center',
25 | },
26 | }));
27 |
28 | const renderEventType = (event) => {
29 | switch (event.event) {
30 | case 'Transfer':
31 | return <>{
32 | event.args.from === ZERO_ADDRESS ?
33 | 'Mint' :
34 | event.args.to === ZERO_ADDRESS ?
35 | 'Burn' :
36 | 'Transfer'
37 | };
38 | default:
39 | return <>{event.event};
40 | }
41 | }
42 |
43 | const renderEvent = (event, chainId) => {
44 | const data = Object.keys(event.args)
45 | .filter(key => !(+key) && key !== '0')
46 | .reduce((obj, key) => {
47 | obj[key] = event.args[key];
48 | return obj;
49 | }, {});
50 |
51 | switch (event.event) {
52 | case 'Approval':
53 | return <>Approved operator {event.args.approved} for token {event.args.tokenId.toHexString()};
54 | case 'ApprovalForAll':
55 | return <>{event.args.approved ? 'Approved' : 'Disapproved'} operator {event.args.operator};
56 | case 'NewURI':
57 | return <>{event.args.uri};
58 | case 'Resolve':
59 | return <>Set resolver {
60 |
61 | };
62 | case 'Sync':
63 | return <>Set record with key hash {event.args.updateId.toHexString()} (Resolver: {
64 |
65 | })
;
66 | case 'Transfer':
67 | return <>
68 | Transfer to {
69 |
70 | }
71 | {event.args.from !== ZERO_ADDRESS &&
72 | (From: {})
73 | }
74 | ;
75 | default:
76 | return <>{JSON.stringify(data, null, ' ')};
77 | }
78 | }
79 |
80 | const DomainEventsTable = ({ events, chainId }) => {
81 | const classes = useStyles();
82 |
83 | return (
84 | <>
85 | {events && events.isFetched &&
86 |
87 |
88 |
89 |
90 | Block
91 | Tx
92 | Event
93 | Data
94 |
95 |
96 |
97 | {events && events.events.map((event, i) =>
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 | {renderEventType(event, chainId)}
106 | {renderEvent(event, chainId)}
107 |
108 | )}
109 |
110 |
111 |
112 | }
113 | {events && !events.isFetched &&
114 |
115 |
116 |
117 | }
118 |
119 | );
120 | };
121 |
122 | export default DomainEventsTable;
123 |
--------------------------------------------------------------------------------
/src/components/DomainInfo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Grid from "@material-ui/core/Grid";
4 | import Typography from "@material-ui/core/Typography";
5 |
6 | import EtherscanAddress from "./EtherscanAddress";
7 |
8 | const useStyles = makeStyles(() => ({
9 | header: {
10 | paddingTop: 30,
11 | },
12 | }));
13 |
14 | const DomainInfo = ({ domain, chainId }) => {
15 | const classes = useStyles();
16 |
17 | const records = Object.entries((domain || {}).records || []).filter(
18 | ([_, val]) => !!val
19 | );
20 | const recordsRaw = records.map(([key, val]) => {
21 | return (
22 |
23 |
24 |
25 | {key}
26 |
27 |
28 |
29 | {val}
30 |
31 |
32 | );
33 | });
34 |
35 | return (
36 | <>
37 |
38 |
39 | ID
40 |
41 |
42 | {domain.id}
43 |
44 |
45 |
46 |
47 | Registry
48 |
49 |
50 |
51 |
56 |
57 |
58 |
59 |
60 |
61 | Resolver
62 |
63 |
64 |
65 |
69 |
70 |
71 |
72 |
73 |
74 | Owner
75 |
76 |
77 |
78 |
82 |
83 |
84 |
85 | {records.length ? (
86 | <>
87 |
88 |
89 | Records
90 |
91 |
92 | {recordsRaw}
93 |
94 | ) : (
95 | <>
96 | )}
97 |
98 | );
99 | };
100 |
101 | export default DomainInfo;
102 |
--------------------------------------------------------------------------------
/src/components/DomainList.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Backdrop from '@material-ui/core/Backdrop';
4 | import CircularProgress from '@material-ui/core/CircularProgress';
5 | import Divider from '@material-ui/core/Divider';
6 | import Typography from '@material-ui/core/Typography';
7 | import Accordion from '@material-ui/core/Accordion';
8 | import AccordionDetails from '@material-ui/core/AccordionDetails';
9 | import AccordionSummary from '@material-ui/core/AccordionSummary';
10 | import AccordionActions from '@material-ui/core/AccordionActions';
11 | import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
12 | import Tabs from '@material-ui/core/Tabs';
13 | import Tab from '@material-ui/core/Tab';
14 | import Box from '@material-ui/core/Box';
15 |
16 | import DomainInfo from './DomainInfo';
17 | import DomainEventsTable from './DomainEventsTable';
18 |
19 | const useStyles = makeStyles((theme) => ({
20 | backdrop: {
21 | zIndex: theme.zIndex.drawer + 1,
22 | color: '#fff',
23 | },
24 | tabs: {
25 | width: '100%',
26 | }
27 | }));
28 |
29 | const TabPanel = (props) => {
30 | const { children, display, index, ...other } = props;
31 |
32 | return (
33 |
38 | {display && (
39 |
40 | {children}
41 |
42 | )}
43 |
44 | );
45 | }
46 |
47 | const DomainList = ({ chainId, isFetching, domains, onEventsLoad, onDomainSelect, actions }) => {
48 | const classes = useStyles();
49 |
50 | const [expanded, setExpanded] = useState(false);
51 | const [domainTab, setDomainTab] = useState(undefined);
52 | const [events, setEvents] = useState({});
53 |
54 | useEffect(() => {
55 | if(domains && domains.length === 1) {
56 | selectDomain(domains[0])(undefined, true);
57 | }
58 | }, [domains]);
59 |
60 | const selectDomain = (domain) => (_, isExpanded) => {
61 | setExpanded(isExpanded ? domain.id : false);
62 | setDomainTab(domain.id);
63 | onDomainSelect && onDomainSelect(domain);
64 | };
65 |
66 | const selectDomainEvents = (domain) => async (_, tab) => {
67 | const events = await onEventsLoad(domain);
68 | setEvents(events);
69 | setDomainTab(tab);
70 | };
71 |
72 | return (
73 | <>
74 | {
75 |
76 |
77 |
78 | }
79 | {domains && domains.length ?
80 |
81 | {domains.map(domain => (
82 |
87 |
90 | :
91 | }>
92 | {domain.name || `[${domain.id}]`}
93 |
94 |
95 | {domainTab && domainTab.startsWith(domain.id) &&
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 | }
109 |
110 |
111 | {actions &&
112 |
113 | {actions}
114 |
115 | }
116 |
117 | ))}
118 |
310 |
311 | Domains ({_domains.length})
312 |
313 |
323 |
324 | ) : (
325 | <>
326 | )}
327 | {
333 | setDomainTab(domain);
334 | setDefaultResolverError();
335 | }}
336 | actions={
337 | <>
338 | {domainTab && domainTab.resolver === ZERO_ADDRESS ? (
339 |
346 | ) : (
347 |
354 | )}
355 |
362 |
363 | {defaultResolverError && (
364 |
{defaultResolverError}
365 | )}
366 |
478 | No domains found.
479 |
490 | OR Buy here
491 |
492 | )}
493 | {
494 |
495 |
496 |
497 | }
498 |
499 | );
500 | };
501 |
502 | export default Domains;
503 |
--------------------------------------------------------------------------------
/src/components/EtherscanAddress.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from '@material-ui/core/Link';
3 |
4 | import { ZERO_ADDRESS, ETHERSCAN_MAP } from './../utils/constants';
5 |
6 | const EtherscanAddress = ({ address, chainId, label }) => {
7 | return (
8 | <>
9 | {
10 | address === ZERO_ADDRESS ?
11 | address :
12 |
16 | {label || address}
17 |
18 | }
19 |
20 | );
21 | }
22 |
23 | export default EtherscanAddress;
--------------------------------------------------------------------------------
/src/components/EtherscanBlock.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from '@material-ui/core/Link';
3 |
4 | import { ETHERSCAN_MAP } from './../utils/constants';
5 |
6 | const EtherscanBlock = ({ blockNumber, chainId }) => {
7 | return (
8 |
12 | {blockNumber}
13 |
14 | );
15 | }
16 |
17 | export default EtherscanBlock;
--------------------------------------------------------------------------------
/src/components/EtherscanTransaction.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from '@material-ui/core/Link';
3 |
4 | import { ETHERSCAN_MAP } from './../utils/constants';
5 |
6 | const EtherscanTransaction = ({ transactionHash, chainId }) => {
7 | return (
8 |
12 | {transactionHash.substr(0, 8)}...
13 |
14 | );
15 | }
16 |
17 | export default EtherscanTransaction;
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import AppBar from "@material-ui/core/AppBar";
4 | import Toolbar from "@material-ui/core/Toolbar";
5 | import Typography from "@material-ui/core/Typography";
6 | import GitHubButton from "react-github-btn";
7 |
8 | const useStyles = makeStyles(() => ({
9 | footer: {
10 | alignItems: "center",
11 | background: "transparent",
12 | boxShadow: "none",
13 | },
14 | info: {
15 | marginTop: 20,
16 | },
17 | }));
18 |
19 | export default function Footer() {
20 | const classes = useStyles();
21 |
22 | return (
23 |
24 |
29 | This is an open-source project for managing blockchain domains. It uses
30 | Ethereum/Polygon blockchain and TheGraph as data sources.
31 |
32 |
33 |
34 |
40 | Star
41 |
42 |
43 |
44 |
50 | Issue
51 |
52 |
53 |
54 |
59 | Follow @aquiladev
60 |
61 |
62 | {process.env.REACT_APP_GITHUB_REF_SHA && (
63 |
64 | version: {process.env.REACT_APP_GITHUB_REF_SHA}
65 |
66 | )}
67 |
68 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/GlobalStyle.js:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from 'styled-components';
2 | import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2';
3 | import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2';
4 |
5 | const GlobalStyle = createGlobalStyle`
6 | html {
7 | height: 100%
8 | }
9 | body {
10 | height: 100%;
11 | margin: 0px;
12 | padding: 0px;
13 | }
14 | @font-face {
15 | font-family: 'Averta';
16 | src: local('Averta'), local('Averta Bold'),
17 | url(${avertaFont}) format('woff2'),
18 | url(${avertaBoldFont}) format('woff');
19 | }
20 | #root {
21 | height: 100%;
22 | }
23 | #records-form .MuiFilledInput-input {
24 | padding-top: 13px;
25 | }
26 | .MuiFormControl-root,
27 | .MuiInputBase-root {
28 | width: 100% !important;
29 | }
30 | .MuiAccordionSummary-content {
31 | overflow: auto;
32 | }
33 | `;
34 |
35 | export default GlobalStyle;
36 |
--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Link, useHistory } from "react-router-dom";
3 | import { alpha, makeStyles } from "@material-ui/core/styles";
4 | import AppBar from "@material-ui/core/AppBar";
5 | import Toolbar from "@material-ui/core/Toolbar";
6 | import Typography from "@material-ui/core/Typography";
7 | import SearchIcon from "@material-ui/icons/Search";
8 | import Button from "@material-ui/core/Button";
9 | import Menu from "@material-ui/core/Menu";
10 | import MenuItem from "@material-ui/core/MenuItem";
11 | import MoreVertIcon from "@material-ui/icons/MoreVert";
12 | import BarChartIcon from "@material-ui/icons/BarChart";
13 | import CodeIcon from "@material-ui/icons/Code";
14 | import InputBase from "@material-ui/core/InputBase";
15 |
16 | import ConnectButton from "./ConnectButton";
17 |
18 | const useStyles = makeStyles((theme) => ({
19 | title: {
20 | fontSize: "1rem",
21 | color: theme.palette.grey[800],
22 | textDecoration: "none",
23 | [theme.breakpoints.up("sm")]: {
24 | fontSize: "1.5rem",
25 | },
26 | },
27 | grow: {
28 | flexGrow: 1,
29 | paddingLeft: 30,
30 | },
31 | navBtn: {
32 | color: theme.palette.grey[800],
33 | marginLeft: 6,
34 | padding: "6px 0",
35 | minWidth: "inherit",
36 | textDecoration: "none",
37 | },
38 | menuLink: {
39 | color: "inherit",
40 | textDecoration: "none",
41 | },
42 | search: {
43 | position: "relative",
44 | borderRadius: theme.shape.borderRadius,
45 | backgroundColor: alpha(theme.palette.common.black, 0.15),
46 | "&:hover": {
47 | backgroundColor: alpha(theme.palette.common.black, 0.25),
48 | },
49 | marginRight: theme.spacing(2),
50 | marginLeft: 0,
51 | width: "100%",
52 | [theme.breakpoints.up("sm")]: {
53 | marginLeft: theme.spacing(3),
54 | width: "auto",
55 | },
56 | },
57 | searchIcon: {
58 | padding: theme.spacing(0, 2),
59 | height: "100%",
60 | position: "absolute",
61 | pointerEvents: "none",
62 | display: "flex",
63 | alignItems: "center",
64 | justifyContent: "center",
65 | },
66 | inputRoot: {
67 | color: "inherit",
68 | },
69 | inputInput: {
70 | padding: theme.spacing(1, 1, 1, 0),
71 | // vertical padding + font size from searchIcon
72 | paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
73 | transition: theme.transitions.create("width"),
74 | width: "100%",
75 | [theme.breakpoints.up("md")]: {
76 | width: "20ch",
77 | },
78 | },
79 | }));
80 |
81 | export default function Header({ active }) {
82 | const classes = useStyles();
83 | const history = useHistory();
84 |
85 | const [anchorEl, setAnchorEl] = useState(null);
86 | const [domainName, setDomainName] = useState();
87 | const open = Boolean(anchorEl);
88 |
89 | const handleOpen = (event) => {
90 | setAnchorEl(event.currentTarget);
91 | };
92 |
93 | const handleClose = () => {
94 | setAnchorEl(null);
95 | };
96 |
97 | const handleChange = (e) => {
98 | setDomainName(e.target.value);
99 | };
100 |
101 | const keyPress = (e) => {
102 | if (e.charCode === 13) {
103 | setDomainName("");
104 | history.push(`/search/${domainName}`);
105 | }
106 | };
107 |
108 | return (
109 |
189 | );
190 | }
191 |
--------------------------------------------------------------------------------
/src/components/Identicon.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Jazzicon from "@metamask/jazzicon";
4 |
5 | const useStyles = makeStyles(() => ({
6 | icon: {
7 | height: "1rem",
8 | width: "1rem",
9 | borderRadius: "1.125rem",
10 | borderColor: "black",
11 | },
12 | }));
13 |
14 | export default function Identicon({ account, size = 16 }) {
15 | const classes = useStyles();
16 | const ref = useRef();
17 |
18 | useEffect(() => {
19 | if (account && ref.current) {
20 | ref.current.innerHTML = "";
21 | ref.current.appendChild(
22 | Jazzicon(size, parseInt(account.slice(2, 10), 16))
23 | );
24 | }
25 | }, [account, size]);
26 |
27 | return ;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Lookup.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { useParams } from "react-router-dom";
3 | import { makeStyles } from "@material-ui/core/styles";
4 | import { ethers } from "ethers";
5 | import Container from "@material-ui/core/Container";
6 | import Paper from "@material-ui/core/Paper";
7 | import InputBase from "@material-ui/core/InputBase";
8 | import IconButton from "@material-ui/core/IconButton";
9 | import SearchIcon from "@material-ui/icons/Search";
10 | import Alert from "@material-ui/lab/Alert";
11 | import CircularProgress from "@material-ui/core/CircularProgress";
12 |
13 | import NetworkConfig from "uns/uns-config.json";
14 | import supportedKeys from "uns/resolver-keys.json";
15 |
16 | import cnsRegistryJson from "uns/artifacts/CNSRegistry.json";
17 | import unsRegistryJson from "uns/artifacts/UNSRegistry.json";
18 | import proxyReaderJson from "uns/artifacts/ProxyReader.json";
19 |
20 | import DomainList from "./DomainList";
21 | import { createContract } from "../utils/contract";
22 |
23 | const useStyles = makeStyles((theme) => ({
24 | root: {
25 | marginTop: 40,
26 | padding: "2px 4px",
27 | display: "flex",
28 | alignItems: "center",
29 | },
30 | input: {
31 | marginLeft: theme.spacing(1),
32 | flex: 1,
33 | },
34 | iconButton: {
35 | padding: 10,
36 | },
37 | loader: {
38 | width: "100%",
39 | display: "flex",
40 | flexDirection: "column",
41 | alignItems: "center",
42 | },
43 | }));
44 |
45 | const Lookup = ({ library, chainId }) => {
46 | const classes = useStyles();
47 | const { domain: domainParam } = useParams();
48 |
49 | const [domainName, setDomainName] = useState(domainParam);
50 | const [domain, setDomain] = useState(undefined);
51 | const [fetched, setFetched] = useState(true);
52 | const [error, setError] = useState(undefined);
53 |
54 | const { contracts } = NetworkConfig.networks[chainId];
55 | const cnsRegistry = createContract(
56 | library,
57 | chainId,
58 | cnsRegistryJson.abi,
59 | contracts.CNSRegistry
60 | );
61 | const unsRegistry = createContract(
62 | library,
63 | chainId,
64 | unsRegistryJson.abi,
65 | contracts.UNSRegistry
66 | );
67 | const proxyReader = createContract(
68 | library,
69 | chainId,
70 | proxyReaderJson.abi,
71 | contracts.ProxyReader
72 | );
73 |
74 | const _keys = Object.keys(supportedKeys.keys);
75 |
76 | useEffect(() => {
77 | if (domainName) {
78 | search();
79 | }
80 | }, [domainName]);
81 |
82 | const search = async () => {
83 | try {
84 | setError(undefined);
85 | if (domain && domainName === domain.name) {
86 | return;
87 | }
88 |
89 | if (ethers.utils.isHexString(domainName) && domainName.length === 66) {
90 | setDomainName(await fetchName(domainName));
91 | return;
92 | }
93 |
94 | setDomain(undefined);
95 | const tokenId = ethers.utils.namehash(domainName);
96 | console.debug(domainName, tokenId);
97 | await loadData(tokenId, domainName);
98 | } catch (error) {
99 | setError(error.message);
100 | }
101 | };
102 |
103 | const fetchName = async (token) => {
104 | const registry = (await unsRegistry.exists(token))
105 | ? unsRegistry
106 | : cnsRegistry;
107 | const events = await registry.source.fetchNewURIEvents([token]);
108 | if (!events.length) {
109 | throw new Error("Token not found");
110 | }
111 | return events.find((e) => e.args.tokenId.toHexString() === token).args.uri;
112 | };
113 |
114 | const loadData = async (tokenId, name) => {
115 | setFetched(false);
116 |
117 | console.debug("Fetching state...");
118 | const data = await proxyReader.callStatic.getData(_keys, tokenId);
119 | console.debug("Fetched state", data);
120 |
121 | const records = {};
122 | _keys.forEach((k, i) => (records[k] = data[2][i]));
123 |
124 | const _domain = {
125 | id: tokenId,
126 | name,
127 | registry:
128 | data.resolver === unsRegistry.address.toLowerCase()
129 | ? unsRegistry.address
130 | : cnsRegistry.address,
131 | type: data.resolver === unsRegistry.address ? "uns" : "cns",
132 | owner: data.owner,
133 | resolver: data.resolver,
134 | records,
135 | };
136 |
137 | console.debug("Update state", _domain);
138 | setFetched(true);
139 | setDomain(_domain);
140 | };
141 |
142 | const loadDomainEvents = (domain) => {
143 | console.debug("Loading DOMAIN events...");
144 |
145 | const registry =
146 | unsRegistry.address.toLowerCase() === domain.registry
147 | ? unsRegistry
148 | : cnsRegistry;
149 | return registry.source.fetchEvents(domain).then((domainEvents) => {
150 | console.debug("Loaded DOMAIN events", domainEvents);
151 |
152 | return {
153 | isFetched: true,
154 | events: domainEvents || [],
155 | };
156 | });
157 | };
158 |
159 | const handleChange = (e) => {
160 | setDomainName(e.target.value);
161 | };
162 |
163 | const keyPress = (e) => {
164 | if (e.charCode === 13) {
165 | search();
166 | }
167 | };
168 |
169 | return (
170 |
171 |
172 |
185 |
190 |
191 |
192 |
193 | {error && {error}}
194 | {!fetched && (
195 |
196 |
197 |
198 | )}
199 | {fetched && domain && (
200 |
201 |
207 |
208 | )}
209 |
210 | );
211 | };
212 |
213 | export default Lookup;
214 |
--------------------------------------------------------------------------------
/src/components/MintDomainForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Grid from '@material-ui/core/Grid';
4 | import Button from '@material-ui/core/Button';
5 | import TextField from '@material-ui/core/TextField';
6 | import MenuItem from '@material-ui/core/MenuItem';
7 | import Backdrop from '@material-ui/core/Backdrop';
8 | import CircularProgress from '@material-ui/core/CircularProgress';
9 | import Alert from '@material-ui/lab/Alert';
10 |
11 | const useStyles = makeStyles((theme) => ({
12 | form: {
13 | minWidth: 600,
14 | [theme.breakpoints.down('sm')]: {
15 | minWidth: 'initial',
16 | }
17 | },
18 | domainName: {
19 | display: 'flex',
20 | },
21 | grow: {
22 | marginLeft: 8,
23 | flexGrow: 1,
24 | },
25 | backdrop: {
26 | zIndex: theme.zIndex.drawer + 1,
27 | color: '#fff',
28 | },
29 | prefix: {
30 | },
31 | actions: {
32 | display: 'flex',
33 | paddingTop: 20,
34 | paddingBottom: 8,
35 | },
36 | }));
37 |
38 | const MintDomainForm = ({ minting, error, onMint, onCancel }) => {
39 | const classes = useStyles();
40 |
41 | const [domainName, setDomainName] = useState('');
42 | const [tld, setTLD] = useState('0x0f4a10a4f46c288cea365fcf45cccf0e9d901b945b9829ccdb54c10dc3cb7a6f');
43 |
44 | const mint = () => {
45 | onMint && onMint(tld, domainName);
46 | }
47 |
48 | return (
49 | <>
50 |
51 |
52 |
53 |
61 |
62 |
63 | { setDomainName(event.target.value); }} />
68 |
69 |
70 | { setTLD(event.target.value) }}
76 | className={classes.grow} select>
77 |
78 | {/* */}
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | {error &&
91 |
92 | {error}
93 |
94 | }
95 |
96 |
97 |
100 |
107 |
108 |
109 |
110 | {
111 |
112 |
113 |
114 | }
115 |
116 | );
117 | }
118 |
119 | export default MintDomainForm;
120 |
--------------------------------------------------------------------------------
/src/components/RecordsForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Grid from "@material-ui/core/Grid";
4 | import IconButton from "@material-ui/core/IconButton";
5 | import DeleteIcon from "@material-ui/icons/Delete";
6 | import AddIcon from "@material-ui/icons/Add";
7 | import Autocomplete from "@material-ui/lab/Autocomplete";
8 | import TextField from "@material-ui/core/TextField";
9 | import Button from "@material-ui/core/Button";
10 | import Backdrop from "@material-ui/core/Backdrop";
11 | import CircularProgress from "@material-ui/core/CircularProgress";
12 | import Alert from "@material-ui/lab/Alert";
13 |
14 | import supportedKeys from "uns/resolver-keys.json";
15 |
16 | const useStyles = makeStyles((theme) => ({
17 | form: {
18 | minWidth: 600,
19 | [theme.breakpoints.down("sm")]: {
20 | minWidth: "initial",
21 | },
22 | },
23 | record: {
24 | paddingTop: 8,
25 | paddingBottom: 8,
26 | },
27 | recordKey: {
28 | fontWeight: "bold",
29 | },
30 | recordKeySelectContainer: {
31 | marginRight: 10,
32 | },
33 | recordKeySelect: {
34 | width: "100%",
35 | },
36 | recordValue: {
37 | display: "flex",
38 | },
39 | grow: {
40 | flexGrow: 1,
41 | },
42 | backdrop: {
43 | zIndex: theme.zIndex.drawer + 1,
44 | color: "#fff",
45 | },
46 | actions: {
47 | display: "flex",
48 | paddingTop: 20,
49 | paddingBottom: 8,
50 | },
51 | }));
52 |
53 | const RecordsForm = ({ records, updating, error, onUpdate, onCancel }) => {
54 | const classes = useStyles();
55 |
56 | const [recordKey, setRecordKey] = useState("");
57 | const [recordValue, setRecordValue] = useState("");
58 | const [form, setForm] = useState({
59 | records: [],
60 | displayable: [],
61 | fillableKeys: [],
62 | });
63 |
64 | useEffect(() => {
65 | const filledRecords = Object.entries(records)
66 | .filter(([_, val]) => !!val)
67 | .map(([key, value]) => {
68 | return { key, value, newValue: value };
69 | });
70 | const filledKeys = filledRecords.map((x) => x.key);
71 | const fillableKeys = Object.keys(supportedKeys.keys).filter(
72 | (x) => !filledKeys.includes(x)
73 | );
74 |
75 | setForm({
76 | records: filledRecords,
77 | displayable: filledRecords,
78 | fillableKeys: fillableKeys,
79 | });
80 | }, [records]);
81 |
82 | const updateRecord = (_record) => (event) => {
83 | const value = event.target.value;
84 | const _records = form.records.map((r) => {
85 | if (r.key === _record) {
86 | r.newValue = value;
87 | r.muted = r.value !== value;
88 | }
89 | return r;
90 | });
91 |
92 | const filledKeys = _records.map((x) => x.key);
93 | const fillableKeys = Object.keys(supportedKeys.keys).filter(
94 | (x) => !filledKeys.includes(x)
95 | );
96 |
97 | setForm({
98 | records: _records,
99 | displayable: _records.filter((r) => !!r.newValue),
100 | fillableKeys: fillableKeys,
101 | muted: _records.some((r) => r.muted),
102 | });
103 | };
104 |
105 | const deleteRecord = (_record) => () => {
106 | const _records = form.records.map((r) => {
107 | if (r.key === _record) {
108 | r.newValue = undefined;
109 | r.muted = r.value !== undefined;
110 | }
111 | return r;
112 | });
113 | const filledKeys = _records.map((x) => x.key);
114 | const fillableKeys = Object.keys(supportedKeys.keys).filter(
115 | (x) => !filledKeys.includes(x)
116 | );
117 |
118 | setForm({
119 | records: _records,
120 | displayable: _records.filter((r) => !!r.newValue),
121 | fillableKeys: fillableKeys,
122 | muted: _records.some((r) => r.muted),
123 | });
124 | };
125 |
126 | const addRecord = () => {
127 | if (!recordKey || !recordValue) {
128 | return;
129 | }
130 |
131 | const _records = [
132 | ...form.records,
133 | {
134 | key: recordKey,
135 | value: undefined,
136 | newValue: recordValue,
137 | muted: recordValue !== undefined,
138 | },
139 | ];
140 | const filledKeys = _records.map((x) => x.key);
141 | const fillableKeys = Object.keys(supportedKeys.keys).filter(
142 | (x) => !filledKeys.includes(x)
143 | );
144 |
145 | setForm({
146 | records: _records,
147 | displayable: _records.filter((r) => !!r.newValue),
148 | fillableKeys: fillableKeys,
149 | muted: _records.some((r) => r.muted),
150 | });
151 | setRecordValue("");
152 | setRecordKey("");
153 | };
154 |
155 | const update = () => {
156 | onUpdate && onUpdate(form.records.filter((r) => r.muted));
157 | };
158 |
159 | return (
160 | <>
161 |
162 | {form.displayable.map(({ key, newValue }) => {
163 | return (
164 |
171 |
172 | {key}
173 |
174 |
175 |
182 |
183 |
184 |
185 |
186 |
187 | );
188 | })}
189 |
190 |
191 |
192 |
{
197 | setRecordKey(value);
198 | }}
199 | renderInput={(params) => (
200 |
201 | )}
202 | />
203 |
168 |
169 |
170 | )}
171 | {fetched && availability && (
172 |
173 |
179 |
180 | )}
181 | {fetched && domain && (
182 |
183 |
189 |
190 | )}
191 |
192 | );
193 | };
194 |
195 | export default Search;
196 |
--------------------------------------------------------------------------------
/src/connectors.js:
--------------------------------------------------------------------------------
1 | import { InjectedConnector } from "@web3-react/injected-connector";
2 | import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
3 | import { WalletLinkConnector } from "@web3-react/walletlink-connector";
4 |
5 | import { config } from "./utils/config";
6 |
7 | export const POLLING_INTERVAL = 12000;
8 |
9 | export const injected = new InjectedConnector({
10 | supportedChainIds: [1, 5, 137, 80001],
11 | });
12 |
13 | export const walletconnect = new WalletConnectConnector({
14 | rpc: {
15 | 1: config[1].rpcUrl,
16 | 5: config[5].rpcUrl,
17 | 137: config[137].rpcUrl,
18 | 80001: config[80001].rpcUrl,
19 | },
20 | qrcode: true,
21 | pollingInterval: POLLING_INTERVAL,
22 | });
23 |
24 | export const walletlink = new WalletLinkConnector({
25 | url: config[1].rpcUrl,
26 | appName: "Web3 Domain Manager",
27 | supportedChainIds: [1, 5, 137, 80001],
28 | });
29 |
--------------------------------------------------------------------------------
/src/hooks.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { useWeb3React } from '@web3-react/core';
3 |
4 | import { injected } from './connectors';
5 |
6 | export function useEagerConnect() {
7 | const { activate, active } = useWeb3React()
8 |
9 | const [tried, setTried] = useState(false)
10 |
11 | useEffect(() => {
12 | injected.isAuthorized().then((isAuthorized) => {
13 | if (isAuthorized) {
14 | activate(injected, undefined, true).catch(() => {
15 | setTried(true)
16 | })
17 | } else {
18 | setTried(true)
19 | }
20 | })
21 | }, []) // intentionally only running on mount (make sure it's only mounted once :))
22 |
23 | // if the connection worked, wait until we get confirmation of that to flip the flag
24 | useEffect(() => {
25 | if (!tried && active) {
26 | setTried(true)
27 | }
28 | }, [tried, active])
29 |
30 | return tried
31 | }
32 |
33 | export function useInactiveListener(suppress = false) {
34 | const { active, error, activate } = useWeb3React()
35 |
36 | useEffect(() => {
37 | const { ethereum } = window;
38 | if (ethereum && ethereum.on && !active && !error && !suppress) {
39 | const handleConnect = () => {
40 | console.log("Handling 'connect' event")
41 | activate(injected)
42 | }
43 | const handleChainChanged = (chainId) => {
44 | console.log("Handling 'chainChanged' event with payload", chainId)
45 | activate(injected)
46 | }
47 | const handleAccountsChanged = (accounts) => {
48 | console.log("Handling 'accountsChanged' event with payload", accounts)
49 | if (accounts.length > 0) {
50 | activate(injected)
51 | }
52 | }
53 | const handleNetworkChanged = (networkId) => {
54 | console.log("Handling 'networkChanged' event with payload", networkId)
55 | activate(injected)
56 | }
57 |
58 | ethereum.on('connect', handleConnect)
59 | ethereum.on('chainChanged', handleChainChanged)
60 | ethereum.on('accountsChanged', handleAccountsChanged)
61 | ethereum.on('networkChanged', handleNetworkChanged)
62 |
63 | return () => {
64 | if (ethereum.removeListener) {
65 | ethereum.removeListener('connect', handleConnect)
66 | ethereum.removeListener('chainChanged', handleChainChanged)
67 | ethereum.removeListener('accountsChanged', handleAccountsChanged)
68 | ethereum.removeListener('networkChanged', handleNetworkChanged)
69 | }
70 | }
71 | }
72 | }, [active, error, suppress, activate])
73 | }
74 |
--------------------------------------------------------------------------------
/src/images/cw.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/images/mm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aquiladev/web3-domain-manager/b08dc8a313e2becced2126e6dc90054bcbf8206f/src/images/mm.png
--------------------------------------------------------------------------------
/src/images/wc.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | background-color: #f5f5f5;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { StrictMode } from "react";
2 | import ReactDOM from "react-dom";
3 | import ReactGA from "react-ga4";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 | import reportWebVitals from "./reportWebVitals";
8 |
9 | ReactGA.initialize("G-E307TY909N");
10 | ReactGA.send({
11 | hitType: "pageview",
12 | page: window.location.pathname + window.location.search,
13 | });
14 |
15 | ReactDOM.render(
16 |
17 |
18 | ,
19 | document.getElementById("root")
20 | );
21 |
22 | // If you want to start measuring performance in your app, pass a function
23 | // to log results (for example: reportWebVitals(console.log))
24 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
25 | reportWebVitals();
26 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/services/udRegistry.js:
--------------------------------------------------------------------------------
1 | const BASE_URL = "https://api.unstoppabledomains.com";
2 |
3 | export const getAvailability = async (name) => {
4 | if (!name) {
5 | throw new Error(`Name is undefined [name: ${name}]`);
6 | }
7 |
8 | const url = `${BASE_URL}/registry/v1/domains/${name}`;
9 | return fetch(url).then((response) => response.json());
10 | };
11 |
12 | export const getPurchaseParams = async (name, owner) => {
13 | if (!name) {
14 | throw new Error(`Name is undefined [name: ${name}]`);
15 | }
16 |
17 | const url = `${BASE_URL}/registry/v1/domains/${name}/parameters/purchase`;
18 | return fetch(url, {
19 | method: "POST",
20 | headers: { "Content-Type": "application/json" },
21 | body: JSON.stringify({
22 | owner: { address: owner },
23 | records: {},
24 | currency: "MATIC",
25 | }),
26 | }).then((response) => response.json());
27 | };
28 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/sources/blockchain.js:
--------------------------------------------------------------------------------
1 | import supportedKeys from "uns/resolver-keys.json";
2 |
3 | const _keys = Object.keys(supportedKeys.keys);
4 |
5 | export async function getDomainName(registry, tokenId) {
6 | const events = await registry.source.fetchNewURIEvents(tokenId);
7 | if (!events || !events.length) return tokenId;
8 |
9 | return events[0].args.uri;
10 | }
11 |
12 | export const fetchTokens = (registry, account, type) => {
13 | return registry.source.fetchTransferEvents(account).then(async (events) => {
14 | console.debug(`Loaded events from registry ${registry.address}`, events);
15 |
16 | const _tokens = [];
17 | const _distinct = [];
18 | events.forEach(async (e) => {
19 | if (!_distinct.includes(e.args.tokenId.toString())) {
20 | _tokens.push({
21 | tokenId: e.args.tokenId.toHexString(),
22 | registry: registry.address,
23 | type,
24 | });
25 | _distinct.push(e.args.tokenId.toString());
26 | }
27 | });
28 | return _tokens;
29 | });
30 | };
31 |
32 | export const fetchNames = async (source, tokens) => {
33 | if (!tokens.length) return [];
34 |
35 | const events = await source.fetchNewURIEvents(tokens);
36 | return tokens.map((t) => {
37 | const event = events.find((e) => e.args.tokenId.toHexString() === t);
38 | return {
39 | tokenId: t,
40 | name: !!event ? event.args.uri : t,
41 | };
42 | });
43 | };
44 |
45 | export const fetchDomain = async (
46 | domain,
47 | registry,
48 | proxyReader,
49 | account,
50 | names
51 | ) => {
52 | const _data = await proxyReader.callStatic.getData(_keys, domain.id);
53 |
54 | const records = {};
55 | _keys.forEach((k, i) => (records[k] = _data[2][i]));
56 |
57 | const name = names && names.find((n) => n.tokenId === domain.id);
58 | domain.name = name ? name.name : await getDomainName(registry, domain.id);
59 | domain.owner = _data.owner;
60 | domain.removed = _data.owner !== account;
61 | domain.resolver = _data.resolver;
62 | domain.records = records;
63 | domain.loading = false;
64 |
65 | return domain;
66 | };
67 |
68 | export const fetchDomains = async (cnsRegistry, unsRegistry) => {
69 | const domains = [];
70 |
71 | console.debug("Loading events...");
72 | const [cnsTokens, unsTokens] = await Promise.all([
73 | fetchTokens(cnsRegistry, "cns"),
74 | fetchTokens(unsRegistry, "uns"),
75 | ]);
76 |
77 | const names = await Promise.all([
78 | fetchNames(
79 | cnsRegistry.source,
80 | cnsTokens.map((t) => t.tokenId)
81 | ),
82 | fetchNames(
83 | unsRegistry.source,
84 | unsTokens.map((t) => t.tokenId)
85 | ),
86 | ]).then((x) => x.flat());
87 |
88 | for (const token of cnsTokens.concat(unsTokens)) {
89 | // const registry =
90 | // unsRegistry.address === token.registry ? unsRegistry : cnsRegistry;
91 |
92 | const domain = {
93 | id: token.tokenId,
94 | name: token.tokenId,
95 | registry: token.registry,
96 | type: token.type,
97 | loading: true,
98 | };
99 | domains.push(domain);
100 |
101 | // fetchDomain(domain, registry, names).then((dd) => {
102 | // domains.map((d) => {
103 | // return d.id === dd.id ? { ...d, ...dd } : d;
104 | // });
105 |
106 | // setData({
107 | // ...data,
108 | // [stateKey]: {
109 | // isFetched: true,
110 | // domains: domains.filter((d) => !d.removed),
111 | // },
112 | // });
113 | // });
114 | }
115 |
116 | return domains.filter((d) => !d.removed);
117 | };
118 |
--------------------------------------------------------------------------------
/src/sources/ethereum.js:
--------------------------------------------------------------------------------
1 | import NetworkConfig from "uns/uns-config.json";
2 |
3 | import { DOMAIN_EVENTS } from "./../utils/constants";
4 |
5 | export default class EthereumEventSource {
6 | constructor(library, chainId, contract) {
7 | this.library = library;
8 | this.chainId = chainId;
9 | this.contract = contract;
10 |
11 | const { contracts } = NetworkConfig.networks[chainId];
12 | const config = Object.values(contracts).find(
13 | (x) => x.address.toLowerCase() === contract.address.toLowerCase()
14 | );
15 | if (!config) {
16 | throw new Error(
17 | `Config of contract ${contract.address} not found (chainId: ${chainId})`
18 | );
19 | }
20 | this.config = config;
21 |
22 | this.onProgressObservers = [];
23 | }
24 |
25 | onProgress(fn) {
26 | this.onProgressObservers.push(fn);
27 | }
28 |
29 | async fetchEvents(domain) {
30 | const contractEvents = Object.keys(this.contract.filters);
31 | const filtersMap = {
32 | Approval: (tokenId) =>
33 | this.contract.filters.Approval(undefined, undefined, tokenId),
34 | NewURI: (tokenId) => this.contract.filters.NewURI(tokenId),
35 | Transfer: (tokenId) =>
36 | this.contract.filters.Transfer(undefined, undefined, tokenId),
37 | Resolve: (tokenId) => this.contract.filters.Resolve(tokenId),
38 | Sync: (tokenId) =>
39 | this.contract.filters.Sync(undefined, undefined, tokenId),
40 | Set: (tokenId) => this.contract.filters.Set(tokenId),
41 | };
42 |
43 | let current = 1;
44 | return Promise.all(
45 | DOMAIN_EVENTS.filter((e) => contractEvents.includes(e)).map((event) => {
46 | const filter = filtersMap[event](domain.id);
47 | return this.contract
48 | .queryFilter(filter, this.config.deploymentBlock)
49 | .then(
50 | this._progress({
51 | loaded: current++,
52 | total: DOMAIN_EVENTS.length,
53 | })
54 | );
55 | })
56 | ).then((x) => x.flat().sort((a, b) => a.blockNumber - b.blockNumber));
57 | }
58 |
59 | async fetchTransferEvents(address) {
60 | const filter = this.contract.filters.Transfer(undefined, address);
61 | return this._fetchEvents(
62 | this.contract,
63 | filter,
64 | parseInt(this.config.deploymentBlock, 16)
65 | );
66 | }
67 |
68 | async fetchNewURIEvents(tokenOrArray) {
69 | const filter = this.contract.filters.NewURI(tokenOrArray);
70 | return this._fetchEvents(
71 | this.contract,
72 | filter,
73 | parseInt(this.config.deploymentBlock, 16)
74 | );
75 | }
76 |
77 | async _fetchEvents(contract, filter, fromBlock, toBlock, limit = 1000000) {
78 | if (!toBlock) {
79 | toBlock = await contract.provider.getBlockNumber();
80 | }
81 |
82 | if (fromBlock > toBlock) {
83 | return [];
84 | }
85 |
86 | const _toBlock = Math.min(fromBlock + limit, toBlock);
87 | console.log(
88 | `Fetching events blocks [${contract.address}: ${fromBlock}-${_toBlock}][limit: ${limit}]`
89 | );
90 |
91 | try {
92 | const events = await contract.queryFilter(filter, fromBlock, _toBlock);
93 | const nextLimit = Math.min(Math.floor(limit * 2), 1000000);
94 | return events.concat(
95 | await this._fetchEvents(
96 | contract,
97 | filter,
98 | _toBlock + 1,
99 | toBlock,
100 | nextLimit
101 | )
102 | );
103 | } catch (err) {
104 | if (
105 | err.message.includes("query returned more than 10000 results") ||
106 | err.message.includes("timeout")
107 | ) {
108 | return this._fetchEvents(
109 | contract,
110 | filter,
111 | fromBlock,
112 | toBlock,
113 | Math.floor(limit / 10)
114 | );
115 | }
116 |
117 | console.log("FAIL", err);
118 | throw err;
119 | }
120 | }
121 |
122 | _progress(data) {
123 | this.onProgressObservers.forEach((fn) => fn(data));
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/src/sources/thegraph.js:
--------------------------------------------------------------------------------
1 | import { gql } from "@apollo/client";
2 |
3 | import { config } from "../utils/config";
4 |
5 | export const getAccount = async (chainId, address, force = false) => {
6 | if (!chainId || !address) {
7 | throw new Error(
8 | `Invalid arguments [chainId: ${chainId}, account: ${address}]`
9 | );
10 | }
11 |
12 | const { client } = config[chainId];
13 | if (!client) {
14 | throw new Error(`Unsupported chain ${chainId}`);
15 | }
16 |
17 | const { data } = await client.query({
18 | query: gql`
19 | query GetAccount($id: ID!) {
20 | account(id: $id) {
21 | id
22 | reverse {
23 | id
24 | name
25 | }
26 | domains {
27 | id
28 | name
29 | registry
30 | owner {
31 | id
32 | }
33 | resolver {
34 | address
35 | records {
36 | key
37 | value
38 | }
39 | }
40 | }
41 | }
42 | }
43 | `,
44 | variables: { id: String(address).toLowerCase() },
45 | fetchPolicy: force ? "no-cache" : undefined,
46 | });
47 |
48 | const { account } = data;
49 | if (!account) {
50 | return {};
51 | }
52 |
53 | const domains = _parseDomains(account.domains);
54 |
55 | // Domain name lookup in linked network
56 | const unknownTokens = domains.filter((d) => !d.name).map((d) => d.id);
57 | if (unknownTokens.length) {
58 | const map = await _getDomainNamesMap(
59 | config[chainId].linkedChainId,
60 | unknownTokens
61 | );
62 | console.log(
63 | "NO_NAME_DOMAINS",
64 | domains.filter((d) => !d.name).map((d) => d.id),
65 | map
66 | );
67 | domains.map((d) => {
68 | if (!d.name && !!map[d.id]) {
69 | d.name = map[d.id];
70 | }
71 | return d;
72 | });
73 | }
74 |
75 | return {
76 | id: account.id,
77 | domains,
78 | };
79 | };
80 |
81 | export const getDomain = async (chainId, tokenId, force = false) => {
82 | if (!chainId || !tokenId) {
83 | throw new Error(
84 | `Invalid arguments [chainId: ${chainId}, tokenId: ${tokenId}]`
85 | );
86 | }
87 |
88 | const { client } = config[chainId];
89 | if (!client) {
90 | throw new Error(`Unsupported chain ${chainId}`);
91 | }
92 |
93 | const { data } = await client.query({
94 | query: gql`
95 | query GetDomain($id: ID!) {
96 | domain(id: $id) {
97 | id
98 | name
99 | registry
100 | owner {
101 | id
102 | }
103 | resolver {
104 | address
105 | records {
106 | key
107 | value
108 | }
109 | }
110 | }
111 | }
112 | `,
113 | variables: { id: String(tokenId).toLowerCase() },
114 | fetchPolicy: force ? "no-cache" : undefined,
115 | });
116 |
117 | const { domain } = data;
118 | if (!domain) {
119 | return {};
120 | }
121 |
122 | return {
123 | id: domain.id,
124 | name: domain.name,
125 | owner: domain.owner.id,
126 | registry: domain.registry,
127 | resolver: (domain.resolver || {}).address,
128 | records: _parseRecords(domain.resolver),
129 | };
130 | };
131 |
132 | const _parseDomains = (domains) => {
133 | if (!domains || !Array(domains).length) {
134 | return [];
135 | }
136 |
137 | return Object.values(domains).map((d) => {
138 | return {
139 | id: d.id,
140 | name: d.name,
141 | owner: d.owner.id,
142 | registry: d.registry,
143 | resolver: (d.resolver || {}).address,
144 | records: _parseRecords(d.resolver),
145 | };
146 | });
147 | };
148 |
149 | const _parseRecords = (resolver) => {
150 | if (!resolver || !resolver.records) {
151 | return {};
152 | }
153 |
154 | return Object.values(resolver.records).reduce((obj, r) => {
155 | obj[r.key] = r.value;
156 | return obj;
157 | }, {});
158 | };
159 |
160 | const _getDomainNamesMap = async (chainId, tokenIds) => {
161 | const { client } = config[chainId];
162 | if (!client) {
163 | throw new Error(`Unsupported chain ${chainId}`);
164 | }
165 |
166 | const { data } = await client.query({
167 | query: gql`
168 | query filteredDomains($ids: [ID!]!) {
169 | domains(where: { id_in: $ids }) {
170 | id
171 | name
172 | }
173 | }
174 | `,
175 | variables: {
176 | ids: tokenIds,
177 | },
178 | });
179 | const { domains } = data;
180 | if (!domains) {
181 | return {};
182 | }
183 |
184 | return Object.values(domains).reduce((obj, key) => {
185 | obj[key.id] = key.name;
186 | return obj;
187 | }, {});
188 | };
189 |
--------------------------------------------------------------------------------
/src/utils/address.js:
--------------------------------------------------------------------------------
1 | import sha3 from 'crypto-js/sha3';
2 |
3 | export function isAddress(address) {
4 | if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
5 | // check if it has the basic requirements of an address
6 | return false;
7 | } else if (/^(0x)?[0-9a-f]{40}$/.test(address) || /^(0x)?[0-9A-F]{40}$/.test(address)) {
8 | // If it's all small caps or all all caps, return true
9 | return true;
10 | } else {
11 | // Otherwise check each case
12 | return isChecksumAddress(address);
13 | }
14 | };
15 |
16 | export function isChecksumAddress(address) {
17 | // Check each case
18 | address = address.replace('0x', '');
19 | var addressHash = sha3(address.toLowerCase());
20 | for (var i = 0; i < 40; i++) {
21 | // the nth letter should be uppercase if the nth digit of casemap is 1
22 | if ((parseInt(addressHash[i], 16) > 7 && address[i].toUpperCase() !== address[i]) ||
23 | (parseInt(addressHash[i], 16) <= 7 && address[i].toLowerCase() !== address[i])) {
24 | return false;
25 | }
26 | }
27 | return true;
28 | };
29 |
--------------------------------------------------------------------------------
/src/utils/config.js:
--------------------------------------------------------------------------------
1 | import { ApolloClient, InMemoryCache } from "@apollo/client";
2 |
3 | export const config = {
4 | 1: {
5 | rpcUrl: "https://mainnet.infura.io/v3/3947c045ca5a4d68bff484fb038fb11c",
6 | linkedChainId: 137,
7 | client: new ApolloClient({
8 | uri: "https://api.thegraph.com/subgraphs/name/aquiladev/uns",
9 | cache: new InMemoryCache(),
10 | }),
11 | },
12 | 5: {
13 | rpcUrl: "https://goerli.infura.io/v3/3947c045ca5a4d68bff484fb038fb11c",
14 | linkedChainId: 80001,
15 | client: new ApolloClient({
16 | uri: "https://api.thegraph.com/subgraphs/name/aquiladev/uns-goerli",
17 | cache: new InMemoryCache(),
18 | }),
19 | },
20 | 137: {
21 | rpcUrl:
22 | "https://polygon-mainnet.infura.io/v3/3947c045ca5a4d68bff484fb038fb11c",
23 | linkedChainId: 1,
24 | client: new ApolloClient({
25 | uri: "https://api.thegraph.com/subgraphs/name/aquiladev/uns-polygon",
26 | cache: new InMemoryCache(),
27 | }),
28 | },
29 | 80001: {
30 | rpcUrl:
31 | "https://polygon-mumbai.infura.io/v3/3947c045ca5a4d68bff484fb038fb11c",
32 | linkedChainId: 5,
33 | client: new ApolloClient({
34 | uri: "https://api.thegraph.com/subgraphs/name/aquiladev/uns-mumbai",
35 | cache: new InMemoryCache(),
36 | }),
37 | },
38 | };
39 |
--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | export const DOMAIN_EVENTS = [
2 | "Approval",
3 | "NewURI",
4 | "Transfer",
5 | "Resolve",
6 | "Sync",
7 | "Set",
8 | ];
9 |
10 | export const ETHERSCAN_MAP = {
11 | 1: "https://etherscan.io/",
12 | 5: "https://goerli.etherscan.io/",
13 | 137: "https://polygonscan.com/",
14 | 80001: "https://mumbai.polygonscan.com/",
15 | };
16 |
17 | export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
18 |
19 | export const CHAIN_ID_NETWORK = {
20 | 1: "Mainnet",
21 | 3: "Ropsten",
22 | 4: "Rinkeby",
23 | 5: "Goerli",
24 | 8: "Ubiq",
25 | 18: "ThundercoreTestnet",
26 | 42: "Kovan",
27 | 30: "Orchid",
28 | 31: "OrchidTestnet",
29 | 61: "Classic",
30 | 77: "Sokol",
31 | 99: "Core",
32 | 100: "xDai",
33 | 108: "Thundercore",
34 | 122: "Fuse",
35 | 137: "Polygon Mainnet",
36 | 163: "Lightstreams",
37 | 80001: "Polygon Mumbai",
38 | };
39 |
--------------------------------------------------------------------------------
/src/utils/contract.js:
--------------------------------------------------------------------------------
1 | import { ethers } from "ethers";
2 |
3 | import EthereumEventSource from "../sources/ethereum";
4 |
5 | export function createContract(library, chainId, abi, config) {
6 | const provider = new ethers.providers.Web3Provider(library.provider);
7 | const signer = provider.getSigner();
8 | const contract = new ethers.Contract(config.address, abi, signer);
9 |
10 | contract.source = new EthereumEventSource(library, chainId, contract);
11 | contract.source.onProgress(console.log);
12 | return contract;
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/namehash.js:
--------------------------------------------------------------------------------
1 | import { ethers, BigNumber } from 'ethers';
2 |
3 | export default function hamehash(domain) {
4 | domain = domain ? domain.trim().toLowerCase() : '';
5 | try {
6 | return BigNumber.from(domain).toHexString();
7 | } catch {}
8 |
9 | ensureSupportedTLD(domain);
10 | return ethers.utils.namehash.hash(domain)
11 | }
12 |
13 | function ensureSupportedTLD(domain) {
14 | if (!isSupportedTLD(domain)) {
15 | throw new Error('Domain is not supported', {
16 | domain,
17 | });
18 | }
19 | }
20 |
21 | function isSupportedTLD(domain) {
22 | return (
23 | ['crypto','coin','wallet','bitcoin','x','888','nft','dao','blockchain'].includes(domain) ||
24 | (domain.indexOf('.') > 0 &&
25 | /^.{1,}\.(crypto|coin|wallet|bitcoin|x|888|nft|dao|blockchain)$/.test(domain) &&
26 | domain.split('.').every(v => !!v.length))
27 | );
28 | }
29 |
--------------------------------------------------------------------------------