@use-glyph/sdk-react 0.0.1 → 1.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 GLYPH SOFTWARE LICENSE v1.0
 
-This Glyph Software License (this “License”) is granted by Yuga Labs, Inc. (“Yuga Labs” “we,” or “us”) to the person, entity or organization (“Licensee” or “you” or “your”) downloading or otherwise obtaining a copy of the Glyph software code published and maintained by Yuga Labs at https://github.com/yuga-labs/glyph-sdk (such software code, “Glyph Code”).
+This Glyph Software License (this “License”) is granted by Yuga Labs, Inc. (“Yuga Labs” “we,” or “us”) to the person, entity or organization (“Licensee” or “you” or “your”) downloading or otherwise obtaining a copy of the Glyph software code published and maintained by Yuga Labs at https://github.com/yuga-labs/glyph-sdk-react (such software code, “Glyph Code”).
 
 Yuga Labs grants to Licensee a worldwide, non-exclusive, royalty-free, non-assignable, non-transferrable, non-sublicensable limited copyright license to publicly display, publicly perform, reproduce, and distribute the Glyph Code solely for the purpose of integrating the Glyph Code into your products and services (such products and services, the “Developer Products and Services”). Reproduction and distribution of the Glyph Code by you must include a copy of this License. Except for the express license rights granted above, all right, title and interest in the Glyph Code shall remain with Yuga Labs. Use of the Glyph Code is subject to the terms and conditions set forth at https://useglyph.io/terms (the “Terms and Conditions”). This License shall automatically terminate in the event you violate any provision of this License or of the Terms and Conditions.
 

package/README.md

@@ -1,152 +1,7 @@
-Using the Widget
-Setup
-To use the widget, you need to set up access to Glyph users through Privy's cross-app ecosystem and configure wagmi for EIP1193 wallets.
+# Glyph Widget (React SDK)
 
