diff --git a/.prettierrc b/.prettierrc index 882a16c..bb0d54b 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,7 +3,7 @@ "singleQuote": true, "useTabs": true, "tabWidth": 2, - "printWidth": 120, + "printWidth": 100, "trailingComma": "none", "endOfLine": "auto" } diff --git a/package.json b/package.json index 18fd965..76dc55e 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "next build", "start": "next start", "lint": "next lint", - "format": "prettier --write ." + "format": "prettier --write ." }, "dependencies": { "@bbachain/buffer-layout": "^1.0.0", diff --git a/public/BBA_logo_wrapping.svg b/public/BBA_logo_wrapping.svg new file mode 100644 index 0000000..3e85525 --- /dev/null +++ b/public/BBA_logo_wrapping.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/WBBA_logo_wrapping.svg b/public/WBBA_logo_wrapping.svg new file mode 100644 index 0000000..725adbe --- /dev/null +++ b/public/WBBA_logo_wrapping.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx b/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx index 6ceae63..92b8c35 100644 --- a/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx +++ b/src/app/(walletConnected)/liquidity-pools/create-pool/page.tsx @@ -1,7 +1,15 @@ 'use client' import { zodResolver } from '@hookform/resolvers/zod' -import { ChevronDown, ArrowLeft, ArrowRight, Info, Loader2, CheckCircle, AlertCircle } from 'lucide-react' +import { + ChevronDown, + ArrowLeft, + ArrowRight, + Info, + Loader2, + CheckCircle, + AlertCircle +} from 'lucide-react' import Image from 'next/image' import { useEffect, useState, useCallback } from 'react' import { useForm } from 'react-hook-form' @@ -12,10 +20,30 @@ import { IoSettings } from 'react-icons/io5' import { NoBalanceAlert } from '@/components/common/Alert' import { Button } from '@/components/ui/button' -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' -import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form' +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle +} from '@/components/ui/card' +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage +} from '@/components/ui/form' import { Input } from '@/components/ui/input' -import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select' +import { + Select, + SelectTrigger, + SelectValue, + SelectContent, + SelectItem +} from '@/components/ui/select' import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import LPSuccessDialog from '@/features/liquidityPool/components/LPSuccessDialog' @@ -93,7 +121,9 @@ function TokenSelectionCard({ }) { return (
- +
@@ -450,8 +490,14 @@ export default function CreatePool() { name="feeTier" render={({ field }) => ( - Fee Tier - @@ -483,9 +529,12 @@ export default function CreatePool() { !
-

BBA Native Token Pool

+

+ BBA Native Token Pool +

- You're creating a pool with BBA (native token). This requires special handling: + You're creating a pool with BBA (native token). This requires + special handling:

  • @@ -494,7 +543,9 @@ export default function CreatePool() {
  • - Recommended fee tier: 0.3% for BBA/{nonBBAToken?.symbol} pairs + + Recommended fee tier: 0.3% for BBA/{nonBBAToken?.symbol} pairs +
  • @@ -529,11 +580,15 @@ export default function CreatePool() {

    {selectedBaseToken.symbol}/{selectedQuoteToken.symbol} - {isBBAPoolPair && (Native)} + {isBBAPoolPair && ( + (Native) + )}

    Fee: {form.watch('feeTier')}% - {isBBAPoolPair && (BBA Pool)} + {isBBAPoolPair && ( + (BBA Pool) + )}

@@ -588,7 +643,9 @@ export default function CreatePool() { form.setValue('rangeType', value as 'full-range' | 'custom-range')} + onValueChange={(value) => + form.setValue('rangeType', value as 'full-range' | 'custom-range') + } >
- Full Range Selected + + Full Range Selected +

Your liquidity will be active across all price ranges (0 to ∞) @@ -622,7 +681,9 @@ export default function CreatePool() { name="minInitialPrice" render={({ field }) => ( - Min Price + + Min Price + ( - Max Price + + Max Price + -

Deposit Summary

+

+ Deposit Summary +

Total Value: @@ -746,7 +811,9 @@ export default function CreatePool() {

{selectedBaseToken?.symbol}/{selectedQuoteToken?.symbol}

-

Fee: {form.watch('feeTier')}%

+

+ Fee: {form.watch('feeTier')}% +

@@ -760,7 +827,9 @@ export default function CreatePool() { {/* Pool Stats Preview */}
-

Initial TVL

+

+ Initial TVL +

${totalDepositValue.toFixed(2)}

@@ -771,7 +840,9 @@ export default function CreatePool() {

Swap Fee

-

{form.watch('feeTier')}%

+

+ {form.watch('feeTier')}% +

@@ -786,13 +857,17 @@ export default function CreatePool() {
-
Initial Price:
+
+ Initial Price: +

{form.watch('initialPrice')} {exchangeRate}

-
Price Range:
+
+ Price Range: +

{form.watch('rangeType') === 'custom-range' ? `${form.watch('minInitialPrice')} - ${form.watch('maxInitialPrice')}` @@ -800,14 +875,20 @@ export default function CreatePool() {

-
Trading Fee:
+
+ Trading Fee: +

{form.watch('feeTier')}% per trade

-
Pool Type:
-

Constant Product (x*y=k)

+
+ Pool Type: +
+

+ Constant Product (x*y=k) +

@@ -835,12 +916,16 @@ export default function CreatePool() { alt={selectedBaseToken?.symbol} />
-

{selectedBaseToken?.symbol}

+

+ {selectedBaseToken?.symbol} +

{selectedBaseToken?.name}

-

{baseTokenAmount} tokens

+

+ {baseTokenAmount} tokens +

${baseTokenPrice.toFixed(2)}

@@ -854,12 +939,16 @@ export default function CreatePool() { alt={selectedQuoteToken?.symbol} />
-

{selectedQuoteToken?.symbol}

+

+ {selectedQuoteToken?.symbol} +

{selectedQuoteToken?.name}

-

{quoteTokenAmount} tokens

+

+ {quoteTokenAmount} tokens +

${quoteTokenPrice.toFixed(2)}

@@ -874,7 +963,9 @@ export default function CreatePool() {
-
Trading Fee Revenue:
+
+ Trading Fee Revenue: +

{form.watch('feeTier')}% per trade

@@ -888,17 +979,27 @@ export default function CreatePool() {

-
Est. Daily Fees:
+
+ Est. Daily Fees: +

- ${((totalDepositValue * 0.01 * parseFloat(form.watch('feeTier'))) / 100).toFixed(4)} + $ + {( + (totalDepositValue * 0.01 * parseFloat(form.watch('feeTier'))) / + 100 + ).toFixed(4)}

-
Est. Annual APR:
+
+ Est. Annual APR: +

{( - ((((totalDepositValue * 0.01 * parseFloat(form.watch('feeTier'))) / 100) * 365) / + ((((totalDepositValue * 0.01 * parseFloat(form.watch('feeTier'))) / + 100) * + 365) / totalDepositValue) * 100 ).toFixed(2)} @@ -919,8 +1020,9 @@ export default function CreatePool() { Important Notice

- Creating a liquidity pool involves risk. Token prices can fluctuate, and you may experience - impermanent loss. Please ensure you understand the risks before proceeding. + Creating a liquidity pool involves risk. Token prices can fluctuate, and + you may experience impermanent loss. Please ensure you understand the + risks before proceeding.

@@ -944,7 +1046,9 @@ export default function CreatePool() { - + @@ -154,7 +164,7 @@ export default function Navbar() { useEffect(() => setMounted(true), []) return ( -