updated README

unlock-protocol · Feb 3, 2024 · 96cabec · 96cabec
1 parent ae012a2
commit 96cabec
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # Token Gated Frames
 
-Check [Token Gated frames](https://frames.token-gated.com/).
+Check [Token Gated frames](https://frames.token-gated.com/) and get started by creating your own!
 
 ## Next Steps
 
-- Let users create their own token-gated frames
-- Add back support for Markdown (find why it breaks `ImageResponse` first!)
-- Let members reshare a token gated frame and [earn referral fees](https://unlock-protocol.com/blog/referral-fees?_gl=1*p7ybix*_ga*MTMyNTU2OTQxMC4xNzA2Mjk4NTQ4*_ga_DGDLJTEV6N*MTcwNjcxNDkyMi40LjAuMTcwNjcxNDkyMi4wLjAuMA..)
+- [x] Let users create their own token-gated frames
+- [ ] Add back support for Markdown (find why it breaks `ImageResponse` first!)
+- [ ] Let members reshare a token gated frame and [earn referral fees](https://unlock-protocol.com/blog/referral-fees?_gl=1*p7ybix*_ga*MTMyNTU2OTQxMC4xNzA2Mjk4NTQ4*_ga_DGDLJTEV6N*MTcwNjcxNDkyMi40LjAuMTcwNjcxNDkyMi4wLjAuMA..)
diff --git a/src/app/new/Form.tsx b/src/app/new/Form.tsx
@@ -35,77 +35,79 @@ export const Form = () => {
         </Link>
         !
       </p>
-      <form action={formAction} className="form-control	flex gap-4">
+      <form action={formAction} className="form-control	flex">
         <input type="hidden" name="author" value={address} />
 
-        <div className="flex flex-col">
-          <label htmlFor="title">Title</label>
-          <input className="input" name="frame.title" required />
-        </div>
-
-        <div className="flex flex-col">
-          <label htmlFor="body">Hidden part</label>
-          <textarea
-            className="textarea textarea-borderedput"
-            placeholder="That's the hidden part!"
-            name="frame.body"
-            required
-          />
-        </div>
-
-        <div className="flex flex-col">
-          <label htmlFor="body">Public part</label>
-          <textarea
-            className="textarea textarea-borderedput"
-            placeholder="That's the part to entice users to reveal the hidden part."
-            name="frame.description"
-            required
-          />
-        </div>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col">
+            <label htmlFor="title">Title</label>
+            <input className="input" name="frame.title" required />
+          </div>
 
-        <div className="flex flex-col">
-          <label htmlFor="body">Checkout URL (optional)</label>
-          <input
-            className="input"
-            placeholder="A URL where users can go to purchase an NFT membership."
-            name="frame.checkoutUrl"
-          />
-        </div>
+          <div className="flex flex-col">
+            <label htmlFor="body">Hidden part</label>
+            <textarea
+              className="textarea textarea-borderedput"
+              placeholder="That's the hidden part!"
+              name="frame.body"
+              required
+            />
+          </div>
 
-        <div className="flex flex-col">
-          <label htmlFor="body">Network</label>
-          <select
-            className="select select-bordered w-full max-w-xs"
-            name="frame.gate.network"
-            required
-          >
-            {Object.keys(networks)
-              .filter((i) => {
-                return i !== "31337";
-              })
-              .map((network) => {
-                return (
-                  <option key={network} value={network}>
-                    {networks[network].name}
-                  </option>
-                );
-              })}
-          </select>
+          <div className="flex flex-col">
+            <label htmlFor="body">Public part</label>
+            <textarea
+              className="textarea textarea-borderedput"
+              placeholder="That's the part to entice users to reveal the hidden part."
+              name="frame.description"
+              required
+            />
+          </div>
         </div>
-
-        <div className="flex flex-col">
-          <label htmlFor="body">Contract address</label>
-          <input
-            className="input"
-            placeholder="A URL where users can go to purchase an NFT membership."
-            name="frame.gate.contract"
-            required
-          />
+        <h3>Token Gate</h3>
+        <div className="flex flex-col gap-4">
+          {" "}
+          <div className="flex flex-col">
+            <label htmlFor="body">Network</label>
+            <select
+              className="select select-bordered w-full max-w-xs"
+              name="frame.gate.network"
+              required
+            >
+              {Object.keys(networks)
+                .filter((i) => {
+                  return i !== "31337";
+                })
+                .map((network) => {
+                  return (
+                    <option key={network} value={network}>
+                      {networks[network].name}
+                    </option>
+                  );
+                })}
+            </select>
+          </div>
+          <div className="flex flex-col">
+            <label htmlFor="body">Contract address</label>
+            <input
+              className="input"
+              placeholder="0x..."
+              name="frame.gate.contract"
+              required
+            />
+          </div>
+          <div className="flex flex-col">
+            <label htmlFor="body">Checkout URL (optional)</label>
+            <input
+              className="input"
+              placeholder="A URL where users can go to purchase an NFT membership."
+              name="frame.checkoutUrl"
+            />
+          </div>
+          <button className="btn btn-neutral" type="submit">
+            Submit
+          </button>
         </div>
-
-        <button className="btn btn-neutral" type="submit">
-          Submit
-        </button>
       </form>
     </div>
   );