@swetrix/captcha 1.0.3 → 2.0.1

package/dist/pages/light.html

@@ -24,6 +24,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      position: relative;
 
       /* 300 - 20px (padding) */
       width: 280px;
@@ -31,7 +32,7 @@
       /* bg-gray-100 */
       background-color: #f9fafb;
       border: 1px solid #e9e9e9;
-      height: 65px;
+      height: 64px;
       -webkit-user-select: none;
       user-select: none;
       padding-left: 10px;
@@ -49,57 +50,80 @@
       display: flex;
       align-items: center;
       cursor: pointer;
-
-      /* divide the space between #challenge and #branding as a proportion of 5 to 1 using flex */
-      flex: 5;
+      flex: 1;
     }
 
     #action {
       margin-right: 10px;
+      position: relative;
+      width: 28px;
+      height: 28px;
     }
 
     #checkbox {
       background-color: #fff;
-      border: 1px solid #e9e9e9;
+      border: 1px solid #c4c4c4;
       height: 25px;
       width: 25px;
       border-radius: 3px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      transition: opacity 0.25s ease, transform 0.25s ease;
+    }
+
+    #checkbox:hover {
+      border-color: #a0a0a0;
     }
 
     #status {
-      font-size: 16px;
+      font-size: 14px;
       color: #0f0f0f;
     }
 
-    .hidden {
-      display: none !important;
+    #status span {
+      transition: opacity 0.2s ease;
     }
 
-    #branding {
+    #status-computing {
       display: flex;
       flex-direction: column;
-      align-items: flex-end;
-      flex: 1;
     }
 
-    #legal {
-      font-size: 10px;
+    .hidden {
+      display: none !important;
     }
 
-    #legal>a {
-      color: #0f0f0f;
-      text-decoration: none;
-      cursor: pointer;
+    /* Fade out animation for hiding elements */
+    .fade-out {
+      opacity: 0 !important;
+      transform: translate(-50%, -50%) scale(0.8) !important;
+      pointer-events: none;
     }
 
-    #legal>a:hover {
-      text-decoration: underline;
+    /* Fade in animation for showing elements */
+    .fade-in {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
     }
 
-    #legal>.separator::before {
-      content: "-";
-      margin: 0 2px;
-      color: #0f0f0f;
+    #branding {
+      position: absolute;
+      bottom: 4px;
+      right: 10px;
+    }
+
+    #branding a {
+      font-size: 9px;
+      color: #6b7280;
+      text-decoration: none;
+      transition: color 0.2s ease;
+    }
+
+    #branding a:hover {
+      color: #374151;
+      text-decoration: underline;
     }
 
     #action svg {
@@ -107,80 +131,106 @@
       height: 28px;
     }
 
-    #failure>svg {
+    #failure > svg {
       /* bg-red-500 */
       color: #d6292a;
     }
 
-    #completed>svg {
+    #completed > svg {
       /* bg-green-600 */
       color: #16a24c;
     }
 
-    #completed, #failure {
+    #completed,
+    #failure {
       display: flex;
       align-items: center;
       justify-content: center;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.8);
+      opacity: 0;
+      transition: opacity 0.3s ease, transform 0.3s ease;
     }
 
-    /* Loading indicator */
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
+    #completed.show,
+    #failure.show {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
 
-      100% {
-        transform: rotate(360deg);
+    /* Checkmark draw animation */
+    #completed.show svg path {
+      stroke-dasharray: 24;
+      stroke-dashoffset: 24;
+      animation: drawCheck 0.4s ease forwards 0.1s;
+    }
+
+    @keyframes drawCheck {
+      to {
+        stroke-dashoffset: 0;
       }
     }
 
+    /* Failure shake animation */
+    #failure.show {
+      animation: shake 0.4s ease;
+    }
+
+    @keyframes shake {
+      0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
+      25% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
+      75% { transform: translate(-50%, -50%) scale(1) rotate(5deg); }
+    }
+
+    /* Loading indicator - Material Design style spinner */
     #loading {
-      border-radius: 50%;
-      width: 17px;
-      height: 17px;
-      border: 4px solid #b4b4b4;
-      border-top-color: #fff;
-      animation: spin 2s infinite linear;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 24px;
+      height: 24px;
+      opacity: 0;
+      transition: opacity 0.25s ease;
     }
 
-    #manual-challenge {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: row;
-      border: 1px solid #e9e9e9;
-      border-top: none;
-      height: 130px;
-      width: 280px;
-      padding-left: 10px;
-      padding-right: 10px;
-      gap: 10px;
+    #loading.show {
+      opacity: 1;
     }
 
