Skip to content

Commit 57c6201

Browse files
alsakhaevalsakhaev
authored
Merge pull request #184 from dapplets/171-move-settings-to-separate-page-in-xen-mini-app
feat: Move settings to separate page in Xen mini app (issue#171)
2 parents 80e3140 + 1020281 commit 57c6201

File tree

8 files changed

+114
-67
lines changed

8 files changed

+114
-67
lines changed

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

Lines changed: 8 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,24 @@
1-
import { useQuery } from '@tanstack/react-query'
1+
import { Link } from 'react-router'
2+
import SettingsIcon from './assets/settings'
23
import XEN_IMAGE from './assets/xen-anime-style-portrait.png'
34
import Capabilities from './components/Capabilities'
4-
import DeveloperMode from './components/DeveloperMode'
5-
import FooterMenu from './components/FooterMenu'
65
import Layout from './components/Layout'
7-
import ThemeButton from './components/ThemeButton'
86
import Wallet from './components/Wallet'
9-
import Warnings from './components/Warnings'
10-
import { TMemory } from './types'
11-
import { API_URL } from './env'
12-
13-
const queryFn = (name: string, params?: { [key: string]: string | number }) => async () => {
14-
if (!window.Telegram.WebApp.initData) {
15-
throw new Error('Telegram is not available')
16-
}
17-
const response = await fetch(API_URL, {
18-
method: 'POST',
19-
headers: {
20-
Authorization: `Bearer ${window.Telegram.WebApp.initData}`,
21-
'Content-Type': 'application/json',
22-
},
23-
body: JSON.stringify({
24-
jsonrpc: '2.0',
25-
method: name,
26-
params: params ?? {},
27-
id: 1,
28-
}),
29-
})
30-
if (!response.ok) {
31-
throw new Error('Network response was not ok')
32-
}
33-
const data = await response.json()
34-
return data.result
35-
}
367

378
function App() {
38-
const { data: memories } = useQuery<{ items: TMemory[]; total: number }>({
39-
queryKey: ['memories'],
40-
queryFn: queryFn('getMemories', {
41-
offset: 0,
42-
limit: 10,
43-
}),
44-
})
45-
469
return (
4710
<Layout>
48-
<div className="absolute top-5 right-4">
49-
<ThemeButton />
50-
</div>
11+
<Link
12+
to="/settings"
13+
className="absolute top-5 right-4 rounded-full border border-[#f8f9ff19] bg-(--color-light-white-bg) p-2 backdrop-blur-3xl backdrop-opacity-80"
14+
>
15+
<SettingsIcon />
16+
</Link>
5117
<div className="z-1 m-2.5 flex w-[210px] justify-center overflow-hidden rounded-full select-none">
5218
<img src={XEN_IMAGE} alt="xen-photo" className="h-full w-full" />
5319
</div>
5420
<Wallet />
5521
<Capabilities />
56-
<DeveloperMode />
57-
<Warnings />
58-
<div className="fixed top-[calc(100vh-94px)] left-1/2 z-1 -translate-x-1/2">
59-
<FooterMenu memoriesNumber={memories?.total} />
60-
</div>
6122
</Layout>
6223
)
6324
}

‎apps/xen-tg-app/src/assets/settings.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const SettingsIcon = () => (
2+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<path
4+
d="M17.2233 10C17.2233 9.77 17.2133 9.55 17.1933 9.32L19.0533 7.91C19.4533 7.61 19.5633 7.05 19.3133 6.61L17.4433 3.38C17.3234 3.16818 17.1295 3.00814 16.8987 2.93062C16.668 2.8531 16.4168 2.86356 16.1933 2.96L14.0433 3.87C13.6733 3.61 13.2833 3.38 12.8733 3.19L12.5833 0.88C12.5233 0.38 12.0933 0 11.5933 0H7.8633C7.3533 0 6.9233 0.38 6.8633 0.88L6.5733 3.19C6.1633 3.38 5.7733 3.61 5.4033 3.87L3.2533 2.96C2.7933 2.76 2.2533 2.94 2.0033 3.38L0.133298 6.62C-0.116702 7.06 -0.00670207 7.61 0.393298 7.92L2.2533 9.33C2.2116 9.77903 2.2116 10.231 2.2533 10.68L0.393298 12.09C-0.00670207 12.39 -0.116702 12.95 0.133298 13.39L2.0033 16.62C2.2533 17.06 2.7933 17.24 3.2533 17.04L5.4033 16.13C5.7733 16.39 6.1633 16.62 6.5733 16.81L6.8633 19.12C6.9233 19.62 7.3533 20 7.8533 20H11.5833C12.0833 20 12.5133 19.62 12.5733 19.12L12.8633 16.81C13.2733 16.62 13.6633 16.39 14.0333 16.13L16.1833 17.04C16.6433 17.24 17.1833 17.06 17.4333 16.62L19.3033 13.39C19.5533 12.95 19.4433 12.4 19.0433 12.09L17.1833 10.68C17.2133 10.45 17.2233 10.23 17.2233 10ZM9.7633 13.5C7.8333 13.5 6.2633 11.93 6.2633 10C6.2633 8.07 7.8333 6.5 9.7633 6.5C11.6933 6.5 13.2633 8.07 13.2633 10C13.2633 11.93 11.6933 13.5 9.7633 13.5Z"
5+
fill="currentColor"
6+
/>
7+
</svg>
8+
)
9+
10+
export default SettingsIcon

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Switch } from '@/components/ui/switch'
22
import { API_URL } from '@/env'
33
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
4+
import ThemeButton from './ThemeButton'
45

