@bounded-sh/client 0.0.20 → 0.0.21

package/README.md

@@ -66,13 +66,13 @@ yarn add @tarobase/js-sdk
 
   
 
-Before using the SDK, initialize it with your **Application ID**. You can obtain your `appId` by creating an application on the [Tarobase Console](https://console.tarobase.com). The console also allows you to configure your application's policies, including data storage preferences (on-chain or off-chain) and data schemas.
+Before using the SDK, initialize it with your **Application ID** and the one auth method this app intends to use. You can obtain your `appId` by creating an application on the [Tarobase Console](https://console.tarobase.com). The console also allows you to configure your application's policies, including data storage preferences (on-chain or off-chain) and data schemas.
 
   
 ```typescript
 import { init } from '@tarobase/js-sdk';
 
-init({appId: 'YOUR_APP_ID' });
+init({ appId: 'YOUR_APP_ID', authMethod: 'email' });
 ```  
 
 ### Authentication

package/dist/index.js

@@ -3989,13 +3989,33 @@ function createEmailModalTree() {
     close.type = 'button';
     close.textContent = '×';
     card.appendChild(close);
+    // Brand row — the real Bounded mark (same geometry as bounded.sh) + wordmark.
     const brand = document.createElement('div');
     brand.className = 'ba-brand';
-    const dot = document.createElement('span');
-    dot.className = 'ba-dot';
-    brand.appendChild(dot);
-    brand.appendChild(document.createTextNode(' Sign in'));
+    const mark = document.createElement('span');
+    mark.className = 'ba-mark';
+    mark.setAttribute('aria-hidden', 'true');
+    mark.innerHTML =
+        '<svg width="24" height="24" viewBox="0 0 32 32" fill="none">' +
+            '<path class="ba-c ba-c1" d="M16 5 H5 V16"/>' +
+            '<path class="ba-c ba-c2" d="M16 5 H27 V16"/>' +
+            '<path class="ba-c ba-c3" d="M5 16 V27 H16"/>' +
+            '<path class="ba-c ba-c4" d="M27 16 V27 H16"/>' +
+            '</svg>';
+    brand.appendChild(mark);
+    const word = document.createElement('span');
+    word.className = 'ba-word';
+    word.textContent = 'bounded';
+    brand.appendChild(word);
     card.appendChild(brand);
+    const title = document.createElement('h1');
+    title.className = 'ba-title';
+    title.textContent = 'Sign in';
+    card.appendChild(title);
+    const sub = document.createElement('p');
+    sub.className = 'ba-subtitle';
+    sub.textContent = 'Continue with your email — no wallet needed.';
+    card.appendChild(sub);
     const emailStep = document.createElement('div');
     emailStep.id = 'ba-email-step';
     card.appendChild(emailStep);
@@ -4016,7 +4036,7 @@ function createEmailModalTree() {
     emailButton.id = 'ba-email-btn';
     emailButton.className = 'ba-btn';
     emailButton.type = 'button';
-    emailButton.textContent = 'Continue';
+    emailButton.textContent = 'Continue with email';
     emailStep.appendChild(emailButton);
     const otpStep = document.createElement('div');
     otpStep.id = 'ba-otp-step';
@@ -4061,37 +4081,67 @@ function createEmailModalTree() {
     card.appendChild(foot);
     return root;
 }
+// Design language matches the hosted Bounded login (auth.bounded.sh) and bounded.sh:
+// dark editorial panel, green accent, Schibsted Grotesk / Newsreader / JetBrains Mono,
+// the Bounded mark drawing itself in. Fonts load best-effort (scoped @import); every
+// rule has a system fallback so the modal looks right even if Google Fonts is blocked.
+// All selectors are scoped under #bounded-auth-modal so we never leak into the host page.
 const MODAL_CSS = `
-#bounded-auth-modal .ba-overlay{position:fixed;inset:0;background:rgba(8,10,18,.62);backdrop-filter:blur(4px);
+@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Schibsted+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+#bounded-auth-modal{--ba-bg:#0a0a0b;--ba-panel:#0e0f11;--ba-inset:#060607;--ba-raise:#131416;
+ --ba-line:rgba(232,230,222,.08);--ba-line-strong:rgba(232,230,222,.16);
+ --ba-text:#e8e6de;--ba-dim:#9b9991;--ba-faint:#85837c;--ba-green:#58c98f;
+ --ba-green-bg:rgba(88,201,143,.09);--ba-green-line:rgba(88,201,143,.28);--ba-red:#ec8488;
+ --ba-body:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
+ --ba-display:'Newsreader','Iowan Old Style',Georgia,serif;
+ --ba-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;}
+#bounded-auth-modal .ba-overlay{position:fixed;inset:0;background:rgba(6,6,7,.66);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:2147483000;opacity:1;transition:opacity .16s ease;
- font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:16px;}
+ font-family:var(--ba-body);padding:16px;}
 #bounded-auth-modal .ba-overlay.out{opacity:0;}
-#bounded-auth-modal .ba-card{width:100%;max-width:380px;background:#0f1117;color:#f4f5f7;border:1px solid #232838;
- border-radius:18px;padding:24px 22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.5);position:relative;
- animation:ba-in .18s ease;}
-@keyframes ba-in{from{transform:translateY(10px);opacity:.6}to{transform:translateY(0);opacity:1}}
-#bounded-auth-modal .ba-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;background:#1a1e2b;
- color:#9aa3b2;border-radius:9px;font-size:20px;line-height:1;cursor:pointer;}
-#bounded-auth-modal .ba-x:hover{background:#222838;color:#fff;}
-#bounded-auth-modal .ba-brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin:0 0 18px;}
-#bounded-auth-modal .ba-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#22d3ee);}
-#bounded-auth-modal .ba-label{display:block;font-size:13px;color:#aab2c0;margin:0 0 8px;}
-#bounded-auth-modal .ba-em{color:#fff;font-weight:600;}
-#bounded-auth-modal .ba-input{width:100%;box-sizing:border-box;background:#171b26;border:1px solid #2a3040;color:#fff;
- border-radius:11px;padding:13px 14px;font-size:16px;outline:none;transition:border-color .12s;}
-#bounded-auth-modal .ba-input:focus{border-color:#7c5cff;}
-#bounded-auth-modal .ba-code{letter-spacing:8px;text-align:center;font-size:22px;font-variant-numeric:tabular-nums;}
-#bounded-auth-modal .ba-btn{width:100%;margin-top:12px;background:linear-gradient(135deg,#7c5cff,#5b8cff);color:#fff;
- border:none;border-radius:11px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;transition:filter .12s;}
-#bounded-auth-modal .ba-btn:hover{filter:brightness(1.08);}
-#bounded-auth-modal .ba-btn:disabled{opacity:.6;cursor:default;}
-#bounded-auth-modal .ba-link{width:100%;margin-top:10px;background:none;border:none;color:#8aa0c6;font-size:13px;cursor:pointer;}
-#bounded-auth-modal .ba-link:hover{color:#bcd0f0;}
-#bounded-auth-modal .ba-msg{min-height:18px;margin-top:10px;font-size:13px;color:#8aa0c6;text-align:center;}
-#bounded-auth-modal .ba-msg.err{color:#ff8a8a;}
-#bounded-auth-modal .ba-foot{margin-top:14px;text-align:center;font-size:11px;color:#5a6273;}
+#bounded-auth-modal *{box-sizing:border-box;}
+#bounded-auth-modal .ba-card{width:100%;max-width:372px;background:var(--ba-panel);color:var(--ba-text);
+ border:1px solid var(--ba-line);border-radius:12px;padding:28px 28px 22px;position:relative;
+ box-shadow:0 1px 0 rgba(232,230,222,.03) inset,0 30px 80px -40px rgba(0,0,0,.8);animation:ba-in .18s ease;}
+@keyframes ba-in{from{transform:translateY(8px);opacity:.5}to{transform:translateY(0);opacity:1}}
+#bounded-auth-modal .ba-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border:1px solid var(--ba-line);
+ background:var(--ba-raise);color:var(--ba-faint);border-radius:7px;font-size:18px;line-height:1;cursor:pointer;
+ transition:color .15s,border-color .15s;}
+#bounded-auth-modal .ba-x:hover{color:var(--ba-text);border-color:var(--ba-faint);}
+#bounded-auth-modal .ba-brand{display:flex;align-items:center;gap:10px;margin:0 0 24px;}
+#bounded-auth-modal .ba-mark{display:flex;color:var(--ba-text);}
+#bounded-auth-modal .ba-mark svg{overflow:visible;display:block;}
+#bounded-auth-modal .ba-c{stroke:currentColor;stroke-width:2.4;fill:none;}
+@media (prefers-reduced-motion:no-preference){
+ #bounded-auth-modal .ba-c{stroke-dasharray:23;stroke-dashoffset:23;animation:ba-draw .4s cubic-bezier(.45,0,.2,1) forwards;}
+ #bounded-auth-modal .ba-c1{animation-delay:.1s}#bounded-auth-modal .ba-c2{animation-delay:.38s}
+ #bounded-auth-modal .ba-c3{animation-delay:.66s}#bounded-auth-modal .ba-c4{animation-delay:.94s}}
+@keyframes ba-draw{to{stroke-dashoffset:0}}
+#bounded-auth-modal .ba-word{font-family:var(--ba-body);font-weight:500;font-size:15px;letter-spacing:.2px;color:var(--ba-text);}
+#bounded-auth-modal .ba-title{font-family:var(--ba-display);font-weight:400;font-size:25px;letter-spacing:-.01em;margin:0 0 5px;}
+#bounded-auth-modal .ba-subtitle{color:var(--ba-dim);font-size:14px;margin:0 0 22px;}
+#bounded-auth-modal .ba-label{display:block;font-size:12px;color:var(--ba-dim);margin:0 0 7px;}
+#bounded-auth-modal .ba-em{color:var(--ba-text);font-weight:600;}
+#bounded-auth-modal .ba-input{width:100%;background:var(--ba-inset);border:1px solid var(--ba-line-strong);color:var(--ba-text);
+ border-radius:6px;padding:11px 13px;font-family:var(--ba-body);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s;}
+#bounded-auth-modal .ba-input::placeholder{color:var(--ba-faint);}
+#bounded-auth-modal .ba-input:focus{border-color:var(--ba-green-line);box-shadow:0 0 0 3px var(--ba-green-bg);}
+#bounded-auth-modal .ba-code{font-family:var(--ba-mono);letter-spacing:8px;text-align:center;font-size:21px;padding-left:8px;}
+#bounded-auth-modal .ba-btn{width:100%;margin-top:16px;background:var(--ba-text);color:var(--ba-bg);
+ border:0;border-radius:6px;padding:12px;font-family:var(--ba-body);font-size:14px;font-weight:600;cursor:pointer;
+ transition:opacity .15s,transform .04s;}
+#bounded-auth-modal .ba-btn:hover{opacity:.9;}
+#bounded-auth-modal .ba-btn:active{transform:translateY(.5px);}
+#bounded-auth-modal .ba-btn:disabled{opacity:.45;cursor:default;}
+#bounded-auth-modal .ba-link{width:100%;margin-top:14px;background:none;border:none;color:var(--ba-dim);
+ font-family:var(--ba-body);font-size:12.5px;cursor:pointer;}
+#bounded-auth-modal .ba-link:hover{color:var(--ba-text);}
+#bounded-auth-modal .ba-msg{min-height:16px;margin-top:16px;font-size:12.5px;color:var(--ba-dim);text-align:center;}
+#bounded-auth-modal .ba-msg.err{color:var(--ba-red);}
+#bounded-auth-modal .ba-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--ba-line);
+ text-align:center;font-size:11px;color:var(--ba-faint);}
 #bounded-auth-modal .hidden{display:none;}
-@media (max-width:480px){#bounded-auth-modal .ba-card{max-width:none;border-radius:16px;}}`;
+@media (max-width:480px){#bounded-auth-modal .ba-card{max-width:none;}}`;
 
 const SURFNET_RPC_URL = "https://surfpool.fly.dev";
 const SUPPORTED_SOLANA_NETWORKS = new Set([
@@ -4138,6 +4188,7 @@ function resolveSolanaRpcUrl(explicitRpcUrl, network, context) {
 }
 
 const PKCE_STORE_KEY = 'bounded.oidc.pkce';
+const STORED_AUTH_METHOD_KEY$2 = 'bounded_last_auth_method';
 // Active session store (Web on web, RN on React Native) — selected by config,
 // not by `typeof window` (truthy on RN). OIDC redirect/popup is web-only, but the
 // session it mints is read back through this same selector everywhere.
@@ -4432,6 +4483,10 @@ async function exchangeCode(code, verifier, redirectUri) {
     const refreshToken = tokenField(data, 'refresh_token', 'refreshToken');
     const user = userFromIdToken(idToken);
     await sessionManager().storeSession(String(user.address || ''), accessToken, idToken, refreshToken, base);
+    try {
+        getPlatform().storage.setItem(STORED_AUTH_METHOD_KEY$2, 'email');
+    }
+    catch ( /* storage unavailable */_b) { /* storage unavailable */ }
     setCurrentUser(user);
     setAuthProviderInstance(oidcProviderSingleton);
     return user;
@@ -4442,7 +4497,10 @@ async function exchangeCode(code, verifier, redirectUri) {
 // (react-dom) when this module is imported on RN.
 let currentAuthProvider = null;
 let currentAuthMethod = null;
+let currentAuthProviderConfigKey = null;
 let initConfig = null;
+const objectIdentityKeys = new WeakMap();
+let nextObjectIdentityKey = 1;
 // --- localStorage helpers: track which auth method created the active session ---
 const STORED_AUTH_METHOD_KEY$1 = 'bounded_last_auth_method';
 function getStoredAuthMethod() {
@@ -4466,6 +4524,51 @@ function setStoredAuthMethod(method) {
         // storage might not be available
     }
 }
+function objectIdentityKey(value) {
+    if (!value || (typeof value !== 'object' && typeof value !== 'function'))
+        return null;
+    const obj = value;
+    let id = objectIdentityKeys.get(obj);
+    if (!id) {
+        id = nextObjectIdentityKey++;
+        objectIdentityKeys.set(obj, id);
+    }
+    return `object:${id}`;
+}
+function stableConfigValue(value, seen = new WeakSet()) {
+    if (value === null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')
+        return value;
+    if (typeof value === 'function')
+        return '[function]';
+    if (Array.isArray(value))
+        return value.map((item) => stableConfigValue(item, seen));
+    if (typeof value === 'object') {
+        if (seen.has(value))
+            return '[circular]';
+        seen.add(value);
+        const out = {};
+        for (const key of Object.keys(value).sort()) {
+            out[key] = stableConfigValue(value[key], seen);
+        }
+        seen.delete(value);
+        return out;
+    }
+    return String(value);
+}
+function authProviderConfigKey(config) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return JSON.stringify({
+        authMethod: (_a = config.authMethod) !== null && _a !== void 0 ? _a : null,
+        chain: (_b = config.chain) !== null && _b !== void 0 ? _b : null,
+        rpcUrl: normalizeSolanaRpcUrl(config.rpcUrl),
+        name: (_c = config.name) !== null && _c !== void 0 ? _c : null,
+        logoUrl: (_d = config.logoUrl) !== null && _d !== void 0 ? _d : null,
+        phantomConfig: stableConfigValue((_e = config.phantomConfig) !== null && _e !== void 0 ? _e : null),
+        privyConfig: stableConfigValue((_f = config.privyConfig) !== null && _f !== void 0 ? _f : null),
+        mobileWalletConfig: stableConfigValue((_g = config.mobileWalletConfig) !== null && _g !== void 0 ? _g : null),
+        privyExpoProvider: objectIdentityKey((_h = config.privyExpoProvider) !== null && _h !== void 0 ? _h : null),
+    });
+}
 /**
  * Clears the session if it was created by a different auth method.
  * Returns true if the session was cleared, false if the session is compatible.
@@ -4571,6 +4674,7 @@ async function hotSwapToMWAProvider(config) {
     }
     currentAuthProvider = provider;
     currentAuthMethod = 'mobile-wallet-adapter';
+    currentAuthProviderConfigKey = authProviderConfigKey(Object.assign(Object.assign({}, config), { authMethod: 'mobile-wallet-adapter' }));
     const coreConfig = await core.getConfig();
     coreConfig.authProvider = provider;
     // Send 'phantom' as authMethod so the server routes to Solana verification.
@@ -4581,12 +4685,18 @@ async function hotSwapToMWAProvider(config) {
 }
 async function getAuthProvider(config) {
     var _a, _b;
-    if (currentAuthProvider) {
+    const nextProviderConfigKey = config ? authProviderConfigKey(config) : null;
+    if (currentAuthProvider && (!config || currentAuthProviderConfigKey === nextProviderConfigKey)) {
         return currentAuthProvider;
     }
     if (!config) {
         throw new Error("Config is required to initialize auth provider");
     }
+    if (currentAuthProvider && currentAuthProviderConfigKey !== nextProviderConfigKey) {
+        currentAuthProvider = null;
+        currentAuthMethod = null;
+        currentAuthProviderConfigKey = null;
+    }
     initConfig = config;
     const authMethod = config.authMethod;
     if (!authMethod) {
@@ -4669,6 +4779,7 @@ async function getAuthProvider(config) {
         console.log("[Offchain] Wrapping auth provider for Poofnet transaction tracking");
         currentAuthProvider = new OffchainAuthProvider(currentAuthProvider);
     }
+    currentAuthProviderConfigKey = nextProviderConfigKey;
     return currentAuthProvider;
 }
 /**
@@ -4698,6 +4809,7 @@ async function signInAnonymously() {
     const provider = new GuestAuthProvider();
     currentAuthProvider = provider;
     currentAuthMethod = 'guest';
+    currentAuthProviderConfigKey = 'direct:guest';
     const coreConfig = await core.getConfig();
     coreConfig.authProvider = provider;
     coreConfig.authMethod = 'guest';
@@ -4742,6 +4854,7 @@ async function loginWithPrivy(options) {
         provider = new OffchainAuthProvider(provider);
     }
     currentAuthProvider = provider;
+    currentAuthProviderConfigKey = authProviderConfigKey(Object.assign(Object.assign({}, coreConfig), { authMethod: currentAuthMethod }));
     coreConfig.authProvider = provider;
     coreConfig.authMethod = currentAuthMethod;
     setAuthProviderInstance(provider);
@@ -4758,6 +4871,7 @@ async function activateEmailProvider() {
     const provider = new EmailAuthProvider();
     currentAuthProvider = provider;
     currentAuthMethod = 'email';
+    currentAuthProviderConfigKey = 'direct:email';
     const coreConfig = await core.getConfig();
     coreConfig.authProvider = provider;
     coreConfig.authMethod = 'email';
@@ -4884,6 +4998,7 @@ async function logout$1() {
     setStoredAuthMethod(null);
     currentAuthProvider = null;
     currentAuthMethod = null;
+    currentAuthProviderConfigKey = null;
 }
 
 /**