chore: minor changes

frontend/package.json

@@ -27,20 +27,12 @@
     "@web3modal/wagmi": "^5.1.11",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^5.0.1",
+    "near-api-js": "^4.0.3",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
     "wagmi": "^2.13.3"
   },
-  "overrides": {
-    "@near-wallet-selector/ethereum-wallets": {
-      "near-api-js": "4.0.3"
-    }
-  },
-  "resolutions": {
-    "near-api-js": "4.0.3"
-  },
   "devDependencies": {
     "encoding": "^0.1.13",
     "eslint": "^9",

frontend/src/components/Messages.jsx

@@ -1,23 +1,33 @@
+import { useEffect, useState } from "react";
+
+function Message({ sender, premium, text }) {
+
+  const [show, setShow] = useState('');
+
+  useEffect(() => {
+    setTimeout(() => setShow('show'), 100);
+  }, []);
+
+  return (
+    <div className={`card ${show} mb-3 ${premium ? "border-primary" : ""}`}>
+      <div className="card-body">
+        <h5 className="card-title">
+          <strong>{sender}</strong>
+          {premium && (
+            <span className="badge bg-primary ms-2">Premium</span>
+          )}
+        </h5>
+        <p className="card-text">{text}</p>
+      </div>
+    </div>
+  );
+}
+
 export default function Messages({ messages }) {
   return (
-    <div className="container">
+    <div className="container fade-animation">
       <h2 className="my-4">Messages</h2>
-      {messages.map((message, i) => (
-        <div
-          key={i}
-          className={`card mb-3 ${message.premium ? "border-primary" : ""}`}
-        >
-          <div className="card-body">
-            <h5 className="card-title">
-              <strong>{message.sender}</strong>
-              {message.premium && (
-                <span className="badge bg-primary ms-2">Premium</span>
-              )}
-            </h5>
-            <p className="card-text">{message.text}</p>
-          </div>
-        </div>
-      ))}
+      {messages.map((message, i) => <Message key={`${message.sender}-${message.text}`} {...message} />)}
     </div>
   );
 }

frontend/src/pages/_app.js

@@ -8,13 +8,13 @@ import { Wallet } from "@/wallets/near";
 import { NetworkId, GuestbookNearContract } from "@/config";
 
 // Wallet instance
-const wallet = new Wallet({ networkId: NetworkId });
+// const wallet = new Wallet({ networkId: NetworkId });
 
 // Optional: Create an access key so the user does not need to sign transactions. Read more about access keys here: https://docs.near.org/concepts/protocol/access-keys
-// const wallet = new Wallet({
-//   createAccessKeyFor: GuestbookNearContract,
-//   networkId: NetworkId,
-// });
+const wallet = new Wallet({
+  createAccessKeyFor: GuestbookNearContract,
+  networkId: NetworkId,
+});
 
 export default function MyApp({ Component, pageProps }) {
   const [signedAccountId, setSignedAccountId] = useState("");

frontend/src/pages/index.js

@@ -36,24 +36,22 @@ export default function Home() {
     const { fieldset, message, donation } = e.target.elements;
 
     fieldset.disabled = true;
-    
+
     // Add message to the guest book
     const deposit = utils.format.parseNearAmount(donation.value);
     wallet.callMethod({
       contractId: GuestbookNearContract,
       method: "add_message",
       args: { text: message.value },
       deposit,
-    }).catch(()=>{
-      setMessages(messages.slice(1));
+    }).catch(() => {
+      // rollback to the current messages
+      setMessages(messages);
     });
 
     await new Promise(resolve => setTimeout(resolve, 300));
-    setMessages([{ sender: signedAccountId, text: message.value, premium: donation.value >= 1 }, ...messages]);  
-    message.value = "";
-    donation.value = "0";
     fieldset.disabled = false;
-    message.focus();
+    setMessages([{ sender: signedAccountId, text: message.value, premium: donation.value >= 1 }, ...messages]);
   };
 
   return (

frontend/src/styles/globals.css

@@ -115,3 +115,14 @@ a {
     color-scheme: dark;
   }
 }
+
+.fade-animation .card {
+  transition: all 0.4s ease-out;
+  opacity: 0;
+  background-color: #ffebae
+}
+
+.fade-animation .card.show {
+  opacity: 1;
+  background-color: #fff;
+}