arkada-widgets 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +130 -1
  2. package/dist/arkada-widgets.js +1 -1
  3. package/dist/{arkada-wvbs-widget-Br6vFpXu.js → arkada-wvbs-widget-CHW9cF3Q.js} +23 -23
  4. package/dist/arkada-wvbs-widget.js +1 -1
  5. package/dist/index.cjs +72 -92
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.js +72 -92
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1203,76 +1203,64 @@ function WalletSmallIcon(props) {
1203
1203
  // src/widgets/verify-wallet-button/components/VerifyWalletButton.tsx
1204
1204
  var import_jsx_runtime2 = require("react/jsx-runtime");
1205
1205
  function CompactInner({ state, theme }) {
1206
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1206
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("rounded-2xl bg-(--arkada-bg)"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1207
1207
  "div",
1208
1208
  {
1209
- className: cn("rounded-2xl", theme === "dark" ? "bg-black" : "bg-white"),
1210
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1209
+ className: cn(
1210
+ "rounded-2xl p-px",
1211
+ theme === "dark" ? "vwb-gradient-border-dark" : "vwb-gradient-border-light"
1212
+ ),
1213
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1211
1214
  "div",
1212
1215
  {
1213
1216
  className: cn(
1214
- "rounded-2xl p-px",
1215
- theme === "dark" ? "vwb-gradient-border-dark" : "vwb-gradient-border-light"
1217
+ "flex items-center gap-[12px] rounded-[15px] px-[12px] py-[8px]",
1218
+ theme === "dark" ? "vwb-border-dark" : "vwb-border-light-compact"
1216
1219
  ),
1217
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1218
- "div",
1219
- {
1220
- className: cn(
1221
- "flex items-center gap-[12px] rounded-[15px] px-[12px] py-[8px]",
1222
- theme === "dark" ? "vwb-border-dark" : "vwb-border-light-compact"
1223
- ),
1224
- children: [
1225
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1226
- ChainGroupIcon,
1227
- {
1228
- verified: state === "verified",
1229
- className: "h-[40px] w-[68px] shrink-0"
1230
- }
1231
- ),
1232
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vwb-gradient-text font-semibold font-sans text-[18px] leading-none whitespace-nowrap", children: "Verify Wallet" })
1233
- ]
1234
- }
1235
- )
1220
+ children: [
1221
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1222
+ ChainGroupIcon,
1223
+ {
1224
+ verified: state === "verified",
1225
+ className: "h-[40px] w-[68px] shrink-0"
1226
+ }
1227
+ ),
1228
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vwb-gradient-text font-semibold font-sans text-[18px] leading-none whitespace-nowrap", children: "Verify Wallet" })
1229
+ ]
1236
1230
  }
1237
1231
  )
1238
1232
  }
1239
- );
1233
+ ) });
1240
1234
  }
1241
1235
  function CompactMinimalInner({ state, theme }) {
1242
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1236
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("rounded-2xl bg-(--arkada-bg)"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1243
1237
  "div",
1244
1238
  {
1245
- className: cn("rounded-2xl", theme === "dark" ? "bg-black" : "bg-white"),
1246
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1239
+ className: cn(
1240
+ "rounded-2xl p-px",
1241
+ theme === "dark" ? "vwb-gradient-border-dark" : "vwb-gradient-border-light"
1242
+ ),
1243
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1247
1244
  "div",
1248
1245
  {
1249
1246
  className: cn(
1250
- "rounded-2xl p-px",
1251
- theme === "dark" ? "vwb-gradient-border-dark" : "vwb-gradient-border-light"
1247
+ "flex items-center gap-[12px] rounded-[15px] p-[12px]",
1248
+ "bg-(--arkada-bg-foreground)"
1252
1249
  ),
1253
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1254
- "div",
1255
- {
1256
- className: cn(
1257
- "flex items-center gap-[12px] rounded-[15px] p-[12px]",
1258
- theme === "dark" ? "bg-[#1f1f1f]" : "bg-white"
1259
- ),
1260
- children: [
1261
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1262
- ToggleIcon,
1263
- {
1264
- verified: state === "verified",
1265
- className: "h-[32px] w-[58px] shrink-0"
1266
- }
1267
- ),
1268
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vwb-gradient-text font-semibold font-sans text-[18px] leading-none whitespace-nowrap", children: "Verify Wallet" })
1269
- ]
1270
- }
1271
- )
1250
+ children: [
1251
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1252
+ ToggleIcon,
1253
+ {
1254
+ verified: state === "verified",
1255
+ className: "h-[32px] w-[58px] shrink-0"
1256
+ }
1257
+ ),
1258
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vwb-gradient-text font-semibold font-sans text-[18px] leading-none whitespace-nowrap", children: "Verify Wallet" })
1259
+ ]
1272
1260
  }