-Accessing Glyph Users through Privy
+See it in action 🚀: [https://demo.useglyph.io](https://demo.useglyph.io)
 
-1. Install the Privy SDK:
+Dashboard ⚙️: [https://useglyph.io/](https://useglyph.io/)
 
-```sh
-npm install @privy-io/privy-sdk
-```
-
-2. Initialize the Privy client in your application:
-
-```js
-import { PrivyClient } from "@privy-io/privy-sdk";
-
-const privy = new PrivyClient({
-    apiKey: "YOUR_PRIVY_API_KEY",
-    appId: "YOUR_APP_ID"
-});
-```
-
-Use the Priv client to access Glyph users:
-
-```js
-const user = await privy.getUser("USER_ID");
-console.log(user);
-```
-
-1. Setting up wagmi for EIP1193 Wallets
-
-Install wagmi and ethers:
-
-```sh
-npm install wagmi ethers
-```
-
-2. Configure wagmi in your application:
-
-```js
-import { createClient, configureChains, defaultChains } from "wagmi";
-import { publicProvider } from "wagmi/providers/public";
-
-const { chains, provider } = configureChains(defaultChains, [publicProvider()]);
-
-const client = createClient({
-    autoConnect: true,
-    provider
-});
-```
-
-3. Use wagmi hooks to interact with wallets:
-
-```js
-import { useAccount, useConnect, useDisconnect } from "wagmi";
-
-function Wallet() {
-    const { address, isConnected } = useAccount();
-    const { connect, connectors } = useConnect();
-    const { disconnect } = useDisconnect();
-
-    if (isConnected) {
-        return (
-            <div>
-                <div>Connected to {address}</div>
-                <button onClick={() => disconnect()}>Disconnect</button>
-            </div>
-        );
-    }
-
-    return (
-        <div>
-            {connectors.map((connector) => (
-                <button key={connector.id} onClick={() => connect(connector)}>
-                    Connect with {connector.name}
-                </button>
-            ))}
-        </div>
-    );
-}
-```
-
-## Using with Next.js
-
-When using this widget in a Next.js application, you may encounter the following error in the console:
-
-```
-URL scheme "webpack-internal" is not supported.
-```
-
-This happens because Next.js uses webpack for bundling, while this widget is built with Vite, and they handle asset URLs differently.
-
-### Solution
-
-1. Make sure you're using the latest version of the widget which includes fixes for Next.js compatibility.
-
-2. If you're still experiencing the issue, create a `next.config.js` file in your project root (or modify your existing one) to properly handle the widget's assets:
-
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-    webpack: (config) => {
-        // This helps resolve the "URL scheme webpack-internal is not supported" error
-        config.module.rules.push({
-            test: /\.(woff2|jpg|jpeg|png|svg|webp)$/,
-            type: "asset/resource"
-        });
-
-        return config;
-    }
-};
-
-module.exports = nextConfig;
-```
-
-3. Import the CSS file explicitly in your Next.js application:
-
-```jsx
-// In your _app.js or layout.js
-import "@yuga-labs/glyph-sdk-react/style.css";
-```
-
-4. If you're using Next.js App Router, you may need to add the following to your `app/layout.js` file:
-
-```jsx
-export const metadata = {
-    // your existing metadata
-};
-
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <head>
-                {/* Add this line to ensure fonts are loaded correctly */}
-                <link
-                    href="/assets/Gramatika-Regular.woff2"
-                    rel="preload"
-                    as="font"
-                    type="font/woff2"
-                    crossOrigin="anonymous"
-                />
-            </head>
-            <body>{children}</body>
-        </html>
-    );
-}
-```
-
-5. Copy the font files from `node_modules/@yuga-labs/glyph-sdk-react/dist/assets/` to your `public/assets/` directory to ensure they're available at runtime.
-
-By following these steps, you can set up the widget to access Glyph users through Privy's cross-app ecosystem and configure wagmi for EIP1193 wallets.
+Documentation 📝: [https://docs.useglyph.io/](https://docs.useglyph.io/)

package/dist/EIP1193Strategy.js

@@ -1,116 +1,147 @@
-import { c as $, W as S, d as b, j as M, a as O, b as D } from "./index.js";
-import { useState as f, useCallback as g, useEffect as x } from "react";
-import { useAccount as K, useDisconnect as G, useSignMessage as R, useSendTransaction as Y, useAccountEffect as B } from "wagmi";
-const p = "__glyph-widget-token__", I = "__glyph-widget-nonce__", n = $("EIP1193Strategy"), J = ({ children: C, glyphUrl: a, onLogin: y, onLogout: h }) => {
-  const [N, l] = f(!1), [P, u] = f(null), { address: t, isConnected: s, chainId: j } = K(), { disconnectAsync: _ } = G(), { signMessageAsync: w } = R(), { sendTransactionAsync: F } = Y();
-  B({
-    onDisconnect: () => {
-      T();
-    }
-  }), n.log({ address: t, isConnected: s });
-  const [o, m] = f(() => {
+import { c as B, W as C, d as J, a as q, j as z, b as H } from "./index.js";
+import { useState as f, useEffect as p, useCallback as d } from "react";
+import { useAccount as Q, useDisconnect as V, useSignMessage as X, useSendTransaction as Z, useAccountEffect as L } from "wagmi";
+const T = "__glyph-widget-token__", k = "__glyph-widget-nonce__", r = B("EIP1193Strategy"), U = ({
+  children: O,
+  glyphUrl: o,
+  onLogin: E,
+  onLogout: S,
+  askForSignature: A = !0
+}) => {
+  const [D, c] = f(!1), [F, h] = f(null), { address: t, isConnected: s, chainId: b } = Q(), { disconnectAsync: x } = V(), { signMessageAsync: m } = X(), { sendTransactionAsync: N } = Z();
+  r.log({ address: t, isConnected: s });
+  const [i, I] = f(() => {
     if (typeof window > "u")
       return null;
     try {
-      return localStorage.getItem(p);
+      return localStorage.getItem(T);
     } catch (e) {
-      return n.warn("Error reading session token", e), null;
+      return r.warn("Error reading session token", e), null;
     }
-  }), [i, A] = f(() => {
+  }), [g, K] = f(null), [n, _] = f(() => {
     if (typeof window > "u")
       return null;
     try {
-      return localStorage.getItem(I);
+      return localStorage.getItem(k);
     } catch (e) {
-      return n.warn("Error reading session nonce", e), null;
+      return r.warn("Error reading session nonce", e), null;
     }
   });
-  x(() => {
+  p(() => {
     try {
-      o ? (localStorage.setItem(p, o), localStorage.setItem(I, i)) : (localStorage.removeItem(p), localStorage.removeItem(I));
+      !i || !n ? (localStorage.removeItem(T), localStorage.removeItem(k)) : (localStorage.setItem(T, i), localStorage.setItem(k, n));
     } catch (e) {
-      n.error("Error saving session token", e);
-    }
-  }, [i, o]);
-  const v = g(async (e) => {
-    try {
-      return await fetch(`${a || S}/api/widget/auth/message/${e}`).then(
-        (c) => c.json()
-      );
-    } catch (r) {
-      throw n.error("Can't fetch message to sign", r), new Error("Failed to fetch the message to sign.");
-    }
-  }, [a]), k = g(async (e, r, c) => {
-    try {
-      return await fetch(`${a || S}/api/widget/auth/verify/${e}`, {
-        method: "POST",
-        body: JSON.stringify({ signature: r, nonce: c })
-      }).then((E) => E.json());
-    } catch (d) {
-      throw n.error("Can't verify signature", d), new Error("Signature verification failed.");
+      r.error("Error saving session token", e);
     }
-  }, [a]);
-  x(() => {
-    if (!o || !i) return;
-    const e = b(a || S, async () => o, {
+  }, [n, i]);
+  const P = d(
+    async (e) => {
+      try {
+        return await fetch(
+          `${o || C}/api/widget/auth/message/${e}`
+        ).then((l) => l.json());
+      } catch (a) {
+        throw r.error("Can't fetch message to sign", a), new Error("Failed to fetch the message to sign.");
+      }
+    },
+    [o]
+  ), j = d(
+    async (e, a, l) => {
+      try {
+        return await fetch(`${o || C}/api/widget/auth/verify/${e}`, {
+          method: "POST",
+          body: JSON.stringify({ signature: a, nonce: l })
+        }).then((w) => w.json());
+      } catch (y) {
+        throw r.error("Can't verify signature", y), new Error("Signature verification failed.");
+      }
+    },
+    [o]
+  );
+  p(() => {
+    !t || !s || n || (c(!0), P(t).then(({ message: e, nonce: a }) => {
+      K(e), _(a), c(!1);
+    }).finally(() => {
+      c(!1);
+    }));
+  }, [t, s, P, n]), p(() => {
+    if (!i || !n) return;
+    const e = J(o || C, async () => i, {
       "x-evm-address": t,
-      "x-glyph-nonce": i
+      "x-glyph-nonce": n
     });
-    u(() => e);
-  }, [o, t, a, i]);
-  const W = g(async () => {
-    var e;
-    if (n.log("authenticate"), !t) {
-      n.error("no wallet connected.");
+    h(() => e);
+  }, [i, t, o, n]);
+  const v = d(async () => {
+    var e, a, l, y, w;
+    if (r.log("authenticate"), !t) {
+      r.error("no wallet connected.");
       return;
     }
     try {
-      if (!t || !s) {
-        u(null), l(!1);
+      if (!t || !s || !g || !n) {
+        h(null), c(!1);
         return;
       }
-      l(!0);
-      const { message: r, nonce: c } = await v(t), d = await w({ account: t, message: r }), E = (e = await k(t, d, c)) == null ? void 0 : e.token;
-      m(E), A(c);
-    } catch (r) {
-      n.error("Authentication failed", r), u(null), m(null), A(null);
+      c(!0);
+      const u = await m({ account: t, message: g }), Y = (e = await j(t, u, n)) == null ? void 0 : e.token;
+      I(Y);
+    } catch (u) {
+      r.error("Authentication failed", u), (w = (l = (a = u == null ? void 0 : u.message) == null ? void 0 : a.toLowerCase) == null ? void 0 : (y = l.call(a)).includes) != null && w.call(y, "user rejected") || await alert(
+        "Authentication failed - your browser could be blocking the popups. Allow popups or try to manually click sign in."
+      ), h(null), I(null), _(null);
     } finally {
-      l(!1);
+      c(!1), E == null || E();
+    }
+  }, [t, s, g, n, m, j]), M = d(
+    async (e = !1) => {
+      r.log(`logout: disconnect=${e}`), _(null), I(null), c(!1), h(null), e && await x(), S == null || S();
+    },
+    [x]
+  ), G = d(
+    async ({ message: e }) => {
+      if (!t || !s)
+        throw new Error("Wallet not connected");
+      return m({ account: t, message: e });
+    },
+    [t, s, m]
+  ), R = d(
+    async ({ transaction: e }) => {
+      if (!t || !s) throw new Error("Wallet not connected");
+      return N({ ...e, chainId: b || q.id });
+    },
+    [t, s, N, b]
+  ), [W, $] = f(!1);
+  return L({
+    onConnect: () => {
+      A && $(!0);
+    },
+    onDisconnect: () => {
+      M();
     }
-  }, [t, s, v, w, k]), T = g(async (e = !1) => {
-    n.log(`logout: disconnect=${e}`), m(null), l(!1), u(null), e && await _();
-  }, [_]);
-  return /* @__PURE__ */ M.jsx(
-    O.Provider,
+  }), p(() => {
+    A && s && t && W && n && g && (v(), $(!1));
+  }, [s, t, v, W, n, g, A]), /* @__PURE__ */ z.jsx(
+    H.Provider,
     {
       value: {
-        ready: !N,
-        authenticated: s && !!t && o !== null,
+        ready: !D && !!n,
+        authenticated: s && !!t && i !== null,
         symbol: "APE",
-        glyphUrl: a,
+        glyphUrl: o,
+        // Pass as string to avoid type error (we are passing fallback value in useGlyph hook at a common place)
         hideWidget: !s || !t,
-        login: async () => {
-          await W(), y == null || y();
-        },
-        logout: async () => {
-          await T(!0), h == null || h();
-        },
-        signMessage: async ({ message: e }) => {
-          if (!t || !s)
-            throw new Error("Wallet not connected");
-          return w({ account: t, message: e });
-        },
-        sendTransaction: async ({ transaction: e }) => {
-          if (!t || !s) throw new Error("Wallet not connected");
-          return F({ ...e, chainId: j || D.id });
-        },
-        apiFetch: P
+        login: v,
+        logout: M,
+        signMessage: G,
+        sendTransaction: R,
+        apiFetch: F
       },
-      children: C
+      children: O
     }
   );
 };
-J.displayName = "EIP1193Strategy";
+U.displayName = "EIP1193Strategy";
 export {
-  J as default
+  U as default
 };

package/dist/PrivyStrategy.js

@@ -1,92 +1,114 @@
-import { c as B, i as $, S as M, G as T, j as q, a as z, b as J, d as K, W as O } from "./index.js";
-import { usePrivy as Q, useCrossAppAccounts as X, useWallets as Z } from "@privy-io/react-auth";
-import { memo as L, useState as l, useEffect as ss } from "react";
-const e = B("PrivyStrategy"), W = ({ children: k, glyphUrl: p, onLogin: u, onLogout: y, useStagingTenant: g }) => {
-  const [C, f] = l(!0), [D, h] = l(null), [r, R] = l(null), [A, F] = l(!1), {
-    ready: n,
-    authenticated: d,
-    user: a,
-    getAccessToken: P,
-    login: N,
-    logout: w,
-    signMessage: V,
-    sendTransaction: Y
-  } = Q(), { signMessage: j, sendTransaction: U } = X();
-  e.debug(n, d, !!a);
-  const { wallets: H } = Z();
-  return ss(() => {
-    var G, S, i, I, x;
-    if (!n) {
-      h(null), f(!0);
+import { c as J, i as K, S as D, G as R, a as O, j as Q, b as X, d as Z, W as L } from "./index.js";
+import { usePrivy as ss, useCrossAppAccounts as es, useWallets as ts } from "@privy-io/react-auth";
+import { memo as as, useState as p, useEffect as rs, useCallback as u } from "react";
+const t = J("PrivyStrategy"), F = ({ children: N, glyphUrl: y, onLogin: g, onLogout: h, useStagingTenant: f }) => {
+  const [V, A] = p(!0), [Y, m] = p(null), [a, j] = p(null), [n, U] = p(!1), {
+    ready: c,
+    authenticated: i,
+    user: o,
+    getAccessToken: w,
+    login: b,
+    logout: v,
+    signMessage: E,
+    sendTransaction: G
+  } = ss(), { signMessage: S, sendTransaction: T } = es();
+  t.debug(c, i, !!o);
+  const { wallets: H } = ts();
+  rs(() => {
+    var C, l, M;
+    if (!c) {
+      m(null), A(!0);
       return;
     }
-    if (!d || !a) {
-      h(null), f(!1);
+    if (!i || !o) {
+      m(null), A(!1);
       return;
     }
-    let s;
-    const c = $((G = a.wallet) == null ? void 0 : G.address);
-    c && e.debug("Privy (main) EVM embedded wallet", (S = a.wallet) == null ? void 0 : S.address), e.debug("finding cross-app accounts...");
-    const _ = ((I = (i = a.linkedAccounts) == null ? void 0 : i.filter) == null ? void 0 : I.call(i, (t) => t.type === "cross_app")) || [], b = _.filter(
-      (t) => {
-        var o;
-        return ((o = t.providerApp) == null ? void 0 : o.id) !== (g ? M : T);
+    let e;
+    const r = (C = o.linkedAccounts) == null ? void 0 : C.find(
+      (s) => s.type === "wallet" && s.chainType === "ethereum" && s.walletClientType === "privy"
+    ), I = r && K(r.address);
+    I && t.debug("Privy (main) EVM embedded wallet", r.address), t.debug("finding cross-app accounts...");
+    const W = ((M = (l = o.linkedAccounts) == null ? void 0 : l.filter) == null ? void 0 : M.call(l, (s) => s.type === "cross_app")) || [], k = W.filter(
+      (s) => {
+        var d;
+        return ((d = s.providerApp) == null ? void 0 : d.id) !== (f ? D : R);
       }
     );
-    e.debug("linked accounts - non-Glyph", { accounts: b });
-    const m = b.map((t) => t.embeddedWallets[0].address);
-    m.length > 0 && (s = m[0], e.log("using cross_app (non-Glyph) account"), m.length > 1 && e.warn("too many cross_app accounts"));
-    const E = _.filter(
-      (t) => {
-        var o;
-        return ((o = t.providerApp) == null ? void 0 : o.id) === (g ? M : T);
+    t.debug("linked accounts - non-Glyph", { accounts: k });
+    const P = k.map((s) => s.embeddedWallets[0].address);
+    P.length > 0 && (e = P[0], t.log("using cross_app (non-Glyph) account"), P.length > 1 && t.warn("too many cross_app accounts"));
+    const x = W.filter(
+      (s) => {
+        var d;
+        return ((d = s.providerApp) == null ? void 0 : d.id) === (f ? D : R);
       }
     );
-    e.debug("linked accounts - Glyph", { accounts: E });
-    const v = E.map((t) => t.embeddedWallets[0].address);
-    v.length > 0 && (s = v[0], e.log("using cross_app (Glyph) account"), v.length > 1 && e.warn("too many cross_app accounts")), s ? (F(!0), e.log("using cross_app account", s)) : c && (s = (x = a.wallet) == null ? void 0 : x.address, e.log("using Privy (main) EVM embedded wallet", s)), R(s ?? null), (async () => {
-      if (!s) {
-        e.error("user has no wallet");
+    t.debug("linked accounts - Glyph", { accounts: x });
+    const _ = x.map((s) => s.embeddedWallets[0].address);
+    _.length > 0 && (e = _[0], t.log("using cross_app (Glyph) account"), _.length > 1 && t.warn("too many cross_app accounts")), e ? (U(!0), t.log("using cross_app account", e)) : I && (e = r.address, t.log("using Privy (main) EVM embedded wallet", e)), j(e ?? null), (async () => {
+      if (!e) {
+        t.error("user has no wallet");
         return;
       }
-      const t = K(
-        p || O,
-        async () => await P(),
-        { "x-evm-address": s }
+      const s = Z(
+        y || L,
+        async () => await w(),
+        { "x-evm-address": e }
       );
-      h(() => t), f(!1);
+      m(() => s), A(!1);
     })();
-  }, [p, d, n, a, g, A, H, r, P, w]), /* @__PURE__ */ q.jsx(
-    z.Provider,
+  }, [
+    y,
+    i,
+    c,
+    o,
+    f,
+    n,
+    H,
+    a,
+    w,
+    v
+  ]);
+  const B = u(async () => {
+    await b(), g == null || g();
+  }, [b]), $ = u(async () => {
+    v(), h == null || h();
+  }, [v]), q = u(
+    async ({ message: e }) => {
+      if (!a) throw new Error("No wallet address found");
+      return n ? S(e, { address: a }) : E({ message: e });
+    },
+    [a, n, S, E]
+  ), z = u(
+    async ({ transaction: e }) => {
+      if (!a) throw new Error("No wallet address found");
+      const r = { ...e, chainId: O.id };
+      return n ? T(r, { address: a }) : G(r, { address: a });
+    },
+    [a, n, T, G]
+  );
+  return /* @__PURE__ */ Q.jsx(
+    X.Provider,
     {
       value: {
-        ready: n && !C,
-        authenticated: n && d,
+        ready: c && !V,
+        authenticated: c && i,
         symbol: "APE",
-        glyphUrl: p,
-        login: () => {
-          N(), u == null || u();
-        },
-        logout: () => {
-          w(), y == null || y();
-        },
-        signMessage: async ({ message: s }) => {
-          if (!r) throw new Error("No wallet address found");
-          return A ? j(s, { address: r }) : V({ message: s });
-        },
-        sendTransaction: async ({ transaction: s }) => {
-          if (!r) throw new Error("No wallet address found");
-          const c = { ...s, chainId: J.id };
-          return A ? U(c, { address: r }) : Y(c, { address: r });
-        },
-        apiFetch: D
+        glyphUrl: y,
+        // Pass as string to avoid type error (we are passing fallback value in useGlyph hook at a common place)
+        login: B,
+        logout: $,
+        signMessage: q,
+        sendTransaction: z,
+        apiFetch: Y
       },
-      children: k
+      children: N
     }
   );
 };
-W.displayName = "PrivyStrategy";
-const ns = L(W);
+F.displayName = "PrivyStrategy";
+const is = as(F);
 export {
-  ns as default
+  is as default
 };