✨ feat:

iconfont.json

@@ -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
+}

package.json

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

src/App.tsx

@@ -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";

src/components/iconfont/IconDianbao.tsx

@@ -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;

src/components/iconfont/IconTuite.tsx

@@ -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;

src/components/iconfont/helper.ts

@@ -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;
+};

src/components/iconfont/index.tsx

@@ -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;

src/pages/Frends.tsx

@@ -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>
   );
 }

src/pages/Guide-m.module.css

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

src/pages/Guide.tsx

@@ -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>Your account number is #{initDataUnsafe?.user?.id}.</span>
-            <span>You're in the Top 30% Telegram users</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>

src/pages/Home-m.module.css

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

src/pages/Home.tsx

@@ -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>Follow X @PioneerPortal</span>
-          <span>Join X To Get Reward</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" />
+            {/* <CheckOutline color="#ffffff" /> */}
-            <span>Telegram Premium</span>
+            <IconFont name="dianbao" color="#ffffff" />
+            <span>Join Telegram</span>
             <span>{tgReward || 0}</span>
           </div>
 
           <div className={classes.reward_list}>
-            <CheckOutline color="#ffffff" />
+            {/* <CheckOutline color="#ffffff" /> */}
-            <span>Join X</span>
+            <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>
     </>

src/pages/Leaderboard.tsx

@@ -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="" />

src/store/User.ts

@@ -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
     }
   )
 );

yarn.lock

@@ -56,14 +56,14 @@ __metadata:
   linkType: hard
 
 "@babel/generator@npm:^7.24.8, @babel/generator@npm:^7.24.9":
-  version: 7.24.9
+  version: 7.24.10
-  resolution: "@babel/generator@npm:7.24.9"
+  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":
+"@remix-run/router@npm:1.18.0":
-  version: 1.17.1
+  version: 1.18.0
-  resolution: "@remix-run/router@npm:1.17.1"
+  resolution: "@remix-run/router@npm:1.18.0"
-  checksum: 10c0/bee1631feb03975b64e1c7b574da432a05095dda2ff0f164c737e4952841a58d7b9861de87bd13a977fd970c74dcf8c558fc2d26c6ec01a9ae9041b1b4430869
+  checksum: 10c0/3ec7e441a0e54932a3d3bf932432094420f2c117715d80a5454bc7e55d13b91250749942aab032cd07aee191f1c1de33fede8682025bfd3a453dd207c016e140
   languageName: node
   linkType: hard
 
@@ -936,11 +936,11 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:^20.14.10":
-  version: 20.14.10
+  version: 20.14.11
-  resolution: "@types/node@npm:20.14.10"
+  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
+  version: 2.0.17
-  resolution: "node-releases@npm:2.0.14"
+  resolution: "node-releases@npm:2.0.17"
-  checksum: 10c0/199fc93773ae70ec9969bc6d5ac5b2bbd6eb986ed1907d751f411fef3ede0e4bfdb45ceb43711f8078bea237b6036db8b1bf208f6ff2b70c7d615afd157f3ab9
+  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
+  version: 6.25.0
-  resolution: "react-router-dom@npm:6.24.1"
+  resolution: "react-router-dom@npm:6.25.0"
   dependencies:
-    "@remix-run/router": "npm:1.17.1"
+    "@remix-run/router": "npm:1.18.0"
-    react-router: "npm:6.24.1"
+    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":
+"react-router@npm:6.25.0":
-  version: 6.24.1
+  version: 6.25.0
-  resolution: "react-router@npm:6.24.1"
+  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
+  version: 7.6.3
-  resolution: "semver@npm:7.6.2"
+  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
+  version: 5.3.4
-  resolution: "vite@npm:5.3.3"
+  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