1273
1261
  )
1274
1262
  }
1275
- );
1263
+ ) });
1276
1264
  }
1277
1265
  function GradientCompactInner({ state }) {
1278
1266
  const isVerified = state === "verified";
@@ -1291,50 +1279,44 @@ function GradientCompactInner({ state }) {
1291
1279
  className: "h-[40px] w-[68px] shrink-0"
1292
1280
  }
1293
1281
  ),
1294
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold font-sans text-[18px] leading-none text-white whitespace-nowrap", children: "Verify Wallet" })
1282
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold font-sans text-[18px] leading-none text-(--arkada-text-primary) whitespace-nowrap", children: "Verify Wallet" })
1295
1283
  ]
1296
1284
  }
1297
1285
  ) }) });
1298
1286
  }
1299
1287
  function BannerInner({ state, theme }) {
1300
1288
  const isVerified = state === "verified";
1301
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1289
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("rounded-2xl bg-(--arkada-bg)"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1302
1290
  "div",
1303
1291
  {
1304
- className: cn("rounded-2xl", theme === "dark" ? "bg-black" : "bg-white"),
1305
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1292
+ className: cn(
1293
+ "rounded-2xl p-px",
1294
+ theme === "dark" ? "vwb-gradient-border-dark" : "vwb-gradient-border-light"
1295
+ ),
1296
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1306
1297
  "div",
1307
1298
  {
1308
1299
  className: cn(
1309
- "rounded-2xl p-px",
1310
- theme === "dark" ? "vwb-gradient-border-dark" : "vwb-gradient-border-light"
1300
+ "flex w-[260px] items-center gap-[6px] rounded-[15px] p-[6px]",
1301
+ theme === "dark" ? "vwb-border-dark" : "vwb-border-light-banner"
1311
1302
  ),
1312
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1313
- "div",
1314
- {
1315
- className: cn(
1316
- "flex w-[260px] items-center gap-[6px] rounded-[15px] p-[6px]",
1317
- theme === "dark" ? "vwb-border-dark" : "vwb-border-light-banner"
1318
- ),
1319
- children: [
1320
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "shrink-0 shadow-2xl", children: isVerified ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckCircleIcon, { className: "size-[40px]" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletCircleIcon, { className: "size-[40px]" }) }),
1321
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1322
- "div",
1323
- {
1324
- className: cn(
1325
- "flex flex-1 items-center justify-center self-stretch rounded-xl",
1326
- isVerified ? "vwb-verified-gradient" : "vwb-cta-gradient"
1327
- ),
1328
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold font-sans text-[18px] leading-none text-white whitespace-nowrap", children: isVerified ? "Wallet Verified" : "Verify Wallet" })
1329
- }
1330
- )
1331
- ]
1332
- }
1333
- )
1303
+ children: [
1304
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "shrink-0 shadow-2xl", children: isVerified ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckCircleIcon, { className: "size-[40px]" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletCircleIcon, { className: "size-[40px]" }) }),
1305
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1306
+ "div",
1307
+ {
1308
+ className: cn(
1309
+ "flex flex-1 items-center justify-center self-stretch rounded-xl",
1310
+ isVerified ? "vwb-verified-gradient" : "vwb-cta-gradient"
1311
+ ),
1312
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold font-sans text-[18px] leading-none text-white whitespace-nowrap", children: isVerified ? "Wallet Verified" : "Verify Wallet" })
1313
+ }
1314
+ )
1315
+ ]
1334
1316
  }
1335
1317
  )
1336
1318
  }
1337
- );
1319
+ ) });
1338
1320
  }
1339
1321
  function FloatingGradientInner({ state }) {
1340
1322
  const isVerified = state === "verified";
@@ -1385,14 +1367,13 @@ function FloatingInner({ state }) {
1385
1367
  }
1386
1368
  ) });
1387
1369
  }