-    #input-n-captcha {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      cursor: pointer;
-      flex: 5;
+    #loading svg {
+      width: 24px;
+      height: 24px;
+      animation: rotate 1.4s linear infinite;
     }
 
-    #input-n-captcha > input {
-      width: 100%;
+    #loading svg circle {
+      stroke: #3b82f6;
+      stroke-linecap: round;
+      animation: dash 1.4s ease-in-out infinite;
     }
 
-    #manual-submit-btn {
-      background-color: #fff;
-      border: 1px solid #e9e9e9;
-      padding-left: 5px;
-      padding-right: 5px;
-      border-radius: 3px;
-      height: 75px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      flex: 1;
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
     }
   </style>
   <script>
@@ -201,41 +251,34 @@
       <div id="action">
         <!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
         <div id="checkbox"></div>
-        <div id="failure" class="hidden">
-          <svg fill="transparent" fill-opacity="0" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        <div id="failure">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
+            <path d="M12 9v4"/>
+            <path d="M12 17h.01"/>
+          </svg>
+        </div>
+        <div id="completed">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M20 6 9 17l-5-5"/>
           </svg>
         </div>
-        <div id="completed" class="hidden">
-          <svg fill="transparent" fill-opacity="0" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+        <div id="loading">
+          <svg viewBox="0 0 50 50">
+            <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
           </svg>
         </div>
-        <div id="loading" class="hidden"></div>
       </div>
       <div id="status">
         <span id="status-default">I am human</span>
         <span id="status-failure" class="hidden">Failure, please retry</span>
+        <span id="status-computing" class="hidden">
+          <span>Verifying...</span>
+        </span>
       </div>
     </div>
     <div id="branding">
-      <a href="https://swetrix.com" target="_blank" rel="noopener noreferrer">
-        <img src="../assets/logo_blue.png" alt="Swetrix" width="81" height="18" />
-      </a>
-      <div id="legal">
-        <a href="https://swetrix.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a>
-        <span class="separator"></span>
-        <a href="https://swetrix.com/terms" target="_blank" rel="noopener noreferrer">Terms</a>
-      </div>
-    </div>
-  </div>
-  <div id="manual-challenge" class="hidden">
-    <div id="input-n-captcha">
-      <div id="svg-captcha"></div>
-      <input aria-label="Enter the code from image" type="text" id="svg-captcha-input" autocomplete="off" />
-    </div>
-    <div id="manual-submit-btn">
-      Submit
+      <a href="https://swetrix.com/captcha" target="_blank" rel="noopener noreferrer">Swetrix Captcha</a>
     </div>
   </div>
 </body>

package/dist/pages/test.html

@@ -17,7 +17,7 @@
     }
   </style>
 
-  <script src="../captcha-loader.js" defer></script>
+  <script src="../../dist/captcha-loader.js" defer></script>
 </head>
 
 <body>
@@ -25,7 +25,7 @@
     <input type="text" name="name" value="name">
     <input type="text" name="email" value="email">
     <input type="number" name="number" value="number">
-    <div class="swecaptcha" data-project-id="MP00000000000" data-theme="dark"></div>
+    <div class="swecaptcha" data-project-id="AP00000000000" data-theme="light"></div>
     <input type="submit" value="Submit">
   </form>
 </body>

package/dist/pow-worker.js

