Skip to content

Commit

Permalink
Distinguish between demand-side dilution (implicit costs) and fees (d…
Browse files Browse the repository at this point in the history 
…irect costs) (#70)
  • Loading branch information
@adamsoffer
adamsoffer authored Dec 12, 2021
1 parent c914326 commit 0bb4cb7
Show file tree
Hide file tree
Showing 7 changed files with 227 additions and 65 deletions.
106 changes: 96 additions & 10 deletions components/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
ChevronDownIcon,
ChevronUpIcon,
} from "@radix-ui/react-icons";
import registry from "../../registry.json";

const Table = ({ columns, data, ...props }) => {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
Expand Down Expand Up @@ -202,7 +203,31 @@ const StyledImage = styled("img", {
mr: "$3",
});

const poktDisclaimer = (
<>
<Box css={{ mb: "$2" }}>
Pocket has a unique payment mechanism. Developers stake POKT upfront to
lock in a guaranteed amount of bandwidth and pay through dilution as the
protocol mints new POKT and rewards node operators based directly on the
amount of usage of the network.
</Box>
<Box>
The Web3 Index tracks developers&apos; dilutionary payment activity, but
does not count it towards fees to avoid confusing apples with oranges
(implicit costs vs direct costs). The Pocket DAO is planning a shift from
developers paying via dilution, to developers paying via the burning of
their stake in proportion to their usage. Once the DAO makes this change,
burned staked tokens will count towards fees on the index.
</Box>
</>
);

function renderSwitch(cell) {
const paymentType =
registry[cell.row.values.name.toLowerCase()]?.paymentType === "dilution"
? "dilution"
: "revenue";

switch (cell.column.id) {
case "usage.revenue.oneWeekTotal": {
return `$${Math.round(
Expand All @@ -211,15 +236,75 @@ function renderSwitch(cell) {
}
case "usage.revenue.thirtyDayTotal": {
if (cell.row.values.untracked) return "--";
return `$${Math.round(
cell.row.values.usage.revenue.thirtyDayTotal
).toLocaleString()}`;
return paymentType === "dilution" ? (
<Box>
<Box css={{ mb: "$2" }}>$0.00</Box>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Box css={{ display: "flex", alignItems: "center" }}>
<Box css={{ fontSize: "$1", color: "$gray500" }}>
($
{Math.round(
cell.row.values.usage.dilution.thirtyDayTotal
).toLocaleString()}{" "}
diluted)
</Box>{" "}
<Box
as={InfoCircledIcon}
css={{ ml: "$2", color: "$gray500" }}
/>
</Box>
</TooltipTrigger>
<TooltipContent>
<TooltipArrow />
{poktDisclaimer}
</TooltipContent>
</Tooltip>
</Box>
) : (
<Box>
$
{Math.round(
cell.row.values.usage.revenue.thirtyDayTotal
).toLocaleString()}
</Box>
);
}
case "usage.revenue.ninetyDayTotal": {
if (cell.row.values.untracked) return "--";
return `$${Math.round(
cell.row.values.usage.revenue.ninetyDayTotal
).toLocaleString()}`;
return paymentType === "dilution" ? (
<Box>
<Box css={{ mb: "$2" }}>$0.00</Box>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Box css={{ display: "flex", alignItems: "center" }}>
<Box css={{ fontSize: "$1", color: "$gray500" }}>
($
{Math.round(
cell.row.values.usage.dilution.ninetyDayTotal
).toLocaleString()}{" "}
diluted)
</Box>{" "}
<Box
as={InfoCircledIcon}
css={{ ml: "$2", color: "$gray500" }}
/>
</Box>
</TooltipTrigger>
<TooltipContent>
<TooltipArrow />
{poktDisclaimer}
</TooltipContent>
</Tooltip>
</Box>
) : (
<Box>
$
{Math.round(
cell.row.values.usage.revenue.ninetyDayTotal
).toLocaleString()}
</Box>
);
}
case "totalRevenue": {
return `$${Math.round(
Expand All @@ -229,7 +314,6 @@ function renderSwitch(cell) {
case "usage.revenue.oneWeekPercentChange": {
return (
<Box css={{ display: "flex" }}>
{/* <LineGraph color={color} days={lastTwoWeeks} /> */}
<RevenueChange
percentChange={Intl.NumberFormat("en-US", {
maximumFractionDigits: 2,
Expand All @@ -242,7 +326,7 @@ function renderSwitch(cell) {
case "usage.revenue.thirtyDayPercentChange": {
if (cell.row.values.untracked) return "--";
const color =
cell.row.values.usage.revenue.thirtyDayPercentChange > 0
cell.row.values.usage[paymentType].thirtyDayPercentChange > 0
? defaultTheme.colors.green
: defaultTheme.colors.red;

Expand All @@ -255,7 +339,9 @@ function renderSwitch(cell) {
<RevenueChange
percentChange={Intl.NumberFormat("en-US", {
maximumFractionDigits: 2,
}).format(cell.row.values.usage.revenue.thirtyDayPercentChange)}
}).format(
cell.row.values.usage[paymentType].thirtyDayPercentChange
)}
css={{ ml: "$2" }}
/>
</Box>
Expand All @@ -264,7 +350,7 @@ function renderSwitch(cell) {
case "lastThirtyDays": {
if (cell.row.values.untracked) return "--";
const color =
cell.row.values.usage.revenue.thirtyDayPercentChange > 0
cell.row.values.usage[paymentType].thirtyDayPercentChange > 0
? defaultTheme.colors.green
: defaultTheme.colors.red;

Expand Down
10 changes: 8 additions & 2 deletions components/Ticker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@ import Marquee from "react-fast-marquee";
import { useTheme } from "next-themes";
import LineGraph from "../LineGraph";
import { defaultTheme } from "../../stitches.config";
import registry from "../../registry.json";

const Project = ({ project }) => {
const paymentType =
registry[project.name.toLowerCase()]?.paymentType === "dilution"
? "dilution"
: "revenue";

const color =
project.usage.revenue.thirtyDayPercentChange > 0
project.usage[paymentType].thirtyDayPercentChange > 0
? defaultTheme.colors.green
: defaultTheme.colors.red;

Expand Down Expand Up @@ -42,7 +48,7 @@ const Project = ({ project }) => {
<RevenueChange
percentChange={Intl.NumberFormat("en-US", {
maximumFractionDigits: 2,
}).format(project.usage.revenue.thirtyDayPercentChange)}
}).format(project.usage[paymentType].thirtyDayPercentChange)}
css={{ ml: "$2" }}
/>
</Box>
Expand Down
69 changes: 50 additions & 19 deletions pages/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@ const Project = ({ slug, index, projects, project }) => {
const ref = useRef(null);
const isClient = typeof window === "object";
const [width, setWidth] = useState(ref?.current?.container?.clientWidth);
const paymentType =
registry[slug]?.paymentType === "dilution" ? "dilution" : "revenue";

useEffect(() => {
if (!isClient) {
Expand Down Expand Up @@ -275,7 +277,9 @@ const Project = ({ slug, index, projects, project }) => {
</Box>
<Box>
<Metric
label="30d Fees"
label={
paymentType === "dilution" ? "30d dilution" : "30d fees"
}
value={
<Box>
<Tooltip delayDuration={0}>
Expand All @@ -285,7 +289,7 @@ const Project = ({ slug, index, projects, project }) => {
<Box css={{ mr: "$1" }}>
$
{Math.round(
project.usage.revenue.thirtyDayTotal
project.usage[paymentType].thirtyDayTotal
).toLocaleString()}
</Box>
<TooltipTrigger>
Expand All @@ -294,15 +298,18 @@ const Project = ({ slug, index, projects, project }) => {
</Box>
<TooltipContent>
<TooltipArrow />
Total demand-side fees accrued by the protocol
over the last 30 days.
{paymentType === "dilution"
? "Total dilution incurred by the demand-side of the protocol over the last 30 days."
: "Total demand-side fees accrued by the protocol over the last 30 days."}
</TooltipContent>
</Tooltip>
</Box>
}
/>
<Metric
label="90d Fees"
label={
paymentType === "dilution" ? "90d dilution" : "90d fees"
}
value={
<Box>
<Tooltip delayDuration={0}>
Expand All @@ -312,7 +319,7 @@ const Project = ({ slug, index, projects, project }) => {
<Box css={{ mr: "$1" }}>
$
{Math.round(
project.usage.revenue.ninetyDayTotal
project.usage[paymentType].ninetyDayTotal
).toLocaleString()}
</Box>
<TooltipTrigger>
Expand All @@ -321,17 +328,22 @@ const Project = ({ slug, index, projects, project }) => {
</Box>
<TooltipContent>
<TooltipArrow />
Total demand-side fees accrued by the protocol
over the last 90 days.
{paymentType === "dilution"
? "Total dilution incurred by the demand-side of the protocol over the last 30 days."
: "Total demand-side fees accrued by the protocol over the last 30 days."}
</TooltipContent>
</Tooltip>
</Box>
}
/>
<Metric
label="Total Fees"
label={
paymentType === "dilution"
? "Total dilution"
: "Total fees"
}
value={`$${Math.round(
project.usage.revenue.now
project.usage[paymentType].now
).toLocaleString()}`}
/>
<Metric
Expand All @@ -347,7 +359,8 @@ const Project = ({ slug, index, projects, project }) => {
percentChange={Intl.NumberFormat("en-US", {
maximumFractionDigits: 2,
}).format(
project.usage.revenue.thirtyDayPercentChange
project.usage[paymentType]
.thirtyDayPercentChange
)}
/>
</Box>
Expand All @@ -357,12 +370,25 @@ const Project = ({ slug, index, projects, project }) => {
</Box>
<TooltipContent>
<TooltipArrow />
Trend is the increase, or decrease, in the
protocol&apos;s demand-side fees between two
periods. It&apos;s calculated by subtracting the
previous 30d fees from the current 30d Fees, and
then dividing that number by the previous 30d
fees.
{paymentType === "dilution" ? (
<Box>
Trend is the increase or decrease in the
protocol&apos;s dilutionary activity between
two periods. It&apos;s calculated by
subtracting the previous 30d dilution from the
current 30d dilution, and then dividing that
number by the previous 30d dilution.
</Box>
) : (
<Box>
Trend is the increase or decrease in the
protocol&apos;s demand-side fees between two
periods. It&apos;s calculated by subtracting
the previous 30d fees from the current 30d
fees, and then dividing that number by the
previous 30d fees.
</Box>
)}
</TooltipContent>
</Tooltip>
</Box>
Expand Down Expand Up @@ -443,13 +469,18 @@ const Project = ({ slug, index, projects, project }) => {
) : (
<ResponsiveContainer key={project.slug} height={400} ref={ref}>
<LineAndBarGraph
base={project.usage.revenue.oneWeekTotal}
baseChange={project.usage.revenue.oneWeekPercentChange}
base={project.usage[paymentType].oneWeekTotal}
baseChange={project.usage[paymentType].oneWeekPercentChange}
color={project.color}
days={project.usage.days}
height={420}
width={width}
useWeekly={true}
title={
paymentType === "dilution"
? "Demand-side Protocol Dilution"
: "Demand-side Protocol Fees"
}
/>
</ResponsiveContainer>
)}
Expand Down
Loading

1 comment on commit 0bb4cb7

@vercel
Copy link

@vercel vercel bot commented on 0bb4cb7 Dec 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.