1388
- function PillInner({ state, theme }) {
1370
+ function PillInner({ state }) {
1389
1371
  const isVerified = state === "verified";
1390
1372
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1391
1373
  "div",
1392
1374
  {
1393
1375
  className: cn(
1394
- "relative flex h-[54px] w-[220px] items-center rounded-2xl",
1395
- theme === "dark" ? "bg-black" : "bg-white"
1376
+ "relative flex h-[54px] w-[220px] items-center rounded-2xl bg-(--arkada-bg)"
1396
1377
  ),
1397
1378
  children: [
1398
1379
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1402,7 +1383,7 @@ function PillInner({ state, theme }) {
1402
1383
  "absolute left-[4px] top-[4px] flex h-[46px] w-[60px] items-center justify-center rounded-2xl",
1403
1384
  isVerified ? "vwb-verified-gradient" : "vwb-full-gradient"
1404
1385
  ),
1405
- children: isVerified ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckSmallIcon, { className: "h-[18px] w-[21px] scale-150" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronsRightIcon, { className: "size-[32px] text-white" })
1386
+ children: isVerified ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckSmallIcon, { className: "h-[18px] w-[21px] scale-150" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronsRightIcon, { className: "size-[32px]" })
1406
1387
  }
1407
1388
  ),
1408
1389
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-1 items-center justify-center pl-[64px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1410,7 +1391,7 @@ function PillInner({ state, theme }) {
1410
1391
  {
1411
1392
  className: cn(
1412
1393
  "font-semibold font-sans text-[18px] leading-none whitespace-nowrap",
1413
- isVerified ? "text-[#14bd47]" : theme === "dark" ? "text-white" : "text-black"
1394
+ isVerified ? "text-(--color-accent)" : "text-(--arkada-text-primary)"
1414
1395
  ),
1415
1396
  children: isVerified ? "Wallet Verified" : "Verify Wallet"
1416
1397
  }
@@ -1429,21 +1410,20 @@ function PillWideInner({ state }) {
1429
1410
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronsRightIcon, { className: "size-[32px] text-white shrink-0" })
1430
1411
  ] }) }) });
1431
1412
  }
1432
- function OutlinedInner({ state, theme }) {
1413
+ function OutlinedInner({ state }) {
1433
1414
  const isVerified = state === "verified";
1434
1415
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1435
1416
  "div",
1436
1417
  {
1437
1418
  className: cn(
1438
1419
  "relative flex h-[54px] w-[220px] items-center rounded-2xl p-px",
1439
- isVerified ? "bg-[#13b343]" : "vwb-full-gradient"
1420
+ isVerified ? "bg-(--color-accent)" : "vwb-full-gradient"
1440
1421
  ),
1441
1422
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1442
1423
  "div",
1443
1424
  {
1444
1425
  className: cn(
1445
- "relative flex h-full w-full items-center rounded-[15px]",
1446
- theme === "dark" ? "bg-black" : "bg-white"
1426
+ "relative flex h-full w-full items-center rounded-[15px] bg-(--arkada-bg)"
1447
1427
  ),
1448
1428
  children: [
1449
1429
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1453,7 +1433,7 @@ function OutlinedInner({ state, theme }) {
1453
1433
  "absolute left-[3px] top-[3px] flex h-[46px] w-[60px] items-center justify-center rounded-xl",
1454
1434
  isVerified ? "vwb-verified-gradient" : "vwb-full-gradient"
1455
1435
  ),
1456
- children: isVerified ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckSmallIcon, { className: "h-[18px] w-[21px] scale-150" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletSmallIcon, { className: "size-[32px] text-white mt-[4px]" })
1436
+ children: isVerified ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckSmallIcon, { className: "h-[18px] w-[21px] scale-150" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletSmallIcon, { className: "size-[32px] mt-[4px]" })
1457
1437
  }
1458
1438
  ),
1459
1439
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-1 items-center justify-center pl-[64px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1461,7 +1441,7 @@ function OutlinedInner({ state, theme }) {
1461
1441
  {
1462
1442
  className: cn(
1463
1443
  "font-semibold font-sans text-[18px] leading-none whitespace-nowrap",
1464
- isVerified ? "text-[#14bd47]" : theme === "dark" ? "text-white" : "text-black"
1444
+ isVerified ? "text-(--color-accent)" : "text-(--arkada-text-primary)"
1465
1445
  ),
1466
1446
  children: isVerified ? "Wallet Verified" : "Verify Wallet"
1467
1447
  }
@@ -1479,7 +1459,7 @@ function OutlinedWideInner({ state }) {
1479
1459
  {
1480
1460
  className: cn(
1481
1461
  "relative flex h-[54px] w-[220px] items-center rounded-2xl p-px",
1482
- isVerified ? "bg-[#13b343]" : "vwb-full-gradient"
1462
+ isVerified ? "bg-(--color-accent)" : "vwb-full-gradient"
1483
1463
  ),
1484
1464
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1485
1465
  "div",
@@ -1790,7 +1770,7 @@ function WalletVerificationButton({
1790
1770
  }
1791
1771
  const handleVerify = () => {
1792
1772
  window.open(
1793
- `${VERIFICATION_URL}/${walletAddress}${referralCode ? `?ref=${referralCode}` : ""}`,
1773
+ `${VERIFICATION_URL}${referralCode ? `?ref=${referralCode}` : ""}`,
1794
1774
  "_blank",
1795
1775
  "noopener,noreferrer"
1796
1776
  );