[pending]Bera

src/components/Select/index.tsx

@@ -1,25 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
+interface TSelectProps {
+  defaultValue: string;
+  options: string[];
+  onChange: (value: string) => void;
+}
 
-import { Chain } from '../../config/chainConfig';
-import useGlobalStore from '../../store/useGlobalStore';
+const TSelect: React.FC<TSelectProps> = ({ defaultValue, options, onChange }) => {
+  const [currentValue, setCurrentValue] = useState(defaultValue);
 
-const TSelect = () => {
-  const { chain } = useGlobalStore();
-
-  const handleInternalChange = (event: SelectChangeEvent<Chain>) => {
-    const value = event.target.value as Chain;
-    useGlobalStore.setState({ chain: value });
+  const handleInternalChange = (event: SelectChangeEvent<string>) => {
+    const value = (event.target.value as string) ?? '';
+    setCurrentValue(value);
+    onChange(value);
   };
 
   return (
-    <Select<Chain>
-      value={chain}
+    <Select<string>
+      value={currentValue}
       onChange={handleInternalChange}
-      style={{ minWidth: '120px', height: '60px' }}
+      style={{
+        width: '100%',
+        height: '60px',
+        borderRadius: 8,
+        borderWidth: 0,
+        borderColor: 'transparent',
+        fontSize: '15px',
+      }}
+      className="bg-[#F7F9FA] py-[18px] pl-[10px] text-base font-medium text-[#1A1D1F]"
     >
-      <MenuItem value={Chain.Arb}>{Chain.Arb}</MenuItem>
-      <MenuItem value={Chain.Bera}>{Chain.Bera}</MenuItem>
+      {options.map((option: string) => (
+        <MenuItem value={option}>{option}</MenuItem>
+      ))}
     </Select>
   );
 };

src/components/icons/ETHIcon.tsx

@@ -18,3 +18,13 @@ export default function Icon() {
     </svg>
   );
 }
+
+export function BeraIcon() {
+  return (
+    <img
+      src="https://cdn-xfans.buidlerdao.xyz/20240513-190428.jpeg"
+      className="mx-0 h-[18px] w-[18px] cursor-pointer rounded-full p-0"
+      alt="Logo"
+    />
+  );
+}

src/constants.ts

@@ -16,6 +16,11 @@ export enum ContractError {
   InsufficientBalance = 'Insufficient Balance',
 }
 
+export enum Token {
+  Bera = 'Bera',
+  WETH = 'WETH',
+}
+
 export const XFANS_CONTENT_WIDTH = 433;
 export const XFANS_MIN_WIDTH = 458;
 

src/content/addToTwitterHome.tsx

@@ -122,7 +122,7 @@ export const addUserPagePriceComponent = () => {
   const elementId = `xfans-userPagePrice-${username}`;
   const existingElement = document.getElementById(elementId);
 
-  console.log(username);
+  // console.log(username);
   // 由于个人中心页面有复用，因此在插入之前要删除掉其他price tag
   const elements = document.querySelectorAll('[id^="xfans-userPagePrice-"]');
   elements.forEach((x) => {

src/content/loginPage/signInWithXPage.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
 import { NextButton } from '../../components/buttons/loginButton';
-import TSelect from '../../components/Select/index';
 
 import '../../tailwind.css';
 
@@ -54,7 +53,6 @@ const SignInWithXPage: FC<SignInWithXPageProps> = ({ handleButtonClick, showLoad
           'Login With X'
         )}
       </NextButton>
-      <TSelect />
     </div>
   );
 };

src/hooks/useAccount.ts

@@ -8,7 +8,7 @@ import useUserStore from '../store/useUserStore';
 
 // 账户相关的全局状态
 export default function useAccount() {
-  const { accounts, balance } = useGlobalUserStore();
+  const { accounts, balance, wETHBalance } = useGlobalUserStore();
   const { userInfo, inviteInfo } = useUserStore((state) => ({ ...state }));
   const { run: getUserInfo } = useUserInfo();
   const { run: getUserInviteInfo } = useUserInvite();
@@ -19,6 +19,7 @@ export default function useAccount() {
       useGlobalUserStore.setState({
         accounts: response.accounts,
         balance: response.balance,
+        wETHBalance: response.weth_balance,
       });
     },
   });
@@ -39,5 +40,6 @@ export default function useAccount() {
     userInfo,
     inviteInfo,
     refresh,
+    wETHBalance,
   };
 }

src/service/contract/shares.ts

@@ -87,10 +87,11 @@ export async function unstake(address: string, amount: number) {
     amount: BigNumber(amount).times(SHARE_UNIT_MODIFIER).toFixed(),
   });
 }
