diff --git a/packages/nextjs/components/Dexes/AutomatedMakertMaker.tsx b/packages/nextjs/components/Dexes/AutomatedMakertMaker.tsx index 5d771c7..75d1354 100644 --- a/packages/nextjs/components/Dexes/AutomatedMakertMaker.tsx +++ b/packages/nextjs/components/Dexes/AutomatedMakertMaker.tsx @@ -1,11 +1,28 @@ "use client"; import React, { useState } from "react"; -import { AlertTriangle, Droplet, RefreshCcw, TrendingUp, Wallet } from "lucide-react"; -import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; +import { + AlertTriangle, + Droplet, + RefreshCcw, + TrendingUp, + Wallet, +} from "lucide-react"; +import { + Line, + LineChart, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from "recharts"; // Helper function to calculate constant product curve points -const generatePoolData = (initialX: number, initialY: number, points: number) => { +const generatePoolData = ( + initialX: number, + initialY: number, + points: number, +) => { const k = initialX * initialY; const data = []; for (let x = initialX * 0.5; x <= initialX * 1.5; x += initialX / points) { @@ -24,7 +41,12 @@ interface LiquidityPoolProps { } // Component for displaying liquidity pool -const LiquidityPool: React.FC = ({ tokenA, tokenB, amountA, amountB }) => ( +const LiquidityPool: React.FC = ({ + tokenA, + tokenB, + amountA, + amountB, +}) => (

Liquidity Pool

@@ -34,12 +56,16 @@ const LiquidityPool: React.FC = ({ tokenA, tokenB, amountA,

{tokenA}

-

{amountA.toLocaleString()}

+

+ {amountA.toLocaleString()} +

{tokenB}

-

{amountB.toLocaleString()}

+

+ {amountB.toLocaleString()} +

@@ -67,13 +93,15 @@ const SlippageSimulator: React.FC = ({ poolSize }) => {

Slippage Simulator

- + setTradeAmount(Number(e.target.value))} + onChange={(e) => setTradeAmount(Number(e.target.value))} className="w-full mt-2" />
@@ -84,7 +112,9 @@ const SlippageSimulator: React.FC = ({ poolSize }) => {

Expected Slippage:

-

{calculateSlippage()}%

+

+ {calculateSlippage()}% +

@@ -104,10 +134,12 @@ const AutomatedMarketMaker = () => { return (
-

Automated Market Maker (AMM)

+

+ Automated Market Maker (AMM) +

- Smart contracts that enable automated trading through liquidity pools, replacing traditional order books with - mathematical price formulas. + Smart contracts that enable automated trading through liquidity pools, + replacing traditional order books with mathematical price formulas.

@@ -130,7 +162,12 @@ const AutomatedMarketMaker = () => {
- +
@@ -139,9 +176,19 @@ const AutomatedMarketMaker = () => {
- - - value.toFixed(2)} /> + + + Number(value).toFixed(2)} /> @@ -155,8 +202,8 @@ const AutomatedMarketMaker = () => { Constant Product

- AMMs maintain a constant product (k) between token reserves: x * y = k. This ensures liquidity is always - available at some price. + AMMs maintain a constant product (k) between token reserves: x * y = + k. This ensures liquidity is always available at some price.

@@ -166,8 +213,8 @@ const AutomatedMarketMaker = () => { Price Impact

- Larger trades have higher price impact due to the constant product formula. This is known as slippage and - affects trading efficiency. + Larger trades have higher price impact due to the constant product + formula. This is known as slippage and affects trading efficiency.

@@ -177,8 +224,8 @@ const AutomatedMarketMaker = () => { Impermanent Loss

- LP tokens may be worth less than holding assets separately due to price changes, resulting in impermanent - loss upon withdrawal. + LP tokens may be worth less than holding assets separately due to + price changes, resulting in impermanent loss upon withdrawal.

@@ -189,13 +236,15 @@ const AutomatedMarketMaker = () => {

Uniswap

- Pioneered the x*y=k formula for DEXes. Simple and efficient design for general token pairs. + Pioneered the x*y=k formula for DEXes. Simple and efficient design + for general token pairs.

Curve Finance

- Specialized for stable assets with low slippage and high efficiency trading between similar-priced assets. + Specialized for stable assets with low slippage and high + efficiency trading between similar-priced assets.