10 |
setHovering(true)}
13 | onMouseLeave={() => setHovering(false)}
14 | onClick={() => setWelcome(false)}
15 | />
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/web/src/app/_layout/DemoData.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useFeatureFlag } from "@/hooks/useFeatureFlag";
4 |
5 | /**
6 | * Show a banner indicating that the data is demo data.
7 | */
8 | export const DemoData = () => {
9 | const showDemoData = useFeatureFlag("ui show demo data");
10 |
11 | if (!showDemoData) return null;
12 |
13 | return
DEMO DATA
;
14 | };
15 |
--------------------------------------------------------------------------------
/web/src/app/_layout/NavigationMenu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Menu from "@/components/Menu";
4 | import { usePathname, useRouter } from "next/navigation";
5 | import { useSwapPro } from "@/stores/useSwapPro";
6 |
7 | /**
8 | * The main Swap/Stake navigation menu.
9 | */
10 | export const NavigationMenu = () => {
11 | const pathname = usePathname();
12 | const router = useRouter();
13 |
14 | const { swapPro } = useSwapPro();
15 |
16 | return (
17 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/web/src/app/global-error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as Sentry from "@sentry/nextjs";
4 | import NextError from "next/error";
5 | import { useEffect } from "react";
6 |
7 | export default function GlobalError({
8 | error,
9 | }: {
10 | error: Error & { digest?: string };
11 | }) {
12 | useEffect(() => {
13 | Sentry.captureException(error);
14 | }, [error]);
15 |
16 | return (
17 |
18 |
19 | {/* `NextError` is the default Next.js error page component. Its type
20 | definition requires a `statusCode` prop. However, since the App Router
21 | does not expose status codes for errors, we simply pass 0 to render a
22 | generic error message. */}
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/web/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Welcome } from "@/app/Welcome";
2 |
3 | import { SwapForm } from "@/components/SwapForm";
4 | import { SwapPro } from "@/components/SwapPro";
5 |
6 | export default function Swap() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/web/src/app/stake/pool/add-liquidity/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { StakeForm } from "@/components/StakeForm";
4 | import { useSearchParams } from "next/navigation";
5 |
6 | export default function CreatePoolPage() {
7 | const params = useSearchParams();
8 | const positionId = Number(params.get("positionId"));
9 | const poolId = params.get("id");
10 |
11 | return (
12 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/web/src/app/stake/pool/confirm-liquidity/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ConfirmStake } from "@/components/ConfirmStake";
4 | import { useSearchParams } from "next/navigation";
5 |
6 | export default function ConfirmAddLiquidity() {
7 | const params = useSearchParams();
8 | const positionId = Number(params.get("positionId"));
9 |
10 | return
;
11 | }
12 |
--------------------------------------------------------------------------------
/web/src/app/stake/pool/create/confirm/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ConfirmStake } from "@/components/ConfirmStake";
4 |
5 | export default function ConfirmCreatePool() {
6 | return
;
7 | }
8 |
--------------------------------------------------------------------------------
/web/src/app/stake/pool/create/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { StakeForm } from "@/components/StakeForm";
4 | import { useSearchParams } from "next/navigation";
5 |
6 | export default function CreatePoolPage() {
7 | const params = useSearchParams();
8 | const poolId = params.get("id");
9 |
10 | return
;
11 | }
12 |
--------------------------------------------------------------------------------
/web/src/app/swap/confirm/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ConfirmSwap } from "@/components/ConfirmSwap";
4 |
5 | export default function ConfirmMakeSwap() {
6 | return
;
7 | }
8 |
--------------------------------------------------------------------------------
/web/src/app/swap/inventory/page.tsx:
--------------------------------------------------------------------------------
1 | import { InventoryContent } from "@/components/InventoryContent";
2 |
3 | export default function InvetoryPage() {
4 | return (
5 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/web/src/assets/gifs/congratulations.gif:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:44fe5a25d70dcfc11e0e1de106b9d307bd198dcdfa2a7a46b00b724c7c4af3ab
3 | size 5248825
4 |
--------------------------------------------------------------------------------
/web/src/assets/gifs/fail.gif:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:54979d8085f8810951d2b7807e27d1f6c008bd60216bfc5ae44c689b35c940b5
3 | size 1745828
4 |
--------------------------------------------------------------------------------
/web/src/assets/gifs/pending.gif:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:5c7b763a429699688ffa7887360fa3ffd68c260d933284deef461c25899a1f8d
3 | size 12430134
4 |
--------------------------------------------------------------------------------
/web/src/assets/gifs/processing.gif:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:fa990e4631832c26a98be8baa25de22dc426716e027fe89017277b90b3dc73f6
3 | size 3665912
4 |
--------------------------------------------------------------------------------
/web/src/assets/gifs/success.gif:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:1d909c3d9a1be7c44136ea8a71df81dafd49b0f438a6c93bf53534935ba9104d
3 | size 1770026
4 |
--------------------------------------------------------------------------------
/web/src/assets/gifs/unlock.gif:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6ac81be46e594e11352c444f905a5476a561f4d78711ee785b70b3fa6722a0ad
3 | size 807171
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/ARB.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:738421b0c463491dbffcdddff4c4b8af56f87497b91284cd922f66fe53b8a9a6
3 | size 2455
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/Caret.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:a18708977480207777f2620dee2fa2ca0f7d26b9de96672582b53f8080ac3fed
3 | size 251
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/ETH.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:196d238af84b9b0e0eb03d6ded441801b6c64853963df5f796443e1e533be8ed
3 | size 1733
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/SPN.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:2a12b305af29cf15d62555a8612022d79a97610ee648e4c82a5267701edefe8b
3 | size 585
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/Search.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:8fd128fb9eca036ae496dd1b84b84a78fb640a442eef9626821441a1f5e81ec7
3 | size 294
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/Swap.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:614a2ec380cd5b753747061c2a13e576082cbb19704ab8a17036d11beb152f6a
3 | size 269
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/USDC.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:1b00244a4fe765a7e494e40bc4f2ba4675cd7c271698a3efecfcccbf97d3f624
3 | size 6110
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/allow-swapping.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:b67e5343097501a4a225ec1aee4ba7d603c9ec1275cc0a50030970d0a8986e6c
3 | size 87908
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/arrow-down-white.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c5160136e789502ff519265c5fa72709cd3dcef79843aa22c3f63e7538546345
3 | size 927
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/arrow-down.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:957429e3a1a7a208caa48d5361adb12d764b380795bd5e9dad578ac26f4e75ce
3 | size 562
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/arrow-up-right.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:fea636ff425774cccc02ab41c30b281885314410d153e5b41b75b70082ecb161
3 | size 271
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/circles.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:4f035311afda0755a2713a6f5f3a12a9b60ef203d6a32ee7cf5e5148fd0f1856
3 | size 432
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/cog.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:63450a075a6b813c21fa429bed40f090b360fb47fe99952f9c8858c436beb0e2
3 | size 3750
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/disconnect.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:04c92068f3d0dbb123f72a92f3d554a5e6b157126bb28dc76263c62911c68387
3 | size 1377
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/discord.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6817c341113d428cd906203d19a041003cee833c244cf94762ca9c3ebf4177d3
3 | size 925
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/ethereum.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:b91a31a6bac4bc681cb879c0e9e3e167de82d4b2f52f3ec99cca1f8e9223f373
3 | size 19778
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/gas.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:f71276fd073f8ac434633f334a5a8ec4bc87a0ef641efe90998c57f14d3c8c35
3 | size 1841
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/grid.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:006656054b2f4eb3b747d2d04228a294eb42357e7337af5396aa34cafcfbb1f3
3 | size 469
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/hourglass.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:550367e4f051f2c7ba152eacc2d7ed84c91b5d29357952079fd27a3985cc2f1a
3 | size 3955
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/iridescent-pickaxe-2.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c4b8d850247cf8343e63e4ab76aef47087c880a14c2e89a945525499c8698915
3 | size 4582
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/iridescent-pickaxe.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:17c61896c0ba808d3e3390361514c49699d9695bf9e1c27d83e3f0fe0076726b
3 | size 3030
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/iridescent-token.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:8d0a8babdda9e079bd221c5d641d727f46904b71e44a02085f611f0263598f33
3 | size 7141
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/legend/current-price.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:8f67bea3e18a5c1a44fa31167e283dd6a155dea17dcc95b5455ceb64a35b14a8
3 | size 157
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/legend/liquidity-distribution.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:1991c985e870138a6e42992635ac0e4c87590bedc91e10270675e8c112519424
3 | size 266
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/legend/selected-range.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6c9ec39830a1c37fbcfc60ffcd0378fbb5bf95c33d262debaa9c2b2d538a2cf0
3 | size 157
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/list.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:88504e724bcd788dfafb49ca3fc9e98521ab4e6a3cd8d18d7780803da29e3a2f
3 | size 448
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/long-tail.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:7d7b82b05f1b6d804723f532cae2c5d159370ed6a3ecf605a735c353507971d6
3 | size 765
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/padlock.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:e82461523623a2d31e6c445c12162348986cd318cd5e1692a0616560082e1897
3 | size 1259
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/position.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:1fd95a90137b21ad3402d19b2801e427cf72a59088d793120ff361138b886bb7
3 | size 300
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/pro-toggle-selected.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:a0d784fa1dc5f596630de3233c66203247ac12d86e385d7dbde00d0307a2fe01
3 | size 2960
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/pro-toggle.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:8788431c25e837fd79950f2e7a7fe106410c5a500f72861742996fb13e97dc1d
3 | size 2850
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/profile-picture.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:83e6c6baecde588b36c8678f6dc910ee53fdf96ed3577a8548ac9aa661d9d1a5
3 | size 47766
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/sort.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:2796df312a573f01768eca56ec7326b9879be9f150159d5b43e18a247a05812c
3 | size 968
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/spn-test.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:31bb5ee44f4b6b238af98b3b22fec90918a0fa1bb69a3151b3e4aa86fd4d8767
3 | size 18930
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/success.gif:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:1d909c3d9a1be7c44136ea8a71df81dafd49b0f438a6c93bf53534935ba9104d
3 | size 1770026
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/superposition.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:f2baab1a179ef2558b26d67e59a23a8a933950cadf20bb4a5b8692a17de0a847
3 | size 530
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/token-borderless.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:4553060f79333a049e5e1c8b1205c7734cd0744a19a007dfa3e6bdb56cf73611
3 | size 6176
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/token-iridescent.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:2fae8c3e8bf0a39af89bafcaaeeb7f7963dbef2d8c09fe5688ff4f943cd199f1
3 | size 25271
4 |
--------------------------------------------------------------------------------
/web/src/assets/icons/token.svg:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6bd13491787b05094d6ccb53ca014f135ae90d95a3d9ddbc4d6eff23920046de
3 | size 18326
4 |
--------------------------------------------------------------------------------
/web/src/assets/profile-picture.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6db3b262a4a54ffa1eb60878196f2bd2ba0b746acf0d74a288386114d91da5ff
3 | size 35370
4 |
--------------------------------------------------------------------------------
/web/src/components/DurationSegmentedControl.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import SegmentedControl, {
3 | SegmentedControlProps,
4 | } from "@/components/ui/segmented-control";
5 |
6 | export const DurationSegmentedControl = ({
7 | className,
8 | variant,
9 | callback,
10 | }: {
11 | className?: string;
12 | variant?: SegmentedControlProps
["variant"];
13 | callback?: (value: "7D" | "1M" | "6M" | "1Y" | "ALL") => void;
14 | }) => {
15 | return (
16 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/web/src/components/InventoryContent/DisconnectButton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import Disconnect from "@/assets/icons/disconnect.svg";
3 | import { Badge } from "@/components/ui/badge";
4 | import { useState } from "react";
5 | import { useDetectClickOutside } from "react-detect-click-outside";
6 | import { useDisconnect } from "wagmi";
7 |
8 | export const DisconnectButton = () => {
9 | const [confirmDisconnect, setConfirmDisconnect] = useState(false);
10 |
11 | const ref = useDetectClickOutside({
12 | onTriggered: () => setConfirmDisconnect(false),
13 | });
14 |
15 | const { disconnect } = useDisconnect();
16 |
17 | return (
18 | {
29 | if (confirmDisconnect) {
30 | disconnect();
31 | } else {
32 | setConfirmDisconnect(true);
33 | }
34 | }}
35 | >
36 |
41 | {confirmDisconnect && "Disconnect"}
42 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/web/src/components/InventoryContent/columns.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ColumnDef } from "@tanstack/react-table";
4 | import { Button } from "@/components/ui/button";
5 | import { Badge } from "@/components/ui/badge";
6 | import { usdFormat } from "@/lib/usdFormat";
7 | import Token from "@/assets/icons/token.svg";
8 |
9 | export type Yield = {
10 | id: string;
11 | yield: number;
12 | pool: string;
13 | status: "claimable" | "claimed";
14 | };
15 |
16 | export const columns: ColumnDef[] = [
17 | {
18 | accessorKey: "yield",
19 | header: "Yield",
20 | cell: ({ row }) => (
21 |
22 |
23 |
24 | {usdFormat(row.original.yield)}
25 |
26 | ),
27 | },
28 | {
29 | accessorKey: "pool",
30 | header: "Pool",
31 | cell: ({ row }) => (
32 |
33 |
34 |
35 | {row.original.pool}
36 |
37 | ),
38 | },
39 | {
40 | accessorKey: "status",
41 | header: "Status",
42 | cell: ({ row }) =>
43 | row.original.status === "claimable" ? (
44 |
45 |
48 |
49 | ) : (
50 | "Claimed"
51 | ),
52 | },
53 | ];
54 |
--------------------------------------------------------------------------------
/web/src/components/InventoryContent/data/myPositionsData.ts:
--------------------------------------------------------------------------------
1 | import { nanoid } from "nanoid";
2 |
3 | export const myPositionsData = [
4 | {
5 | id: nanoid(),
6 | pool: "USDC x fUSDC",
7 | yield: 183.01,
8 | position: "$10.1k",
9 | liquidityRange: "3.10k - 3.98k",
10 | },
11 | {
12 | id: nanoid(),
13 | pool: "USDC x fUSDC",
14 | yield: 183.01,
15 | position: "$10.1k",
16 | liquidityRange: "3.10k - 3.98k",
17 | },
18 | {
19 | id: nanoid(),
20 | pool: "USDC x fUSDC",
21 | yield: 0,
22 | position: "$20",
23 | liquidityRange: "3.10k - 3.98k",
24 | },
25 | {
26 | id: nanoid(),
27 | pool: "USDC x fUSDC",
28 | yield: 183.01,
29 | position: "$10.1k",
30 | liquidityRange: "3.10k - 3.98k",
31 | },
32 | {
33 | id: nanoid(),
34 | pool: "USDC x fUSDC",
35 | yield: 183.01,
36 | position: "$10.1k",
37 | liquidityRange: "3.10k - 3.98k",
38 | },
39 | {
40 | id: nanoid(),
41 | pool: "USDC x fUSDC",
42 | yield: 0,
43 | position: "$20",
44 | liquidityRange: "3.10k - 3.98k",
45 | },
46 | ];
47 |
--------------------------------------------------------------------------------
/web/src/components/InventoryContent/data/yieldData.ts:
--------------------------------------------------------------------------------
1 | import { Yield } from "@/components/InventoryContent/columns";
2 | import { nanoid } from "nanoid";
3 |
4 | export const yieldData: Yield[] = [
5 | {
6 | id: nanoid(),
7 | yield: 12.33,
8 | status: "claimable",
9 | pool: "ETH-fUSDC",
10 | },
11 | {
12 | id: nanoid(),
13 | yield: 12.33,
14 | status: "claimable",
15 | pool: "ETH x fUSDC",
16 | },
17 | {
18 | id: nanoid(),
19 | yield: 12.33,
20 | status: "claimed",
21 | pool: "ETH x fUSDC",
22 | },
23 | {
24 | id: nanoid(),
25 | yield: 12.33,
26 | status: "claimed",
27 | pool: "ETH x fUSDC",
28 | },
29 | ];
30 |
--------------------------------------------------------------------------------
/web/src/components/InventoryContent/useInventorySettings.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | export const useInventorySettings = create<{
4 | /**
5 | * True when settings are open
6 | */
7 | settings: boolean;
8 |
9 | /**
10 | * Set the settings state
11 | */
12 | setSettings: (settings: boolean) => void;
13 | }>((set) => ({
14 | settings: false,
15 | setSettings: (settings: boolean) => set({ settings }),
16 | }));
17 |
--------------------------------------------------------------------------------
/web/src/components/Menu/Menu.module.scss:
--------------------------------------------------------------------------------
1 |
2 | .Item {
3 | position: relative;
4 | z-index: 1;
5 |
6 | &.selected {
7 | * {
8 | box-sizing: content-box;
9 | }
10 |
11 | &.light {
12 | color: $light;
13 | }
14 |
15 | &.dark {
16 | color: $dark;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/web/src/components/SwapPro/SwapProGraphData.ts:
--------------------------------------------------------------------------------
1 | import { subDays } from "date-fns";
2 |
3 | export const getSwapProGraphMockData = (length: number) => {
4 | const data = [];
5 | for (let i = 0; i < length; i++) {
6 | data.push({
7 | date: subDays(new Date(), length - i),
8 | value: Math.floor(Math.random() * 1000),
9 | });
10 | }
11 | return data;
12 | };
13 |
--------------------------------------------------------------------------------
/web/src/components/SwapPro/SwapProPoolFragment.tsx:
--------------------------------------------------------------------------------
1 | import { graphql } from "@/gql";
2 |
3 | /**
4 | * Fragment containing the data for SwapPro
5 | */
6 | export const SwapProPoolFragment = graphql(`
7 | fragment SwapProPoolFragment on SeawaterPool {
8 | address
9 | token {
10 | address
11 | symbol
12 | }
13 | liquidity {
14 | liquidity
15 | }
16 | priceOverTime {
17 | daily
18 | monthly
19 | }
20 | volumeOverTime {
21 | monthly {
22 | token1 {
23 | timestamp
24 | valueUsd
25 | }
26 | fusdc {
27 | timestamp
28 | valueUsd
29 | }
30 | }
31 | daily {
32 | token1 {
33 | timestamp
34 | valueUsd
35 | }
36 | fusdc {
37 | timestamp
38 | valueUsd
39 | }
40 | }
41 | }
42 | liquidityOverTime {
43 | daily {
44 | timestamp
45 | fusdc {
46 | valueUsd
47 | }
48 | }
49 | monthly {
50 | timestamp
51 | fusdc {
52 | valueUsd
53 | }
54 | }
55 | }
56 | swaps {
57 | swaps {
58 | transactionHash
59 | timestamp
60 | amountIn {
61 | valueScaled
62 | token {
63 | symbol
64 | }
65 | }
66 | amountOut {
67 | valueScaled
68 | token {
69 | symbol
70 | }
71 | }
72 | }
73 | }
74 | }
75 | `);
76 |
--------------------------------------------------------------------------------
/web/src/components/TokenIcon.tsx:
--------------------------------------------------------------------------------
1 | import Image, { ImageProps } from "next/image";
2 |
3 | interface TokenIconProps extends Omit {
4 | src?: string;
5 | }
6 |
7 | const TokenIcon = ({ src, ...props }: TokenIconProps) => (
8 |
9 |
16 |
17 | );
18 |
19 | export { TokenIcon };
20 |
--------------------------------------------------------------------------------
/web/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { cva, type VariantProps } from "class-variance-authority";
5 |
6 | const inputVariants = cva(
7 | "border-input bg-background ring-offset-background placeholder:text-muted-foreground flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 ",
13 | "no-ring": "",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | },
20 | );
21 |
22 | export interface InputProps
23 | extends React.InputHTMLAttributes,
24 | VariantProps {}
25 |
26 | const Input = React.forwardRef(
27 | ({ className, type, variant, ...props }, ref) => {
28 | return (
29 |
35 | );
36 | },
37 | );
38 | Input.displayName = "Input";
39 |
40 | export { Input };
41 |
--------------------------------------------------------------------------------
/web/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as LabelPrimitive from "@radix-ui/react-label";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 |
26 | export { Label };
27 |
--------------------------------------------------------------------------------
/web/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |
17 |
27 |
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 |
31 | export { Popover, PopoverTrigger, PopoverContent };
32 |
--------------------------------------------------------------------------------
/web/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | );
13 | }
14 |
15 | export { Skeleton };
16 |
--------------------------------------------------------------------------------
/web/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as SwitchPrimitives from "@radix-ui/react-switch";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const Switch = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 |
20 |
25 |
26 | ));
27 | Switch.displayName = SwitchPrimitives.Root.displayName;
28 |
29 | export { Switch };
30 |
--------------------------------------------------------------------------------
/web/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/components/ui/toast";
11 | import { useToast } from "@/components/ui/use-toast";
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | );
31 | })}
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/web/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider;
9 |
10 | const Tooltip = TooltipPrimitive.Root;
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger;
13 |
14 | const TooltipContent = React.forwardRef<
15 | React.ElementRef,
16 | React.ComponentPropsWithoutRef
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |
27 | ));
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
29 |
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
31 |
--------------------------------------------------------------------------------
/web/src/components/ui/typography.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | export function TypographyH2({
4 | children,
5 | className,
6 | }: {
7 | children: React.ReactNode;
8 | className?: string;
9 | }) {
10 | return (
11 |
17 | {children}
18 |
19 | );
20 | }
21 |
22 | export function TypographyH3({
23 | children,
24 | className,
25 | }: {
26 | children: React.ReactNode;
27 | className?: string;
28 | }) {
29 | return (
30 |
36 | {children}
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/web/src/config/arbitrumStylusTestnet.ts:
--------------------------------------------------------------------------------
1 | import { arbitrumSepolia } from "wagmi/chains";
2 |
3 | export const arbitrumStylusTestnet = {
4 | name: "Superposition Testnet",
5 | id: 98985,
6 | nativeCurrency: { name: "Superposition", symbol: "SPN", decimals: 18 },
7 | rpcUrls: {
8 | default: { http: ["https://testnet-rpc.superposition.so"] },
9 | public: { http: ["https://testnet-rpc.superposition.so"] },
10 | },
11 | blockExplorers: {
12 | default: {
13 | name: "CatScan",
14 | url: "https://testnet-explorer.superposition.so",
15 | },
16 | },
17 | };
18 |
--------------------------------------------------------------------------------
/web/src/config/graphqlEndpoint.ts:
--------------------------------------------------------------------------------
1 | export const graphqlEndpoint = process.env.NEXT_PUBLIC_LONGTAIL_GRAPHQL_URL;
2 |
--------------------------------------------------------------------------------
/web/src/config/index.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
4 | import { http } from "viem";
5 | import { arbitrumStylusTestnet } from "./arbitrumStylusTestnet";
6 |
7 | // Get projectId at https://cloud.walletconnect.com
8 | export const projectId =
9 | process.env.NEXT_PUBLIC_LONGTAIL_WALLETCONNECT_PROJECT_ID;
10 |
11 | if (!projectId) throw new Error("Project ID is not defined");
12 |
13 | const metadata = {
14 | name: "Longtail",
15 | description: "",
16 | url: "https://long.so",
17 | icons: [""],
18 | };
19 |
20 | // Create wagmiConfig
21 | const chains = [arbitrumStylusTestnet] as const;
22 |
23 | export const config = defaultWagmiConfig({
24 | chains,
25 | projectId,
26 | transports: {
27 | [arbitrumStylusTestnet.id]: http("https://testnet-rpc.superposition.so"),
28 | },
29 | metadata,
30 | ssr: true,
31 | });
32 |
--------------------------------------------------------------------------------
/web/src/config/tokens.ts:
--------------------------------------------------------------------------------
1 | export type Token = {
2 | name: string;
3 | address: `0x${string}`;
4 | symbol: string;
5 | decimals: number;
6 | icon?: string;
7 | };
8 |
9 | export const fUSDC: Token = {
10 | name: "fUSDC",
11 | address: "0xa8ea92c819463efbeddfb670fefc881a480f0115",
12 | symbol: "fUSDC",
13 | decimals: 6,
14 | icon: "/icons/fUSDC.svg",
15 | };
16 |
17 | export const USDC: Token = {
18 | name: "USD Coin",
19 | address: "0x6437fdc89ced41941b97a9f1f8992d88718c81c5",
20 | symbol: "USDC",
21 | decimals: 6,
22 | icon: "/icons/usd-coin-usdc-logo.svg",
23 | };
24 |
25 | export const WETH: Token = {
26 | name: "Wrapped Ethereum",
27 | address: "0xde104342b32bca03ec995f999181f7cf1ffc04d7",
28 | symbol: "WETH",
29 | decimals: 18,
30 | icon: "/icons/ethereum-eth-logo.svg",
31 | };
32 |
33 | export const WSPN: Token = {
34 | name: "Wrapped Superposition",
35 | address: "0x22b9fa698b68bba071b513959794e9a47d19214c",
36 | symbol: "WSPN",
37 | decimals: 18,
38 | icon: "/icons/ICON_BLACK.png",
39 | };
40 |
41 | export const CATBUX: Token = {
42 | name: "CATBUX",
43 | address: "0x36c116a8851869cf8a99b3bda0fad42453d32b99",
44 | symbol: "BUX",
45 | decimals: 18,
46 | icon: "/icons/cbux.svg",
47 | };
48 |
49 | const allTokens: Token[] = [fUSDC, USDC, WSPN, WETH, CATBUX];
50 |
51 | export const DefaultToken = USDC;
52 |
53 | export const getTokenFromAddress = (address_: string): Token | undefined =>
54 | allTokens.find(({ address }) => address === address_);
55 |
56 | export const mockTokens: Token[] = [DefaultToken];
57 |
--------------------------------------------------------------------------------
/web/src/context/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { ReactNode } from "react";
4 | import { config, projectId } from "@/config";
5 |
6 | import { createWeb3Modal } from "@web3modal/wagmi/react";
7 |
8 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
9 |
10 | import { State, WagmiProvider } from "wagmi";
11 |
12 | // Setup queryClient
13 | export const queryClient = new QueryClient();
14 |
15 | if (!projectId) throw new Error("Project ID is not defined");
16 |
17 | // Create modal
18 | createWeb3Modal({
19 | wagmiConfig: config,
20 | projectId,
21 | enableAnalytics: true, // Optional - defaults to your Cloud configuration
22 | enableOnramp: true, // Optional - false as default
23 | });
24 |
25 | export default function Web3ModalProvider({
26 | children,
27 | initialState,
28 | }: {
29 | children: ReactNode;
30 | initialState?: State;
31 | }) {
32 | return (
33 |
34 | {children}
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/web/src/demoData/swapExploreAssets.ts:
--------------------------------------------------------------------------------
1 | import { mockTokens } from "@/config/tokens";
2 |
3 | export const mockSwapExploreAssets = mockTokens.map((token) => ({
4 | symbol: token.symbol,
5 | address: token.address,
6 | name: token.name,
7 | amount: 0.000846,
8 | amountUSD: 765.22,
9 | token,
10 | }));
11 |
12 | export const mockHighestRewarders = mockSwapExploreAssets;
13 |
--------------------------------------------------------------------------------
/web/src/demoData/yieldOverTimeData.ts:
--------------------------------------------------------------------------------
1 | import { subDays } from "date-fns";
2 |
3 | export const getMockYieldOverTimeData = (length: number) => {
4 | const data = [];
5 | for (let i = 0; i < length; i++) {
6 | data.push({
7 | date: subDays(new Date(), length - i),
8 | uv: Math.floor(Math.random() * 1000),
9 | pv: Math.floor(Math.random() * 1000),
10 | });
11 | }
12 | return data;
13 | };
14 |
--------------------------------------------------------------------------------
/web/src/gql/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./fragment-masking";
2 | export * from "./gql";
--------------------------------------------------------------------------------
/web/src/hooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | // credit: https://github.com/uidotdev/usehooks/blob/main/index.js
4 | export function useDebounce(value: T, delay: number) {
5 | const [debouncedValue, setDebouncedValue] = useState(value);
6 |
7 | useEffect(() => {
8 | const handler = setTimeout(() => {
9 | setDebouncedValue(value);
10 | }, delay);
11 |
12 | return () => {
13 | clearTimeout(handler);
14 | };
15 | }, [value, delay]);
16 |
17 | return debouncedValue;
18 | }
19 |
--------------------------------------------------------------------------------
/web/src/hooks/useFeatureFlagOverride.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { FeatureFlags } from "@/hooks/useFeatureFlag";
3 | import { persist } from "zustand/middleware";
4 |
5 | /**
6 | * Zustand hook to override feature flags for local development.
7 | */
8 | export const useFeatureFlagOverride = create(
9 | persist<{
10 | override: boolean;
11 | setOverride: (value: boolean) => void;
12 | featureFlags: Partial;
13 | setFeatureFlagOverride: (
14 | featureFlag: keyof FeatureFlags,
15 | value: boolean,
16 | ) => void;
17 | }>(
18 | (set) => ({
19 | override: false,
20 | setOverride: (value) => set({ override: value }),
21 | featureFlags: {},
22 | setFeatureFlagOverride: (featureFlag, value) =>
23 | set((state) => ({
24 | featureFlags: {
25 | ...state.featureFlags,
26 | [featureFlag]: value,
27 | },
28 | })),
29 | }),
30 | {
31 | name: "feature-flag-override",
32 | },
33 | ),
34 | );
35 |
--------------------------------------------------------------------------------
/web/src/hooks/useMediaQuery.ts:
--------------------------------------------------------------------------------
1 | import { useMediaQuery as useRrMediaQuery } from "react-responsive";
2 |
3 | export const useMediaQuery = () => {
4 | const isLtSm = useRrMediaQuery({
5 | query: "(max-width: 640px)",
6 | });
7 |
8 | const isSm = useRrMediaQuery({
9 | query: "(min-width: 640px)",
10 | });
11 |
12 | const isMd = useRrMediaQuery({
13 | query: "(min-width: 768px)",
14 | });
15 |
16 | return {
17 | isSm,
18 | isLtSm,
19 | isMd,
20 | };
21 | };
22 |
--------------------------------------------------------------------------------
/web/src/instrumentation.ts:
--------------------------------------------------------------------------------
1 | export async function register() {
2 | if (process.env.NEXT_RUNTIME === "nodejs") {
3 | await import("../sentry.server.config");
4 | }
5 |
6 | if (process.env.NEXT_RUNTIME === "edge") {
7 | await import("../sentry.edge.config");
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/web/src/lib/abi/IFaucet.ts:
--------------------------------------------------------------------------------
1 | export const output = {
2 | abi: [
3 | {
4 | type: "function",
5 | name: "claimAmount",
6 | inputs: [],
7 | outputs: [],
8 | stateMutability: "nonpayable",
9 | },
10 | {
11 | type: "function",
12 | name: "timeUntilNextClaim",
13 | inputs: [
14 | {
15 | name: "_recipient",
16 | type: "address",
17 | internalType: "address",
18 | },
19 | ],
20 | outputs: [
21 | {
22 | name: "",
23 | type: "uint256",
24 | internalType: "uint256",
25 | },
26 | ],
27 | stateMutability: "view",
28 | },
29 | {
30 | type: "function",
31 | name: "isMember",
32 | inputs: [
33 | {
34 | name: "_recipient",
35 | type: "address",
36 | internalType: "address",
37 | },
38 | ],
39 | outputs: [
40 | {
41 | name: "",
42 | type: "bool",
43 | internalType: "bool",
44 | },
45 | ],
46 | stateMutability: "view",
47 | },
48 | ],
49 | } as const;
50 |
--------------------------------------------------------------------------------
/web/src/lib/addresses.ts:
--------------------------------------------------------------------------------
1 | export const ammAddress = "0xE13Fec14aBFbAa5b185cFb46670A56BF072E13b1";
2 | export const faucetAddress = "0x0000000000000000000000000000000000000000";
3 |
--------------------------------------------------------------------------------
/web/src/lib/publicClient.ts:
--------------------------------------------------------------------------------
1 | import { createPublicClient, http } from "viem";
2 | import { arbitrumStylusTestnet } from "../config/arbitrumStylusTestnet";
3 |
4 | export const publicClient = createPublicClient({
5 | chain: arbitrumStylusTestnet,
6 | transport: http(),
7 | });
8 |
--------------------------------------------------------------------------------
/web/src/lib/usdFormat.tsx:
--------------------------------------------------------------------------------
1 | export const usdFormat = (value: number) => {
2 | return new Intl.NumberFormat("en-US", {
3 | style: "currency",
4 | currency: "USD",
5 | notation: value < 1000000 ? "standard" : "compact",
6 | minimumFractionDigits: 2,
7 | }).format(value);
8 | };
9 |
--------------------------------------------------------------------------------
/web/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/web/src/stores/useInventorySheet.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | interface InventorySheetStore {
4 | /**
5 | * Represents the current state of openness.
6 | */
7 | isOpen: boolean;
8 |
9 | /**
10 | * Sets the state of openness.
11 | *
12 | * @param {boolean} isOpen The new state of openness.
13 | */
14 | setIsOpen: (isOpen: boolean) => void;
15 | }
16 |
17 | /**
18 | * A store for the InventorySheet component.
19 | */
20 | export const useInventorySheet = create((set) => ({
21 | isOpen: false,
22 | setIsOpen: (isOpen) => set({ isOpen }),
23 | }));
24 |
--------------------------------------------------------------------------------
/web/src/stores/useStakeWelcomeBackStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | interface WelcomeStore {
4 | /**
5 | * Whether the welcome screen is visible
6 | */
7 | welcome: boolean;
8 |
9 | /**
10 | * Set the welcome screen visibility
11 | * @param welcome
12 | */
13 | setWelcome: (welcome: boolean) => void;
14 |
15 | /**
16 | * Whether the yield breakdown screen is visible
17 | */
18 | yieldBreakdown: boolean;
19 |
20 | /**
21 | * Set the yield breakdown screen visibility
22 | * @param yieldBreakdown
23 | */
24 | setYieldBreakdown: (yieldBreakdown: boolean) => void;
25 |
26 | yieldBreakdownClaimed: boolean;
27 | setYieldBreakdownClaimed: (yieldBreakdownClaimed: boolean) => void;
28 | }
29 |
30 | export const useStakeWelcomeBackStore = create((set) => ({
31 | welcome: false,
32 | setWelcome: (welcome) => set({ welcome }),
33 |
34 | yieldBreakdown: false,
35 | setYieldBreakdown: (yieldBreakdown) => set({ yieldBreakdown }),
36 |
37 | yieldBreakdownClaimed: false,
38 | setYieldBreakdownClaimed: (yieldBreakdownClaimed) =>
39 | set({ yieldBreakdownClaimed }),
40 | }));
41 |
--------------------------------------------------------------------------------
/web/src/stores/useSwapPro.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | interface SwapProStore {
4 | /**
5 | * Whether the swap screen is in "pro" mode
6 | */
7 | swapPro: boolean;
8 |
9 | /**
10 | * Set the swap screen "pro" mode
11 | * @param swapPro
12 | */
13 | setSwapPro: (swapPro: boolean) => void;
14 | }
15 |
16 | export const useSwapPro = create((set) => ({
17 | swapPro: false,
18 | setSwapPro: (swapPro) => set({ swapPro }),
19 | }));
20 |
--------------------------------------------------------------------------------
/web/src/stores/useWelcomeStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | interface WelcomeStore {
4 | /**
5 | * Whether the welcome screen is visible
6 | */
7 | welcome: boolean;
8 |
9 | /**
10 | * Set the welcome screen visibility
11 | * @param welcome
12 | */
13 | setWelcome: (welcome: boolean) => void;
14 |
15 | /**
16 | * Whether the user is hovering over the welcome screen
17 | */
18 | hovering: boolean;
19 |
20 | /**
21 | * Set the hovering state
22 | * @param hovering
23 | */
24 | setHovering: (hovering: boolean) => void;
25 | }
26 |
27 | export const useWelcomeStore = create((set) => ({
28 | welcome: true,
29 | setWelcome: (welcome) => set({ welcome }),
30 |
31 | hovering: false,
32 | setHovering: (hovering) => set({ hovering }),
33 | }));
34 |
--------------------------------------------------------------------------------
/web/src/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | @use './variables' as *;
2 |
3 | @mixin box($size) {
4 | border-radius: $size;
5 | padding: calc($size * 1.5);
6 | }
7 |
8 | @mixin light {
9 | background-color: $light;
10 | color: $dark;
11 | }
12 |
13 | @mixin dark {
14 | background-color: $dark;
15 | color: $light;
16 | }
17 |
--------------------------------------------------------------------------------
/web/src/styles/_variables.scss:
--------------------------------------------------------------------------------
1 | $light: #EBEBEB;
2 | $dark: #1E1E1E;
3 |
--------------------------------------------------------------------------------
/web/src/styles/globals.scss:
--------------------------------------------------------------------------------
1 | body {
2 | all: unset;
3 | background-color: $light;
4 | font-size: 16px;
5 | font-weight: 400;
6 | }
7 |
8 | button {
9 | all: unset;
10 | }
11 |
12 | a {
13 | all: unset;
14 | }
15 |
16 | div[data-radix-popper-content-wrapper] { z-index: 10 !important; }
17 |
--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "lib": ["dom", "dom.iterable", "esnext", "es2020"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "strictNullChecks": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | },
21 | {
22 | "name": "@0no-co/graphqlsp",
23 | "schema": "./schema.graphql"
24 | }
25 | ],
26 | "paths": {
27 | "@/*": ["./src/*"],
28 | "#/*": ["./public/*"]
29 | }
30 | },
31 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
32 | "exclude": ["node_modules"]
33 | }
34 |
--------------------------------------------------------------------------------