@followgate/js 0.8.0 → 0.8.2

package/dist/index.d.mts

@@ -26,6 +26,7 @@ interface FollowGateConfig {
     onComplete?: () => void;
     theme?: 'dark' | 'light';
     accentColor?: string;
+    allowSkip?: boolean;
 }
 /**
  * SDK Error class with helpful messages
@@ -107,6 +108,7 @@ declare class FollowGateClient {
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;
+    private handleSkipFollow;
     private handleFollowClick;
     private showFollowConfirmation;
     private handleFollowConfirm;

package/dist/index.d.ts

@@ -26,6 +26,7 @@ interface FollowGateConfig {
     onComplete?: () => void;
     theme?: 'dark' | 'light';
     accentColor?: string;
+    allowSkip?: boolean;
 }
 /**
  * SDK Error class with helpful messages
@@ -107,6 +108,7 @@ declare class FollowGateClient {
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;
+    private handleSkipFollow;
     private handleFollowClick;
     private showFollowConfirmation;
     private handleFollowConfirm;

package/dist/index.js

@@ -307,9 +307,65 @@ var MODAL_STYLES = `
   height: 20px;
   color: #fbbf24;
   flex-shrink: 0;
+}
+
+.fg-verify-box {
+  background: rgba(59, 130, 246, 0.05);
+  border: 1px solid rgba(96, 165, 250, 0.5);
+  border-radius: 12px;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.fg-verify-box-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.fg-verify-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(96, 165, 250, 0.3);
+  border-top-color: #60a5fa;
+  border-radius: 50%;
+  animation: fg-spin 1s linear infinite;
+  flex-shrink: 0;
+}
+
+.fg-verify-text {
+  font-size: 13px;
+  color: #93c5fd;
+  white-space: nowrap;
+}
+
+.fg-verify-hint {
+  font-size: 12px;
+  color: #64748b;
+  text-align: center;
+  margin-bottom: 16px;
   margin-top: 2px;
 }
 
+.fg-skip-link {
+  display: block;
+  text-align: center;
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 16px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.fg-skip-link:hover {
+  color: #94a3b8;
+}
+
 .fg-warning-box p {
   font-size: 14px;
   color: #fde68a;
@@ -613,10 +669,22 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after following.</p>
+      ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-follow">skip this step</span>' : ""}
     `;
     document.getElementById("fg-follow-btn")?.addEventListener("click", () => {
       this.handleFollowClick();
     });
+    document.getElementById("fg-skip-follow")?.addEventListener("click", () => {
+      this.handleSkipFollow();
+    });
+  }
+  handleSkipFollow() {
+    if (!this.config?.twitter) return;
+    if (this.config.twitter.tweetId) {
+      this.renderRepostStep();
+    } else {
+      this.renderConfirmStep();
+    }
   }
   handleFollowClick() {
     if (!this.config?.twitter) return;
@@ -712,10 +780,14 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after reposting.</p>
+      ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-repost">skip this step</span>' : ""}
     `;
     document.getElementById("fg-repost-btn")?.addEventListener("click", () => {
       this.handleRepostClick();
     });
+    document.getElementById("fg-skip-repost")?.addEventListener("click", () => {
+      this.renderConfirmStep();
+    });
   }
   handleRepostClick() {
     if (!this.config?.twitter?.tweetId) return;
@@ -784,8 +856,22 @@ var FollowGateClient = class {
   renderConfirmStep() {
     const content = this.getContentElement();
     if (!content) return;
+    const username = this.currentUser?.username;
     content.innerHTML = `
       <h2 class="fg-title">Almost done!</h2>
+      <div class="fg-verify-box">
+        <div class="fg-verify-box-left">
+          <div class="fg-verify-spinner"></div>
+          <span class="fg-verify-text">Verifying follow & repost</span>
+        </div>
+        ${username ? `
+          <div class="fg-user-badge" style="margin: 0; padding: 4px 10px; gap: 6px;">
+            <div class="fg-user-badge-dot" style="background: #facc15; width: 6px; height: 6px;"></div>
+            <span class="fg-user-badge-text" style="font-size: 12px;">@${username}</span>
+          </div>
+        ` : ""}
+      </div>
+      <p class="fg-verify-hint">Verification may take some time</p>
       <div class="fg-warning-box">
         ${ICONS.warning}
         <p><strong>Note:</strong> Access may be revoked if actions are not completed.</p>
@@ -1018,7 +1104,10 @@ var FollowGateClient = class {
       );
       if (!response.ok) {
         if (this.config.debug) {
-          console.warn("[FollowGate] Verification check failed:", response.status);
+          console.warn(
+            "[FollowGate] Verification check failed:",
+            response.status
+          );
         }
         return false;
       }
@@ -1157,7 +1246,10 @@ var FollowGateClient = class {
         if (response.ok) {
           console.log("[FollowGate] Completion saved to server");
         } else {
-          console.warn("[FollowGate] Failed to save completion:", response.status);
+          console.warn(
+            "[FollowGate] Failed to save completion:",
+            response.status
+          );
         }
       }
     } catch (error) {

package/dist/index.mjs

@@ -281,9 +281,65 @@ var MODAL_STYLES = `
   height: 20px;
   color: #fbbf24;
   flex-shrink: 0;
+}
+
+.fg-verify-box {
+  background: rgba(59, 130, 246, 0.05);
+  border: 1px solid rgba(96, 165, 250, 0.5);
+  border-radius: 12px;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.fg-verify-box-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.fg-verify-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(96, 165, 250, 0.3);
+  border-top-color: #60a5fa;
+  border-radius: 50%;
+  animation: fg-spin 1s linear infinite;
+  flex-shrink: 0;
+}
+
+.fg-verify-text {
+  font-size: 13px;
+  color: #93c5fd;
+  white-space: nowrap;
+}
+
+.fg-verify-hint {
+  font-size: 12px;
+  color: #64748b;
+  text-align: center;
+  margin-bottom: 16px;
   margin-top: 2px;
 }
 
+.fg-skip-link {
+  display: block;
+  text-align: center;
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 16px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.fg-skip-link:hover {
+  color: #94a3b8;
+}
+
 .fg-warning-box p {
   font-size: 14px;
   color: #fde68a;
@@ -587,10 +643,22 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after following.</p>
+      ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-follow">skip this step</span>' : ""}
     `;
     document.getElementById("fg-follow-btn")?.addEventListener("click", () => {
       this.handleFollowClick();
     });
+    document.getElementById("fg-skip-follow")?.addEventListener("click", () => {
+      this.handleSkipFollow();
+    });
+  }
+  handleSkipFollow() {
+    if (!this.config?.twitter) return;
+    if (this.config.twitter.tweetId) {
+      this.renderRepostStep();
+    } else {
+      this.renderConfirmStep();
+    }
   }
   handleFollowClick() {
     if (!this.config?.twitter) return;
@@ -686,10 +754,14 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after reposting.</p>
+      ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-repost">skip this step</span>' : ""}
     `;
     document.getElementById("fg-repost-btn")?.addEventListener("click", () => {
       this.handleRepostClick();
     });
+    document.getElementById("fg-skip-repost")?.addEventListener("click", () => {
+      this.renderConfirmStep();
+    });
   }
   handleRepostClick() {
     if (!this.config?.twitter?.tweetId) return;
@@ -758,8 +830,22 @@ var FollowGateClient = class {
   renderConfirmStep() {
     const content = this.getContentElement();
     if (!content) return;
+    const username = this.currentUser?.username;
     content.innerHTML = `
       <h2 class="fg-title">Almost done!</h2>
+      <div class="fg-verify-box">
+        <div class="fg-verify-box-left">
+          <div class="fg-verify-spinner"></div>
+          <span class="fg-verify-text">Verifying follow & repost</span>
+        </div>
+        ${username ? `
+          <div class="fg-user-badge" style="margin: 0; padding: 4px 10px; gap: 6px;">
+            <div class="fg-user-badge-dot" style="background: #facc15; width: 6px; height: 6px;"></div>
+            <span class="fg-user-badge-text" style="font-size: 12px;">@${username}</span>
+          </div>
+        ` : ""}
+      </div>
+      <p class="fg-verify-hint">Verification may take some time</p>
       <div class="fg-warning-box">
         ${ICONS.warning}
         <p><strong>Note:</strong> Access may be revoked if actions are not completed.</p>
@@ -992,7 +1078,10 @@ var FollowGateClient = class {
       );
       if (!response.ok) {
         if (this.config.debug) {
-          console.warn("[FollowGate] Verification check failed:", response.status);
+          console.warn(
+            "[FollowGate] Verification check failed:",
+            response.status
+          );
         }
         return false;
       }
@@ -1131,7 +1220,10 @@ var FollowGateClient = class {
         if (response.ok) {
           console.log("[FollowGate] Completion saved to server");
         } else {
-          console.warn("[FollowGate] Failed to save completion:", response.status);
+          console.warn(
+            "[FollowGate] Failed to save completion:",
+            response.status
+          );
         }
       }
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@followgate/js",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "FollowGate SDK - Grow your audience with every download. Require social actions (follow, repost) before users can access your app.",
   "author": "FollowGate <hello@followgate.app>",
   "homepage": "https://followgate.app",