Skip to content

Commit

Permalink
feat(status-page): Tokenomics metrics (#13076)
Browse files Browse the repository at this point in the history
  • Loading branch information
cyberhorsey authored Jan 31, 2023
1 parent 2d93c95 commit cbd3e0b
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 37 deletions.
4 changes: 2 additions & 2 deletions packages/status-page/.default.env
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ VITE_L1_RPC_URL="https://l1rpc.a1.taiko.xyz"
VITE_L2_RPC_URL="https://l2rpc.a1.taiko.xyz"
VITE_TAIKO_L2_ADDRESS="0x0000777700000000000000000000000000000001"
VITE_TAIKO_L1_ADDRESS="0x7B3AF414448ba906f02a1CA307C56c4ADFF27ce7"
VITE_TOKENOMICS_ENABLED=false
VITE_L1_EXPLORER_URL="https://l1explorer.a1.taiko.xyz"
VITE_L2_EXPLORER_URL="https://l2explorer.a1.taiko.xyz"
VITE_L2_EXPLORER_URL="https://l2explorer.a1.taiko.xyz"
VITE_FEE_TOKEN_SYMBOL="TKO";
5 changes: 1 addition & 4 deletions packages/status-page/src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@
const l2Provider = new ethers.providers.JsonRpcProvider(
import.meta.env.VITE_L2_RPC_URL
);
const l2BootnodeProvider = new ethers.providers.JsonRpcProvider(
import.meta.env.VITE_L2_BOOTNODE_URL
);
const routes = {
"/": wrap({
Expand All @@ -26,9 +23,9 @@
l1TaikoAddress: import.meta.env.VITE_TAIKO_L1_ADDRESS,
l2Provider: l2Provider,
l2TaikoAddress: import.meta.env.VITE_TAIKO_L2_ADDRESS,
isTokenomicsEnabled: import.meta.env.VITE_TOKENOMICS_ENABLED,
l1ExplorerUrl: import.meta.env.VITE_L1_EXPLORER_URL,
l2ExplorerUrl: import.meta.env.VITE_L2_EXPLORER_URL,
feeTokenSymbol: import.meta.env.FEE_TOKEN_SYMBOL || "TKO",
},
userData: {},
}),
Expand Down
12 changes: 10 additions & 2 deletions packages/status-page/src/components/StatusIndicator.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { displayStatusValue } from "../utils/displayStatusValue";
import { onDestroy, onMount } from "svelte";
import Loader from "../components/Loader.svelte";
import type Status from "../domain/status";
import type { Status } from "../domain/status";
import { fade } from "svelte/transition";
import Tooltip from "./Tooltip.svelte";
import TooltipModal from "./TooltipModal.svelte";
Expand All @@ -16,6 +16,8 @@
contractAddress: string
) => Promise<Status>;
export let status: Status;
export let watchStatusFunc: (
provider: ethers.providers.JsonRpcProvider,
contractAddress: string,
Expand All @@ -40,7 +42,13 @@
onMount(async () => {
try {
statusValue = await statusFunc(provider, contractAddress);
if (status) {
statusValue = status;
} else if (statusFunc) {
statusValue = await statusFunc(provider, contractAddress);
} else {
statusValue = 0;
}
} catch (e) {
console.error(e);
}
Expand Down
23 changes: 22 additions & 1 deletion packages/status-page/src/domain/status.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,24 @@
import type { ethers } from "ethers";

type Status = string | number | boolean;

export default Status;
type StatusIndicatorProp = {
statusFunc?: (
provider: ethers.providers.JsonRpcProvider,
contractAddress: string
) => Promise<Status>;
watchStatusFunc?: (
provider: ethers.providers.JsonRpcProvider,
contractAddress: string,
onEvent: (value: Status) => void
) => void;
provider: ethers.providers.JsonRpcProvider;
contractAddress: string;
header: string;
intervalInMs: number;
colorFunc: (value: Status) => string;
onClick?: (value: Status) => void;
tooltip: string;
status?: Status;
};
export { Status, StatusIndicatorProp };
117 changes: 89 additions & 28 deletions packages/status-page/src/pages/home/Home.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,19 @@
import { getQueuedTransactions } from "../../utils/getQueuedTransactions";
import { onMount } from "svelte";
import { getProofReward } from "../../utils/getProofReward";
import type Status from "../../domain/status";
import type { Status, StatusIndicatorProp } from "../../domain/status";
import { getConfig } from "../../utils/getConfig";
import { getStateVariables } from "../../utils/getStateVariables";
export let l1Provider: ethers.providers.JsonRpcProvider;
export let l1TaikoAddress: string;
export let l2Provider: ethers.providers.JsonRpcProvider;
export let l2TaikoAddress: string;
export let isTokenomicsEnabled: boolean = false;
export let l1ExplorerUrl: string;
export let l2ExplorerUrl: string;
export let feeTokenSymbol: string;
const statusIndicators = [
let statusIndicators: StatusIndicatorProp[] = [
{
statusFunc: getLatestSyncedHeader,
watchStatusFunc: watchHeaderSynced,
Expand Down Expand Up @@ -57,17 +59,6 @@
tooltip:
"The most recent Layer 1 Header that has been synchronized with the TaikoL2 smart contract. The headers are synchronized with every L2 block.",
},
// {
// statusFunc: getProposers,
// watchStatusFunc: null,
// provider: l1Provider,
// contractAddress: l1TaikoAddress,
// header: "Unique Proposers",
// intervalInMs: 0,
// colorFunc: (value: Status) => {
// return "green";
// },
// },
{
statusFunc: getPendingTransactions,
watchStatusFunc: null,
Expand Down Expand Up @@ -178,36 +169,105 @@
colorFunc: (value: Status) => {
return "green";
},
tooltip: "The current recommended gas price for a transaction on Layer 2.",
tooltip:
"The current recommended gas price for a transaction on Layer 2.",
},
];
onMount(() => {
if (isTokenomicsEnabled) {
onMount(async () => {
try {
const config = await getConfig(l1Provider, l1TaikoAddress);
if (!Object.hasOwn(config, "enableTokenomics")) return;
if (config.enableTokenomics) {
statusIndicators.push({
statusFunc: getBlockFee,
watchStatusFunc: null,
provider: l1Provider,
contractAddress: l1TaikoAddress,
header: "Block Fee",
intervalInMs: 15000,
colorFunc: null,
tooltip:
"The current fee to propose a block to the TaikoL1 smart contract.",
});
statusIndicators.push({
statusFunc: getProofReward,
watchStatusFunc: null,
provider: l1Provider,
contractAddress: l1TaikoAddress,
header: "Proof Reward",
intervalInMs: 15000,
colorFunc: null,
tooltip:
"The current reward for successfully submitting a proof for a proposed block on the TaikoL1 smart contract.",
});
}
} catch (e) {
console.error(e);
}
try {
const stateVars = await getStateVariables(l1Provider, l1TaikoAddress);
// TODO: remove. this check prevents this code from running before we deploy next testnet
// since the state vars have had large changes.
if (stateVars.length < 10) {
return;
}
statusIndicators.push({
status: stateVars[4],
provider: l1Provider,
contractAddress: l1TaikoAddress,
header: "Latest Proposal",
intervalInMs: 0,
colorFunc: function (status: Status) {
return "green"; // todo: whats green, yellow, red?
},
tooltip: "The most recent block proposal on TaikoL1 contract.",
});
statusIndicators.push({
statusFunc: getBlockFee,
watchStatusFunc: null,
status: stateVars[9],
provider: l1Provider,
contractAddress: l1TaikoAddress,
header: "Block Fee",
intervalInMs: 15000,
header: "Average Proof Time",
intervalInMs: 0,
colorFunc: null,
tooltip:
"The current fee to propose a block to the TaikoL1 smart contract.",
"The current average proof time, updated when a block is successfully proven.",
});
statusIndicators.push({
statusFunc: getProofReward,
watchStatusFunc: null,
status: stateVars[9],
provider: l1Provider,
contractAddress: l1TaikoAddress,
header: "Proof Reward",
intervalInMs: 15000,
colorFunc: null,
header: "Average Block Time",
intervalInMs: 0,
colorFunc: function (status: Status) {
return "green"; // todo: whats green, yellow, red?
},
tooltip:
"The current reward for successfully submitting a proof for a proposed block on the TaikoL1 smart contract.",
"The current average block time, updated when a block is successfully proposed.",
});
statusIndicators.push({
status: `${ethers.utils.parseEther(stateVars[3])} ${feeTokenSymbol}`,
provider: l1Provider,
contractAddress: l1TaikoAddress,
header: "Fee Base",
intervalInMs: 0,
colorFunc: function (status: Status) {
return "green"; // todo: whats green, yellow, red?
},
tooltip: "The current fee base for proposing and rewarding",
});
} catch (e) {
console.error(e);
}
statusIndicators = statusIndicators;
});
</script>

Expand All @@ -228,6 +288,7 @@
onClick={statusIndicator.onClick}
intervalInMs={statusIndicator.intervalInMs}
tooltip={statusIndicator.tooltip}
status={statusIndicator.status}
/>
{/each}
</div>
10 changes: 10 additions & 0 deletions packages/status-page/src/utils/getConfig.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { BigNumber, Contract, ethers } from "ethers";
import TaikoL1 from "../constants/abi/TaikoL1";

export const getConfig = async (
provider: ethers.providers.JsonRpcProvider,
contractAddress: string
) => {
const contract: Contract = new Contract(contractAddress, TaikoL1, provider);
return await contract.getConfig();
};
10 changes: 10 additions & 0 deletions packages/status-page/src/utils/getStateVariables.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { BigNumber, Contract, ethers } from "ethers";
import TaikoL1 from "../constants/abi/TaikoL1";

export const getStateVariables = async (
provider: ethers.providers.JsonRpcProvider,
contractAddress: string
) => {
const contract: Contract = new Contract(contractAddress, TaikoL1, provider);
return await contract.getStateVariables();
};

0 comments on commit cbd3e0b

Please sign in to comment.