(initialValue);
+
+export function EnvProvider({
+ env,
+ children,
+}: PropsWithChildren<{ env: Env }>) {
+ const value = useMemo(() => {
+ return {
+ heliusApiKey: env.heliusApiKey,
+ protocolProgramIdPubkey: env.protocolProgramIdPubkey,
+ nonceAuthorityAccountSecretKey: env.nonceAuthorityAccountSecretKey,
+ nonceAuthorityAccountPubkey: env.nonceAuthorityAccountPubkey,
+ nonceAccountPubkey: env.nonceAccountPubkey,
+ nonceAccountSecretKey: env.nonceAccountSecretKey,
+ };
+ }, [env]);
+
+ return {children};
+}
+
+export const useEnv = () => {
+ const context = useContext(EnvContext);
+
+ if (context === undefined) {
+ throw new Error("useEnv must be used within a EnvProvider");
+ }
+
+ return context;
+};
diff --git a/src/components/layout/SwapWidget.tsx b/src/components/layout/SwapWidget.tsx
new file mode 100644
index 0000000..cf06e91
--- /dev/null
+++ b/src/components/layout/SwapWidget.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Fragment, useState } from "react";
+
+import LimitForm from "../trade/limit/LimitForm";
+import SwapTradeForm from "../trade/swap/SwapTradeForm";
+import TransactionMessage from "../utils/TransactionMessage";
+import WidgetTabs from "../trade/WidgetTabs";
+import WidgetTitle from "../trade/WidgetTitle";
+import { useSwap } from "../trade/swap/SwapProvider";
+
+export default function SwapWidget() {
+ const [typeSelected, setTypeSelected] = useState<"market" | "limit">("limit");
+
+ const { orderStatus, setOrderStatus, errorMessage, solscanUrl, resetAll } =
+ useSwap();
+
+ return (
+
+
+
+ {orderStatus === "INCOMPLETE" && (
+
+ )}
+
+ {["INCOMPLETE", "PENDING"].includes(orderStatus) && (
+
+ {typeSelected === "market" && }
+ {typeSelected === "limit" && }
+
+ )}
+
+ {orderStatus === "SUBMITED" && (
+ {
+ setOrderStatus("INCOMPLETE");
+ }}
+ />
+ )}
+
+ {orderStatus === "ERROR" && (
+ {
+ resetAll();
+ setOrderStatus("INCOMPLETE");
+ }}
+ />
+ )}
+
+
+
+ urani swap
+
+
+
+
+
+ Toxic-MEV minimization at the application layer.
+
+
+
+
+
+ Cannot wait?
+
+
+
+ Become an MEV Agent operator
+
+
+
+ and get earlier private access.
+
+
+
+
+ );
+}
diff --git a/src/components/trade/TokenSelector.tsx b/src/components/trade/TokenSelector.tsx
new file mode 100644
index 0000000..497f729
--- /dev/null
+++ b/src/components/trade/TokenSelector.tsx
@@ -0,0 +1,69 @@
+import { NumberInput } from "@mantine/core";
+import { Token } from "@/lib/interfaces/tokensList";
+import TokenListModal from "./token-list-modal/TokenListModal";
+import TokenSelectorButton from "./TokenSelectorButton";
+import { useDisclosure } from "@mantine/hooks";
+
+interface TokenSelectorProps {
+ inputValue: string | number;
+ setInputValue: (value: string | number) => void;
+ selectedToken: Token | null;
+ setSelectedToken: (token: Token) => void;
+ tokenToUSDPrice?: number | null;
+ label?: string;
+}
+
+export default function TokenSelector({
+ inputValue,
+ setInputValue,
+ selectedToken,
+ setSelectedToken,
+ tokenToUSDPrice,
+ label,
+}: TokenSelectorProps) {
+ const [opened, { open, close }] = useDisclosure(false);
+
+ const convertedToUSD =
+ tokenToUSDPrice &&
+ inputValue &&
+ (Number(inputValue || 0) * tokenToUSDPrice).toFixed(2);
+
+ return (
+ <>
+
+
+ }
+ hideControls
+ size="xl"
+ value={inputValue}
+ onChange={setInputValue}
+ placeholder="0.00"
+ classNames={{
+ label: "ml-4 mt-4 text-sm font-bold text-purple",
+ section: "ml-2 md:ml-4 w-auto -mt-24 sm:-mt-0",
+ input:
+ "text-right text-purple pr-3 rounded-2xl text-xl sm:text-3xl border-0 focus:ring-0 focus:border-0 md:min-h-20 bg-transparent mt-12 sm:mt-0",
+ }}
+ />
+ {convertedToUSD ? (
+
+ ≈ $ {convertedToUSD || 0}
+
+ ) : null}
+
+
+
setSelectedTab("market")}
+ >
+ Market Order
+
+
setSelectedTab("limit")}
+ >
+ Limit Order
+
+
+
+
+ Set to market
+
+ }
+ hideControls
+ size="xl"
+ value={inputValue}
+ onChange={setInputValue}
+ placeholder="0.00"
+ classNames={{
+ section: "-mt-20 md:-mt-24 mr-2 w-auto",
+ label: "ml-4 mt-4 text-sm font-bold text-purple",
+ input:
+ "text-right text-purple pr-3 rounded-2xl text-xl sm:text-3xl border-0 focus:ring-0 focus:border-0 md:min-h-20 bg-transparent relative z-10",
+ }}
+ />
+
+ );
+}
diff --git a/src/components/trade/limit/SelectTime.tsx b/src/components/trade/limit/SelectTime.tsx
new file mode 100644
index 0000000..74c711b
--- /dev/null
+++ b/src/components/trade/limit/SelectTime.tsx
@@ -0,0 +1,44 @@
+import { Select } from "@mantine/core";
+
+const options = [
+ { value: "5|m", label: "5 minutes" },
+ { value: "30|m", label: "30 minutes" },
+ { value: "1|h", label: "1 hour" },
+ { value: "1|d", label: "1 day" },
+ { value: "3|d", label: "3 days" },
+ { value: "7|d", label: "7 days" },
+ { value: "1|M", label: "1 month" },
+];
+
+interface SelectTimeProps {
+ label?: string;
+ setExpireTime: (value: string | null) => void;
+ expireTime: string | null;
+}
+
+export default function SelectTime({
+ label = "Expiry",
+ setExpireTime,
+ expireTime,
+}: SelectTimeProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/trade/orders/TableOrders.tsx b/src/components/trade/orders/TableOrders.tsx
new file mode 100644
index 0000000..f966774
--- /dev/null
+++ b/src/components/trade/orders/TableOrders.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { Fragment, useMemo } from "react";
+import { format, fromUnixTime } from "date-fns";
+import { getDecimals, getSymbol, getTokenIcon, getUiAmount } from "@/lib/utils";
+
+import Image from "next/image";
+import { Skeleton } from "@mantine/core";
+import { Table } from "@mantine/core";
+import { useTokenList } from "@/hooks/useTokenList";
+
+interface OrderIntent {
+ intentId: string;
+ srcToken: string;
+ srcAddress: string;
+ srcAmount: number;
+ dstToken: string;
+ dstAddress: string;
+ minReceived: number;
+ expiration: number;
+ batchId?: string | null;
+ status: string;
+}
+
+interface TableOrdersProps {
+ orders: OrderIntent[];
+ isLoading: boolean;
+}
+
+export default function TableOrders({ orders, isLoading }: TableOrdersProps) {
+ const tokenList = useTokenList(true);
+
+ const rows = useMemo(
+ () =>
+ orders.map(
+ ({
+ intentId,
+ srcToken,
+ srcAmount,
+ dstToken,
+ minReceived,
+ expiration,
+ status,
+ batchId,
+ }) => {
+ return (
+
+
+ {getTokenIcon(srcToken, tokenList) ? (
+
+ ) : null}
+
+ {getUiAmount(
+ srcAmount,
+ getDecimals(srcToken, tokenList) ?? 1,
+ )}
+
+ {getSymbol(srcToken, tokenList)}
+
+
+
+ {getTokenIcon(dstToken, tokenList) ? (
+
+ ) : null}
+
+ {getUiAmount(
+ minReceived,
+ getDecimals(dstToken, tokenList) ?? 1,
+ )}
+
+ {getSymbol(dstToken, tokenList)}
+
+
+
+
+ 1 {getSymbol(srcToken, tokenList)} ={" "}
+ {getUiAmount(
+ minReceived as number,
+ getDecimals(dstToken, tokenList) ?? 1,
+ ) /
+ getUiAmount(
+ srcAmount as number,
+ getDecimals(srcToken, tokenList) ?? 1,
+ )}{" "}
+ {getSymbol(dstToken, tokenList)}
+
+
+
+
+ {format(fromUnixTime(expiration), "MMM dd yyyy HH:mm", {})}
+
+
+
+
+ {status}
+
+
+
+ {!batchId ? null : (
+
+
+ stadium
+
+
+ open_in_new
+
+
+ )}
+
+
+ );
+ },
+ ),
+ [tokenList, orders],
+ );
+
+ return (
+
+
+
+
+
+ Sell
+ Receive
+ Limit Price
+ Expiration
+ Status
+ Arena
+
+
+ {orders.length && !isLoading ? (
+ {rows}
+ ) : null}
+
+
+ {isLoading &&
+ Array.from({ length: 6 }).map((_, index) => (
+
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/trade/swap/AdditionalInfo.tsx b/src/components/trade/swap/AdditionalInfo.tsx
new file mode 100644
index 0000000..28568b6
--- /dev/null
+++ b/src/components/trade/swap/AdditionalInfo.tsx
@@ -0,0 +1,37 @@
+import { Token } from "@/lib/interfaces/tokensList";
+
+interface AdditionalInfoProps {
+ sellToken?: Token | null;
+ buyToken?: Token | null;
+ sellingTokenToBuyingToken?: number;
+ sellingTokenToUSD?: number | null;
+ isDolarInfo?: boolean;
+ slippage?: number;
+}
+
+export default function AdditionalInfo({
+ sellToken,
+ buyToken,
+ sellingTokenToBuyingToken,
+ sellingTokenToUSD,
+ slippage,
+}: AdditionalInfoProps) {
+ return (
+ <>
+ {sellingTokenToBuyingToken && (
+
+ 1 {sellToken?.symbol} = {sellingTokenToBuyingToken.toFixed(2)}{" "}
+ {buyToken?.symbol} ($ {sellingTokenToUSD?.toFixed(2)})
+
+ )}
+ {slippage && (
+
+ Slippage: {slippage}%
+
+ )}
+
+ Fee (0.0%) - (Alpha)
+
+
+ );
+}
diff --git a/src/components/trade/swap/SubmitButton.tsx b/src/components/trade/swap/SubmitButton.tsx
new file mode 100644
index 0000000..0cd0f14
--- /dev/null
+++ b/src/components/trade/swap/SubmitButton.tsx
@@ -0,0 +1,63 @@
+import { UnifiedWalletButton, useUnifiedWallet } from "@jup-ag/wallet-adapter";
+
+import { Button } from "@/components/ui/button";
+import { Token } from "@/lib/interfaces/tokensList";
+import { useBalance } from "@/hooks/useBalance";
+import { useMemo } from "react";
+
+interface SubmitButtonProps {
+ sellAmount: string | number;
+ sellToken: Token | null;
+ onSubmit: () => void;
+ isLoading: boolean;
+}
+
+export default function SubmitButton({
+ sellAmount,
+ sellToken,
+ onSubmit,
+ isLoading,
+}: SubmitButtonProps) {
+ const { connected } = useUnifiedWallet();
+ const balance = useBalance(sellToken);
+
+ const insufficientBalance = useMemo(() => {
+ if (!sellAmount || !balance) return false;
+
+ return Number(sellAmount) > balance;
+ }, [sellAmount, balance]);
+
+ const buttonJsx = useMemo(() => {
+ if (!connected)
+ return (
+
+ );
+ if (connected && !sellAmount)
+ return (
+
+ );
+ if (insufficientBalance)
+ return (
+
+ );
+ return (
+
+ );
+ }, [connected, sellAmount, insufficientBalance, onSubmit, isLoading]);
+
+ return buttonJsx;
+}
diff --git a/src/components/trade/swap/SwapProvider.tsx b/src/components/trade/swap/SwapProvider.tsx
new file mode 100644
index 0000000..cbeea14
--- /dev/null
+++ b/src/components/trade/swap/SwapProvider.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import {
+ PropsWithChildren,
+ createContext,
+ useCallback,
+ useContext,
+ useMemo,
+ useState,
+} from "react";
+
+import { OrderStatus } from "@/lib/interfaces/OrderStatus";
+import { Token } from "@/lib/interfaces/tokensList";
+import { useTokenList } from "@/hooks/useTokenList";
+
+interface SwapContextProps {
+ sellAmount: string | number;
+ setSellAmount: (value: string | number) => void;
+ buyAmount: string | number;
+ setBuyAmount: (value: string | number) => void;
+ sellSelectedToken: Token | null;
+ setSellSelectedToken: (token: Token | null) => void;
+ buySelectedToken: Token | null;
+ setBuySelectedToken: (token: Token | null) => void;
+ minReceived: string | number;
+ setMinReceived: (value: string | number) => void;
+ expireTime: string | null;
+ setExpireTime: (value: string | null) => void;
+ orderStatus: OrderStatus;
+ setOrderStatus: (status: OrderStatus) => void;
+ solscanUrl: string;
+ setSolscanUrl: (url: string) => void;
+ errorMessage: string;
+ setErrorMessage: (message: string) => void;
+ resetAll: () => void;
+}
+
+const initialValue = {
+ sellAmount: "",
+ setSellAmount: () => {
+ return;
+ },
+ buyAmount: "",
+ setBuyAmount: () => {
+ return;
+ },
+ sellSelectedToken: null,
+ setSellSelectedToken: () => {
+ return;
+ },
+ buySelectedToken: null,
+ setBuySelectedToken: () => {
+ return;
+ },
+ minReceived: "",
+ setMinReceived: () => {
+ return;
+ },
+ expireTime: null,
+ setExpireTime: () => {
+ return;
+ },
+ orderStatus: "INCOMPLETE" as OrderStatus,
+ setOrderStatus: () => {
+ return;
+ },
+ solscanUrl: "",
+ setSolscanUrl: () => {
+ return;
+ },
+ errorMessage: "",
+ setErrorMessage: () => {
+ return;
+ },
+ resetAll: () => {
+ return;
+ },
+};
+
+const SwapContext = createContext(initialValue);
+
+export function SwapProvider({ children }: PropsWithChildren) {
+ const tokenList = useTokenList();
+
+ const [sellAmount, setSellAmount] = useState("");
+ const [buyAmount, setBuyAmount] = useState("");
+ const [sellSelectedToken, setSellSelectedToken] = useState(
+ tokenList[0] as Token,
+ );
+ const [buySelectedToken, setBuySelectedToken] = useState(null);
+ const [minReceived, setMinReceived] = useState("");
+ const [expireTime, setExpireTime] = useState("1|d");
+ const [orderStatus, setOrderStatus] = useState("INCOMPLETE");
+ const [solscanUrl, setSolscanUrl] = useState("");
+ const [errorMessage, setErrorMessage] = useState("");
+
+ const resetAll = useCallback(() => {
+ setSellAmount("");
+ setBuyAmount("");
+ setSellSelectedToken(null);
+ setBuySelectedToken(null);
+ setMinReceived("");
+ setExpireTime("1|d");
+ setOrderStatus("INCOMPLETE");
+ setSolscanUrl("");
+ setErrorMessage("");
+ }, []);
+
+ const value = useMemo(() => {
+ return {
+ sellAmount,
+ setSellAmount,
+ buyAmount,
+ setBuyAmount,
+ sellSelectedToken,
+ setSellSelectedToken,
+ buySelectedToken,
+ setBuySelectedToken,
+ minReceived,
+ setMinReceived,
+ expireTime,
+ setExpireTime,
+ orderStatus,
+ setOrderStatus,
+ solscanUrl,
+ setSolscanUrl,
+ errorMessage,
+ setErrorMessage,
+ resetAll,
+ };
+ }, [
+ buyAmount,
+ buySelectedToken,
+ sellAmount,
+ sellSelectedToken,
+ minReceived,
+ expireTime,
+ orderStatus,
+ solscanUrl,
+ errorMessage,
+ resetAll,
+ ]);
+
+ return {children};
+}
+
+export const useSwap = () => {
+ const context = useContext(SwapContext);
+
+ if (context === undefined) {
+ throw new Error("useSwap must be used within a SwapProvider");
+ }
+
+ return context;
+};
diff --git a/src/components/trade/swap/SwapTradeForm.tsx b/src/components/trade/swap/SwapTradeForm.tsx
new file mode 100644
index 0000000..fe22725
--- /dev/null
+++ b/src/components/trade/swap/SwapTradeForm.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+
+import AdditionalInfo from "./AdditionalInfo";
+import SubmitButton from "./SubmitButton";
+import TradeSelectors from "./TradeSelectors";
+import TransactionMessage from "@/components/utils/TransactionMessage";
+import { VersionedTransaction } from "@solana/web3.js";
+import WarningMev from "@/components/utils/WarningMev";
+import useDebounce from "@/hooks/useDebounce";
+import useJupiterQuotes from "@/hooks/useJupiterQuotes";
+import { useSwap } from "./SwapProvider";
+
+export default function SwapTradeForm() {
+ const {
+ sellAmount,
+ setBuyAmount,
+ sellSelectedToken,
+ buySelectedToken,
+ orderStatus,
+ setOrderStatus,
+ setSolscanUrl,
+ setErrorMessage,
+ } = useSwap();
+
+ const wallet = useWallet();
+ const { connection } = useConnection();
+
+ const throttledAmount = useDebounce(sellAmount, 1000);
+
+ const { quote, outputAmount, isLoading } = useJupiterQuotes(
+ setErrorMessage,
+ setOrderStatus,
+ sellSelectedToken,
+ buySelectedToken,
+ Number(throttledAmount),
+ );
+
+ useEffect(() => {
+ if (outputAmount) {
+ setBuyAmount(outputAmount);
+ }
+ }, [outputAmount, setBuyAmount]);
+
+ const onSubmit = useCallback(async () => {
+ if (!wallet.connected || !wallet.signTransaction) {
+ console.error(
+ "Wallet is not connected or does not support signing transactions",
+ );
+ return;
+ }
+
+ const { swapTransaction } = await (
+ await fetch("https://quote-api.jup.ag/v6/swap", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ quoteResponse: quote,
+ userPublicKey: wallet.publicKey?.toString(),
+ wrapAndUnwrapSol: true,
+ // feeAccount is optional. Use if you want to charge a fee. feeBps must have been passed in /quote API.
+ // feeAccount: "fee_account_public_key"
+ }),
+ })
+ ).json();
+
+ setOrderStatus("PENDING");
+
+ try {
+ const swapTransactionBuf = Buffer.from(swapTransaction, "base64");
+ const transaction = VersionedTransaction.deserialize(swapTransactionBuf);
+ const signedTransaction = await wallet.signTransaction(transaction);
+
+ const rawTransaction = signedTransaction.serialize();
+ const txid = await connection.sendRawTransaction(rawTransaction, {
+ skipPreflight: true,
+ maxRetries: 2,
+ });
+
+ setSolscanUrl(`https://solscan.io/tx/${txid}`);
+
+ const latestBlockHash = await connection.getLatestBlockhash();
+
+ await connection.confirmTransaction(
+ {
+ blockhash: latestBlockHash.blockhash,
+ lastValidBlockHeight: latestBlockHash.lastValidBlockHeight,
+ signature: txid,
+ },
+ "confirmed",
+ );
+ setOrderStatus("SUBMITED");
+ } catch (error) {
+ const { message } = error as { message: string };
+ console.error("Error signing or sending the transaction:", error);
+ setErrorMessage(message ?? "");
+ setOrderStatus("ERROR");
+ }
+ }, [
+ wallet,
+ connection,
+ quote,
+ setOrderStatus,
+ setSolscanUrl,
+ setErrorMessage,
+ ]);
+
+ // if (error && orderStatus === "ERROR") {
+ // return (
+ // {
+ // resetAll();
+ // setOrderStatus("INCOMPLETE");
+ // }}
+ // />
+ // );
+ // }
+ return orderStatus === "PENDING" ? (
+
+ ) : (
+
+ );
+}
diff --git a/src/components/trade/swap/TradeSelectors.tsx b/src/components/trade/swap/TradeSelectors.tsx
new file mode 100644
index 0000000..4d7caab
--- /dev/null
+++ b/src/components/trade/swap/TradeSelectors.tsx
@@ -0,0 +1,55 @@
+import InverterButton from "../InverterButton";
+import TokenSelector from "../TokenSelector";
+import { useInvertAmounts } from "@/hooks/useInvertAmounts";
+import { useSwap } from "./SwapProvider";
+
+interface TradeSelectorsProps {
+ sellingTokenToUSD?: number | null;
+ buyingTokenToUSD?: number | null;
+ isLoading: boolean;
+}
+
+export default function TradeSelectors({
+ sellingTokenToUSD,
+ buyingTokenToUSD,
+ isLoading,
+}: TradeSelectorsProps) {
+ const {
+ sellAmount,
+ setSellAmount,
+ buyAmount,
+ setBuyAmount,
+ sellSelectedToken,
+ setSellSelectedToken,
+ buySelectedToken,
+ setBuySelectedToken,
+ } = useSwap();
+
+ const invertAmounts = useInvertAmounts();
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/trade/token-list-modal/TokenListItem.tsx b/src/components/trade/token-list-modal/TokenListItem.tsx
new file mode 100644
index 0000000..a879428
--- /dev/null
+++ b/src/components/trade/token-list-modal/TokenListItem.tsx
@@ -0,0 +1,40 @@
+import Image from "next/image";
+import { TokenWithBalance } from "@/lib/interfaces/tokensList";
+
+interface TokenListItemProps {
+ item: TokenWithBalance;
+ onClick: () => void;
+}
+
+export default function TokenListItem({ item, onClick }: TokenListItemProps) {
+ return (
+
+ );
+}
diff --git a/src/components/trade/token-list-modal/TokenListModal.tsx b/src/components/trade/token-list-modal/TokenListModal.tsx
new file mode 100644
index 0000000..bb64fd9
--- /dev/null
+++ b/src/components/trade/token-list-modal/TokenListModal.tsx
@@ -0,0 +1,64 @@
+import { Modal, TextInput } from "@mantine/core";
+
+import { Token } from "@/lib/interfaces/tokensList";
+import TokenListItem from "./TokenListItem";
+import { useFilteredTokens } from "@/hooks/useFilteredTokens";
+import { useState } from "react";
+
+interface TokenListModalProps {
+ opened: boolean;
+ open: () => void;
+ close: () => void;
+ setSelectedToken: (token: Token) => void;
+}
+
+export default function TokenListModal({
+ opened,
+ close,
+ setSelectedToken,
+}: TokenListModalProps) {
+ const [inputText, setInputText] = useState("");
+ const filteredTokensList = useFilteredTokens(inputText);
+
+ return (
+ {
+ setInputText("");
+ close();
+ }}
+ title="Select a token"
+ centered
+ radius="lg"
+ classNames={{
+ content: "bg-white",
+ header: "bg-white sticky",
+ title: "font-bold text-xl text-purple",
+ }}
+ >
+ setInputText(event.currentTarget.value)}
+ classNames={{
+ input: "bg-cream-light focus:ring-0 focus:border-0",
+ }}
+ />
+
+
+ {filteredTokensList.map((item) => (
+ {
+ setSelectedToken(item);
+ close();
+ }}
+ />
+ ))}
+
+
+ );
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..a29a10e
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 shadow-md",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+ terciary:
+ "bg-foreground border border-foreground text-background hover:bg-terciary-hover",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-auto px-4 py-3 text-md",
+ xs: "h-4 rounded-xl p-3 text-xs",
+ sm: "h-9 rounded-xl px-3",
+ lg: "h-16 rounded-xl md:px-12 text-lg",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+ );
+ },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/components/utils/BasicPage.tsx b/src/components/utils/BasicPage.tsx
new file mode 100644
index 0000000..3b9d9d5
--- /dev/null
+++ b/src/components/utils/BasicPage.tsx
@@ -0,0 +1,23 @@
+import Container from "./Container";
+import Footer from "@/components/footer/Footer";
+import Header from "@/components/header/Header";
+import { ReactNode } from "react";
+import { Title } from "./Title";
+
+interface PageProps {
+ title?: string;
+ children?: ReactNode;
+}
+
+export default function BasicPage({ title, children }: PageProps) {
+ return (
+
+
+
+ {title && {title}}
+ {children}
+
+
+
+ );
+}
diff --git a/src/components/utils/Container.tsx b/src/components/utils/Container.tsx
new file mode 100644
index 0000000..afd79ce
--- /dev/null
+++ b/src/components/utils/Container.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+interface Props {
+ children?: React.ReactNode;
+}
+
+const Container = ({ children }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default Container;
diff --git a/src/components/utils/Title.tsx b/src/components/utils/Title.tsx
new file mode 100644
index 0000000..b1c128f
--- /dev/null
+++ b/src/components/utils/Title.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+interface Props {
+ children?: ReactNode;
+}
+
+export function Title({ children }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/utils/TransactionMessage.tsx b/src/components/utils/TransactionMessage.tsx
new file mode 100644
index 0000000..3f8b617
--- /dev/null
+++ b/src/components/utils/TransactionMessage.tsx
@@ -0,0 +1,109 @@
+import { Button } from "../ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import { useSwap } from "../trade/swap/SwapProvider";
+
+interface TransactionMessageProps {
+ type: "success" | "error" | "pending";
+ icon: string;
+ mainMessage: string;
+ solscanUrl?: string;
+ buttonText?: string;
+ buttonAction?: () => void;
+ linkTo?: string;
+}
+
+export default function TransactionMessage({
+ type,
+ icon,
+ mainMessage,
+ solscanUrl,
+ buttonText,
+ buttonAction,
+ linkTo,
+}: TransactionMessageProps) {
+ const { sellAmount, buyAmount, sellSelectedToken, buySelectedToken } =
+ useSwap();
+
+ return (
+
+
+
+ {icon}
+
+
+ {mainMessage}
+
+ {type === "error" && "Please try again."}
+
+ {solscanUrl && (
+
+ Check the transaction:{" "}
+
+ solscan.io
+
+
+ )}
+ {sellSelectedToken && buySelectedToken && sellAmount && buyAmount && (
+
+
+
+ {sellAmount}
+ {sellSelectedToken.symbol}
+
+
arrow_forward
+
+
+
+ {buyAmount}
+ {buySelectedToken?.symbol}
+
+
+ )}
+
+ {buttonText && buttonAction ? (
+ linkTo ? (
+
+
+
+ ) : (
+
+ )
+ ) : null}
+
+
+
+
+ );
+}
+
+
+
+
diff --git a/src/components/utils/WarningMev.tsx b/src/components/utils/WarningMev.tsx
new file mode 100644
index 0000000..79c9b42
--- /dev/null
+++ b/src/components/utils/WarningMev.tsx
@@ -0,0 +1,13 @@
+export default function WarningMev() {
+ return (
+
+
+ warning_amber
+
+
+ Warning: This order will not be MEV protected. Be
+ careful with slippage.
+
+
+