Skip to content

Commit

Permalink
Visual changes
Browse files Browse the repository at this point in the history
  • Loading branch information
heyqbnk committed May 23, 2024
1 parent 05afc34 commit 2779261
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 109 deletions.
3 changes: 1 addition & 2 deletions src/components/DisplayData/DisplayData.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ export interface DisplayDataProps {
}

export const DisplayData: FC<DisplayDataProps> = ({ header, rows }) => (
<Section>
{header && <Section.Header className='display-data__header'>{header}</Section.Header>}
<Section header={header}>
{rows.map((item, idx) => {
let valueNode: ReactNode;

Expand Down
30 changes: 15 additions & 15 deletions src/pages/IndexPage/IndexPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Section, Cell, Image } from '@telegram-apps/telegram-ui';
import { Section, Cell, Image, List } from '@telegram-apps/telegram-ui';
import type { FC } from 'react';

import { Link } from '@/components/Link/Link.tsx';
Expand All @@ -9,34 +9,34 @@ import './IndexPage.css';

export const IndexPage: FC = () => {
return (
<>
<List>
<Section
header="Features"
footer="You can use these pages to learn more about features, provided by Telegram Mini Apps and other useful projects"
header='Features'
footer='You can use these pages to learn more about features, provided by Telegram Mini Apps and other useful projects'
>
<Link to="/ton-connect">
<Link to='/ton-connect'>
<Cell
before={<Image src={tonSvg} style={{ backgroundColor: '#007AFF' }}/>}
subtitle="Connect your TON wallet"
subtitle='Connect your TON wallet'
>
TON Connect
</Cell>
</Link>
</Section>
<Section
header="Application Launch Data"
footer="These pages help developer to learn more about current launch information"
header='Application Launch Data'
footer='These pages help developer to learn more about current launch information'
>
<Link to="/init-data">
<Cell subtitle="User data, chat information, technical data">Init Data</Cell>
<Link to='/init-data'>
<Cell subtitle='User data, chat information, technical data'>Init Data</Cell>
</Link>
<Link to="/launch-params">
<Cell subtitle="Platform identifier, Mini Apps version, etc.">Launch Parameters</Cell>
<Link to='/launch-params'>
<Cell subtitle='Platform identifier, Mini Apps version, etc.'>Launch Parameters</Cell>
</Link>
<Link to="/theme-params">
<Cell subtitle="Telegram application palette information">Theme Parameters</Cell>
<Link to='/theme-params'>
<Cell subtitle='Telegram application palette information'>Theme Parameters</Cell>
</Link>
</Section>
</>
</List>
);
};
8 changes: 4 additions & 4 deletions src/pages/InitDataPage/InitDataPage.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { type FC, useMemo } from 'react';
import { useInitData, useLaunchParams, type User } from '@tma.js/sdk-react';
import { Placeholder } from '@telegram-apps/telegram-ui';
import { List, Placeholder } from '@telegram-apps/telegram-ui';

import { DisplayData, type DisplayDataRow } from '@/components/DisplayData/DisplayData.tsx';

Expand Down Expand Up @@ -91,11 +91,11 @@ export const InitDataPage: FC = () => {
)
}
return (
<>
<DisplayData header={'InitData'} rows={initDataRows}/>
<List>
<DisplayData header={'Init Data'} rows={initDataRows}/>
{userRows && <DisplayData header={'User'} rows={userRows}/>}
{receiverRows && <DisplayData header={'Receiver'} rows={receiverRows}/>}
{chatRows && <DisplayData header={'Chat'} rows={chatRows}/>}
</>
</List>
)
};
48 changes: 5 additions & 43 deletions src/pages/LaunchParamsPage/LaunchParamsPage.tsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,25 @@
import { useLaunchParams } from '@tma.js/sdk-react';
import { List } from '@telegram-apps/telegram-ui';
import type { FC } from 'react';

import { DisplayData } from '@/components/DisplayData/DisplayData.tsx';
import { Link } from '@/components/Link/Link.tsx';
import { Page } from '@/components/Page/Page.tsx';

export const LaunchParamsPage: FC = () => {
const lp = useLaunchParams();

return (
<DisplayData
header="Launch Params"
footer={
<>
This page displays application
{' '}
<Link to="https://docs.telegram-mini-apps.com/platform/launch-parameters">
launch parameters
</Link>
.
</>
}
rows={[
{ title: 'tgWebAppPlatform', value: lp.platform },
{ title: 'tgWebAppShowSettings', value: lp.showSettings },
{ title: 'tgWebAppVersion', value: lp.version },
{ title: 'tgWebAppBotInline', value: lp.botInline },
{ title: 'tgWebAppStartParam', value: lp.showSettings },
{ title: 'tgWebAppData', type: 'link', value: '/init-data' },
{ title: 'tgWebAppThemeParams', type: 'link', value: '/theme-params' },
]}
/>
);

return (
<Page
title="Launch Params"
disclaimer={(
<>
This page displays application
{' '}
<Link to="https://docs.telegram-mini-apps.com/platform/launch-parameters">
launch parameters
</Link>
.
</>
)}
>
<List>
<DisplayData
rows={[
{ title: 'tgWebAppPlatform', value: lp.platform },
{ title: 'tgWebAppShowSettings', value: lp.showSettings },
{ title: 'tgWebAppVersion', value: lp.version },
{ title: 'tgWebAppBotInline', value: lp.botInline },
{ title: 'tgWebAppStartParam', value: lp.showSettings },
{ title: 'tgWebAppData', value: <Link to="/init-data">View</Link> },
{ title: 'tgWebAppThemeParams', value: <Link to="/theme-params">View</Link> },
{ title: 'tgWebAppData', type: 'link', value: '/init-data' },
{ title: 'tgWebAppThemeParams', type: 'link', value: '/theme-params' },
]}
/>
</Page>
</List>
);
};
56 changes: 34 additions & 22 deletions src/pages/TONConnectPage/TONConnectPage.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import { useUtils } from '@tma.js/sdk-react';
import { TonConnectButton, useTonWallet } from '@tonconnect/ui-react';
import { Avatar, Cell, Navigation, Placeholder, Text, Title } from '@telegram-apps/telegram-ui';
import {
Avatar,
Cell,
List,
Navigation,
Placeholder, Section,
Text,
Title,
} from '@telegram-apps/telegram-ui';
import type { FC } from 'react';

import { DisplayData } from '@/components/DisplayData/DisplayData.tsx';
Expand All @@ -14,14 +22,14 @@ export const TONConnectPage: FC = () => {
if (!wallet) {
return (
<Placeholder
className="ton-connect-page__placeholder"
header="TON Connect"
className='ton-connect-page__placeholder'
header='TON Connect'
description={
<>
<Text>
To display the data related to the TON Connect, it is required to connect your wallet
</Text>
<TonConnectButton className="ton-connect-page__button"/>
<TonConnectButton className='ton-connect-page__button'/>
</>
}
/>
Expand All @@ -40,33 +48,37 @@ export const TONConnectPage: FC = () => {
} = wallet;

return (
<>
<TonConnectButton className="ton-connect-page__button-connected"/>
<List>
{'imageUrl' in wallet && (
<Cell
before={
<Avatar src={wallet.imageUrl} alt="Provider logo" width={60} height={60}/>
}
after={<Navigation>About wallet</Navigation>}
subtitle={wallet.appName}
onClick={(e) => {
e.preventDefault();
utils.openLink(wallet.aboutUrl);
}}
>
<Title level="3">{wallet.name}</Title>
</Cell>
<>
<Section>
<Cell
before={
<Avatar src={wallet.imageUrl} alt='Provider logo' width={60} height={60}/>
}
after={<Navigation>About wallet</Navigation>}
subtitle={wallet.appName}
onClick={(e) => {
e.preventDefault();
utils.openLink(wallet.aboutUrl);
}}
>
<Title level='3'>{wallet.name}</Title>
</Cell>
</Section>
<TonConnectButton className='ton-connect-page__button-connected'/>
</>
)}
<DisplayData
header="Account"
header='Account'
rows={[
{ title: 'Address', value: address },
{ title: 'Chain', value: chain },
{ title: 'Public Key', value: publicKey },
]}
/>
<DisplayData
header="Device"
header='Device'
rows={[
{ title: 'App Name', value: appName },
{ title: 'App Version', value: appVersion },
Expand All @@ -81,6 +93,6 @@ export const TONConnectPage: FC = () => {
},
]}
/>
</>
</List>
);
};
38 changes: 15 additions & 23 deletions src/pages/ThemeParamsPage/ThemeParamsPage.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,26 @@
import { useThemeParams } from '@tma.js/sdk-react';
import type { FC } from 'react';
import { List } from '@telegram-apps/telegram-ui';

import { DisplayData } from '@/components/DisplayData/DisplayData.tsx';
import { Link } from '@/components/Link/Link.tsx';

export const ThemeParamsPage: FC = () => {
const themeParams = useThemeParams();

return (
<DisplayData
header={
<>
This page displays current
{' '}
<Link to="https://docs.telegram-mini-apps.com/platform/theming">
theme parameters
</Link>
. It is reactive, so, changing theme externally will lead to this page updates.
</>
}
rows={
Object
.entries(themeParams.getState())
.map(([title, value]) => ({
title: title
.replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`)
.replace(/background/, 'bg'),
value,
}))
}
/>
<List>
<DisplayData
rows={
Object
.entries(themeParams.getState())
.map(([title, value]) => ({
title: title
.replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`)
.replace(/background/, 'bg'),
value,
}))
}
/>
</List>
);
};

0 comments on commit 2779261

Please sign in to comment.