Merge pull request #13 from matiasbenary/fixName

fix: show the name and run prettier
near-examples · Jul 8, 2024 · ab9143e · ab9143e
2 parents 64c5cd1 + 995f145
commit ab9143e
Show file tree

Hide file tree

Showing 11 changed files with 263 additions and 216 deletions.
diff --git a/frontend/src/components/Form.jsx b/frontend/src/components/Form.jsx
@@ -1,44 +1,44 @@
 export default function Form({ onSubmit, currentAccountId }) {
-	return (
-		<form onSubmit={onSubmit} className="p-4 border rounded shadow-sm">
-			<fieldset id="fieldset">
-				<h2 className="mb-4">Guest Book</h2>
-				<p>Sign the guest book, {currentAccountId}!</p>
-				<div className="mb-3">
-					<label htmlFor="message" className="form-label">
-						Message:
-					</label>
-					<input
-						autoComplete="off"
-						autoFocus
-						id="message"
-						className="form-control"
-						required
-					/>
-				</div>
-				<div className="mb-3">
-					<label htmlFor="donation" className="form-label">
-						Donation (optional):
-					</label>
-					<div className="input-group">
-						<input
-							autoComplete="off"
-							defaultValue={"0"}
-							id="donation"
-							min="0"
-							step="0.01"
-							type="number"
-							className="form-control"
-						/>
-						<span className="input-group-text" title="NEAR Tokens">
-							Ⓝ
-						</span>
-					</div>
-				</div>
-				<button type="submit" className="btn btn-primary w-100">
-					Sign Guest Book
-				</button>
-			</fieldset>
-		</form>
-	);
+  return (
+    <form onSubmit={onSubmit} className="p-4 border rounded shadow-sm">
+      <fieldset id="fieldset">
+        <h2 className="mb-4">Guest Book</h2>
+        <p>Sign the guest book, {currentAccountId}!</p>
+        <div className="mb-3">
+          <label htmlFor="message" className="form-label">
+            Message:
+          </label>
+          <input
+            autoComplete="off"
+            autoFocus
+            id="message"
+            className="form-control"
+            required
+          />
+        </div>
+        <div className="mb-3">
+          <label htmlFor="donation" className="form-label">
+            Donation (optional):
+          </label>
+          <div className="input-group">
+            <input
+              autoComplete="off"
+              defaultValue={"0"}
+              id="donation"
+              min="0"
+              step="0.01"
+              type="number"
+              className="form-control"
+            />
+            <span className="input-group-text" title="NEAR Tokens">
+              Ⓝ
+            </span>
+          </div>
+        </div>
+        <button type="submit" className="btn btn-primary w-100">
+          Sign Guest Book
+        </button>
+      </fieldset>
+    </form>
+  );
 }
diff --git a/frontend/src/components/Messages.jsx b/frontend/src/components/Messages.jsx
@@ -1,23 +1,23 @@
 export default function Messages({ messages }) {
-	return (
-		<div className="container">
-			<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>
-			))}
-		</div>
-	);
+  return (
+    <div className="container">
+      <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>
+      ))}
+    </div>
+  );
 }
diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
@@ -1,14 +1,14 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useEffect, useState, useContext } from 'react';
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState, useContext } from "react";
 
-import { NearContext } from '@/context';
-import NearLogo from '/public/near-logo.svg';
+import { NearContext } from "@/context";
+import NearLogo from "/public/near-logo.svg";
 
 export const Navigation = () => {
   const { signedAccountId, wallet } = useContext(NearContext);
-  const [action, setAction] = useState(() => { });
-  const [label, setLabel] = useState('Loading...');
+  const [action, setAction] = useState(() => {});
+  const [label, setLabel] = useState("Loading...");
 
   useEffect(() => {
     if (!wallet) return;
@@ -18,20 +18,30 @@ export const Navigation = () => {
       setLabel(`Logout ${signedAccountId}`);
     } else {
       setAction(() => wallet.signIn);
-      setLabel('Login');
+      setLabel("Login");
     }
   }, [signedAccountId, wallet]);
 
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
         <Link href="/" passHref legacyBehavior>
-          <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+          <Image
+            priority
+            src={NearLogo}
+            alt="NEAR"
+            width="30"
+            height="24"
+            className="d-inline-block align-text-top"
+          />
         </Link>
-        <div className='navbar-nav pt-1'>
-          <button className="btn btn-secondary" onClick={action} > {label} </button>
+        <div className="navbar-nav pt-1">
+          <button className="btn btn-secondary" onClick={action}>
+            {" "}
+            {label}{" "}
+          </button>
         </div>
       </div>
     </nav>
   );
-};
+};
diff --git a/frontend/src/components/SignIn.jsx b/frontend/src/components/SignIn.jsx
@@ -1,18 +1,18 @@
 export default function SignIn() {
-	return (
-		<>
-			<p>
-				This app demonstrates a key element of NEAR’s UX: once an app has
-				permission to make calls on behalf of a user (that is, once a user signs
-				in), the app can make calls to the blockchain for them without prompting
-				extra confirmation. So you’ll see that if you don’t include a donation,
-				your message gets posted right to the guest book.
-			</p>
-			<p>
-				But, if you do add a donation, then NEAR will double-check that you’re
-				ok with sending money to this app.
-			</p>
-			<p>Go ahead and sign in to try it out!</p>
-		</>
-	);
+  return (
+    <>
+      <p>
+        This app demonstrates a key element of NEAR’s UX: once an app has
+        permission to make calls on behalf of a user (that is, once a user signs
+        in), the app can make calls to the blockchain for them without prompting
+        extra confirmation. So you’ll see that if you don’t include a donation,
+        your message gets posted right to the guest book.
+      </p>
+      <p>
+        But, if you do add a donation, then NEAR will double-check that you’re
+        ok with sending money to this app.
+      </p>
+      <p>Go ahead and sign in to try it out!</p>
+    </>
+  );
 }
diff --git a/frontend/src/config.js b/frontend/src/config.js
@@ -1,5 +1,5 @@
 const contractPerNetwork = {
-	testnet: "guestbook.near-examples.testnet",
+  testnet: "guestbook.near-examples.testnet",
 };
 
 export const NetworkId = "testnet";

diff --git a/frontend/src/context.js b/frontend/src/context.js
@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from "react";
 
 /**
  * @typedef NearContext
@@ -9,5 +9,5 @@ import { createContext } from 'react';
 /** @type {import ('react').Context<NearContext>} */
 export const NearContext = createContext({
   wallet: undefined,
-  signedAccountId: ''
-});
+  signedAccountId: "",
+});
diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js
@@ -1,23 +1,28 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
-import '@/styles/globals.css';
-import { NearContext } from '@/context';
-import { Navigation } from '@/components/Navigation';
+import "@/styles/globals.css";
+import { NearContext } from "@/context";
+import { Navigation } from "@/components/Navigation";
 
-import { Wallet } from '@/wallets/near';
-import { NetworkId, GuestbookNearContract } from '@/config';
+import { Wallet } from "@/wallets/near";
+import { NetworkId, GuestbookNearContract } from "@/config";
 
-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('');
+  const [signedAccountId, setSignedAccountId] = useState("");
 
-  useEffect(() => { wallet.startUp(setSignedAccountId) }, []);
+  useEffect(() => {
+    wallet.startUp(setSignedAccountId);
+  }, []);
 
   return (
     <NearContext.Provider value={{ wallet, signedAccountId }}>
       <Navigation />
       <Component {...pageProps} />
     </NearContext.Provider>
   );
-}
+}