@@ -0,0 +1,2 @@
+!function(){"use strict";async function e(e){const t=(new TextEncoder).encode(e),s=await crypto.subtle.digest("SHA-256",t);return Array.from(new Uint8Array(s)).map(e=>e.toString(16).padStart(2,"0")).join("")}function t(e,t){for(let s=0;s<t;s++)if("0"!==e[s])return!1;return!0}self.onmessage=async s=>{if(!s.data){const e={type:"error",message:"Invalid message: event.data is missing or empty"};return void self.postMessage(e)}const{challenge:n,difficulty:a,maxIterations:r}=s.data;if("string"!=typeof n||0===n.length){const e={type:"error",message:"Invalid message: challenge must be a non-empty string"};return void self.postMessage(e)}if("number"!=typeof a||!Number.isInteger(a)){const e={type:"error",message:"Invalid message: difficulty must be an integer"};return void self.postMessage(e)}if(a<1||a>32){const e={type:"error",message:"Invalid message: difficulty must be between 1 and 32"};return void self.postMessage(e)}const o=null!=r?r:1e8;if("number"!=typeof o||!Number.isInteger(o)){const e={type:"error",message:"Invalid message: maxIterations must be an integer"};return void self.postMessage(e)}if(o<1){const e={type:"error",message:"Invalid message: maxIterations must be at least 1"};return void self.postMessage(e)}await async function(s,n,a){let r=0;const o=Date.now();for(;r<a;){const a=`${s}:${r}`,i=await e(a);if(t(i,n)){const e={type:"result",nonce:r,solution:i};return void self.postMessage(e)}if(r++,r%1e4==0){const e=(Date.now()-o)/1e3,t={type:"progress",attempts:r,hashRate:Math.round(r/e)};self.postMessage(t)}}const i=Date.now()-o,g=i/1e3,f=g>0?Math.round(r/g):0,m={type:"timeout",reason:`Maximum iterations reached (${a.toLocaleString()})`,attempts:r,elapsedMs:i,hashRate:f};self.postMessage(m)}(n,a,o)}}();
+//# sourceMappingURL=pow-worker.js.map

package/dist/pow-worker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pow-worker.js","sources":["../src/pow-worker.ts"],"sourcesContent":[null],"names":["async","sha256","message","data","TextEncoder","encode","hashBuffer","crypto","subtle","digest","Array","from","Uint8Array","map","b","toString","padStart","join","hasValidPrefix","hash","difficulty","i","self","onmessage","event","error","type","postMessage","challenge","maxIterations","length","Number","isInteger","effectiveMaxIterations","nonce","startTime","Date","now","input","result","solution","elapsed","progress","attempts","hashRate","Math","round","elapsedMs","timeout","reason","toLocaleString","solveChallenge"],"mappings":"yBA4CAA,eAAeC,EAAOC,GACpB,MACMC,GADU,IAAIC,aACCC,OAAOH,GACtBI,QAAmBC,OAAOC,OAAOC,OAAO,UAAWN,GAEzD,OADkBO,MAAMC,KAAK,IAAIC,WAAWN,IAC3BO,IAAKC,GAAMA,EAAEC,SAAS,IAAIC,SAAS,EAAG,MAAMC,KAAK,GACpE,CAGA,SAASC,EAAeC,EAAcC,GACpC,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAYC,IAC9B,GAAgB,MAAZF,EAAKE,GACP,OAAO,EAGX,OAAO,CACT,CAsDAC,KAAKC,UAAYvB,MAAOwB,IAEtB,IAAKA,EAAMrB,KAAM,CACf,MAAMsB,EAAkB,CACtBC,KAAM,QACNxB,QAAS,mDAGX,YADAoB,KAAKK,YAAYF,EAEnB,CAEA,MAAMG,UAAEA,EAASR,WAAEA,EAAUS,cAAEA,GAAkBL,EAAMrB,KAGvD,GAAyB,iBAAdyB,GAA+C,IAArBA,EAAUE,OAAc,CAC3D,MAAML,EAAkB,CACtBC,KAAM,QACNxB,QAAS,yDAGX,YADAoB,KAAKK,YAAYF,EAEnB,CAGA,GAA0B,iBAAfL,IAA4BW,OAAOC,UAAUZ,GAAa,CACnE,MAAMK,EAAkB,CACtBC,KAAM,QACNxB,QAAS,kDAGX,YADAoB,KAAKK,YAAYF,EAEnB,CAEA,GAAIL,EAAa,GAAKA,EA9ID,GA8I8B,CACjD,MAAMK,EAAkB,CACtBC,KAAM,QACNxB,QAAS,wDAGX,YADAoB,KAAKK,YAAYF,EAEnB,CAGA,MAAMQ,EAAyBJ,QAAAA,EArJF,IAsJ7B,GAAsC,iBAA3BI,IAAwCF,OAAOC,UAAUC,GAAyB,CAC3F,MAAMR,EAAkB,CACtBC,KAAM,QACNxB,QAAS,qDAGX,YADAoB,KAAKK,YAAYF,EAEnB,CAEA,GAAIQ,EAAyB,EAAG,CAC9B,MAAMR,EAAkB,CACtBC,KAAM,QACNxB,QAAS,qDAGX,YADAoB,KAAKK,YAAYF,EAEnB,OA/GFzB,eAA8B4B,EAAmBR,EAAoBS,GACnE,IAAIK,EAAQ,EACZ,MAAMC,EAAYC,KAAKC,MAGvB,KAAOH,EAAQL,GAAe,CAC5B,MAAMS,EAAQ,GAAGV,KAAaM,IACxBf,QAAalB,EAAOqC,GAE1B,GAAIpB,EAAeC,EAAMC,GAAa,CAEpC,MAAMmB,EAAoB,CACxBb,KAAM,SACNQ,QACAM,SAAUrB,GAGZ,YADAG,KAAKK,YAAYY,EAEnB,CAKA,GAHAL,IAGIA,EApBmB,KAoBU,EAAG,CAClC,MACMO,GADYL,KAAKC,MAAQF,GACH,IAEtBO,EAAwB,CAC5BhB,KAAM,WACNiB,SAAUT,EACVU,SAJeC,KAAKC,MAAMZ,EAAQO,IAMpCnB,KAAKK,YAAYe,EACnB,CACF,CAGA,MAAMK,EAAYX,KAAKC,MAAQF,EACzBM,EAAUM,EAAY,IACtBH,EAAWH,EAAU,EAAII,KAAKC,MAAMZ,EAAQO,GAAW,EACvDO,EAAsB,CAC1BtB,KAAM,UACNuB,OAAQ,+BAA+BpB,EAAcqB,oBACrDP,SAAUT,EACVa,YACAH,YAEFtB,KAAKK,YAAYqB,EACnB,CAiEQG,CAAevB,EAAWR,EAAYa"}

