Skip to content

Commit

Permalink
FIX(usd-balance-showcase): resolved conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
@prince981620
prince981620 committed Oct 10, 2024
2 parents 27a5b7e + 9592a1a commit 2a2c683
Show file tree
Hide file tree
Showing 19 changed files with 1,115 additions and 614 deletions.
878 changes: 505 additions & 373 deletions package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"lucide-react": "^0.419.0",
"next": "14.2.5",
"next-auth": "^4.24.7",
"next-themes": "^0.3.0",
"nextjs-toploader": "^1.6.12",
"pino-pretty": "^11.2.2",
"qrcode.react": "^4.0.1",
Expand Down
40 changes: 27 additions & 13 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,41 @@
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 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 './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>
<body className={`${inter.className} h-[100vh]`}>
<NextTopLoader color="#333" />
{children}
</body>
<AppWalletProvider>
<body className={`${inter.className} h-[100vh]`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<NextTopLoader color="#333" />
{children}
</ThemeProvider>
</body>
</AppWalletProvider>
</Providers>
</html>
)
);
}
201 changes: 108 additions & 93 deletions src/components/Appbar/Appbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,81 @@
'use client'

import Link from 'next/link'
import Logo from '../icons/Logo'
import { Menu } from 'lucide-react'
import { LogOut, Menu, UserRound } from 'lucide-react'
import { signOut, useSession } from 'next-auth/react'
import LoginWithGoogleButton from '../ui/login-with-google'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import UserImage from '@/components/Appbar/UserImage'
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import { FaWallet } from 'react-icons/fa6'
import { useWallet } from '@solana/wallet-adapter-react'
import ProfileDropDown from '../common/ProfileDropDown'
import { useSession } from 'next-auth/react'
import { ModeToggle } from '../ui/darkmode'
import { useTheme } from 'next-themes'

const dropDownData = [
{
name: 'Profile',
icon: <UserRound size={15} />,
href: '/profile',
},
]

