@followgate/js 0.8.1 → 0.9.0

package/dist/index.d.mts

@@ -83,6 +83,8 @@ interface VerificationStatus {
  */
 declare class FollowGateClient {
     private config;
+    private serverConfig;
+    private configFetched;
     private listeners;
     private currentUser;
     private completedActions;
@@ -92,11 +94,15 @@ declare class FollowGateClient {
      * Initialize the SDK
      */
     init(config: FollowGateConfig): void;
+    /**
+     * Fetch app configuration from server
+     */
+    private fetchServerConfig;
     /**
      * Show the FollowGate modal
      * If user is already unlocked, calls onComplete immediately
      */
-    show(): void;
+    show(): Promise<void>;
     /**
      * Hide the modal
      */
@@ -107,6 +113,7 @@ declare class FollowGateClient {
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;
+    private handleSkipFollow;
     private handleFollowClick;
     private showFollowConfirmation;
     private handleFollowConfirm;

package/dist/index.d.ts

@@ -83,6 +83,8 @@ interface VerificationStatus {
  */
 declare class FollowGateClient {
     private config;
+    private serverConfig;
+    private configFetched;
     private listeners;
     private currentUser;
     private completedActions;
@@ -92,11 +94,15 @@ declare class FollowGateClient {
      * Initialize the SDK
      */
     init(config: FollowGateConfig): void;
+    /**
+     * Fetch app configuration from server
+     */
+    private fetchServerConfig;
     /**
      * Show the FollowGate modal
      * If user is already unlocked, calls onComplete immediately
      */
-    show(): void;
+    show(): Promise<void>;
     /**
      * Hide the modal
      */
@@ -107,6 +113,7 @@ declare class FollowGateClient {
     private renderUsernameStep;
     private handleUsernameSubmit;
     private renderFollowStep;
+    private handleSkipFollow;
     private handleFollowClick;
     private showFollowConfirmation;
     private handleFollowConfirm;

package/dist/index.js

@@ -313,32 +313,35 @@ var MODAL_STYLES = `
   background: rgba(59, 130, 246, 0.05);
   border: 1px solid rgba(96, 165, 250, 0.5);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 10px 14px;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
 }
 
 .fg-verify-box-left {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .fg-verify-spinner {
-  width: 20px;
-  height: 20px;
+  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: 14px;
+  font-size: 13px;
   color: #93c5fd;
+  white-space: nowrap;
 }
 
 .fg-verify-hint {
@@ -349,6 +352,20 @@ var MODAL_STYLES = `
   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;
@@ -447,6 +464,8 @@ var ICONS = {
 };
 var FollowGateClient = class {
   config = null;
+  serverConfig = null;
+  configFetched = false;
   listeners = /* @__PURE__ */ new Map();
   currentUser = null;
   completedActions = [];
@@ -508,11 +527,46 @@ var FollowGateClient = class {
   // ============================================
   // Modal UI Methods
   // ============================================
+  /**
+   * Fetch app configuration from server
+   */
+  async fetchServerConfig() {
+    if (!this.config || this.configFetched) return;
+    try {
+      const response = await fetch(`${this.config.apiUrl}/api/v1/config`, {
+        headers: {
+          Authorization: `Bearer ${this.config.apiKey}`
+        }
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data) {
+          this.serverConfig = data.data;
+          if (this.config.debug) {
+            console.log(
+              "[FollowGate] Server config loaded:",
+              this.serverConfig
+            );
+          }
+        }
+      } else if (this.config.debug) {
+        console.warn(
+          "[FollowGate] Failed to fetch server config:",
+          response.status
+        );
+      }
+    } catch (error) {
+      if (this.config.debug) {
+        console.warn("[FollowGate] Failed to fetch server config:", error);
+      }
+    }
+    this.configFetched = true;
+  }
   /**
    * Show the FollowGate modal
    * If user is already unlocked, calls onComplete immediately
    */
-  show() {
+  async show() {
     if (!this.config) {
       throw new Error("[FollowGate] SDK not initialized. Call init() first.");
     }
@@ -523,6 +577,7 @@ var FollowGateClient = class {
       this.config.onComplete?.();
       return;
     }
+    await this.fetchServerConfig();
     this.injectStyles();
     this.createModal();
   }
@@ -652,10 +707,22 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after following.</p>
+      ${this.serverConfig?.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;
@@ -751,10 +818,14 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after reposting.</p>
+      ${this.serverConfig?.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;
@@ -832,9 +903,9 @@ var FollowGateClient = class {
           <span class="fg-verify-text">Verifying follow & repost</span>
         </div>
         ${username ? `
-          <div class="fg-user-badge" style="margin: 0;">
-            <div class="fg-user-badge-dot" style="background: #facc15;"></div>
-            <span class="fg-user-badge-text">@${username}</span>
+          <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>

package/dist/index.mjs

@@ -287,32 +287,35 @@ var MODAL_STYLES = `
   background: rgba(59, 130, 246, 0.05);
   border: 1px solid rgba(96, 165, 250, 0.5);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 10px 14px;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
 }
 
 .fg-verify-box-left {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .fg-verify-spinner {
-  width: 20px;
-  height: 20px;
+  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: 14px;
+  font-size: 13px;
   color: #93c5fd;
+  white-space: nowrap;
 }
 
 .fg-verify-hint {
@@ -323,6 +326,20 @@ var MODAL_STYLES = `
   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;
@@ -421,6 +438,8 @@ var ICONS = {
 };
 var FollowGateClient = class {
   config = null;
+  serverConfig = null;
+  configFetched = false;
   listeners = /* @__PURE__ */ new Map();
   currentUser = null;
   completedActions = [];
@@ -482,11 +501,46 @@ var FollowGateClient = class {
   // ============================================
   // Modal UI Methods
   // ============================================
+  /**
+   * Fetch app configuration from server
+   */
+  async fetchServerConfig() {
+    if (!this.config || this.configFetched) return;
+    try {
+      const response = await fetch(`${this.config.apiUrl}/api/v1/config`, {
+        headers: {
+          Authorization: `Bearer ${this.config.apiKey}`
+        }
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data) {
+          this.serverConfig = data.data;
+          if (this.config.debug) {
+            console.log(
+              "[FollowGate] Server config loaded:",
+              this.serverConfig
+            );
+          }
+        }
+      } else if (this.config.debug) {
+        console.warn(
+          "[FollowGate] Failed to fetch server config:",
+          response.status
+        );
+      }
+    } catch (error) {
+      if (this.config.debug) {
+        console.warn("[FollowGate] Failed to fetch server config:", error);
+      }
+    }
+    this.configFetched = true;
+  }
   /**
    * Show the FollowGate modal
    * If user is already unlocked, calls onComplete immediately
    */
-  show() {
+  async show() {
     if (!this.config) {
       throw new Error("[FollowGate] SDK not initialized. Call init() first.");
     }
@@ -497,6 +551,7 @@ var FollowGateClient = class {
       this.config.onComplete?.();
       return;
     }
+    await this.fetchServerConfig();
     this.injectStyles();
     this.createModal();
   }
@@ -626,10 +681,22 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after following.</p>
+      ${this.serverConfig?.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;
@@ -725,10 +792,14 @@ var FollowGateClient = class {
         </button>
       </div>
       <p class="fg-hint">A new window will open. Return here after reposting.</p>
+      ${this.serverConfig?.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;
@@ -806,9 +877,9 @@ var FollowGateClient = class {
           <span class="fg-verify-text">Verifying follow & repost</span>
         </div>
         ${username ? `
-          <div class="fg-user-badge" style="margin: 0;">
-            <div class="fg-user-badge-dot" style="background: #facc15;"></div>
-            <span class="fg-user-badge-text">@${username}</span>
+          <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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@followgate/js",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "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",