update localstorage

Patrickming · Jun 25, 2024 · 39be5c9 · 39be5c9
1 parent 85c8ad0
commit 39be5c9
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 13 deletions.
diff --git a/frontend/wallet/src/components/Balance.js b/frontend/wallet/src/components/Balance.js
@@ -1,6 +1,6 @@
 import "../css/Balance.css"
 
-const balance = () => {
+const balance = (balance) => {
     // const [balance, setBalance] = useState('');
     // useEffect(() => {
 
@@ -9,7 +9,7 @@ const balance = () => {
         <div className="card" style={{maxwidth: 18+'rem'}}>
             <div class="card-header">Your total balance</div>
             <div class="card-body">
-                <h2 class="card-title">$8500.00</h2>
+                <h2 class="card-title">{balance.message}</h2>
             </div>
         </div>
     )

diff --git a/frontend/wallet/src/components/Home.js b/frontend/wallet/src/components/Home.js
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Button from './Button';
 import BottomBar from './BottomBar';
 import Balance from './Balance';
 import '../css/Home.css';
 import { Input, Select } from 'antd';
+import { getETHBalance } from '../util/wallet';
 
 function Home(){
     const [showInput, setShowInput] = useState(false);
@@ -13,6 +14,29 @@ function Home(){
     const options = ['ETH','BTC','USDT']
     const [coin, setCoin] = useState('');
     const [inputAmount, setInputAmount] = useState('');
+    const [balance, setBalance] = useState('');
+    // 获取本地存储中的用户信息
+    const user = JSON.parse(localStorage.getItem('user_key'));
+
+    useEffect(() => {
+        const fetchBalance = async () => {
+            if(user && user.walletAddress){
+                const balance = await getETHBalance(user.walletAddress);
+                setBalance(balance);
+                console.log('Balance:', balance);
+                console.log('User:', user);
+            }
+        };
+        fetchBalance();
+    }, [user])
+
+    if(!user){
+        return <div>fail to find user</div>
+    }
+
+
+
+
     const handleSend = () => {
         // 点击按钮显示输入框
         setShowInput(true);
@@ -41,7 +65,7 @@ function Home(){
     return(
         <div className='home-container'>
             <div className='balance'>
-                <Balance></Balance>
+                <Balance message={balance}></Balance>
             </div>
             <div className='send_to'>
                 {showInput && (

diff --git a/frontend/wallet/src/components/Login.js b/frontend/wallet/src/components/Login.js
@@ -20,9 +20,14 @@ function Login() {
 
             console.log(response.data);
             // 登录成功后，可以跳转到其他页面，例如首页
-            setMessage('登录成功')
-            // localStorage.setItem('token', response.data.token);
-            navigate('/home');
+            if(response.data.code == 0){
+                setMessage('登录成功')
+                // localStorage.setItem('token', response.data.token);
+                navigate('/home');
+            }else{
+                setMessage('登录失败:'+response.data.message)
+                console.error(response.data);
+            }
         }catch(error){
             console.error(error);
             setMessage('登录失败: 服务器错误');

diff --git a/frontend/wallet/src/components/Register.js b/frontend/wallet/src/components/Register.js
@@ -13,6 +13,7 @@ function Register() {
   const [passport, setPassport] = useState('');
   const [password, setPassword] = useState('');
   const [password2, setPassword2] = useState('');
+  const [nickname, setNickname] = useState('');
   const [code, setCode] = useState('');
   const [message, setMessage] = useState('');
 
@@ -31,7 +32,7 @@ function Register() {
     e.preventDefault();
     // 处理注册逻辑，请求验证码
     console.log('Registering with:', passport, password);
-    const response = await axios.post('http://127.0.0.1:8000/user/sign-up', { passport, password, password2 });
+    const response = await axios.post('http://127.0.0.1:8000/user/sign-up', { passport, password, password2, nickname });
     setMessage(response.data.message);
     console.log(response);
     console.log('success')
@@ -69,13 +70,17 @@ function Register() {
       console.log("updatedPuo:", updatedPuo);
       const response = await axios.post('http://127.0.0.1:8000/user/register', { passport, password, code });
       setMessage(response.data.message);
-      const user = response.data.data;
+      const user = {
+        passport: passport,
+        nickname: nickname,
+        walletAddress: walletAddress
+      };
       console.log(response);
       console.log('success')
-      if(response.status == 200){
-        message.success('注册成功,你的钱包地址为',walletAddress);
+      if(response.data.code == 0){
+        console.log('注册成功,你的钱包地址为',walletAddress);
         memoryUser.user = user;
-        memoryUser.walletAddress = walletAddress;
+        console.log(memoryUser.user);
         storage.saveUser(user);
         window.location.href = '/login';
       }
@@ -95,6 +100,10 @@ function Register() {
             <label>Email:</label>
             <input type="email" value={passport} onChange={(e) => setPassport(e.target.value)} />
           </div>
+          <div>
+            <label>NickName:</label>
+            <input type="input" value={nickname} onChange={(e) => setNickname(e.target.value)} />
+          </div>
           <div>
             <label>Password:</label>
             <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />

diff --git a/frontend/wallet/src/util/memoryUtil.js b/frontend/wallet/src/util/memoryUtil.js
@@ -4,7 +4,6 @@
 
 const memoryUser = {
     user: {},
-    walletAddress: ''
 }
 
 export default memoryUser