Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewards Dashboard Updates #1187

Closed
wants to merge 32 commits into from
Closed
Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
be9db71
Update text
HnryHan Nov 20, 2024
088f2be
Change browser title from OP Rewards Dashboard to USDs Rewards Dashboard
HnryHan Nov 20, 2024
07914ed
Change OP units to USDs
HnryHan Nov 20, 2024
0acd5ad
Remove eWSETH field
HnryHan Nov 20, 2024
be484e1
Update overview api. TODO: Replace estimated rewards with proper fiel…
HnryHan Nov 20, 2024
5f586d5
Update usersummary api
HnryHan Nov 20, 2024
01f04a0
Replace web3modal with reown appkit
HnryHan Nov 20, 2024
4845566
Remove @web3inbox
HnryHan Nov 20, 2024
e83dc25
Remove @reown/appkit-adapter-wagmi
HnryHan Nov 20, 2024
0926443
Remove web3modal
HnryHan Nov 20, 2024
396db26
Remove ensName truncate
HnryHan Nov 20, 2024
e53d7b8
Remove viem and wagmi
HnryHan Nov 20, 2024
de614b4
@tanstack react query update
HnryHan Nov 20, 2024
3ae197e
Text updates
HnryHan Nov 20, 2024
a6f1976
Use net_usds_supply_in_kamino for kamino usds balance
HnryHan Nov 20, 2024
12e89e2
Use bridged_usds instead of effective_bridged_usds
HnryHan Nov 21, 2024
5a1542b
Change balance to usd effective_usds_balance instead of usds_balance
HnryHan Nov 21, 2024
bea1702
Change Total Projected Rewards to Weekly Rewards Pool
HnryHan Nov 21, 2024
2e6a937
Add Est hourly rewads
HnryHan Nov 21, 2024
c09581c
Update text and link to weekly rewards
HnryHan Nov 21, 2024
cabd857
Change to kamino held
HnryHan Nov 21, 2024
fa05c09
Change to usds bridged
HnryHan Nov 21, 2024
5ee11fe
USDSBalance
HnryHan Nov 21, 2024
df5075c
Fix Header text and link
HnryHan Nov 21, 2024
dcd86f0
Remove old subtext
HnryHan Nov 21, 2024
4bb1dd3
Update formatNumber to use commas
HnryHan Nov 21, 2024
aa8699d
Remove trailing zeroes
HnryHan Nov 21, 2024
784a8b6
Fix formatInteger
HnryHan Nov 22, 2024
f9efb4d
formatInteger, always show to 2 decimal places
HnryHan Nov 22, 2024
c610144
Remove logs
HnryHan Nov 22, 2024
1a4d512
Remove est hourly rewards
HnryHan Nov 25, 2024
28ea845
Change Bottom Link href to wormhole.foundation blog
HnryHan Nov 25, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/rewards-dashboard/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OP Rewards Dashboard</title>
<title>USDS Rewards Dashboard</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet"
Expand Down
7,394 changes: 5,335 additions & 2,059 deletions apps/rewards-dashboard/package-lock.json

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions apps/rewards-dashboard/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,16 @@
"@gfxlabs/oku-chains": "^0.0.19",
"@lingui/macro": "^4.6.0",
"@lingui/react": "^4.6.0",
"@reown/appkit": "^1.5.0",
"@reown/appkit-adapter-solana": "^1.5.0",
"@solana/wallet-adapter-wallets": "^0.19.32",
"@swc/core": "1.3.105",
"@tanstack/react-query": "^5.15.4",
"@tanstack/react-query": "^5.60.6",
"@uidotdev/usehooks": "^2.4.1",
"@web3modal/wagmi": "^3.5.0",
"ethereum-blockies-base64": "^1.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0",
"wagmi": "^1.4.12"
"react-icons": "^4.12.0"
},
"devDependencies": {
"@lingui/cli": "^4.6.0",
Expand Down
2 changes: 1 addition & 1 deletion apps/rewards-dashboard/src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export const WAC_URL = import.meta.env.VITE_WAC_URL
? import.meta.env.VITE_WAC_URL
: "https://wac.gfx.xyz";
: "https://allez-xyz--usds-";
145 changes: 86 additions & 59 deletions apps/rewards-dashboard/src/layouts/DashboardLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,72 @@
import { useAccount } from "wagmi";
import Taurus from "../quarks/Taurus";
import { WalletManager } from "../quarks/WalletManager";
import { FaArrowRight } from "react-icons/fa6";
import { useEffect, useState } from "react";
import {
EstimatedApyGraphic,
EstimatedRewardsGraphic,
RewardHistoryGraphic,
TotalBridgedGraphic,
} from "../quarks/DashboardVectors";
import { InfoStatWindow, StatWindow } from "../quarks/StatWindow";
import { PortalLogo } from "../quarks/LogoVectors";
import { Trans, t } from "@lingui/macro";
import { useWalletInfo } from "../hooks/useWalletInfo";
import { useQuery } from "@tanstack/react-query";
import { WAC_URL } from "../constants";
import { useAppKitAccount } from "@reown/appkit/react";

interface DashboardQueryResult {
user: string;
bridged_amount: number;
wsteth_held: number;
aave_wsteth_held: number;
exactly_wsteth_held: number;
pending_rewards: number;
earned_rewards: number;
usds_balance: number;
eff_usds_balance: number;
bridged_usds: number;
effective_bridged_usds: number;
net_usds_supply_in_kamino: number;
effective_usds_balance: number;
hourly_rewards_per_unit: number;
accrued_rewards: number;
}

export interface OverviewQueryResult {
total_bridged: number;
estimated_rewards: number;
rewards_earned: number;
usds_balance_total: number;
usds_flagged_addresses: number;
usds_total_supply: number;
bridged_usds_total: number;
effective_bridged_usds_total: number;
net_usds_supply_in_kamino_total: number;
effective_usds_balance_total: number;
hourly_rewards_per_unit: number;
accrued_rewards_total: number;
}

const ConnectedDashboard = () => {
const { address } = useWalletInfo();

const { address } = useAppKitAccount();
const [numbersHidden, setNumbersHidden] = useState(false);

const [totalBridged, setTotalBridged] = useState<number | undefined>(
undefined
);
const [estimatedRewards, setEstimatedRewards] = useState<number | undefined>(
const [hourlyRewards, setHourlyRewards] = useState<number | undefined>(
undefined
);
const [historyRewardsEarned, setHistoryRewardsEarned] = useState<
number | undefined
>(undefined);

const [wstetehBridged, setWstetehBridged] = useState<number | undefined>(undefined);
const [wstethHeld, setWstethHeld] = useState<number | undefined>(undefined);
const [exactlyWstethHeld, setExactlyWstethHeld] = useState<number | undefined>(undefined);
const [aaveWstethHeld, setAaveWstethHeld] = useState<number | undefined>(undefined);
const [totalUSDSBridged, setTotalUSDSBridged] = useState<number | undefined>(
undefined
);
const [USDSBalance, setUSDSBalance] = useState<number | undefined>(undefined);

const [kaminoHeld, setKaminoHeld] = useState<number | undefined>(undefined);
const [accruedRewards, setAccruedRewards] = useState<number | undefined>(
undefined
);
const { data: overview } = useQuery<OverviewQueryResult>({
queryKey: ["overview"],
staleTime: 5000,
queryFn: () => {
return fetch(`${WAC_URL}/overview`).then((res) => {
return fetch(`${WAC_URL}overview.modal.run`).then((res) => {
return res.json();
});
},
Expand All @@ -67,29 +76,32 @@ const ConnectedDashboard = () => {
enabled: !!address,
staleTime: 5000,
queryFn: () => {
return fetch(`${WAC_URL}/usersummary?address=${address}`).then((res) => {
return res.json();
});
return fetch(`${WAC_URL}usersummary.modal.run?address=${address}`).then(
(res) => {
return res.json();
}
);
},
});

useEffect(() => {
console.log(userInfo);
HHenry88 marked this conversation as resolved.
Show resolved Hide resolved
if (!userInfo) {
return;
}
setWstetehBridged(userInfo.bridged_amount);
setWstethHeld(userInfo.wsteth_held);
setAaveWstethHeld(userInfo.aave_wsteth_held);
setExactlyWstethHeld(userInfo.exactly_wsteth_held);
setAccruedRewards(userInfo.pending_rewards);
setTotalUSDSBridged(userInfo.bridged_usds); // TODO: Change to effective_bridged_usds after going live
setUSDSBalance(userInfo.effective_usds_balance);
setKaminoHeld(userInfo.net_usds_supply_in_kamino);
setAccruedRewards(userInfo.accrued_rewards);
}, [userInfo]);
useEffect(() => {
if (!overview) {
return;
}
setTotalBridged(overview.total_bridged);
setEstimatedRewards(overview.estimated_rewards);
setHistoryRewardsEarned(overview.rewards_earned);
console.log(overview);
setTotalBridged(overview.bridged_usds_total);
setHistoryRewardsEarned(overview.accrued_rewards_total);
setHourlyRewards(overview.hourly_rewards_per_unit);
}, [overview]);

const maybeHide = (x?: number) => {
Expand All @@ -99,9 +111,16 @@ const ConnectedDashboard = () => {
return x;
};

const formatInteger = (x?: number, decimals?: number) => {
const formatInteger = (x?: number, decimals: number = 2) => {
x = maybeHide(x);
return x !== undefined ? (x === 0 ? "0" : x.toFixed(decimals).toLocaleString()) : undefined;
return x !== undefined
? x === 0
? "0"
: x.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: x < 1 ? decimals : 2,
})
: undefined;
};

return (
Expand Down Expand Up @@ -130,7 +149,17 @@ const ConnectedDashboard = () => {
md:pb-8
"
>
<Trans>Connected Dashboard Subtitle</Trans>
<Trans>
100,000 USDS in{" "}
<a
href="https://x.com/SkyEcosystem/status/1858873709722734611"
className="text-blue-500"
target="_blank"
>
Weekly Rewards
</a>{" "}
for users going from Ethereum to Solana!
</Trans>
</h2>
</div>
<div className="flex flex-col lg:flex-row gap-8 w-full max-w-screen-xl">
Expand Down Expand Up @@ -177,36 +206,30 @@ const ConnectedDashboard = () => {
<div className="flex flex-col md:flex-row gap-4">
<InfoStatWindow
header={t`Bridged Header`}
value={formatInteger(wstetehBridged, 6)}
unit="WSTETH"
value={formatInteger(totalUSDSBridged, 6)}
unit="USDS"
infoElement={<Trans>Bridged Window Tooltip</Trans>}
/>
<InfoStatWindow
header={t`WSTETH Held Header`}
value={formatInteger(wstethHeld, 6)}
unit="WSTETH"
infoElement={<Trans>WSTETH Held Window Tooltip</Trans>}
header={t`USDS Held Header`}
value={formatInteger(USDSBalance, 6)}
unit="USDS"
infoElement={<Trans>USDS Held Window Tooltip</Trans>}
/>
</div>
<div className="flex flex-col md:flex-row gap-4">
<InfoStatWindow
header={t`Aave WSTETH Held Value Header`}
value={formatInteger(aaveWstethHeld, 6)}
unit="aWSTETH"
infoElement={<Trans>Aave WSTETH Held Value Tooltip</Trans>}
/>
<InfoStatWindow
header={t`Exactly WSTETH Held Value`}
value={formatInteger(exactlyWstethHeld, 6)}
unit="eWSTETH"
infoElement={<Trans>Exactly WSTETH Held Value Tooltip</Trans>}
header={t`Kamino USDS Held Value Header`}
value={formatInteger(kaminoHeld, 6)}
unit="Kamino USDS"
infoElement={<Trans>Kamino USDS Held Value Tooltip</Trans>}
/>
</div>
<div className="">
<InfoStatWindow
header={t`Accrued Rewards Header`}
value={formatInteger(accruedRewards, 6)}
unit="OP"
unit="USDS"
infoElement={<Trans>Accrued Rewards Tooltip</Trans>}
/>
</div>
Expand All @@ -221,18 +244,24 @@ const ConnectedDashboard = () => {
graphic={<TotalBridgedGraphic />}
/>
<StatWindow
header={t`Estimated Rewards Header`}
value={formatInteger(estimatedRewards)}
unit="OP"
header={t`Weekly Rewards Header`}
value={"100,000"}
unit="USDS"
graphic={<EstimatedRewardsGraphic />}
/>
<StatWindow
header={t`History of Rewards Earned Header`}
value={formatInteger(historyRewardsEarned)}
unit="OP"
unit="USDS"
graphic={<RewardHistoryGraphic />}
infoElement={<Trans>History of Rewards Earned Tooltip</Trans>}
/>
<StatWindow
header={t`Est Hourly Rewards per USDS`}
value={formatInteger(hourlyRewards, 6)}
unit="USDS"
graphic={<EstimatedApyGraphic />}
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -292,7 +321,7 @@ const DisconnectedDashboard = () => {
</div>
<div>
<a
href="https://x.com/WormholeFdn/status/1788999096566677769"
href="https://x.com/SkyEcosystem/status/1858873709722734611"
target="_blank"
className="flex flex-row items-center gap-3"
>
Expand All @@ -308,11 +337,9 @@ const DisconnectedDashboard = () => {
};

export const DashboardLayout = () => {
const { isConnected } = useAccount();
const { isConnected } = useAppKitAccount();
return (
<div
className="flex flex-col flex-1"
>
<div className="flex flex-col flex-1">
{isConnected ? <ConnectedDashboard /> : <DisconnectedDashboard />}
</div>
);
Expand Down
Loading