feat:

This commit is contained in:
john 2024-07-17 13:06:45 +08:00
parent df201eaae9
commit e81a580c6e
17 changed files with 233 additions and 90 deletions

Binary file not shown.

8
iconfont.json Normal file
View File

@ -0,0 +1,8 @@
{
"symbol_url": "//at.alicdn.com/t/c/font_4623671_wsjnprwq51.js",
"use_typescript": true,
"save_dir": "./src/components/iconfont",
"trim_icon_prefix": "icon",
"unit": "px",
"default_icon_size": 18
}

View File

@ -1,5 +1,5 @@
{
"name": "tg-bot-miniapp",
"name": "pioneer-tg-miniapp",
"private": true,
"version": "0.0.0",
"type": "module",

View File

@ -1,7 +1,7 @@
/*
* @LastEditors: John
* @Date: 2024-07-13 10:21:58
* @LastEditTime: 2024-07-16 17:14:10
* @LastEditTime: 2024-07-17 11:39:33
* @Author: John
*/
import { Route, Routes, useNavigate } from "react-router-dom";

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -0,0 +1,33 @@
/* tslint:disable */
/* eslint-disable */
import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
import { getIconColor } from './helper';
interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
size?: number;
color?: string | string[];
}
const DEFAULT_STYLE: CSSProperties = {
display: 'block',
};
const IconDianbao: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
return (
<svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
<path
d="M390.39763376 902.25875678l15.55379104-230.47890347 418.53837681-376.11894674c18.38175303-16.96777203-4.24194301-25.45165805-28.27962004-9.89786702L280.10711554 610.9786702l-223.40899844-70.69905014c-48.07535409-14.13981003-48.07535409-46.6613731 11.31184802-70.69905014L936.19430083 134.46707225c39.59146809-18.38175303 77.76895517 9.89786702 62.21516414 70.69905013L851.35544067 902.25875678c-9.89786702 49.48933509-39.59146809 62.21516412-82.01089815 38.17748707L544.52156306 773.58648551 435.64502585 879.63506073c-12.72582902 12.72582902-22.62369604 22.62369604-45.24739209 22.62369605z m0 0"
fill={getIconColor(color, 0, '#333333')}
/>
</svg>
);
};
IconDianbao.defaultProps = {
size: 18,
};
export default IconDianbao;

View File

@ -0,0 +1,33 @@
/* tslint:disable */
/* eslint-disable */
import React, { CSSProperties, SVGAttributes, FunctionComponent } from 'react';
import { getIconColor } from './helper';
interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
size?: number;
color?: string | string[];
}
const DEFAULT_STYLE: CSSProperties = {
display: 'block',
};
const IconTuite: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
return (
<svg viewBox="0 0 1024 1024" width={size + 'px'} height={size + 'px'} style={style} {...rest}>
<path
d="M806.4 51.2h157.866667l-341.333334 392.533333L1024 972.8h-315.733333l-247.466667-324.266667-281.6 324.266667H21.333333L388.266667 554.666667 0 51.2h324.266667l221.866666 294.4 260.266667-294.4z m-55.466667 827.733333h85.333334L277.333333 136.533333H183.466667l567.466666 742.4z"
fill={getIconColor(color, 0, '#231815')}
/>
</svg>
);
};
IconTuite.defaultProps = {
size: 18,
};
export default IconTuite;

View File

@ -0,0 +1,12 @@
/* tslint:disable */
/* eslint-disable */
export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
return color
? (
typeof color === 'string'
? color
: color[index] || defaultColor
)
: defaultColor;
};

View File

@ -0,0 +1,30 @@
/* tslint:disable */
/* eslint-disable */
import React, { SVGAttributes, FunctionComponent } from 'react';
import IconDianbao from './IconDianbao';
import IconTuite from './IconTuite';
export { default as IconDianbao } from './IconDianbao';
export { default as IconTuite } from './IconTuite';
export type IconNames = 'dianbao' | 'tuite';
interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
name: IconNames;
size?: number;
color?: string | string[];
}
const IconFont: FunctionComponent<Props> = ({ name, ...rest }) => {
switch (name) {
case 'dianbao':
return <IconDianbao {...rest} />;
case 'tuite':
return <IconTuite {...rest} />;
}
return null;
};
export default IconFont;

View File

