Optimize chain config

src/components/Select/index.tsx

@@ -1,27 +1,25 @@
 import React from 'react';
-import { Select, MenuItem, SelectChangeEvent } from '@mui/material';
-import { getCurrentChain } from '../../config/chainConfig';
-interface TSelectProps {
-  handleChange: (value: string) => void;
-}
+import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
 
-const TSelect: React.FC<TSelectProps> = ({ handleChange }) => {
-  const [selectedValue, setSelectedValue] = React.useState(getCurrentChain());
+import { Chain } from '../../config/chainConfig';
+import useGlobalStore from '../../store/useGlobalStore';
 
-  const handleInternalChange = (event: SelectChangeEvent<string>) => {
-    const value = event.target.value;
-    setSelectedValue(value);
-    handleChange(value); // 调用传入的 handleChange 函数
+const TSelect = () => {
+  const { chain } = useGlobalStore();
+
+  const handleInternalChange = (event: SelectChangeEvent<Chain>) => {
+    const value = event.target.value as Chain;
+    useGlobalStore.setState({ chain: value });
   };
 
   return (
-    <Select
-      value={selectedValue}
+    <Select<Chain>
+      value={chain}
       onChange={handleInternalChange}
       style={{ minWidth: '120px', height: '60px' }}
     >
-      <MenuItem value="arb">arb</MenuItem>
-      <MenuItem value="bera">bera</MenuItem>
+      <MenuItem value={Chain.Arb}>{Chain.Arb}</MenuItem>
+      <MenuItem value={Chain.Bera}>{Chain.Bera}</MenuItem>
     </Select>
   );
 };

src/config/chainConfig.ts

@@ -1,39 +1,33 @@
-import { XFANS_NETWORK_ARB, XFANS_NETWORK_BERA } from '../constants';
-interface ChainConfigType {
+export enum Chain {
+  Arb = 'arb',
+  Bera = 'bera',
+}
+
+export const chainNameMap = {
+  [Chain.Arb]: 'Arb Sepolia',
+  [Chain.Bera]: 'Bera Artio',
+};
+
+export interface ChainConfigType {
   vite_socket_base_url: string;
   vite_room_base_url: string;
   vite_contract_base_url: string;
   vite_base_url: string;
 }
 
-const _chainConfig: Record<string, ChainConfigType> = {
-  arb: {
-    vite_socket_base_url: import.meta.env.VITE_ARB_SOCKET_BASE_URL!,
-    vite_room_base_url: import.meta.env.VITE_ARB_ROOM_BASE_URL!,
-    vite_contract_base_url: import.meta.env.VITE_ARB_CONTRACT_BASE_URL!,
-    vite_base_url: import.meta.env.VITE_ARB_BASE_URL!,
+const chainConfig: Record<Chain, ChainConfigType> = {
+  [Chain.Arb]: {
+    vite_socket_base_url: import.meta.env.VITE_ARB_SOCKET_BASE_URL,
+    vite_room_base_url: import.meta.env.VITE_ARB_ROOM_BASE_URL,
+    vite_contract_base_url: import.meta.env.VITE_ARB_CONTRACT_BASE_URL,
+    vite_base_url: import.meta.env.VITE_ARB_BASE_URL,
   },
-  bera: {
-    vite_socket_base_url: import.meta.env.VITE_BERA_SOCKET_BASE_URL!,
-    vite_room_base_url: import.meta.env.VITE_BERA_ROOM_BASE_URL!,
-    vite_contract_base_url: import.meta.env.VITE_BERA_CONTRACT_BASE_URL!,
-    vite_base_url: import.meta.env.VITE_BERA_BASE_URL!,
+  [Chain.Bera]: {
+    vite_socket_base_url: import.meta.env.VITE_BERA_SOCKET_BASE_URL,
+    vite_room_base_url: import.meta.env.VITE_BERA_ROOM_BASE_URL,
+    vite_contract_base_url: import.meta.env.VITE_BERA_CONTRACT_BASE_URL,
+    vite_base_url: import.meta.env.VITE_BERA_BASE_URL,
   },
 };
 
-console.log('_chainConfig', _chainConfig);
-const ChainConfig = () => {
-  if (getCurrentChain() == '') console.error('chain info undefined!');
-  return _chainConfig[getCurrentChain()];
-};
-
-export const getCurrentChain = () => localStorage.getItem('current_chain') ?? 'arb';
-export const setCurrentChain = (chain: string) => {
-  localStorage.setItem('current_chain', chain);
-};
-
-export const getCurrentChainName = () => {
-  return getCurrentChain() == 'arb' ? XFANS_NETWORK_ARB : XFANS_NETWORK_BERA;
-};
-
-export default ChainConfig;
+export default chainConfig;

src/constants.ts

@@ -18,6 +18,3 @@ export enum ContractError {
 
 export const XFANS_CONTENT_WIDTH = 433;
 export const XFANS_MIN_WIDTH = 458;
-
-export const XFANS_NETWORK_ARB = 'Arb Sepolia';
-export const XFANS_NETWORK_BERA = 'Bera Artio';

src/content/drawer/index.tsx

@@ -22,7 +22,6 @@ import SignInWithXPage from '../loginPage/signInWithXPage';
 import LogoButton from './logoButton';
 
 import '../../tailwind.css';
-import { setCurrentChain, getCurrentChain } from '../../config/chainConfig';
 
 export default function PersistentDrawerRight() {
   const { isShowDrawer, goPage, page, logout } = useGlobalStore((state) => ({ ...state }));
@@ -243,11 +242,6 @@ export default function PersistentDrawerRight() {
                   });
                   clickLogin();
                 }}
-                handleSwitchSelect={(x: string) => {
-                  setCurrentChain(x);
-                  console.log('select chain', getCurrentChain());
-                  checkProfileData();
-                }}
               />
             )}
             {page === PageType.Invite && (

src/content/loginPage/signInWithXPage.tsx

@@ -2,20 +2,15 @@ import React, { FC } from 'react';
 
 import { NextButton } from '../../components/buttons/loginButton';
 import TSelect from '../../components/Select/index';
-import { setCurrentChain, getCurrentChain } from '../../config/chainConfig';
+
 import '../../tailwind.css';
 
 interface SignInWithXPageProps {
   handleButtonClick: () => void; // 定义一个函数类型的属性
-  handleSwitchSelect: (x: string) => void;
   showLoading: boolean;
 }
 
-const SignInWithXPage: FC<SignInWithXPageProps> = ({
-  handleButtonClick,
-  handleSwitchSelect,
-  showLoading,
-}) => {
+const SignInWithXPage: FC<SignInWithXPageProps> = ({ handleButtonClick, showLoading }) => {
   return (
     <div className="h-full min-h-screen w-full items-center justify-center text-center">
       <img
@@ -59,7 +54,7 @@ const SignInWithXPage: FC<SignInWithXPageProps> = ({
           'Login With X'
         )}
       </NextButton>
-      <TSelect handleChange={handleSwitchSelect} />
+      <TSelect />
     </div>
   );
 };

src/service/request.ts

@@ -7,10 +7,10 @@ import axios, {
 } from 'axios';
 
 import * as toaster from '../components/Toaster';
+import chainConfig from '../config/chainConfig';
 import useGlobalStore from '../store/useGlobalStore';
 
 import { checkStatus } from './checkStatus';
-import ChainConfig, { getCurrentChain } from '../config/chainConfig';
 
 // 请求响应参数（不包含data）
 export interface Result {
@@ -33,7 +33,7 @@ export enum ResultEnum {
 
 const config = {
   // 默认地址请求地址，可在 .env.** 文件中修改
-  baseURL: ChainConfig().vite_base_url,
+  baseURL: chainConfig[useGlobalStore.getState().chain].vite_base_url,
   // 设置超时时间
   timeout: ResultEnum.TIMEOUT as number,
   // 跨域时候允许携带凭证
@@ -42,7 +42,7 @@ const config = {
 
 const contractConfig = {
   // 默认地址请求地址，可在 .env.** 文件中修改
-  baseURL: ChainConfig().vite_contract_base_url,
+  baseURL: chainConfig[useGlobalStore.getState().chain].vite_contract_base_url,
   // 设置超时时间
   timeout: ResultEnum.TIMEOUT as number,
   // 跨域时候允许携带凭证
@@ -51,7 +51,7 @@ const contractConfig = {
 
 const chatConfig = {
   // 默认地址请求地址，可在 .env.** 文件中修改
-  baseURL: ChainConfig().vite_room_base_url,
+  baseURL: chainConfig[useGlobalStore.getState().chain].vite_room_base_url,
   // 设置超时时间
   timeout: ResultEnum.TIMEOUT as number,
   // 跨域时候允许携带凭证
@@ -77,8 +77,8 @@ class RequestHttp {
           config.headers.set('Authorization', 'Bearer ' + token);
         }
         if (chainInfo) {
-          const chainInfo = getCurrentChain();
-          config.url = config?.url?.replace(/(\/xfans\/api\/)/, `/xfans/api/${chainInfo}/`);
+          const currentChain = useGlobalStore.getState().chain;
+          config.url = config?.url?.replace(/(\/xfans\/api\/)/, `/xfans/api/${currentChain}/`);
         }
         return config;
       },

src/store/useGlobalStore.ts

@@ -4,6 +4,8 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
+import ChainConfig, { Chain, ChainConfigType } from '../config/chainConfig';
+
 export enum PageType {
   Login = 'login',
   Invite = 'invite',
@@ -25,11 +27,12 @@ export interface GlobalStoreProps {
   goPage(page: PageType): void;
   logout(): void;
   userVote: Record<string, boolean> | null;
+  chain: Chain;
 }
 
 const useGlobalStore = create<GlobalStoreProps>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       page: PageType.Login,
       token: '',
       isShowPrice: false,
@@ -49,6 +52,7 @@ const useGlobalStore = create<GlobalStoreProps>()(
         });
       },
       userVote: null,
+      chain: Chain.Arb,
     }),
     {
       name: 'xfans-user-config',

src/welcome/Profile/community/useRoom.ts

@@ -3,20 +3,22 @@ import { nanoid } from '@reduxjs/toolkit';
 import { io, Socket } from 'socket.io-client';
 
 import { error } from '../../../components/Toaster';
+import chainConfig from '../../../config/chainConfig';
 import { getMessagesByRoom, ReceiveMessage, SendMessage } from '../../../service/room';
 import useGlobalStore from '../../../store/useGlobalStore';
-import ChainConfig from '../../../config/chainConfig';
+
 import { ToasterMessageType } from './constants';
 
 export default function useRoom(user: string, room?: string) {
   const [messages, setMessages] = useState<ReceiveMessage[]>([]);
   const [socket, setSocket] = useState<Socket>();
   const [members, setMembers] = useState<CommunityUserInfo[]>([]);
+  const { chain } = useGlobalStore();
 
   // 建立 socket
   useEffect(() => {
     if (room == null) return;
-    const socket = io(ChainConfig().vite_socket_base_url, {
+    const socket = io(chainConfig[chain].vite_socket_base_url, {
       autoConnect: false,
       extraHeaders: {
         Authorization: 'Bearer ' + useGlobalStore.getState().token,
@@ -32,7 +34,7 @@ export default function useRoom(user: string, room?: string) {
       setMembers([]);
       socket.disconnect();
     };
-  }, [room, user]);
+  }, [chain, room, user]);
 
   useEffect(() => {
     function handle() {

src/welcome/Wallet/Deposit.tsx

@@ -5,11 +5,14 @@ import { useToggle } from 'ahooks';
 import { BackButton, BasicButton, PrimaryButton } from '../../components/Button';
 import Modal from '../../components/Modal';
 import * as toaster from '../../components/Toaster';
+import { chainNameMap } from '../../config/chainConfig';
+import useGlobalStore from '../../store/useGlobalStore';
 import useGlobalUserStore from '../../store/useGlobalUserStore';
-import { getCurrentChainName } from '../../config/chainConfig';
+
 const Deposit = () => {
   const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
   const accounts = useGlobalUserStore((state) => state.accounts);
+  const { chain } = useGlobalStore();
 
   return (
     <>
@@ -38,7 +41,7 @@ const Deposit = () => {
             <div className="flex flex-col space-y-[14px]">
               <span className="text-base font-medium text-[#919099]">Network</span>
               <div className="rounded-[8px] bg-[#F7F9FA] py-[18px] pl-[26px] text-base font-medium text-[#1A1D1F]">
-                {getCurrentChainName()}
+                {chainNameMap[chain]}
               </div>
             </div>
             <div className="flex flex-col space-y-[14px]">

src/welcome/Wallet/WithDraw.tsx

@@ -9,10 +9,12 @@ import ETHIcon from '../../components/icons/ETHIcon';
 import Modal from '../../components/Modal';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import { error, success } from '../../components/Toaster';
+import { chainNameMap } from '../../config/chainConfig';
 import { ContractError } from '../../constants';
 import useAccount from '../../hooks/useAccount';
 import { transfer as transferApi } from '../../service/contract/shares';
-import { getCurrentChainName } from '../../config/chainConfig';
+import useGlobalStore from '../../store/useGlobalStore';
+
 const TextField = styled(MTextField)({
   width: '493px',
   '& label.Mui-focused': {
@@ -44,6 +46,7 @@ const WithDraw = ({ onClose }: Props) => {
   const { balance, refresh } = useAccount();
   const [address, setAddress] = useState('');
   const [amount, setAmount] = useState('');
+  const { chain } = useGlobalStore();
   const { run: transfer, loading } = useRequest(() => transferApi(address, amount), {
     manual: true,
     onSuccess() {
@@ -95,7 +98,7 @@ const WithDraw = ({ onClose }: Props) => {
         <h2 className="xfans-font-sf text-[24px] font-medium text-[#2E2E32]">Withdraw</h2>
         <div className="mt-[15px] h-[1px] w-[438px] bg-[#EBEEF0]"></div>
         <p className="xfans-font-sf my-6 text-sm text-black text-opacity-50">
-          {`Send your ETH to another wallet address on the ${getCurrentChainName()}`}
+          {`Send your ETH to another wallet address on the ${chainNameMap[chain]}`}
         </p>
 
         <div className="mb-6 w-full space-y-6">

src/welcome/Wallet/index.tsx

@@ -9,21 +9,22 @@ import { InfoCircle } from '../../components/icons/InfoCircle';
 import { NumberDisplayer } from '../../components/NumberDisplayer';
 import * as toaster from '../../components/Toaster';
 import TruncateText from '../../components/TruncateText';
+import { chainNameMap } from '../../config/chainConfig';
 import useAccount from '../../hooks/useAccount';
 import { useUserInfo } from '../../service/user';
 import { useWalletAccounts } from '../../service/wallet';
 import useGlobalStore from '../../store/useGlobalStore';
 import useGlobalUserStore from '../../store/useGlobalUserStore';
 import useProfileModal from '../../store/useProfileModal';
-import { getCurrentChainName } from '../../config/chainConfig';
+
 import Deposit from './Deposit';
 import InviteFriends from './InviteFriends';
 import WithDraw from './WithDraw';
 
 const Wallet = (props: { back?: () => void; logout?: () => void }) => {
   const { openProfile } = useProfileModal((state) => ({ ...state }));
 
-  const { isShowPrice } = useGlobalStore((state) => ({ ...state }));
+  const { isShowPrice, chain } = useGlobalStore((state) => ({ ...state }));
   const { userInfo } = useAccount();
   const { run: getUserInfo } = useUserInfo();
   const [isWithDrawOpen, setIsWithDrawOpen] = useState(false);
@@ -76,7 +77,7 @@ const Wallet = (props: { back?: () => void; logout?: () => void }) => {
               </CopyToClipboard>
 
               <div className="flex items-center space-x-1">
-                <span className="text-[#919099]">{`Network:${getCurrentChainName()}`}</span>
+                <span className="text-[#919099]">{`Network:${chainNameMap[chain]}`}</span>
                 <Network />
               </div>
             </div>