Skip to content

Commit 4364107

Browse files
Ni-2alsakhaev
Ni-2
authored and
alsakhaev
committed
feat: redesign Wallet and History Main page modules; add the link to MyNearWallet; change modules border colors (issue#211)
1 parent 154e750 commit 4364107

File tree

16 files changed

+89
-74
lines changed

16 files changed

+89
-74
lines changed

‎apps/xen-tg-app/src/App.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Link } from 'react-router'
22
import SettingsIcon from './assets/settings'
33
import XEN_IMAGE from './assets/xen-anime-style-portrait.png'
44
import Capabilities from './components/Capabilities'
5-
import HistoryMainPageModule from './components/HistoryMainPageModule'
65
import Layout from './components/Layout'
76
import Wallet from './components/Wallet'
87

@@ -14,15 +13,14 @@ const App = () => {
1413
<Layout>
1514
<Link
1615
to="/settings"
17-
className="absolute top-5 right-4 rounded-full border border-[#f8f9ff19] bg-(--color-light-white-bg) p-2 backdrop-blur-3xl backdrop-opacity-80"
16+
className="absolute top-5 right-4 rounded-full border border-(--color-opposite-text) bg-(--color-light-white-bg) p-2 backdrop-blur-3xl backdrop-opacity-80 dark:border-(--color-main-text)/30"
1817
>
1918
<SettingsIcon />
2019
</Link>
2120
<div className="z-1 m-2.5 flex w-[210px] justify-center overflow-hidden rounded-full select-none">
2221
<img src={XEN_IMAGE} alt="xen-photo" className="h-full w-full" />
2322
</div>
2423
<Wallet />
25-
<HistoryMainPageModule />
2624
<Capabilities />
2725
</Layout>
2826
)

