Skip to content

Commit

Permalink
add search
Browse files Browse the repository at this point in the history
  • Loading branch information
aquiladev committed Oct 7, 2023
1 parent 1d8cb06 commit 0d6cda4
Show file tree
Hide file tree
Showing 7 changed files with 948 additions and 369 deletions.
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"@gnosis.pm/safe-apps-provider": "0.9.2",
"@gnosis.pm/safe-apps-react-sdk": "4.0.8",
"@gnosis.pm/safe-react-components": "0.5.0",
"@material-ui/core": "4.11.2",
"@material-ui/core": "4.12.4",
"@material-ui/icons": "4.11.2",
"@material-ui/lab": "4.0.0-alpha.57",
"@metamask/jazzicon": "^2.0.0",
Expand All @@ -32,7 +32,7 @@
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"styled-components": "5.2.3",
"uns": "https://github.com/unstoppabledomains/uns#v0.6.20",
"uns": "https://github.com/unstoppabledomains/uns#v0.8.36",
"web-vitals": "^0.2.4"
},
"scripts": {
Expand Down Expand Up @@ -60,4 +60,4 @@
"last 1 safari version"
]
}
}
}
4 changes: 4 additions & 0 deletions src/DefaultApp.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import GlobalStyle from "./components/GlobalStyle";
import { useEagerConnect, useInactiveListener } from "./hooks";
import Domains from "./components/Domains";
import Lookup from "./components/Lookup";
import Search from "./components/Search";
import Header from "./components/Header";
import Footer from "./components/Footer";
import DeprecatedNetwork from "./components/DeprecatedNetwork";
Expand Down Expand Up @@ -134,6 +135,9 @@ function DefaultApp() {
<Route path="/lookup/:domain">
{active && <Lookup library={library} chainId={chainId} />}
</Route>
<Route path="/search/:domain">
{active && <Search library={library} chainId={chainId} />}
</Route>
<Route path="/lookup">
{active && <Lookup library={library} chainId={chainId} />}
</Route>
Expand Down
84 changes: 84 additions & 0 deletions src/components/BuyDomain.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import { Chip } from "@material-ui/core";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import Button from "@material-ui/core/Button";
import Alert from "@material-ui/lab/Alert";

import { getPurchaseParams } from "../services/udRegistry";

const useStyles = makeStyles((theme) => ({
grow: {
flexGrow: 1,
paddingLeft: 30,
},
buy: {
marginLeft: 16,
fontWeight: "bold",
},
acc: {
marginBottom: 16,
},
accSum: {
"& > .Mui-expanded": {
margin: "initial",
},
},
}));

const BuyDomain = ({ name, status, price }) => {
const classes = useStyles();

const [fetched, setFetched] = useState(true);
const [error, setError] = useState(undefined);

const handleBuy = async () => {
try {
setError(undefined);
setFetched(false);
const res = await getPurchaseParams(name);
console.log("RES", res);
} catch (error) {
console.error(error.message);
// setError(error.message);
setError("Comming soon...");
} finally {
setFetched(true);
}
};

return (
<>
<Accordion className={classes.acc}>
<AccordionSummary className={classes.accSum}>
<Typography style={{ fontWeight: "bold", fontSize: 20 }} noWrap>
{name}
</Typography>
<Chip
color="primary"
style={{ backgroundColor: "green", marginLeft: 16 }}
label={status}
/>
<div className={classes.grow}></div>
<Typography style={{ fontWeight: "bold", fontSize: 20 }} noWrap>
USD {(price / 100).toFixed(2)}
</Typography>
<Button
onClick={handleBuy}
className={classes.buy}
variant="contained"
color="primary"
disabled={!fetched}
>
Buy
</Button>
</AccordionSummary>
</Accordion>
{error && <Alert severity="error">{error}</Alert>}
</>
);
};

export default BuyDomain;
78 changes: 74 additions & 4 deletions src/components/Header.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import { Link, useHistory } from "react-router-dom";
import { alpha, makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
Expand All @@ -11,6 +11,7 @@ import MenuItem from "@material-ui/core/MenuItem";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import BarChartIcon from "@material-ui/icons/BarChart";
import CodeIcon from "@material-ui/icons/Code";
import InputBase from "@material-ui/core/InputBase";

import ConnectButton from "./ConnectButton";

Expand Down Expand Up @@ -38,20 +39,72 @@ const useStyles = makeStyles((theme) => ({
color: "inherit",
textDecoration: "none",
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.black, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("md")]: {
width: "20ch",
},
},
}));

export default function Header({ active }) {
const classes = useStyles();
const history = useHistory();

const [anchorEl, setAnchorEl] = useState(null);
const [domainName, setDomainName] = useState();
const open = Boolean(anchorEl);

const handleOpen = (event) => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

const handleChange = (e) => {
setDomainName(e.target.value);
};

const keyPress = (e) => {
if (e.charCode === 13) {
setDomainName("");
history.push(`/search/${domainName}`);
}
};

return (
<header>
<AppBar position="fixed" color="inherit">
Expand All @@ -62,6 +115,23 @@ export default function Header({ active }) {
</Typography>
</Link>
<div className={classes.grow}></div>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ "aria-label": "search" }}
onKeyPress={keyPress}
onChange={handleChange}
defaultValue={domainName}
value={domainName}
/>
</div>
<ConnectButton />
<Button
aria-label="more"
Expand All @@ -86,10 +156,10 @@ export default function Header({ active }) {
},
}}
>
<MenuItem component={Link} to="/lookup" disabled={!active}>
{/* <MenuItem component={Link} to="/lookup" disabled={!active}>
<div style={{ flexGrow: 1 }}>Lookup</div>
<SearchIcon />
</MenuItem>
</MenuItem> */}
<a
href="//dune.xyz/aquiladev/uns"
target="_blank"
Expand Down
Loading

0 comments on commit 0d6cda4

Please sign in to comment.