Add study notes for 2025-08-16

Author: AutoBot42

zhenghaoailimiao.md

@@ -15,6 +15,134 @@ timezone: UTC+8
 ## Notes
 
 <!-- Content_START -->
+# 2025-08-16
+
+今日编写了前端重要代码：
+Welcome.tsx
+~~~ tsx
+import { useContext } from "react";
+import { AiFillPlayCircle } from "react-icons/ai";
+import { SiEthereum } from "react-icons/si";
+import { BsInfoCircle } from "react-icons/bs";
+
+import { TransactionContext } from "../context/TransactionContext";
+import { Loader } from ".";
+
+const commomStyles = "min-h-[70px] sm:px-0 px-2 sm:min-w-[120px] flex justify-center items-center border-[0.5px] border-gray-400 text-sm font-light text-white";
+
+const Input = ({ placeholder, name, type, value, handleChange }: any) => (
+    <input
+        placeholder={placeholder}
+        type={type}
+        step="0.0001"
+        value={value}
+        onChange={(e) => handleChange(e, name)}
+        className="my-2 w-full rounded-sm p-2 outline-none bg-transparent border-none text-white text-sm white-glassmorphism"
+    />
+);
+const Welcome = () => {
+    const { connectWallet, currentAccount, formData, sendTransaction, handleChange } = useContext(TransactionContext);
+
+    const handleSubmit = (e: { preventDefault: () => void; }) => {
+        const { addressTo, amount, keyword, message } = formData;
+
+        e.preventDefault();
+
+        if (!addressTo || !amount || !keyword || !message) return;
+
+        sendTransaction(currentAccount, addressTo, amount, message, keyword);
+    };
+
+    return (
+        <div className="flex w-full justify-center items-center ">
+            <div className="flex md:flex-row flex-col items-start justify-betwwen md:p-10 py-2 px-4">
+                <div className="flex flex-1 justify-start flex-col md:mr-10">
+                    <h1 className="text-3xl sm:text-5xl text-white text-gradient py-1">
+                        Send Crypto <br /> across the world
+                    </h1>
+                    <p className="text-left mt-5 text-white font-light md:w-9/12 w-11/12 text-base">
+                        Explore the crypto world. Buy and sell cryptocurrencies easily on Krypto.
+                    </p>
+                    {!currentAccount && (<button
+                        type="button"
+                        onClick={connectWallet}
+                        className="flex flex-row justify-center items-center my-5 bg-[#2952e3] p-3 rounded-full cursor-ponter
+                        hover:bg-[#2546bd]"
+                    >
+                        <p className="text-white text-base font-semibold">Connect Wallet</p>
+                    </button>)}
+                    <div className="grid sm:grid-cols-3 grid-cols-2 w-full mt-10">
+                        <div className={`rounded-tl-2xl ${commomStyles}`}>
+                            Reliability
+                        </div>
+                        <div className={commomStyles}>
+                            Security
+                        </div>
+                        <div className={`rounded-tr-2xl ${commomStyles}`}>
+                            Ethereum
+                        </div>
+                        <div className={`rounded-bl-2xl ${commomStyles}`}>
+                            Web 3.0
+                        </div>
+                        <div className={commomStyles}>
+                            Low fees
+                        </div>
+                        <div className={`rounded-br-2xl ${commomStyles}`}>
+                            Blockchain
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex flex-col flex-1 items-center justify-start w-full md:mt-0 mt-10">
+                    <div className="p-3 justify-end items-start flex-col rounded-xl h-40 sm:w-72 w-full my-5
+                    eth-card white-glassmorphism">
+                        <div className="flex justify-between flex-col w-full h-full">
+                            <div className="flex justify-between items-start">
+                                <div className="w-10 h-10 rounded-full border-2 border-white flex justify-center items-center">
+                                    <SiEthereum fontSize={21} color="#fff" />
+                                </div>
+                                <BsInfoCircle fontSize={17} color="#fff" />
+                            </div>
+                            <div>
+                                <p className="text-white font-light text-sm">
+                                    Adress
+                                </p>
+                                <p className="text-white font-semibold text-lg mt-1">
+                                    Ethereum
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="p-5 sm:w-96 w-full flex flex-col justify-start items-center blue-glassmorphism">
+                        <Input placeholder="Adress To" name="addressTo" type="text" handleChange={handleChange} />
+                        <Input placeholder="Amount（ETH）" name="amount" type="number" handleChange={handleChange} />
+                        <Input placeholder="Keyword（Gif）" name="keyword" type="text" handleChange={handleChange} />
+                        <Input placeholder="Enter Message" name="message" type="text" handleChange={handleChange} />
+
+                        <div className="h-[1px] w-full bg-gray-400 my-2" />
+
+                        {false ? (
+                            <Loader />
+                        ) : (
+                            <button
+                                type="button"
+                                onClick={handleSubmit}
+                                className="text-white w-full mt-2 border-[1px] p-2 border-[#3d4f7c] rounded-full cursor-pointer"
+                            >
+                                Send Now
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+};
+
+export default Welcome;
+~~~
+
 # 2025-08-15
 
 **今天继续编写智能合约及其交互代码：**