56
const queryFn = (name: string, params?: { [key: string]: string }) => async () => {
67
if (!window.Telegram.WebApp.initData) {
@@ -64,17 +65,25 @@ const DeveloperMode = () => {
6465
},
6566
})
6667
return (
67-
<div className="z-1 flex w-full items-center justify-between ps-2.5 pe-5">
68-
<span className="text-[18px]/[150%] font-normal text-(--color-main-text)">
69-
Developer mode
70-
</span>
71-
<Switch
72-
disabled={isDevModeTurnedOn === undefined}
73-
onCheckedChange={() =>
74-
isDevModeTurnedOn !== undefined && switchDveloperMode.mutate(isDevModeTurnedOn)
75-
}
76-
checked={isDevModeTurnedOn}
77-
/>
68+
<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">
69+
<div className="z-1 flex w-full items-center justify-between ps-2.5 pe-6">
70+
<span className="py-2.5 text-[18px]/[150%] font-normal text-(--color-main-text)">
71+
Developer mode
72+
</span>
73+
<Switch
74+
disabled={isDevModeTurnedOn === undefined}
75+
onCheckedChange={() =>
76+
isDevModeTurnedOn !== undefined && switchDveloperMode.mutate(isDevModeTurnedOn)
77+
}
78+
checked={isDevModeTurnedOn}
79+
/>
80+
</div>
81+
<div className="z-1 flex w-full items-center justify-between ps-2.5 pe-7">
82+
<span className="py-2.5 text-[18px]/[150%] font-normal text-(--color-main-text)">
83+
Color scheme
84+
</span>
85+
<ThemeButton />
86+
</div>
7887
</div>
7988
)
8089
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import ArrayLeft from '@/assets/array-left'
22
import { Link } from 'react-router'
3-
import ThemeButton from './ThemeButton'
43

