44 |
51 |
52 |
46 |
50 |
47 |
49 |
13 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/public/info.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/app/mint-teth/abis/GasRouter.json:
--------------------------------------------------------------------------------
1 | {
2 | "abi": [
3 | {
4 | "inputs": [
5 | {
6 | "internalType": "uint32",
7 | "name": "_destinationDomain",
8 | "type": "uint32"
9 | }
10 | ],
11 | "name": "quoteGasPayment",
12 | "outputs": [
13 | {
14 | "internalType": "uint256",
15 | "name": "_gasPayment",
16 | "type": "uint256"
17 | }
18 | ],
19 | "stateMutability": "view",
20 | "type": "function"
21 | }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/app/mint-tusd/abis/GasRouter.json:
--------------------------------------------------------------------------------
1 | {
2 | "abi": [
3 | {
4 | "inputs": [
5 | {
6 | "internalType": "uint32",
7 | "name": "_destinationDomain",
8 | "type": "uint32"
9 | }
10 | ],
11 | "name": "quoteGasPayment",
12 | "outputs": [
13 | {
14 | "internalType": "uint256",
15 | "name": "_gasPayment",
16 | "type": "uint256"
17 | }
18 | ],
19 | "stateMutability": "view",
20 | "type": "function"
21 | }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/app/hooks/useAboutGasStationModal.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | import { AboutGasStationComponent } from "@/app/components/GasStation/AboutGasStation";
4 |
5 | export const useAboutGasStationModal = () => {
6 | const [isOpen, setIsOpen] = useState(false);
7 |
8 | const open = () => setIsOpen(true);
9 | const close = () => setIsOpen(false);
10 |
11 | return {
12 | open,
13 | close,
14 | isOpen,
15 | renderModal: (
16 |
14 |
17 | Something went wrong!
15 | 16 |
18 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/app/providers.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
4 | import { useState, type ReactNode } from "react";
5 | import { NetworkProvider } from "@/app/contexts/NetworkContext";
6 | import { SidebarProvider } from "@/app/contexts/SidebarContext";
7 |
8 |
9 | export function Providers(props: { children: ReactNode }) {
10 | const [queryClient] = useState(() => new QueryClient());
11 |
12 | return (
13 | Sentry Test Page
19 |This page is used to test Sentry error tracking.
20 |Check your Sentry dashboard to see the test error.
21 |
25 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/app/mint-teth/components/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 |
4 | interface TooltipProps {
5 | text: string;
6 | }
7 |
8 | export function Tooltip({ text }: TooltipProps) {
9 | return (
10 |
11 |
14 | {/* Tooltip */}
15 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/app/mint-tusd/components/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 |
4 | interface TooltipProps {
5 | text: string;
6 | }
7 |
8 | export function Tooltip({ text }: TooltipProps) {
9 | return (
10 |
16 | {text}
17 | {/* Tooltip Arrow */}
18 |
19 |
20 |
11 |
14 | {/* Tooltip */}
15 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/app/components/icons/loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Loading = ({ loadingClassName, style }: { loadingClassName: string, style: any}) => {
4 | return (
5 |
27 | );
28 | }
29 |
30 | export default Loading;
31 |
--------------------------------------------------------------------------------
/app/mint-teth/lib/balanceOf.ts:
--------------------------------------------------------------------------------
1 | import { erc20Abi, PublicClient } from "viem";
2 |
3 | /**
4 | * Retrieves the balance of a specific address for a given ERC20 token.
5 | * @param balanceAddress The address for which the balance needs to be retrieved.
6 | * @param tokenAddress The address of the ERC20 token.
7 | * @param chainId The chain ID for the token (optional).
8 | * @returns The balance of the specified address as a BigInt.
9 | */
10 | export async function balanceOf({
11 | tokenAddress,
12 | userAddress,
13 | publicClient,
14 | }: {
15 | tokenAddress: `0x${string}`;
16 | userAddress: `0x${string}`;
17 | publicClient: PublicClient;
18 | }) {
19 | if (tokenAddress === "0x") {
20 | throw new Error(`Error calling balanceOf(): tokenAddress cannot be "0x".`);
21 | }
22 |
23 | const balanceOfAsBigInt = publicClient.readContract({
24 | abi: erc20Abi,
25 | address: tokenAddress,
26 | functionName: "balanceOf",
27 | args: [userAddress],
28 | });
29 |
30 | return balanceOfAsBigInt;
31 | }
32 |
--------------------------------------------------------------------------------
/app/mint-tusd/lib/balanceOf.ts:
--------------------------------------------------------------------------------
1 | import { erc20Abi, PublicClient } from "viem";
2 |
3 | /**
4 | * Retrieves the balance of a specific address for a given ERC20 token.
5 | * @param balanceAddress The address for which the balance needs to be retrieved.
6 | * @param tokenAddress The address of the ERC20 token.
7 | * @param chainId The chain ID for the token (optional).
8 | * @returns The balance of the specified address as a BigInt.
9 | */
10 | export async function balanceOf({
11 | tokenAddress,
12 | userAddress,
13 | publicClient,
14 | }: {
15 | tokenAddress: `0x${string}`;
16 | userAddress: `0x${string}`;
17 | publicClient: PublicClient;
18 | }) {
19 | if (tokenAddress === "0x") {
20 | throw new Error(`Error calling balanceOf(): tokenAddress cannot be "0x".`);
21 | }
22 |
23 | const balanceOfAsBigInt = publicClient.readContract({
24 | abi: erc20Abi,
25 | address: tokenAddress,
26 | functionName: "balanceOf",
27 | args: [userAddress],
28 | });
29 |
30 | return balanceOfAsBigInt;
31 | }
32 |
--------------------------------------------------------------------------------
/app/components/icons/square-arrow-top-right.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const SquareArrowTopRight = ({ className }: { className: string}) => {
4 | return (
5 |
8 | );
9 | }
10 |
11 | export default SquareArrowTopRight;
12 |
--------------------------------------------------------------------------------
/app/mint-teth/lib/userAtomicRequest.ts:
--------------------------------------------------------------------------------
1 | import { Abi, PublicClient } from "viem";
2 | import AtomicQueue from "../abis/AtomicQueue.json";
3 | import { atomicQueueContractAddress } from "../constants/contracts";
4 |
5 | export async function getUserAtomicRequest(
6 | {
7 | userAddress,
8 | offerAddress,
9 | wantAddress,
10 | }: {
11 | userAddress: `0x${string}`;
12 | offerAddress: `0x${string}`;
13 | wantAddress: `0x${string}`;
14 | },
15 | { publicClient }: { publicClient: PublicClient }
16 | ): Promise<{
17 | deadline: bigint;
18 | atomicPrice: bigint;
19 | offerAmount: bigint;
20 | inSolve: boolean;
21 | }> {
22 | const [deadline, atomicPrice, offerAmount, inSolve] = (await publicClient.readContract({
23 | abi: AtomicQueue.abi as Abi,
24 | address: atomicQueueContractAddress,
25 | functionName: "userAtomicRequest",
26 | args: [userAddress, offerAddress, wantAddress],
27 | })) as [bigint, bigint, bigint, boolean];
28 |
29 | return { deadline, atomicPrice, offerAmount, inSolve };
30 | }
31 |
--------------------------------------------------------------------------------
/app/mint-tusd/lib/userAtomicRequest.ts:
--------------------------------------------------------------------------------
1 | import { Abi, PublicClient } from "viem";
2 | import AtomicQueue from "../abis/AtomicQueue.json";
3 | import { atomicQueueContractAddress } from "../constants/contracts";
4 |
5 | export async function getUserAtomicRequest(
6 | {
7 | userAddress,
8 | offerAddress,
9 | wantAddress,
10 | }: {
11 | userAddress: `0x${string}`;
12 | offerAddress: `0x${string}`;
13 | wantAddress: `0x${string}`;
14 | },
15 | { publicClient }: { publicClient: PublicClient }
16 | ): Promise<{
17 | deadline: bigint;
18 | atomicPrice: bigint;
19 | offerAmount: bigint;
20 | inSolve: boolean;
21 | }> {
22 | const [deadline, atomicPrice, offerAmount, inSolve] = (await publicClient.readContract({
23 | abi: AtomicQueue.abi as Abi,
24 | address: atomicQueueContractAddress,
25 | functionName: "userAtomicRequest",
26 | args: [userAddress, offerAddress, wantAddress],
27 | })) as [bigint, bigint, bigint, boolean];
28 |
29 | return { deadline, atomicPrice, offerAmount, inSolve };
30 | }
31 |
--------------------------------------------------------------------------------
/app/mint-tusd/constants/tokens.ts:
--------------------------------------------------------------------------------
1 | import { SelectOption } from "../components/EcSelect";
2 |
3 | export const tokenAddresses: `0x${string}`[] = [
4 | "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
5 | ];
6 |
7 | export const tokenOptions: SelectOption[] = [
8 | {
9 | value: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
10 | label: "USDC",
11 | imageSrc: "/token-usdc.svg",
12 | },
13 | ];
14 |
15 | export const chainOptions: SelectOption[] = [
16 | { value: "eclipse", label: "Eclipse", imageSrc: "/eclipse.png" },
17 | { value: "ethereum", label: "Ethereum", imageSrc: "/eth.png" },
18 | ];
19 |
20 | // tETH token address on Eclipse
21 | export const tethSvmTokenAddress =
22 | "GU7NS9xCwgNPiAdJ69iusFrRfawjDDPjeMBovhV1d4kn";
23 | export const tethEvmTokenAddress = "0x19e099B7aEd41FA52718D780dDA74678113C0b32";
24 |
25 | // tUSD token address on Eclipse
26 | export const tusdSvmTokenAddress =
27 | "27Kkn8PWJbKJsRZrxbsYDdedpUQKnJ5vNfserCxNEJ3R";
28 | export const tusdEvmTokenAddress = "0x722a851B6798D65b80526562Fc3a36E19b1F883b";
29 |
--------------------------------------------------------------------------------
/app/mint-teth/abis/WarpRouteContract.json:
--------------------------------------------------------------------------------
1 | {
2 | "abi": [
3 | {
4 | "inputs": [
5 | {
6 | "internalType": "contract ERC20",
7 | "name": "depositAsset",
8 | "type": "address"
9 | },
10 | {
11 | "internalType": "uint256",
12 | "name": "depositAmount",
13 | "type": "uint256"
14 | },
15 | {
16 | "internalType": "uint256",
17 | "name": "minimumMint",
18 | "type": "uint256"
19 | },
20 | {
21 | "internalType": "bytes32",
22 | "name": "_recipient",
23 | "type": "bytes32"
24 | }
25 | ],
26 | "name": "depositAndBridge",
27 | "outputs": [
28 | {
29 | "internalType": "uint256",
30 | "name": "sharesMinted",
31 | "type": "uint256"
32 | },
33 | {
34 | "internalType": "bytes32",
35 | "name": "messageId",
36 | "type": "bytes32"
37 | }
38 | ],
39 | "stateMutability": "nonpayable",
40 | "type": "function"
41 | }
42 | ]
43 | }
44 |
--------------------------------------------------------------------------------
/app/hooks/useOnSetPrimaryWallet.ts:
--------------------------------------------------------------------------------
1 | import { useStableSwitchWallet } from "./useStableSwitchWallet";
2 | import { Wallet } from "@dynamic-labs/sdk-react-core";
3 |
4 | //In some cases there's a race condition between connecting the wallet and having it available to switch to so we need to poll for it
5 | export const useOnSetPrimaryWallet = (wallets?: Wallet[]) => {
6 | const switchWallet = useStableSwitchWallet();
7 |
8 | const onSetPrimaryWallet = async (address: string) => {
9 | const maxAttempts = 20;
10 | let attemptCount = 0;
11 | const timer = setInterval(async () => {
12 | attemptCount++;
13 | const newPrimaryWallet = wallets?.find(
14 | (wallet) => wallet.address === address
15 | );
16 | if (attemptCount >= maxAttempts) {
17 | clearInterval(timer);
18 | return;
19 | }
20 | if (!newPrimaryWallet || !switchWallet.current) {
21 | return;
22 | }
23 | try {
24 | await switchWallet.current(newPrimaryWallet?.id);
25 | clearInterval(timer);
26 | } catch (e) {}
27 | }, 200);
28 | };
29 |
30 | return onSetPrimaryWallet;
31 | };
32 |
--------------------------------------------------------------------------------
/app/contexts/SidebarContext.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import React, { createContext, useState, ReactNode, useContext, useEffect } from 'react';
4 |
5 | type SidebarContextType = {
6 | isSidebar: boolean;
7 | setIsSidebar: React.Dispatch
16 | {text}
17 | {/* Tooltip Arrow */}
18 |
19 |
20 |
13 | {isExtended ? (
14 | 
22 | ) : (
23 | 
31 | )}
32 |
33 |
22 | ) : (
23 |
31 | )}
32 |
35 |
40 | );
41 | }
42 |
43 | return this.props.children;
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/app/components/icons/sidebar-icons/ellipse.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Ellipse = () => {
4 | return (
5 |
22 | );
23 | };
24 |
25 | export default Ellipse;
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/app/components/ThirdpartyBridgeModal/constants.ts:
--------------------------------------------------------------------------------
1 | import { ThirdpartyBridge } from './ThirdpartyBridgeItem';
2 |
3 | export const thirdpartyBridges: ThirdpartyBridge[] = [
4 | { name: "Hyperlane", address: "usenexus.org", iconAddr: "/thirdparty-bridges/hyperlane.png" },
5 | { name: "Relay", address: "relay.link/bridge/eclipse?toCurrency=11111111111111111111111111111111", iconAddr: "/thirdparty-bridges/relay.png" },
6 | { name: "Owlto", address: "owlto.finance/?to=Eclipse", iconAddr: "/thirdparty-bridges/owlto.png" },
7 | { name: "Orbiter", address: "orbiter.finance/?source=Ethereum&dest=Eclipse&token=ETH", iconAddr: "/thirdparty-bridges/orbiter.png" },
8 | { name: "Gas.zip", address: "gas.zip", iconAddr: "/thirdparty-bridges/gaszip.png" },
9 | { name: "Mini Bridge", address: "minibridge.chaineye.tools/?dst=eclipse&mode=swap", iconAddr: "/thirdparty-bridges/minibridge.png" },
10 | { name: "Stride", address: "bridge.stride.zone", iconAddr: "/thirdparty-bridges/stride.png" },
11 | { name: "Alldomains Bridge", address: "bridge.alldomains.id", iconAddr: "/thirdparty-bridges/alldomains.png" },
12 | { name: "Retro Bridge", address: "app.retrobridge.io/?tokenFrom=ETH&destination=Eclipse", iconAddr: "/thirdparty-bridges/retrobridge.png" },
13 | ]
14 |
15 |
--------------------------------------------------------------------------------
/app/components/icons/transferArrow.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const TransferArrow = () => {
4 | return (
5 |
9 | );
10 | };
11 |
12 | export default TransferArrow;
13 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Metadata } from 'next';
2 | import ClientLayout from './client-layout';
3 |
4 | export const metadata: Metadata = {
5 | title: process.env.WEBSITE_TITLE,
6 | description: process.env.WEBSITE_DESCRIPTION,
7 | icons: [
8 | {
9 | rel: 'icon',
10 | type: 'image/png',
11 | sizes: '200x200',
12 | url: process.env.NEXT_PUBLIC_CURRENT_CHAIN === 'mainnet'
13 | ? '/eclipse-favicon.png'
14 | : '/testnet-favicon.png',
15 | }
16 | ],
17 | openGraph: {
18 | title: process.env.WEBSITE_TITLE,
19 | description: process.env.WEBSITE_DESCRIPTION,
20 | images: [
21 | {
22 | url: "/twitter-banner.png",
23 | width: 1200 ,
24 | height: 675,
25 | }
26 | ],
27 | type: 'website',
28 | locale: 'en_US'
29 | },
30 | twitter: {
31 | card: "summary_large_image",
32 | title: process.env.WEBSITE_TITLE,
33 | description: process.env.WEBSITE_DESCRIPTION,
34 | images: [
35 | {
36 | url: "/twitter-banner.png",
37 | width: 2400,
38 | height: 1350,
39 | }
40 | ]
41 | }
42 | };
43 |
44 | export default function RootLayout({
45 | children,
46 | }: {
47 | children: React.ReactNode;
48 | }) {
49 | return
36 |
39 | Something went wrong
37 |Please try refreshing the page
38 |
24 |
35 |
36 | );
37 | };
38 |
39 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/mint-teth/utils/getSolanaBalance.ts:
--------------------------------------------------------------------------------
1 | import { Connection, PublicKey } from "@solana/web3.js";
2 | import { parseUnits } from "viem";
3 |
4 | const eclipseRpcUrl = process.env.NEXT_PUBLIC_ECLIPSE_RPC;
5 |
6 | export async function getSolanaBalance(userAddress: string, tokenMint: string): Promise
25 | 
26 |
33 |
27 | {thirdpartyBridge.name}
28 |
29 | { thirdpartyBridge.address.split("/")[0] }
30 |
31 |
32 |
19 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/app/mint-tusd/components/MintSummaryCard.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { formatUnits } from "viem";
3 | import "./styles.css";
4 | import { tokenOptions } from "../constants/tokens";
5 |
6 | interface MintSummaryCardProps {
7 | depositAsset: string;
8 | exchangeRate: string;
9 | }
10 |
11 | export function MintSummaryCard({
12 | depositAsset,
13 | exchangeRate,
14 | }: MintSummaryCardProps) {
15 | // Derived values
16 | const depositAssetSymbol = tokenOptions.find(
17 | (token) => token.value === depositAsset,
18 | )?.label;
19 | const tEthValue = exchangeRate
20 | ? 1 / Number(formatUnits(BigInt(exchangeRate), 6))
21 | : 0;
22 | const formattedExchangeRate = `1 ${depositAssetSymbol} = ${tEthValue.toFixed(3)} tUSD`;
23 |
24 | return (
25 |
20 |
28 | {formattedExchangeRate}
21 |
22 |
27 |
23 |
26 | ~5 mins
25 |
29 |
33 | Powered by
30 |Nucleus
32 |
26 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const { withSentryConfig } = require("@sentry/nextjs");
2 |
3 | /** @type {import('next').NextConfig} */
4 | const nextConfig = {
5 | webpack: (config) => {
6 | config.resolve.fallback = {
7 | net: false,
8 | tls: false,
9 | fs: false,
10 | path: require.resolve("path-browserify"),
11 | os: require.resolve("os-browserify/browser"),
12 | stream: require.resolve("stream-browserify"),
13 | child_process: false, // Disable 'child_process'
14 | };
15 | return config;
16 | },
17 | };
18 |
19 | module.exports = withSentryConfig(
20 | nextConfig,
21 | {
22 | // For all available options, see:
23 | // https://github.com/getsentry/sentry-webpack-plugin#options.
24 |
25 | // Suppresses source map uploading logs during build
26 | silent: true,
27 | org: "your-org-name",
28 | project: "your-project-name",
29 | },
30 | {
31 | // For all available options, see:
32 | // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
33 |
34 | // Upload a larger set of source maps for prettier stack traces (increases build time)
35 | widenClientFileUpload: true,
36 |
37 | // Transpiles SDK to be compatible with IE11 (increases bundle size)
38 | transpileClientSDK: true,
39 |
40 | // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
41 | tunnelRoute: "/monitoring",
42 |
43 | // Hides source maps from generated client bundles
44 | hideSourceMaps: true,
45 |
46 | // Automatically tree-shake Sentry logger statements to reduce bundle size
47 | disableLogger: true,
48 | }
49 | );
50 |
--------------------------------------------------------------------------------
/public/token-usdc.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/mint-teth/constants/tokens.ts:
--------------------------------------------------------------------------------
1 | import { Address } from "viem";
2 | import { SelectOption } from "../components/EcSelect";
3 |
4 | export const tokenAddresses: `0x${string}`[] = [
5 | "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2", // WETH
6 | "0xCd5fE23C85820F7B72D0926FC9b05b43E359b7ee", // weETH
7 | "0xbf5495efe5db9ce00f80364c8b423567e58d2110", // ezETH
8 | "0x9Ba021B0a9b958B5E75cE9f6dff97C7eE52cb3E6", // apxETH
9 | "0xFAe103DC9cf190eD75350761e95403b7b8aFa6c0", // rswETH
10 | "0xD9A442856C234a39a81a089C06451EBAa4306a72", // pufETh
11 | ];
12 |
13 | export const tokenOptions: SelectOption[] = [
14 | { value: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2", label: "WETH", imageSrc: "/token-weth.svg" },
15 | { value: "0xCd5fE23C85820F7B72D0926FC9b05b43E359b7ee", label: "weETH", imageSrc: "/token-weeth.svg" },
16 | /*
17 | { value: "0xbf5495efe5db9ce00f80364c8b423567e58d2110", label: "ezETH", imageSrc: "/token-ezeth.svg" },
18 | { value: "0x9Ba021B0a9b958B5E75cE9f6dff97C7eE52cb3E6", label: "apxETH", imageSrc: "/token-apxeth.svg" },
19 | { value: "0xFAe103DC9cf190eD75350761e95403b7b8aFa6c0", label: "rswETH", imageSrc: "/token-rsweth.svg" },
20 | { value: "0xD9A442856C234a39a81a089C06451EBAa4306a72", label: "pufETH", imageSrc: "/token-pufeth.svg" },
21 | */
22 | ];
23 |
24 | export const chainOptions: SelectOption[] = [
25 | { value: "eclipse", label: "Eclipse", imageSrc: "/eclipse.png" },
26 | { value: "ethereum", label: "Ethereum", imageSrc: "/eth.png" },
27 | ];
28 |
29 | // tETH token address on Eclipse
30 | export const tethSvmTokenAddress = "GU7NS9xCwgNPiAdJ69iusFrRfawjDDPjeMBovhV1d4kn";
31 | export const tethEvmTokenAddress = "0x19e099B7aEd41FA52718D780dDA74678113C0b32";
32 |
--------------------------------------------------------------------------------
/app/components/ThirdpartyBridgeModal/ThirdpartyBridgeModalContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useState, useContext, ReactNode } from 'react';
2 |
3 | interface ThirdpartyBridgeModalContextType {
4 | isThirdpartyBridgeModalOpen: boolean;
5 | setIsThirdpartyBridgeModalOpen: React.Dispatch
27 |
37 | 28 | {formattedExchangeRate} 29 |
30 |
31 |
36 |
32 |
35 | ~10 mins
34 |
38 |
42 | Powered by
39 |Nucleus
41 |
54 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/app/hooks/useOnLinkNewWallet.ts:
--------------------------------------------------------------------------------
1 | import { useWalletFilter } from "@/app/hooks/useWalletContext";
2 | import { convertToLinkedWallet } from "@/lib/relay";
3 | import {
4 | useDynamicEvents,
5 | useDynamicModals,
6 | } from "@dynamic-labs/sdk-react-core";
7 | import { LinkedWallet } from "@reservoir0x/relay-kit-ui";
8 | import { RelayChain } from "@reservoir0x/relay-sdk";
9 | import { useState } from "react";
10 |
11 | export const useOnLinkNewWallet = () => {
12 | const { setShowLinkNewWalletModal } = useDynamicModals();
13 | const { setWalletFilter } = useWalletFilter();
14 | const [linkWalletPromise, setLinkWalletPromise] = useState<
15 | | {
16 | resolve: (value: LinkedWallet) => void;
17 | reject: () => void;
18 | params: { chain?: RelayChain; direction: "to" | "from" };
19 | }
20 | | undefined
21 | >();
22 |
23 | useDynamicEvents("walletAdded", (newWallet) => {
24 | if (linkWalletPromise) {
25 | linkWalletPromise.resolve(convertToLinkedWallet(newWallet));
26 | setLinkWalletPromise(undefined);
27 | }
28 | });
29 |
30 | const onLinkNewWallet = ({
31 | chain,
32 | direction,
33 | }: {
34 | chain?: RelayChain;
35 | direction: "to" | "from";
36 | }) => {
37 | if (linkWalletPromise) {
38 | linkWalletPromise.reject();
39 | setLinkWalletPromise(undefined);
40 | }
41 | if (chain?.vmType === "evm") {
42 | setWalletFilter("EVM");
43 | } else if (chain?.id === 792703809) {
44 | setWalletFilter("SOL");
45 | } else if (chain?.id === 8253038) {
46 | setWalletFilter("BTC");
47 | } else if (chain?.id === 9286185) {
48 | setWalletFilter("ECLIPSE");
49 | } else {
50 | setWalletFilter(undefined);
51 | }
52 | const promise = new Promise
55 |
56 | You don't have any {token} on Eclipse right now.
57 |
58 | {tokenBridges[token].text}
59 |
60 |
25 |
55 |
56 |
57 | )}
58 |
59 | );
60 | };
61 |
62 | export default AirdropPopup;
63 |
--------------------------------------------------------------------------------
/public/token-weeth.svg:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/app/mint-teth/utils/sanitizeInput.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Sanitizes the deposit input by enforcing specific formatting rules:
3 | *
4 | * - If the user presses the decimal point with an empty input, the value is set to "0.".
5 | * - If the current deposit amount is "0" and the user enters a number between 1-9,
6 | * the leading zero is removed.
7 | * - The input can be an empty string or a valid number format (digits and an optional decimal point).
8 | * - If the input starts with multiple leading zeros, the current deposit amount is returned unchanged.
9 | * - If the input is cleared, it returns an empty string.
10 | * - If the input is a valid number, it returns the input as a string to preserve decimal places.
11 | * - If none of the conditions are met, the current deposit amount is returned unchanged.
12 | *
13 | * @param val - The new value entered by the user.
14 | * @param currentDepositAmount - The current deposit amount in the input field.
15 | * @returns The sanitized value to be set in the input field.
16 | */
17 | export const sanitizeInput = (val: string, currentDepositAmount: string): string => {
18 | // If the user presses the decimal point with an empty input, set the value to "0."
19 | if (val === ".") {
20 | return "0.";
21 | }
22 |
23 | // Replace single leading zero with the number pressed (if it's between 1-9)
24 | if (currentDepositAmount === "0" && parseInt(val) > 0 && parseInt(val) <= 9) {
25 | return val.replace("0", "");
26 | }
27 |
28 | // Allow the input to be an empty string or a valid number format
29 | if (/^\d*\.?\d*$/.test(val) || val === "") {
30 | // Check if the value has multiple leading zeros
31 | if (/^0\d+/.test(val)) {
32 | return currentDepositAmount; // Do nothing if the value starts with multiple leading zeros
33 | }
34 |
35 | // If the value is empty, return an empty string
36 | if (val === "") {
37 | return ""; // Set to empty string when cleared
38 | } else {
39 | // Convert the value to a number for validation
40 | const numberValue = parseFloat(val);
41 |
42 | // If the value is a valid number, return it
43 | if (!isNaN(numberValue)) {
44 | return val; // Keep the value as a string to maintain decimal places
45 | }
46 | }
47 | }
48 |
49 | return currentDepositAmount; // Return the current value if no changes are made
50 | };
51 |
--------------------------------------------------------------------------------
/app/mint-tusd/utils/sanitizeInput.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Sanitizes the deposit input by enforcing specific formatting rules:
3 | *
4 | * - If the user presses the decimal point with an empty input, the value is set to "0.".
5 | * - If the current deposit amount is "0" and the user enters a number between 1-9,
6 | * the leading zero is removed.
7 | * - The input can be an empty string or a valid number format (digits and an optional decimal point).
8 | * - If the input starts with multiple leading zeros, the current deposit amount is returned unchanged.
9 | * - If the input is cleared, it returns an empty string.
10 | * - If the input is a valid number, it returns the input as a string to preserve decimal places.
11 | * - If none of the conditions are met, the current deposit amount is returned unchanged.
12 | *
13 | * @param val - The new value entered by the user.
14 | * @param currentDepositAmount - The current deposit amount in the input field.
15 | * @returns The sanitized value to be set in the input field.
16 | */
17 | export const sanitizeInput = (val: string, currentDepositAmount: string): string => {
18 | // If the user presses the decimal point with an empty input, set the value to "0."
19 | if (val === ".") {
20 | return "0.";
21 | }
22 |
23 | // Replace single leading zero with the number pressed (if it's between 1-9)
24 | if (currentDepositAmount === "0" && parseInt(val) > 0 && parseInt(val) <= 9) {
25 | return val.replace("0", "");
26 | }
27 |
28 | // Allow the input to be an empty string or a valid number format
29 | if (/^\d*\.?\d*$/.test(val) || val === "") {
30 | // Check if the value has multiple leading zeros
31 | if (/^0\d+/.test(val)) {
32 | return currentDepositAmount; // Do nothing if the value starts with multiple leading zeros
33 | }
34 |
35 | // If the value is empty, return an empty string
36 | if (val === "") {
37 | return ""; // Set to empty string when cleared
38 | } else {
39 | // Convert the value to a number for validation
40 | const numberValue = parseFloat(val);
41 |
42 | // If the value is a valid number, return it
43 | if (!isNaN(numberValue)) {
44 | return val; // Keep the value as a string to maintain decimal places
45 | }
46 | }
47 | }
48 |
49 | return currentDepositAmount; // Return the current value if no changes are made
50 | };
51 |
--------------------------------------------------------------------------------
/app/components/Deposit/LrtPopup.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import Link from "next/link";
3 | import { Cross, ArrowUpRight } from "../icons";
4 |
5 | const LrtPopup: React.FC = () => {
6 | const [lrtVisible, setLrtVisible] = useState
26 | 
32 |
51 |
32 |
33 |
34 | $ES Airdrop is Live!
35 |
36 |
37 |
50 |
38 |
44 | Claim Now
45 |
46 |
48 |
49 |
52 |
54 |
25 |
61 |
62 |
63 | )}
64 |
65 | );
66 | };
67 |
68 | export default LrtPopup;
69 |
--------------------------------------------------------------------------------
/app/providers/RelayKitProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { MAINNET_RELAY_API, RelayChain } from "@reservoir0x/relay-sdk";
3 | import {
4 | RelayKitProvider as _RelayKitProvider,
5 | RelayKitTheme,
6 | } from "@reservoir0x/relay-kit-ui";
7 | import { type ReactNode } from "react";
8 | const theme: RelayKitTheme = {
9 | font: "var(--font-ibm-pex-sans)",
10 | primaryColor: "rgb(161, 254, 160)",
11 | focusColor: "rgb(161, 254, 160)",
12 | text: {
13 | default: "#fff",
14 | subtle: "rgba(255, 255, 255, 0.3)",
15 | },
16 | buttons: {
17 | disabled: {
18 | color: "#5a5a5a",
19 | background: "#0e0e0e",
20 | },
21 | primary: {
22 | color: "#000",
23 | background: "rgb(163, 255, 165)",
24 | hover: {
25 | color: "#000",
26 | background: "rgb(116, 255, 113)",
27 | },
28 | },
29 | secondary: {
30 | color: "#fff",
31 | background: "rgb(28, 28, 28)",
32 | hover: {
33 | color: "#fff",
34 | background: "rgb(35, 35, 35)",
35 | },
36 | },
37 | },
38 | anchor: {
39 | color: "rgba(255, 255, 255, 0.3)",
40 | hover: {
41 | color: "rgba(255, 255, 255, 0.6)",
42 | },
43 | },
44 | widget: {
45 | swapCurrencyButtonBorderColor: "rgba(30, 30, 30, 1)",
46 | swapCurrencyButtonBorderRadius: "100%",
47 | swapCurrencyButtonBorderWidth: "1px",
48 | background: "rgba(13, 13, 13, 1)",
49 | borderRadius: "10",
50 | card: {
51 | border: "1px solid rgba(255, 255, 255, 0.1)",
52 | borderRadius: "10px",
53 | gutter: "20px",
54 | },
55 | },
56 | };
57 | export const RelayKitProvider = (props: {
58 | children: ReactNode;
59 | chains: RelayChain[];
60 | }) => {
61 | return (
62 | <_RelayKitProvider
63 | options={{
64 | baseApiUrl: MAINNET_RELAY_API,
65 | chains: props.chains,
66 | pollingInterval: 3000,
67 | logLevel: 4,
68 | disablePoweredByReservoir: true,
69 | source: "bridge.eclipse.xyz",
70 | duneConfig: {
71 | apiKey: process.env.NEXT_PUBLIC_DUNE_API_KEY,
72 | },
73 | vmConnectorKeyOverrides: {
74 | 9286185: [
75 | "backpacksol",
76 | "nightlysol",
77 | "okxsolana",
78 | "bybitwalletsol",
79 | "bitgetwalletsol",
80 | "fordefisol",
81 | "gatewalletsol"
82 | ],
83 | },
84 | }}
85 | theme={theme}
86 | >
87 | {props.children}
88 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/lib/relay.ts:
--------------------------------------------------------------------------------
1 | import { RelayChain } from "@reservoir0x/relay-sdk";
2 | import { GenericNetwork } from "@dynamic-labs/types";
3 | import { Wallet } from "@dynamic-labs/sdk-react-core";
4 | import { LinkedWallet } from "@reservoir0x/relay-kit-ui";
5 |
6 | const extractWalletIcon = (wallet: Wallet) => {
7 | const dynamicStaticAssetUrl =
8 | "https://iconic.dynamic-static-assets.com/icons/sprite.svg";
9 | //@ts-ignore
10 | const walletBook = wallet?.connector?.walletBook?.wallets;
11 | let walletLogoId =
12 | // @ts-ignore
13 | (wallet?.connector?.wallet?.brand?.spriteId ??
14 | (walletBook &&
15 | wallet.key &&
16 | walletBook[wallet.key] &&
17 | walletBook[wallet.key].brand &&
18 | walletBook[wallet.key].brand.spriteId))
19 | ? walletBook[wallet.key].brand.spriteId
20 | : undefined;
21 |
22 | // @ts-ignore
23 | let walletIcon = wallet?.connector?.wallet?.icon;
24 |
25 | if (walletLogoId) {
26 | return `${dynamicStaticAssetUrl}#${walletLogoId}`;
27 | } else if (walletIcon) {
28 | return walletIcon;
29 | } else {
30 | return undefined;
31 | }
32 | };
33 |
34 | export const convertRelayChainToDynamicNetwork = (
35 | chain: RelayChain,
36 | ): GenericNetwork => {
37 | return {
38 | blockExplorerUrls: [chain.explorerUrl ?? "https://etherscan.io"],
39 | chainId: chain.id,
40 | chainName: chain.name,
41 | iconUrls:
42 | chain.icon?.light || chain.icon?.dark
43 | ? [chain.icon?.light ?? "", chain.icon?.dark ?? ""]
44 | : [],
45 | name: chain.name,
46 | nativeCurrency: {
47 | decimals: chain.currency?.decimals ?? 18,
48 | name: chain.currency?.name ?? "ETH",
49 | symbol: chain.currency?.symbol ?? "ETH",
50 | },
51 | networkId: chain.id,
52 | rpcUrls: chain.httpRpcUrl ? [chain.httpRpcUrl] : [],
53 | vanityName: chain.displayName,
54 | key: chain.name,
55 | isTestnet: false,
56 | };
57 | };
58 |
59 | export const convertToLinkedWallet = (wallet: Wallet): LinkedWallet => {
60 | const walletIcon = extractWalletIcon(wallet);
61 | let walletChain = wallet.chain.toLowerCase();
62 | let vmType: "evm" | "svm" | "bvm" = "evm";
63 |
64 | if (walletChain === "sol" || walletChain === "eclipse") {
65 | vmType = "svm";
66 | } else if (walletChain === "btc") {
67 | vmType = "bvm";
68 | }
69 |
70 | const address =
71 | wallet.additionalAddresses.find((address) => address.type !== "ordinals")
72 | ?.address ?? wallet.address;
73 |
74 | return {
75 | address,
76 | walletLogoUrl: walletIcon,
77 | vmType,
78 | connector: wallet.connector.key,
79 | };
80 | };
81 |
--------------------------------------------------------------------------------
/app/mint-tusd/components/MintAndRedeem.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import { useState } from "react";
3 | import { Mint } from "./Mint";
4 | import { Redeem } from "./Redeem";
5 | import "./styles.css";
6 | import { NucleusActivityContent } from "./NucleusActivityContent";
7 | import { Activity } from "@/app/components/icons";
8 | import { useTransactions } from "../hooks/useTransactions";
9 |
10 | export enum Tabs {
11 | Mint,
12 | Redeem,
13 | Activity,
14 | }
15 |
16 | function MintAndRedeem() {
17 | const [activeTab, setActiveTab] = useState
26 |
30 | Deposit your LRTs to earn restaked yield
31 |
32 |
33 |
46 |
34 |
40 | Deposit Now
41 |
42 |
44 |
45 |
47 | 
52 |
53 |
54 |
55 |
56 |
57 |
52 |
58 |
60 |
23 |
72 |
73 | );
74 | }
75 |
76 | export default MintAndRedeem;
77 |
--------------------------------------------------------------------------------
/app/mint-teth/components/MintAndRedeem.tsx:
--------------------------------------------------------------------------------
1 | import classNames from "classnames";
2 | import { useState } from "react";
3 | import { Mint } from "./Mint";
4 | import { Redeem } from "./Redeem";
5 | import "./styles.css";
6 | import { NucleusActivityContent } from "./NucleusActivityContent";
7 | import { Activity } from "@/app/components/icons";
8 | import { useTransactions } from "../hooks/useTransactions";
9 |
10 | export enum Tabs {
11 | Mint,
12 | Redeem,
13 | Activity,
14 | }
15 |
16 | function MintAndRedeem() {
17 | const [activeTab, setActiveTab] = useState
24 |
71 |
25 |
70 |
26 |
61 | {activeTab === Tabs.Mint && setActiveTab(Tabs.Mint)}
33 | >
34 | Mint
35 |
36 | setActiveTab(Tabs.Redeem)}
43 | >
44 | Redeem
45 |
46 | {
55 | setActiveTab(Tabs.Activity);
56 | }}
57 | >
58 |
60 |
23 |
73 |
74 | );
75 | }
76 |
77 | export default MintAndRedeem;
78 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eclipse-bridge",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "NODE_OPTIONS='--max-old-space-size=4096' next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "typecheck": "tsc --noEmit --incremental --watch"
11 | },
12 | "resolutions": {
13 | "@solana/web3.js": "1.98.0"
14 | },
15 | "dependencies": {
16 | "@coral-xyz/anchor": "0.30.1",
17 | "@dynamic-labs/bitcoin": "4.8.2",
18 | "@dynamic-labs/eclipse": "4.8.2",
19 | "@dynamic-labs/ethereum": "4.8.2",
20 | "@dynamic-labs/ethereum-core": "4.8.2",
21 | "@dynamic-labs/ethers-v5": "^2.6.2",
22 | "@dynamic-labs/sdk-react-core": "4.8.2",
23 | "@dynamic-labs/solana": "4.8.2",
24 | "@dynamic-labs/utils": "4.8.2",
25 | "@dynamic-labs/solana-core": "4.8.2",
26 | "@dynamic-labs/wagmi-connector": "4.8.2",
27 | "@dynamic-labs/wallet-book": "4.8.2",
28 | "@dynamic-labs/wallet-connector-core": "4.8.2",
29 | "@hyperlane-xyz/registry": "15.3.0",
30 | "@hyperlane-xyz/sdk": "^8.6.1",
31 | "@project-serum/anchor": "^0.26.0",
32 | "@reservoir0x/relay-bitcoin-wallet-adapter": "^1.0.7",
33 | "@reservoir0x/relay-kit-hooks": "1.9.2",
34 | "@reservoir0x/relay-kit-ui": "2.10.11",
35 | "@reservoir0x/relay-sdk": "1.6.15",
36 | "@reservoir0x/relay-svm-wallet-adapter": "4.0.15",
37 | "@sentry/nextjs": "^9.12.0",
38 | "@sentry/replay": "^7.116.0",
39 | "@solana/spl-token": "^0.4.9",
40 | "@solana/web3.js": "1.98.0",
41 | "@tanstack/react-query": "^5.51.21",
42 | "@types/node": "20.8.7",
43 | "@types/react": "18.2.21",
44 | "@types/react-dom": "18.2.7",
45 | "autoprefixer": "10.4.15",
46 | "classnames": "^2.5.1",
47 | "decimal.js": "^10.4.3",
48 | "encoding": "^0.1.13",
49 | "eslint": "8.51.0",
50 | "eslint-config-next": "13.5.6",
51 | "ethers": "^5.7.2",
52 | "framer-motion": "^11.11.8",
53 | "history": "^5.3.0",
54 | "lossless-json": "^4.0.2",
55 | "motion-number": "^0.1.7",
56 | "next": "^15.2.4",
57 | "os-browserify": "^0.3.0",
58 | "path-browserify": "^1.0.1",
59 | "permissionless": "^0.2.26",
60 | "pino-pretty": "^11.2.2",
61 | "postcss": "8.4.31",
62 | "react": "18.2.0",
63 | "react-dom": "18.2.0",
64 | "react-loading-skeleton": "^3.4.0",
65 | "react-router-dom": "^7.1.1",
66 | "react-toastify": "^10.0.6",
67 | "stream-browserify": "^3.0.0",
68 | "tailwind-merge": "^2.5.5",
69 | "tailwindcss": "3.3.3",
70 | "typescript": "5.2.2",
71 | "viem": "^2.21.10",
72 | "wagmi": "^2.9.8"
73 | },
74 | "devDependencies": {
75 | "postcss-nesting": "^13.0.1"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/app/components/icons/sidebar-icons/scan.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const ScanIcon = () => {
4 | return (
5 |
16 | );
17 | };
18 |
19 | export default ScanIcon;
20 |
--------------------------------------------------------------------------------
/app/providers/wagmiProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { ReactNode, useEffect, useState } from "react";
3 | import { http, HttpTransport } from "viem";
4 | import { WagmiProvider as _WagmiProvider, Config, createConfig } from "wagmi";
5 | import { Chain, mainnet } from "wagmi/chains";
6 | import { queryRelayChains } from "@reservoir0x/relay-kit-hooks";
7 | import {
8 | configureViemChain,
9 | convertViemChainToRelayChain,
10 | MAINNET_RELAY_API,
11 | RelayChain,
12 | } from "@reservoir0x/relay-sdk";
13 | export type ChildrenProps = {
14 | chains: RelayChain[];
15 | };
16 | type WagmiProviderProps = {
17 | children: (props: ChildrenProps) => ReactNode;
18 | };
19 |
20 | const { wagmiConfig: defaultConfig } = createWagmiConfig([mainnet]);
21 |
22 | export const WagmiProvider = (props: WagmiProviderProps) => {
23 | const [config, setConfig] = useState
24 |
72 |
25 |
71 |
26 |
62 | {activeTab === Tabs.Mint && setActiveTab(Tabs.Mint)}
33 | >
34 | Mint
35 |
36 | setActiveTab(Tabs.Redeem)}
43 | >
44 | Redeem
45 |
46 | {
56 | setActiveTab(Tabs.Activity);
57 | }}
58 | >
59 |
61 |
31 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/app/components/Deposit/activity.css:
--------------------------------------------------------------------------------
1 | .activity-container {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 8px;
5 | font-weight: 500;
6 | width: 100%;
7 | height: 364px;
8 | overflow-y: scroll;
9 | scrollbar-width: thin;
10 | scrollbar-color: rgba(33, 33, 33, 1) rgba(255, 255, 255, 0);
11 |
12 | padding-right: 12px;
13 | }
14 |
15 | .deposit-transaction {
16 | padding: 16px 15px 16px 15px;
17 | width: 100%;
18 | height: 85px;
19 |
20 | border: 1px solid rgba(255, 255, 255, 0.1);
21 | border-radius: 10px;
22 | background: rgba(255, 255, 255, 0.03);
23 | transition: background 100ms var(--ease-out-quad);
24 | span::first-letter {
25 | text-transform: uppercase;
26 | }
27 | }
28 |
29 | .deposit-transaction:hover {
30 | background: rgba(255, 255, 255, 0.04);
31 | cursor: pointer;
32 | }
33 |
34 | .white-in {
35 | font-size: 20px;
36 | color: white;
37 | line-height: 26px;
38 | }
39 |
40 | .gray-in {
41 | color: rgba(85, 85, 85, 1);
42 | font-size: 16px;
43 | line-height: 20.8px;
44 | }
45 |
46 | .status-div {
47 | padding: 3px 8px 3px 5px;
48 | gap: 6px;
49 | border-radius: 13px;
50 | font-size: 12px;
51 | }
52 |
53 | .status-div.failed,
54 | .status-div.canceled {
55 | background: rgba(235, 77, 77, 0.05);
56 | color: rgba(235, 77, 77, 1);
57 | }
58 |
59 | .status-div.loading,
60 | .status-div.pending {
61 | background: rgba(255, 255, 255, 0.05);
62 | color: rgba(255, 255, 255, 0.3);
63 | svg {
64 | width: 16px;
65 | }
66 | }
67 |
68 | .status-div.completed,
69 | .status-div.fulfilled {
70 | background: rgba(161, 254, 160, 0.05);
71 | color: rgba(161, 254, 160, 1);
72 | }
73 |
74 | .status-overlay {
75 | position: absolute;
76 | top: 0;
77 | left: 0;
78 | width: 100%;
79 | height: 100%;
80 | transition: opacity 300ms var(--ease-out-quad);
81 | backdrop-filter: blur(3px);
82 | z-index: 1;
83 | opacity: 0;
84 | pointer-events: none;
85 | }
86 |
87 | .status-overlay.active {
88 | z-index: 1;
89 | opacity: 1;
90 | }
91 |
92 | @media (max-width: 500px) {
93 | .white-in {
94 | font-size: 16px;
95 | }
96 | .gray-in {
97 | font-size: 14px;
98 | }
99 | .status-div span {
100 | font-size: 10px;
101 | }
102 | .eth-to-ecl {
103 | gap: 8px !important;
104 | }
105 | .tx-age {
106 | gap: 4px;
107 | }
108 | .deposit-transaction {
109 | padding: 12px 10px 12px 10px;
110 | }
111 | .deposit-transaction img {
112 | width: 39px !important;
113 | height: 39px !important;
114 | }
115 | }
116 |
117 | @keyframes bounce {
118 | 0% {
119 | transform: translateY(-10px);
120 | }
121 | 50% {
122 | transform: translateY(5px);
123 | }
124 | 100% {
125 | transform: translateY(0);
126 | }
127 | }
128 |
129 | .deposit-transaction .preserve-casing::first-letter {
130 | text-transform: none;
131 | }
132 |
--------------------------------------------------------------------------------
/app/mint-tusd/components/RedeemSummaryCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { tokenOptions } from "../constants/tokens";
3 | import { formatUnits } from "viem";
4 | import Image from "next/image";
5 | import "./styles.css";
6 | import { Tooltip } from "./Tooltip";
7 |
8 | interface RedeemSummaryCardProps {
9 | depositAsset: string;
10 | exchangeRate: string;
11 | withdrawFee: string;
12 | totalFees: string;
13 | bridgeFee: string;
14 | slippage: string;
15 | }
16 |
17 | export function RedeemSummaryCard({
18 | depositAsset,
19 | exchangeRate,
20 | withdrawFee,
21 | totalFees,
22 | bridgeFee,
23 | slippage,
24 | }: RedeemSummaryCardProps) {
25 | const depositAssetSymbol = tokenOptions.find(
26 | (token) => token.value === depositAsset,
27 | )?.label;
28 | const tEthValue = exchangeRate
29 | ? 1 / Number(formatUnits(BigInt(exchangeRate), 6))
30 | : 0;
31 | const formattedExchangeRate = `1 ${depositAssetSymbol} = ${tEthValue.toFixed(3)} tUSD`;
32 |
33 | return (
34 |
32 |
61 |
33 |
35 | {formattedExchangeRate}
34 |
36 |
39 | Total Cost
37 |{totalFees}
38 |
40 |
43 | Slippage
41 |
44 |
46 | {(parseFloat(slippage) * 100).toFixed(2)}%
45 |
47 |
50 | Bridge Fee
48 |
51 |
53 | {bridgeFee}
52 |
54 |
57 | Deadline
55 |
58 |
60 | 7 Days
59 |
62 |
66 | Powered by
63 |Nucleus
65 |
35 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/app/mint-tusd/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { NetworkProvider } from "@/app/contexts/NetworkContext";
3 | import { useSidebar } from "@/app/contexts/SidebarContext";
4 | import useEthereumData from "@/lib/ethUtils";
5 | import { useState } from "react";
6 | import { SkeletonTheme } from "react-loading-skeleton";
7 | import { Footer } from "../components/Footer";
8 | import { Header } from "../components/Header";
9 | import { TosClickwrap } from "../components/TosClickwrap";
10 | import MintAndRedeem from "./components/MintAndRedeem";
11 | import { Sidebar } from "../components/Sidebar";
12 | import { TransactionProvider } from "../components/TransactionPool";
13 | import { EthereumDataContext, WalletClientContext } from "../context";
14 | import { useWalletClient } from "../hooks";
15 | import { Options } from "@/lib/networkUtils";
16 | import { ToastContainer } from "react-toastify";
17 |
18 | import "react-toastify/dist/ReactToastify.min.css";
19 |
20 | export default function Main() {
21 | const { isSidebar, setIsSidebar } = useSidebar();
22 | const [selectedOption, setSelectedOption] = useState(Options.Mainnet);
23 | const { gasPrice, ethPrice, blockNumber } = useEthereumData(selectedOption);
24 | const walletClient = useWalletClient();
25 |
26 | return (
27 |
36 |
67 |
37 |
39 | {formattedExchangeRate}
38 |
40 |
43 | Total Cost
41 |{totalFees}
42 |
44 |
47 | Slippage
45 |
48 |
52 | 49 | {(parseFloat(slippage) * 100).toFixed(2)}% 50 |
51 |
53 |
56 | Bridge Fee
54 |
57 |
59 | {bridgeFee}
58 |
60 |
63 | Deadline
61 |
64 |
66 | 7 Days
65 |
68 |
72 | Powered by
69 |Nucleus
71 |
41 |
53 |
41 |
53 |
44 |
51 |
52 |
46 |
50 |
47 |
49 |
25 |
75 |
76 | )}
77 |
78 | );
79 | };
80 |
81 | export default TapPopup;
82 |
--------------------------------------------------------------------------------
/app/mint-tusd/abis/WarpRouteContract.json:
--------------------------------------------------------------------------------
1 | {
2 | "abi": [
3 | {
4 | "inputs": [
5 | {
6 | "internalType": "contract TellerWithMultiAssetSupport",
7 | "name": "_teller",
8 | "type": "address"
9 | },
10 | {
11 | "internalType": "contract WarpRoute",
12 | "name": "_warpRoute",
13 | "type": "address"
14 | },
15 | {
16 | "internalType": "uint32",
17 | "name": "_destination",
18 | "type": "uint32"
19 | }
20 | ],
21 | "stateMutability": "nonpayable",
22 | "type": "constructor"
23 | },
24 | {
25 | "inputs": [],
26 | "name": "InvalidDestination",
27 | "type": "error"
28 | },
29 | {
30 | "inputs": [],
31 | "name": "boringVault",
32 | "outputs": [
33 | {
34 | "internalType": "contract BoringVault",
35 | "name": "",
36 | "type": "address"
37 | }
38 | ],
39 | "stateMutability": "view",
40 | "type": "function"
41 | },
42 | {
43 | "inputs": [
44 | {
45 | "internalType": "contract ERC20",
46 | "name": "depositAsset",
47 | "type": "address"
48 | },
49 | {
50 | "internalType": "uint256",
51 | "name": "depositAmount",
52 | "type": "uint256"
53 | },
54 | {
55 | "internalType": "uint256",
56 | "name": "minimumMint",
57 | "type": "uint256"
58 | },
59 | {
60 | "internalType": "bytes32",
61 | "name": "recipient",
62 | "type": "bytes32"
63 | }
64 | ],
65 | "name": "depositAndBridge",
66 | "outputs": [
67 | {
68 | "internalType": "uint256",
69 | "name": "sharesMinted",
70 | "type": "uint256"
71 | },
72 | {
73 | "internalType": "bytes32",
74 | "name": "messageId",
75 | "type": "bytes32"
76 | }
77 | ],
78 | "stateMutability": "payable",
79 | "type": "function"
80 | },
81 | {
82 | "inputs": [],
83 | "name": "destination",
84 | "outputs": [
85 | {
86 | "internalType": "uint32",
87 | "name": "",
88 | "type": "uint32"
89 | }
90 | ],
91 | "stateMutability": "view",
92 | "type": "function"
93 | },
94 | {
95 | "inputs": [],
96 | "name": "teller",
97 | "outputs": [
98 | {
99 | "internalType": "contract TellerWithMultiAssetSupport",
100 | "name": "",
101 | "type": "address"
102 | }
103 | ],
104 | "stateMutability": "view",
105 | "type": "function"
106 | },
107 | {
108 | "inputs": [],
109 | "name": "warpRoute",
110 | "outputs": [
111 | {
112 | "internalType": "contract WarpRoute",
113 | "name": "",
114 | "type": "address"
115 | }
116 | ],
117 | "stateMutability": "view",
118 | "type": "function"
119 | }
120 | ]
121 | }
122 |
--------------------------------------------------------------------------------
/app/components/GasStation/SelectToken.tsx:
--------------------------------------------------------------------------------
1 | import { Cross, WalletIcon, CircleCheck } from "../icons";
2 | import { useTransactionManager, Token } from "./TokenManager"
3 | import { useSidebar } from "@/app/contexts/SidebarContext";
4 |
5 |
6 | const TokenItem: React.FC<{ token: Token, selectedToken: Token, onClick: () => void}> = ({ token, selectedToken, onClick }) => {
7 | return (
8 |
26 |
32 | Bridge Now To
33 |
34 |
40 |
59 |
41 | 
43 |
44 |
45 |
46 | Grow Grass
42 |
43 |
47 |
53 | Start Tapping
54 |
55 |
57 |
58 |
60 | 
65 | 
70 |
71 |
65 |
70 |
72 |
74 |
9 |
27 | );
28 | }
29 |
30 | export const SelectToken: React.FC<{
31 | setSelectModal: React.Dispatch
10 | 
11 |
16 |
17 |
12 | { token.symbol }
13 | { token.name }
14 |
15 |
18 |
25 |
26 |
40 |
61 | );
62 | }
63 |
64 |
65 | export default SelectToken;
66 |
--------------------------------------------------------------------------------
/app/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Skeleton from "react-loading-skeleton";
3 | import MotionNumber from "motion-number";
4 | import { Block, Eth, Gas } from "../icons";
5 | import { EthereumDataContext } from "@/app/context";
6 | import { useContext } from "react";
7 |
8 | export function Footer() {
9 | const [gasPrice, ethPrice, blockNumber] = useContext(EthereumDataContext) ?? [
10 | null,
11 | null,
12 | null,
13 | ];
14 |
15 | return (
16 |
96 | );
97 | }
98 |
--------------------------------------------------------------------------------
/app/components/GasStation/AboutGasStation.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSidebar } from "@/app/contexts/SidebarContext";
3 | import classNames from "classnames";
4 | import { Cross } from "../icons";
5 | import { WarningComponent } from "@/app/components/WarningComponent";
6 | import Image from "next/image";
7 |
8 | export interface AboutGasStationProps {
9 | closeModal: () => void;
10 | isOpen: boolean;
11 | }
12 |
13 | export const AboutGasStationComponent: React.FC
41 |
60 |
42 |
43 | Choose token to pay with
44 |
46 | { setSelectModal(false) }}>
45 |
47 | {Object.keys(tokens).map((key) => {
48 | const token = tokens[key];
49 | return (
50 | { setSelectedToken(token); setSelectModal(false) }}
55 | />
56 | );
57 | })}
58 |
59 |
40 | {/* Modal content */}
41 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/app/mint-teth/components/EcSelect.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from "react";
2 | import Image from "next/image";
3 |
4 | export interface SelectOption {
5 | value: string;
6 | label: string;
7 | imageSrc: string;
8 | }
9 |
10 | interface TokenSelectProps {
11 | options: SelectOption[] | undefined;
12 | selected: SelectOption | undefined;
13 | disabled?: boolean;
14 | onChange: (val: SelectOption) => void;
15 | smallText?: boolean;
16 | }
17 |
18 | // Eclipse Select
19 | export function EcSelect({ options, selected, disabled, onChange, smallText }: TokenSelectProps) {
20 | const [isOpen, setIsOpen] = useState(false);
21 |
22 | const dropdownRef = useRef e.stopPropagation()}
50 | ref={modalRef}
51 | >
52 |
87 |
53 |
54 |
55 | About Gas Station
56 |
57 |
63 |
64 |
65 |
66 |
86 |
67 |
Swap your tokens on Eclipse (like SOL, USDC, or tETH) for 77 | ETH to power your transactions. 78 | 79 |
80 | Swap your tokens on Eclipse (like SOL, USDC, or tETH) for 77 | ETH to power your transactions. 78 | 79 |
46 |
84 |
85 | {isOpen && options?.length && (
86 |
98 | );
99 | }
100 |
--------------------------------------------------------------------------------
/app/mint-tusd/components/EcSelect.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from "react";
2 | import Image from "next/image";
3 |
4 | export interface SelectOption {
5 | value: string;
6 | label: string;
7 | imageSrc: string;
8 | }
9 |
10 | interface TokenSelectProps {
11 | options: SelectOption[] | undefined;
12 | selected: SelectOption | undefined;
13 | disabled?: boolean;
14 | onChange: (val: SelectOption) => void;
15 | smallText?: boolean;
16 | }
17 |
18 | // Eclipse Select
19 | export function EcSelect({ options, selected, disabled, onChange, smallText }: TokenSelectProps) {
20 | const [isOpen, setIsOpen] = useState(false);
21 |
22 | const dropdownRef = useRef
87 |
96 | )}
97 |
88 | {options.map((option) => (
89 |
93 | ))}
94 |
95 |
46 |
84 |
85 | {isOpen && options?.length && (
86 |
98 | );
99 | }
100 |
--------------------------------------------------------------------------------
/lib/ethUtils.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { Options, toOptionsLower } from './networkUtils';
3 |
4 | interface IEthereumData {
5 | blockNumber: number | null;
6 | gasPrice: number | null;
7 | ethPrice: number | null;
8 | }
9 |
10 | const CACHE_EXPIRATION_MS = 10000; // Cache expiration time (30 sec)
11 |
12 | let cache: IEthereumData & { timestamp: number | null } = {
13 | blockNumber: null,
14 | gasPrice: null,
15 | ethPrice: null,
16 | timestamp: null,
17 | };
18 |
19 | const useEthereumData = (chain: Options) => {
20 | const [blockNumber, setBlockNumber] = useState
87 |
96 | )}
97 |
88 | {options.map((option) => (
89 |
93 | ))}
94 |
95 |
47 |
69 |
54 |
67 |
68 |
62 |
66 |
63 |
65 |
45 |
59 |
49 |
57 |
58 |
51 |
56 |
52 |
54 |
55 | 54 |