sphere-connect 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -1007,6 +1007,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;
   }
@@ -1053,7 +1061,9 @@ var SphereProvider = ({ children, config }) => {
   const [wallet, setWallet] = useState(null);
   const [walletInfo, setWalletInfo] = useState(null);
   const [balance, setBalance] = useState(null);
-  const [email, setEmail] = useState(null);
+  const [userEmail, setUserEmail] = useState(null);
+  const [userName, setUserName] = useState(null);
+  const [userPicture, setUserPicture] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const refreshData = useCallback(async (activeWallet) => {
@@ -1071,12 +1081,17 @@ var SphereProvider = ({ children, config }) => {
   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);
     };
@@ -1088,7 +1103,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) {
@@ -1141,7 +1158,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,
@@ -1188,19 +1209,18 @@ var SphereModal = ({ isOpen, onClose }) => {
     /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
       /* @__PURE__ */ jsx("div", { style: { width: 32 } }),
       " ",
+      /* @__PURE__ */ jsx("h2", { style: styles.title, children: "Login or sign up" }),
       /* @__PURE__ */ jsx("button", { style: styles.closeBtn, onClick: onClose, "aria-label": "Close", children: "\xD7" })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: styles.content, children: [
-      /* @__PURE__ */ jsx("h2", { style: styles.title, children: "Connect to Sphere" }),
-      /* @__PURE__ */ jsx("p", { style: styles.description, children: "Experience the next generation of account abstraction. Secure, fast, and effortless." }),
-      error && /* @__PURE__ */ jsx("div", { style: styles.errorBanner, children: error }),
-      /* @__PURE__ */ jsx("div", { style: styles.actionContainer, children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ 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,
@@ -1208,15 +1228,16 @@ var SphereModal = ({ isOpen, onClose }) => {
             isLoading || localLoading ? /* @__PURE__ */ jsx("div", { style: styles.spinner }) : /* @__PURE__ */ 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__ */ jsx("span", { style: styles.socialText, children: "Google" })
           ]
         }
-      ) }),
+      ),
+      error && /* @__PURE__ */ jsx("div", { style: styles.errorBanner, children: error }),
       /* @__PURE__ */ jsx("style", { children: `
                         @keyframes sphere-spin {
                             0% { transform: rotate(0deg); }
@@ -1224,8 +1245,8 @@ var SphereModal = ({ isOpen, onClose }) => {
                         }
                     ` }),
       /* @__PURE__ */ jsxs("div", { style: styles.footer, children: [
-        "Securely powered by ",
-        /* @__PURE__ */ jsx("strong", { children: "Sphere SDK" })
+        "Protected by ",
+        /* @__PURE__ */ jsx("strong", { children: "Sphere" })
       ] })
     ] })
   ] }) });
@@ -1248,62 +1269,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)",
@@ -1316,49 +1348,64 @@ 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] = 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__ */ jsx("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: name || "Avatar",
+        referrerPolicy: "no-referrer",
+        onError: () => setImageError(true),
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        }
+      }
+    ) });
   }
+  return /* @__PURE__ */ jsx("div", { className, style: containerStyle, children: initials });
 };
 
-export { ErrorCode, GoogleAuthProvider, KeyDerivation, SecureStorage, SessionManager, SphereAccountAbstraction, SphereModal, SphereProvider, SphereSDKError, SphereWallet, useSphere };
+export { ErrorCode, GoogleAuthProvider, KeyDerivation, SecureStorage, SessionManager, SphereAccountAbstraction, SphereAvatar, SphereModal, SphereProvider, SphereSDKError, SphereWallet, useSphere };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map