add step to add ip to twitter/x name

storyprotocol · Aug 25, 2024 · 120f943 · 120f943
1 parent 5013d11
commit 120f943
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -16,6 +16,7 @@ export default function HomepageForm() {
   const [twitterUsername, setTwitterUsername] = useState("");
   const [clickedFollowStory, setClickedFollowStory] = useState(false);
   const [clickedJoinTelegram, setClickedJoinTelegram] = useState(false);
+  const [clickedAddIp, setClickedAddIp] = useState(false);
   const [finished, setFinished] = useState(false);
   const [loading, setLoading] = useState(false);
 
@@ -122,6 +123,23 @@ export default function HomepageForm() {
 
             <div className="flex items-center gap-[10px]">
               <p className="min-w-[60px] font-bold">Step 2</p>
+              <button
+                type="button"
+                className={`w-full py-2 px-4 border ${
+                  clickedAddIp ? "bg-black text-white" : "border-gray-300"
+                } rounded-md`}
+                onClick={() => {
+                  window.open("https://twitter.com/", "_blank");
+                  setClickedAddIp(true);
+                }}
+                disabled={clickedAddIp}
+              >
+                Add ꧁IP꧂ to your Twitter/X name
+              </button>
+            </div>
+
+            <div className="flex items-center gap-[10px]">
+              <p className="min-w-[60px] font-bold">Step 3</p>
               <button
                 type="button"
                 className={`w-full py-2 px-4 border ${
@@ -138,7 +156,7 @@ export default function HomepageForm() {
               </button>
             </div>
             <div className="flex items-center gap-[10px]">
-              <p className="min-w-[60px] font-bold">Step 3</p>
+              <p className="min-w-[60px] font-bold">Step 4</p>
               <button
                 type="button"
                 className={`w-full py-2 px-4 border ${
@@ -157,7 +175,7 @@ export default function HomepageForm() {
               </button>
             </div>
             <div className="flex items-center gap-[10px]">
-              <p className="min-w-[60px] font-bold">Step 4</p>
+              <p className="min-w-[60px] font-bold">Step 5</p>
               <button
                 type="button"
                 className={`w-full py-2 px-4 border ${
@@ -185,6 +203,7 @@ export default function HomepageForm() {
             twitterUsername &&
             clickedFollowStory &&
             clickedJoinTelegram &&
+            clickedAddIp &&
             !finished && (
               <button
                 onClick={handleSubmit}