-
-
- Send to solana wallet address
-
-
- Specify amount and the designated wallet address:
-
-
-
-
-
-
-
-
-
-
-
-
- .sol and AllDomains addresses supported
-
+
+ Send to Solana wallet address
+
+
+ Specify amount and the designated wallet address:
+
+
+
+
+
+
+
setAddress(e.target.value)}
+ className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+ />
+
+ .sol and AllDomains addresses supported
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/components/WalletPage/Swap/Swap.tsx b/src/components/WalletPage/Swap/Swap.tsx
index 303ebcf..6ae876e 100644
--- a/src/components/WalletPage/Swap/Swap.tsx
+++ b/src/components/WalletPage/Swap/Swap.tsx
@@ -1,86 +1,126 @@
-import { useState, useEffect } from "react";
-import { ArrowUpDown} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import axios from "axios";
-import Image from "next/image";
-import { tokens, TokensType } from "./token";
-import { ActionType } from "../actions";
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select'
+import axios from 'axios'
+import { motion } from 'framer-motion'
+import { ArrowUpDown } from 'lucide-react'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
import { ThreeDots } from 'react-loader-spinner'
-import { Top } from "./Top";
-import { Bottom } from "./Bottom";
+import { ActionType } from '../actions'
+import { Bottom } from './Bottom'
+import { tokens, TokensType } from './token'
+import { Top } from './Top'
interface TokenSwapProps {
- setCurrent: (action: ActionType | null) => void;
+ setCurrent: (action: ActionType | null) => void
}
export default function TokenSwap({ setCurrent }: TokenSwapProps) {
- const [payToken, setPayToken] = useState(tokens[0]);
- const [receiveToken, setReceiveToken] = useState(tokens[1]);
- const [payAmount, setPayAmount] = useState("");
- const [receiveAmount, setReceiveAmount] = useState("");
- const [fetchingQuote, setFetchingQuote] = useState(false);
+ const [payToken, setPayToken] = useState(tokens[0])
+ const [receiveToken, setReceiveToken] = useState(tokens[1])
+ const [payAmount, setPayAmount] = useState('')
+ const [receiveAmount, setReceiveAmount] = useState('')
+ const [fetchingQuote, setFetchingQuote] = useState(false)
useEffect(() => {
if (!payAmount || !/^\d*\.?\d*$/.test(payAmount)) {
- setReceiveAmount("");
- return;
+ setReceiveAmount('')
+ return
}
- setFetchingQuote(true);
+ setFetchingQuote(true)
const fetchQuote = async () => {
try {
- const res = await axios.get(`https://quote-api.jup.ag/v6/quote?inputMint=${payToken.mint}&outputMint=${receiveToken.mint}&amount=${Number(payAmount) * (10 ** payToken.decimals)}&slippageBps=50`)
+ const res = await axios.get(
+ `https://quote-api.jup.ag/v6/quote?inputMint=${payToken.mint}&outputMint=${receiveToken.mint}&amount=${Number(payAmount) * 10 ** payToken.decimals}&slippageBps=50`,
+ )
- const outputAmount = Number(res.data.outAmount) / 10 ** receiveToken.decimals;
- setReceiveAmount(outputAmount.toString());
+ const outputAmount =
+ Number(res.data.outAmount) / 10 ** receiveToken.decimals
+ setReceiveAmount(outputAmount.toString())
} catch (error) {
- console.error("Error fetching swap price:", error);
- setReceiveAmount("");
+ console.error('Error fetching swap price:', error)
+ setReceiveAmount('')
} finally {
- setFetchingQuote(false);
+ setFetchingQuote(false)
}
- };
+ }
- const debounceFetch = setTimeout(fetchQuote, 500); // Debounce for 500ms
- return () => clearTimeout(debounceFetch); // Clean up previous timeout if the amount changes
- }, [payAmount, payToken, receiveToken]);
+ const debounceFetch = setTimeout(fetchQuote, 500) // Debounce for 500ms
+ return () => clearTimeout(debounceFetch) // Clean up previous timeout if the amount changes
+ }, [payAmount, payToken, receiveToken])
const handleSwap = () => {
- setPayToken(receiveToken);
- setReceiveToken(payToken);
- setPayAmount(receiveAmount);
- setReceiveAmount(payAmount);
- };
+ setPayToken(receiveToken)
+ setReceiveToken(payToken)
+ setPayAmount(receiveAmount)
+ setReceiveAmount(payAmount)
+ }
const selectTokenValue = (value: TokensType) => {
- const newToken = tokens.find((t) => t.symbol === value);
- if (newToken && newToken !== receiveToken) setPayToken(newToken);
- }
-
+ const newToken = tokens.find((t) => t.symbol === value)
+ if (newToken && newToken !== receiveToken) setPayToken(newToken)
+ }
+
return (
-
-
-
-
-
+
+ Swap tokens
+
+
+
+
- Current Balance: 0 {payToken.symbol}
-
+
+ Current Balance: 0 {payToken.symbol}
+
+
-
-
+
+
-
- {
- !fetchingQuote &&
- }
-
-
+ )}
+
{fetchingQuote && (
)}
-
- Current Balance: 0 {receiveToken.symbol}
-
-
-
-
- );
+
+ Current Balance: 0 {receiveToken.symbol}
+
+
+
+
+
+ )
}
diff --git a/src/components/WalletPage/Swap/Top.tsx b/src/components/WalletPage/Swap/Top.tsx
index fdf13ed..8c67102 100644
--- a/src/components/WalletPage/Swap/Top.tsx
+++ b/src/components/WalletPage/Swap/Top.tsx
@@ -1,15 +1,24 @@
-import { ActionType } from "../actions";
+import { ArrowLeft } from 'lucide-react'
+import { ActionType } from '../actions'
+import { ReactNode } from 'react'
export interface TokenSwapProps {
- setCurrent: (action: ActionType | null) => void;
- }
+ setCurrent: (action: ActionType | null) => void
+ children: ReactNode
+}
-export const Top = ({ setCurrent }: TokenSwapProps) => {
- return
-
-
Swap Tokens
-
-
-}
\ No newline at end of file
+export const Top = ({ setCurrent, children }: TokenSwapProps) => {
+ return (
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/components/WalletPage/TopBar.tsx b/src/components/WalletPage/TopBar.tsx
index 578f0ce..fe8d80c 100644
--- a/src/components/WalletPage/TopBar.tsx
+++ b/src/components/WalletPage/TopBar.tsx
@@ -7,18 +7,19 @@ import { useState } from 'react'
import LeftSideBar from './LeftSideBar'
import ProfileDropDown from '../common/ProfileDropDown'
import React from 'react'
+import { ModeToggle } from '../ui/darkmode'
const TopBar = () => {
const { data } = useSession()
const [open, setOpen] = useState(false)
return (
-
+
{/*
*/}
setOpen(!open)} className="sm:hidden" />
-
+
@@ -33,14 +34,22 @@ const TopBar = () => {
-
-
+
+
+
+
+ {data && data?.user ? (
+
+ ) : (
+
+ )}
+
- {data && data?.user ?
: (
-
- )}
)
}
diff --git a/src/components/WalletPage/WalletDetail.tsx b/src/components/WalletPage/WalletDetail.tsx
index 82a43c8..45a2be7 100644
--- a/src/components/WalletPage/WalletDetail.tsx
+++ b/src/components/WalletPage/WalletDetail.tsx
@@ -1,9 +1,10 @@
'use client'
-import React, { useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState } from 'react'
import { actions, ActionType } from './actions'
import { ReceiveQR } from './ReceiveQR'
-import TokenSwap from './Swap/Swap'
import SendToken from './Send/Send'
+import TokenSwap from './Swap/Swap'
export interface WalletDetailProps {
wallet?: string
@@ -11,93 +12,124 @@ export interface WalletDetailProps {
solbalance?: number
}
-const WalletDetail = ({ wallet, usdbalance , solbalance}: WalletDetailProps) => {
- const [currentAction, setCurrentAction] = useState
(null);
+const WalletDetail = ({
+ wallet,
+ usdbalance,
+ solbalance,
+}: WalletDetailProps) => {
+ const [currentAction, setCurrentAction] = useState(null)
+ const [activeTab, setActiveTab] = useState('Token')
const handleActionClick = (action: ActionType) => {
- setCurrentAction(action)
-
- };
-
+ setCurrentAction(action)
+ }
const handleClose = () => {
- setCurrentAction(null);
+ setCurrentAction(null)
}
-
return (
-
-
-
-
- {(solbalance === null || isNaN(Number(usdbalance))) ? (
-
- {''}
-
- ) : (
-
-
$ {usdbalance}
-
{solbalance} SOL
+
+
+
+
+
+ {solbalance === null || isNaN(Number(usdbalance)) ? (
+
+ {''}
- )}
-
-
- {(currentAction !== 'send' && currentAction !== 'swap' ) &&
-
-
-
- {actions.map((action, index) => (
-
-
-
{action.label}
+ ) : (
+
+
$ {usdbalance}
+
+ {solbalance} SOL
+
- ))}
-
-
-
-
-
-
+ )}
+ {currentAction !== 'send' && currentAction !== 'swap' && (
+ <>
+
+
+
+ {actions.map((action) => (
+
+
handleActionClick(action.type)}
+ whileTap={{ scale: 0.95 }}
+ whileHover={{ scale: 1.05 }}
+ >
+
+
+
+ {action.label}
+
+
+ ))}
+
-
-
-
- You don't have any assets yet!
-
-
- Start by buying or depositing funds:
-
-
-
-
-
-
-
- }
-
- {/*Now depends on current action render the components */}
- {currentAction === 'receive' &&
}
- {currentAction === 'swap' && }
- {currentAction === 'send' && }
+
+ {['Token', 'NFTs'].map((tab) => (
+ setActiveTab(tab)}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+ {tab}
+
+ ))}
+
+
+
+
+
+ You don't have any assets yet!
+
+
+ Start by buying or depositing funds:
+
+
+ + Add Funds
+
+
+ >
+ )}
-
+ {/*Now depends on current action render the components */}
+ {currentAction === 'receive' && (
+
+ )}
+ {currentAction === 'swap' && (
+
+ )}
+ {currentAction === 'send' && (
+
+ )}
+
+
)
}
export default WalletDetail
diff --git a/src/components/icons/Logo.tsx b/src/components/icons/Logo.tsx
index 55fd182..569d2a5 100644
--- a/src/components/icons/Logo.tsx
+++ b/src/components/icons/Logo.tsx
@@ -6,7 +6,7 @@ interface LogoProps {
}
const Logo: React.FC
= ({ className, fill }) => (
-
+
diff --git a/src/components/ui/darkmode.tsx b/src/components/ui/darkmode.tsx
index 35fc237..da37986 100644
--- a/src/components/ui/darkmode.tsx
+++ b/src/components/ui/darkmode.tsx
@@ -1,16 +1,16 @@
-"use client"
+'use client'
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import * as React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
-import { Button } from "@/components/ui/button"
+import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from '@/components/ui/dropdown-menu'
export function ModeToggle() {
const { setTheme } = useTheme()
@@ -24,16 +24,14 @@ export function ModeToggle() {
Toggle theme
-
- setTheme("light")}>
+
+ setTheme('light')}>
Light
- setTheme("dark")}>
+ setTheme('dark')}>
Dark
-
-
)
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/login-with-google.tsx b/src/components/ui/login-with-google.tsx
index 44cc9c6..9aa128b 100644
--- a/src/components/ui/login-with-google.tsx
+++ b/src/components/ui/login-with-google.tsx
@@ -7,6 +7,7 @@ const LoginWithGoogleButton = () => {
return (