Skip to content

Commit d934c51

Browse files
philix27philix27
authored
Merge pull request #5 from philix27/use_next_server
Hurry Refactor and Fixes
2 parents d3e0672 + d7c3ed3 commit d934c51

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+616
-721
lines changed

‎client/app/app/helper.ts

-9
This file was deleted.

‎client/app/app/components/mail-display.tsx ‎client/app/app/mail-display.tsx

+28-9
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,17 @@ import { cn } from 'lib/utils'
88
import { AppStores } from 'lib/zustand'
99
import axios from 'axios'
1010
import { Employee } from 'lib/zustand/employee'
11+
import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip'
12+
import { SidebarOpen } from 'lucide-react'
13+
import ThemeToggler from 'app/zhome/ThemeToggler'
14+
1115
interface MailDisplayProps {
1216
mail: Employee | null
1317
}
1418

1519
export function MailDisplay({ mail }: MailDisplayProps) {
16-
// const today = new Date()
1720
const store = AppStores.useEmployee()
18-
19-
// http://localhost:3344/api/v1/employees/send-message
21+
const storeSettings = AppStores.useSettings()
2022
const sendMsg = async () => {
2123
console.log('Reach mutate')
2224
const key = mail ? mail.key : 'Crypto'
@@ -27,7 +29,6 @@ export function MailDisplay({ mail }: MailDisplayProps) {
2729
})
2830
.then((res) => {
2931
store.update({
30-
chatText: { ...store.chatText, [key]: '' },
3132
allChat: [
3233
...store.allChat,
3334
{
@@ -49,8 +50,8 @@ export function MailDisplay({ mail }: MailDisplayProps) {
4950
<div className="relative flex h-full flex-col">
5051
{mail ? (
5152
<div className="flex flex-1 flex-col">
52-
<div className="flex items-start p-4">
53-
<div className="flex items-start gap-4 text-sm">
53+
<div className="flex items-center justify-between p-4">
54+
<div className="flex items-start gap-4 text-sm">
5455
<Avatar>
5556
<AvatarImage alt={mail.name} src={mail.img} className="size-[150%]" />
5657
</Avatar>
@@ -59,6 +60,22 @@ export function MailDisplay({ mail }: MailDisplayProps) {
5960
<div className="text-xs">{mail.text}</div>
6061
</div>
6162
</div>
63+
64+
<div className='flex space-x-3'>
65+
<ThemeToggler />
66+
<Tooltip>
67+
<TooltipTrigger>
68+
<SidebarOpen
69+
onClick={() => {
70+
storeSettings.update({ showCryptoModal: true })
71+
}}
72+
/>
73+
</TooltipTrigger>
74+
<TooltipContent>
75+
<p>Wallet info</p>
76+
</TooltipContent>
77+
</Tooltip>
78+
</div>
6279
</div>
6380
<Separator />
6481
<div className="h-[90vh] w-full gap-y-2 overflow-y-scroll px-8 pb-[100px] pt-4">
@@ -73,7 +90,7 @@ export function MailDisplay({ mail }: MailDisplayProps) {
7390
className={cn(
7491
'w-fit max-w-[50%] rounded-lg',
7592
!val.isMe ? mail.color : 'bg-card',
76-
!val.isMe && 'text-white',
93+
!val.isMe && 'bg-secondary text-white',
7794
)}
7895
>
7996
<p className="p-3">{val.msg}</p>
@@ -84,20 +101,22 @@ export function MailDisplay({ mail }: MailDisplayProps) {
84101
<Separator className="mt-auto" />
85102

86103
<div className="absolute bottom-0 my-[30px] flex w-full items-center justify-center">
87-
<div className="flex w-[65%] max-w-[60%] items-center justify-between gap-4 rounded-lg bg-background p-3">
104+
<div className="flex w-[65%] max-w-[60%] items-center justify-between gap-4 rounded-lg bg-card p-3">
88105
<Input
89106
className=""
90107
placeholder={`Reply ${mail.name}...`}
108+
value={store.chatText[mail.key]}
91109
onChange={(e) => {
92110
store.update({ chatText: { ...store.chatText, [mail.key]: e.target.value } })
93111
}}
94112
/>
95113
<Button
96114
onClick={() => {
97115
console.log('Button clicked')
116+
store.update({ chatText: { ...store.chatText, [mail.key]: '' } })
98117
sendMsg()
99118
}}
100-
className={cn('rounded-full', mail.color)}
119+
className={cn('rounded-full bg-primary')}
101120
>
102121
<MdSend className="size-[24px]" />
103122
</Button>

‎client/app/app/components/mail.tsx ‎client/app/app/mail.tsx

File renamed without changes.

‎client/app/app/modals/Crypto.tsx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
'use client'
2+
import React from 'react'
3+
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs'
4+
import useSWR from 'swr'
5+
import axios from 'axios'
6+
import { useAccount, useBalance, } from 'wagmi'
7+
import Spinner from 'components/app/Spinner'
8+
import { Button } from 'components/ui/button'
9+
10+
export default function CryptoModal() {
11+
const { address, } = useAccount()
12+
13+
const { data, error, isLoading } = useSWR('getWallets', async () => {
14+
console.log("process.env.BACKEND_URL" , process.env.BACKEND_URL )
15+
const res = axios.get(process.env.NEXT_PUBLIC_BACKEND_URL + '/wallets?id=' + address);
16+
const data = (await res).data
17+
return data as { walletId: string; chainType: string; address:string}[]
18+
})
19+
20+
const createWallet = async () => {
21+
22+
axios
23+
.post(process.env.NEXT_PUBLIC_BACKEND_URL + '/wallets/create', {
24+
userId: address,
25+
})
26+
.then((res) => {
27+
28+
})
29+
}
30+
31+
32+
// if (error) return <div>failed to load</div>
33+
// if (isLoading) return <div>loading...</div>
34+
return (
35+
<div className="">
36+
<Tabs defaultValue="wallet">
37+
<div className="w-full bg-background">
38+
<TabsList className="flex w-full items-center justify-around">
39+
<TabsTrigger
40+
value="wallet"
41+
className="h-full w-full py-5 text-zinc-600 hover:bg-primary dark:text-zinc-200"
42+
>
43+
Wallet
44+
</TabsTrigger>
45+
<TabsTrigger
46+
value="stats"
47+
className="h-full w-full py-5 text-zinc-600 hover:bg-primary dark:text-zinc-200"
48+
>
49+
Stats
50+
</TabsTrigger>
51+
</TabsList>
52+
</div>
53+
54+
<TabsContent value="wallet" className="p-2">
55+
<div>
56+
{!data ? <Spinner /> : data.map((val, i) => (
57+
<div key={i}
58+
className='w-full rounded-lg py-2 px-3 bg-background mb-4'>
59+
<p className='text-wrap mb-4 text-primary'>{val.address}</p>
60+
<div className='gap-y-4'>
61+
<Balance wAddr={val.address} />
62+
<p className='text-xs text-muted'>Wallet ID: {val.walletId}</p>
63+
<p className='text-xs text-muted'>Chain Type: {val.chainType.toUpperCase()}</p>
64+
</div>
65+
</div>
66+
))}
67+
</div>
68+
<div className='flex w-full items-center justify-center'>
69+
<Button className=''
70+
onClick={() => {
71+
createWallet()
72+
}}>Create New</Button>
73+
</div>
74+
</TabsContent>
75+
<TabsContent value="stats" className="m-0 p-2">
76+
<p>Charts</p>
77+
</TabsContent>
78+
</Tabs>
79+
</div>
80+
)
81+
}
82+
83+
84+
function Balance(params: { wAddr: string }) {
85+
const ba = useBalance({
86+
address: params.wAddr as `0x${string}`,
87+
})
88+
if(ba.isLoading) return <p className='text-xs text-muted'>Bal: ...</p>
89+
return <p className='text-md text-muted'>Bal: {ba.data?.value.toString()}</p>
90+
91+
}

‎client/app/app/modals/all.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use client'
2+
import { AppStores } from 'lib/zustand'
3+
import React from 'react'
4+
import Modal from '.'
5+
import CryptoModal from './Crypto'
6+
7+
export default function AllModals() {
8+
const store = AppStores.useSettings()
9+
return (
10+
<>
11+
{store.showCryptoModal && (
12+
<Modal
13+
onBlankClick={() => {
14+
store.update({ showCryptoModal: false })
15+
}}
16+
>
17+
<CryptoModal />
18+
</Modal>
19+
)}
20+
21+
{store.showTweetsModal && (
22+
<Modal
23+
onBlankClick={() => {
24+
store.update({ showTweetsModal: false })
25+
}}
26+
>
27+
Crypto Modal
28+
</Modal>
29+
)}
30+
31+
{store.showMotivationModal && (
32+
<Modal
33+
onBlankClick={() => {
34+
store.update({ showMotivationModal: false })
35+
}}
36+
>
37+
Crypto Modal
38+
</Modal>
39+
)}
40+
</>
41+
)
42+
}

‎client/app/app/modals/index.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { ReactNode } from 'react'
2+
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'components/ui/resizable'
3+
4+
export default function Modal(props: { children: ReactNode; onBlankClick?: VoidFunction }) {
5+
return (
6+
<div className="fixed z-[10] flex h-screen w-screen bg-black/40">
7+
<ResizablePanelGroup
8+
direction="horizontal"
9+
onLayout={(sizes: number[]) => {
10+
// store.update({ defaultLayout: sizes })
11+
}}
12+
className="h-full items-stretch"
13+
>
14+
<ResizablePanel defaultSize={65} minSize={20}>
15+
<div className="h-full w-full" onClick={props.onBlankClick} />
16+
</ResizablePanel>
17+
<ResizableHandle withHandle />
18+
<ResizablePanel defaultSize={35} minSize={35} maxSize={70}>
19+
<div className="h-full w-full bg-card">{props.children}</div>
20+
</ResizablePanel>
21+
</ResizablePanelGroup>
22+
</div>
23+
)
24+
}

‎client/app/app/page.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import React from 'react'
33
import { TooltipProvider } from 'components/ui/tooltip'
44
import { ResizablePanelGroup } from 'components/ui/resizable'
55
import { AppStores } from 'lib/zustand'
6-
import MailInbox from './components/mail'
6+
import MailInbox from './mail'
7+
import AllModals from './modals/all'
8+
79

810
export default function Page() {
911
const store = AppStores.useSettings()
@@ -22,6 +24,7 @@ export default function Page() {
2224
<MailInbox />
2325
</ResizablePanelGroup>
2426
</TooltipProvider>
27+
<AllModals />
2528
</div>
2629
)
2730
}

‎client/app/app/components/sidebar.tsx ‎client/app/app/sidebar.tsx

File renamed without changes.

0 commit comments

Comments
 (0)