-export async function transfer(address: string, amount: string) {
+export async function transfer(address: string, amount: string, token?: string) {
   await http.post<null>('/xfans/api/shares/transfer', {
     amount,
     address,
+    token,
   });
 }
 

src/service/contract/user.ts

@@ -1,13 +1,13 @@
 import { contractRequestHttp as http } from '../request';
 
 export async function getAccounts() {
-  const accounts = await http.get<{ accounts: string[]; balance: string }>(
+  const accounts = await http.get<{ accounts: string[]; balance: string; weth_balance: string }>(
     '/xfans/api/user/accounts'
   );
   return accounts;
 }
-
-export async function getBalance() {
-  const balance = await http.get<string>('/xfans/api/user/getBalance');
-  return balance;
-}
+// todo: 建议删除,后端暂时没删除
+// export async function getBalance() {
+//   const balance = await http.get<string>('/xfans/api/user/getBalance');
+//   return balance;
+// }

src/service/wallet/index.ts

@@ -10,6 +10,7 @@ const useWalletAccounts = () => {
       useGlobalUserStore.setState({
         accounts: response.accounts,
         balance: response.balance,
+        wETHBalance: response.weth_balance,
       });
     },
   });

src/store/useGlobalStore.ts

@@ -52,7 +52,7 @@ const useGlobalStore = create<GlobalStoreProps>()(
         });
       },
       userVote: null,
