@paywithglide/glide-react 0.0.2 → 0.0.4

package/dist/GlideDeposit.d.ts

@@ -6,6 +6,64 @@ export type EVMTransaction = {
     data?: Hex;
     value?: bigint;
 };
+export type PermitTypedData<ChainId extends Hex | bigint> = {
+    types: {
+        EIP712Domain: [
+            {
+                name: "name";
+                type: "string";
+            },
+            {
+                name: "version";
+                type: "string";
+            },
+            {
+                name: "chainId";
+                type: "uint256";
+            },
+            {
+                name: "verifyingContract";
+                type: "address";
+            }
+        ];
+        Permit: [
+            {
+                name: "owner";
+                type: "address";
+            },
+            {
+                name: "spender";
+                type: "address";
+            },
+            {
+                name: "value";
+                type: "uint256";
+            },
+            {
+                name: "nonce";
+                type: "uint256";
+            },
+            {
+                name: "deadline";
+                type: "uint256";
+            }
+        ];
+    };
+    primaryType: "Permit";
+    domain: {
+        name: string;
+        version: string;
+        chainId: ChainId;
+        verifyingContract: Hex;
+    };
+    message: {
+        deadline: bigint;
+        nonce: bigint;
+        owner: Hex;
+        spender: Hex;
+        value: bigint;
+    };
+};
 export type GlideDepositWalletProvider = {
     address: Hex | undefined;
     availableChainIds: number[] | undefined;
@@ -14,10 +72,12 @@ export type GlideDepositWalletProvider = {
         chainId: number;
     }) => Promise<unknown>;
     sendTransactionAsync: (tx: EVMTransaction) => Promise<Hex>;
+    signTypedDataAsync?: (args: PermitTypedData<bigint>) => Promise<Hex>;
 };
 export type GlideDepositOptions = {
     app: string;
     recipient?: Hex;
+    mode: "deposit" | "withdraw";
     walletProvider?: GlideDepositWalletProvider;
     baseUrl?: string;
 };

package/dist/glide.js