const Appbar = () => {
const { data,status } = useSession();
const router = useRouter();
const { data } = useSession()
const router = useRouter()
const [isMounted, setIsMounted] = useState(false)
const { connected } = useWallet()
const [opacity, setOpacity] = useState(1);
const { theme } = useTheme()

useEffect(() => {
const handleScroll = () => {
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;

const fadeStart = 0;
const fadeEnd = windowHeight * 0.4;
if (connected) {
router.push('/')
}
if (!connected) {
router.push('/')
}
setIsMounted(true)
}, [connected, router])

if (scrollPosition <= fadeStart) {
setOpacity(1);
} else if (scrollPosition >= fadeEnd) {
setOpacity(0);
} else {
setOpacity(1 - (scrollPosition - fadeStart) / (fadeEnd - fadeStart));
}
};
if (!isMounted) return null

window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

return (
<header className="w-screen py-4 border-b md:border-none fixed top-0 left-0 right-0 bg-white md:bg-white/0 z-50 "
style={{ opacity: opacity }}
>
<div className="container pl-32 px-4 ">
<div className="flex justify-between items-center md:border md:p-2.5 rounded-xl max-w-2xl lg:max-w-4xl mx-auto md:bg-white/90 md:backdrop:blur-sm">
<header className={`w-screen py-4 border-b md:border-none fixed top-0 left-0 right-0 ${theme === 'dark' ? '' : 'bg-white'}`}>
<div className="container pl-32 px-4">
<div className={`flex justify-between items-center md:border md:p-2.5 rounded-xl max-w-2xl lg:max-w-4xl mx-auto ${theme === 'dark' ? '' : 'bg-white'} md:backdrop:blur-sm`}>
<div>
<div className="border h-10 w-10 rounded-lg inline-flex justify-center items-center">
<Logo className="h-8 w-8" fill="#000000" />
<div className={`border h-10 w-10 rounded-lg inline-flex justify-center items-center ${theme === 'dark' ? 'border-white' : 'border-black'}`}>
<Logo className="h-8 w-8" fill={theme === 'dark' ? "#ffffff" : "#000000"} />
</div>
</div>
<div className="hidden md:block">
<nav className="flex gap-8 text-sm">
<Link
className="text-black/70 hover:text-black transition"
href="#"
>
Products
</Link>
<Link
className="text-black/70 hover:text-black transition"
href="#"
>
API & Docs
</Link>
<Link
className="text-black/70 hover:text-black transition"
href="#"
>
FAQ
</Link>
<Link
className="text-black/70 hover:text-black transition"
href="#"
>
Company
</Link>
<Link
className="hidden lg:block text-black/70 hover:text-black transition"
href="#"
>
Blogs
</Link>
{['Products', 'API & Docs', 'FAQ', 'Company', 'Blogs'].map((item) => (
<Link key={item} className={`${theme === 'dark' ? 'text-white/70 hover:text-white' : 'text-black/70 hover:text-black'} transition`} href="#">
{item}
</Link>
))}
</nav>
</div>
<div className="flex gap-4 items-center">
{/*{data && data?.user ? (*/}
{/* <Button size="sm" variant="default">*/}
{/* Sign out*/}
{/* </Button>*/}
{/*) : (*/}
{/* <>*/}
{/* <Button variant="outline">*/}
{/* <FaWallet className="hover:text-black/80" />*/}
{/* </Button>*/}
{/* <LoginWithGoogleButton />*/}
{/* </>*/}
{/*)}*/}
{status === "authenticated" && data && (
{data && (
<button
onClick={() => {
router.push('/wallet')
}}
>
<svg
className="size-10 text-black"
className={`size-10 ${theme === 'dark' ? 'text-white' : 'text-black'}`}
xmlns="http://www.w3.org/2000/svg"
width="128"
height="128"
Expand All @@ -117,29 +88,73 @@ const Appbar = () => {
</svg>
</button>
)}
{data && data?.user ? <ProfileDropDown /> : (
<>
{isMounted && (
<WalletMultiButton
style={{
backgroundColor: 'black',
height: '40px',
borderRadius: '8px',
}}
endIcon={<FaWallet />}
/>
)}
{status === 'unauthenticated' && <LoginWithGoogleButton />}
</>
{data && data?.user ? (
<DropdownMenu>
<DropdownMenuTrigger className="w-[3rem] flex items-center p-[0.2rem] justify-center h-[2rem] transition outline-none">
{!data?.user.image ? (
<div className={`p-1 border-2 rounded-md ${theme === 'dark' ? 'border-white' : 'border-black'}`}>
<UserRound />
</div>
) : (
<UserImage image={data?.user.image} />
)}
</DropdownMenuTrigger>

<DropdownMenuContent className={`translate-y-8 scale-110 -translate-x-10 shadow-lg ${theme === 'dark' ? 'bg-black' : 'bg-white'}`}>
<DropdownMenuLabel className="flex gap-4 items-center">
<div className="!w-[2rem] flex items-center p-[0.2rem] justify-center !h-[2rem]">
{!data?.user.image ? (
<div className={`p-1 border-2 rounded-full ${theme === 'dark' ? 'border-white' : 'border-black'}`}>
<UserRound />
</div>
) : (
<UserImage image={data?.user.image} />
)}
</div>

<div className="flex flex-col">
<span className={`max-w-[200px] ${theme === 'dark' ? 'text-white' : 'text-black'}`}>{data?.user?.name}</span>
<span className="text-[0.8rem] max-w-[200px] text-gray-400 break-all">
{data?.user?.email}
</span>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />

{dropDownData.map((item, index) => (
<DropdownMenuItem
className={`${theme === 'dark' ? 'text-white/70 hover:text-white' : 'text-black/70 hover:text-black'} transition cursor-pointer`}
onClick={() => router.push(item.href)}
key={index}
>
<span>{item.icon}</span>
<span>{item.name}</span>
</DropdownMenuItem>
))}
<DropdownMenuSeparator />
{data?.user && (
<DropdownMenuItem
onClick={async () => {
await signOut()
router.push('/')
}}
className={`${theme === 'dark' ? 'text-white/70 hover:text-white' : 'text-black/70 hover:text-black'} transition cursor-pointer`}
>
<LogOut size={15} />
Logout
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
) : (
<LoginWithGoogleButton />
)}
<span className="md:hidden">
<Menu />
</span>
<ModeToggle />
</div>
</div>
</div>
</header>
)
}

export default Appbar
export default Appbar
16 changes: 9 additions & 7 deletions src/components/Home/CallToAction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,18 @@ const CallToAction = () => {
<section className="my-28">
<div className="px-5 md:px-0 md:max-w-[900px] lg:max-w-[1300px] container mx-auto">
<div className="max-w-[540px] mx-auto">
<h2 className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-black/70 text-transparent bg-clip-text text-center mt-5">
Sign up to get started.
<h2 className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-black/70 text-transparent bg-clip-text text-center mt-5 dark:from-white dark:to-white/70">
Sign up to get started.
</h2>
<p className="text-lg tracking-tighter text-black/70 text-center mt-5">
Ready to Secure Your Crypto Assets? Sign Up Now to Get Started with Our Easy-to-Use Wallet Generator.
<p className="text-lg tracking-tighter text-black/70 dark:text-neutral-300 text-center mt-5">
Ready to Secure Your Crypto Assets? Sign Up Now to Get Started with Our Easy-to-Use Wallet Generator.
</p>
</div>
<div className="flex ga-2 mt-10 justify-center">
<Button variant="ghost">Get for free</Button>
<Button>
<div className="flex gap-2 mt-10 justify-center">
<Button variant="ghost" className="dark:text-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700">
Get for free
</Button>
<Button className="flex items-center gap-2 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200">
<span>Learn more</span> <ArrowRight className="h-5 w-5" />
</Button>
</div>
Expand Down
18 changes: 13 additions & 5 deletions src/components/Home/Feature.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use client'
import React from 'react'
import FeatureCard from '../ui/feature-card'
import { useTheme } from 'next-themes'

const features = [
{
Expand Down Expand Up @@ -29,18 +31,24 @@ const features = [
]

const Feature = () => {
const { theme } = useTheme();

return (
<section>
<div className="md:mt-20 mt-10 max-w-[1000px] mx-auto ">
<section className={`${theme === 'dark' ? '' : 'bg-white'}`}>
<div className="md:mt-20 mt-10 max-w-[1000px] mx-auto">
<div className="flex justify-center">
<div className="text-sm inline-flex border border-[#222]/10 px-3 py-1 rounded-lg tracking-tight shadow-inner">
<div className={`text-sm inline-flex border px-3 py-1 rounded-lg tracking-tight shadow-inner
${theme === 'dark' ? 'border-gray-700 text-gray-300' : 'border-[#222]/10 text-black'}`}>
Features
</div>
</div>
<div className="text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-black/70 text-transparent bg-clip-text text-center mt-5">
<div className={`text-4xl md:text-5xl lg:text-7xl font-bold tracking-tighter text-center mt-5
bg-gradient-to-b text-transparent bg-clip-text
${theme === 'dark' ? 'from-white to-white/70' : 'from-black to-black/70'}`}>
Key features
</div>
<div className="text-lg tracking-tighter text-black/70 text-center mt-5">
<div className={`text-lg tracking-tighter text-center mt-5
${theme === 'dark' ? 'text-gray-300' : 'text-black/70'}`}>
Explore the Core Features of Our Tool!
</div>
</div>
Expand Down
Loading

0 comments on commit 2a2c683

Please sign in to comment.