Skip to content

[FEAT] Withdraw Functionality #225

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

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

[FEAT] Withdraw Functionality #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b52f799
added withdraw functionality
yagyanssh Oct 19, 2024
e107826
Fixed Invalid keylenght er
yagyanssh Oct 19, 2024
545d22e
Added WalletmultiButton throughout Pages
yagyanssh Oct 20, 2024
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
121 changes: 121 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

74 changes: 42 additions & 32 deletions src/components/Appbar/Appbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,61 +50,67 @@ const Appbar = () => {
if (!isMounted) return null

return (
<header className={`w-screen py-4 border-b md:border-none fixed top-0 left-0 right-0 ${theme === 'dark' ? '' : 'bg-white'}`}>
<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
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 ${theme === 'dark' ? 'border-white' : 'border-black'}`}>
<Logo className="h-8 w-8" fill={theme === 'dark' ? "#ffffff" : "#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">
{['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>
))}
{['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 && (
<button
onClick={() => {
router.push('/wallet')
}}
>
<svg
className={`size-10 ${theme === 'dark' ? 'text-white' : 'text-black'}`}
xmlns="http://www.w3.org/2000/svg"
width="128"
height="128"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M4 3a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h13a3 3 0 0 0 3-3v-1.77c.63-.57 1-1.38 1-2.23v-5c0-.85-.37-1.66-1-2.23V6a3 3 0 0 0-3-3zm0 1h13a2 2 0 0 1 2 2v1.17c-.32-.11-.66-.17-1-.17h-6a3 3 0 0 0-3 3v5a3 3 0 0 0 3 3h6c.34 0 .68-.06 1-.17V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m8 4h6a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m2.5 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5m0 1a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5"
/>
</svg>
</button>
<WalletMultiButton
className={`size-10 ${theme === 'dark' ? 'text-white' : 'text-black'}`}
/>
)}
{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'}`}>
<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'}`}>
<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'}`}>
<div
className={`p-1 border-2 rounded-full ${theme === 'dark' ? 'border-white' : 'border-black'}`}
>
<UserRound />
</div>
) : (
Expand All @@ -113,7 +119,11 @@ const Appbar = () => {
</div>

<div className="flex flex-col">
<span className={`max-w-[200px] ${theme === 'dark' ? 'text-white' : 'text-black'}`}>{data?.user?.name}</span>
<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>
Expand Down Expand Up @@ -157,4 +167,4 @@ const Appbar = () => {
)
}

export default Appbar
export default Appbar
29 changes: 22 additions & 7 deletions src/components/WalletPage/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import { useState } from 'react'
import LeftSideBar from './LeftSideBar'
import ProfileDropDown from '../common/ProfileDropDown'
import React from 'react'
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
import { useTheme } from 'next-themes'

const TopBar = () => {
const { data } = useSession()
const [open, setOpen] = useState(false)
const { theme } = useTheme()

return (
<div className="flex justify-between px-4 py-3 pb-6 items-center w-full">
Expand All @@ -33,14 +36,26 @@ const TopBar = () => {
</div>

<div className="hidden sm:flex sm:w-1/2 md:w-[50%] items-center border rounded-full p-2">
<Search color='gray' />
<input className="w-full text-center outline-none" placeholder="Search" />
<Search color="gray" />
<input
className="w-full text-center outline-none"
placeholder="Search"
/>
</div>
<div className="flex items-center gap-4">
{data && data.user ? (
<>
<WalletMultiButton
className={`size-10 ${theme === 'dark' ? 'text-white' : 'text-black'}`}
/>
<ProfileDropDown />
</>
) : (
<div className="w-[3rem] flex items-center p-[0.2rem] justify-center h-[2rem] transition outline-none">
<div className="p-4 border-2 rounded-full bg-gray-300 animate-pulse"></div>
</div>
)}
</div>
{data && data?.user ? <ProfileDropDown /> : (
<div className="w-[3rem] flex items-center p-[0.2rem] justify-center h-[2rem] transition outline-none">
<div className="p-4 border-2 rounded-full bg-gray-300 animate-pulse"></div>
</div>
)}
</div>
)
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/WalletPage/WalletDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { actions, ActionType } from './actions'
import { ReceiveQR } from './ReceiveQR'
import TokenSwap from './Swap/Swap'
import SendToken from './Send/Send'
import WithdrawalComponent from './withdraw/withdraw'


export interface WalletDetailProps {
wallet?: string
Expand Down Expand Up @@ -46,7 +48,7 @@ const WalletDetail = ({ wallet, usdbalance , solbalance}: WalletDetailProps) =>
)}
</div>
</div>
{(currentAction !== 'send' && currentAction !== 'swap' ) &&
{(currentAction !== 'send' && currentAction !== 'swap' && currentAction !== 'withdraw' ) &&
<div>
<div className="flex flex-col items-center w-full gap-5">
<div className="flex space-x-10 w-full items-center justify-between">
Expand Down Expand Up @@ -96,6 +98,7 @@ const WalletDetail = ({ wallet, usdbalance , solbalance}: WalletDetailProps) =>
{currentAction === 'receive' && <ReceiveQR wallet={wallet} onClose={handleClose}/>}
{currentAction === 'swap' && <TokenSwap setCurrent={setCurrentAction}/>}
{currentAction === 'send' && <SendToken setCurrent={setCurrentAction}/>}
{currentAction === 'withdraw' && <WithdrawalComponent setCurrent={setCurrentAction} onClose={handleClose}/>}

</div>
)
Expand Down
3 changes: 2 additions & 1 deletion src/components/WalletPage/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Send, Download, CreditCard, ArrowDownUp } from 'lucide-react';
import { Send, Download, CreditCard, ArrowDownUp, WalletCards } from 'lucide-react';

//different component for actions
export const actions = [
{ icon: Send, label: 'Send', type: 'send' as const },
{ icon: Download, label: 'Receive', type: 'receive' as const },
{ icon: CreditCard, label: 'Buy', type: 'buy' as const },
{ icon: ArrowDownUp, label: 'Swap', type: 'swap' as const },
{ icon: WalletCards, label: 'Withdraw', type: 'withdraw' as const }
];

//defined type of actions
Expand Down
Loading