Skip to content

Commit

Permalink
Merge pull request #8 from dmccartney/daniel-ongoing
Browse files Browse the repository at this point in the history
feat: display ongoing rewards from s3
  • Loading branch information
dmccartney authored May 16, 2023
2 parents 0693c3d + ed9b84c commit 3db3fb1
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 111 deletions.
18 changes: 13 additions & 5 deletions web/src/components/IntervalRewardsTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,12 @@ const INTERVAL_COLS = [
sortComparator: BNSortComparator,
valueGetter: ({ value }) => ethers.BigNumber.from(value || 0),
renderCell: ({ value, row: { type } }) => (
<Stack direction="row" spacing={1}>
{type === "pending" && <Typography>&ge;</Typography>}
<Stack direction="row" spacing={1} alignItems="baseline">
{type === "ongoing" && (
<Typography component="span" variant="inherit" color="text.secondary">
&ge;
</Typography>
)}
<CurrencyValue size="small" currency="eth" value={value} />
</Stack>
),
Expand All @@ -156,9 +160,13 @@ const INTERVAL_COLS = [
ethers.BigNumber.from(oracleDaoRpl || "0")
);
},
renderCell: ({ value, row }) => (
<Stack direction="row" spacing={1}>
{row.type === "pending" && <Typography>~</Typography>}
renderCell: ({ value, row: { type } }) => (
<Stack direction="row" spacing={1} alignItems="baseline">
{type === "ongoing" && (
<Typography component="span" variant="inherit" color="text.secondary">
&ge;
</Typography>
)}
<CurrencyValue size="small" currency="rpl" value={value} />
</Stack>
),
Expand Down
107 changes: 3 additions & 104 deletions web/src/components/Layout.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import {
AppBar,
Box,
Button,
ButtonGroup,
Card,
CardContent,
CardHeader,
Grid,
IconButton,
Link,
List,
ListItem,
ListItemText,
Modal,
Stack,
TextField,
Toolbar,
Tooltip,
Typography,
Expand All @@ -23,10 +16,8 @@ import {
import { Link as RouterLink } from "react-router-dom";
import ConnectedWalletButton from "./ConnectedWalletButton";
import { HelpOutline, Settings } from "@mui/icons-material";
import { useRef, useState } from "react";
import { useAccount, useDisconnect } from "wagmi";
import { useThemeMode } from "../theme";
import useSetting from "../hooks/useSetting";
import { useState } from "react";
import SettingsList from "./SettingsList";

function FAQ() {
let theme = useTheme();
Expand Down Expand Up @@ -80,11 +71,6 @@ function FAQ() {

function SettingsButton({ sx }) {
let [isOpen, setOpen] = useState(false);
let { isConnected } = useAccount();
let { disconnectAsync } = useDisconnect();
let { mode, setMode } = useThemeMode();
let [ipfsBase, setIpfsBase, defaultIpfsBase] = useSetting("ipfs.base");
let ipfsRef = useRef();
return (
<>
<IconButton onClick={() => setOpen(true)} sx={sx}>
Expand All @@ -102,94 +88,7 @@ function SettingsButton({ sx }) {
<Card sx={{ width: "95%", maxWidth: 500 }}>
<CardHeader title={"Settings"} />
<CardContent>
<List>
{isConnected && (
<ListItem>
<ListItemText primary="Wallet" />
<Button
size="small"
onClick={() =>
disconnectAsync()
.then(() => setOpen(false))
.catch((e) => console.log("failure disconnecting", e))
}
>
Disconnect
</Button>
</ListItem>
)}
<ListItem>
<ListItemText primary="Theme" />
<ButtonGroup>
{["auto", "light", "dark"].map((m) => (
<Button
key={`mode-${m}`}
variant={mode === m ? "contained" : "outlined"}
size="small"
onClick={() => setMode(m)}
>
{m}
</Button>
))}
</ButtonGroup>
</ListItem>
<ListItem>
<ListItemText primary="IPFS Gateway" />
<Stack direction="column" alignItems="flex-end">
<ButtonGroup size="small">
<Button
onClick={() => setIpfsBase(defaultIpfsBase)}
variant={
ipfsBase === defaultIpfsBase ? "contained" : "outlined"
}
>
default
</Button>
<Button
onClick={() => {
setIpfsBase("https://");
ipfsRef.current?.focus();
}}
variant={
ipfsBase === defaultIpfsBase ? "outlined" : "contained"
}
>
custom
</Button>
</ButtonGroup>
</Stack>
</ListItem>
<Grid container>
<Grid item xs={4} />
<Grid item xs={8}>
<TextField
ref={ipfsRef}
disabled={ipfsBase === defaultIpfsBase}
fullWidth
size="small"
onChange={(e) => setIpfsBase(e.target.value)}
value={ipfsBase}
/>
</Grid>
</Grid>
<Typography
sx={{ ml: 2, mt: 4 }}
color="text.secondary"
component={"h2"}
variant="overline"
>
TODO
</Typography>
<ListItem>
<ListItemText primary="Ethereum RPC" />
<Stack direction="column" alignItems="flex-end">
<ButtonGroup disabled size="small">
<Button variant="contained">Default</Button>
<Button variant="outlined">Custom</Button>
</ButtonGroup>
</Stack>
</ListItem>
</List>
<SettingsList />
</CardContent>
</Card>
</Modal>
Expand Down
127 changes: 127 additions & 0 deletions web/src/components/SettingsList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { useAccount, useDisconnect } from "wagmi";
import { useThemeMode } from "../theme";
import useSetting from "../hooks/useSetting";
import { useRef } from "react";
import {
Button,
ButtonGroup,
Grid,
List,
ListItem,
ListItemText,
Stack,
TextField,
Tooltip,
} from "@mui/material";

export default function SettingsList() {
let { isConnected } = useAccount();
let { disconnectAsync } = useDisconnect();
let { mode, setMode } = useThemeMode();
let [ipfsBase, setIpfsBase, defaultIpfsBase] = useSetting("ipfs.base");
let [rewardsOngoingBase] = useSetting("rewards.ongoing.base");
let ipfsRef = useRef();
return (
<List>
{isConnected && (
<ListItem>
<ListItemText primary="Wallet" />
<Button
size="small"
onClick={() =>
disconnectAsync().catch((e) =>
console.log("failure disconnecting", e)
)
}
>
Disconnect
</Button>
</ListItem>
)}
<ListItem>
<ListItemText primary="Theme" />
<ButtonGroup>
{["auto", "light", "dark"].map((m) => (
<Button
key={`mode-${m}`}
variant={mode === m ? "contained" : "outlined"}
size="small"
onClick={() => setMode(m)}
>
{m}
</Button>
))}
</ButtonGroup>
</ListItem>
<ListItem>
<ListItemText primary="Ethereum RPC" />
<Tooltip arrow title="TODO: make Ethereum RPC configurable">
<Stack direction="column" alignItems="flex-end">
<ButtonGroup disabled size="small">
<Button variant="contained">Default</Button>
<Button variant="outlined">Custom</Button>
</ButtonGroup>
</Stack>
</Tooltip>
</ListItem>
<ListItem>
<ListItemText primary="IPFS Gateway" />
<Stack direction="column" alignItems="flex-end">
<ButtonGroup size="small">
<Button
onClick={() => setIpfsBase(defaultIpfsBase)}
variant={ipfsBase === defaultIpfsBase ? "contained" : "outlined"}
>
default
</Button>
<Button
onClick={() => {
setIpfsBase("");
setTimeout(() => ipfsRef.current?.focus(), 50);
}}
variant={ipfsBase === defaultIpfsBase ? "outlined" : "contained"}
>
custom
</Button>
</ButtonGroup>
</Stack>
</ListItem>
<Grid container sx={{ mb: 1, pr: 2 }}>
<Grid item xs={4} />
<Grid item xs={8}>
<TextField
inputRef={ipfsRef}
disabled={ipfsBase === defaultIpfsBase}
fullWidth
size="small"
placeholder="https://..."
onChange={(e) => setIpfsBase(e.target.value)}
value={ipfsBase}
/>
</Grid>
</Grid>
<ListItem>
<ListItemText primary="Ongoing Rewards" />
<Tooltip arrow title="TODO: make Ongoing Rewards configurable">
<Stack direction="column" alignItems="flex-end">
<ButtonGroup disabled size="small">
<Button variant="contained">Default</Button>
<Button variant="outlined">Custom</Button>
</ButtonGroup>
</Stack>
</Tooltip>
</ListItem>
<Grid container sx={{ mb: 1, pr: 2 }}>
<Grid item xs={4} />
<Grid item xs={8}>
<TextField
disabled
fullWidth
size="small"
value={rewardsOngoingBase}
/>
</Grid>
</Grid>
</List>
);
}
7 changes: 6 additions & 1 deletion web/src/hooks/useFetchRewardSnapshots.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@ export default function useFetchRewardSnapshots({
(snapshots || []).map(
({ rewardIndex, merkleTreeCID }) =>
`${ipfsBase}/ipfs/${merkleTreeCID}/rp-rewards-${network}-${rewardIndex}.json.zst`
)
),
{
enabled: !!ipfsBase,
cacheTime: Math.Infinite,
staleTime: Math.Infinite,
}
);
return (snapshots || []).map((snapshot, i) => ({
...snapshot,
Expand Down
24 changes: 23 additions & 1 deletion web/src/hooks/useOngoingRewardSnapshot.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,28 @@
import useSetting from "./useSetting";
import { useQuery } from "react-query";

const minuteMs = 1000 * 60;

export default function useOngoingRewardSnapshot({
rewardIndex,
network = "mainnet",
}) {
return null; // TODO: pull from s3
let [ongoingRewardsBaseUrl] = useSetting("rewards.ongoing.base");
let url = `${ongoingRewardsBaseUrl}/rp-rewards-${network}-${rewardIndex}.json`;
let { data: result } = useQuery(
["ongoingRewardSnapshot", url],
async () => {
let res = await fetch(url);
if (!res.ok) {
throw new Error(`failure fetching ongoing reward JSON from ${url}`);
}
return res.json();
},
{
enabled: !!ongoingRewardsBaseUrl && !!rewardIndex,
cacheTime: 120 * minuteMs,
staleTime: 60 * minuteMs,
}
);
return result;
}
4 changes: 4 additions & 0 deletions web/src/hooks/useSetting.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import { useMutation, useQuery, useQueryClient } from "react-query";
const defaultValues = {
"theme.mode": "auto",
"ipfs.base": "https://cloudflare-ipfs.com",
"rewards.ongoing.base": "https://rp-s3-cache.invis.tools",
// "rewards.ongoing.base": "https://rocket-pool-trees.s3.amazonaws.com",
// "rewards.ongoing.base": "http://localhost:3000",
// TODO: "eth.rpc": { alchemy: "..." } etc
};

export default function useSetting(key) {
Expand Down

0 comments on commit 3db3fb1

Please sign in to comment.