Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: configured dark theme for wallet page #224

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: configured dark theme for wallet page #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 21 additions & 25 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<html lang="en">
<Providers>
<AppWalletProvider>
<body className={`${inter.className} h-[100vh]`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<NextTopLoader color="#333" />
{children}
</ThemeProvider>
</body>
</AppWalletProvider>
<body className={`${inter.className} h-[100vh]`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<NextTopLoader color="#333" />
{children}
</ThemeProvider>
</body>
</Providers>
</html>
);
)
}
17 changes: 10 additions & 7 deletions src/app/wallet/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="h-full flex flex-col items-center">
<div className="h-full flex flex-col items-center bg-white dark:bg-[#181819] ">
<TopBar />
<div className="flex justify-between grow w-full">
<div className="hidden sm:block min-w-1/5">
<div className="flex justify-between grow w-full transition-colors">
<div className="hidden sm:block min-w-1/5 border-r dark:border-slate-500">
<LeftSideBar />
</div>
<div>
<WalletDetail wallet={wallet} usdbalance={Number(balance?.usdBalance)} solbalance={Number(balance?.solBalance)}/>
<div className="flex justify-center items-center w-full py-12 bg-slate-100 dark:bg-[#11151d]">
<WalletDetail
wallet={wallet}
usdbalance={Number(balance?.usdBalance)}
solbalance={Number(balance?.solBalance)}
/>
</div>
<div className=" hidden md:block">{/* <RightSideBar /> */}</div>
</div>
Expand Down
16 changes: 10 additions & 6 deletions src/components/WalletPage/LeftSideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,16 @@ const LeftSideBar = () => {
const pathName = usePathname()

return (
<div className="flex flex-col items-center justify-between w-full space-y-2 text-bold h-full py-5">
<div className="flex flex-col bg-white dark:bg-[#181819] shadow-xl items-center justify-between w-full space-y-2 font-bold h-full py-5">
<div className="w-full flex flex-col items-center gap-3 px-4">
{PrimaryOptions.map((option, index) => (
<button
key={index}
className={cn(
'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white rounded-lg',
pathName === option?.href ? 'sm:bg-black text-white' : 'text-black',
'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white dark:hover:bg-gray-700 dark:hover:text-gray-100 rounded-lg',
pathName === option?.href
? 'sm:bg-black text-white dark:bg-white dark:text-black'
: 'text-black dark:text-gray-300',
)}
>
{option.svg}
Expand All @@ -86,13 +88,15 @@ const LeftSideBar = () => {
))}
</div>

<div className="w-full border-t px-4 flex flex-col items-center gap-3 pt-5">
<div className="w-full border-t border-gray-200 dark:border-gray-700 px-4 flex flex-col items-center gap-3 pt-5">
{SecondaryOption.map((option, index) => (
<button
key={index}
className={cn(
'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white text-nowrap rounded-lg',
pathName === option?.href ? 'bg-black text-white' : 'text-black',
'flex items-center gap-2 w-full space-x-3 sm:p-3 hover:bg-black hover:text-white dark:hover:bg-gray-700 dark:hover:text-gray-100 rounded-lg',
pathName === option?.href
? 'bg-black text-white dark:bg-gray-700 dark:text-gray-100'
: 'text-black dark:text-gray-300',
)}
>
{option.svg}
Expand Down
123 changes: 59 additions & 64 deletions src/components/WalletPage/ReceiveQR.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,68 @@
"use client"
import { useState } from "react"
import { WalletDetailProps } from "./WalletDetail"
'use client'
import { Check, Copy, Info } from 'lucide-react'
import { QRCodeSVG } from 'qrcode.react'
import {
Check,
Copy,
Info,
X
} from 'lucide-react'
import { useMemo, useState } from 'react'
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '../ui/dialog'
import { WalletDetailProps } from './WalletDetail'

export const ReceiveQR = ({wallet,onClose}:WalletDetailProps & {onClose:()=>void}) => {
const [copied, setCopied] = useState(false)
export const ReceiveQR = ({
wallet,
onClose,
}: WalletDetailProps & { onClose: () => void }) => {
const [copied, setCopied] = useState(false)

const handleCopy = () => {
navigator.clipboard.writeText(wallet ?? 'no wallet address')
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}

//shows the public key in short like main tiplink
const formatWallet = () => {
const handleCopy = () => {
navigator.clipboard.writeText(wallet ?? 'no wallet address')
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}

//shows the public key in short like main tiplink
const formattedWallet = useMemo(() => {
console.log('Formatting wallet')
if (wallet) {
return `${wallet?.slice(0, 4)}...${wallet?.slice(-4)}`
return `${wallet.slice(0, 4)}...${wallet.slice(-4)}`
}
return 'no wallet address'
}
}, [wallet])

return <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
<div className="bg-white rounded-lg p-6 shadow-lg max-w-sm w-full">
<div className="flex justify-between items-center">
<h3 className="text-lg font-bold">Your Wallet Address</h3>
<button
onClick={onClose}
className="text-gray-500 hover:text-gray-800"
>
<X size={25} />
</button>
</div>
<div className="flex flex-col items-center gap-4 mt-4">
<QRCodeSVG
value={wallet ?? 'no wallet address found'}
size={180}
/>
</div>
<div
className="flex items-center justify-evenly bg-gray-100 shadow-md shadow-gray-200 p-2 cursor-pointer rounded-md w-full mt-4"
onClick={handleCopy}
>
<p className="font-mono text-gray-700 break-words">
{formatWallet()}
</p>
<div className="relative">
<button
className={`bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600 cursor-pointer transition duration-300`}
>
{copied ? <Check size={16} /> : <Copy size={16} />}
</button>
{copied && (
<div className="absolute top-full left-0 mt-1 bg-gray-800 text-white text-xs py-1 px-2 rounded-md">
Copied!
return (
<Dialog open={true} onOpenChange={onClose}>
<DialogContent className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
<DialogTitle className="text-lg font-bold text-gray-900 dark:text-gray-100">
Your Wallet Address
</DialogTitle>

<div className="flex flex-col items-center gap-4 mt-4">
<QRCodeSVG value={wallet ?? 'no wallet address found'} size={180} />
</div>

<div
className="flex items-center justify-evenly bg-gray-100 dark:bg-gray-700 shadow-md shadow-gray-200 dark:shadow-gray-900 p-2 cursor-pointer rounded-md w-full mt-4"
onClick={handleCopy}
>
<p className="font-mono text-gray-700 dark:text-gray-300 break-words">
{formattedWallet}
</p>
<div className="relative">
<button className="bg-blue-500 dark:bg-blue-600 text-white p-2 rounded-full hover:bg-blue-600 dark:hover:bg-blue-500 transition duration-300">
{copied ? <Check size={16} /> : <Copy size={16} />}
</button>
{copied && (
<div className="absolute top-full left-0 mt-1 bg-gray-800 text-white text-xs py-1 px-2 rounded-md">
Copied!
</div>
)}
</div>
</div>
)}
</div>
</div>

<p className="text-gray-500 text-xs mt-2 flex gap-1 justify-center w-full whitespace-nowrap">
<Info/>
<i className='mt-1'>Only send crypto to this address via the Solana network.</i>
</p>
</div>
</div>
}
<p className="text-gray-500 dark:text-gray-400 text-xs mt-2 flex gap-1 justify-center w-full">
<Info />
<i className="mt-1">
Only send crypto to this address via the Solana network.
</i>
</p>
</DialogContent>
</Dialog>
)
}
Loading