@ -1,7 +1,7 @@
/*
* @LastEditors: John
* @Date: 2024-07-13 16:08:30
* @LastEditTime: 2024-07-16 16:19:37
* @LastEditTime: 2024-07-17 09:50:56
* @Author: John
*/
/*
@ -35,7 +35,7 @@ export default function () {
<>
<div className={classes.frends}>
<span className={classes.top_title}>
Invite friends and get more PEPES
Invite friends and get more PIONEER
</span>
<img className={classes.logo} src={logo} alt="" />
<span className={classes.tip}>
@ -69,7 +69,7 @@ function FrendsItem({ userName, point }: { userName: string; point: string }) {
<li className={classes.frends_list_item}>
<Avatar src="" />
<span>{userName}</span>
<span>+{point} PEPES</span>
<span>+{point} PIONEER</span>
</li>
);
}

View File

@ -86,6 +86,8 @@
}
> svg {
margin-left: auto;
width: 24px;
height: 24px;
}
}
}

View File

@ -6,6 +6,7 @@ import { Button, ProgressBar } from "antd-mobile";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { CheckCircleFill } from "antd-mobile-icons";
import { useInitData } from "@vkruglikov/react-telegram-web-app";
export default function () {
const [step, setStep] = useState(1);
@ -73,6 +74,7 @@ function Step3() {
const navigate = useNavigate();
const [years, setYears] = useState<number | undefined>();
const [reward, setReward] = useState<string | undefined>();
const [initDataUnsafe, initData] = useInitData();
useEffect(() => {
(async () => {
const { data } = await api_receive_rewards().send({
@ -101,14 +103,17 @@ function Step3() {
<span>{years}</span>
<span>years ago</span>
</div>
<span>Your account number is #1969081558.</span>
<span>You're in the Top 30% Telegram users</span>
<span>Your account number is #{initDataUnsafe?.user?.id}.</span>
<span>
You're in the Top {parseInt(`${((years || 0) / 9) * 100}`)}%
Telegram users
</span>
</div>
)}
{currentPage == 2 && (
<div className={classes.page2}>
<span>You are amazing!</span>
<span>Here is your PEPES reward</span>
<span>Here is your PIONEER reward</span>
<div className={classes.point}>
<img src={logo} alt="" />
<span>{reward}</span>

View File

@ -193,6 +193,11 @@
margin-left: auto;
}
}
> svg {
width: 19px;
height: 19px;
}
}
}
}

View File

@ -1,14 +1,19 @@
/*
* @LastEditors: John
* @Date: 2024-07-13 10:50:24
* @LastEditTime: 2024-07-16 16:27:46
* @LastEditTime: 2024-07-17 11:15:07
* @Author: John
*/
import classes from "./Home-m.module.css";
import { Routes, useNavigate } from "react-router-dom";
import home_top_bg from "@/assets/home_top_bg.svg";
import logo from "@/assets/logo.png";
import { CheckOutline, PlayOutline, StarOutline } from "antd-mobile-icons";
import {
CheckOutline,
PlayOutline,
StarOutline,
UserAddOutline,
} from "antd-mobile-icons";
import { Button } from "antd-mobile";
import { useEffect, useState } from "react";
import {
@ -17,6 +22,7 @@ import {
api_query_whether_the_user_receives_the_registration_reward,
} from "@/server/api";
import { useWebApp } from "@vkruglikov/react-telegram-web-app";
import IconFont from "@/components/iconfont";
export default function () {
const WebApp = useWebApp();
const navigate = useNavigate();
@ -53,10 +59,10 @@ export default function () {
</div>
<img src={logo} alt="" className={classes.logo} />
<span className={classes.pepes}>{totalPoint || 0} PEPES</span>
<span className={classes.pepes}>{totalPoint || 0} PIONEER</span>
<div className={classes.join_card}>
<span>DOGS COMMUNITY</span>
<span>PIONEER COMMUNITY</span>
<span>Home for Telegram OGs</span>
<Button
fill="none"
@ -71,8 +77,8 @@ export default function () {
</div>
<div className={classes.join_card}>
<span>Join X</span>
<span>Join X To Get Reward</span>
<span>Follow X @PioneerPortal</span>
<span>Follow X To Get Reward</span>
<Button
fill="none"
onClick={async () => {
@ -81,7 +87,7 @@ export default function () {
UpdateHomeData();
}}
>
join
Follow
</Button>
</div>
@ -91,20 +97,29 @@ export default function () {
<div className={classes.reward_list}>
<StarOutline color="#ffffff" />
<span>Your rewards</span>
<span>+{signReward || 0} PEPES</span>
<span>+{signReward || 0} PIONEER</span>
</div>
<div className={classes.reward_list}>
<CheckOutline color="#ffffff" />
<span>Telegram Premium</span>
{/* <CheckOutline color="#ffffff" /> */}
<IconFont name="dianbao" color="#ffffff" />
<span>Join Telegram</span>
<span>{tgReward || 0}</span>
</div>
<div className={classes.reward_list}>
<CheckOutline color="#ffffff" />
<span>Join X</span>
{/* <CheckOutline color="#ffffff" /> */}
<IconFont name="tuite" color="#ffffff" />
<span>Follow X @PioneerPortal</span>
<span>{xReward || 0}</span>
</div>
<div className={classes.reward_list}>
{/* <CheckOutline color="#ffffff" /> */}
<UserAddOutline color="#ffffff" />
<span>Invite friends</span>
<span>{0}</span>
</div>
</div>
</div>
</>

View File

@ -1,7 +1,7 @@
/*
* @LastEditors: John
* @Date: 2024-07-13 16:08:04
* @LastEditTime: 2024-07-15 15:27:41
* @LastEditTime: 2024-07-17 09:51:09
* @Author: John
*/
import { Avatar, Button } from "antd-mobile";
@ -37,7 +37,7 @@ export default function () {
<Avatar src="" />
<div>
<span>{userRank?.tgName}</span>
<span>{userRank?.amount} PEPES</span>
<span>{userRank?.amount} PIONEER</span>
</div>
<span>#{userRank?.ranking}</span>
</div>
@ -76,7 +76,7 @@ function RankItem({
<Avatar src="" />
<div>
<span>{userName}</span>
<span>{point} PEPES</span>
<span>{point} PIONEER</span>
</div>
{index == 1 && (
<img className={classes.rank_item_icon} src={rank1} alt="" />

View File

@ -1,7 +1,7 @@
/*
* @LastEditors: John
* @Date: 2024-06-17 17:45:43
* @LastEditTime: 2024-07-15 15:10:52
* @LastEditTime: 2024-07-17 11:24:15
* @Author: John
*/
import { ASYNC_STORAGE_KEY, Lang } from "@/constants";
@ -28,7 +28,7 @@ export const useUserStore = create<UserState>()(
}),
{
name: ASYNC_STORAGE_KEY.Store, // name of item in the storage (must be unique)
storage: createJSONStorage(() => localStorage), // (optional) by default the 'localStorage' is used
storage: createJSONStorage(() => sessionStorage), // (optional) by default the 'localStorage' is used
}
)
);

130
yarn.lock
View File

@ -56,14 +56,14 @@ __metadata:
linkType: hard
"@babel/generator@npm:^7.24.8, @babel/generator@npm:^7.24.9":
version: 7.24.9
resolution: "@babel/generator@npm:7.24.9"
version: 7.24.10
resolution: "@babel/generator@npm:7.24.10"
dependencies:
"@babel/types": "npm:^7.24.9"
"@jridgewell/gen-mapping": "npm:^0.3.5"
"@jridgewell/trace-mapping": "npm:^0.3.25"
jsesc: "npm:^2.5.1"
checksum: 10c0/cd1f7edce7717462546c349e15289d1267a3ed627c6f6583fbf51e78eacacc6500ec2f0024f08f1cc7138989e575635b931acf4549f9e728017a22176a9ea6b6
checksum: 10c0/abcfd75f625aecc87ce6036ef788b12723fd3c46530df1130d1f00d18e48b462849ddaeef8b1a02bfdcb6e28956389a98c5729dad1c3c5448307dacb6c959f29
languageName: node
linkType: hard
@ -768,10 +768,10 @@ __metadata:
languageName: node
linkType: hard
"@remix-run/router@npm:1.17.1":
version: 1.17.1
resolution: "@remix-run/router@npm:1.17.1"
checksum: 10c0/bee1631feb03975b64e1c7b574da432a05095dda2ff0f164c737e4952841a58d7b9861de87bd13a977fd970c74dcf8c558fc2d26c6ec01a9ae9041b1b4430869
"@remix-run/router@npm:1.18.0":
version: 1.18.0
resolution: "@remix-run/router@npm:1.18.0"
checksum: 10c0/3ec7e441a0e54932a3d3bf932432094420f2c117715d80a5454bc7e55d13b91250749942aab032cd07aee191f1c1de33fede8682025bfd3a453dd207c016e140
languageName: node
linkType: hard
@ -936,11 +936,11 @@ __metadata:
linkType: hard
"@types/node@npm:^20.14.10":
version: 20.14.10
resolution: "@types/node@npm:20.14.10"
version: 20.14.11
resolution: "@types/node@npm:20.14.11"
dependencies:
undici-types: "npm:~5.26.4"
checksum: 10c0/0b06cff14365c2d0085dc16cc8cbea5c40ec09cfc1fea966be9eeecf35562760bfde8f88e86de6edfaf394501236e229d9c1084fad04fb4dec472ae245d8ae69
checksum: 10c0/5306becc0ff41d81b1e31524bd376e958d0741d1ce892dffd586b9ae0cb6553c62b0d62abd16da8bea6b9a2c17572d360450535d7c073794b0cef9cb4e39691e
languageName: node
linkType: hard
@ -2780,9 +2780,9 @@ __metadata:
linkType: hard
"node-releases@npm:^2.0.14":
version: 2.0.14
resolution: "node-releases@npm:2.0.14"
checksum: 10c0/199fc93773ae70ec9969bc6d5ac5b2bbd6eb986ed1907d751f411fef3ede0e4bfdb45ceb43711f8078bea237b6036db8b1bf208f6ff2b70c7d615afd157f3ab9
version: 2.0.17
resolution: "node-releases@npm:2.0.17"
checksum: 10c0/8b8af0ade683e89e1a9c379e3a2d89604c9ae767ef1e52aa5029ca2db1fab5f741140d04cdbf204f56e4a789e319908988291fb22015f8e9f784b7ea9b1b3dd3
languageName: node
linkType: hard
@ -2922,6 +2922,42 @@ __metadata:
languageName: node
linkType: hard
"pioneer-tg-miniapp@workspace:.":
version: 0.0.0-use.local
resolution: "pioneer-tg-miniapp@workspace:."
dependencies:
"@hyper-fetch/core": "npm:^5.7.5"
"@hyper-fetch/react": "npm:^5.7.5"
"@types/node": "npm:^20.14.10"
"@types/postcss-pxtorem": "npm:^6.0.3"
"@types/react": "npm:^18.3.3"
"@types/react-dom": "npm:^18.3.0"
"@typescript-eslint/eslint-plugin": "npm:^7.13.1"
"@typescript-eslint/parser": "npm:^7.13.1"
"@vitejs/plugin-react": "npm:^4.3.1"
"@vkruglikov/react-telegram-web-app": "npm:2.1.9"
antd-mobile: "npm:^5.37.1"
antd-mobile-icons: "npm:^0.3.0"
autoprefixer: "npm:^10.4.19"
clsx: "npm:^2.1.1"
eslint: "npm:^8.57.0"
eslint-plugin-react-hooks: "npm:^4.6.2"
eslint-plugin-react-refresh: "npm:^0.4.7"
postcss: "npm:^8.4.39"
postcss-pxtorem: "npm:^6.1.0"
react: "npm:^18.3.1"
react-dom: "npm:^18.3.1"
react-iconfont-cli: "npm:^2.0.2"
react-router-dom: "npm:^6.24.1"
tailwind-merge: "npm:^2.4.0"
typescript: "npm:^5.2.2"
vconsole: "npm:^3.15.1"
vite: "npm:^5.3.1"
vite-plugin-compression: "npm:^0.5.1"
zustand: "npm:^4.5.4"
languageName: unknown
linkType: soft
"postcss-pxtorem@npm:^6.1.0":
version: 6.1.0
resolution: "postcss-pxtorem@npm:6.1.0"
@ -3069,26 +3105,26 @@ __metadata:
linkType: hard
"react-router-dom@npm:^6.24.1":
version: 6.24.1
resolution: "react-router-dom@npm:6.24.1"
version: 6.25.0
resolution: "react-router-dom@npm:6.25.0"
dependencies:
"@remix-run/router": "npm:1.17.1"
react-router: "npm:6.24.1"
"@remix-run/router": "npm:1.18.0"
react-router: "npm:6.25.0"
peerDependencies:
react: ">=16.8"
react-dom: ">=16.8"
checksum: 10c0/458c6c539304984c47b0ad8d5d5b1f8859cc0845e47591d530cb4fcb13498f70a89b42bc4daeea55d57cfa08408b453bcf601cabb2c987f554cdcac13805caa8
checksum: 10c0/a837686f3ce9a12224d97e9b200a0e38575f32a568c80d5d8470e8f14208986ab266c1d6ec95e903ab3b1c3d1273cfe886401c33bdef393aa2c7eef4d6987692
languageName: node
linkType: hard
"react-router@npm:6.24.1":
version: 6.24.1
resolution: "react-router@npm:6.24.1"
"react-router@npm:6.25.0":
version: 6.25.0
resolution: "react-router@npm:6.25.0"
dependencies:
"@remix-run/router": "npm:1.17.1"
"@remix-run/router": "npm:1.18.0"
peerDependencies:
react: ">=16.8"
checksum: 10c0/f50c78ca52c5154ab933c17708125e8bf71ccf2072993a80302526a0a23db9ceac6e36d5c891d62ccd16f13e60cd1b6533a2036523d1b09e0148ac49e34b2e83
checksum: 10c0/82a7e9de69f444c57bbece2904518f1279a8ef80563172fff36cec3b74d854ae5702c560b6f9e02a5439b756f884dc16b81996ba613b3b6c0b31cd16bd1bc189
languageName: node
linkType: hard
@ -3266,11 +3302,11 @@ __metadata:
linkType: hard
"semver@npm:^7.3.5, semver@npm:^7.6.0":
version: 7.6.2
resolution: "semver@npm:7.6.2"
version: 7.6.3
resolution: "semver@npm:7.6.3"
bin:
semver: bin/semver.js
checksum: 10c0/97d3441e97ace8be4b1976433d1c32658f6afaff09f143e52c593bae7eef33de19e3e369c88bd985ce1042c6f441c80c6803078d1de2a9988080b66684cbb30c
checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
languageName: node
linkType: hard
@ -3457,42 +3493,6 @@ __metadata:
languageName: node
linkType: hard
"tg-bot-miniapp@workspace:.":
version: 0.0.0-use.local
resolution: "tg-bot-miniapp@workspace:."
dependencies:
"@hyper-fetch/core": "npm:^5.7.5"
"@hyper-fetch/react": "npm:^5.7.5"
"@types/node": "npm:^20.14.10"
"@types/postcss-pxtorem": "npm:^6.0.3"
"@types/react": "npm:^18.3.3"
"@types/react-dom": "npm:^18.3.0"
"@typescript-eslint/eslint-plugin": "npm:^7.13.1"
"@typescript-eslint/parser": "npm:^7.13.1"
"@vitejs/plugin-react": "npm:^4.3.1"
"@vkruglikov/react-telegram-web-app": "npm:2.1.9"
antd-mobile: "npm:^5.37.1"
antd-mobile-icons: "npm:^0.3.0"
autoprefixer: "npm:^10.4.19"
clsx: "npm:^2.1.1"
eslint: "npm:^8.57.0"
eslint-plugin-react-hooks: "npm:^4.6.2"
eslint-plugin-react-refresh: "npm:^0.4.7"
postcss: "npm:^8.4.39"
postcss-pxtorem: "npm:^6.1.0"
react: "npm:^18.3.1"
react-dom: "npm:^18.3.1"
react-iconfont-cli: "npm:^2.0.2"
react-router-dom: "npm:^6.24.1"
tailwind-merge: "npm:^2.4.0"
typescript: "npm:^5.2.2"
vconsole: "npm:^3.15.1"
vite: "npm:^5.3.1"
vite-plugin-compression: "npm:^0.5.1"
zustand: "npm:^4.5.4"
languageName: unknown
linkType: soft
"to-fast-properties@npm:^2.0.0":
version: 2.0.0
resolution: "to-fast-properties@npm:2.0.0"
@ -3667,8 +3667,8 @@ __metadata:
linkType: hard
"vite@npm:^5.3.1":
version: 5.3.3
resolution: "vite@npm:5.3.3"
version: 5.3.4
resolution: "vite@npm:5.3.4"
dependencies:
esbuild: "npm:^0.21.3"
fsevents: "npm:~2.3.3"
@ -3702,7 +3702,7 @@ __metadata:
optional: true
bin:
vite: bin/vite.js
checksum: 10c0/a796872e1d11875d994615cd00da185c80eeb7753034d35c096050bf3c269c02004070cf623c5fe2a4a90ea2f12488e6f9d13933ec810f117f1b931e1b5e3385
checksum: 10c0/604a1c8698bcf09d6889533c552f20137c80cb5027e9e7ddf6215d51e3df763414f8712168c22b3c8c16383aff9447094c05f21d7cca3c115874ff9d12e1538e
languageName: node
linkType: hard