54
const Header = () => (
65
<div className="z-1 flex w-full items-center justify-between">
7-
<Link to="/">
6+
<Link to={-1 as any}>
87
<div className="flex items-center justify-between gap-1 text-[22px]/[150%] font-semibold select-none">
98
<div className="flex h-5 w-5 items-center justify-center">
109
<ArrayLeft />
1110
</div>
1211
Back
1312
</div>
1413
</Link>
15-
<ThemeButton />
1614
</div>
1715
)
1816

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const Memories = () => {
7878
<div className="my-1.5 flex w-full items-center justify-between">
7979
<h1 className="text-center text-2xl font-bold">{`Memories (${memories?.total ?? '-'})`}</h1>
8080
<button
81-
className="flex w-16 cursor-pointer items-center justify-center py-1.5 text-[#7A818B] transition hover:not-disabled:text-(--color-main-text)"
81+
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"
8282
onClick={() => handleDeleteAll.mutate()}
8383
disabled={!memories || !memories.total}
8484
>

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { API_URL } from '@/env'
2+
import { useQuery } from '@tanstack/react-query'
3+
import { Link } from 'react-router'
4+
import { TMemory } from '../types'
5+
import DeveloperMode from './DeveloperMode'
6+
import Header from './Header'
7+
import Layout from './Layout'
8+
import Warnings from './Warnings'
9+
10+
const queryFn = (name: string, params?: { [key: string]: string | number }) => async () => {
11+
if (!window.Telegram.WebApp.initData) {
12+
throw new Error('Telegram is not available')
13+
}
14+
const response = await fetch(API_URL, {
15+
method: 'POST',
16+
headers: {
17+
Authorization: `Bearer ${window.Telegram.WebApp.initData}`,
18+
'Content-Type': 'application/json',
19+
},
20+
body: JSON.stringify({
21+
jsonrpc: '2.0',
22+
method: name,
23+
params: params ?? {},
24+
id: 1,
25+
}),
26+
})
27+
if (!response.ok) {
28+
throw new Error('Network response was not ok')
29+
}
30+
const data = await response.json()
31+
return data.result
32+
}
33+
34+
const Settings = () => {
35+
const { data: memories } = useQuery<{ items: TMemory[]; total: number }>({
36+
queryKey: ['memories'],
37+
queryFn: queryFn('getMemories', {
38+
offset: 0,
39+
limit: 10,
40+
}),
41+
})
42+
43+
return (
44+
<Layout>
45+
<Header />
46+
<DeveloperMode />
47+
<div className="z-1 flex w-full flex-col items-center justify-between gap-2.5 rounded-xl border border-[#f8f9ff66] px-2.5 py-2 backdrop-blur-3xl backdrop-opacity-80">
48+
<div className="z-1 flex w-full items-center justify-between">
49+
<span className="p-2.5 text-[18px]/[150%] font-normal text-(--color-main-text)">
50+
Memories ({memories?.total ?? '-'})
51+
</span>
52+
<Link
53+
to="/memories"
54+
className="flex cursor-pointer flex-nowrap items-center justify-center rounded-xl bg-(--color-my-primary) px-5 py-2 text-(--color-opposite-text) dark:bg-[#f8f9ff] dark:text-(--color-opposite-text)"
55+
>
56+
Manage
57+
</Link>
58+
</div>
59+
</div>
60+
<Warnings />
61+
</Layout>
62+
)
63+
}
64+
65+
export default Settings

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
22
import { formatDistance } from 'date-fns'
3-
import Trash from '../assets/trash'
43
import { TWarning } from '../types'
54
import Spinner from './Spinner'
65
import { API_URL } from '@/env'
@@ -80,13 +79,13 @@ const Warnings = () => {
8079
return (
8180
<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">
8281
<div className="my-1.5 flex w-full items-center justify-between">
83-
<h1 className="text-center text-2xl font-bold">Warnings</h1>
82+
<h1 className="text-center text-2xl font-bold">{`Warnings (${warnings?.total ?? '-'})`}</h1>
8483
<button
85-
disabled={!warnings?.items.length}
86-
className={`me-2 flex h-5 w-5 cursor-pointer items-center justify-center text-[#7A818B] transition ${warnings?.items.length ? 'hover:text-(--color-main-text)' : ''}`}
84+
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"
8785
onClick={() => handleDeleteAll.mutate({ methodName: 'deleteAllWarnings' })}
86+
disabled={!warnings?.items.length}
8887
>
89-
{handleDeleteAll.isPending ? <Spinner /> : <Trash />}
88+
{handleDeleteAll.isPending ? <Spinner /> : 'Clear all'}
9089
</button>
9190
</div>
9291
{warnings?.items.map((warning) => (

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router'
66
import App from './App.tsx'
77
import Memories from './components/Memories.tsx'
88
import './index.css'
9+
import Settings from './components/Settings.tsx'
910

1011
const queryClient = new QueryClient()
1112

@@ -18,6 +19,10 @@ const router = createBrowserRouter([
1819
path: 'memories',
1920
element: <Memories />,
2021
},
22+
{
23+
path: 'settings',
24+
element: <Settings />,
25+
},
2126
])
2227

2328
createRoot(document.getElementById('root')!).render(

0 commit comments

Comments
 (0)