package/package.json

@@ -1,11 +1,27 @@
 {
   "name": "@swetrix/captcha",
-  "version": "1.0.3",
+  "version": "2.0.1",
   "description": "Swetrix CAPTCHA",
+  "type": "module",
   "captchaloader": "dist/captcha-loader.js",
   "captcha": "dist/captcha.js",
   "esnext": "dist/esnext/index.js",
   "typings": "dist/esnext/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esnext/index.js",
+      "require": "./dist/captcha.cjs.js",
+      "types": "./dist/esnext/index.d.ts",
+      "default": "./dist/captcha.js"
+    }
+  },
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "prepublish": "npm run build",
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "tsc": "tsc -p tsconfig.esnext.json"
+  },
   "keywords": [
     "swetrix",
     "analytics",
@@ -15,33 +31,23 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Swetrix/swetrix-js.git"
+    "url": "git+https://github.com/Swetrix/swetrix-captcha.git"
   },
-  "author": "Andrii R. <contact@swetrix.com>",
-  "funding": "https://ko-fi.com/andriir",
+  "author": "Swetrix Ltd <contact@swetrix.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/Swetrix/swetrix-js/issues"
-  },
-  "homepage": "https://swetrix.com/docs",
-  "dependencies": {
-    "@types/node": "^18.15.3",
-    "rollup-plugin-copy": "^3.4.0",
-    "tslib": "^2.5.0"
+    "url": "https://github.com/Swetrix/swetrix-captcha/issues"
   },
+  "homepage": "https://swetrix.com/captcha",
   "devDependencies": {
-    "rimraf": "^4.4.0",
-    "rollup": "^2.79.1",
-    "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-typescript2": "^0.34.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^22.15.21",
+    "rollup-plugin-copy": "^3.5.0",
+    "tslib": "^2.8.1",
     "@blaumaus/rollup-plugin-uglify": "^7.0.1",
-    "typescript": "^5.0.2"
-  },
-  "scripts": {
-    "prebuild": "rimraf dist",
-    "prepublish": "npm run build",
-    "build": "rollup -c && tsc -p tsconfig.esnext.json",
-    "start": "rollup -c -w",
-    "tsc": "tsc -p tsconfig.esnext.json"
+    "rimraf": "^5.0.7",
+    "rollup": "^4.54.0",
+    "typescript": "^5.9.3"
   }
-}
+}

package/rollup.config.mjs