‎apps/xen-tg-app/src/components/Agent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const Agent: FC<TAgentProps> = ({ capabilitiy }) => {
8282
<div className="group flex items-center gap-2 pt-1 pb-0.25 text-left text-[14px]/[125%] font-semibold wrap-anywhere">
8383
{capabilitiy.title ?? capabilitiy.name}
8484
{action ? (
85-
<div className="text-[#7A818B] transition group-hover:text-(--color-main-text)">
85+
<div className="text-(--color-gray-text) transition group-hover:text-(--color-main-text)">
8686
<ArrowForwardIcon />
8787
</div>
8888
) : null}
@@ -103,7 +103,7 @@ const Agent: FC<TAgentProps> = ({ capabilitiy }) => {
103103
disabled={handleToggleCapability.isPending || handleToggleCapability.isSuccess}
104104
/>
105105
{/* <button
106-
className="mr-1 flex cursor-pointer p-1.5 text-[#7A818B] transition hover:text-(--color-main-text)"
106+
className="mr-1 flex cursor-pointer p-1.5 text-(--color-gray-text) transition hover:text-(--color-main-text)"
107107
onClick={() =>
108108
handleRemoveCapability.mutate({
109109
methodName: 'removeCapability',

‎apps/xen-tg-app/src/components/Capabilities.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,21 +135,21 @@ const Capabilities = () => {
135135
const openNearAI = () => window.Telegram.WebApp.openLink('https://app.near.ai/agents')
136136

137137
return (
138-
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-[#f8f9ff66] p-2.5 backdrop-blur-3xl backdrop-opacity-80">
138+
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-(--color-opposite-text) p-2.5 backdrop-blur-3xl backdrop-opacity-80 dark:border-(--color-main-text)/30">
139139
<div className="my-1.5 flex w-full items-center justify-between">
140140
<div className="flex items-center justify-between gap-1">
141141
<h1 className="text-center text-2xl font-bold">Capabilities</h1>
142142
<button
143143
disabled={handleUpdateCapability.isPending}
144-
className={`${handleUpdateCapability.isPending ? 'animate-spin-back' : ''} flex cursor-pointer items-center justify-between p-1.5 text-[#7A818B] transition ${handleUpdateCapability.isPending ? '' : 'hover:text-(--color-main-text)'}`}
144+
className={`${handleUpdateCapability.isPending ? 'animate-spin-back' : ''} flex cursor-pointer items-center justify-between p-1.5 text-(--color-gray-text) transition ${handleUpdateCapability.isPending ? '' : 'hover:text-(--color-main-text)'}`}
145145
onClick={() => handleUpdateCapability.mutate({ methodName: 'syncCapabilities' })}
146146
>
147147
<SyncIcon />
148148
</button>
149149
</div>
150150
<button
151151
role="link"
152-
className="me-1 flex cursor-pointer p-1.5 text-[#7A818B] transition hover:text-(--color-main-text)"
152+
className="me-1 flex cursor-pointer p-1.5 text-(--color-gray-text) transition hover:text-(--color-main-text)"
153153
onClick={openNearAI}
154154
>
155155
<ExternalLinkIcon />

‎apps/xen-tg-app/src/components/DeveloperMode.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const DeveloperMode = () => {
6464
},
6565
})
6666
return (
67-
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-[#f8f9ff66] p-2.5 backdrop-blur-3xl backdrop-opacity-80">
67+
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-(--color-opposite-text) p-2.5 backdrop-blur-3xl backdrop-opacity-80 dark:border-(--color-main-text)/30">
6868
<div className="z-1 flex w-full items-center justify-between ps-2.5 pe-6">
6969
<span className="py-2.5 text-[18px]/[150%] font-normal text-(--color-main-text)">
7070
Developer mode

‎apps/xen-tg-app/src/components/FooterMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type Props = {
77

88
const FooterMenu: FC<Props> = ({ memoriesNumber }) => {
99
return (
10-
<div className="flex w-max rounded-[20px] border border-[#f8f9ff66] p-3 backdrop-blur-xs">
10+
<div className="flex w-max rounded-[20px] border border-(--color-opposite-text) p-3 backdrop-blur-xs dark:border-(--color-main-text)/30">
1111
<Link to="/memories">
1212
<div className="flex items-center justify-center p-2.5 select-none">
1313
<h2 className="text-[18px]/[150%] font-semibold text-(--color-my-primary) dark:text-(--color-main-text)">

‎apps/xen-tg-app/src/components/History.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { API_URL } from '@/env'
22
import { useQuery } from '@tanstack/react-query'
33
import { THistoryNote } from '../types'
44
// import Header from './Header'
5+
import { Accordion } from '@/components/ui/accordion'
56
import { useGoBack } from '@/hooks/useGoBack'
67
import HistoryNote from './HistoryNote'
78
import Layout from './Layout'
@@ -43,11 +44,17 @@ const History = () => {
4344

4445
return (
4546
<Layout>
46-
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-[#f8f9ff66] p-2.5 backdrop-blur-3xl backdrop-opacity-80">
47+
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-(--color-opposite-text) p-2.5 backdrop-blur-3xl backdrop-opacity-80 dark:border-(--color-main-text)/30">
4748
<div className="my-1.5 flex w-full items-center justify-between">
48-
<h1 className="text-center text-2xl font-bold">Payment & Usage</h1>
49+
<h1 className="text-center text-2xl font-bold">History</h1>
4950
</div>
50-
{history?.items.map((note) => <HistoryNote key={note.id} note={note} />)}
51+
{history ? (
52+
<Accordion type="multiple" className="flex w-full flex-col gap-2.5">
53+
{history.items.map((note) => (
54+
<HistoryNote key={note.id} note={note} />
55+
))}
56+
</Accordion>
57+
) : null}
5158
</div>
5259
</Layout>
5360
)

‎apps/xen-tg-app/src/components/HistoryMainPageModule.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { Accordion } from '@/components/ui/accordion'
12
import { API_URL } from '@/env'
23
import { THistoryNote } from '@/types'
34
import { useQuery } from '@tanstack/react-query'
45
import { Link } from 'react-router'
5-
import ArrayRightIcon from '../assets/array-right'
6-
import { HistoryCard } from './HistoryNote'
6+
import HistoryNote from './HistoryNote'
77

88
const queryFn = (name: string, params?: { [key: string]: string | number }) => async () => {
99
if (!window.Telegram.WebApp.initData) {
@@ -34,20 +34,24 @@ const HistoryMainPageModule = () => {
3434
queryKey: ['history'],
3535
queryFn: queryFn('getUsageHistory', {
3636
offset: 0,
37-
limit: 1,
37+
limit: 3,
3838
}),
3939
})
4040

4141
return history?.total ? (
42-
<Link
43-
to="/history"
44-
className="z-1 flex w-full items-center justify-between gap-2.5 rounded-xl border border-[#f8f9ff66] p-2.5 text-(--color-main-text) backdrop-blur-3xl backdrop-opacity-80"
45-
>
46-
<HistoryCard note={history?.items[0]} />
47-
<div className="mr-6 flex cursor-pointer items-center justify-center py-1.5">
48-
<ArrayRightIcon />
49-
</div>
50-
</Link>
42+
<div className="flex w-full flex-col items-center gap-2.5 border-t-[1px] border-t-(--color-opposite-text)/40 pt-2.5 dark:border-t-(--color-main-text)/10">
43+
<Accordion type="single" collapsible className="flex w-full flex-col gap-2.5">
44+
{history.items.map((note) => (
45+
<HistoryNote key={note.id} note={note} />
46+
))}
47+
</Accordion>
48+
<Link
49+
to="/history"
50+
className="flex w-full cursor-pointer items-center justify-center rounded-[10px] bg-(--color-opposite-text)/30 py-1.5 transition hover:bg-(--color-opposite-text)/50 dark:bg-(--color-main-text)/5 dark:hover:bg-(--color-main-text)/15"
51+
>
52+
View history
53+
</Link>
54+
</div>
5155
) : null
5256
}
5357

‎apps/xen-tg-app/src/components/HistoryNote.tsx‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import {
2-
Accordion,
3-
AccordionContent,
4-
AccordionItem,
5-
AccordionTrigger,
6-
} from '@/components/ui/accordion'
1+
import { AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
72
import { formatNearAmount } from '@/lib/utils'
83
import { FC } from 'react'
94
import { THistoryNote } from '../types'
@@ -40,25 +35,24 @@ type THistoryNoteProps = {
4035
}
4136

4237
const HistoryNote: FC<THistoryNoteProps> = ({ note }) => (
43-
<div className="flex w-full items-center justify-between gap-3.5 rounded-[10px] bg-(--color-light-white-bg) px-2.5 py-1.5 has-[[data-state='open']]:bg-[#ffffff7c] dark:has-[[data-state='open']]:bg-[#ffffff19]">
44-
<Accordion type="single" collapsible className="w-full">
45-
<AccordionItem value="item-1">
46-
<AccordionTrigger className="w-full cursor-pointer">
47-
<HistoryCard note={note} />
48-
</AccordionTrigger>
49-
<AccordionContent className="mt-2.5 flex flex-col gap-2.5 border-t-[1px] border-t-[#07070719] pt-2.5 dark:border-t-[#f8f9ff19]">
50-
<div>
51-
<div className="text-xs text-(--color-gray-text)">Execution input</div>
52-
<div>{note.executionInput}</div>
53-
</div>
54-
<div>
55-
<div className="text-xs text-(--color-gray-text)">Output</div>
56-
<div>{note.executionOutput}</div>
57-
</div>
58-
</AccordionContent>
59-
</AccordionItem>
60-
</Accordion>
61-
</div>
38+
<AccordionItem
39+
value={note.id + ''}
40+
className="flex w-full flex-col gap-2.5 rounded-[10px] border-b-0 bg-(--color-light-white-bg) px-2.5 py-1.5 has-[[data-state='open']]:bg-[#ffffff7c] dark:has-[[data-state='open']]:bg-[#ffffff19]"
41+
>
42+
<AccordionTrigger className="w-full cursor-pointer items-center justify-between [&[data-state=open]>svg]:text-(--color-my-primary)">
43+
<HistoryCard note={note} />
44+
</AccordionTrigger>
45+
<AccordionContent className="flex flex-col gap-2.5 border-t-[1px] border-t-(--color-opposite-text)/80 pt-2.5 dark:border-t-(--color-main-text)/10">
46+
<div>
47+
<div className="text-xs text-(--color-gray-text)">Execution input</div>
48+
<div>{note.executionInput}</div>
49+
</div>
50+
<div>
51+
<div className="text-xs text-(--color-gray-text)">Output</div>
52+
<div>{note.executionOutput}</div>
53+
</div>
54+
</AccordionContent>
55+
</AccordionItem>
6256
)
6357

6458
export default HistoryNote

‎apps/xen-tg-app/src/components/Memories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,11 @@ const Memories = () => {
7575

7676
return (
7777
<Layout>
78-
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-[#f8f9ff66] p-2.5 backdrop-blur-3xl backdrop-opacity-80">
78+
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-(--color-opposite-text) p-2.5 backdrop-blur-3xl backdrop-opacity-80 dark:border-(--color-main-text)/30">
7979
<div className="my-1.5 flex w-full items-center justify-between">
8080
<h1 className="text-center text-2xl font-bold">{`Memories (${memories?.total ?? '-'})`}</h1>
8181
<button
82-
className="flex w-16 cursor-pointer items-center justify-center py-1.5 text-[#7A818B] transition hover:not-disabled:text-(--color-main-text) hover:disabled:cursor-default"
82+
className="flex w-16 cursor-pointer items-center justify-center py-1.5 text-(--color-gray-text) transition hover:not-disabled:text-(--color-main-text) hover:disabled:cursor-default"
8383
onClick={() => handleDeleteAll.mutate()}
8484
disabled={!memories || !memories.total}
8585
>

‎apps/xen-tg-app/src/components/Memory.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const Memory: FC<TMemoryProps> = ({ memory }) => {
5555
<div className="flex py-0.25 text-[14px]/[150%] font-semibold">{memory.data}</div>
5656
</div>
5757
<button
58-
className="mr-1 flex cursor-pointer p-1.5 text-[#7A818B] transition hover:text-(--color-main-text)"
58+
className="mr-1 flex cursor-pointer p-1.5 text-(--color-gray-text) transition hover:text-(--color-main-text)"
5959
onClick={() => handleDelete.mutate()}
6060
>
6161
{handleDelete.isPending || handleDelete.isSuccess ? <Spinner /> : <Trash />}

0 commit comments

Comments
 (0)