+
+
+ <>{children}
+
+
+
+
+
+
+ );
+};
diff --git a/apps/rewards-dashboard/src/components/Footer.tsx b/apps/rewards-dashboard/src/components/Footer.tsx
new file mode 100644
index 000000000..d8e27aa82
--- /dev/null
+++ b/apps/rewards-dashboard/src/components/Footer.tsx
@@ -0,0 +1,39 @@
+import { WormholeLogo } from "../quarks/LogoVectors";
+
+export const Footer = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/apps/rewards-dashboard/src/components/Header.tsx b/apps/rewards-dashboard/src/components/Header.tsx
new file mode 100644
index 000000000..1a77c4d7a
--- /dev/null
+++ b/apps/rewards-dashboard/src/components/Header.tsx
@@ -0,0 +1,86 @@
+import { CiMenuBurger } from "react-icons/ci";
+import { WalletManager } from "../quarks/WalletManager";
+import { useState } from "react";
+import { MobileNavItem, NavItem } from "../quarks/NavItem";
+import { PortalLogoWithText } from "../quarks/LogoVectors";
+
+export const Header = () => {
+ const [showMenu, setShowMenu] = useState(false);
+ return (
+ <>
+
+
+
+ Powered By
+
+
+
+
+ v{import.meta.env.VITE_APP_VERSION || "0.0.0"}
+
+
+ Built by xLabs
+
+
+
+
+ );
+};
diff --git a/apps/rewards-dashboard/src/constants.ts b/apps/rewards-dashboard/src/constants.ts
new file mode 100644
index 000000000..1b95abdb5
--- /dev/null
+++ b/apps/rewards-dashboard/src/constants.ts
@@ -0,0 +1,3 @@
+
+
+export const WAC_URL = process.env.VITE_WAC_URL ? process.env.VITE_WAC_URL : "https://wac.staging.gfx.town"
diff --git a/apps/rewards-dashboard/src/hooks/useBreakpoint.tsx b/apps/rewards-dashboard/src/hooks/useBreakpoint.tsx
new file mode 100644
index 000000000..036bffa8e
--- /dev/null
+++ b/apps/rewards-dashboard/src/hooks/useBreakpoint.tsx
@@ -0,0 +1,30 @@
+import { useMediaQuery } from "@uidotdev/usehooks";
+
+const breakpoints = {
+ base: "(min-width: 0px)",
+ sm: "(min-width: 640px)",
+ md: "(min-width: 768px)",
+ lg: "(min-width: 1024px)",
+ xl: "(min-width: 1280px)",
+ "2xl": "(min-width: 1536px)",
+};
+
+export const useBreakpointQuery = (bp: keyof typeof breakpoints) => {
+ return useMediaQuery(breakpoints[bp]);
+};
+
+export const useBreakpoint = () => {
+ const queries = {
+ sm: useMediaQuery(breakpoints.sm),
+ md: useMediaQuery(breakpoints.md),
+ lg: useMediaQuery(breakpoints.lg),
+ xl: useMediaQuery(breakpoints.xl),
+ "2xl": useMediaQuery(breakpoints["2xl"]),
+ };
+
+ return (
+ Object.entries(queries)
+ .find(([, val]) => val)
+ ?.shift() || "base"
+ );
+};
diff --git a/apps/rewards-dashboard/src/hooks/useWalletInfo.tsx b/apps/rewards-dashboard/src/hooks/useWalletInfo.tsx
new file mode 100644
index 000000000..a0dd90260
--- /dev/null
+++ b/apps/rewards-dashboard/src/hooks/useWalletInfo.tsx
@@ -0,0 +1,22 @@
+import { useAccount, useEnsName } from "wagmi";
+import makeBlockie from "ethereum-blockies-base64";
+import { useMemo } from "react";
+
+export const useWalletInfo = () => {
+ const { isConnected } = useAccount();
+ const { address } = useAccount();
+ const { data: ensName } = useEnsName({ address, chainId: 1 });
+ const blockie = useMemo(() => {
+ if (address) {
+ return makeBlockie(address);
+ }
+ return undefined;
+ }, [address]);
+
+ return {
+ address,
+ isConnected,
+ ensName,
+ blockie,
+ }
+}
diff --git a/apps/rewards-dashboard/src/i18n.ts b/apps/rewards-dashboard/src/i18n.ts
new file mode 100644
index 000000000..2ff87f984
--- /dev/null
+++ b/apps/rewards-dashboard/src/i18n.ts
@@ -0,0 +1,17 @@
+import { i18n } from "@lingui/core";
+
+export const locales = {
+ en: "English",
+};
+
+export const defaultLocale = "en";
+
+/**
+ * We do a dynamic import of just the catalog that we need
+ * @param locale any locale string
+ */
+export async function dynamicActivate(locale: string) {
+ const { messages } = await import(`./locales/${locale}.po?lingui`);
+ i18n.load(locale, messages);
+ i18n.activate(locale);
+}
diff --git a/apps/rewards-dashboard/src/index.css b/apps/rewards-dashboard/src/index.css
new file mode 100644
index 000000000..4dfcb2205
--- /dev/null
+++ b/apps/rewards-dashboard/src/index.css
@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+ display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
diff --git a/apps/rewards-dashboard/src/layouts/DashboardLayout.tsx b/apps/rewards-dashboard/src/layouts/DashboardLayout.tsx
new file mode 100644
index 000000000..a612f16b7
--- /dev/null
+++ b/apps/rewards-dashboard/src/layouts/DashboardLayout.tsx
@@ -0,0 +1,323 @@
+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 {
+ 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";
+
+interface DashboardQueryResult {
+ user: string
+ bridged_amount: number
+ usdc_held: number
+ ausdc_held: number
+ cusdc_held: number
+ pending_rewards: number
+}
+
+export interface OverviewQueryResult {
+ total_bridged: number
+ estimated_rewards: number
+ rewards_earned: number
+}
+
+
+
+const ConnectedDashboard = () => {
+ const {address} = useWalletInfo()
+
+ const [numbersHidden, setNumbersHidden] = useState(false);
+
+ const [totalBridged, setTotalBridged] = useState
+
+
+ {showMenu && (
+
+
+
+ {navBar.map((x, idx) => {
+ return (
+ <>
+
+ {
+ setShowMenu(!showMenu);
+ }}
+ >
+
+
+
+ )}
+
+ {navBar.map((x, idx) => {
+ return (
+ <>
+
+
+
+ );
+};
+
+const DisconnectedDashboard = () => {
+ return (
+
+
+
+
+
+
+
+ Connected Dashboard Title
+
+
+ Connected Dashboard Subtitle
+
+
+
+
+
+
+
+
+
+
+ Connected Dashboard Header
+
+ {
+ setNumbersHidden(!numbersHidden);
+ }}
+ >
+
+
+
+ {numbersHidden ? t`Hide Number Text` : t`Show Number Text`}
+
+
+
+
+
+
+
+
+ Bridged Window Tooltip}
+ />
+ USDC Held Window Tooltip}
+ />
+
+
+ aUSDC Held Value Tooltip}
+ />
+ cUSDC Held Value Tooltip}
+ />
+
+
+ Accrued Rewards Tooltip}
+ />
+
+
+
+
+
+ );
+};
+
+export const DashboardLayout = () => {
+ const { isConnected } = useAccount();
+ return (
+
+
+
+
+
+ Disconnect Wallet Dashboard Title
+
+
+
+
+ Disconnect Wallet Dashboard Subtitle One
+
+
+ Disconnect Wallet Dashboard Subtitle Two
+
+
+
+
+
+
+
+ Bottom Banner Header
+
+
+ {isConnected ?
+ );
+};
diff --git a/apps/rewards-dashboard/src/locales/en.po b/apps/rewards-dashboard/src/locales/en.po
new file mode 100644
index 000000000..e9bf1c3f3
--- /dev/null
+++ b/apps/rewards-dashboard/src/locales/en.po
@@ -0,0 +1,104 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-12-22 23:10-0600\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+
+#: src/layouts/DashboardLayout.tsx:165
+msgid "Accrued Rewards Header"
+msgstr "Accruing ARB Rewards"
+
+#: src/layouts/DashboardLayout.tsx:168
+msgid "Accrued Rewards Tooltip"
+msgstr "The estimated amount of ARB you have earned that has not been paid out."
+
+#: src/layouts/DashboardLayout.tsx:151
+msgid "aUSDC Held Value Header"
+msgstr "aUSDC Balance"
+
+#: src/layouts/DashboardLayout.tsx:154
+msgid "aUSDC Held Value Tooltip"
+msgstr "Aave v3 USDC account balance."
+
+#: src/layouts/DashboardLayout.tsx:247
+msgid "Bottom Banner Header"
+msgstr "How rewards work?"
+
+#: src/layouts/DashboardLayout.tsx:257
+msgid "Bottom Banner Link"
+msgstr "Learn more"
+
+#: src/layouts/DashboardLayout.tsx:137
+msgid "Bridged Header"
+msgstr "Total USDC bridged"
+
+#: src/layouts/DashboardLayout.tsx:140
+msgid "Bridged Window Tooltip"
+msgstr "The total amount of canonical USDC you bridged in via CCTP."
+
+#: src/quarks/WalletManager.tsx:25
+msgid "CONNECT WALLET"
+msgstr "Connect Wallet"
+
+#: src/layouts/DashboardLayout.tsx:91
+msgid "Connected Dashboard Subtitle"
+msgstr "Get up to 5% rewards by bridging your USDC to Arbitrum"
+
+#: src/layouts/DashboardLayout.tsx:80
+msgid "Connected Dashboard Title"
+msgstr "ARB Rewards Dashboard"
+
+#: src/layouts/DashboardLayout.tsx:157
+msgid "cUSDC Held Value"
+msgstr "cUSDC Balance"
+
+#: src/layouts/DashboardLayout.tsx:160
+msgid "cUSDC Held Value Tooltip"
+msgstr "Compound v3 USDC account balance."
+
+#: src/layouts/DashboardLayout.tsx:105
+msgid "Connected Dashboard Header"
+msgstr "My ARB Rewards"
+
+#: src/layouts/DashboardLayout.tsx:219
+msgid "Disconnect Wallet Dashboard Subtitle One"
+msgstr "Claim ARB rewards by bridging your USDC to Arbitrum."
+
+#: src/layouts/DashboardLayout.tsx:222
+msgid "Disconnect Wallet Dashboard Subtitle Two"
+msgstr "Supporting Aave and Compound USDC deposits."
+
+#: src/layouts/DashboardLayout.tsx:215
+msgid "Disconnect Wallet Dashboard Title"
+msgstr "Arbitrum USDC Rewards Dashboard"
+
+#: src/layouts/DashboardLayout.tsx:182
+msgid "Estimated Rewards Header"
+msgstr "Total Projected Rewards"
+
+#: src/layouts/DashboardLayout.tsx:126
+msgid "Hide Number Text"
+msgstr "Show Numbers"
+
+#: src/layouts/DashboardLayout.tsx:188
+msgid "History of Rewards Earned Header"
+msgstr "Total ARB Earned"
+
+#: src/layouts/DashboardLayout.tsx:126
+msgid "Show Number Text"
+msgstr "Hide Numbers"
+
+#: src/layouts/DashboardLayout.tsx:176
+msgid "Staking Power Header"
+msgstr "Total USDC Bridged"
+
+#: src/layouts/DashboardLayout.tsx:143
+msgid "USDC Held Header"
+msgstr "USDC Balance"
+
+#: src/layouts/DashboardLayout.tsx:146
+msgid "USDC Held Window Tooltip"
+msgstr "The amount of canonical USDC held in your account."
diff --git a/apps/rewards-dashboard/src/main.tsx b/apps/rewards-dashboard/src/main.tsx
new file mode 100644
index 000000000..966f17a4b
--- /dev/null
+++ b/apps/rewards-dashboard/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+ {children}
+
+ );
+};
+
+export default Ellipsis;
diff --git a/apps/rewards-dashboard/src/quarks/Glow.tsx b/apps/rewards-dashboard/src/quarks/Glow.tsx
new file mode 100644
index 000000000..ced398965
--- /dev/null
+++ b/apps/rewards-dashboard/src/quarks/Glow.tsx
@@ -0,0 +1,45 @@
+export type GlowProps = {
+ position: {
+ top?: string;
+ left?: string;
+ bottom?: string;
+ right?: string;
+ };
+ size: {
+ width?: string;
+ height?: string;
+ };
+ background: string;
+ children?: JSX.Element[] | JSX.Element;
+};
+
+export const Glow = ({
+ position: { top, left, bottom, right } = {},
+ size: { width, height } = {},
+ background,
+ children,
+}: GlowProps) => {
+ return (
+
+ {children}
+
+ );
+};
+export default Glow;
diff --git a/apps/rewards-dashboard/src/quarks/InfoIcon.tsx b/apps/rewards-dashboard/src/quarks/InfoIcon.tsx
new file mode 100644
index 000000000..97fc77b8d
--- /dev/null
+++ b/apps/rewards-dashboard/src/quarks/InfoIcon.tsx
@@ -0,0 +1,72 @@
+import {
+ FloatingArrow,
+ arrow,
+ offset,
+ useFloating,
+ useHover,
+ useInteractions,
+} from "@floating-ui/react";
+import { useRef, useState } from "react";
+import { useBreakpointQuery } from "../hooks/useBreakpoint";
+
+const InfoIcon = () => {
+ return (
+
+ );
+};
+
+interface InfoHoverProps {
+ children: JSX.Element;
+}
+export const InfoHover = (props: InfoHoverProps) => {
+ const bp = useBreakpointQuery("lg");
+ const [isOpen, setIsOpen] = useState(false);
+ const arrowRef = useRef(null);
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setIsOpen,
+ placement: "top",
+ middleware: [
+ offset({ mainAxis: 28, crossAxis: bp ? 0 : -60 }),
+ arrow({
+ element: arrowRef,
+ }),
+ ],
+ });
+ const hover = useHover(context);
+ const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+
+ return (
+ <>
+
+
+ {isOpen && (
+
+
+ )}
+
+ );
+};
diff --git a/apps/rewards-dashboard/src/quarks/LogoVectors.tsx b/apps/rewards-dashboard/src/quarks/LogoVectors.tsx
new file mode 100644
index 000000000..0250d3f85
--- /dev/null
+++ b/apps/rewards-dashboard/src/quarks/LogoVectors.tsx
@@ -0,0 +1,91 @@
+export const WormholeLogo = () => (
+
+);
+export const PortalLogo = () => (
+
+);
+
+export const PortalLogoWithText = () => (
+
+);
diff --git a/apps/rewards-dashboard/src/quarks/NavItem.tsx b/apps/rewards-dashboard/src/quarks/NavItem.tsx
new file mode 100644
index 000000000..47dc0a61f
--- /dev/null
+++ b/apps/rewards-dashboard/src/quarks/NavItem.tsx
@@ -0,0 +1,34 @@
+interface NavItemProps {
+ item: NavLink;
+}
+
+export const NavItem = ({ item }: NavItemProps) => {
+ return (
+
+ {item.label}
+
+ );
+};
+
+export const MobileNavItem = ({ item }: NavItemProps) => {
+ return (
+
+ {item.label}
+
+ );
+};
diff --git a/apps/rewards-dashboard/src/quarks/StatWindow.tsx b/apps/rewards-dashboard/src/quarks/StatWindow.tsx
new file mode 100644
index 000000000..df9407725
--- /dev/null
+++ b/apps/rewards-dashboard/src/quarks/StatWindow.tsx
@@ -0,0 +1,120 @@
+import { InfoHover } from "./InfoIcon";
+
+interface StatWindowProps {
+ header: string;
+ value?: string;
+ unit?: string;
+ graphic?: JSX.Element;
+}
+
+const WindowBackground = "bg-[#44457D] bg-opacity-30 backdrop-blur-lg";
+
+export const StatWindow = (props: StatWindowProps) => {
+ const { unit, graphic, value, header } = props;
+ return (
+
+
+ );
+};
+
+interface InfoStatWindowProps {
+ header: string;
+ value?: string;
+ unit?: string;
+ infoElement?: JSX.Element;
+}
+export const InfoStatWindow = (props: InfoStatWindowProps) => {
+ const { unit, value, header, infoElement } = props;
+ return (
+
+
+ {graphic || undefined}
+ + {header} +
+
+ {value ? (
+
+
+ {value}
+
+ ) : (
+
+ )}
+ {value && unit ? (
+
+ {unit}
+
+ ) : (
+ ""
+ )}
+
+
+
+
+ );
+};
diff --git a/apps/rewards-dashboard/src/quarks/Taurus.tsx b/apps/rewards-dashboard/src/quarks/Taurus.tsx
new file mode 100644
index 000000000..80166c70c
--- /dev/null
+++ b/apps/rewards-dashboard/src/quarks/Taurus.tsx
@@ -0,0 +1,358 @@
+export const Taurus = () => {
+ return (
+
+ );
+};
+
+export default Taurus;
diff --git a/apps/rewards-dashboard/src/quarks/WalletManager.tsx b/apps/rewards-dashboard/src/quarks/WalletManager.tsx
new file mode 100644
index 000000000..5a9976f66
--- /dev/null
+++ b/apps/rewards-dashboard/src/quarks/WalletManager.tsx
@@ -0,0 +1,74 @@
+import { useWeb3Modal } from "@web3modal/wagmi/react";
+import { t } from "@lingui/macro";
+import { useWalletInfo } from "../hooks/useWalletInfo";
+
+export const WalletManager = () => {
+
+ const {isConnected, ensName, address, blockie} = useWalletInfo()
+ const { open } = useWeb3Modal();
+
+ const text = isConnected
+ ? ensName
+ ? truncateEns(ensName)
+ : address
+ ? truncateAddr(address)
+ : ""
+ : t`CONNECT WALLET`;
+ return (
+
+
+
+
+ + {header} +
+
+ {value ? (
+
+
+ {value}
+
+ ) : (
+
+ )}
+ {value && unit ? (
+
+ {unit}
+
+ ) : (
+ ""
+ )}
+
+ {infoElement ? infoElement : "Tooltip"}
+
+ {
+ open();
+ }}
+ >
+ {blockie ? (
+ 
+ ) : (
+
+ );
+};
+
+const LightningIcon = () => {
+ return (
+
+ );
+};
+const truncateEns = (x?: string) => {
+ if (x) {
+ if (x.length > 8) {
+ return x.slice(0, 8) + "...";
+ }
+ return x;
+ }
+ return "";
+};
+const truncateAddr = (x?: string) => {
+ if (x) {
+ if (x.length > 10) {
+ return x.slice(0, 4) + "..." + x.slice(-4);
+ }
+ return x;
+ }
+ return "";
+};
diff --git a/apps/rewards-dashboard/src/vite-env.d.ts b/apps/rewards-dashboard/src/vite-env.d.ts
new file mode 100644
index 000000000..1f3b24a7e
--- /dev/null
+++ b/apps/rewards-dashboard/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// {text}
+