-      chain: Chain.Arb,
+      chain: Chain.Bera,
     }),
     {
       name: 'xfans-user-config',

src/store/useGlobalUserStore.ts

@@ -3,11 +3,13 @@ import { create } from 'zustand';
 interface GlobalUserStoreProps {
   accounts: string[];
   balance: string;
+  wETHBalance: string;
 }
 
 const useGlobalUserStore = create<GlobalUserStoreProps>((set, get) => ({
   accounts: [],
   balance: '',
+  wETHBalance: '',
 }));
 
 export default useGlobalUserStore;

src/welcome/Wallet/BuyModal.tsx

@@ -10,14 +10,15 @@ import * as toaster from '../../components/Toaster';
 import { ContractError } from '../../constants';
 import useAccount from '../../hooks/useAccount';
 import { useETHPrice } from '../../hooks/useETHPrice';
+import { BeraIcon } from '../../components/icons/ETHIcon';
 import {
   buyShares,
   getBuyPrice,
   getBuyPriceAfterFee,
   getFloorPrice,
   getSupply,
 } from '../../service/contract/shares';
-import { getBalance } from '../../service/contract/user';
+import { getAccounts } from '../../service/contract/user';
 import useProfileModal from '../../store/useProfileModal';
 import { formatDollar } from '../../utils';
 
@@ -69,6 +70,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
   const [amount, setAmount] = useState<number>(0);
   const [priceAfterFee, setPriceAfterFee] = useState('0');
   const [balance, setBalance] = useState('0');
+  const [WETHbalance, setWETHBalance] = useState('0');
   const [isBuying, setIsBuying] = useState(false);
   const [floorPrice, setFloorPrice] = useState('0');
   const [supply, setSupply] = useState(0);
@@ -133,9 +135,10 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
   useEffect(() => {
     if (wallet) {
       setLoadingBalance(true);
-      getBalance().then((balance) => {
+      getAccounts().then((result) => {
         setLoadingBalance(false);
-        setBalance(balance);
+        setBalance(result.balance);
+        setWETHBalance(result.weth_balance);
       });
     }
   }, [wallet]);
@@ -165,9 +168,10 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
     numberInputRef.current?.reset();
     refreshAccount();
     setLoadingBalance(true);
-    getBalance().then((balance) => {
+    getAccounts().then((result) => {
       setLoadingBalance(false);
-      setBalance(balance);
+      setBalance(result.balance);
+      setWETHBalance(result.weth_balance);
     });
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     setLoadingFloorPrice(true);
@@ -285,7 +289,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
             <span className="text-lg font-medium text-[#919099]">Est. Gas Fee</span>
             <div className="flex flex-col items-end">
               <div className="flex items-center space-x-1">
-                <Icon1 />
+                <BeraIcon />
                 <span className="text-lg font-medium">
                   <NumberDisplayer text={gasFee} loading={loadingPrice} />
                 </span>
@@ -310,7 +314,17 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
             <div className="flex items-center space-x-1">
               <Icon1 />
               <span className="text-2xl font-bold">
-                <NumberDisplayer text={total} loading={loadingPrice || loadingPirceAfterFee} />
+                <NumberDisplayer
+                  text={new BigNumber(priceAfterFee).toFixed()}
+                  loading={loadingPrice || loadingPirceAfterFee}
+                />
+              </span>
+              <BeraIcon />
+              <span className="text-2xl font-bold">
+                <NumberDisplayer
+                  text={new BigNumber(gasFee).toFixed()}
+                  loading={loadingPrice || loadingPirceAfterFee}
+                />
               </span>
             </div>
           </div>
@@ -319,7 +333,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
             <div className="flex items-center justify-center space-x-1 rounded-full bg-[#F5F5F5] px-5 py-1">
               <Icon1 />
               <span className="text-lg font-medium">
-                <NumberDisplayer text={balance} loading={loadingBalance} />
+                <NumberDisplayer text={WETHbalance} loading={loadingBalance} />
               </span>
             </div>
           </div>

src/welcome/Wallet/Deposit.tsx

@@ -5,9 +5,11 @@ import { useToggle } from 'ahooks';
 import { BackButton, BasicButton, PrimaryButton } from '../../components/Button';
 import Modal from '../../components/Modal';
 import * as toaster from '../../components/Toaster';
+import TSelect from '../../components/Select';
 import { chainNameMap } from '../../config/chainConfig';
 import useGlobalStore from '../../store/useGlobalStore';
 import useGlobalUserStore from '../../store/useGlobalUserStore';
+import { Token } from '../../constants';
 
 const Deposit = () => {
   const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
@@ -52,9 +54,11 @@ const Deposit = () => {
             </div>
             <div className="flex flex-col space-y-[14px]">
               <span className="text-base font-medium text-[#919099]">Asset</span>
-              <div className="rounded-[8px] bg-[#F7F9FA] py-[18px] pl-[26px] text-base font-medium text-[#1A1D1F]">
-                ETH
-              </div>
+              <TSelect
+                defaultValue={Token.WETH}
+                options={[Token.WETH, Token.Bera]}
+                onChange={(x) => {}}
+              />
             </div>
           </div>
           <div className="my-[30px] flex w-full justify-between">

src/welcome/Wallet/SellModal.tsx

@@ -10,14 +10,15 @@ import * as toaster from '../../components/Toaster';
 import { ContractError, SHARE_UNIT_MODIFIER } from '../../constants';
 import useAccount from '../../hooks/useAccount';
 import { useETHPrice } from '../../hooks/useETHPrice';
+import { BeraIcon } from '../../components/icons/ETHIcon';
 import {
   getFloorPrice,
   getSellPrice,
   getSellPriceAfterFee,
   getSharesBalance,
   sellShares,
 } from '../../service/contract/shares';
-import { getBalance } from '../../service/contract/user';
+import { getAccounts } from '../../service/contract/user';
 import useProfileModal from '../../store/useProfileModal';
 import { formatDollar } from '../../utils';
 
@@ -69,6 +70,7 @@ const SellModal = ({ onClose }: SellModalProps) => {
   const [amount, setAmount] = useState<number>(0);
   const [priceAfterFee, setPriceAfterFee] = useState('0');
   const [balance, setBalance] = useState('0');
+  const [WETHbalance, setWETHBalance] = useState('0');
   const [shareBalance, setShareBalance] = useState('0');
   const [isSelling, setIsSelling] = useState(false);
   const [floorPrice, setFloorPrice] = useState('0');
@@ -134,9 +136,10 @@ const SellModal = ({ onClose }: SellModalProps) => {
   useEffect(() => {
     if (wallet) {
       setLoadingBalance(true);
-      getBalance().then((balance) => {
+      getAccounts().then((result) => {
         setLoadingBalance(false);
-        setBalance(balance);
+        setBalance(result.balance);
+        setWETHBalance(result.weth_balance);
       });
     }
   }, [wallet]);
@@ -163,9 +166,10 @@ const SellModal = ({ onClose }: SellModalProps) => {
       });
 
       setLoadingBalance(true);
-      getBalance().then((balance) => {
+      getAccounts().then((result) => {
         setLoadingBalance(false);
-        setBalance(balance);
+        setBalance(result.balance);
+        setWETHBalance(result.weth_balance);
       });
 
       setLoadingFloorPrice(true);
@@ -291,7 +295,7 @@ const SellModal = ({ onClose }: SellModalProps) => {
             <span className="text-lg font-medium text-[#919099]">Est. Gas Fee</span>
             <div className="flex flex-col items-end">
               <div className="flex items-center space-x-1">
-                <Icon1 />
+                <BeraIcon />
                 <span className="text-lg font-medium">
                   <NumberDisplayer text={gasFee} loading={loadingPrice} />
                 </span>
@@ -328,7 +332,7 @@ const SellModal = ({ onClose }: SellModalProps) => {
             <div className="flex items-center justify-center space-x-1 rounded-full bg-[#F5F5F5] px-5 py-1">
               <Icon1 />
               <span className="text-lg font-medium">
-                <NumberDisplayer text={balance} loading={loadingBalance} />
+                <NumberDisplayer text={WETHbalance} loading={loadingBalance} />
               </span>
             </div>
           </div>