From ca19a7f4b84fff8e29bb4a86efe2f7c69ccdc04d Mon Sep 17 00:00:00 2001 From: jasspreetbawa Date: Sun, 20 Oct 2024 00:24:38 +0530 Subject: [PATCH] feat: configured dark theme for wallet page --- src/app/layout.tsx | 46 ++- src/app/wallet/page.tsx | 17 +- src/components/WalletPage/LeftSideBar.tsx | 16 +- src/components/WalletPage/ReceiveQR.tsx | 123 ++++---- .../WalletPage/Send/LinkTransfer.tsx | 284 ++++++++++-------- src/components/WalletPage/Send/Send.tsx | 97 ++---- src/components/WalletPage/Send/SendForm.tsx | 26 ++ .../WalletPage/Send/SendOptions.tsx | 98 ++++++ .../WalletPage/Send/WalletTransfer.tsx | 127 +++++--- src/components/WalletPage/Swap/Swap.tsx | 198 +++++++----- src/components/WalletPage/Swap/Top.tsx | 33 +- src/components/WalletPage/TopBar.tsx | 27 +- src/components/WalletPage/WalletDetail.tsx | 184 +++++++----- src/components/icons/Logo.tsx | 4 +- src/components/ui/darkmode.tsx | 22 +- src/components/ui/login-with-google.tsx | 1 + 16 files changed, 774 insertions(+), 529 deletions(-) create mode 100644 src/components/WalletPage/Send/SendForm.tsx create mode 100644 src/components/WalletPage/Send/SendOptions.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 76554ce..0652d5a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,41 +1,37 @@ -import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; -import './globals.css'; -const inter = Inter({ subsets: ['latin'] }); -import { Providers } from './providers'; -import NextTopLoader from 'nextjs-toploader'; -import { ThemeProvider } from '@/components/ui/theme-provider'; -import AppWalletProvider from '@/components/AppWalletProvider'; +import type { Metadata } from 'next' +import { Inter } from 'next/font/google' +const inter = Inter({ subsets: ['latin'] }) +import { Providers } from './providers' +import NextTopLoader from 'nextjs-toploader' +import { ThemeProvider } from '@/components/ui/theme-provider' -import './globals.css'; +import './globals.css' export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', -}; +} export default function RootLayout({ children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode }>) { return ( - - - - - {children} - - - + + + + {children} + + - ); + ) } diff --git a/src/app/wallet/page.tsx b/src/app/wallet/page.tsx index 9f1fbaa..83f3988 100644 --- a/src/app/wallet/page.tsx +++ b/src/app/wallet/page.tsx @@ -18,22 +18,25 @@ const Wallet = async () => { }, }) if (user) { - wallet = user?.publicKey ? user.publicKey : await createWallet(user) + wallet = user?.publicKey ? user.publicKey : await createWallet(user) balance = await fetchUserBalance(wallet) console.log(balance) } } - return ( -
+
-
-
+
+
-
- +
+
{/* */}
diff --git a/src/components/WalletPage/LeftSideBar.tsx b/src/components/WalletPage/LeftSideBar.tsx index f7a3f33..2251cc6 100644 --- a/src/components/WalletPage/LeftSideBar.tsx +++ b/src/components/WalletPage/LeftSideBar.tsx @@ -70,14 +70,16 @@ const LeftSideBar = () => { const pathName = usePathname() return ( -
+
{PrimaryOptions.map((option, index) => (
-
+
{SecondaryOption.map((option, index) => ( -
-
- -
-
-

- {formatWallet()} -

-
- - {copied && ( -
- Copied! + return ( + + + + Your Wallet Address + + +
+ +
+ +
+

+ {formattedWallet} +

+
+ + {copied && ( +
+ Copied! +
+ )} +
- )} -
-
-

- - Only send crypto to this address via the Solana network. -

-
-
-} \ No newline at end of file +

+ + + Only send crypto to this address via the Solana network. + +

+ + + ) +} diff --git a/src/components/WalletPage/Send/LinkTransfer.tsx b/src/components/WalletPage/Send/LinkTransfer.tsx index 1bcc3f6..a9cf0ba 100644 --- a/src/components/WalletPage/Send/LinkTransfer.tsx +++ b/src/components/WalletPage/Send/LinkTransfer.tsx @@ -1,81 +1,92 @@ -"use client" +'use client' -import { useState, useEffect } from "react" -import { ArrowLeft, RefreshCw } from "lucide-react" -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" -import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" -import Image from "next/image" -import solIcon from "@/components/icons/solana.png" -import { IoMdArrowBack } from "react-icons/io" - -export default function LinkTransfer({ setType }: { setType: () => void }) { - const [amount, setAmount] = useState("0") - const [asset, setAsset] = useState("SOL") +} from '@/components/ui/select' +import { motion } from 'framer-motion' +import { ArrowLeft, ArrowUpDown, DollarSign } from 'lucide-react' +import Image from 'next/image' +import { useCallback, useEffect, useMemo, useState } from 'react' +import SolIcon from '../../icons/solana.png' + +const COINGECKO_API_URL = + 'https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd' + +interface AssetPrice { + [key: string]: { + usd: number + } +} + +export default function LinkTransfer({ + setType, +}: { + setType: (e: any) => void +}) { + const [amount, setAmount] = useState('0') + const [asset, setAsset] = useState('SOL') const [isUSD, setIsUSD] = useState(true) - const [solPrice, setSolPrice] = useState(0) + const [assetPrice, setAssetPrice] = useState(null) const [isLoading, setIsLoading] = useState(true) - const [error, setError] = useState(null) - useEffect(() => { - const fetchSolPrice = async () => { - try { - const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd') - if (!response.ok) { - throw new Error('Failed to fetch SOL price') - } - const data = await response.json() - setSolPrice(data.solana.usd) - setIsLoading(false) - } catch (err) { - setError('Failed to fetch SOL price. Please try again later.') - setIsLoading(false) + const fetchAssetPrice = useCallback(async () => { + try { + const response = await fetch(COINGECKO_API_URL) + if (!response.ok) { + throw new Error('Failed to fetch asset price') } + const data: AssetPrice = await response.json() + setAssetPrice(data) + setIsLoading(false) + } catch (err) { + console.log(`Failed to fetch asset price. Please try again later.`) + setIsLoading(false) } - - fetchSolPrice() }, []) + useEffect(() => { + fetchAssetPrice() + }, [fetchAssetPrice]) + const handleCreateLink = () => { console.log(`Creating link for ${amount} ${isUSD ? 'USD' : asset}`) } - const toggleCurrency = () => { - - if (!amount) { - setAmount('0'); - return; - } - - setIsUSD(!isUSD) - if (isUSD) { - setAmount((parseFloat(amount) / solPrice).toFixed(4)) - } else { - setAmount((parseFloat(amount) * solPrice).toFixed(2)) - } + const handleAmountChange = (e: React.ChangeEvent) => { + const value = e.target.value + if (/^\d*\.?\d*$/.test(value)) setAmount(value) } - const getEquivalentAmount = () => { + const toggleCurrency = useCallback(() => { + if (!amount || !assetPrice) return - if (!amount) { - return `~$0.00` - } + setIsUSD((prev) => !prev) + setAmount((prevAmount) => { + const numAmount = parseFloat(prevAmount) + const price = assetPrice.solana.usd + return isUSD + ? (numAmount / price).toFixed(4) + : (numAmount * price).toFixed(2) + }) + }, [amount, assetPrice, isUSD]) - if (isUSD) { - return `~${(parseFloat(amount) / solPrice).toFixed(4)} ${asset}` - } else { - return `~$${(parseFloat(amount) * solPrice).toFixed(2)} USD` - } - } + const getEquivalentAmount = useMemo(() => { + if (!amount || !assetPrice) return '~$0.00' + + const numAmount = parseFloat(amount) + const price = assetPrice.solana.usd + return isUSD + ? `~${(numAmount / price).toFixed(4)} ${asset}` + : `~$${(numAmount * price).toFixed(2)} USD` + }, [amount, assetPrice, isUSD, asset]) - const quickSelectAmounts = isUSD ? ["1", "2", "5"] : ["0.01", "0.02", "0.05"] + const quickSelectAmounts = isUSD ? ['1', '2', '5'] : ['0.01', '0.02', '0.05'] if (isLoading) { return
Loading...
@@ -86,80 +97,97 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { // } return ( - - - - - Back - - Create & Send - - -
-

- Specify asset and amount to send (taken from your wallet balance): -

- -
-
-

- Your available {asset}: 0.00 {asset} -

-
- { - if (/^\d*\.?\d*$/.test(e.target.value)) { - setAmount(e.target.value) - } - }} - className="text-3xl font-semibold pl-8 pr-12 py-6" - /> - - {isUSD ? "$" : ""} - - - {isUSD ? "USD" : asset} - - + + + +
+

+ Create & Send +

+

+ Specify asset and amount to send (taken from your wallet balance): +

+
+ + + +
+

+ Your available {asset}: 0.00 {asset} +

+ +
+
+ {isUSD && }
-

{getEquivalentAmount()}

-
-
- {quickSelectAmounts.map((quickAmount) => ( - - ))} + + + {isUSD ? 'USD' : asset} + +
- - - + +

+ {getEquivalentAmount} +

+
+ +
+ {quickSelectAmounts.map((quickAmount) => ( + + ))} +
+ +
+ - - +
+ ) -} \ No newline at end of file +} diff --git a/src/components/WalletPage/Send/Send.tsx b/src/components/WalletPage/Send/Send.tsx index fb4ccff..f7a56e3 100644 --- a/src/components/WalletPage/Send/Send.tsx +++ b/src/components/WalletPage/Send/Send.tsx @@ -1,74 +1,33 @@ 'use client' -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { ChevronRight, Wand2, Wallet } from "lucide-react" -import { useState } from "react" -import LinkTransfer from "./LinkTransfer" -import WalletTransfer from "./WalletTransfer" -import { ActionType } from "../actions"; - - +import { useState } from 'react' +import { ActionType } from '../actions' +import SendForm from './SendForm' +import SendOptions from './SendOptions' interface SendTokenProps { - setCurrent: (action: ActionType | null) => void; - } + setCurrent: (action: ActionType | null) => void +} export default function SendToken({ setCurrent }: SendTokenProps) { - - const [typeOfSend, setTypeOfSend] = useState(''); - return ( - <> - { - !typeOfSend &&
-

Send

-

- Send assets to a new TipLink or to a Solana wallet address: -

- - - - - - - -
- } - - - { - typeOfSend === 'type1' && setTypeOfSend('')}/> - } - - { - typeOfSend === 'type2' && setTypeOfSend('')}/> - } - - - ) -} \ No newline at end of file + const [typeOfSend, setTypeOfSend] = useState<'tiplink' | 'wallet' | null>( + null, + ) + + return ( + <> + {!typeOfSend ? ( + + ) : ( + setTypeOfSend(null)} + /> + )} + + ) +} diff --git a/src/components/WalletPage/Send/SendForm.tsx b/src/components/WalletPage/Send/SendForm.tsx new file mode 100644 index 0000000..3ea90a4 --- /dev/null +++ b/src/components/WalletPage/Send/SendForm.tsx @@ -0,0 +1,26 @@ +import { motion } from 'framer-motion' +import LinkTransfer from './LinkTransfer' +import WalletTransfer from './WalletTransfer' + +interface SendFormProps { + type: string + onBack: () => void +} + +function SendForm({ type, onBack }: SendFormProps) { + return ( + + {type === 'wallet' && } + + {type === 'tiplink' && } + + ) +} + +export default SendForm diff --git a/src/components/WalletPage/Send/SendOptions.tsx b/src/components/WalletPage/Send/SendOptions.tsx new file mode 100644 index 0000000..91c4b0f --- /dev/null +++ b/src/components/WalletPage/Send/SendOptions.tsx @@ -0,0 +1,98 @@ +import { motion } from 'framer-motion' +import { ArrowLeft, ChevronRight, Wallet, Wand2 } from 'lucide-react' +import { ActionType } from '../actions' + +interface SendOptionsProps { + setTypeOfSend: (type: 'tiplink' | 'wallet') => void + setCurrent: (action: ActionType | null) => void +} + +function SendOptions({ setTypeOfSend, setCurrent }: SendOptionsProps) { + return ( + +
+ +

+ Send +

+
+ +

+ Send assets to a new TipLink or to a Solana wallet address: +

+ +
+ setTypeOfSend('tiplink')} + /> +
+ setTypeOfSend('wallet')} + /> +
+ + + + ) +} + +interface SendOptionProps { + icon: React.ElementType + title: string + description: string + onClick: () => void +} + +function SendOption({ + icon: Icon, + title, + description, + onClick, +}: SendOptionProps) { + return ( + +
+
+ +
+
+

+ {title} +

+

+ {description} +

+
+
+ + + ) +} + +export default SendOptions diff --git a/src/components/WalletPage/Send/WalletTransfer.tsx b/src/components/WalletPage/Send/WalletTransfer.tsx index 8856509..128d599 100644 --- a/src/components/WalletPage/Send/WalletTransfer.tsx +++ b/src/components/WalletPage/Send/WalletTransfer.tsx @@ -1,61 +1,94 @@ +import { Button } from '@/components/ui/button' +import { motion } from 'framer-motion' +import { ArrowLeft, ArrowUpDown, DollarSign } from 'lucide-react' import React, { useState } from 'react' import { IoMdArrowBack } from 'react-icons/io' -const WalletTransfer = ({ setType }: { setType: () => void }) => { +const WalletTransfer = ({ setType }: { setType: (e: any) => void }) => { + const [amount, setAmount] = useState('') + const [address, setAddress] = useState('') + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + console.log(`your amount: ${amount} is send to address:${address}`) + } + return ( -
- + +
-
- - 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 + + + +
- + {tokens.map((token) => ( - +
- {token.name} + {token.name} {token.name}
@@ -131,18 +188,16 @@ export default function TokenSwap({ setCurrent }: TokenSwapProps) {
- - { - !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 ( -
-
-
-

- Total Balance -

-
-
- {(solbalance === null || isNaN(Number(usdbalance))) ? ( -
- {''} -
- ) : ( -
-
$ {usdbalance}
-
{solbalance} SOL
+ +
+
+
+

+ Total Balance +

+
+
+ {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 }) => ( - + = ({ className, fill }) => ( fillRule="evenodd" clipRule="evenodd" d="M0 60C38.1371 60 60 38.1371 60 0C60 38.1371 81.8629 60 120 60C81.8629 60 60 81.8629 60 120C60 81.8629 38.1371 60 0 60Z" - fill={fill} // Set fill color to black + fill="currentColor" // Set fill color to black /> 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 (