@use-glyph/sdk-react 0.0.1

package/LICENSE

@@ -0,0 +1,17 @@
+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”).
+
+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.
+
+This License does not include the right to (i) create derivative works or (ii) use any trade names, trademarks, or service marks of the Ape Foundation, a Cayman Foundation (e.g., Apechain or ApeCoin), or Yuga Labs or any of their respective affiliates or development partners except as expressly required in the notice statement below. This License is not an express or implied warranty, endorsement or approval of Developer Products and Services. Licensee shall use the Glyph Code in compliance with all applicable laws.
+
+All copies of the Glyph Code shall include the following notice statement: “This Glyph Code is licensed by Yuga Labs, Inc. and may only be used in accordance with the Glyph Software License v1.0 published at https://useglyph.io/license ” This License applies to any copies of the Glyph Code, regardless of where the copies were obtained.
+
+THE GLYPH CODE IS PROVIDED “AS IS,” “WHERE IS,” AND “AS AVAILABLE,” WITH ALL FAULTS AND WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION, WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND TITLE. WITHOUT LIMITING THE GENERALITY OF THE FOREGOING, (I) CERTAIN FUNCTIONALITY OR ENTIRE RELEASES OF THE GLYPH CODE MAY BE RELEASED AS BETA OR TEST VERSIONS, MAY CONTAIN ERRORS, BUGS AND OTHER DEFICIENCIES, AND ARE USED BY YOU AT YOUR OWN RISK; AND (II) THE GLYPH CODE IS SUBJECT TO CHANGES AND REDESIGNS, WHETHER BY YUGA LABS OR THIRD PARTIES, IN FUTURE RELEASES WITHOUT NOTICE WHICH MAY RENDER CERTAIN FUNCTIONALITY OR ENTIRE VERSIONS OF EARLIER RELEASES OF THE GLYPH CODE UNSUPPORTED AND OBSOLETE.
+
+IN NO EVENT SHALL YUGA LABS, ITS AFFILIATES, ITS LICENSORS OR LICENSEES, AND EACH OF THEIR RESPECTIVE OFFICERS, DIRECTORS, SHAREHOLDERS, MEMBERS, SUPERVISORS, MANAGERS, EMPLOYEES, ADVISORS, CONTRACTORS, DEVELOPMENT PARTNERS, AGENTS, AND SUCCESSORS AND ASSIGNS (“RELEASEES”) BE LIABLE FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL, INCIDENTAL, EXEMPLARY, PUNITIVE, OR SPECIAL DAMAGES OF ANY NATURE ARISING FROM, OUT OF OR IN CONNECTION WITH, THE GLYPH CODE OR USE THEREOF, INCLUDING WITHOUT LIMITATION, THE PROVISION OF DEVELOPER PRODUCTS AND SERVICES. THIS LICENSE SHALL NOT BE CONSTRUED, INTERPRETED, CLASSIFIED OR TREATED AS ENABLING, OR OFFERING ANY OPPORTUNITY TO, THE LICENSEE TO PARTICIPATE IN OR RECEIVE ANY PROFITS, INCOME, OR OTHER PAYMENTS OR RETURNS ARISING FROM OR IN CONNECTION WITH THIS LICENSE, THE GLYPH CODE, OR THE DEVELOPER PRODUCTS AND SERVICES (OTHER THAN YOUR DEVELOPER PRODUCTS AND SERVICES). IN USING THE GLYPH CODE, YOU ARE SOLELY RESPONSIBLE FOR YOUR ACTIONS AND YOU WILL INDEMNIFY, DEFEND, AND HOLD EACH RELEASEE HARMLESS FOR ANY LIABILITY ARISING FROM YOUR USE OF THE GLYPH CODE AND ANY DEVELOPER PRODUCTS AND SERVICES.
+
+This License shall be interpreted under the laws of the United States.
+
+END OF LICENSE

package/README.md

@@ -0,0 +1,152 @@
+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.
+
+Accessing Glyph Users through Privy
+
+1. Install the Privy SDK:
+
+```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.

package/dist/EIP1193Strategy.js

@@ -0,0 +1,116 @@
+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(() => {
+    if (typeof window > "u")
+      return null;
+    try {
+      return localStorage.getItem(p);
+    } catch (e) {
+      return n.warn("Error reading session token", e), null;
+    }
+  }), [i, A] = f(() => {
+    if (typeof window > "u")
+      return null;
+    try {
+      return localStorage.getItem(I);
+    } catch (e) {
+      return n.warn("Error reading session nonce", e), null;
+    }
+  });
+  x(() => {
+    try {
+      o ? (localStorage.setItem(p, o), localStorage.setItem(I, i)) : (localStorage.removeItem(p), localStorage.removeItem(I));
+    } 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.");
+    }
+  }, [a]);
+  x(() => {
+    if (!o || !i) return;
+    const e = b(a || S, async () => o, {
+      "x-evm-address": t,
+      "x-glyph-nonce": i
+    });
+    u(() => e);
+  }, [o, t, a, i]);
+  const W = g(async () => {
+    var e;
+    if (n.log("authenticate"), !t) {
+      n.error("no wallet connected.");
+      return;
+    }
+    try {
+      if (!t || !s) {
+        u(null), l(!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);
+    } finally {
+      l(!1);
+    }
+  }, [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,
+    {
+      value: {
+        ready: !N,
+        authenticated: s && !!t && o !== null,
+        symbol: "APE",
+        glyphUrl: a,
+        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
+      },
+      children: C
+    }
+  );
+};
+J.displayName = "EIP1193Strategy";
+export {
+  J as default
+};

package/dist/PrivyStrategy.js

@@ -0,0 +1,92 @@
+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);
+      return;
+    }
+    if (!d || !a) {
+      h(null), f(!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);
+      }
+    );
+    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);
+      }
+    );
+    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");
+        return;
+      }
+      const t = K(
+        p || O,
+        async () => await P(),
+        { "x-evm-address": s }
+      );
+      h(() => t), f(!1);
+    })();
+  }, [p, d, n, a, g, A, H, r, P, w]), /* @__PURE__ */ q.jsx(
+    z.Provider,
+    {
+      value: {
+        ready: n && !C,
+        authenticated: n && d,
+        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
+      },
+      children: k
+    }
+  );
+};
+W.displayName = "PrivyStrategy";
+const ns = L(W);
+export {
+  ns as default
+};