@@ -1,24 +1,24 @@
-var m = Object.defineProperty;
-var u = (s, e, t) => e in s ? m(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var c = (s, e, t) => u(s, typeof e != "symbol" ? e + "" : e, t);
-import { useMemo as w, useEffect as f } from "react";
-class y {
+var v = Object.defineProperty;
+var b = (o, e, t) => e in o ? v(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var l = (o, e, t) => b(o, typeof e != "symbol" ? e + "" : e, t);
+import { useMemo as I, useEffect as E } from "react";
+class P {
   constructor(e) {
-    c(this, "opts");
-    c(this, "didInit", !1);
-    c(this, "open", () => {
-      var e, t, i;
+    l(this, "opts");
+    l(this, "didInit", !1);
+    l(this, "open", () => {
+      var e, t, s, a;
       if (!document.body.classList.contains("glide-deposit-open")) {
-        if (document.body.classList.add("glide-deposit-open"), !this.opts.recipient)
-          throw new Error("recipient is required");
-        const o = this.opts.recipient, n = (e = this.opts.walletProvider) == null ? void 0 : e.address, r = (t = this.opts.walletProvider) == null ? void 0 : t.availableChainIds, a = (i = this.opts.walletProvider) == null ? void 0 : i.currentChainId;
+        if (document.body.classList.add("glide-deposit-open"), this.opts.mode === "deposit" && !this.opts.recipient)
+          throw new Error("recipient is required for deposit mode");
+        const i = this.opts.recipient, n = (e = this.opts.walletProvider) == null ? void 0 : e.address, d = (t = this.opts.walletProvider) == null ? void 0 : t.availableChainIds, c = (s = this.opts.walletProvider) == null ? void 0 : s.currentChainId, p = !!((a = this.opts.walletProvider) != null && a.signTypedDataAsync);
         this.openUrl(
-          `${this.baseUrl}${this.opts.app}?recipient=${o}&embed=true${n ? `&connectedWalletAddress=${n}` : ""}${a ? `&currentChainId=${a}` : ""}${r ? `&availableChainIds=${r.join(",")}` : ""}`
+          `${this.baseUrl}${this.opts.app}?embed=true${i ? `&recipient=${i}` : ""}${n ? `&connectedWalletAddress=${n}` : ""}${c ? `&currentChainId=${c}` : ""}${d ? `&availableChainIds=${d.join(",")}` : ""}${p ? "&preferGaslessPayment=true" : ""}&mode=${this.opts.mode}`
         );
       }
     });
-    c(this, "iframeEventHandler", async (e) => {
-      var i, o, n, r, a, l, h, p;
+    l(this, "iframeEventHandler", async (e) => {
+      var s, a, i, n, d, c, p, h, m, y, u, w, f, g;
       const t = e.data;
       switch (t.type) {
         case "close":
@@ -30,7 +30,7 @@ class y {
           try {
             await this.opts.walletProvider.switchChainAsync({
               chainId: t.chainId
-            }), (o = (i = this.iframe) == null ? void 0 : i.contentWindow) == null || o.postMessage(
+            }), (a = (s = this.iframe) == null ? void 0 : s.contentWindow) == null || a.postMessage(
               {
                 type: "didSwitchChain",
                 success: !0,
@@ -38,12 +38,12 @@ class y {
               },
               this.baseUrl
             );
-          } catch (d) {
-            (r = (n = this.iframe) == null ? void 0 : n.contentWindow) == null || r.postMessage(
+          } catch (r) {
+            (n = (i = this.iframe) == null ? void 0 : i.contentWindow) == null || n.postMessage(
               {
                 type: "didSwitchChain",
                 success: !1,
-                error: d
+                error: r
               },
               this.baseUrl
             );
@@ -54,23 +54,62 @@ class y {
             if (!this.opts.walletProvider)
               throw new Error("walletProvider is not set");
             try {
-              const d = await this.opts.walletProvider.sendTransactionAsync(
+              const r = await this.opts.walletProvider.sendTransactionAsync(
                 t.tx
               );
-              (l = (a = this.iframe) == null ? void 0 : a.contentWindow) == null || l.postMessage(
+              (c = (d = this.iframe) == null ? void 0 : d.contentWindow) == null || c.postMessage(
                 {
                   type: "didSendTransaction",
                   success: !0,
-                  txHash: d
+                  txHash: r
                 },
                 this.baseUrl
               );
-            } catch (d) {
-              (p = (h = this.iframe) == null ? void 0 : h.contentWindow) == null || p.postMessage(
+            } catch (r) {
+              (h = (p = this.iframe) == null ? void 0 : p.contentWindow) == null || h.postMessage(
                 {
                   type: "didSendTransaction",
                   success: !1,
-                  error: d
+                  error: r
+                },
+                this.baseUrl
+              );
+            }
+          }
+          break;
+        case "signTypedData":
+          {
+            if (!this.opts.walletProvider)
+              throw new Error("walletProvider is not set");
+            if (!this.opts.walletProvider.signTypedDataAsync) {
+              (y = (m = this.iframe) == null ? void 0 : m.contentWindow) == null || y.postMessage(
+                {
+                  type: "didSignTypedData",
+                  success: !1,
+                  error: "signTypedDataAsync_not_implemented"
+                },
+                this.baseUrl
+              );
+              return;
+            }
+            try {
+              const r = await this.opts.walletProvider.signTypedDataAsync(
+                t.data
+              );
+              (w = (u = this.iframe) == null ? void 0 : u.contentWindow) == null || w.postMessage(
+                {
+                  type: "didSignTypedData",
+                  success: !0,
+                  signature: r
+                },
+                this.baseUrl
+              );
+            } catch (r) {
+              (g = (f = this.iframe) == null ? void 0 : f.contentWindow) == null || g.postMessage(
+                {
+                  type: "didSignTypedData",
+                  success: !1,
+                  error: r
                 },
                 this.baseUrl
               );
@@ -103,8 +142,8 @@ class y {
       "style",
       "z-index: 2147483647; display: block; background-color: transparent; border: 0px none transparent; overflow-x: hidden; overflow-y: auto; visibility: visible; margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;"
     ), t.src = e, t.allow = "payment", document.body.appendChild(t), window.setTimeout(() => {
-      var i;
-      (i = t == null ? void 0 : t.contentWindow) == null || i.focus();
+      var s;
+      (s = t == null ? void 0 : t.contentWindow) == null || s.focus();
     }, 100);
   }
   removeIframe() {
@@ -116,35 +155,37 @@ class y {
     e.innerHTML = "@keyframes pulse { 0% { opacity: 1; transform: scale(0.1); } 100% { opacity: 0; transform: scale(1); } }", document.head.appendChild(e);
     const t = document.createElement("div");
     t.setAttribute("class", "glide-deposit-loader");
-    const i = document.createElement("main");
-    i.setAttribute(
+    const s = document.createElement("main");
+    s.setAttribute(
       "style",
       "display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%;"
-    ), t.appendChild(i), document.body.appendChild(t);
+    ), t.appendChild(s), document.body.appendChild(t);
   }
   hideLoader() {
     document.querySelectorAll(".glide-deposit-loader").forEach((e) => e.remove());
   }
 }
-const b = ({
-  app: s,
+const T = ({
+  app: o,
   recipient: e,
-  walletProvider: t,
-  baseUrl: i
+  mode: t = "deposit",
+  walletProvider: s,
+  baseUrl: a
 }) => {
-  const o = w(() => new y({
-    app: s,
+  const i = I(() => new P({
+    app: o,
     recipient: e,
-    walletProvider: t,
-    baseUrl: i
-  }), [s, e, t, i]);
-  return f(() => (o.initialize(), () => {
-    o.destroy();
-  }), [o]), {
-    openGlideDeposit: o.open
+    mode: t,
+    walletProvider: s,
+    baseUrl: a
+  }), [o, e, t, s, a]);
+  return E(() => (i.initialize(), () => {
+    i.destroy();
+  }), [i]), {
+    openGlideDeposit: i.open
   };
 };
 export {
-  y as GlideDeposit,
-  b as useGlideDeposit
+  P as GlideDeposit,
+  T as useGlideDeposit
 };

package/dist/useGlideDeposit.d.ts

@@ -2,10 +2,11 @@ import { GlideDepositWalletProvider, Hex } from './GlideDeposit.ts';
 interface UseGlideDepositProps {
     app: string;
     recipient?: Hex;
+    mode?: "deposit" | "withdraw";
     walletProvider: GlideDepositWalletProvider;
     baseUrl?: string;
 }
-export declare const useGlideDeposit: ({ app, recipient, walletProvider, baseUrl, }: UseGlideDepositProps) => {
+export declare const useGlideDeposit: ({ app, recipient, mode, walletProvider, baseUrl, }: UseGlideDepositProps) => {
     openGlideDeposit: () => void;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paywithglide/glide-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "dist"
@@ -23,6 +23,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@paywithglide/glide-js": "^0.9.33",
     "@tanstack/react-query": "^5.61.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",