@@ -0,0 +1,83 @@
+// import commonjs from '@rollup/plugin-commonjs'
+import copy from 'rollup-plugin-copy'
+import typescript from '@rollup/plugin-typescript'
+import terser from '@rollup/plugin-terser'
+import pkg from './package.json' with { type: 'json' }
+import { createRequire } from 'node:module'
+
+const CAPTCHA_PATH = 'src/captcha.ts'
+const CAPTCHA_LOADER_PATH = 'src/captcha-loader.ts'
+const POW_WORKER_PATH = 'src/pow-worker.ts'
+
+const require = createRequire(import.meta.url)
+
+export default [
+  {
+    input: CAPTCHA_PATH,
+    output: [
+      {
+        file: pkg.captcha,
+        format: 'umd',
+        name: 'captcha',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      typescript({
+        outDir: './dist',
+        sourceMap: true,
+        tslib: require.resolve('tslib'),
+      }),
+
+      // copying assets
+      copy({
+        targets: [
+          { src: 'src/assets/*', dest: 'dist/assets' },
+          { src: 'src/pages/*', dest: 'dist/pages' },
+        ],
+      }),
+      terser(),
+      // commonjs(),
+    ],
+  },
+  {
+    input: CAPTCHA_LOADER_PATH,
+    output: [
+      {
+        file: pkg.captchaloader,
+        format: 'umd',
+        name: 'captcha-loader',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      typescript({
+        outDir: './dist',
+        sourceMap: true,
+        tslib: require.resolve('tslib'),
+      }),
+      terser(),
+      // commonjs(),
+    ],
+  },
+  {
+    input: POW_WORKER_PATH,
+    output: [
+      {
+        file: 'dist/pow-worker.js',
+        format: 'iife',
+        name: 'powWorker',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      typescript({
+        outDir: './dist',
+        sourceMap: true,
+        tslib: require.resolve('tslib'),
+      }),
+      terser(),
+      // commonjs(),
+    ],
+  },
+]

package/src/captcha-loader.ts

@@ -17,16 +17,11 @@ enum LOG_ACTIONS {
   info = 'info',
 }
 
-const DUMMY_PIDS = [
-  'AP00000000000', 'MP00000000000', 'FAIL000000000',
-]
+const DUMMY_PIDS = ['AP00000000000', 'FAIL000000000']
 
 const isValidPID = (pid: string) => DUMMY_PIDS.includes(pid) || PID_REGEX.test(pid)
 
-const FRAME_HEIGHT_MAPPING = {
-  default: '66px',
-  manual: '200px',
-}
+const FRAME_HEIGHT = '66px'
 
 const getFrameID = (cid: string) => `${cid}-frame`
 
@@ -37,9 +32,11 @@ const log = (status: LOG_ACTIONS, text: string) => {
 }
 
 const appendParamsToURL = (url: string, params: any) => {
-  const queryString = Object.keys(params).map((key) => {
-    return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
-  }).join('&')
+  const queryString = Object.keys(params)
+    .map((key) => {
+      return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
+    })
+    .join('&')
 
   return `${url}?${queryString}`
 }
@@ -79,9 +76,7 @@ const postMessageCallback = (pmEvent: MessageEvent) => {
     return
   }
 
-  const {
-    type, cid, event,
-  } = data
+  const { type, cid, event } = data
 
   if (type !== MESSAGE_IDENTIFIER) {
     return
@@ -132,32 +127,6 @@ const postMessageCallback = (pmEvent: MessageEvent) => {
 
       break
     }
-    
-    case 'manualStarted': {
-      const frame = document.getElementById(getFrameID(cid))
-
-      if (!frame) {
-        log(LOG_ACTIONS.error, '[PM -> manualStarted] Frame does not exist.')
-        return
-      }
-
-      frame.style.height = FRAME_HEIGHT_MAPPING.manual
-
-      break
-    }
-
-    case 'manualFinished': {
-      const frame = document.getElementById(getFrameID(cid))
-
-      if (!frame) {
-        log(LOG_ACTIONS.error, '[PM -> manualFinished] Frame does not exist.')
-        return
-      }
-
-      frame.style.height = FRAME_HEIGHT_MAPPING.default
-
-      break
-    }
   }
 }
 
@@ -166,10 +135,11 @@ const generateCaptchaFrame = (params: any) => {
   const captchaFrame = document.createElement('iframe')
 
   captchaFrame.id = getFrameID(params.cid)
-  captchaFrame.src = theme === 'dark'
-    ? appendParamsToURL(DARK_CAPTCHA_IFRAME_URL, params)
-    : appendParamsToURL(LIGHT_CAPTCHA_IFRAME_URL, params)
-  captchaFrame.style.height = FRAME_HEIGHT_MAPPING.default
+  captchaFrame.src =
+    theme === 'dark'
+      ? appendParamsToURL(DARK_CAPTCHA_IFRAME_URL, params)
+      : appendParamsToURL(LIGHT_CAPTCHA_IFRAME_URL, params)
+  captchaFrame.style.height = FRAME_HEIGHT
   captchaFrame.title = 'Swetrix Captcha'
   captchaFrame.style.border = 'none'
   captchaFrame.style.width = '302px'