sphere-connect 1.0.1 → 1.0.3

package/dist/index.d.mts

@@ -209,6 +209,10 @@ interface AccountAbstractionSDK {
     getCurrentWallet(): SphereWalletMethods | null;
     /** Get current user email (if authenticated) */
     getUserEmail(): string | null;
+    /** Get current user name (if authenticated) */
+    getUserName(): string | null;
+    /** Get current user picture URL (if authenticated) */
+    getUserPicture(): string | null;
     /** Get the ephemeral public key for the current session */
     getEphemeralPublicKey(): string | null;
     /** Update network and RPC endpoint */
@@ -269,6 +273,8 @@ declare class SphereAccountAbstraction extends EventEmitter implements AccountAb
     isAuthenticated(): boolean;
     getCurrentWallet(): SphereWalletMethods | null;
     getUserEmail(): string | null;
+    getUserName(): string | null;
+    getUserPicture(): string | null;
     getEphemeralPublicKey(): string | null;
     updateNetwork(network: Network, rpcEndpoint: string): Promise<void>;
     getIndexerUrl(): string | undefined;
@@ -526,7 +532,11 @@ interface SphereContextType {
     wallet: SphereWalletMethods | null;
     walletInfo: WalletInfo | null;
     balance: BalanceInfo | null;
+    /** @deprecated Use userEmail instead */
     email: string | null;
+    userEmail: string | null;
+    userName: string | null;
+    userPicture: string | null;
     indexerUrl: string | undefined;
     isAuthenticated: boolean;
     isLoading: boolean;
@@ -550,4 +560,13 @@ interface SphereModalProps {
 }
 declare const SphereModal: React.FC<SphereModalProps>;
 
-export { type AccountAbstractionSDK, type BalanceInfo, ErrorCode, type ErrorResponse, type FungibleAssetMetadata, GoogleAuthProvider, type GoogleAuthResponse, KeyDerivation, type KeyDerivationOptions, type KeylessConfig, type Network, type SDKConfig, SecureStorage, type SessionData, SessionManager, SphereAccountAbstraction, SphereModal, SphereProvider, SphereSDKError, SphereWallet, type SphereWalletMethods, type StorageProvider, type TransactionHistoryItem, type TransactionOptions, type TransactionResult, type WalletInfo, useSphere };
+interface SphereAvatarProps {
+    src?: string | null;
+    name?: string | null;
+    size?: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const SphereAvatar: React.FC<SphereAvatarProps>;
+
+export { type AccountAbstractionSDK, type BalanceInfo, ErrorCode, type ErrorResponse, type FungibleAssetMetadata, GoogleAuthProvider, type GoogleAuthResponse, KeyDerivation, type KeyDerivationOptions, type KeylessConfig, type Network, type SDKConfig, SecureStorage, type SessionData, SessionManager, SphereAccountAbstraction, SphereAvatar, SphereModal, SphereProvider, SphereSDKError, SphereWallet, type SphereWalletMethods, type StorageProvider, type TransactionHistoryItem, type TransactionOptions, type TransactionResult, type WalletInfo, useSphere };

package/dist/index.d.ts

@@ -209,6 +209,10 @@ interface AccountAbstractionSDK {
     getCurrentWallet(): SphereWalletMethods | null;
     /** Get current user email (if authenticated) */
     getUserEmail(): string | null;
+    /** Get current user name (if authenticated) */
+    getUserName(): string | null;
+    /** Get current user picture URL (if authenticated) */
+    getUserPicture(): string | null;
     /** Get the ephemeral public key for the current session */
     getEphemeralPublicKey(): string | null;
     /** Update network and RPC endpoint */
@@ -269,6 +273,8 @@ declare class SphereAccountAbstraction extends EventEmitter implements AccountAb
     isAuthenticated(): boolean;
     getCurrentWallet(): SphereWalletMethods | null;
     getUserEmail(): string | null;
+    getUserName(): string | null;
+    getUserPicture(): string | null;
     getEphemeralPublicKey(): string | null;
     updateNetwork(network: Network, rpcEndpoint: string): Promise<void>;
     getIndexerUrl(): string | undefined;
@@ -526,7 +532,11 @@ interface SphereContextType {
     wallet: SphereWalletMethods | null;
     walletInfo: WalletInfo | null;
     balance: BalanceInfo | null;
+    /** @deprecated Use userEmail instead */
     email: string | null;
+    userEmail: string | null;
+    userName: string | null;
+    userPicture: string | null;
     indexerUrl: string | undefined;
     isAuthenticated: boolean;
     isLoading: boolean;
@@ -550,4 +560,13 @@ interface SphereModalProps {
 }
 declare const SphereModal: React.FC<SphereModalProps>;
 
-export { type AccountAbstractionSDK, type BalanceInfo, ErrorCode, type ErrorResponse, type FungibleAssetMetadata, GoogleAuthProvider, type GoogleAuthResponse, KeyDerivation, type KeyDerivationOptions, type KeylessConfig, type Network, type SDKConfig, SecureStorage, type SessionData, SessionManager, SphereAccountAbstraction, SphereModal, SphereProvider, SphereSDKError, SphereWallet, type SphereWalletMethods, type StorageProvider, type TransactionHistoryItem, type TransactionOptions, type TransactionResult, type WalletInfo, useSphere };
+interface SphereAvatarProps {
+    src?: string | null;
+    name?: string | null;
+    size?: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const SphereAvatar: React.FC<SphereAvatarProps>;
+
+export { type AccountAbstractionSDK, type BalanceInfo, ErrorCode, type ErrorResponse, type FungibleAssetMetadata, GoogleAuthProvider, type GoogleAuthResponse, KeyDerivation, type KeyDerivationOptions, type KeylessConfig, type Network, type SDKConfig, SecureStorage, type SessionData, SessionManager, SphereAccountAbstraction, SphereAvatar, SphereModal, SphereProvider, SphereSDKError, SphereWallet, type SphereWalletMethods, type StorageProvider, type TransactionHistoryItem, type TransactionOptions, type TransactionResult, type WalletInfo, useSphere };

package/dist/index.js

@@ -1012,6 +1012,14 @@ var SphereAccountAbstraction = class extends EventEmitter {
     const session = this.sessionManager.getCachedSession();
     return session?.userInfo.email || null;
   }
+  getUserName() {
+    const session = this.sessionManager.getCachedSession();
+    return session?.userInfo.name || null;
+  }
+  getUserPicture() {
+    const session = this.sessionManager.getCachedSession();
+    return session?.userInfo.picture || null;
+  }
   getEphemeralPublicKey() {
     return this.currentWallet?.getPublicKey() || null;
   }
@@ -1058,7 +1066,9 @@ var SphereProvider = ({ children, config }) => {
   const [wallet, setWallet] = react.useState(null);
   const [walletInfo, setWalletInfo] = react.useState(null);
   const [balance, setBalance] = react.useState(null);
-  const [email, setEmail] = react.useState(null);
+  const [userEmail, setUserEmail] = react.useState(null);
+  const [userName, setUserName] = react.useState(null);
+  const [userPicture, setUserPicture] = react.useState(null);
   const [isLoading, setIsLoading] = react.useState(true);
   const [error, setError] = react.useState(null);
   const refreshData = react.useCallback(async (activeWallet) => {
@@ -1076,12 +1086,17 @@ var SphereProvider = ({ children, config }) => {
   react.useEffect(() => {
     const onAuth = ({ wallet: wallet2 }) => {
       setWallet(wallet2);
-      setEmail(sdk.getUserEmail());
+      const email = sdk.getUserEmail();
+      setUserEmail(email);
+      setUserName(sdk.getUserName());
+      setUserPicture(sdk.getUserPicture());
       refreshData(wallet2);
     };
     const onLogout = () => {
       setWallet(null);
-      setEmail(null);
+      setUserEmail(null);
+      setUserName(null);
+      setUserPicture(null);
       setWalletInfo(null);
       setBalance(null);
     };
@@ -1093,7 +1108,9 @@ var SphereProvider = ({ children, config }) => {
         const restored = await sdk.restoreSession();
         if (restored) {
           setWallet(restored);
-          setEmail(sdk.getUserEmail());
+          setUserEmail(sdk.getUserEmail());
+          setUserName(sdk.getUserName());
+          setUserPicture(sdk.getUserPicture());
           await refreshData(restored);
         }
       } catch (err) {
@@ -1146,7 +1163,11 @@ var SphereProvider = ({ children, config }) => {
         wallet,
         walletInfo,
         balance,
-        email,
+        email: userEmail,
+        // Restore email for backward compatibility
+        userEmail,
+        userName,
+        userPicture,
         indexerUrl: sdk.getIndexerUrl(),
         isAuthenticated: !!wallet,
         isLoading,
@@ -1193,19 +1214,18 @@ var SphereModal = ({ isOpen, onClose }) => {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.header, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 32 } }),
       " ",
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles.title, children: "Login or sign up" }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { style: styles.closeBtn, onClick: onClose, "aria-label": "Close", children: "\xD7" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles.title, children: "Connect to Sphere" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.description, children: "Experience the next generation of account abstraction. Secure, fast, and effortless." }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.errorBanner, children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.actionContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           style: {
-            ...styles.customButton,
+            ...styles.socialButton,
             opacity: isLoading || localLoading ? 0.7 : 1,
-            cursor: isLoading || localLoading ? "not-allowed" : "pointer"
+            cursor: isLoading || localLoading ? "not-allowed" : "pointer",
+            marginBottom: 0
           },
           onClick: handleLogin,
           disabled: isLoading || localLoading,
@@ -1213,15 +1233,16 @@ var SphereModal = ({ isOpen, onClose }) => {
             isLoading || localLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.spinner }) : /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
-                src: "https://www.gstatic.com/images/branding/product/1x/gsa_512dp.png",
+                src: "https://www.gstatic.com/marketing-cms/assets/images/d5/dc/cfe9ce8b4425b410b49b7f2dd3f3/g.webp=s48-fcrop64=1,00000000ffffffff-rw",
                 alt: "Google",
-                style: styles.googleIcon
+                style: styles.socialIcon
               }
             ),
-            isLoading || localLoading ? "Connecting..." : "Continue with Google"
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.socialText, children: "Google" })
           ]
         }
-      ) }),
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.errorBanner, children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
                         @keyframes sphere-spin {
                             0% { transform: rotate(0deg); }
@@ -1229,8 +1250,8 @@ var SphereModal = ({ isOpen, onClose }) => {
                         }
                     ` }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.footer, children: [
-        "Securely powered by ",
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Sphere SDK" })
+        "Protected by ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Sphere" })
       ] })
     ] })
   ] }) });
@@ -1253,62 +1274,73 @@ var styles = {
     backgroundColor: "#0c0c0c",
     color: "#ffffff",
     width: "90%",
-    maxWidth: "400px",
-    aspectRatio: "1/1",
+    maxWidth: "360px",
     borderRadius: "0",
     position: "relative",
     boxShadow: "0 0 0 1px #222, 0 25px 60px rgba(0, 0, 0, 0.7)",
     overflow: "hidden",
     fontFamily: "Inter, -apple-system, system-ui, sans-serif",
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    padding: "24px",
+    boxSizing: "border-box"
   },
   header: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "24px 24px 0 24px"
+    marginBottom: "24px"
+  },
+  title: {
+    fontSize: "14px",
+    fontWeight: "500",
+    color: "#94a3b8",
+    textAlign: "center",
+    margin: 0,
+    flex: 1
   },
   closeBtn: {
     background: "rgba(255, 255, 255, 0.05)",
     border: "none",
     color: "#888",
-    fontSize: "24px",
+    fontSize: "20px",
     cursor: "pointer",
-    lineHeight: 1,
-    width: "32px",
-    height: "32px",
+    width: "28px",
+    height: "28px",
     borderRadius: "50%",
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    transition: "all 0.2s"
+    justifyContent: "center"
   },
   content: {
     display: "flex",
     flexDirection: "column",
-    padding: "20px",
     alignItems: "center",
-    flex: 1,
-    justifyContent: "center",
-    width: "100%",
-    boxSizing: "border-box"
+    width: "100%"
   },
-  title: {
-    fontSize: "1.5rem",
-    fontWeight: "700",
-    color: "#ffffff",
-    textAlign: "center",
+  socialButton: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "48px",
+    backgroundColor: "transparent",
+    border: "1px solid #333",
+    borderRadius: "0",
+    padding: "0 16px",
     marginBottom: "10px",
-    margin: 0
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#fff",
+    boxSizing: "border-box",
+    transition: "background 0.2s"
   },
-  description: {
-    fontSize: "0.7rem",
-    color: "#94a3b8",
-    textAlign: "center",
-    lineHeight: "1.5",
-    marginBottom: "32px",
-    margin: 0
+  socialIcon: {
+    width: "18px",
+    height: "18px"
+  },
+  socialText: {
+    marginLeft: "12px",
+    fontWeight: "500"
   },
   errorBanner: {
     backgroundColor: "rgba(239, 68, 68, 0.1)",
@@ -1321,47 +1353,62 @@ var styles = {
     textAlign: "center",
     width: "100%"
   },
-  actionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%"
-  },
-  customButton: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "12px",
-    width: "100%",
-    height: "52px",
-    backgroundColor: "#0c0c0c",
-    border: "1px solid #333",
-    borderRadius: "0",
-    cursor: "pointer",
-    fontSize: "15px",
-    fontWeight: "600",
-    color: "#ffffff",
-    transition: "transform 0.1s, opacity 0.2s",
-    boxSizing: "border-box"
-  },
-  googleIcon: {
-    width: "20px",
-    height: "20px"
-  },
   spinner: {
-    width: "20px",
-    height: "20px",
+    width: "18px",
+    height: "18px",
     border: "2px solid rgba(255, 255, 255, 0.1)",
     borderTop: "2px solid #ffffff",
     borderRadius: "50%",
     animation: "sphere-spin 0.8s linear infinite"
   },
   footer: {
-    marginTop: "32px",
+    marginTop: "20px",
     textAlign: "center",
     fontSize: "11px",
-    color: "#475569",
-    letterSpacing: "0.5px"
+    color: "#475569"
+  }
+};
+var SphereAvatar = ({
+  src,
+  name,
+  size = 40,
+  style,
+  className
+}) => {
+  const [imageError, setImageError] = react.useState(false);
+  const containerStyle = {
+    width: `${size}px`,
+    height: `${size}px`,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    backgroundColor: "#2d3748",
+    color: "white",
+    fontWeight: "600",
+    fontSize: `${size * 0.4}px`,
+    userSelect: "none",
+    ...style
+  };
+  const initials = name ? name.charAt(0).toUpperCase() : "?";
+  if (src && !imageError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src,
+        alt: name || "Avatar",
+        referrerPolicy: "no-referrer",
+        onError: () => setImageError(true),
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        }
+      }
+    ) });
   }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: containerStyle, children: initials });
 };
 
 Object.defineProperty(exports, "Account", {
@@ -1398,6 +1445,7 @@ exports.KeyDerivation = KeyDerivation;
 exports.SecureStorage = SecureStorage;
 exports.SessionManager = SessionManager;
 exports.SphereAccountAbstraction = SphereAccountAbstraction;
+exports.SphereAvatar = SphereAvatar;
 exports.SphereModal = SphereModal;
 exports.SphereProvider = SphereProvider;
 exports.SphereSDKError = SphereSDKError;